feat： topo 添加 tooltip （30%）

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

@@ -14,7 +14,6 @@ import {
   myCubeAnchors
 } from '../../L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
-import { getMetricTypeValue } from '@/components/common/js/tools'
 import bus from '@/libs/bus'
 import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
 export default {
@@ -23,7 +22,18 @@ export default {
       selectPens: [],
       editFlag: false,
       prevFlag: false,
-      meta2dLoading: true
+      meta2dLoading: true,
+      position: {
+        top: 50,
+        left: 0
+      },
+      chartParams: {
+        chartType: 'line',
+        content: '',
+        legends: [],
+        title: '',
+        titleShow: true,
+      }
     }
   },
   mixins: [topoUtil],
@@ -72,6 +82,7 @@ export default {
       const endTime = new Date().getTime()
       const startTime = endTime - 60 * 5 * 1000
       this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
+        console.log(arr)
         this.clacTopoData(this.topoData, arr).then((data) => {
           getTopology(this.meta2dId).resize()
           getTopology(this.meta2dId).open(data)
@@ -88,7 +99,7 @@ export default {
         params: { // 用于编辑时 重置为节点初始状态
           background: pen.background || '#22222200',
           color: pen.color || '#222222ff',
-          textColor: pen.textColor || '#222222ff',
+          textColor: pen.textColor || '#222222ff'
         },
         imageId: '',
         valueMapping: [],
@@ -183,8 +194,17 @@ export default {
         this.selectPens = []
       }
     },
-    penEnter (pens) { // 移入节点
-      // console.log(pens)
+    penEnter (pen) { // 移入节点
+      console.log(pen, 'penEnter')
+      if (!pen.type) {
+        this.chartParams = {
+          ...pen.data.tooltip,
+          unit: this.params.unit,
+          statistic: this.params.statistic
+        }
+        // this.chartParams.type = 'line'
+        // this.chartParams.values = pens.data.values
+      }
     },
     penLeave (pens) { // 移出节点
       // console.log(pens)

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

@@ -1,7 +1,7 @@
 import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
 import bus from '@/libs/bus'
 import axios from 'axios'
-import {getMetricTypeValue} from "@/components/common/js/tools";
+import { getMetricTypeValue } from '@/components/common/js/tools'
 export default {
   methods: {
     topoResize (id) {
@@ -76,6 +76,8 @@ export default {
                   id: rindex + elements[index].name + JSON.stringify(r.metric),
                   name: this.handleLegendAlias(legend, elements[index].legend, r.metric),
                   values: r.values,
+                  metric: r.metric || {},
+                  elements: elements[index],
                   parent: elements[index].name
                 }
                 arr.push(obj)
@@ -130,7 +132,6 @@ export default {
       }
     },
     clacTopoData (data, queryValues) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
-      console.log(this.params)
       return new Promise(resolve => { // 处理加载数据
         if (!data.pens) {
           data.pens = []
@@ -139,9 +140,12 @@ export default {
           if (pen.isNz) {
             if (pen.data.legend) {
               const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)
-              pen.data.value = getMetricTypeValue(findItem.values, pen.data.statistic || 'last')
+              console.log(findItem)
+              if (findItem) {
+                pen.data.value = getMetricTypeValue(findItem.values, this.params.statistic || 'last')
                 this.selectMapping(pen)
               }
+            }
           } else {
             // 处理 le5le的数据
           }
@@ -191,6 +195,6 @@ export default {
           pen.autoPlay = true
         }
       }
-    },
+    }
   }
 }

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

@@ -887,17 +887,48 @@
         <i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
       </div>
       <div v-show="elements.tooltip" class="form-row-content" v-if="pen.type !== 1">
-        <div class="form-row-item">
+        <div class="form-row-item form-row-item-full">
           <div class="form-row-key">
-            color
+            Title
           </div>
           <div class="form-row-value">
-            <nezhaColor
-              :isTopo="true"
-              :value-arr="[{name:'background',value: pen.background}]"
-              @colorChange="colorChange"/>
+            <el-input v-model="pen.data.tooltip.title" />
           </div>
         </div>
+        <div class="form-row-item form-row-item-full">
+          <div class="form-row-key">
+            Type
+          </div>
+          <div class="form-row-value">
+            <el-input v-model="pen.data.tooltip.chartType" />
+          </div>
+        </div>
+        <div class="form-row-item form-row-item-full">
+          <div class="form-row-key">
+            Content
+          </div>
+          <div class="form-row-value">
+            <el-input v-model="pen.data.tooltip.content" />
+          </div>
+        </div>
+        <div class="form-row-item form-row-item-full">
+          <div class="form-row-key">
+            Legends
+          </div>
+          <div class="form-row-value" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
+            <div style="display: inline-block;width: calc(50% - 3px)">
+              <el-select v-model="legend.parent" size="small">
+                <el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
+              </el-select>
+            </div>
+            <div style="display: inline-block;width: calc(50% - 3px)">
+              <el-select v-model="legend.legend" size="small">
+                <el-option v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
+              </el-select>
+            </div>
+          </div>
+          <div @click="addTooltipLegend()"> jia</div>
+        </div>
       </div>
     </div>
   </div>
@@ -1144,6 +1175,13 @@ export default {
         }
       }
       this.$set(this.pen.data.valueMapping, index, this.pen.data.valueMapping[index])
+    },
+    addTooltipLegend () {
+      this.pen.data.tooltip.legends.push({
+        parent: '',
+        legend: '',
+        alias: ''
+      })
     }
 
   }

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

@@ -13,6 +13,14 @@
       :meta2dId="meta2dId"
       @updatePens="updatePens"
     />
+    <meta2dTooltip
+      style="position: absolute"
+      :style="{
+        top: position.top + 'px',
+        left: position.top + 'px',
+      }"
+      :params="chartParams"
+    />
   </div>
 </template>
 
@@ -20,6 +28,7 @@
 import meta2dHeader from '@/components/common/project/meta2d/meta2dHeader'
 import meta2dProps from '@/components/common/project/meta2d/meta2dProps'
 import meta2dMain from '@/components/common/project/meta2d/js/meta2dMain'
+import meta2dTooltip from '@/components/common/project/meta2d/meta2dTooltip'
 import { getTopology, setTopology } from '@/components/common/js/common'
 import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
 import bus from '@/libs/bus'
@@ -39,7 +48,8 @@ export default {
   },
   components: {
     meta2dHeader,
-    meta2dProps
+    meta2dProps,
+    meta2dTooltip
   },
   watch: {
     topoData: {

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

@@ -0,0 +1,91 @@
+<template>
+  <div style="width: 300px;height: 200px">
+    <div v-if="params.titleShow">{{params.title}}</div>
+
+    <div
+      v-if="params.chartType === 'text'"
+    >
+      {{params.content}}
+    </div>
+    <panelChart
+      v-else
+      ref="panelChart"
+      :chart-info="chartInfo"
+      :show-header="false"
+    />
+  </div>
+</template>
+
+<script>
+import panelChart from '@/components/chart/panelChart'
+import defaultLineData from '@/components/chart/defaultLineData'
+import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
+
+export default {
+  name: 'meta2dTooltip',
+  props: {
+    params: {},
+  },
+  mixins: [topoUtil],
+  computed: {
+    queryValues () {
+      return this.$store.getters.getQueryValues
+    }
+  },
+  components: {
+    panelChart
+  },
+  data () {
+    return {
+      chartInfo: { ...defaultLineData, loaded: false }
+    }
+  },
+  mounted () {
+    // this.chartInfo.type = this.params.type || 'line'
+  },
+  watch: {
+    params: {
+      immediate: true,
+      handler (n) {
+        console.log(n, this.querysArray)
+        this.chartInfo.type = this.params.chartType || 'line'
+        const chartData = []
+        const elements = []
+        const obj = {}
+        this.params.legends.forEach(item => {
+          const findItem = this.queryValues.find(query => query.name === item.legend && query.parent === item.parent)
+          if (findItem) {
+            // chartData.push([findItem])
+            if (obj[findItem.elements.name]) {
+              chartData[obj[findItem.elements.name].index].push(findItem)
+            } else {
+              chartData.push([findItem])
+              obj[findItem.elements.name] = {
+                index: chartData.length - 1
+              }
+              elements.push(findItem.elements)
+            }
+          }
+        })
+        console.log(chartData)
+        if (chartData.length && this.$refs.panelChart) {
+          this.chartInfo.elements = elements
+          console.log(elements)
+          this.$refs.panelChart.chartData = chartData
+          this.$refs.panelChart.loading = false
+          this.$nextTick(() => {
+            console.log(this.$refs.panelChart)
+            console.log(this.$refs.panelChart.$refs.chart)
+            console.log(this.$refs.panelChart.$refs.chart.$refs['chart' + this.chartInfo.id])
+            this.$refs.panelChart.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>