feat： topo 重构（80%）

2023-02-21 19:05:49 +08:00
parent e468be83e1
commit 22b6043478
15 changed files with 662 additions and 147 deletions
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
+++ b/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;
+}
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
+++ b/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%;
+    }
+  }
 }
--- a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
+++ b/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'
+            }
          }
        })
      }
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
+++ b/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 = []
--- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
+++ b/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)
-      console.log(getTopology(id).data.pens)
-      if (getTopology(id).data.pens) {
-        getTopology(id).data.pens.forEach(item => {
+      getTopology(id).stopAnimate()
+      if (getTopology(id).data().pens) {
+        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
+        }
+      }
+    },
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
+++ b/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')
-      getTopology(this.meta2dId).active([item])
-      getTopology(this.meta2dId).setValue(item)
-      bus.$emit('changeSelectPens', [item])
+      this.$nextTick(() => {
+        getTopology(this.meta2dId).active([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())
    }
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
+++ b/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 {ColorReverse, randomcolor} from "@/components/common/js/radomcolor/randomcolor";
-import {getUUID, resetZIndex} from "@/components/common/js/common";
-import lodash from "lodash";
+import { isStat } from '@/components/chart/chart/tools'
+import { ColorReverse, randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import { getUUID, resetZIndex } from '@/components/common/js/common'
+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 {
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -677,26 +677,23 @@
            </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">
-                <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-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 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.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>
            <div class="form-row-item form-row-item-full chart-config">
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
+++ b/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">
-        <div
-          draggable="true"
-          @dragstart.stop="onDragstart($event)"
-          @click="onTouchstart($event)"
-        >
-          <i class="nz-icon nz-icon-zhengfangxing" />
-        </div>
-      </div>
-      <div class="tools-left-draw" @click="setDrawPen()">
-          <i  class="nz-icon nz-icon-compare" />
-      </div>
+      <topology-top-tool
+        v-if="editFlag&&toolShow"
+        :meta2dId="meta2dId"
+        ref="topTool"
+       >
+      </topology-top-tool>
    </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)
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
+++ b/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">
-      <img :src="selectImage" v-if="selectImage" class="image-box">
+    <div @click="selectBoxShow = !selectBoxShow" style="position: relative">
+      <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: ''})">
-        <img  :src="imageNull" class="imag-src"/>
-        <div class="img-text text-ellipsis">kong</div>
-      </div>
-      <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">
-        <img  :src="item.image" class="imag-src"/>
-        <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>
+<!--      <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">-->
+<!--        <img  :src="item.image" class="imag-src"/>-->
+<!--        <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>
+              </template>
+              <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;
-    max-height: 300px;
-    overflow-y: auto;
+    width: 225px;
    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;
-      height: 70px;
+      width: 30px;
+      height: 50px;
      margin: 0 10px 10px 0;
      flex-direction: column;
      align-items: center;
      display: inline-block;
-      .imag-src{
-        width: 50px;
-        height: 50px;
+      position: relative;
+      .image-src{
+        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;
+      }
    }
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/project/topologyMixin.js
+++ b/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('')
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/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"