From 93c9016c3e5e63de3d449f33661e1392565f3d8d Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 17 Mar 2021 15:49:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=9B=BF=E6=8D=A2=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E9=80=89=E6=8B=A9=E5=99=A8=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/package.json                    |   1 +
 .../src/components/charts/chart-pie.vue       |   3 -
 .../src/components/charts/chartPreview.vue    |   3 -
 .../bottomBox/tabs/terminalLogMonitorTab.vue  |   1 -
 .../src/components/common/nezhaColor.vue      | 309 +++++++++++++
 .../common/project/L5/CanvasProps.vue         | 413 ++++++------------
 .../components/common/project/topologyL5.vue  |   1 -
 .../common/project/topologyPrev.vue           |   1 -
 .../common/rightBox/alertSilenceBox.vue       |   6 -
 .../components/common/rightBox/menuBox.vue    |   1 -
 .../src/components/page/alert/config.vue      |   1 -
 .../src/components/page/alert/list.vue        |   1 -
 .../src/components/page/alert/silence.vue     |   3 -
 .../src/components/page/config/exprTemp.vue   |   3 -
 .../src/components/page/config/promServer.vue |   1 -
 .../components/page/config/terminallog.vue    |   1 -
 .../components/page/dashboard/chartBox.vue    |  93 +---
 .../page/dashboard/explore/promqlInput.vue    |  14 +-
 .../page/dashboard/overview/chartConfig.vue   |   1 -
 nezha-fronted/src/store/index.js              |   1 -
 nezha-fronted/static/config.json              |   2 +-
 21 files changed, 469 insertions(+), 391 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/nezhaColor.vue

diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index ae17f3f3b..ef0735deb 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -32,6 +32,7 @@
     "vis": "^4.21.0-EOL",
     "vis-network": "^8.3.2",
     "vue": "^2.5.2",
+    "vue-color": "^2.8.1",
     "vue-countupjs": "^1.0.0",
     "vue-draggable-resizable": "^2.3.0",
     "vue-i18n": "^8.15.1",
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 54b21f10d..924e1e10e 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -326,8 +326,6 @@ export default {
         legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
 
         this.$set(this.option,'color',this.bgColorList)
-
-        console.log('legend',legend)
         this.pieData = seriesItem;
         if(area==='showFullScreen'){//全屏按时间查询
           this.data = chartItem;
@@ -522,7 +520,6 @@ export default {
             self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
             setTimeout(function () {
               if(self.pieData[0].data.length>0){
-                console.log('option',self.option)
                 self.echartScreen.setOption(self.option);//显示全屏界面
                 self.noData=false;
               }else{
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index a2d902f3c..98040a064 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -769,7 +769,6 @@
           this.chartType = 'line';
         }
         this.echartModalStore = echarts.init(ele);
-        console.log('height',ele.clientWidth,ele.clientHeight)
         var chartWidth = ele.clientWidth;
         var title = {
           show:false,
@@ -1107,7 +1106,6 @@
         let self=this;
         let  dom = document.getElementById('screenShowArea')
         this.echartModalStore = echarts.init(dom)
-        console.log('dom',dom.clientWidth,dom.clientHeight)
         this.showLegend = true;
         if(legend){
           this.screenLegendList = [];
@@ -1129,7 +1127,6 @@
           if(dataArg[0].data.length<1){
             this.echartModalStore.setOption(chartConfig.getOption('noData'))
           }else{
-            console.log(option)
             this.echartModalStore.setOption(option);//创建图表
           }
 
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
index a2cda23ae..fc9438011 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
@@ -104,7 +104,6 @@
         };
         //登录后，你输入的内容从后台服务返回
         this.terminal.on("data",function(data){
-          console.log(data,'data')
           /*
           let code = data.charCodeAt(0);
           if(code==13){
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
new file mode 100644
index 000000000..52a960735
--- /dev/null
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -0,0 +1,309 @@
+<template>
+  <span v-clickoutside="()=>{exitColor(false)}">
+    <div class="color-show" v-if="single" ref="colorShow" @click.stop="changeColor">
+      <div class="color-show-left" :style="{background:colors}"></div>
+      <span class="color-text"> {{colors}}</span>
+      <span class="color-arrows">
+        <i class="nz-icon nz-icon-arrow-down" v-if="!showColorPicker"></i>
+        <i class="nz-icon nz-icon-arrow-up" v-if="showColorPicker"></i>
+      </span>
+    </div>
+
+
+    <div class="color-show" v-if="!single" ref="colorShow" @click.stop="changeColor">
+      <div :style="{background:findColor('bac'),border:'2px solid '+findColor('line'),'line-height':'18px'}" class="color-show-left">
+        <span :style="{color:findColor('text')}" style="line-height: 18px;">
+                              T
+        </span>
+      </div>
+    </div>
+
+    <div v-if="showColorPicker" class="vue-color" :style="{top:position.y+'px',left:position.x+'px'}" ref="colorBox">
+      <el-row v-if="!single" class="color-tab">
+        <div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click="colorTabChange(item)">{{item.name}}</div>
+      </el-row>
+      <sketch v-model="colors" :disableAlpha="true" @input="updateValue" :presetColors="presetColors"/>
+    </div>
+  </span>
+</template>
+
+<script>
+
+  import { Sketch} from 'vue-color'
+	export default {
+		name:"nezhaColor",
+    components:{
+      Sketch,
+    },
+    props:{
+      valueArr:{
+		    type:Array,
+        default(){
+          return []
+          /*ex
+          * {
+          *   {name:'name',value:value,key:'name'}
+          * }
+          * */
+        },
+      },
+      colorVal:{
+
+      },
+      single:{
+        type:Boolean,
+        default(){
+          return true
+        },
+      },
+      presetColors: {
+        type: Array,
+        default () {
+          return []
+        }
+      },
+    },
+    watch:{
+      // valueArr:{
+      //   immediate: true,
+      //   handler(n) {
+      //     console.log(n);
+      //     if(n.length){
+      //
+      //     }
+      //   }
+      // },
+      // keyName:{
+      //   deep:true,
+      //   immediate: true,
+      //   handler(n) {
+      //     console.log(n);
+      //   }
+      // }
+    },
+    data(){
+		  return {
+		    colors:'#ffffff',
+        keyName:'',
+        showColorPicker:false,
+        position:{
+          x:undefined,
+          y:undefined,
+        },
+        timer:null
+      }
+    },
+    mounted(){
+      this.colors = this.valueArr[0].value;
+      this.keyName = this.valueArr[0].name;
+    },
+    methods:{
+      updateValue(color){
+        this.colors=color.hex;
+        this.$emit('colorChange',color.hex,this.keyName);
+      },
+      changeColor(){
+        this.showColorPicker=!this.showColorPicker;
+        if(this.showColorPicker){
+          window.addEventListener('mousewheel',this.mousewheel);
+         setTimeout(()=>{
+           let position=this.$refs.colorShow.getBoundingClientRect();
+           let colorBox=this.$refs.colorBox.getBoundingClientRect();
+           let w=window.innerWidth;
+           let h=window.innerHeight;
+           //确定x位置
+           if(position.x + colorBox.width>w){
+             position.x=w-colorBox.width;
+           }else{
+             position.x=position.x
+           }
+           //确定Y位置
+
+           if(position.y + colorBox.height > h){
+             position.y=position.y-colorBox.height;
+           } else{
+             position.y=position.y+position.height;
+           }
+           this.position.x=position.x;
+           this.position.y=position.y;
+         })
+        }else{
+          window.removeEventListener('mousewheel',this.mousewheel);
+        }
+        //
+      },
+      colorTabChange(item){
+        this.keyName=item.name;
+        this.colors=this.colorVal[item.name];
+      },
+      exitColor(){
+        this.showColorPicker=false;
+      },
+      mousewheel(){
+        if(!this.$refs.colorBox) return;
+        if(this.timer){
+          clearTimeout(this.timer);
+          this.timer=setTimeout(()=>{
+            let position=this.$refs.colorShow.getBoundingClientRect();
+            let colorBox=this.$refs.colorBox.getBoundingClientRect();
+            let w=window.innerWidth;
+            let h=window.innerHeight;
+            //确定x位置
+            if(position.x + colorBox.width>w){
+              position.x=w-colorBox.width;
+            }else{
+              position.x=position.x
+            }
+            //确定Y位置
+
+            if(position.y + colorBox.height > h){
+              position.y=position.y-colorBox.height;
+            } else{
+              position.y=position.y+position.height;
+            }
+            this.position.x=position.x;
+            this.position.y=position.y;
+            clearTimeout(this.timer);
+            this.timer=null;
+          },200)
+        } else {
+          this.timer=setTimeout(()=>{
+            let position=this.$refs.colorShow.getBoundingClientRect();
+            let colorBox=this.$refs.colorBox.getBoundingClientRect();
+            let w=window.innerWidth;
+            let h=window.innerHeight;
+            //确定x位置
+            if(position.x + colorBox.width>w){
+              position.x=w-colorBox.width;
+            }else{
+              position.x=position.x
+            }
+            //确定Y位置
+
+            if(position.y + colorBox.height > h){
+              position.y=position.y-colorBox.height;
+            } else{
+              position.y=position.y+position.height;
+            }
+            this.position.x=position.x;
+            this.position.y=position.y;
+            clearTimeout(this.timer);
+            this.timer=null;
+          },200)
+        }
+
+      },
+      findColor(key){
+        let findItem=this.valueArr.find(item=>item.key==key);
+        if(findItem){
+          return this.colorVal[findItem.name]
+        }else{
+          return "#000000"
+        };
+      }
+    },
+    destroyed(){
+		  window.removeEventListener('mousewheel',this.mousewheel);
+    }
+  }
+</script>
+
+<style scoped>
+  /deep/ .vc-sketch-field--single, /deep/ .vc-sketch-field .vc-input__label{
+    display: none;
+  }
+  /deep/ .vc-sketch-color-wrap{
+    margin-left: 16px;
+  }
+  /deep/ .vc-sketch-presets{
+    line-height: 24px;
+  }
+  /deep/ .vc-sketch-presets-color {
+    margin: 0 7px 0 0;
+  }
+  .vue-color{
+    position: fixed;
+    z-index: 1;
+  }
+
+  .color-content {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 15px;
+    left: 66px;
+  }
+  .color-tab{
+    height: 28px;
+    border-radius: 5px 5px 0 0;
+    border: 1px solid #EBEEF5;
+    border-bottom: none;
+    background-color: #FFF;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    z-index: 2;
+  }
+  .color-tab div{
+    text-align: center;
+    flex: 1;
+    color: #909399;
+    transition: all .3s cubic-bezier(.645,.045,.355,1);
+    background: #E4E7ED;
+    cursor: pointer;
+    border-top: 2px solid transparent;
+  }
+  /*.color-tab div:first-child{*/
+  /*border-right-color: #DCDFE6;*/
+  /*}*/
+  .color-tab div:hover{
+    color: #409EFF;
+  }
+  .color-tab .color-active{
+    background-color: #FFF;
+    font-size: 14px;
+    color: #FA901C;
+    font-weight: 700;
+    border-color:  #FA901C;;
+  }
+
+  .color {
+    position: relative;
+  }
+
+  .color-show {
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    height: 30px;
+  }
+
+  .color-show .color-text {
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    font-weight: 400;
+  }
+
+  .color-show-left {
+    width: 18px;
+    height: 18px;
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    margin: 0 5px;
+    text-align: center;
+  }
+
+  .color-arrows {
+    color: #C0C4CC;
+    position: absolute;
+    right: 12px;
+  }
+
+  .color-arrows .nz-icon {
+    font-size: 12px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 0ba81dd9d..6713164f1 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -74,7 +74,7 @@
             <div class="nz-icon-minus-position">
               <span class="nz-icon-minus-medium">
                 <i @click="removeExpression(index)" class="nz-icon nz-icon-minus"></i>
-              </span>
+          </span>
               <span class="nz-icon-copy">
                 <i @click="copyExpression(index)" class="nz-icon nz-icon-override"></i>
               </span>
@@ -175,34 +175,7 @@
                 <el-col class="thresholds-cell" :span="4">
                    <span v-if="item.level!==0">
                     <div style="display: inline-block">
-                      <div @click="colorPickerClickTable('colorPickerBac'+item.level,item)"
-                           class="color-show"
-                           v-clickoutside="(e)=>{colorOut(item,e)}"
-                           style="width: 32px"
-                      >
-                        <div :style="{background:item.color.fill,border:'2px solid '+item.color.line,'line-height':'18px'}" class="color-show-left">
-                          <span :style="{color:item.color.text}" style="line-height: 18px;margin-left: 6px">
-                              T
-                          </span>
-                        </div>
-                      </div>
-                      <div class="color-content" ref="color-content">
-                        <el-color-picker
-                          :ref="'colorPickerBac'+item.level"
-                          @active-change="(val)=>colorChangeTable(item,val)"
-                          popper-class="no-style-class"
-                          v-model="item.showColor"
-                          :predefine="predefineColors"
-                        >
-                        </el-color-picker>
-                      </div>
-                      <div
-                        class="color-tab"
-                        v-show="item.showColor">
-                        <div :class="{'color-active':item.showType=='fill'}" @click="changeShowPicker(item ,'fill')">{{$t('project.topology.fill')}}</div>
-                        <div :class="{'color-active':item.showType=='line'}" @click="changeShowPicker(item , 'line')">{{$t('project.topology.lines')}}</div>
-                        <div :class="{'color-active':item.showType=='text'}" @click="changeShowPicker(item , 'text')">{{$t('project.topology.text')}}</div>
-                      </div>
+                      <nezhaColor :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}" :single="false" :color-val="item.color" :presetColors="predefineColors"/>
                     </div>
                   </span>
                   <span v-else>base</span>
@@ -273,10 +246,10 @@
         <el-collapse v-model="activeNames">
           <!--&lt;!&ndash;位置大小&ndash;&gt;-->
           <!--<el-collapse-item :label="$t('project.topology.positionAndSize')" name="3" v-if="selection.pen&&!selection.pen.type">-->
-            <!--<div class="flex flex-warp">-->
+          <!--<div class="flex flex-warp">-->
 
 
-            <!--</div>-->
+          <!--</div>-->
           <!--</el-collapse-item>-->
           <!--样式-->
           <el-collapse-item :title="'Style'" name="4" v-if="selection.pen">
@@ -322,22 +295,7 @@
               <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
                 <div>{{$t('project.topology.bac')}}</div>
                 <div class="p10 pl0">
-                  <div class="color-show" @click="colorPickerClick('fillStyle')">
-                    <div class="color-show-left" :style="{background:selection.pen.fillStyle}"></div>
-                    <span class="color-text"> {{selection.pen.fillStyle}}</span>
-                    <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['fillStyle']&&!$refs['fillStyle'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['fillStyle']&&$refs['fillStyle'].showPicker"></i>
-                </span>
-                  </div>
-                  <div class="color-content" ref="color-content">
-                    <el-color-picker
-                      v-model="selection.pen.fillStyle"
-                      ref="fillStyle"
-                      @active-change="(val)=>colorChange(val,'fillStyle')"
-                    >
-                    </el-color-picker>
-                  </div>
+                  <nezhaColor :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]" @colorChange="colorChange"/>
                 </div>
               </div>
 
@@ -345,7 +303,7 @@
                 <div>{{$t('project.topology.gradient')}}</div>
                 <div class="p10 pl0 gradient-to">
                   <el-select v-model="selection.pen.gradientType" size="small"
-                             @change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select">
+                             @change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select" popper-class="color-before-select">
                     <div slot="prefix">
                       <i :class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i>
                     </div>
@@ -356,21 +314,8 @@
                     </el-option>
                     <!--el-input__inner-->
                   </el-select>
-                  <div class="color-show" style="display:inline-block;width: calc(100% - 72px);margin-left: -5px;border-radius: 0 5px 5px 0" @click="colorPickerClick('gradientColor')">
-                    <div class="color-show-left" :style="{background:selection.pen.data.gradientColor,display:'inline-block','margin-top':'5px','margin-left':'12px'}"></div>
-                    <span class="color-text" style="vertical-align: text-bottom"> {{selection.pen.data.gradientColor}}</span>
-                    <span class="color-arrows" style="top: 13px; right: 20px">
-                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['gradientColor']&&!$refs['gradientColor'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['gradientColor']&&$refs['gradientColor'].showPicker"></i>
-                </span>
-                  </div>
-                  <div class="color-content" ref="color-content">
-                    <el-color-picker
-                      v-model="selection.pen.data.gradientColor"
-                      ref="gradientColor"
-                      @active-change="(val)=>colorChange(val,'gradientColor')"
-                    >
-                    </el-color-picker>
+                  <div class="gradient-to-color">
+                    <nezhaColor :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]" @colorChange="colorChange"/>
                   </div>
                 </div>
               </div>
@@ -459,7 +404,7 @@
                 <div>{{$t('project.topology.fromArrow')}}</div>
                 <div class="p10 pl0">
                   <el-select v-model="selection.pen.fromArrow" size="small"
-                              @change="onClickFromArrow">
+                             @change="onClickFromArrow">
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
@@ -508,7 +453,7 @@
                 <div>{{$t('project.topology.toArrow')}}</div>
                 <div class="p10 pl0">
                   <el-select v-model="selection.pen.toArrow" size="small"
-                              @change="onClickToArrow">
+                             @change="onClickToArrow">
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
@@ -575,44 +520,13 @@
               <div class="props-pen-item">
                 <div>{{$t('project.topology.lineColor')}}</div>
                 <div class="p10 pl0">
-                  <div class="color-show" @click="colorPickerClick('strokeStyle')">
-                    <div class="color-show-left" :style="{background:selection.pen.strokeStyle}"></div>
-                    <span class="color-text"> {{selection.pen.strokeStyle}}</span>
-                    <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down"
-                     v-if="$refs['strokeStyle']&&!$refs['strokeStyle'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['strokeStyle']&&$refs['strokeStyle'].showPicker"></i>
-                </span>
-                  </div>
-                  <div class="color-content" ref="color-content">
-                    <el-color-picker
-                      v-model="selection.pen.strokeStyle"
-                      ref="strokeStyle"
-                      @active-change="(val)=>colorChange(val,'strokeStyle')"
-                    >
-                    </el-color-picker>
-                  </div>
+                  <nezhaColor :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]" @colorChange="colorChange"/>
                 </div>
               </div>
               <div class="props-pen-item" v-if="selection.pen.type">
                 <div>{{$t('project.topology.arrowColor')}}</div>
                 <div class="p10 pl0">
-                  <div class="color-show" @click="colorPickerClick('toArrowColor')">
-                    <div class="color-show-left" :style="{background:selection.pen.toArrowColor}"></div>
-                    <span class="color-text"> {{selection.pen.toArrowColor}}</span>
-                    <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['toArrowColor']&&!$refs['toArrowColor'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['toArrowColor']&&$refs['toArrowColor'].showPicker"></i>
-                </span>
-                  </div>
-                  <div class="color-content" ref="color-content">
-                    <el-color-picker
-                      v-model="selection.pen.toArrowColor"
-                      ref="toArrowColor"
-                      @active-change="(val)=>colorChange(val,'toArrowColor')"
-                    >
-                    </el-color-picker>
-                  </div>
+                  <nezhaColor :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]" @colorChange="colorChange"/>
                 </div>
               </div>
 
@@ -651,7 +565,7 @@
               <label>{{$t('project.topology.animationType')}}</label>
               <div class="full pr10">
                 <el-select v-model="selection.pen.animateType" size="small"
-                            @change="onAnimate">
+                           @change="onAnimate">
                   <el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
                              :label="item.name"></el-option>
                 </el-select>
@@ -660,24 +574,7 @@
             <div class="project-content-item half" v-if="selection.pen.type">
               <label>{{$t('project.topology.animationColor')}}</label>
               <div class="full pr10">
-                <div class="color-show" @click="colorPickerClick('animateColor')">
-                  <div class="color-show-left" :style="{background:selection.pen.animateColor}"></div>
-                  <span class="color-text"> {{selection.pen.animateColor}}</span>
-                  <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down"
-                     v-if="$refs['animateColor']&&!$refs['animateColor'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up"
-                     v-if="$refs['animateColor']&&$refs['animateColor'].showPicker"></i>
-                </span>
-                </div>
-                <div class="color-content" ref="color-content">
-                  <el-color-picker
-                    v-model="selection.pen.animateColor"
-                    ref="animateColor"
-                    @active-change="(val)=>colorChange(val,'animateColor')"
-                  >
-                  </el-color-picker>
-                </div>
+                <nezhaColor :value-arr="[{name:'animateColor',value:selection.pen.animateColor}]" @colorChange="colorChange"/>
               </div>
             </div>
 
@@ -726,22 +623,9 @@
           <div class="project-content-item half">
             <label>{{$t('project.topology.fontColor')}}</label>
             <div class="full pr10 h32">
-              <div class="color-show" @click="colorPickerClick('fontColor')">
-                <div class="color-show-left" :style="{background:topologyData.data.fontColor}"></div>
-                <span class="color-text"> {{topologyData.data.fontColor}}</span>
-                <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['fontColor']&&!$refs['fontColor'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['fontColor']&&$refs['fontColor'].showPicker"></i>
-                </span>
-              </div>
-              <div class="color-content" ref="color-content">
-                <el-color-picker
-                  v-model="topologyData.data.fontColor"
-                  ref="fontColor"
-                  @active-change="(val)=>changeTopologyOpt(val,'fontColor',true)"
-                >
-                </el-color-picker>
-              </div>
+              <nezhaColor :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{
+                changeTopologyOpt(val,key,true)
+                }"/>
             </div>
           </div>
 
@@ -786,22 +670,9 @@
           <div class="project-content-item half">
             <label>{{$t('project.topology.bac')}}</label>
             <div class="full pr10 h32">
-              <div class="color-show" @click="colorPickerClick('bkColor')">
-                <div class="color-show-left" :style="{background:topologyData.data.bkColor}"></div>
-                <span class="color-text"> {{topologyData.data.bkColor}}</span>
-                <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['bkColor']&&!$refs['bkColor'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['bkColor']&&$refs['bkColor'].showPicker"></i>
-                </span>
-              </div>
-              <div class="color-content" ref="color-content">
-                <el-color-picker
-                  v-model="topologyData.data.bkColor"
-                  ref="bkColor"
-                  @active-change="(val)=>changeTopologyOpt(val,'bkColor',true)"
-                >
-                </el-color-picker>
-              </div>
+              <nezhaColor :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
+                changeTopologyOpt(val,key,true)
+                }"/>
             </div>
           </div>
 
@@ -813,118 +684,118 @@
             </div>
           </div>
 
-         <!-- <div class="project-content-item half">
-            <label>{{$t('project.topology.rule')}}</label>
-            <div class="full pr10 h32">
-              <el-switch
-                v-model="topologyData.data.rule"
-                :active-value="true"
-                :inactive-value="false"
-                active-color="#ee9d3f"
-                @change="changeTopologyOpt(topologyData.data.rule,'rule')">
-              </el-switch>
-            </div>
-          </div>
+          <!-- <div class="project-content-item half">
+             <label>{{$t('project.topology.rule')}}</label>
+             <div class="full pr10 h32">
+               <el-switch
+                 v-model="topologyData.data.rule"
+                 :active-value="true"
+                 :inactive-value="false"
+                 active-color="#ee9d3f"
+                 @change="changeTopologyOpt(topologyData.data.rule,'rule')">
+               </el-switch>
+             </div>
+           </div>
 
-          <div class="project-content-item half special-select">
-            <label>{{$t('project.topology.defaultStartArrow')}}</label>
-            <div class="full pr10 h32">
-              <el-select v-model="topologyData.data.fromArrow" size="small"
+           <div class="project-content-item half special-select">
+             <label>{{$t('project.topology.defaultStartArrow')}}</label>
+             <div class="full pr10 h32">
+               <el-select v-model="topologyData.data.fromArrow" size="small"
 
-                         @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
-                <div slot="prefix">
-                  <div class="icon-item">
-                    <svg>
-                      <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
-                         :key="index" v-if="topologyData.data.fromArrow==item.name">
-                        <path :d="item.d"></path>
-                        <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
-                                 :strokeWidth="item['stroke-width']"></polygon>
-                        <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
-                                :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-                <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
-                  <div class="icon-item">
-                    <svg>
-                      <g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
-                         stroke-width="1">
-                        <path :d="item.d"></path>
-                        <polygon
-                          v-if="item.points"
-                          :points="item.points"
-                          :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                          :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
-                          :strokeWidth="item['stroke-width']"
-                        ></polygon>
-                        <circle
-                          v-if="item.cx"
-                          :cx="item.cx"
-                          :cy="item.cy"
-                          :r="item.r"
-                          :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                          :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
-                          :strokeWidth="item['stroke-width']"
-                        ></circle>
-                      </g>
-                    </svg>
-                  </div>
-                </el-option>
-              </el-select>
-            </div>
-          </div>
+                          @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
+                 <div slot="prefix">
+                   <div class="icon-item">
+                     <svg>
+                       <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                          :key="index" v-if="topologyData.data.fromArrow==item.name">
+                         <path :d="item.d"></path>
+                         <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                                  :strokeWidth="item['stroke-width']"></polygon>
+                         <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                                 :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                       </g>
+                     </svg>
+                   </div>
+                 </div>
+                 <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                   <div class="icon-item">
+                     <svg>
+                       <g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
+                          stroke-width="1">
+                         <path :d="item.d"></path>
+                         <polygon
+                           v-if="item.points"
+                           :points="item.points"
+                           :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                           :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                           :strokeWidth="item['stroke-width']"
+                         ></polygon>
+                         <circle
+                           v-if="item.cx"
+                           :cx="item.cx"
+                           :cy="item.cy"
+                           :r="item.r"
+                           :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                           :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                           :strokeWidth="item['stroke-width']"
+                         ></circle>
+                       </g>
+                     </svg>
+                   </div>
+                 </el-option>
+               </el-select>
+             </div>
+           </div>
 
-          <div class="project-content-item half special-select">
-            <label>{{$t('project.topology.defaultEndArrow')}}</label>
-            <div class="full pr10 h32">
-              <el-select v-model="topologyData.data.toArrow" size="small"
+           <div class="project-content-item half special-select">
+             <label>{{$t('project.topology.defaultEndArrow')}}</label>
+             <div class="full pr10 h32">
+               <el-select v-model="topologyData.data.toArrow" size="small"
 
-                         @change="changeTopologyOpt('toArrow')">
-                <div slot="prefix">
-                  <div class="icon-item">
-                    <svg>
-                      <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
-                         :key="index" v-if="topologyData.data.toArrow==item.name">
-                        <path :d="item.d"></path>
-                        <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
-                                 :strokeWidth="item['stroke-width']"></polygon>
-                        <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
-                                :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-                <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
-                  <div class="icon-item">
-                    <svg>
-                      <g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
-                         stroke-width="1">
-                        <path :d="item.d"></path>
-                        <polygon
-                          v-if="item.points"
-                          :points="item.points"
-                          :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                          :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
-                          :strokeWidth="item['stroke-width']"
-                        ></polygon>
-                        <circle
-                          v-if="item.cx"
-                          :cx="item.cx"
-                          :cy="item.cy"
-                          :r="item.r"
-                          :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                          :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
-                          :strokeWidth="item['stroke-width']"
-                        ></circle>
-                      </g>
-                    </svg>
-                  </div>
-                </el-option>
-              </el-select>
-            </div>
-          </div>-->
+                          @change="changeTopologyOpt('toArrow')">
+                 <div slot="prefix">
+                   <div class="icon-item">
+                     <svg>
+                       <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                          :key="index" v-if="topologyData.data.toArrow==item.name">
+                         <path :d="item.d"></path>
+                         <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                                  :strokeWidth="item['stroke-width']"></polygon>
+                         <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                                 :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                       </g>
+                     </svg>
+                   </div>
+                 </div>
+                 <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                   <div class="icon-item">
+                     <svg>
+                       <g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
+                          stroke-width="1">
+                         <path :d="item.d"></path>
+                         <polygon
+                           v-if="item.points"
+                           :points="item.points"
+                           :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                           :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
+                           :strokeWidth="item['stroke-width']"
+                         ></polygon>
+                         <circle
+                           v-if="item.cx"
+                           :cx="item.cx"
+                           :cy="item.cy"
+                           :r="item.r"
+                           :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                           :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
+                           :strokeWidth="item['stroke-width']"
+                         ></circle>
+                       </g>
+                     </svg>
+                   </div>
+                 </el-option>
+               </el-select>
+             </div>
+           </div>-->
 
         </div>
 
@@ -987,7 +858,7 @@
   import chartDataFormat from '../../../charts/chartDataFormat';
   import promqlInput from "../../../page/dashboard/explore/promqlInput";
   import {getUUID,resetZIndex} from "../../../common/js/common";
-
+  import nezhaColor from '../../nezhaColor'
   var rz={
     methods:{
       rz(e){
@@ -1214,12 +1085,13 @@
           '#1250B0','#1F60C4','#5794F2',
           '#E55400','#FA6400','#FF9830',
           '#7C2EA3','#8F3BB8','#B877D9',
-          ]
+        ]
       }
     },
     mixins:[rz],
     components:{
-      promqlInput
+      promqlInput,
+      nezhaColor
     },
     computed:{},
     props:{
@@ -1263,10 +1135,10 @@
       }
       Object.keys(this.topologyData.data).forEach((key)=>{
         if(key === 'projectInfo' || key === 'alertInfo' || key==='fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity'){
-         this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]);
-       } else {
-         this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
-       }
+          this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]);
+        } else {
+          this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
+        }
       });
     },
     mounted(){
@@ -1401,7 +1273,6 @@
         // console.log(val);
         this.selection.pen.data.gradientType=val;
         this.$forceUpdate()
-        console.log(this.selection.pen.gradientType,this.selection.pen.data.gradientType);
         if(val===0){
           this.selection.pen.bkType=0;
         }
@@ -1472,9 +1343,8 @@
         this.selection.pen.data[name]=this.colorRGBtoHex(val);
         this.onChange();
       },
-      colorChangeTable(item,val){//改变颜色
-        if(!item.showType){return};
-        item.color[item.showType]=this.colorRGBtoHex(val);
+      colorChangeTable(item,val,key){//改变颜色
+        item.color[key]=this.colorRGBtoHex(val);
       },
       changeShowPicker(item,type){
         this.$refs['colorPickerBac'  + item.level][0].showPicker=true;
@@ -1799,7 +1669,6 @@
     /deep/ .el-form-item {
       margin-bottom: 10px;
     }
-
     .half-form-item {
       width: calc(50% - 20px);
       display: inline-block;
@@ -2050,6 +1919,10 @@
           margin-left: 5px;
         }
       }
+      .gradient-to-color{
+        display: inline-block;
+        width: calc(100% - 70px);
+      }
     }
 
     .icon-item {
@@ -2125,7 +1998,7 @@
     border-top: 2px solid transparent;
   }
   /*.color-tab div:first-child{*/
-    /*border-right-color: #DCDFE6;*/
+  /*border-right-color: #DCDFE6;*/
   /*}*/
   .color-tab div:hover{
     color: #409EFF;
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index a25fe59e5..6ab4cc020 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1825,7 +1825,6 @@
         getTopology(this.topologyIndex).render();
       },
       notModuleIDArrChange(id){
-        console.log(id);
         this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id);
       },
       //保存
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index 6dd342f23..d446f0871 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -1824,7 +1824,6 @@
         getTopology(this.topologyIndex).render();
       },
       notModuleIDArrChange(id){
-        console.log(id);
         this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id);
       },
       //保存
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index 4c442e802..91cd1ea3c 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -159,7 +159,6 @@
           if(obj.linkId==-1){
             obj.linkId=null;
           }
-          console.log(obj);
           this.editAlertSilence=Object.assign(this.editAlertSilence,obj);
           this.startAtTamp=new Date(this.editAlertSilence.startAt).getTime();
           this.endAtTamp=new Date(this.editAlertSilence.endAt).getTime();
@@ -227,7 +226,6 @@
         endAtTamp:'',
         optionsEndAt:{
           disabledDate(date,val){
-            console.log( that.startAtTamp,val);
             return date.getTime() <= that.startAtTamp - 24*60*60*1000;
           },
         },
@@ -256,7 +254,6 @@
         ;
         this.prevent_opt.save=true;
         this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId ;
-        console.log(this.editAlertSilence);
         this.$refs.alertSilenceForm.validate((valid)=>{
           if(this.endAtTamp < this.startAtTamp){
             this.$message({
@@ -328,7 +325,6 @@
         })
       },
       dateChange(val,type){
-        console.log(val)
         if(type==='startAt'){
           this.editAlertSilence.startAt=bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss');
           this.startAtTamp=new Date(val).getTime();
@@ -357,12 +353,10 @@
       },
       matcherChange(val){
         this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId;
-        console.log(this.editAlertSilence,"this.editAlertSilence")
       },
       silenceChange(val){
         this.editAlertSilence.linkId=val.id;
         this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId;
-        console.log(val);
         if(this.editAlertSilence.type==='datacenter'){
           this.editAlertSilence.name=val.name;
         }
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
index 6cb65c1e8..3d0ea7834 100644
--- a/nezha-fronted/src/components/common/rightBox/menuBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -220,7 +220,6 @@
       },
       inputValid:function(val){
         return val.replace(/[,]/g,'')
-        console.log(val)
       },
     },
     mounted() {
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 3ab895f2a..26ec837e4 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -384,7 +384,6 @@
             });
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total;
-            console.info(this.$refs.alertRuleTable)
             if (!this.scrollbarWrap) {
               this.$nextTick(() => {
                 this.scrollbarWrap = this.$refs.alertRuleTable.bodyWrapper;
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 44bf076b7..edfc13d58 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -523,7 +523,6 @@
         return num>9?num:'0'+num;
       },
       exportExcel:function(params){
-        console.log('exporter')
         for (let item in params) {
           if (params[item]) {
             if (item == "alertMessageState") {
diff --git a/nezha-fronted/src/components/page/alert/silence.vue b/nezha-fronted/src/components/page/alert/silence.vue
index 72521eb9d..02e5844af 100644
--- a/nezha-fronted/src/components/page/alert/silence.vue
+++ b/nezha-fronted/src/components/page/alert/silence.vue
@@ -327,7 +327,6 @@
       this.tools.customTableTitle=localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path)
         ?JSON.parse(localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path))
         :this.tableTitle;
-      console.log(this.tools.customTableTitle,this.tableTitle);
       this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
       this.initEvent();
       this.getAlertSilence();
@@ -410,7 +409,6 @@
       },
       openDelMessageBox:function(){
         if(this.batchDeleteObjs.length<1) return;
-        console.log(this.batchDeleteObjs);
       },
       showExportDialog(){
         this.importBox.show=true;
@@ -439,7 +437,6 @@
         this.rightBox.show=true;
       },
       edit(row){
-        console.log(123123123123);
         this.$get('alert/silence/'+row.id).then(res=>{
           this.alertSilence={...res.data};
           this.rightBox.show=true;
diff --git a/nezha-fronted/src/components/page/config/exprTemp.vue b/nezha-fronted/src/components/page/config/exprTemp.vue
index 4c854aba9..073047163 100644
--- a/nezha-fronted/src/components/page/config/exprTemp.vue
+++ b/nezha-fronted/src/components/page/config/exprTemp.vue
@@ -284,7 +284,6 @@
       this.tools.customTableTitle=localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path)
         ?JSON.parse(localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path))
         :this.tableTitle;
-      console.log(this.tools.customTableTitle,this.tableTitle);
       this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
       this.initEvent();
       this.getexprTemp();
@@ -366,7 +365,6 @@
       },
       openDelMessageBox:function(){
         if(this.batchDeleteObjs.length<1) return;
-        console.log(this.batchDeleteObjs);
       },
       showExportDialog(){
         this.importBox.show=true;
@@ -396,7 +394,6 @@
         this.rightBox.show=true;
       },
       edit(row){
-        console.log(123123123123);
         this.$get('expression/tmpl/'+row.id).then(res=>{
           this.exprTemp={...res.data};
           this.rightBox.show=true;
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 7c6c2e03f..b54dc026c 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -347,7 +347,6 @@
         return JSON.parse(JSON.stringify(this.blankPromServer));
       },
       pageNo(val) {
-        console.log('page',val)
         this.pageObj.pageNo = val;
         this.getTableData();
       },
diff --git a/nezha-fronted/src/components/page/config/terminallog.vue b/nezha-fronted/src/components/page/config/terminallog.vue
index fef448ccf..5ee48b258 100644
--- a/nezha-fronted/src/components/page/config/terminallog.vue
+++ b/nezha-fronted/src/components/page/config/terminallog.vue
@@ -310,7 +310,6 @@
         this.bottomBox.targetTab = 'monitor';
         this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record));
         this.bottomBox.showSubList = true;
-        console.log(record);
       },
       shutdown(record) {
         this.$confirm(this.$t("tip.killTerm"),{
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index ddd7b1209..465526d74 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -116,31 +116,9 @@
     position: relative;
   }
   .color-show{
-    border: 1px solid #E7EAED;
-    border-radius: 4px;
-    top: -2px;
-    align-items: center;
-    width: 28px;
-    height: 28px;
-    box-sizing: border-box;
     display: inline-block;
-    vertical-align: middle;
     position: relative;
-  }
-  .color-show-left{
-    width: 28px;
-    height: 28px;
-    border-radius: 4px;
-    box-sizing: border-box;
-    text-align: center;
-    line-height: 28px;
-  }
-  .color-arrows{
-    color: #fff;
-    font-weight: bold;
-  }
-  .color-arrows .nz-icon{
-    font-size: 12px;
+    top: 1px;
   }
 
 </style>
@@ -370,33 +348,8 @@
             <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other  half-form-item-other-two">
               <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text"></el-input>
               <!--颜色选择器 start-->
-              <div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
-                <div :style="{background:mapping.color.bac}" class="color-show-left">
-                     <span :style="{color:mapping.color.text}" class="color-arrows">
-                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
-                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
-                    T
-                </span>
-                </div>
-              </div>
-              <div class="color-content" ref="color-content">
-                <el-color-picker
-                  :ref="'colorPickerBac'+index"
-                  @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
-                  popper-class="no-style-class"
-                  v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
-                >
-                </el-color-picker>
-                <!--<el-color-picker-->
-                <!--v-model="mapping.color.text"-->
-                <!--:ref="'colorPickerText'+index"-->
-                <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
-                <!--&gt;-->
-                <!--</el-color-picker>-->
-              </div>
-              <div class="color-tab" v-show="showPicker[index].bac ||  showPicker[index].text">
-                <div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
-                <div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
+              <div class="color-show">
+                <nezhaColor :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}" :single="false" :color-val="mapping.color"/>
               </div>
               <!--颜色选择器 end-->
               <span  @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
@@ -416,34 +369,10 @@
             <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other-two range" prop="span">
               <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text" ></el-input>
               <!--颜色选择器 start-->
-              <div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
-                <div :style="{background:mapping.color.bac}" class="color-show-left">
-                     <span :style="{color:mapping.color.text}" class="color-arrows">
-                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
-                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
-                    T
-                </span>
-                </div>
-              </div>
-              <div class="color-content" ref="color-content">
-                <el-color-picker
-                  :ref="'colorPickerBac'+index"
-                  popper-class="no-style-class"
-                  @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
-                  v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
-                >
-                </el-color-picker>
-                <!--<el-color-picker-->
-                <!--v-model="mapping.color.text"-->
-                <!--:ref="'colorPickerText'+index"-->
-                <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
-                <!--&gt;-->
-                <!--</el-color-picker>-->
-              </div>
-              <div class="color-tab" v-show="showPicker[index].bac ||  showPicker[index].text">
-                <div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
-                <div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
+              <div class="color-show">
+                <nezhaColor :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}" :single="false" :color-val="mapping.color"/>
               </div>
+
               <!--颜色选择器 end-->
               <span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus"  style="color: #EC7F66"></i></span>
             </el-form-item>
@@ -511,6 +440,7 @@
   import {nzNumber} from "../../common/js/validate";
   import richTextEditor from "../../charts/richTextEditor";
   import selectPanel from "../../common/popBox/selectPanel";
+  import nezhaColor from '../../common/nezhaColor'
   import i18n from "../../common/i18n";
 
   var rz = {
@@ -656,6 +586,7 @@
       'promql-input': promqlInput,
       'rich-text-editor':richTextEditor,
       selectPanel,
+      nezhaColor,
     },
     mounted() {
       this.$nextTick(() => {
@@ -1607,12 +1538,8 @@
         this.showPicker[index][atr]=true;
         // atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
       },
-      colorChange(mapping,flag,val){
-        if(flag){
-          mapping.color['bac']=this.colorRGBtoHex(val)
-        }else{
-          mapping.color['text']=this.colorRGBtoHex(val)
-        }
+      colorChange(mapping,key,val){
+        mapping.color[key]=val
       },
       colorRGBtoHex(color) {
         let rgb = color.split(',');
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index d2cf9f767..f18db40be 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -96,6 +96,7 @@
       :width="'auto'"
       :custom-class="'nz-temp-box'"
       :destroy-on-close="true"
+      @closed="tempBoxClose"
       center>
       <el-form v-model="tempBox" class="temp-form-box" ref="tempFormBox" v-if="tempBoxShow">
         <span class="temp-form-box-title">Expression</span>
@@ -189,7 +190,6 @@
     created(){
       this.queryMetrics();
       this.getAllOptins();
-      console.log(123123123);
     },
     methods:{
       closeDropdown(){
@@ -234,7 +234,6 @@
               }
               //this.metricStore.push({label:item,value:item,insertText:item})
             });
-            console.log(metricMap);
             for(let key of metricMap.keys()){
               let option={
                 label:key,
@@ -259,7 +258,6 @@
         cb(result)
       },
       metricChange:function(value){
-        console.log(value);
         if(!value) return;
         this.expressionList[this.index]=value;
         //this.$refs.editor.setContent(value)
@@ -294,7 +292,6 @@
         })
       },
       lazyLoad(node,data){
-        console.log(node,data);
         if(data.temp){
           if(!data.child){
             this.tempBoxShowLoading=true;
@@ -314,11 +311,9 @@
             this.dropDownVisible=false
             this.$get('/expression/tmpl/'+data.id).then(res=>{
               if(res.code===200){
-                console.log(res);
                 res.data.vars.forEach(item=>{
                   res.data[item]='';
                 });
-                console.log(res.data);
                 this.tempBox={
                   ...this.tempBox,
                   ...res.data,
@@ -333,7 +328,6 @@
       },
       tempBoxShowChange(flag){
         this.tempBoxShow=flag;
-        console.log(this.tempBox);
         if(flag){
           this.cascaderValue="";
           let params={};
@@ -359,7 +353,6 @@
           }
 
           this.$post('/expression/tmpl/render',params).then(res=>{
-            console.log(res);
             if(res.code===200){
               this.tempBoxShow=false;
               this.expressionList[this.index]=res.data.expression;
@@ -419,7 +412,10 @@
         });
 
 
-      }
+      },
+      tempBoxClose(){
+        this.cascaderValue="";
+      },
 
 
 
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index c1b8afcab..d3220898a 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -515,7 +515,6 @@
       let times=[];
       let tzo=(new Date().getTimezoneOffset()/60)*(-1);//系统时区
       let time=bus.UTCTimeToConfigTimezone(new Date().getTime()-tzo*60*60*1000);
-      console.log(time);
       for(let i=0;i<10;i++){
         time=time-5*60*1000;
         times.push(bus.timeFormate(time,'hh:mm'))
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index 392b40c6f..ab6cd5c75 100644
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -121,7 +121,6 @@ const store = new Vuex.Store({
       state.overViewProject=data;
     },
     setDcDataRefresh(state){
-      console.log(123)
       state.dcDataRefresh=true;
       setTimeout(()=>{
         state.dcDataRefresh=false;
diff --git a/nezha-fronted/static/config.json b/nezha-fronted/static/config.json
index c7b0c16ac..66c3c57ef 100644
--- a/nezha-fronted/static/config.json
+++ b/nezha-fronted/static/config.json
@@ -1 +1 @@
-{"baseUrl":"/", "version": "1.2.2020.11.10.14.10"}
+{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "1.2.2020.11.10.14.10"}