NEZ-2635 fix： 创建Metrics的chart时设置Thresholds选择颜色有误

nezha-fronted/src/components/common/js/common.js

@@ -16,6 +16,10 @@ export function getUUID () {
   return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
 }
 
+export function s8 () {
+  return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1)
+}
+
 export const chartCache = {}
 
 export function getChart (key) {

nezha-fronted/src/components/common/nezhaColor.vue

@@ -21,7 +21,7 @@
       <el-row v-if="!single" class="color-tab">
         <div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click.stop="colorTabChange(item)">{{item.name}}</div>
       </el-row>
-      <sketch v-model="colors" :disableAlpha="disableAlpha" @input.stop="updateValue" :presetColors="presetColors"/>
+      <sketch v-model="colors" :disableAlpha="disableAlpha" @input="updateValue" :presetColors="presetColors"/>
     </div>
   </span>
 </template>

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -484,7 +484,7 @@
           <el-row v-if="chartConfig.param.enable.thresholds && isThresholdConfig(chartConfig.type)">
             <el-form-item
               v-for="(item,index) in chartConfig.param.thresholds"
-              :key="item.color + '' + index"
+              :key="item.id + '' + index"
               class="thresholds-item"
               :prop="'param.thresholds.' + index + '.value'"
               :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
@@ -939,6 +939,7 @@ import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import VueTagsInput from '@johmun/vue-tags-input'
 import draggable from 'vuedraggable'
+import { s8 } from '@/components/common/js/common'
 import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
 import { isSankey } from '@/components/chart/chart/tools'
 
@@ -1248,6 +1249,7 @@ export default {
     },
     addThresholds () {
       this.chartConfig.param.thresholds.push({
+        id: s8(),
         value: undefined,
         color: randomcolor()
       })

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -137,7 +137,7 @@
 <script>
 import { fromRoute } from '@/components/common/js/constants'
 import editRigthBox from '@/components/common/mixin/editRigthBox'
-import { resetZIndex, getUUID } from '@/components/common/js/common'
+import { resetZIndex, getUUID, s8 } from '@/components/common/js/common'
 import selectPanel from '@/components/common/popBox/selectPanel'
 import chartConfig from '@/components/common/rightBox/chart/chartConfig'
 import otherChartConfig from '@/components/common/rightBox/chart/otherChartConfig'
@@ -382,7 +382,7 @@ export default {
               valueMapping: false,
               visibility: false
             },
-            thresholds: [{ value: undefined, color: '#eeeeeeff' }],
+            thresholds: [{ id: s8(), value: undefined, color: '#eeeeeeff' }],
             showHeader: this.editChart.param.showHeader,
             visibility: {
               varName: '',
@@ -541,6 +541,10 @@ export default {
         }
         if (obj.param && !obj.param.thresholds) {
           obj.param.thresholds = []
+        } else if (obj.param && obj.param.thresholds) {
+          obj.param.thresholds.forEach(item => {
+            item.id = s8()
+          })
         }
         if (obj.groupId === -1) {
           obj.groupId = ''

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -398,7 +398,7 @@
           <el-row v-if="chartConfig.param.enable.thresholds && isThresholdConfig(chartConfig.type)">
             <el-form-item
               v-for="(item,index) in chartConfig.param.thresholds"
-              :key="item.color + '' + index"
+              :key="item.id + '' + index"
               class="thresholds-item"
               :prop="'param.thresholds.' + index + '.value'"
               :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"