feat： topo 重构 （80%）

nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss

@@ -18,3 +18,7 @@
   border: 1px solid;
   border-color: $--border-color-light;
 }
+.meta2d-map {
+  right: unset;
+  left: 0px;
+}

nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss

@@ -38,6 +38,12 @@
   .form-row-item-full{
     width: 100%;
   }
+  .form-row-value {
+    .el-select--small{
+      width: 100%;
+    }
+
+  }
   .form-row-item:nth-of-type(even) {
     /*margin-left: 10px;*/
   }
@@ -59,4 +65,20 @@
   .right-box__container .el-form{
     padding-top: 0;
   }
+  .pen-tools{
+    background: $--background-color-1;
+    margin-bottom: 10px;
+    border-radius: 2px;
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 10px
+  }
+  .promqlInput .el-cascader-menu{
+    width: 200px;
+  }
+  .element-item .el-row {
+    .el-cascader--small,.el-select--small {
+      width: 100%;
+    }
+  }
 }

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

@@ -4,7 +4,7 @@ export default {
       topoData: {},
       querysArray: [],
       meta2dType: '',
-      timeType: 1
+      params: {}
     }
   },
   watch: {
@@ -22,11 +22,19 @@ export default {
           if (res.data && res.data.topo) {
             this.topoData = res.data.topo.topo || {}
             this.querysArray = res.data.topo.elements || []
-            this.timeType = res.data.topo.timeType || 1
+            this.params = {
+              timeType: res.data.topo.timeType || 1,
+              unit: res.data.topo.unit || 1,
+              statistic: res.data.topo.statistic || 'last',
+            }
           } else {
             this.topoData = {}
             this.querysArray = []
-            this.timeType = 1
+            this.params = {
+              timeType: 1,
+              unit: 1,
+              statistic: 'last'
+            }
           }
         })
       }

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

@@ -14,7 +14,9 @@ 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 {
   data () {
     return {
@@ -24,9 +26,13 @@ export default {
       meta2dLoading: true
     }
   },
+  mixins: [topoUtil],
   methods: {
     init () {
-      const meta2dOptions = {}
+      const meta2dOptions = {
+        minScale: 0.25,
+        maxScale: 2
+      }
       const meta2d = new Meta2d(this.meta2dId, meta2dOptions)
       meta2d.register(flowPens())
       meta2d.register(activityDiagram())
@@ -53,7 +59,6 @@ export default {
       }
       // getTopology(this.topoData)).on('translate', this.topTranslate) // 平移·
       meta2d.on('active', this.pensActive) // 选中·
-      // meta2d.on('scale', this.topoScale) // 缩放·
       // meta2d.on('translatePens', () => {}) // 移动画笔结束·
       // meta2d.on('translatingPens', () => {}) // 移动画笔进行中·
       meta2d.on('enter', this.penEnter) // 移入画笔·
@@ -68,7 +73,6 @@ export default {
       const startTime = endTime - 60 * 5 * 1000
       this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
         this.clacTopoData(this.topoData, arr).then((data) => {
-          console.log(data)
           getTopology(this.meta2dId).resize()
           getTopology(this.meta2dId).open(data)
           getTopology(this.meta2dId).centerView()
@@ -76,23 +80,6 @@ export default {
         })
       })
     },
-    clacTopoData (data, queryValues) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
-      return new Promise(resolve => {
-        if (!data.pens) {
-          data.pens = []
-        }
-        data.pens.forEach(pen => {
-          if (pen.isNz) {
-            if (pen.data.legend) {
-
-            }
-          } else {
-            // 处理加载数据
-          }
-        })
-        resolve(data)
-      })
-    },
     nodeInit (pen) { // 初始化节点参数
       if (pen.data && pen.data.params) {
         return
@@ -102,12 +89,13 @@ export default {
           background: pen.background || '#22222200',
           color: pen.color || '#222222ff',
           textColor: pen.textColor || '#222222ff',
-          image: ''
         },
         imageId: '',
         valueMapping: [],
         legend: '',
-        statistic: '',
+        statistic: 'last',
+        parent: '',
+        value: '',
         enable: {
           valueMapping: true,
           tooltip: true
@@ -143,6 +131,7 @@ export default {
       pen.visible = pen.visible || true
       pen.isNz = true
       pen.locked = pen.locked || 0
+      pen.isBottom = true
     },
     lineInit (pen) { // 初始化连线参数
       if (pen.data && pen.data.params) {
@@ -156,7 +145,9 @@ export default {
         },
         valueMapping: [],
         legend: '',
-        statistic: '',
+        statistic: 'last',
+        parent: '',
+        value: '',
         enable: {
           valueMapping: true,
           tooltip: true
@@ -178,16 +169,15 @@ export default {
       pen.isNz = pen.isNz || true
       pen.visible = pen.visible || true
       pen.locked = pen.locked || 0
+      pen.isBottom = true
     },
     pensActive (pens, e) { // 选中节点
       this.selectPens = pens
       setTimeout(() => {
-        this.$refs.meta2dProps.isUpdate = true
+        this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true)
       })
-      console.log(pens, 'active')
     },
     topoClick (params, e) { // 点击节点
-      console.log('click')
       if (!params.pen && this.$refs.meta2dProps) {
         this.$refs.meta2dProps.activeName = 'canvas'
         this.selectPens = []

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

@@ -1,6 +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";
 export default {
   methods: {
     topoResize (id) {
@@ -8,10 +9,9 @@ export default {
     },
     initEdit (id) {
       getTopology(id).lock(0)
-      getTopology(id).stopAnimate(getTopology(id).data.pens)
+      getTopology(id).stopAnimate()
-      console.log(getTopology(id).data.pens)
+      if (getTopology(id).data().pens) {
-      if (getTopology(id).data.pens) {
+        getTopology(id).data().pens.forEach(item => {
-        getTopology(id).data.pens.forEach(item => {
           this.calcNode(item)
         })
       }
@@ -19,7 +19,7 @@ export default {
       getTopology(id).centerView()
     },
     calcNode (node) { // 处理节点数据
-      node = { ...node, ...node.data.params }
+      node = { id: node.id, ...node.data.params }
       getTopology(this.meta2dId)._setValue(node)
     },
     getQueryValues (elements, startTime, endTime) {
@@ -29,7 +29,6 @@ export default {
         endTime = parseInt(endTime / 1000)
         startTime = parseInt(startTime / 1000)
         const urlPre = '/prom'
-        console.log(endTime, startTime)
         elements = elements.filter(item => item.state && item.expression)
         const requests = elements.map((element) => {
           // query_range
@@ -42,7 +41,6 @@ export default {
           return this.$get(query)
         })
         axios.all(requests).then((res) => {
-          console.log(res)
           const arr = []
           res.forEach((request, index) => {
             arr.push({
@@ -77,7 +75,8 @@ export default {
                   type: 'item',
                   id: rindex + elements[index].name + JSON.stringify(r.metric),
                   name: this.handleLegendAlias(legend, elements[index].legend, r.metric),
-                  values: r.values
+                  values: r.values,
+                  parent: elements[index].name
                 }
                 arr.push(obj)
               })
@@ -129,6 +128,69 @@ export default {
         }
         return aliasExpression
       }
+    },
+    clacTopoData (data, queryValues) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
+      console.log(this.params)
+      return new Promise(resolve => { // 处理加载数据
+        if (!data.pens) {
+          data.pens = []
         }
+        data.pens.forEach(pen => {
+          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')
+              this.selectMapping(pen)
+            }
+          } else {
+            // 处理 le5le的数据
+          }
+        })
+        resolve(data)
+      })
+    },
+    selectMapping (pen) {
+      let mapping = ''
+      const show = pen.data.enable.valueMapping
+      const valueMapping = pen.data.valueMapping
+      const value = pen.data.value
+      if (show && valueMapping) {
+        valueMapping.forEach(item => {
+          if (item.type === 'value') {
+            if (value == item.value) {
+              mapping = item
+            }
+          }
+          if (item.type === 'range') {
+            if (value >= item.from && value < item.to) {
+              mapping = item
+            }
+          }
+          if (item.type === 'regx') {
+            const reg = new RegExp(item.regx)
+            if (reg.test(value)) {
+              mapping = item
+            }
+          }
+        })
+        if (mapping) {
+          this.drawPen(pen, mapping)
+        }
+      }
+    },
+    drawPen (pen, mapping) {
+      if (!pen.type) {
+        pen.background = mapping.color.bac
+        pen.color = mapping.color.border
+        pen.textColor = mapping.color.text
+      } else {
+        pen.animateColor = mapping.color.bac
+        pen.borderColor = mapping.color.border
+        pen.color = mapping.color.text
+        if (pen.lineAnimateType) {
+          pen.autoPlay = true
+        }
+      }
+    },
   }
 }

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

@@ -48,7 +48,7 @@
               handle: '.drag-sort'
             }">
             <div v-for="item in elements" :key="item.id" @click.stop="penActive(item)">
-              <div class="pen-tools" style="background: #999;margin-bottom: 10px;border-radius: 2px;display: flex;justify-content: space-between;padding: 3px 10px">
+              <div class="pen-tools" style="">
                 <span>
                   <i v-if="item.type !== 1" class="nz-icon nz-icon-zhengfangxing" />
                   <i v-else class="nz-icon nz-icon-compare" />
@@ -117,10 +117,14 @@ export default {
       this.canvasProps[key] = !this.canvasProps[key]
     },
     penActive (item) {
+      // bus.$emit('changeSelectPens', [])
       this.$emit('changeActiveName')
+      this.$nextTick(() => {
         getTopology(this.meta2dId).active([item])
-      getTopology(this.meta2dId).setValue(item)
+        getTopology(this.meta2dId).render()
+        // getTopology(this.meta2dId).setValue(item)
         bus.$emit('changeSelectPens', [item])
+      })
     },
     penChange (item, key) {
       const obj = {
@@ -129,27 +133,29 @@ export default {
       if (key === 'visible') {
         obj.visible = !item.visible
         if (!item.visible) {
-          if (item.id === getTopology(this.meta2dId).store.active[0].id) {
+          if (getTopology(this.meta2dId).store.active.length && item.id === getTopology(this.meta2dId).store.active[0].id) {
             bus.$emit('changeSelectPens', [])
           }
         } else {
           this.$emit('changeActiveName')
           getTopology(this.meta2dId).active([item])
-          getTopology(this.meta2dId).setValue(item)
+          getTopology(this.meta2dId).render()
+          // getTopology(this.meta2dId).setValue(item)
           bus.$emit('changeSelectPens', [item])
         }
       }
       if (key === 'locked') {
         if (!item.locked) {
           obj.locked = 10
-          if (item.id === getTopology(this.meta2dId).store.active[0].id) {
+          if (getTopology(this.meta2dId).store.active.length && item.id === getTopology(this.meta2dId).store.active[0].id) {
             bus.$emit('changeSelectPens', [])
           }
         } else {
           obj.locked = 0
           this.$emit('changeActiveName')
           getTopology(this.meta2dId).active([item])
-          getTopology(this.meta2dId).setValue(item)
+          getTopology(this.meta2dId).render()
+          // getTopology(this.meta2dId).setValue(item)
           bus.$emit('changeSelectPens', [item])
         }
       }
@@ -163,7 +169,7 @@ export default {
       getTopology(this.meta2dId).addPen(obj, true)
     },
     delPen (item) {
-      if (item.id === getTopology(this.meta2dId).store.active[0].id) {
+      if (getTopology(this.meta2dId).store.active.length && item.id === getTopology(this.meta2dId).store.active[0].id) {
         bus.$emit('changeSelectPens', [])
       }
       getTopology(this.meta2dId).delete([item])
@@ -177,7 +183,6 @@ export default {
       this.bkImage = image.image
       this.bkImageId = image.id
       getTopology(this.meta2dId).setBackgroundImage(image.image)
-      console.log(getTopology(this.meta2dId).data())
     }
   }
 }

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

@@ -1,13 +1,42 @@
 <template>
   <div class="pens-data right-box__container">
     <div class="form-row-box chart-config">
-      <div class="form-row-item">
+      <div class="form-row-item form-row-item-full">
         <div class="form-row-key">
           Time Range
         </div>
         <div class="form-row-value">
-          <el-select v-model="dataTimeType"/>
+          <el-select v-model="dataTimeType" size="small" style="width: 100%">
+            <el-option v-for="item in timeData" :key="item.id" :value="item.id" :label="$t(item.text)"></el-option>
+          </el-select>
         </div>
+        <el-row style="margin-top: 18px;display: flex">
+          <div class="form-row-item">
+            <div class="form-row-key">
+              Statistics
+            </div>
+            <div class="form-row-value">
+              <el-select v-model="dataStatistic" size="small">
+                <el-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='$t(item.label)'></el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="form-row-item">
+            <div class="form-row-key">
+              Unit
+            </div>
+            <div class="form-row-value">
+              <el-cascader :id="'columns-unit'" v-model="dataUnit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                           placeholder=""
+                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           size="small"
+                           style="flex: 1"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </div>
+          </div>
+        </el-row>
       </div>
       <div class="form-row-item form-row-item-full">
         <div
@@ -123,11 +152,12 @@
 <script>
 import promqlInput from '@/components/page/dashboard/explore/promqlInput'
 import promqlInputMixin from '@/components/common/mixin/promqlInput.js'
-import {isStat} from "@/components/chart/chart/tools";
+import { isStat } from '@/components/chart/chart/tools'
-import {ColorReverse, randomcolor} from "@/components/common/js/radomcolor/randomcolor";
+import { ColorReverse, randomcolor } from '@/components/common/js/radomcolor/randomcolor'
-import {getUUID, resetZIndex} from "@/components/common/js/common";
+import { getUUID, resetZIndex } from '@/components/common/js/common'
-import lodash from "lodash";
+import lodash from 'lodash'
 import draggable from 'vuedraggable'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 const rz = {
   methods: {
     rz (e) {
@@ -140,7 +170,7 @@ export default {
   mixins: [promqlInputMixin, rz],
   props: {
     querysArray: {},
-    timeType: {}
+    params: {},
   },
   components: {
     draggable,
@@ -160,7 +190,79 @@ export default {
         'O', 'P', 'Q', 'R', 'S', 'T',
         'U', 'V', 'W', 'X', 'Y', 'Z'
       ],
-      dataTimeType: 1
+      dataTimeType: 1,
+      dataStatistic: 'last',
+      dataUnit: 1,
+      statisticsList: this.$CONSTANTS.statisticsList,
+      unitOptions: chartDataFormat.unitOptions(),
+      timeData: [
+        {
+          id: 1,
+          text: this.$t('dashboard.panel.lastFiveMin'),
+          type: 'minute',
+          value: 5
+        },
+        {
+          id: 2,
+          text: this.$t('dashboard.panel.lastFifteenMin'),
+          type: 'minute',
+          value: 15
+        },
+        {
+          id: 3,
+          text: this.$t('dashboard.panel.lastThirtyMin'),
+          type: 'minute',
+          value: 30
+        },
+        {
+          id: 4,
+          text: this.$t('dashboard.panel.lastOneHour'),
+          type: 'hour',
+          value: 1
+        },
+        {
+          id: 5,
+          text: this.$t('dashboard.panel.lastThreeHour'),
+          type: 'hour',
+          value: 3
+        },
+        {
+          id: 6,
+          text: this.$t('dashboard.panel.lastSixHour'),
+          type: 'hour',
+          value: 6
+        },
+        {
+          id: 7,
+          text: this.$t('dashboard.panel.lastTwelveHour'),
+          type: 'hour',
+          value: 12
+        },
+        {
+          id: 8,
+          text: this.$t('dashboard.panel.lastTwentyFourHour'),
+          type: 'hour',
+          value: 24
+        },
+        {
+          id: 9,
+          text: this.$t('dashboard.panel.lastTwoDay'),
+          type: 'date',
+          value: 2
+        },
+        {
+          id: 10,
+          text: this.$t('dashboard.panel.lastSevenDay'),
+          type: 'date',
+          value: 7
+        },
+        {
+          id: 11,
+          text: this.$t('dashboard.panel.lastThirtyDay'),
+          type: 'date',
+          value: 30
+        }
+      ],
     }
   },
   mounted () {
@@ -176,6 +278,8 @@ export default {
             expression: expr,
             type: 'expert',
             legend: this.expressionsShow[i].legend,
+            unit: this.expressionsShow[i].unit || 1,
+            statistic: this.expressionsShow[i].statistic || 'last',
             name: this.expressionName[i],
             state: this.expressionsShow[i].state,
             orderNum: i
@@ -250,6 +354,8 @@ export default {
           oldName: expressionName,
           error: '',
           legend: '',
+          unit: 1,
+          statistic: 'last',
           elementId: '',
           state: 1
         })
@@ -264,6 +370,8 @@ export default {
           error: '',
           elementId: item.id,
           legend: item.legend,
+          unit: item.unit || 1,
+          statistic: item.statistic || 'last',
           state: item.state
         })
       }
@@ -363,7 +471,9 @@ export default {
       this.expressionsShow = []
       this.expressionName = []
       this.elements = this.$loadsh.cloneDeep(this.querysArray)
-      this.dataTimeType = this.timeType
+      this.dataTimeType = this.params.timeType || 1
+      this.dataStatistic = this.params.statistic || 'last'
+      this.dataUnit = this.params.unit || 1
       if (!this.elements.length) {
         this.addExpression()
       } else {

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

@@ -677,27 +677,24 @@
             </span>
       </div>
       <transition name="el-zoom-in-top">
-        <div class="el-form" v-show="elements.valueMapping">
+        <div class="el-form" v-show="elements.valueMapping && pen.data.enable.valueMapping">
           <div  class="form-row-content">
-            <div class="form-row-item">
+            <div class="form-row-item form-row-item-full">
               <div class="form-row-key">
                 Legend
               </div>
               <div class="form-row-value">
+                <div style="display: inline-block;width: calc(50% - 3px)">
+                  <el-select v-model="pen.data.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="pen.data.legend" size="small">
-                  <el-option v-for="item in queryValues" :key="item.id" :value="item.id" :label='item.name'></el-option>
+                    <el-option v-for="item in queryValues.filter(query => (query.parent === pen.data.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                   </el-select>
                 </div>
               </div>
-            <div class="form-row-item">
-              <div class="form-row-key">
-                Statistics
-              </div>
-              <div class="form-row-value">
-                <el-select v-model="pen.data.statistic" size="small">
-                  <el-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='item.label'></el-option>
-                </el-select>
-              </div>
             </div>
             <div class="form-row-item form-row-item-full chart-config">
               <el-row class="el-form">

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

@@ -2,18 +2,12 @@
   <div class="topo-header top-tools">
     <div v-if="!isChart && !editFlag"> {{project && project.name}} </div>
     <div class="tools-left" v-if="editFlag">
-      <div class="tools-left-drag">
+      <topology-top-tool
-        <div
+        v-if="editFlag&&toolShow"
-          draggable="true"
+        :meta2dId="meta2dId"
-          @dragstart.stop="onDragstart($event)"
+        ref="topTool"
-          @click="onTouchstart($event)"
        >
-          <i class="nz-icon nz-icon-zhengfangxing" />
+      </topology-top-tool>
-        </div>
-      </div>
-      <div class="tools-left-draw" @click="setDrawPen()">
-          <i  class="nz-icon nz-icon-compare" />
-      </div>
     </div>
     <div v-if="!editFlag" class="top-tool-right">
       <pick-time
@@ -60,10 +54,15 @@
 import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
 import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
 import { deepClone } from '@meta2d/core'
-import bus from "@/libs/bus";
+import bus from '@/libs/bus'
+import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
+
 export default {
   name: 'meta2dHeader',
   mixins: [topoUtil],
+  components: {
+    topologyTopTool
+  },
   props: {
     meta2dId: {},
     isChart: {
@@ -71,13 +70,17 @@ export default {
       default: false
     },
     project: {},
-    editFlag: {}
+    editFlag: {
+      type: Boolean,
+      default: false
+    }
   },
   data () {
     return {
       topoScreenState: '',
       isPreview: false,
       searchTime: bus.getTimezontDateRange(),
+      toolShow: true
     }
   },
   computed: {
@@ -98,31 +101,10 @@ export default {
         this.$emit('edit')
       })
     },
-    onDragstart (e) {
-      const pen = {
-        name: 'rectangle',
-        text: '矩形',
-        width: 100,
-        height: 100
-      }
-      e.dataTransfer.setData('Text', JSON.stringify(pen))
-    },
-
-    // 支持鼠标单击添加图形
-    onTouchstart  (e) {
-      const pen = {
-        name: 'rectangle',
-        text: '矩形',
-        width: 100,
-        height: 100
-      }
-      getTopology(this.meta2dId).canvas.addCaches = deepClone([pen])
-    },
-    // 开启钢笔状态
-    setDrawPen () {
-      getTopology(this.meta2dId).drawLine('line')
-    },
     saveMeta2d () {
+      if (this.$refs.topTool.option.map) {
+        getTopology(this.meta2dId).hideMap()
+      }
       if (this.isChart) {
         this.saveChart()
       } else {
@@ -134,11 +116,15 @@ export default {
     },
     saveProject () {
       const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
-      console.log(elements)
+      const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
+      const unit = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataUnit
+      const statistic = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataStatistic
       const params = {
         topo: getTopology(this.meta2dId).data(),
         elements: elements,
-        timeType: ''
+        timeType: timeType || 1,
+        unit: unit || 1,
+        statistic: statistic || 'last',
       }
 
       this.$put('monitor/project/topo', { topo: JSON.stringify(params), projectId: this.project.id }).then(res => {
@@ -168,12 +154,36 @@ export default {
     },
     changeScreen () {
       this.$store.commit('setShowTopoScreen', !this.topoScreen)
+      this.$nextTick(() => {
+        getTopology(this.meta2dId).resize()
+        getTopology(this.meta2dId).centerView()
+      })
     },
     previewTopology () {
-
+      this.isPreview = true
+      const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
+      const endTime = new Date().getTime()
+      const startTime = endTime - 60 * 5 * 1000
+      this.getQueryValues(elements, startTime, endTime).then(arr => {
+        this.clacTopoData(getTopology(this.meta2dId).data(), arr).then((data) => {
+          getTopology(this.meta2dId).resize()
+          getTopology(this.meta2dId).open(data)
+          getTopology(this.meta2dId).centerView()
+          getTopology(this.meta2dId).lock(1)
+        })
+      })
     },
     previewExit () {
-
+      this.isPreview = false
+      getTopology(this.meta2dId).lock(0)
+      getTopology(this.meta2dId).stopAnimate()
+      if (getTopology(this.meta2dId).data().pens) {
+        getTopology(this.meta2dId).data().pens.forEach(item => {
+          this.calcNode(item)
+        })
+      }
+      getTopology(this.meta2dId).render()
+      getTopology(this.meta2dId).centerView()
     },
     cancelTopology () {
       this.$emit('exitEdit', true)

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

@@ -9,7 +9,7 @@
       ref="meta2dProps"
       :selectPens.sync="selectPens"
       :querysArray="querysArray"
-      :timeType="timeType"
+      :params="params"
       :meta2dId="meta2dId"
       @updatePens="updatePens"
     />
@@ -34,7 +34,7 @@ export default {
       default: false
     },
     querysArray: {},
-    timeType: {},
+    params: {},
     project: {}
   },
   components: {

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

@@ -8,7 +8,7 @@
         <meta2dCanvas :canvasProps="canvasProps" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
       </el-tab-pane>
       <el-tab-pane label="data" name="data">
-        <meta2dData :querysArray.sync="querysArray" :timeType.sync="timeType" ref="meta2dData"/>
+        <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -31,7 +31,7 @@ export default {
   props: {
     selectPens: {},
     querysArray: {},
-    timeType: {},
+    params: {},
     meta2dId: {}
   },
   components: {

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

@@ -1,17 +1,41 @@
 <template>
   <div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
-    <div @click="selectBoxShow = !selectBoxShow">
+    <div @click="selectBoxShow = !selectBoxShow" style="position: relative">
-      <img :src="selectImage" v-if="selectImage" class="image-box">
+      <div v-if="selectImage" class="image-box">
+        <img :src="selectImage"  class="image-box">
+      </div>
       <div v-else class="image-box image-box-null" />
+      <i class="nz-icon nz-icon-close" style="position: absolute;top: 0;right: 0;font-size: 10px" @click.stop="selectImageChange({image: '', id: ''})"/>
     </div>
     <div class="image-select-box" v-if="selectBoxShow">
-      <div class="image-box-item" @click="selectImageChange({image: '', id: ''})">
+<!--      <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">-->
-        <img  :src="imageNull" class="imag-src"/>
+<!--        <img  :src="item.image" class="imag-src"/>-->
-        <div class="img-text text-ellipsis">kong</div>
+<!--        <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
+<!--      </div>-->
+      <div style="height: 450px"  v-my-loading="imgageLoading">
+        <el-card shadow="hover" style="height:420px;width:100%;overflow-y: auto"
+                 class="project-topology-add-node">
+          <el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
+            <el-collapse-item :title="item.group" :name="item.group">
+              <template slot="title">
+                <div style="display: flex;width: 100%;">
+                   <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
                 </div>
-      <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">
+              </template>
-        <img  :src="item.image" class="imag-src"/>
+              <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item">
+                <img :src="btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
                 <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>
+                <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click.stop="tooltipDelete(btn)"></i>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-card>
+        <div class="upload-pic-box" @click="uploadPicChange">
+          <i class="el-icon-plus"></i>
+          <span>
+                     {{ $t('overall.uploadCustomPicture') }}
+                  </span>
+        </div>
       </div>
     </div>
   </div>
@@ -19,6 +43,7 @@
 
 <script>
 import { dealImg, topologyImg } from '@/components/common/js/common'
+import { imageTemp } from '@/components/common/project/L5/services/canvas'
 
 export default {
   name: 'meta2dSelectImage',
@@ -31,7 +56,8 @@ export default {
       imgageLoading: false,
       iconArray: [],
       selectBoxShow: false,
-      imageNull: ''
+      imageNull: '',
+      activeNames: []
     }
   },
   mounted () {
@@ -54,7 +80,31 @@ export default {
           this.iconArray = [...res.data.list]
           this.iconArray.forEach((item, index) => {
             item.image = res2[index].data
+            const group = this.tools.find(tool => tool.group === item.unit)
+            if (group) {
+              group.children.push({
+                text: item.imageName,
+                imageName: item.imageName,
+                image: res2[index].data,
+                imageId: item.id,
+                id: item.id,
+                unit: item.unit,
               })
+            } else {
+              this.tools.push({
+                group: item.unit,
+                children: [{
+                  text: item.imageName,
+                  imageName: item.imageName,
+                  image: res2[index].data,
+                  imageId: item.id,
+                  id: item.id,
+                  unit: item.unit,
+                }]
+              })
+            }
+          })
+
           this.imgInit = true
           this.imgageLoading = false
           imgArr = null
@@ -67,6 +117,48 @@ export default {
     },
     selectImageChange (item) {
       this.$emit('updateImage', item)
+    },
+    tooltipDelete (item) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.delImg(item)
+      })
+    },
+    tooltipDeleteTitle (item) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.delCollpseTitle(item)
+      })
+    },
+    delImg (item) {
+      this.$delete('monitor/project/topo/icon?ids=' + item.imageId).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          const findItem = this.tools.find(group => group.group === item.unit)
+          findItem.children = findItem.children.filter(child => child.imageId !== item.imageId)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    delCollpseTitle (item) {
+      this.$delete('monitor/project/topo/iconUnit?unit=' + item.group).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.tools = this.tools.filter(group => group.group !== item.unit)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    uploadPicChange () {
+
     }
   }
 }
@@ -82,38 +174,46 @@ export default {
   .image-box-null {
     border: 1px solid #999999;
     box-sizing: border-box;
+    border-radius: 2px;
   }
   .image-select-box {
     text-align: center;
-    width: 254px;
+    width: 225px;
-    max-height: 300px;
-    overflow-y: auto;
     z-index: 1;
-    padding: 10px 0px 0px 10px;
+    padding: 5px 0px 0px 0px;
     position: absolute;
     top: 26px;
     background: #ffffff;
     border: 1px solid #999999;
     border-radius: 4px;
     left: 0;
+    /deep/ .el-card__body {
+      padding: 0;
+    }
     .image-box-item {
-      width: 50px;
+      width: 30px;
-      height: 70px;
+      height: 50px;
       margin: 0 10px 10px 0;
       flex-direction: column;
       align-items: center;
       display: inline-block;
-      .imag-src{
+      position: relative;
-        width: 50px;
+      .image-src{
-        height: 50px;
+        width: 30px;
+        height: 30px;
       }
-      .img-text {
+      .image-text {
         width: 100%;
         height: 20px;
         line-height: 20px;
         font-size: 12px;
         text-align: center;
       }
+      .delIcon{
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
     }
   }
 }

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

@@ -0,0 +1,215 @@
+<template>
+  <div class="tool-top" id="tool-top">
+    <div id="tools-left-drag" class="top-tool-item" :title="'add node'">
+      <div
+        draggable="true"
+        @dragstart.stop="onDragstart($event)"
+        @click="onTouchstart($event)"
+      >
+        <i class="nz-icon nz-icon-zhengfangxing" />
+      </div>
+    </div>
+    <div id="tools-left-draw" class="top-tool-item" @click="setDrawPen()" :title="'add line'">
+      <i  class="nz-icon nz-icon-compare" />
+    </div>
+    <div id="undo" :class="['top-tool-item',]"  @click="undo"> <i class="nz-icon nz-icon-revoke" :title="$t('overall.revocation')"/> </div>
+    <div id="redo" :class="['top-tool-item',]" @click="redo"> <i class="nz-icon nz-icon-revoke1"  :title="$t('overall.redo')"/> </div>
+    <!--<div> 保存为图片 </div>-->
+    <div class="top-tool-item" @click="del" :title="$t('overall.delete')">  <i class="nz-icon nz-icon-delete"/> </div>
+    <div class="top-tool-item top-tool-item-scale">
+      <span class="scale-number">
+          <span class="scale-number-minus scale-number-symbol" @click="changeScale(-25)">-</span>
+          <el-popover
+            placement="bottom"
+            width="111"
+            trigger="hover"
+            class="scale-number-box"
+            popper-class="scale-number-popover no-style-class"
+           >
+            <div class="scale-num-pop" style=" width: 91px;min-width: 91px">
+              <div>缩放级别</div>
+              <div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
+              <div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
+              <div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
+            </div>
+            <span class="scale-number-content" slot="reference">{{scaleNum}}%</span>
+          </el-popover>
+          <span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
+        </span>
+    </div>
+    <div  class="top-tool-item top-tool-item-switch">
+      <label>{{$t('project.topology.grids')}}</label>
+      <el-switch
+        v-model="option.grid"
+        :active-value="true"
+        :inactive-value="false"
+        @change="changeOption('grid')">
+      </el-switch>
+    </div>
+    <div class="top-tool-item top-tool-item-switch">
+      <label>{{$t('project.topology.rule')}}</label>
+      <el-switch
+        v-model="option.rule"
+        :active-value="true"
+        :inactive-value="false"
+        @change="changeOption('rule')">
+      </el-switch>
+    </div>
+    <div  class="top-tool-item top-tool-item-switch">
+      <label>{{$t('Thumbnail')}}</label>
+      <el-switch
+        v-model="option.map"
+        :active-value="true"
+        :inactive-value="false"
+        @change="showMap()">
+      </el-switch>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTopology } from '../../js/common'
+import bus from '@/libs/bus'
+import { deepClone } from '@meta2d/core'
+
+export default {
+  name: 'topologyTopTool',
+  data () {
+    return {
+      option: {
+        lineName: 'curve',
+        lineWidth: 1,
+        fromArrow: '',
+        toArrow: 'triangleSolid',
+        scale: 100,
+        grid: false,
+        rule: false,
+        map: false
+      },
+      scaleNum: 100,
+      penLineType: [
+        { d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
+        { d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' },
+        { d: 'M5 20 C0,8 50,0 85,0', 'stroke-dasharray': '', name: 'mind' }
+      ],
+      penLineFromTOArrow: [
+        { d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
+        { d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#000000', stroke: '', 'stroke-width': '', name: 'triangleSolid' },
+        { d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', name: 'triangle' },
+        { d: 'M5 14 l85 0', fill: '#000000', stroke: '', 'stroke-width': '', cx: '10', cy: '14', r: '5', name: 'circleSolid' },
+        { d: 'M5 14 l85 0', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', cx: '10', cy: '14', r: '5', name: 'circle' }
+      ],
+      redoFlag: false
+    }
+  },
+  props: {
+    meta2dId: {
+      require: true
+    }
+  },
+  mounted () {
+    const dataOption = getTopology(this.meta2dId).store.data
+    Object.keys(this.option).forEach(key => {
+      if (key === 'scale') {
+        this.scaleNum = (dataOption[key] ? parseInt(dataOption[key] * 100) : this.scaleNum)
+      } else {
+        this.option[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.option[key])
+      }
+    })
+    getTopology(this.meta2dId).on('scale', this.topoScale) // 缩放·
+  },
+  methods: {
+    onDragstart (e) {
+      const pen = {
+        name: 'rectangle',
+        text: '矩形',
+        width: 100,
+        height: 100
+      }
+      e.dataTransfer.setData('Text', JSON.stringify(pen))
+    },
+
+    // 支持鼠标单击添加图形
+    onTouchstart  (e) {
+      const pen = {
+        name: 'rectangle',
+        text: '矩形',
+        width: 100,
+        height: 100
+      }
+      getTopology(this.meta2dId).canvas.addCaches = deepClone([pen])
+    },
+    // 开启钢笔状态
+    setDrawPen () {
+      getTopology(this.meta2dId).drawLine('line')
+    },
+    changeOption (key) {
+      // getTopology(this.meta2dId).data[key] = this.option[key]
+      const obj = {}
+      obj[key] = this.option[key]
+      if (key === 'grid') {
+        getTopology(this.meta2dId).setGrid(obj)
+      } else {
+        getTopology(this.meta2dId).setRule(obj)
+      }
+      getTopology(this.meta2dId).render()
+    },
+    showMap () { // 显示鹰眼
+      if (this.option.map) {
+        getTopology(this.meta2dId).showMap()
+      } else {
+        getTopology(this.meta2dId).hideMap()
+      }
+    },
+    undo () { // 撤销
+      getTopology(this.meta2dId).undo()
+      // getTopology(this.meta2dId).inactive()
+      bus.$emit('changeSelectPens', [])
+    },
+    redo () { // 重做
+      getTopology(this.meta2dId).redo()
+      // getTopology(this.meta2dId).inactive()
+      bus.$emit('changeSelectPens', [])
+    },
+    centerView () { // 居中显示
+      getTopology(this.meta2dId).centerView()
+    },
+    fitView () { // 自适应画布大小
+      getTopology(this.meta2dId).fitView()
+    },
+    changeScale (num) {
+      this.scaleNum += num
+      if (this.scaleNum < 25) {
+        this.scaleNum = 25
+      }
+      if (this.scaleNum > 400) {
+        this.scaleNum = 400
+      }
+      this.scale(this.scaleNum)
+    },
+    scale (val) {
+      this.scaleNum = val
+      getTopology(this.meta2dId).scale(val / 100)
+    },
+    del () {
+      bus.$emit('changeSelectPens', [])
+      getTopology(this.meta2dId).delete(getTopology(this.meta2dId).store.active)
+    },
+    clear () {
+      const data = { ...getTopology(this.meta2dId).data }
+      data.pens = []
+      getTopology(this.meta2dId).open({})
+    },
+    toolShowChange (attr) {
+      this.$emit('toolShowChange', attr)
+    },
+    changeOpt (key, val) {
+
+    },
+    topoScale (num) {
+      this.scaleNum = parseInt(num * 100)
+    }
+  }
+}
+</script>

nezha-fronted/src/components/common/project/topologyMixin.js

@@ -170,17 +170,9 @@ export default {
       this.getNodesArr()
     },
     topoScale (num) {
-      this.moduleId = ''
-      getTopology(this.topologyIndex).centerView()
-      this.showNodeTools('')
-      this.popDataShowUpdate('', false)
-      if (!this.editTopologyFlag) {
-        getTopology(this.topologyIndex)
-      }
       if (this.$refs.topTool) {
         this.$refs.topTool.scaleNum = parseInt(num * 100)
       }
-      this.getNodesArr()
     },
     topoClick (pointAndPen) {
       this.showNodeTools('')

nezha-fronted/src/components/page/monitor/project/project.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="project">
 <!--    <topologyL5 v-if="reloadFacade" ref="facade" :obj="currentProject" :topologyIndexF="topologyIndexF" targetTab.sync="panel" @changeTopologyIndexF="changeTopologyIndexF"/>-->
-    <meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :project="currentProject" :timeType="timeType" @reload="reload"/>
+    <meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :project="currentProject" :params="params" @reload="reload"/>
     <transition name="el-zoom-in-bottom">
       <bottom-box
         v-if="bottomBox.showSubList"