feat： chart-box 样式调整

nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss

@@ -1,5 +1,23 @@
 .chart-right-box{
   overflow-y: auto;
+  .el-tabs--border-card {
+    box-shadow: none;
+    border: none;
+  }
+  .el-tabs__nav{
+    width: 100%;
+    > div{
+      width: 25%;
+      box-sizing: border-box;
+      text-align: center;
+      padding: 0!important;
+    }
+  }
+  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+    color: $--color-white;
+    background: $--color-primary;
+    border: none;
+  }
 }
 .right-box__container{
   .chart-config{
@@ -8,7 +26,7 @@
     .el-form {
       padding-top: 0px;
       .thresholds-from-item{
-        margin-bottom: 0;
+        margin-bottom: 0 !important;
         flex: 1;
       }
       .el-form-item__error {

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

@@ -64,7 +64,7 @@
             </span>
           </div>
           <transition name="el-zoom-in-top">
-            <el-row v-show="expressionsShow[index-1].show">
+            <el-row v-show="expressionsShow[index-1].show" style="margin-bottom: 10px">
               <el-form-item :prop="'elements.' + (index -1) + '.expression'"
                             :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}">
                 <promql-input
@@ -391,7 +391,7 @@
               />
               <el-input
                 size="small"
-                style="margin-top: 3px"
+                style="margin-top: 2px"
                 :placeholder="$t('placeholder.chart.threshold')"
                 v-model.number="item.value"
                 :controls="false"

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

@@ -57,7 +57,7 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.dataConfig')}}</span>
         </div>
-        <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
+        <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange" type="card">
           <el-tab-pane label="Metrics" name="1">
             <chart-config  ref="childrenFrom1" :type="'metrics'" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
@@ -162,6 +162,7 @@ export default {
       arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
       Promise.all(arr).then(res => {
         this.editChart.param = JSON.stringify(this.editChart.param)
+        this.editChart.panelId = this.panelId
         if (this.editChart.id) { // 修改
           this.$put('visual/panel/chart', this.editChart).then(response => {
             if (response.code === 200) {

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

@@ -248,7 +248,7 @@
                   </div>
                   <el-form-item
                     v-if="item.type === 'value'"
-                    :prop="'param.valueMapping.mapping.' + index + 'value'"
+                    :prop="'param.valueMapping.mapping.' + index + '.value'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
                     class="thresholds-from-item"
                   >
@@ -261,7 +261,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + 'from'"
+                    :prop="'param.valueMapping.mapping.' + index + '.from'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
                     class="thresholds-from-item"
                   >
@@ -274,7 +274,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + 'to'"
+                    :prop="'param.valueMapping.mapping.' + index + '.to'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
                     class="thresholds-from-item"
                   >
@@ -287,7 +287,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'regx'"
-                    :prop="'param.valueMapping.mapping.' + index + 'regx'"
+                    :prop="'param.valueMapping.mapping.' + index + '.regx'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
                     class="thresholds-from-item"
                   >
@@ -302,7 +302,7 @@
                   <div>
                     <div class='mapping-display'>Display</div>
                   </div>
-                  <el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                  <el-form-item :prop="'param.valueMapping.mapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
                     <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
                   </el-form-item>
                   <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
@@ -426,6 +426,13 @@ export default {
       ]
     }
   },
+  watch: {
+    selectList (n) {
+      if (n.length === 1) {
+        this.chartConfig.param.systemSelect = this.selectList[0].name
+      }
+    }
+  },
   methods: {
     init () {
       this.chartConfig = JSON.parse(JSON.stringify(this.params))
@@ -474,7 +481,7 @@ export default {
       this.chartConfig.param.systemGroup = ''
       this.chartConfig.param.systemSelect = ''
       this.groupList = item.group
-      this.selectList = item.select
+      this.selectList = JSON.parse(JSON.stringify(item.select))
     }
   },
   created () {