引入颜色选择器

skyeye-web/src/main/webapp/assets/lib/layui/lay/modules/code.js

-/**
-
- @Name：layui.code 代码修饰器
- @Author：贤心
- @License：MIT
-    
- */
  
 layui.define('jquery', function(exports){
   "use strict";

skyeye-web/src/main/webapp/assets/lib/layui/lay/modules/colorpicker.js

+/** layui-v2.4.5 MIT License By https://www.layui.com */
+ ;layui.define("jquery",function(e){"use strict";var i=layui.jquery,o={config:{},index:layui.colorpicker?layui.colorpicker.index+1e4:0,set:function(e){var o=this;return o.config=i.extend({},o.config,e),o},on:function(e,i){return layui.onevent.call(this,"colorpicker",e,i)}},r=function(){var e=this,i=e.config;return{config:i}},t="colorpicker",n="layui-show",l="layui-colorpicker",c=".layui-colorpicker-main",a="layui-icon-down",s="layui-icon-close",f="layui-colorpicker-trigger-span",d="layui-colorpicker-trigger-i",u="layui-colorpicker-side",p="layui-colorpicker-side-slider",g="layui-colorpicker-basis",v="layui-colorpicker-alpha-bgcolor",h="layui-colorpicker-alpha-slider",m="layui-colorpicker-basis-cursor",b="layui-colorpicker-main-input",k=function(e){var i={h:0,s:0,b:0},o=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),t=r-o;return i.b=r,i.s=0!=r?255*t/r:0,0!=i.s?e.r==r?i.h=(e.g-e.b)/t:e.g==r?i.h=2+(e.b-e.r)/t:i.h=4+(e.r-e.g)/t:i.h=-1,r==o&&(i.h=0),i.h*=60,i.h<0&&(i.h+=360),i.s*=100/255,i.b*=100/255,i},y=function(e){var e=e.indexOf("#")>-1?e.substring(1):e;if(3==e.length){var i=e.split("");e=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]}e=parseInt(e,16);var o={r:e>>16,g:(65280&e)>>8,b:255&e};return k(o)},x=function(e){var i={},o=e.h,r=255*e.s/100,t=255*e.b/100;if(0==r)i.r=i.g=i.b=t;else{var n=t,l=(255-r)*t/255,c=(n-l)*(o%60)/60;360==o&&(o=0),o<60?(i.r=n,i.b=l,i.g=l+c):o<120?(i.g=n,i.b=l,i.r=n-c):o<180?(i.g=n,i.r=l,i.b=l+c):o<240?(i.b=n,i.r=l,i.g=n-c):o<300?(i.b=n,i.g=l,i.r=l+c):o<360?(i.r=n,i.g=l,i.b=n-c):(i.r=0,i.g=0,i.b=0)}return{r:Math.round(i.r),g:Math.round(i.g),b:Math.round(i.b)}},C=function(e){var o=x(e),r=[o.r.toString(16),o.g.toString(16),o.b.toString(16)];return i.each(r,function(e,i){1==i.length&&(r[e]="0"+i)}),r.join("")},P=function(e){var i=/[0-9]{1,3}/g,o=e.match(i)||[];return{r:o[0],g:o[1],b:o[2]}},B=i(window),w=i(document),D=function(e){var r=this;r.index=++o.index,r.config=i.extend({},r.config,o.config,e),r.render()};D.prototype.config={color:"",size:null,alpha:!1,format:"hex",predefine:!1,colors:["#009688","#5FB878","#1E9FFF","#FF5722","#FFB800","#01AAED","#999","#c00","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgb(0, 186, 189)","rgb(255, 120, 0)","rgb(250, 212, 0)","#393D49","rgba(0,0,0,.5)","rgba(255, 69, 0, 0.68)","rgba(144, 240, 144, 0.5)","rgba(31, 147, 255, 0.73)"]},D.prototype.render=function(){var e=this,o=e.config,r=i(['<div class="layui-unselect layui-colorpicker">',"<span "+("rgb"==o.format&&o.alpha?'class="layui-colorpicker-trigger-bgcolor"':"")+">",'<span class="layui-colorpicker-trigger-span" ','lay-type="'+("rgb"==o.format?o.alpha?"rgba":"torgb":"")+'" ','style="'+function(){var e="";return o.color?(e=o.color,(o.color.match(/[0-9]{1,3}/g)||[]).length>3&&(o.alpha&&"rgb"==o.format||(e="#"+C(k(P(o.color))))),"background: "+e):e}()+'">','<i class="layui-icon layui-colorpicker-trigger-i '+(o.color?a:s)+'"></i>',"</span>","</span>","</div>"].join("")),t=i(o.elem);o.size&&r.addClass("layui-colorpicker-"+o.size),t.addClass("layui-inline").html(e.elemColorBox=r),e.color=e.elemColorBox.find("."+f)[0].style.background,e.events()},D.prototype.renderPicker=function(){var e=this,o=e.config,r=e.elemColorBox[0],t=e.elemPicker=i(['<div id="layui-colorpicker'+e.index+'" data-index="'+e.index+'" class="layui-anim layui-anim-upbit layui-colorpicker-main">','<div class="layui-colorpicker-main-wrapper">','<div class="layui-colorpicker-basis">','<div class="layui-colorpicker-basis-white"></div>','<div class="layui-colorpicker-basis-black"></div>','<div class="layui-colorpicker-basis-cursor"></div>',"</div>",'<div class="layui-colorpicker-side">','<div class="layui-colorpicker-side-slider"></div>',"</div>","</div>",'<div class="layui-colorpicker-main-alpha '+(o.alpha?n:"")+'">','<div class="layui-colorpicker-alpha-bgcolor">','<div class="layui-colorpicker-alpha-slider"></div>',"</div>","</div>",function(){if(o.predefine){var e=['<div class="layui-colorpicker-main-pre">'];return layui.each(o.colors,function(i,o){e.push(['<div class="layui-colorpicker-pre'+((o.match(/[0-9]{1,3}/g)||[]).length>3?" layui-colorpicker-pre-isalpha":"")+'">','<div style="background:'+o+'"></div>',"</div>"].join(""))}),e.push("</div>"),e.join("")}return""}(),'<div class="layui-colorpicker-main-input">','<div class="layui-inline">','<input type="text" class="layui-input">',"</div>",'<div class="layui-btn-container">','<button class="layui-btn layui-btn-primary layui-btn-sm" colorpicker-events="clear">清空</button>','<button class="layui-btn layui-btn-sm" colorpicker-events="confirm">确定</button>',"</div","</div>","</div>"].join(""));e.elemColorBox.find("."+f)[0];i(c)[0]&&i(c).data("index")==e.index?e.removePicker(D.thisElemInd):(e.removePicker(D.thisElemInd),i("body").append(t)),D.thisElemInd=e.index,D.thisColor=r.style.background,e.position(),e.pickerEvents()},D.prototype.removePicker=function(e){var o=this;o.config;return i("#layui-colorpicker"+(e||o.index)).remove(),o},D.prototype.position=function(){var e=this,i=e.config,o=e.bindElem||e.elemColorBox[0],r=e.elemPicker[0],t=o.getBoundingClientRect(),n=r.offsetWidth,l=r.offsetHeight,c=function(e){return e=e?"scrollLeft":"scrollTop",document.body[e]|document.documentElement[e]},a=function(e){return document.documentElement[e?"clientWidth":"clientHeight"]},s=5,f=t.left,d=t.bottom;f-=(n-o.offsetWidth)/2,d+=s,f+n+s>a("width")?f=a("width")-n-s:f<s&&(f=s),d+l+s>a()&&(d=t.top>l?t.top-l:a()-l,d-=2*s),i.position&&(r.style.position=i.position),r.style.left=f+("fixed"===i.position?0:c(1))+"px",r.style.top=d+("fixed"===i.position?0:c())+"px"},D.prototype.val=function(){var e=this,i=(e.config,e.elemColorBox.find("."+f)),o=e.elemPicker.find("."+b),r=i[0],t=r.style.backgroundColor;if(t){var n=k(P(t)),l=i.attr("lay-type");if(e.select(n.h,n.s,n.b),"torgb"===l&&o.find("input").val(t),"rgba"===l){var c=P(t);if(3==(t.match(/[0-9]{1,3}/g)||[]).length)o.find("input").val("rgba("+c.r+", "+c.g+", "+c.b+", 1)"),e.elemPicker.find("."+h).css("left",280);else{o.find("input").val(t);var a=280*t.slice(t.lastIndexOf(",")+1,t.length-1);e.elemPicker.find("."+h).css("left",a)}e.elemPicker.find("."+v)[0].style.background="linear-gradient(to right, rgba("+c.r+", "+c.g+", "+c.b+", 0), rgb("+c.r+", "+c.g+", "+c.b+"))"}}else e.select(0,100,100),o.find("input").val(""),e.elemPicker.find("."+v)[0].style.background="",e.elemPicker.find("."+h).css("left",280)},D.prototype.side=function(){var e=this,o=e.config,r=e.elemColorBox.find("."+f),t=r.attr("lay-type"),n=e.elemPicker.find("."+u),l=e.elemPicker.find("."+p),c=e.elemPicker.find("."+g),y=e.elemPicker.find("."+m),C=e.elemPicker.find("."+v),w=e.elemPicker.find("."+h),D=l[0].offsetTop/180*360,E=100-(y[0].offsetTop+3)/180*100,H=(y[0].offsetLeft+3)/260*100,W=Math.round(w[0].offsetLeft/280*100)/100,j=e.elemColorBox.find("."+d),F=e.elemPicker.find(".layui-colorpicker-pre").children("div"),L=function(i,n,l,c){e.select(i,n,l);var f=x({h:i,s:n,b:l});if(j.addClass(a).removeClass(s),r[0].style.background="rgb("+f.r+", "+f.g+", "+f.b+")","torgb"===t&&e.elemPicker.find("."+b).find("input").val("rgb("+f.r+", "+f.g+", "+f.b+")"),"rgba"===t){var d=0;d=280*c,w.css("left",d),e.elemPicker.find("."+b).find("input").val("rgba("+f.r+", "+f.g+", "+f.b+", "+c+")"),r[0].style.background="rgba("+f.r+", "+f.g+", "+f.b+", "+c+")",C[0].style.background="linear-gradient(to right, rgba("+f.r+", "+f.g+", "+f.b+", 0), rgb("+f.r+", "+f.g+", "+f.b+"))"}o.change&&o.change(e.elemPicker.find("."+b).find("input").val())},M=i(['<div class="layui-auxiliar-moving" id="LAY-colorpicker-moving"></div'].join("")),Y=function(e){i("#LAY-colorpicker-moving")[0]||i("body").append(M),M.on("mousemove",e),M.on("mouseup",function(){M.remove()}).on("mouseleave",function(){M.remove()})};l.on("mousedown",function(e){var i=this.offsetTop,o=e.clientY,r=function(e){var r=i+(e.clientY-o),t=n[0].offsetHeight;r<0&&(r=0),r>t&&(r=t);var l=r/180*360;D=l,L(l,H,E,W),e.preventDefault()};Y(r),e.preventDefault()}),n.on("click",function(e){var o=e.clientY-i(this).offset().top;o<0&&(o=0),o>this.offsetHeight&&(o=this.offsetHeight);var r=o/180*360;D=r,L(r,H,E,W),e.preventDefault()}),y.on("mousedown",function(e){var i=this.offsetTop,o=this.offsetLeft,r=e.clientY,t=e.clientX,n=function(e){var n=i+(e.clientY-r),l=o+(e.clientX-t),a=c[0].offsetHeight-3,s=c[0].offsetWidth-3;n<-3&&(n=-3),n>a&&(n=a),l<-3&&(l=-3),l>s&&(l=s);var f=(l+3)/260*100,d=100-(n+3)/180*100;E=d,H=f,L(D,f,d,W),e.preventDefault()};layui.stope(e),Y(n),e.preventDefault()}),c.on("mousedown",function(e){var o=e.clientY-i(this).offset().top-3+B.scrollTop(),r=e.clientX-i(this).offset().left-3+B.scrollLeft();o<-3&&(o=-3),o>this.offsetHeight-3&&(o=this.offsetHeight-3),r<-3&&(r=-3),r>this.offsetWidth-3&&(r=this.offsetWidth-3);var t=(r+3)/260*100,n=100-(o+3)/180*100;E=n,H=t,L(D,t,n,W),e.preventDefault(),y.trigger(e,"mousedown")}),w.on("mousedown",function(e){var i=this.offsetLeft,o=e.clientX,r=function(e){var r=i+(e.clientX-o),t=C[0].offsetWidth;r<0&&(r=0),r>t&&(r=t);var n=Math.round(r/280*100)/100;W=n,L(D,H,E,n),e.preventDefault()};Y(r),e.preventDefault()}),C.on("click",function(e){var o=e.clientX-i(this).offset().left;o<0&&(o=0),o>this.offsetWidth&&(o=this.offsetWidth);var r=Math.round(o/280*100)/100;W=r,L(D,H,E,r),e.preventDefault()}),F.each(function(){i(this).on("click",function(){i(this).parent(".layui-colorpicker-pre").addClass("selected").siblings().removeClass("selected");var e,o=this.style.backgroundColor,r=k(P(o)),t=o.slice(o.lastIndexOf(",")+1,o.length-1);D=r.h,H=r.s,E=r.b,3==(o.match(/[0-9]{1,3}/g)||[]).length&&(t=1),W=t,e=280*t,L(r.h,r.s,r.b,t)})})},D.prototype.select=function(e,i,o,r){var t=this,n=(t.config,C({h:e,s:100,b:100})),l=C({h:e,s:i,b:o}),c=e/360*180,a=180-o/100*180-3,s=i/100*260-3;t.elemPicker.find("."+p).css("top",c),t.elemPicker.find("."+g)[0].style.background="#"+n,t.elemPicker.find("."+m).css({top:a,left:s}),"change"!==r&&t.elemPicker.find("."+b).find("input").val("#"+l)},D.prototype.pickerEvents=function(){var e=this,o=e.config,r=e.elemColorBox.find("."+f),t=e.elemPicker.find("."+b+" input"),n={clear:function(i){r[0].style.background="",e.elemColorBox.find("."+d).removeClass(a).addClass(s),e.color="",o.done&&o.done(""),e.removePicker()},confirm:function(i,n){var l=t.val(),c=l,f={};if(l.indexOf(",")>-1){if(f=k(P(l)),e.select(f.h,f.s,f.b),r[0].style.background=c="#"+C(f),(l.match(/[0-9]{1,3}/g)||[]).length>3&&"rgba"===r.attr("lay-type")){var u=280*l.slice(l.lastIndexOf(",")+1,l.length-1);e.elemPicker.find("."+h).css("left",u),r[0].style.background=l,c=l}}else f=y(l),r[0].style.background=c="#"+C(f),e.elemColorBox.find("."+d).removeClass(s).addClass(a);return"change"===n?(e.select(f.h,f.s,f.b,n),void(o.change&&o.change(c))):(e.color=l,o.done&&o.done(l),void e.removePicker())}};e.elemPicker.on("click","*[colorpicker-events]",function(){var e=i(this),o=e.attr("colorpicker-events");n[o]&&n[o].call(this,e)}),t.on("keyup",function(e){var o=i(this);n.confirm.call(this,o,13===e.keyCode?null:"change")})},D.prototype.events=function(){var e=this,o=e.config,r=e.elemColorBox.find("."+f);e.elemColorBox.on("click",function(){e.renderPicker(),i(c)[0]&&(e.val(),e.side())}),o.elem[0]&&!e.elemColorBox[0].eventHandler&&(w.on("click",function(o){if(!i(o.target).hasClass(l)&&!i(o.target).parents("."+l)[0]&&!i(o.target).hasClass(c.replace(/\./g,""))&&!i(o.target).parents(c)[0]&&e.elemPicker){if(e.color){var t=k(P(e.color));e.select(t.h,t.s,t.b)}else e.elemColorBox.find("."+d).removeClass(a).addClass(s);r[0].style.background=e.color||"",e.removePicker()}}),B.on("resize",function(){return!(!e.elemPicker||!i(c)[0])&&void e.position()}),e.elemColorBox[0].eventHandler=!0)},o.render=function(e){var i=new D(e);return r.call(i)},e(t,o)});
\ No newline at end of file

skyeye-web/src/main/webapp/assets/lib/layui/layui.js

@@ -90,6 +90,7 @@ function isNull(str){
 	    layedit: 'modules/layedit', // 富文本编辑器
 	    ueditor: 'modules/ueditor.all', // 百度富文本编辑器
 	    form: 'modules/form', // 表单集
+	    colorpicker: 'modules/colorpicker', //颜色选择器
 	    upload: 'modules/upload', // 上传
 	    tree: 'modules/tree', // 树结构
 	    table: 'modules/table', // 表格

skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css

@@ -2446,6 +2446,219 @@ body .layer-ext-winconfirm {
 	display: none;
 }
 
+/*** 颜色选择器开始 ***/
+.layui-colorpicker {
+	width: 26px;
+	height: 26px;
+	border: 1px solid #e6e6e6;
+	padding: 5px;
+	border-radius: 2px;
+	line-height: 24px;
+	display: inline-block;
+	cursor: pointer;
+	transition: all .3s;
+	-webkit-transition: all .3s
+}
+
+.layui-colorpicker:hover {
+	border-color: #d2d2d2
+}
+
+.layui-colorpicker.layui-colorpicker-lg {
+	width: 34px;
+	height: 34px;
+	line-height: 32px
+}
+
+.layui-colorpicker.layui-colorpicker-sm {
+	width: 24px;
+	height: 24px;
+	line-height: 22px
+}
+
+.layui-colorpicker.layui-colorpicker-xs {
+	width: 22px;
+	height: 22px;
+	line-height: 20px
+}
+
+.layui-colorpicker-trigger-bgcolor {
+	display: block;
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+	border-radius: 2px
+}
+
+.layui-colorpicker-trigger-span {
+	display: block;
+	height: 100%;
+	box-sizing: border-box;
+	border: 1px solid rgba(0, 0, 0, .15);
+	border-radius: 2px;
+	text-align: center
+}
+
+.layui-colorpicker-trigger-i {
+	display: inline-block;
+	color: #FFF;
+	font-size: 12px
+}
+
+.layui-colorpicker-trigger-i.layui-icon-close {
+	color: #999
+}
+
+.layui-colorpicker-main {
+	position: absolute;
+	z-index: 66666666;
+	width: 280px;
+	padding: 7px;
+	background: #FFF;
+	border: 1px solid #d2d2d2;
+	border-radius: 2px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
+}
+
+.layui-colorpicker-main-wrapper {
+	height: 180px;
+	position: relative
+}
+
+.layui-colorpicker-basis {
+	width: 260px;
+	height: 100%;
+	position: relative
+}
+
+.layui-colorpicker-basis-white {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: linear-gradient(90deg, #FFF, hsla(0, 0%, 100%, 0))
+}
+
+.layui-colorpicker-basis-black {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: linear-gradient(0deg, #000, transparent)
+}
+
+.layui-colorpicker-basis-cursor {
+	width: 10px;
+	height: 10px;
+	border: 1px solid #FFF;
+	border-radius: 50%;
+	position: absolute;
+	top: -3px;
+	right: -3px;
+	cursor: pointer
+}
+
+.layui-colorpicker-side {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 12px;
+	height: 100%;
+	background: linear-gradient(red, #FF0, #0F0, #0FF, #00F, #F0F, red)
+}
+
+.layui-colorpicker-side-slider {
+	width: 100%;
+	height: 5px;
+	box-shadow: 0 0 1px #888;
+	box-sizing: border-box;
+	background: #FFF;
+	border-radius: 1px;
+	border: 1px solid #f0f0f0;
+	cursor: pointer;
+	position: absolute;
+	left: 0
+}
+
+.layui-colorpicker-main-alpha {
+	display: none;
+	height: 12px;
+	margin-top: 7px;
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
+}
+
+.layui-colorpicker-alpha-bgcolor {
+	height: 100%;
+	position: relative
+}
+
+.layui-colorpicker-alpha-slider {
+	width: 5px;
+	height: 100%;
+	box-shadow: 0 0 1px #888;
+	box-sizing: border-box;
+	background: #FFF;
+	border-radius: 1px;
+	border: 1px solid #f0f0f0;
+	cursor: pointer;
+	position: absolute;
+	top: 0
+}
+
+.layui-colorpicker-main-pre {
+	padding-top: 7px;
+	font-size: 0
+}
+
+.layui-colorpicker-pre {
+	width: 20px;
+	height: 20px;
+	border-radius: 2px;
+	display: inline-block;
+	margin-left: 6px;
+	margin-bottom: 7px;
+	cursor: pointer
+}
+
+.layui-colorpicker-pre:nth-child(11n+1) {
+	margin-left: 0
+}
+
+.layui-colorpicker-pre-isalpha {
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
+}
+
+.layui-colorpicker-pre.layui-this {
+	box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15)
+}
+
+.layui-colorpicker-pre>div {
+	height: 100%;
+	border-radius: 2px
+}
+
+.layui-colorpicker-main-input {
+	text-align: right;
+	padding-top: 7px
+}
+
+.layui-colorpicker-main-input .layui-btn-container .layui-btn {
+	margin: 0 0 0 10px
+}
+
+.layui-colorpicker-main-input div.layui-inline {
+	float: left;
+	margin-right: 10px;
+	font-size: 14px
+}
+
+.layui-colorpicker-main-input input.layui-input {
+	width: 150px;
+	height: 30px;
+	color: #666
+}
+/*** 颜色选择器结束 ***/
+
 /*** 小程序页面管理start ***/
 .smpro{
     height: calc(100vh - 45px);

skyeye-web/src/main/webapp/tpl/dsformcontent/dsformcontentadd.html

@@ -7,8 +7,6 @@
     <link href="../../assets/lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
     <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
     <link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
-	<link href="../../assets/lib/layui/lay/modules/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
-    <link href="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
 </head>
 <body>
 	<div style="width:600px;margin:0 auto;padding-top:20px;">

skyeye-web/src/main/webapp/tpl/dsformcontent/dsformcontentedit.html

@@ -7,8 +7,6 @@
     <link href="../../assets/lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
     <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
     <link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
-	<link href="../../assets/lib/layui/lay/modules/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
-    <link href="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
 </head>
 <body>
 	<div style="width:600px;margin:0 auto;padding-top:20px;">