Merge branch 'dev-3.2' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

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

@@ -132,7 +132,14 @@
         border-color: $--border-color-light-focus;
       }
     }
-    .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
+    .el-form-item.is-error .el-input__inner,
+    .el-form-item.is-error .el-input__inner:focus,
+    .el-form-item.is-error .el-textarea__inner,
+    .el-form-item.is-error .el-textarea__inner:focus,
+    .el-message-box__input input.invalid,
+    .el-message-box__input input.invalid:focus,
+
+    {
       border-color: #F56C6C
     }
 

nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss

@@ -4,7 +4,7 @@
   display: inline-block;
   > div{
     display: inline-block;
-    width: 8px;
+    width: 5px;
     height: 14px;
     margin-right: 3px;
     border-radius: 2px;

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

@@ -103,6 +103,9 @@
         cursor: pointer;
       }
     }
+    .is-item-box-error .chart-title-config {
+      border-color: #F56C6C
+    }
     .chart-title .nz-icon-arrow-down{
       display: inline-block;
       transition: transform .3s;

nezha-fronted/src/components/chart/ChartScreenHeader.vue

@@ -88,7 +88,10 @@ export default {
       this.filter.value = this.searchTime[2]
       this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
       setTimeout(() => {
-        const multipleTime = this.$refs.pickTime.$refs.multipleTime ? this.$refs.pickTime.$refs.multipleTime.searchTime : ''
+        let multipleTime = this.$refs.pickTime.$refs.multipleTime ? this.$refs.pickTime.$refs.multipleTime.searchTime : ''
+        if (this.$refs.pickTime.$refs.multipleTime && !this.$refs.pickTime.$refs.multipleTime.showDropdown) {
+          multipleTime = ''
+        }
         this.$emit('dateChange', this.filter, multipleTime)
       }, 100)
     },

nezha-fronted/src/components/chart/chart/chartBar.vue

@@ -133,7 +133,7 @@ export default {
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
             const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
-            mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
+            mapping && this.chartOption.color && (this.chartOption.color[colorIndex] = mapping.color.bac)
             const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
             s.data.push({
               value: value,

nezha-fronted/src/components/chart/chart/chartPie.vue

@@ -109,7 +109,7 @@ export default {
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
             const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
-            mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
+            mapping && this.chartOption.color && (this.chartOption.color[colorIndex] = mapping.color.bac)
             const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
             s.data.push({
               value: value,

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -93,6 +93,7 @@ export default {
       /* 使用setTimeout延迟渲染图表，避免样式错乱 */
       setTimeout(() => {
         const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
+        myChart.clear()
         if (!myChart) {
           return
         }

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

@@ -193,8 +193,8 @@ export default {
       this.selectedSelection = val
     },
     leftToRight () {
-      this.$emit('leftToRight', this.selectableSelection)
       this.selectedData.splice(0, 0, ...this.selectableSelection)
+      this.$emit('leftToRight', this.selectedData)
     },
     rightToLeft () {
       this.$emit('rightToLeft', this.selectedSelection)

nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue

@@ -434,7 +434,7 @@ export default {
       this.getTableData()
     },
     getTableData () {
-      this.$refs.transfer.startLoading()
+      this.$refs.transfer && this.$refs.transfer.startLoading()
       const searchLabel = { ...this.transfer.searchLabel }
       if (this.editData.editType === assetConstants.editTypeData.account) {
         searchLabel.authProtocol = this.editData.authProtocol

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

@@ -461,7 +461,7 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
         </div>
-        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
+        <div v-for="(item,index) in chartConfig.param.columns" :key="index" :class="item.error? 'is-item-box-error' : ''">
           <div class="chart-title chart-title-config">
                 <span class="chart-title-content">
                   <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
@@ -489,7 +489,7 @@
                 <div class='mapping-display'>Title</div>
               </div>
               <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
-                <el-input size="small" v-model="item.title" @change="change"></el-input>
+                <el-input size="small" v-model="item.title" @change="change('columns',index)"></el-input>
               </el-form-item>
               <div>
                 <div class='mapping-display'>Unit</div>
@@ -508,7 +508,7 @@
                 <div class='mapping-display'>Display</div>
               </div>
               <el-form-item :prop="'param.columns.' + 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" size="small"  @change="change"/>
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change('columns',index)"/>
               </el-form-item>
             </el-row>
           </transition-group>
@@ -533,6 +533,7 @@
             <div
               v-for="(item,index) in chartConfig.param.valueMapping"
               :key="index"
+              :class="item.error? 'is-item-box-error' : ''"
             >
               <div class="chart-title chart-title-config">
                 <span class="chart-title-content">
@@ -597,7 +598,7 @@
                       size="small"
                       v-model.number="item.value"
                       placeholder="value"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                     ></el-input-number>
                   </el-form-item>
                   <el-form-item
@@ -611,7 +612,7 @@
                       size="small"
                       v-model.number="item.from"
                       placeholder="from"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                     ></el-input-number>
                   </el-form-item>
                   <el-form-item
@@ -624,7 +625,7 @@
                       :controls="false"
                       size="small"
                       v-model.number="item.to"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                       placeholder="to"
                     ></el-input-number>
                   </el-form-item>
@@ -638,7 +639,7 @@
                       size="small"
                       v-model="item.regx"
                       placeholder="regx"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                     ></el-input>
                   </el-form-item>
                 </el-row>
@@ -647,13 +648,13 @@
                     <div class='mapping-display'>Columns</div>
                   </div>
                   <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
+                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change('valueMapping', index)"/>
                   </el-form-item>
                   <div>
                     <div class='mapping-display'>Display</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="$t('placeholder.chart.display')" size="small" @change="change"/>
+                    <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
                   </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)}"/>
                 </el-row>

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

@@ -267,6 +267,7 @@ export default {
           })
         }
       }).catch(res => {
+        this.$refs['childrenFrom' + this.editChart.datasource].showError()
         console.info(res)
       })
     },

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

@@ -389,8 +389,11 @@ export default {
       }
       this.change()
     },
-    change () {
+    change (key, index) {
       this.$nextTick(() => {
+        if (key) {
+          this.hideError(key, index)
+        }
         this.$emit('change', this.chartConfig)
       })
     },
@@ -429,6 +432,27 @@ export default {
           break
       }
       this.change()
+    },
+    showError () {
+      this.$refs.chartForm.validate((blooen, object) => {
+        console.log(blooen, object)
+        Object.keys(object).forEach(item => {
+          const keyArr = item.split('.')
+          if (keyArr.length >= 4) {
+            this.chartConfig[keyArr[0]][keyArr[1]][keyArr[2]].error = true
+          }
+        })
+        if (!blooen) {
+          this.$forceUpdate()
+        }
+      })
+    },
+    hideError (key, index) {
+      if (!this.chartConfig.param[key] || !this.chartConfig.param[key].length) {
+        return
+      }
+      this.chartConfig.param[key][index].error = false
+      this.$forceUpdate()
     }
   }
 }

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

@@ -378,7 +378,7 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
         </div>
-        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
+        <div v-for="(item,index) in chartConfig.param.columns" :key="index" :class="item.error? 'is-item-box-error' : ''">
           <div class="chart-title chart-title-config">
                 <span class="chart-title-content">
                   <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
@@ -406,7 +406,7 @@
                 <div class='mapping-display'>Title</div>
               </div>
               <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
-                <el-input size="small" v-model="item.title" @change="change"></el-input>
+                <el-input size="small" v-model="item.title" @change="change('columns',index)"></el-input>
               </el-form-item>
               <div>
                 <div class='mapping-display'>Unit</div>
@@ -425,7 +425,7 @@
                 <div class='mapping-display'>Display</div>
               </div>
               <el-form-item :prop="'param.columns.' + 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" size="small"  @change="change"/>
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change('columns',index)"/>
               </el-form-item>
             </el-row>
           </transition-group>
@@ -450,6 +450,7 @@
             <div
               v-for="(item,index) in chartConfig.param.valueMapping"
               :key="index"
+              :class="item.error? 'is-item-box-error' : ''"
             >
               <div class="chart-title chart-title-config">
                 <span class="chart-title-content">
@@ -514,7 +515,7 @@
                       size="small"
                       v-model.number="item.value"
                       placeholder="value"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                     ></el-input-number>
                   </el-form-item>
                   <el-form-item
@@ -528,7 +529,7 @@
                       size="small"
                       v-model.number="item.from"
                       placeholder="from"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                     ></el-input-number>
                   </el-form-item>
                   <el-form-item
@@ -541,7 +542,7 @@
                       :controls="false"
                       size="small"
                       v-model.number="item.to"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                       placeholder="to"
                     ></el-input-number>
                   </el-form-item>
@@ -555,7 +556,7 @@
                       size="small"
                       v-model="item.regx"
                       placeholder="regx"
-                      @change="change"
+                      @change="change('valueMapping', index)"
                     ></el-input>
                   </el-form-item>
                 </el-row>
@@ -564,13 +565,13 @@
                     <div class='mapping-display'>Columns</div>
                   </div>
                   <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
+                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change('valueMapping', index)"/>
                   </el-form-item>
                   <div>
                     <div class='mapping-display'>Display</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="$t('placeholder.chart.display')" size="small" @change="change"/>
+                    <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
                   </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)}"/>
                 </el-row>