NEZ-3364 fix：dashboard chart 配色方案细节调整

nezha-fronted/src/assets/css/common.scss

@@ -572,7 +572,8 @@ textarea {
 }
 
 .newAlert-notification{
-  width: auto;
+  box-sizing: border-box;
+  width: 460px;
   padding: 15px 55px 15px 18px;
   align-items: center;
   background: $--background-color-2;
@@ -867,6 +868,9 @@ i.nz-icon-override{
 input::placeholder{
   text-transform:capitalize;
 }
+.text-transform-none input::placeholder{
+  text-transform:none;
+}
 .vue-tags-input {
   .ti-tag.ti-valid {
     max-width: 100%;

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

@@ -57,12 +57,12 @@ export default {
       type: Array,
       default () {
         return [
-          '#19730E', '#37872D', '#73BF69',
+          '#ad0317', '#e02f44', '#ff7383',
-          '#CC9D00', '#E0B400', '#FADE2A',
+          '#e55400', '#ff780a', '#ffb357',
-          '#AD0317', '#C4162A', '#F2495C',
+          '#cc9d00', '#f2cc0c', '#ffee52',
-          '#1250B0', '#1F60C4', '#5794F2',
+          '#19730e', '#56a64b', '#96d98d',
-          '#E55400', '#FA6400', '#FF9830',
+          '#124fb0', '#3274d9', '#8ab8ff',
-          '#7C2EA3', '#8F3BB8', '#B877D9'
+          '#7c2ea3', '#a352cc', '#ca95e5'
         ]
       }
     },
@@ -96,8 +96,13 @@ export default {
   },
   mounted () {
     if (!this.isTopo) {
-      this.keyName = this.valueArr[0].name
+      // 默认选中background
-      this.colors = this.valueArr[0].value || randomcolor() + 'FF'
+      let index = this.valueArr.findIndex(item => item.key === 'bac')
+      if (index == -1) {
+        index = 0
+      }
+      this.keyName = this.valueArr[index].name
+      this.colors = this.valueArr[index].value || randomcolor() + 'FF'
       this.$emit('colorChange', this.colors, this.keyName)
     } else {
       this.keyName = this.valueArr[0].name

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

@@ -207,38 +207,6 @@
           </el-cascader>
         </el-form-item>
 
-        <!--min-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.min"/>
-        </el-form-item>
-        <!--max-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.max"/>
-        </el-form-item>
-        <!--decimals-->
-        <el-form-item :label="$t('overall.decimal')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            :placeholder="'Default 2'"
-            show-word-limit v-model="chartConfig.param.decimals"/>
-        </el-form-item>
         <!--color Scheme-->
         <el-form-item :label="$t('dashboard.dashboard.chartForm.colorScheme')" class="colorScheme-form-item form-item--half-width" v-if="isShowColorScheme(chartConfig.type)">
           <el-select
@@ -269,6 +237,38 @@
             @colorChange="(color,key)=>{colorChange(color,key)}"
           />
         </el-form-item>
+        <!--decimals-->
+        <el-form-item :label="$t('overall.decimal')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            :placeholder="'Default 2'"
+            show-word-limit v-model="chartConfig.param.decimals"/>
+        </el-form-item>
+        <!--min-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.min"/>
+        </el-form-item>
+        <!--max-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.max"/>
+        </el-form-item>
 
         <!-- index -->
         <el-form-item
@@ -1157,7 +1157,7 @@
                       </div>
                     </div>
                     <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                      <el-input v-model="item.display" style="margin-right: 10px" placeholder="" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
+                      <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('valueMapping', index)" class="mapping-display-input text-transform-none" :placeholder="'{{value}}'">
                         <el-dropdown trigger="click" slot="prefix" placement="top-start">
                           <div class="el-dropdown-link">
                             <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>

nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js

@@ -231,10 +231,12 @@ export default {
     },
     isShowMinMax (type) {
       switch (type) {
-        case 'log' :
+        case 'line':
-        case 'table' :
+        case 'area':
-          return false
+        case 'point':
-        default: return true
+        case 'gauge':
+          return true
+        default: return false
       }
     },
     isTimeSeries (type) {

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -305,6 +305,12 @@ export default {
     }
   },
   mixins: [rz],
+  computed: {
+    colorByValue () {
+      const mode = lodash.get(this.chartConfig, 'param.color.mode', 'palette')
+      return mode == 'continuous'
+    }
+  },
   methods: {
     schemeTypeChange (val) {
       const obj = this.$lodash.cloneDeep(this.chartConfig.param.color)
@@ -315,7 +321,7 @@ export default {
       } else if (val === 'fixed') {
         obj.schemeType = 'fixed'
         obj.mode = 'fixed'
-        obj.fixedColor = obj.fixedColor || randomcolor()
+        obj.fixedColor = obj.fixedColor || '#56a64b'
       } else {
         obj.schemeType = val
         obj.mode = 'continuous'
@@ -507,7 +513,7 @@ export default {
         type: 'value',
         show: true,
         value: undefined,
-        display: '',
+        display: '{{value}}',
         color: {
           bac: bacColor + 'FF',
           text: ColorReverse(bacColor) + 'FF',

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

@@ -179,39 +179,6 @@
           </el-cascader>
         </el-form-item>
 
-        <!--min-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.min"/>
-        </el-form-item>
-        <!--max-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.max"/>
-        </el-form-item>
-        <!--decimals-->
-        <el-form-item :label="$t('config.assetLabel.decimals')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            :placeholder="'Default 2'"
-            show-word-limit
-            v-model="chartConfig.param.decimals"/>
-        </el-form-item>
         <!--color Scheme-->
         <el-form-item :label="$t('dashboard.dashboard.chartForm.colorScheme')" class="colorScheme-form-item form-item--half-width" v-if="isShowColorScheme(chartConfig.type)">
           <el-select
@@ -242,6 +209,39 @@
             @colorChange="(color,key)=>{colorChange(color,key)}"
           />
         </el-form-item>
+        <!--decimals-->
+        <el-form-item :label="$t('config.assetLabel.decimals')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            :placeholder="'Default 2'"
+            show-word-limit
+            v-model="chartConfig.param.decimals"/>
+        </el-form-item>
+        <!--min-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.min"/>
+        </el-form-item>
+        <!--max-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.max"/>
+        </el-form-item>
 
         <!-- index -->
         <el-form-item
@@ -794,7 +794,7 @@
                       </div>
                     </div>
                     <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                      <el-input v-model="item.display" style="margin-right: 10px" placeholder="" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
+                      <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('valueMapping', index)" class="mapping-display-input text-transform-none" :placeholder="'{{value}}'">
                         <el-dropdown trigger="click" slot="prefix" placement="top-start">
                           <div class="el-dropdown-link">
                             <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>