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

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

@@ -111,6 +111,47 @@ export default {
 
         node.addEventListener('animationend', handleAnimationEnd, { once: true })
       })
+    },
+    handleLegendAlias (legend, aliasExpression, params) {
+      const self = this
+      const myParams = JSON.parse(JSON.stringify(params))
+      myParams.$labels = JSON.parse(JSON.stringify(params))
+      myParams.$value = myParams.value
+      if (/\{\{.+\}\}/.test(aliasExpression)) {
+        const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          if (!legend) {
+            return label
+          }
+          let value = null
+          if (params && self.$lodash.get(myParams, label)) {
+            value = self.$lodash.get(myParams, label)
+          }
+          if (label) {
+            const reg = new RegExp(label + '=".+?"', 'g')
+            if (reg.test(legend)) {
+              const ans = legend.match(reg)
+              let find = ''
+              ans.forEach(item => {
+                const index = legend.indexOf(item)
+                if (legend[index - 1] !== '_') {
+                  find = item
+                }
+              })
+              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+            }
+          }
+          return value || ''
+        })
+        return labelValue
+      } else {
+        if (!aliasExpression) {
+          return legend
+          // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
+          // return result
+        }
+        return aliasExpression
+      }
     }
   }
 }

nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js

@@ -354,7 +354,9 @@ export default {
         this.chartParams = {
           ...pen.data.tooltip,
           unit: this.params.unit,
-          statistic: this.params.statistic
+          statistic: this.params.statistic,
+          legend: pen.data.legend,
+          parent: pen.data.parent
         }
         this.timer3 = setTimeout(() => {
           let ePosition = window.ePosition

nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js

@@ -97,47 +97,6 @@ export default {
         })
       })
     },
-    handleLegendAlias (legend, aliasExpression, params) {
-      const self = this
-      const myParams = JSON.parse(JSON.stringify(params))
-      myParams.$labels = JSON.parse(JSON.stringify(params))
-      myParams.$value = myParams.value
-      if (/\{\{.+\}\}/.test(aliasExpression)) {
-        const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
-          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-          if (!legend) {
-            return label
-          }
-          let value = null
-          if (params && self.$lodash.get(myParams, label)) {
-            value = self.$lodash.get(myParams, label)
-          }
-          if (label) {
-            const reg = new RegExp(label + '=".+?"', 'g')
-            if (reg.test(legend)) {
-              const ans = legend.match(reg)
-              let find = ''
-              ans.forEach(item => {
-                const index = legend.indexOf(item)
-                if (legend[index - 1] !== '_') {
-                  find = item
-                }
-              })
-              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
-            }
-          }
-          return value || ''
-        })
-        return labelValue
-      } else {
-        if (!aliasExpression) {
-          return legend
-          // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
-          // return result
-        }
-        return aliasExpression
-      }
-    },
     clacTopoData (data, queryValues) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
       return new Promise(resolve => { // 处理加载数据
         if (!data) {

nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue

@@ -789,6 +789,31 @@
           </div>
         </div>
       </div>
+      <!--source-->
+      <div class="form-row-title">
+        {{$t('dashboard.dashboard.chartForm.datasource')}}
+      </div>
+      <div class="el-form">
+        <div  class="form-row-content">
+          <div class="form-row-item form-row-item-full">
+            <div class="form-row-key">
+              {{$t('dashboard.dashboard.chartForm.legend')}}
+            </div>
+            <div class="form-row-value">
+              <div style="display: inline-block;width: calc(30% - 3px)">
+                <el-select v-model="pen.data.parent" size="small" clearable @change="penDataParentChange">
+                  <el-option class="text-ellipsis" v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name' :title="item.name" style="width: 133px;"></el-option>
+                </el-select>
+              </div>
+              <div style="display: inline-block;width: calc(70% - 13px);margin-left: 10px">
+                <el-select v-model="pen.data.legend" size="small" filterable allow-create clearable default-first-option>
+                  <el-option class="text-ellipsis" v-for="item in queryValues.filter(query => (query.parent === pen.data.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name' :title="item.name" style="width: 302px;"></el-option>
+                </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <!--         valueMapping -->
       <div class="form-row-title">
@@ -806,23 +831,6 @@
       <transition name="el-zoom-in-top">
         <div class="el-form" v-show="elements.valueMapping && pen.data.enable.valueMapping">
           <div  class="form-row-content">
-            <div class="form-row-item form-row-item-full">
-              <div class="form-row-key">
-                {{$t('dashboard.dashboard.chartForm.legend')}}
-              </div>
-              <div class="form-row-value">
-                <div style="display: inline-block;width: calc(30% - 3px)">
-                  <el-select v-model="pen.data.parent" size="small" clearable @change="penDataParentChange">
-                    <el-option class="text-ellipsis" v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name' :title="item.name" style="width: 133px;"></el-option>
-                  </el-select>
-                </div>
-                <div style="display: inline-block;width: calc(70% - 13px);margin-left: 10px">
-                  <el-select v-model="pen.data.legend" size="small" filterable allow-create clearable default-first-option>
-                    <el-option class="text-ellipsis" v-for="item in queryValues.filter(query => (query.parent === pen.data.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name' :title="item.name" style="width: 302px;"></el-option>
-                  </el-select>
-                </div>
-              </div>
-            </div>
             <div class="form-row-item form-row-item-full chart-config">
               <el-row class="el-form">
                 <draggable

nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="tooltip-box" style="width: 400px;height: 300px;display: flex;flex-direction: column">
-    <div v-if="params.titleShow && params.title" style="margin-bottom: 5px" class="tooltip-box-title">{{params.title}}</div>
+    <div v-if="params.titleShow && params.title" style="margin-bottom: 5px" class="tooltip-box-title">{{ title || params.title}}</div>
 
     <div
       v-if="params.chartType === 'text'"
     >
-      {{params.content}}
+      {{content || params.content}}
     </div>
     <panelChart
       v-else
@@ -39,7 +39,10 @@ export default {
   },
   data () {
     return {
-      chartInfo: { ...defaultLineData, loaded: false }
+      chartInfo: { ...defaultLineData, loaded: false },
+      dataSource: {},
+      title: '',
+      content: ''
     }
   },
   mounted () {
@@ -56,7 +59,13 @@ export default {
         this.chartInfo.id = this.meta2dId + 'meta2DTooltip'
         const chartData = []
         const elements = []
-        const obj = {}
+        const source = this.queryValues.find(query => query.name === this.params.legend && query.parent === this.params.parent)
+        if (source) {
+          this.dataSource = source
+          console.log(this.params.title, this.dataSource.elements.expression, this.dataSource.metric)
+          this.title = this.handleLegendAlias(this.params.title, this.params.title, this.dataSource.metric) || this.params.title
+          this.content = this.handleLegendAlias(this.params.content, this.params.content, this.dataSource.metric) || this.params.content
+        }
         this.params.legends.forEach(item => {
           const findItem = this.queryValues.find(query => query.name === item.legend && query.parent === item.parent)
           // if (findItem) {
@@ -94,6 +103,8 @@ export default {
         }
       }
     }
+  },
+  methods: {
   }
 }
 </script>