NEZ-2042 feat：value mapping中column支持下拉选择

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

@@ -295,6 +295,7 @@
       margin-top: 5px;
       i{
         font-size: 18px;
+        color: $--color-text-regular;
       }
       &:nth-of-type(5n+1){
         margin-left: 0;

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

@@ -64,6 +64,7 @@ export default {
   },
   methods: {
     initChart () {
+      this.legends = []
       this.initBubbleData(this.chartInfo, this.chartData)
       if (this.isNoData) {
         return
@@ -120,11 +121,11 @@ export default {
           .padding(6)
         // 如果数据全为0 则设置默认值（否则图表不显示）
         let bubbleData = lodash.cloneDeep(this.bubbleData)
-        if (bubbleData.every(item => !item.value || item.value == 0)) {
+        if (bubbleData.every(item => item.value == 0)) {
           bubbleData = bubbleData.map(item => {
             return {
               ...item,
-              value: 100
+              value: 100 // 目的是显示气泡 与值大小无关
             }
           })
         }

nezha-fronted/src/components/common/popBox/selectDashboard.vue

@@ -130,6 +130,7 @@ export default {
       }
     },
     showPanel: {
+      immediate: true,
       handler (n) {
         if (n) {
           this.panel = JSON.parse(JSON.stringify(n))
@@ -164,14 +165,9 @@ export default {
       // 其他tab的数据（我的收藏、我的创建、最近浏览数据）
       otherData: [],
       // 收藏列表
-      starredList: [],
+      starredList: []
-      // 用户id
-      userId: ''
     }
   },
-  created () {
-    this.userId = localStorage.getItem('nz-user-id')
-  },
   methods: {
     // 新增仪表盘
     toAdd () {
@@ -187,13 +183,14 @@ export default {
     },
     // 设置树形菜单数据
     setData (type = this.currentTab) {
+      const userId = localStorage.getItem('nz-user-id')
       if (type === 'starred') { // 我的收藏
         this.otherData = JSON.parse(JSON.stringify(this.starredList))
       } else if (type === 'create') { // 我的创建
         const flatArr = this.flatten(this.panelData)
-        this.otherData = flatArr.filter(item => item.createBy == this.userId)
+        this.otherData = flatArr.filter(item => item.createBy == userId)
       } else if (type === 'browse') { // 最近浏览
-        const browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]')
+        const browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${userId}`) || '[]')
         const flatArr = this.flatten(this.panelData)
         const tempArr = []
         // 比对id获取最近浏览的数据
@@ -244,8 +241,9 @@ export default {
     },
     // 存储最近浏览的面板
     setBrowse () {
+      const userId = localStorage.getItem('nz-user-id')
       // 获取最近浏览id数组
-      let browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]')
+      let browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${userId}`) || '[]')
       const flatArr = this.flatten(this.panelData)
       // 若最近浏览的数据已被删除 则截取掉
       for (let i = 0; i < browseArr.length; i++) {
@@ -266,7 +264,7 @@ export default {
       browseArr.unshift({ id: this.panel.id })
       // 如果数组长度大于10则截取
       browseArr.splice(10)
-      localStorage.setItem(`nz-view-dashboard-${this.userId}`, JSON.stringify(browseArr))
+      localStorage.setItem(`nz-view-dashboard-${userId}`, JSON.stringify(browseArr))
     },
     // 新增收藏
     addStarred: bus.debounceFn(function (data) {

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

@@ -684,8 +684,23 @@
                   <div v-if="isTable(chartConfig.type)">
                     <div class='mapping-display'>{{$t('placeholder.chart.column')}}</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-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), change: 'blur'}" class="thresholds-from-item">
-                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change('valueMapping', index)"/>
+                    <el-select
+                      v-model="item.column"
+                      size="small"
+                      :placeholder="$t('placeholder.chart.column')"
+                      style="margin-right: 10px"
+                      @change="change('valueMapping', index)"
+                      filterable
+                      allow-create
+                      default-first-option
+                    >
+                    <el-option
+                      v-for="item in chartConfig.param.columns.filter(item=> item.title)"
+                      :value="item.title"
+                      :label="item.title"
+                      :key="item.title"/>
+                    </el-select>
                   </el-form-item>
                   <div>
                     <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>

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

@@ -637,8 +637,23 @@
                   <div v-if="isTable(chartConfig.type)">
                     <div class='mapping-display'>{{$t('placeholder.chart.column')}}</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-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), change: 'blur'}" class="thresholds-from-item">
-                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change('valueMapping', index)"/>
+                    <el-select
+                      v-model="item.column"
+                      size="small"
+                      :placeholder="$t('placeholder.chart.column')"
+                      style="margin-right: 10px"
+                      @change="change('valueMapping', index)"
+                      filterable
+                      allow-create
+                      default-first-option
+                    >
+                    <el-option
+                      v-for="item in chartConfig.param.columns.filter(item=> item.title)"
+                      :value="item.title"
+                      :label="item.title"
+                      :key="item.title"/>
+                    </el-select>
                   </el-form-item>
                   <div>
                     <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>