feat：暂存topo改版

2023-02-20 14:25:09 +08:00
parent 766aadfa66
commit 1d8fcb18ff
15 changed files with 853 additions and 127 deletions
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
@@ -13,7 +13,7 @@
  }
  .form-row-item{
    vertical-align: top;
-    width: calc(50% - 15px);
+    width: calc(50% - 3px);
    display: inline-block;
    box-sizing: border-box;
    padding: 0 5px;
@@ -48,4 +48,14 @@
  .form-row-content{
    margin-bottom: 5px;
  }
+  .right-box__container.pens-data{
+    overflow: unset;
+    overflow-y: unset;
+  }
+  .right-box__container .chart-config .thresholds-item .mapping-display-input input{
+    padding-left: 15px;
+  }
+  .right-box__container .el-form{
+    padding-top: 0;
+  }
 }
--- a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
+++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
@@ -2,32 +2,31 @@ export default {
  data () {
    return {
      topoData: {},
-      querysArray: {},
+      querysArray: [],
      meta2dType: '',
-      timeType: 1,
+      timeType: 1
    }
  },
-  mounted () {
-    if (this.meta2dType === 'project') {
-      setTimeout(() => {
-        const res = {
-          topo: {},
-          elements: [],
-          timeType: 4
+  watch: {
+    currentProject: {
+      handler (n) {
+        this.reload()
+      }
+    },
+    chart: {}
+  },
+  methods: {
+    reload () {
+      this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
+        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
+        } else {
+          this.topoData = {}
+          this.querysArray = []
+          this.timeType = 1
        }
-        this.topoData = res.topo
-        this.querysArray = res.elements
-      })
-    } else {
-      setTimeout(() => {
-        const res = {
-          topo: {},
-          elements: [],
-          timeType: 4
-        }
-        this.topoData = res.topo
-        this.querysArray = res.elements
-        this.timeType = res.timeType || 1
      })
    }
  }
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
@@ -19,7 +19,8 @@ export default {
    return {
      selectPens: [],
      editFlag: false,
-      prevFlag: false
+      prevFlag: false,
+      meta2dLoading: true
    }
  },
  mounted () {
@@ -37,7 +38,6 @@ export default {
      // meta2d.registerCanvasDraw(chartsPens())
      /* 画布绑定事件 */
      meta2d.beforeAddPens = (pens) => { // 添加画笔前
-        console.log(pens)
        if (pens.length === 1) {
          if (!pens[0].type) {
            this.nodeInit(pens[0])
@@ -57,25 +57,37 @@ export default {
      // meta2d.on('add', this.appPen) // 添加新画笔·
      meta2d.on('click', this.topoClick) // click画笔·
      setTopology(this.meta2dId, meta2d)
-      console.log(getTopology(this.meta2dId))
-      this.clacTopoData(this.topoData).then((data) => {
-        console.log(data)
-        meta2d.open(data)
-        meta2d.centerView()
-        meta2d.lock(1)
+    },
+    reload () {
+      const endTime = new Date().getTime()
+      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()
+          getTopology(this.meta2dId).lock(1)
+        })
      })
    },
-    clacTopoData (data) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
+    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)
      })
    },
-    calcNode (node) { // 处理节点数据
-      node = { ...node, ...node.data.params }
-    },
    nodeInit (pen) { // 初始化节点参数
      pen.data = {
        params: { // 用于编辑时 重置为节点初始状态
@@ -87,7 +99,7 @@ export default {
        imageId: '',
        valueMapping: [],
        legend: '',
-        statistics: '',
+        statistic: '',
        enable: {
          valueMapping: true,
          tooltip: true
@@ -100,6 +112,7 @@ export default {
          legends: [] // {legend: '' , alias}
        }
      }
+      pen.isNz = true
      pen.background = '#22222200'
      pen.textAlign = 'center'
      pen.textBaseline = 'middle'
@@ -115,7 +128,10 @@ export default {
      pen.lineWidth = 1
      pen.lineDash = []
      pen.borderRadius = 0
-      console.log(pen)
+      pen.paddingTop = 5
+      pen.paddingBottom = 5
+      pen.paddingLeft = 5
+      pen.paddingRight = 5
    },
    lineInit (pen) { // 初始化连线参数
      pen.data = {
@@ -123,8 +139,16 @@ export default {
          animateColor: '#FA901CFF',
          borderColor: '#22222200',
          color: '#222222FF'
-        }
+        },
+        valueMapping: [],
+        legend: '',
+        statistic: '',
+        enable: {
+          valueMapping: true,
+          tooltip: true
+        },
      }
+      pen.disableInput = true
      pen.lineAnimateType = 0
      pen.animateSpan = 1
      pen.animateReverse = false
@@ -137,13 +161,12 @@ export default {
      pen.borderType = 0
      pen.lineWidth = 1
      pen.lineDash = []
+      pen.isNz = true
    },
    pensActive (pens, e) { // 选中节点
-      console.log(pens, 'active', e)
      this.selectPens = pens
    },
    topoClick (params, e) { // 点击节点
-      console.log(this.$refs.meta2dProps)
      if (!params.pen && this.$refs.meta2dProps) {
        this.$refs.meta2dProps.activeName = 'canvas'
        this.selectPens = []
@@ -156,7 +179,6 @@ export default {
      // console.log(pens)
    },
    updatePens (pen, key) { // 更新对应的节点
-      console.log(pen, key, 'update')
      // meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false });
      const obj = { id: pen.id }
      obj[key] = pen[key]
@@ -165,13 +187,18 @@ export default {
      }
      getTopology(this.meta2dId).setValue(obj)
      if (key === 'lineAnimateType') {
-        console.log('lineAnimateType', 'start')
        if (!pen[key]) {
          getTopology(this.meta2dId).stopAnimate(pen.id)
          return
        }
        getTopology(this.meta2dId).startAnimate(pen.id)
      }
+    },
+    exitEdit (isRefresh) {
+      this.editFlag = false
+      if (isRefresh) {
+        this.$emit('reload')
+      }
    }
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dStore.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dStore.js
@@ -0,0 +1,27 @@
+const meta2dStore = {
+  state: {
+    queryValues: []
+  },
+  mutations: {
+    setQueryValues (state, arr) {
+      state.queryValues = arr
+    },
+    delQueryValues (state, obj) {
+      delete state.queryValues[obj.key]
+    }
+  },
+  getters: {
+    getQueryValues (state) {
+      return state.queryValues
+    }
+  },
+  actions: {
+    dispatchSetQueryValues (store, arr) {
+      store.commit('setQueryValues', arr)
+    },
+    dispatchDelQueryValues (store, arr) {
+      store.commit('delQueryValues', arr)
+    }
+  }
+}
+export default meta2dStore
--- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
@@ -1,14 +1,134 @@
 import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+import bus from '@/libs/bus'
+import axios from 'axios'
 export default {
  methods: {
    topoResize (id) {
      getTopology(id).resize()
    },
    initEdit (id) {
-      console.log(getTopology(id))
      getTopology(id).lock(0)
-      getTopology(id).centerView()
      getTopology(id).stopAnimate(getTopology(id).data.pens)
+      console.log(getTopology(id).data.pens)
+      if (getTopology(id).data.pens) {
+        getTopology(id).data.pens.forEach(item => {
+          this.calcNode(item)
+        })
+      }
+      getTopology(id).render()
+      getTopology(id).centerView()
+    },
+    calcNode (node) { // 处理节点数据
+      node = { ...node, ...node.data.params }
+      getTopology(this.meta2dId)._setValue(node)
+    },
+    getQueryValues (elements, startTime, endTime) {
+      this.meta2dLoading = true
+      return new Promise(resolve => {
+        const step = bus.getStep(startTime, endTime)
+        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
+          let query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${step}`
+          query += `&nullType=${'null'}`
+          if (element.filter) {
+            query += `&filter=${element.filter}`
+          }
+          query += `&query=${encodeURIComponent(element.expression)}`
+          return this.$get(query)
+        })
+        axios.all(requests).then((res) => {
+          console.log(res)
+          const arr = []
+          res.forEach((request, index) => {
+            arr.push({
+              type: 'title',
+              name: elements[index].name
+            })
+            if (request.code === 200 && request.status === 'success') {
+              request.data.result.forEach((r, rindex) => {
+                let legend = ''
+                if (!r.metric) {
+                  r.metric = {}
+                }
+                if (r.metric.__name__) {
+                  legend += `${r.metric.__name__}{`
+                }
+                const tagKeysArr = Object.keys(r.metric)
+                tagKeysArr.forEach(tagKey => {
+                  if (tagKey !== '__name__' && tagKey !== 'legend' && tagKey !== 'values' && tagKey !== '$value') {
+                    legend += `${tagKey}="${r.metric[tagKey]}",`
+                  }
+                })
+                if (legend.endsWith(',')) {
+                  legend = legend.substr(0, legend.length - 1)
+                }
+                if (r.metric.__name__) {
+                  legend += '}'
+                }
+                if (!legend && elements) {
+                  legend = elements[index].expression
+                }
+                const obj = {
+                  type: 'item',
+                  id: rindex + elements[index].name + JSON.stringify(r.metric),
+                  name: this.handleLegendAlias(legend, elements[index].legend, r.metric),
+                  values: r.values
+                }
+                arr.push(obj)
+              })
+            }
+          })
+          this.meta2dLoading = false
+          this.$store.dispatch('dispatchSetQueryValues', arr)
+          resolve(arr)
+        })
+      })
+    },
+    handleLegendAlias (legend, aliasExpression, params) {
+      const self = this
+      const myParams = JSON.parse(JSON.stringify(params))
+      myParams.$labels = JSON.parse(JSON.stringify(params))
+      myParams.$value = myParams.value
+      if (/\{\{.+\}\}/.test(aliasExpression)) {
+        const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          if (!legend) {
+            return label
+          }
+          let value = null
+          if (params && self.$loadsh.get(myParams, label)) {
+            value = self.$loadsh.get(myParams, label)
+          }
+          if (label) {
+            const reg = new RegExp(label + '=".+?"', 'g')
+            if (reg.test(legend)) {
+              const ans = legend.match(reg)
+              let find = ''
+              ans.forEach(item => {
+                const index = legend.indexOf(item)
+                if (legend[index - 1] !== '_') {
+                  find = item
+                }
+              })
+              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+            }
+          }
+          return value || ''
+        })
+        return labelValue
+      } else {
+        if (!aliasExpression) {
+          return legend
+          // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
+          // return result
+        }
+        return aliasExpression
+      }
    }
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -1,12 +1,76 @@
 <template>
-  <div>
-    canvas
+  <div class="pens-data">
+    <div class="form-row-box">
+      <!--         backGround -->
+      <div class="form-row-title">
+        BackGround
+        <i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
+      </div>
+      <div v-show="canvasProps.backGround" class="form-row-content">
+      </div>
+      <div class="form-row-title">
+        Elements
+      </div>
+      <div class="form-row-content">
+        <div class="form-row-item form-row-item-full">
+          <draggable
+            v-model="elements"
+            :scroll-sensitivity="150"
+            :options="{
+                    dragClass:'drag-valueMapping-class',
+                    fallbackClass:'fallback-class',
+                    forceFallback:true,
+                    ghostClass:'chart-ghost',
+                    chosenClass:'choose-class',
+                    scroll:true,
+                    animation: 150,
+                  }">
+            <div v-for="item in elements" :key="item.id">
+            <div class="pen-tools" style="background: #999;margin-bottom: 10px;border-radius: 2px;display: flex;justify-content: space-between;padding: 3px 10px" @click="penActive(item)">
+              <i v-if="item.type !== 1" class="nz-icon nz-icon-zhengfangxing" />
+              <i v-else class="nz-icon nz-icon-compare" />
+              <span>
+                123123123
+              </span>
+            </div>
+          </div>
+          </draggable>
+        </div>
+      </div>
+    </div>
  </div>
 </template>

 <script>
+import { getTopology } from '@/components/common/js/common'
+import draggable from 'vuedraggable'
+
 export default {
-  name: 'meta2dCanvas'
+  name: 'meta2dCanvas',
+  props: {
+    canvasProps: {},
+    meta2dId: {}
+  },
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      elements: []
+    }
+  },
+  mounted () {
+    this.elements = getTopology(this.meta2dId).store.data.pens
+  },
+  methods: {
+    updateShow (key) {
+      this.canvasProps[key] = !this.canvasProps[key]
+    },
+    penActive (item) {
+      console.log(item.id)
+      getTopology(this.meta2dId).active(item)
+    }
+  }
 }
 </script>

--- a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
@@ -138,6 +138,10 @@ const rz = {
 export default {
  name: 'meta2dData',
  mixins: [promqlInputMixin, rz],
+  props: {
+    querysArray: {},
+    timeType: {}
+  },
  components: {
    draggable,
    promqlInput
@@ -197,11 +201,6 @@ export default {
      } else if (!this.expressionName[index]) {
        this.expressionName[index] = this.expressionsShow[index].oldName
      } else {
-        this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((item, index) => {
-          if (item == this.expressionsShow[index].oldName) {
-            this.param.rightYAxis.elementNames[index] = this.expressionName[index]
-          }
-        })
        this.expressionsShow[index].oldName = this.expressionName[index]
      }
      this.expressionChange()
@@ -293,12 +292,6 @@ export default {
    },
    removeExpression (index) {
      if (this.expressionsShow.length > 1) {
-        this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((elementName, subIndex) => {
-          if (elementName == this.expressionName[index]) {
-            this.param.rightYAxis.elementNames.splice(subIndex, 1)
-          }
-        })
-
        this.expressions.splice(index, 1)
        this.expressionName.splice(index, 1)
        this.expressionsShow.splice(index, 1)
@@ -330,10 +323,6 @@ export default {
    showError () {
    },
    hideError (key, index) {
-      if (!this.param[key] || !this.param[key].length) {
-        return
-      }
-      this.param[key][index].error = false
      this.$forceUpdate()
    },
    move () {
@@ -373,6 +362,8 @@ export default {
      this.expressions = []
      this.expressionsShow = []
      this.expressionName = []
+      this.elements = this.$loadsh.cloneDeep(this.querysArray)
+      this.dataTimeType = this.timeType
      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
@@ -1,5 +1,5 @@
 <template>
-  <div class="pens-data">
+  <div class="pens-data right-box__container">
    <div v-if="pen.id">
 <!--      <el-input-number v-model="pen.x" @change="change('x')"/>-->
 <!--      node-->
@@ -256,7 +256,8 @@
                Image
              </div>
              <div class="form-row-value">
-                <el-input  v-model="pen.image" size="small" @change="change('image')"/>
+<!--                <el-input  v-model="pen.image" size="small" @change="change('image')"/>-->
+                <meta2dSelectImage :selectImage="pen.image" @updateImage="updateImage"/>
              </div>
            </div>
            <div class="form-row-item">
@@ -350,44 +351,6 @@
              </div>
            </div>
          </div>
-
-          <!--         valueMapping -->
-          <div class="form-row-title">
-            Value mappings
-            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('valueMapping')"/>
-          </div>
-          <div v-show="elements.valueMapping" class="form-row-content">
-            <div class="form-row-item">
-              <div class="form-row-key">
-                color
-              </div>
-              <div class="form-row-value">
-                <nezhaColor
-                  :isTopo="true"
-                  :value-arr="[{name:'background',value: pen.background}]"
-                  @colorChange="colorChange"/>
-              </div>
-            </div>
-          </div>
-
-          <!--         tooltip -->
-          <div class="form-row-title">
-            tooltip
-            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
-          </div>
-          <div v-show="elements.tooltip" class="form-row-content">
-            <div class="form-row-item">
-              <div class="form-row-key">
-                color
-              </div>
-              <div class="form-row-value">
-                <nezhaColor
-                  :isTopo="true"
-                  :value-arr="[{name:'background',value: pen.background}]"
-                  @colorChange="colorChange"/>
-              </div>
-            </div>
-          </div>
        </div>
      </div>
 <!--      line-->
@@ -699,16 +662,265 @@
          </div>
        </div>
      </div>
+
+      <!--         valueMapping -->
+      <div class="form-row-title">
+        Value mappings
+        <span>
+              <el-switch
+                v-model="pen.data.enable.valueMapping"
+                :active-value="true"
+                :inactive-value="false"
+                @change="change('data.enable.valueMapping')"
+              ></el-switch>
+              <i class="nz-icon nz-icon-arrow-down" @click="updateShow('valueMapping')"/>
+            </span>
+      </div>
+      <transition name="el-zoom-in-top">
+        <div class="el-form" v-show="elements.valueMapping">
+          <div  class="form-row-content">
+            <div class="form-row-item">
+              <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>
+            </div>
+            <div class="form-row-item form-row-item-full chart-config">
+              <el-row class="el-form">
+                <draggable
+                  v-model="pen.data.valueMapping"
+                  @end="change"
+                  :scroll-sensitivity="150"
+                  :options="{
+                    dragClass:'drag-valueMapping-class',
+                    fallbackClass:'fallback-class',
+                    forceFallback:true,
+                    ghostClass:'chart-ghost',
+                    chosenClass:'choose-class',
+                    scroll:true,
+                    filter: '.drag-disabled',
+                    animation: 150,
+                    handle: '.drag-sort'
+                  }">
+                  <div
+                    v-for="(item,index) in pen.data.valueMapping"
+                    :key="item.uid"
+                    :class="item.error? 'is-item-box-error' : ''"
+                  >
+                    <div class="chart-title chart-title-config">
+                  <span class="chart-title-content">
+                    <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
+                    <span v-if="item.column && !item.show">{{item.column}}:</span>
+                    <span v-show="!item.show" class="title-content-left">
+                      <span v-if="item.type === 'value'">
+                        {{item.value}}
+                      </span>
+                      <span v-if="item.type === 'range'">
+                        [{{item.from}}，{{item.to}})
+                      </span>
+                      <span v-if="item.type === 'regx'">
+                        {{item.regx}}
+                      </span>
+                      <div class="prev-mapping-icon">
+                        <i :class="item.icon" :style="{ color: item.color.icon }"></i>
+                      </div>
+                      <div :style="{background:item.color.bac}" class="prev-mapping-box">
+                          <span :style="{color:item.color.text}">
+                            {{item.display || "T"}}
+                          </span>
+                        </div>
+                    </span>
+                  </span>
+                      <span>
+                    <span @click="addMapping('')" style="margin-right: 5px" :title="$t('tip.add')">
+                      <i class="nz-icon nz-icon-create-square"></i>
+                    </span>
+                    <span @click="copyMapping(index)" style="margin-right: 5px" :title="$t('overall.duplicate')">
+                      <i  class="nz-icon nz-icon-override"></i>
+                    </span>
+                    <span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')">
+                      <i  class="nz-icon nz-icon-minus"></i>
+                    </span>
+                    <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                      <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
+                    </span>
+                  </span>
+                    </div>
+                    <transition-group appear tag="div" name="el-zoom-in-top">
+                      <el-row
+                        v-show="item.show"
+                        :key="1"
+                        class="thresholds-item"
+                      >
+                        <div>
+                          <el-select
+                            v-model="item.type"
+                            size="small"
+                            style="width: 100px"
+                            @change="(val)=>{mappingItemChange(index,val)}"
+                          >
+                            <el-option
+                              v-for="item in mappingTypeList"
+                              :value="item.value"
+                              :label="$t(item.label)"
+                              :key="item.value"/>
+                          </el-select>
+                        </div>
+                        <div
+                          v-if="item.type === 'value'"
+                          :prop="'param.valueMapping.' + index + '.value'"
+                          :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                          class="thresholds-from-item"
+                          style="display: flex"
+                          key="value"
+                        >
+                          <el-input-number
+                            :controls="false"
+                            size="small"
+                            v-model.number="item.value"
+                            placeholder="value"
+                            @change="change('valueMapping', index)"
+                          ></el-input-number>
+                        </div>
+                        <div
+                          v-if="item.type === 'range'"
+                          :prop="'param.valueMapping.' + index + '.from'"
+                          :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                          class="thresholds-from-item"
+                          key="from"
+                        >
+                          <el-input-number
+                            :controls="false"
+                            size="small"
+                            v-model.number="item.from"
+                            placeholder="from"
+                            @change="change('valueMapping', index)"
+                          ></el-input-number>
+                        </div>
+                        <div
+                          v-if="item.type === 'range'"
+                          :prop="'param.valueMapping.' + index + '.to'"
+                          :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                          class="thresholds-from-item"
+                          key="to"
+                        >
+                          <el-input-number
+                            :controls="false"
+                            size="small"
+                            v-model.number="item.to"
+                            @change="change('valueMapping', index)"
+                            placeholder="to"
+                          ></el-input-number>
+                        </div>
+                        <div
+                          v-if="item.type === 'regx'"
+                          :prop="'param.valueMapping.' + index + '.regx'"
+                          :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                          class="thresholds-from-item"
+                          key="regx"
+                        >
+                          <el-input
+                            size="small"
+                            v-model="item.regx"
+                            placeholder="regx"
+                            @change="change('valueMapping', index)"
+                          ></el-input>
+                        </div>
+                      </el-row>
+                      <el-row v-show="item.show" :key="2" class="thresholds-item">
+                        <div>
+                          <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>
+                        </div>
+                        <div :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+                          <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
+                            <!--                              <el-dropdown trigger="click" slot="prefix" placement="top-start">-->
+                            <!--                                <div class="el-dropdown-link">-->
+                            <!--                                  <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>-->
+                            <!--                                  <div v-else class="mapping-iconSelect" :title="$t('tip.add')">-->
+                            <!--                                    <i class="nz-icon nz-icon-create-square"></i>-->
+                            <!--                                  </div>-->
+                            <!--                                </div>-->
+                            <!--                                <el-dropdown-menu slot="dropdown" class="mapping-iconPop">-->
+                            <!--                                  <ul class="mapping-iconList">-->
+                            <!--                                    <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">-->
+                            <!--                                      <i :class="subItem.value"></i>-->
+                            <!--                                    </li>-->
+                            <!--                                  </ul>-->
+                            <!--                                </el-dropdown-menu>-->
+                            <!--                              </el-dropdown>-->
+                          </el-input>
+                        </div>
+                        <nezhaColor
+                          :color-val="item.color"
+                          :single="false"
+                          :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'},{name:'border',value:item.color.icon,key:'icon'}]"
+                          @colorChange="(val,key)=>{valueMappingColorChange(val, key, index)}"
+                        />
+                      </el-row>
+                    </transition-group>
+                  </div>
+                </draggable>
+                <div @click="addMapping" class="thresholds-add">
+                  {{$t('overall.addMapping')}}
+                </div>
+              </el-row>
+
+            </div>
+          </div>
+        </div>
+      </transition>
+
+      <!--         tooltip -->
+      <div class="form-row-title" v-if="pen.type !== 1">
+        tooltip
+        <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-key">
+            color
+          </div>
+          <div class="form-row-value">
+            <nezhaColor
+              :isTopo="true"
+              :value-arr="[{name:'background',value: pen.background}]"
+              @colorChange="colorChange"/>
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </template>

 <script>
 import nezhaColor from '@/components/common/nezhaColor'
+import meta2dSelectImage from '@/components/common/project/meta2d/meta2dSelectImage'
+import { imageTemp } from '@/components/common/project/L5/services/canvas'
+import { dealImg, getUUID, topologyImg } from '@/components/common/js/common'
+import imgDefault from '@/components/common/project/L5/services/img'
+import { ColorReverse, randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import lodash from 'lodash'
+import draggable from 'vuedraggable'
 export default {
  name: 'meta2dElement', // node 和 line 所有组件均是分开创建的 修改相同属性时 需要同时修改
  components: {
-    nezhaColor
+    nezhaColor,
+    meta2dSelectImage,
+    draggable
  },
  props: {
    selectPens: {},
@@ -718,13 +930,17 @@ export default {
    selectPens: {
      immediate: true,
      handler (n) {
-        console.log(n, 'selectPens')
        this.pen = n[0]
        // todo 判断legend 是否还存在
        // this.$forceUpdate()
      }
    }
  },
+  computed: {
+    queryValues () {
+      return this.$store.getters.getQueryValues
+    }
+  },
  data () {
    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
    return {
@@ -812,7 +1028,7 @@ export default {
          r: '5',
          name: 'circle',
          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
-        },
+        }
      ],
      lineAnimateOptions: [
        { id: 3, name: this.$t('project.topology.flow') },
@@ -821,8 +1037,23 @@ export default {
        // { id: 'comet', name: this.$t('project.topology.comet') },
        { id: 0, name: this.$t('project.topology.none') }
      ],
+      statisticsList: this.$CONSTANTS.statisticsList,
+      mappingTypeList: [
+        {
+          label: this.$t('overall.value'),
+          value: 'value'
+        }, {
+          label: this.$t('dashboard.panel.chartForm.valMapping.range'),
+          value: 'range'
+        }, {
+          label: this.$t('dashboard.panel.chartForm.valMapping.regx'),
+          value: 'regx'
+        }
+      ]
    }
  },
+  mounted () {
+  },
  methods: {
    change (key) {
      if (key === 'lineDash') {
@@ -831,12 +1062,33 @@ export default {
      }
      this.$emit('change', key)
    },
+    updateImage (image) {
+      this.pen.image = image.image
+      this.pen.imageId = image.id
+      this.change('image')
+    },
    colorChange (val, key) {
      this.pen.data.params[key] = val
      this.pen[key] = val
-      console.log(key, val)
      this.change(key)
    },
+    valueMappingColorChange (val, key, index) {
+      if (key === 'thresholds') {
+        this.pen.data.thresholds[index].color = val
+      }
+      if (key === 'bac') {
+        this.pen.data.valueMapping[index].color.bac = val
+        this.$set(this.pen.data.valueMapping, index, this.pen.data.valueMapping[index])
+      }
+      if (key === 'text') {
+        this.pen.data.valueMapping[index].color.text = val
+        this.$set(this.pen.data.valueMapping, index, this.pen.data.valueMapping[index])
+      }
+      if (key === 'icon') {
+        this.pen.data.valueMapping[index].color.icon = val
+        this.$set(this.pen.data.valueMapping, index, this.pen.data.valueMapping[index])
+      }
+    },
    updateShow (key) {
      this.elements[key] = !this.elements[key]
    },
@@ -845,7 +1097,58 @@ export default {
      e.path[2].children[1].setAttribute('tabindex', '1')
    },
    inputBlur (e) {
+    },
+    addMapping () {
+      const bacColor = randomcolor()
+      const obj = {
+        type: 'value',
+        show: true,
+        value: undefined,
+        display: '',
+        color: {
+          bac: bacColor + 'FF',
+          text: ColorReverse(bacColor) + 'FF',
+          border: randomcolor() + 'FF'
+        },
+        uid: getUUID()
+      }
+      this.pen.data.valueMapping.push(obj)
+    },
+    copyMapping (index) {
+      const temp = lodash.cloneDeep(this.pen.data.valueMapping[index])
+      temp.uid = getUUID()
+      this.pen.data.valueMapping.push(temp)
+    },
+    removeMapping (index) {
+      this.pen.data.valueMapping.splice(index, 1)
+    },
+    showMapping (index) {
+      this.pen.data.valueMapping[index].show = !this.pen.data.valueMapping[index].show
+    },
+    mappingItemChange (index, type) {
+      const mapping = this.pen.data.valueMapping[index]
+      if (mapping.type === 'value') {
+        this.pen.data.valueMapping[index] = {
+          ...mapping,
+          value: undefined
+        }
+      }
+      if (mapping.type === 'range') {
+        this.pen.data.valueMapping[index] = {
+          ...mapping,
+          from: undefined,
+          to: undefined
+        }
+      }
+      if (mapping.type === 'regx') {
+        this.pen.data.valueMapping[index] = {
+          ...mapping,
+          regx: ''
+        }
+      }
+      this.$set(this.pen.data.valueMapping, index, this.pen.data.valueMapping[index])
    }
+
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="topo-header">
-    <div v-if="!isChart"> {{projectName}} </div>
+    <div v-if="!isChart"> {{project && project.name}} </div>
    <div class="tools-left">
      <div class="tools-left-drag">
        <div
@@ -20,6 +20,9 @@
      <button v-has="'project_edit'" v-if="!isChart" class="top-tool-btn margin-r-10" type="button" @click="editMeta2d" :title="$t('overall.edit')">
        <i class="nz-icon nz-icon-edit"></i>
      </button>
+      <button v-has="'project_edit'" v-if="!isChart" class="top-tool-btn margin-r-10" type="button" @click="saveMeta2d" :title="$t('overall.edit')">
+        save
+      </button>
    </div>
  </div>
 </template>
@@ -37,7 +40,7 @@ export default {
      type: Boolean,
      default: false
    },
-    projectName: {}
+    project: {}
  },
  data () {
    return {
@@ -54,14 +57,12 @@ export default {
  },
  methods: {
    editMeta2d () {
-      console.log()
      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
      this.$store.commit('setShowTopoScreen', true)
      setTimeout(() => {
        this.topoResize(this.meta2dId)
        this.initEdit(this.meta2dId)
        this.$emit('edit')
-        console.log(getTopology(this.meta2dId).data())
      })
    },
    onDragstart (e) {
@@ -86,8 +87,48 @@ export default {
    },
    // 开启钢笔状态
    setDrawPen () {
-      console.log(123123123123)
      getTopology(this.meta2dId).drawLine('line')
+    },
+    saveMeta2d () {
+      if (this.isChart) {
+        this.saveChart()
+      } else {
+        this.saveProject()
+      }
+    },
+    saveChart () {
+
+    },
+    saveProject () {
+      const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
+      console.log(elements)
+      const params = {
+        topo: getTopology(this.meta2dId).data(),
+        elements: elements,
+        timeType: ''
+      }
+
+      this.$put('monitor/project/topo', { topo: JSON.stringify(params), projectId: this.project.id }).then(res => {
+        this.prevent_opt.save = false
+        if (res.code === 200) {
+          this.$message({
+            message: this.$t('tip.saveSuccess'),
+            type: 'success'
+          })
+          this.$store.commit('setShowTopoScreen', this.topoScreenState)
+          this.$nextTick(() => {
+            getTopology(this.meta2dId).lock(1)
+            getTopology(this.meta2dId).resize()
+          })
+          this.$emit('exitEdit', true)
+        }
+      }).catch(res => {
+        this.prevent_opt.save = false
+        this.$message({
+          message: res.msg,
+          type: 'error'
+        })
+      })
    }
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -1,10 +1,18 @@
 <template>
-  <div class="meta2d-box">
-    <meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :projectName="projectName" @edit="editFlag = true"/>
+  <div class="meta2d-box" v-my-loading="meta2dLoading">
+    <meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" @edit="editFlag = true" @exitEdit="exitEdit"/>
    <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'">
      <div :id="meta2dId" style="height: 100%;width: 100%"></div>
    </div>
-    <meta2dProps ref="meta2dProps" :selectPens.sync="selectPens" :querysArray="querysArray" :timeType="timeType" @updatePens="updatePens" v-if="editFlag"/>
+    <meta2dProps
+      v-if="editFlag"
+      ref="meta2dProps"
+      :selectPens.sync="selectPens"
+      :querysArray="querysArray"
+      :timeType="timeType"
+      :meta2dId="meta2dId"
+      @updatePens="updatePens"
+    />
  </div>
 </template>

@@ -13,9 +21,10 @@ 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 { getTopology, setTopology } from '@/components/common/js/common'
+import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
 export default {
  name: 'meta2dMain',
-  mixins: [meta2dMain],
+  mixins: [meta2dMain, topoUtil],
  props: {
    meta2dId: {}, // 唯一id 不可重复
    topoData: {}, // topo图数据
@@ -25,7 +34,7 @@ export default {
    },
    querysArray: {},
    timeType: {},
-    projectName: {}
+    project: {}
  },
  components: {
    meta2dHeader,
@@ -35,6 +44,7 @@ export default {
    topoData: {
      immediate: true,
      handler () {
+        this.reload()
      }
    }
  },
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="props-box props">
-    <el-tabs v-model="activeName" type="card">
+  <div class="props-box props" @keypress.stop="" @keydown.stop="" @keyup.stop="">
+    <el-tabs v-model="activeName" type="card"  :before-leave="beforeLeave">
      <el-tab-pane label="elements" name="elements" v-if="selectPens.length === 1">
        <meta2dElement :selectPens.sync="selectPens" @change="change" :elements="elements"/>
      </el-tab-pane>
      <el-tab-pane label="canvas" name="canvas">
-        <meta2dCanvas />
+        <meta2dCanvas :canvasProps="canvasProps" :meta2dId='meta2dId' ref ='meta2dCanvas'/>
      </el-tab-pane>
      <el-tab-pane label="data" name="data">
-        <meta2dData :querysArray.sync="querysArray" :timeType.sync="timeType"/>
+        <meta2dData :querysArray.sync="querysArray" :timeType.sync="timeType" ref="meta2dData"/>
      </el-tab-pane>
    </el-tabs>
  </div>
@@ -18,12 +18,21 @@
 import meta2dElement from '@/components/common/project/meta2d/meta2dElement'
 import meta2dCanvas from '@/components/common/project/meta2d/meta2dCanvas'
 import meta2dData from '@/components/common/project/meta2d/meta2dData'
+import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+import { fromRoute } from '@/components/common/js/constants'
+import chartTempData from '@/components/chart/chartTempData'
+import { isTimeSeries } from '@/components/chart/chart/tools'
+import bus from '@/libs/bus'
+import axios from 'axios'
+import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
 export default {
  name: 'meta2dProps',
+  mixins: [topoUtil],
  props: {
    selectPens: {},
    querysArray: {},
-    timeType: {}
+    timeType: {},
+    meta2dId: {}
  },
  components: {
    meta2dElement,
@@ -32,7 +41,6 @@ export default {
  },
  watch: {
    selectPens (n) {
-      console.log(n)
      if (n.length === 1) {
        this.activeName = 'elements'
      }
@@ -41,6 +49,9 @@ export default {
  data () {
    return {
      activeName: 'canvas',
+      canvasProps: {
+        backGround: true
+      },
      elements: {
        backGround: true,
        border: true,
@@ -56,7 +67,15 @@ export default {
  methods: {
    change (key) {
      this.$emit('updatePens', this.selectPens[0], key)
-    }
+    },
+    beforeLeave (newName, oldName) {
+      if (oldName === 'data') {
+        const endTime = new Date().getTime()
+        const startTime = endTime - 60 * 5 * 1000
+        this.getQueryValues(this.$refs.meta2dData.elements, startTime, endTime)
+      }
+    },
+
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
+    <div @click="selectBoxShow = !selectBoxShow">
+      <img :src="selectImage" v-if="selectImage" class="image-box">
+      <div v-else class="image-box image-box-null" />
+    </div>
+    <div class="image-select-box" v-if="selectBoxShow">
+      <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>
+  </div>
+</template>
+
+<script>
+import { dealImg, topologyImg } from '@/components/common/js/common'
+
+export default {
+  name: 'meta2dSelectImage',
+  props: {
+    selectImage: {}
+  },
+  data () {
+    return {
+      tools: [],
+      imgageLoading: false,
+      iconArray: [],
+      selectBoxShow: false
+    }
+  },
+  mounted () {
+    this.imageInit()
+  },
+  methods: {
+    imageInit () { // 加载所有图片
+      this.$get('monitor/project/topo/icon').then(res => {
+        this.imgageLoading = true
+        this.tools = []
+        let imgArr = []
+        let promiseArr = []
+        res.data.list.forEach((item, index) => {
+          item.imageName = item.name
+          delete item.name
+          promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
+          imgArr.push({ ...item })
+        })
+        Promise.all(promiseArr).then((res2, header) => {
+          this.iconArray = [...res.data.list]
+          this.iconArray.forEach((item, index) => {
+            item.image = res2[index].data
+          })
+          this.imgInit = true
+          this.imgageLoading = false
+          imgArr = null
+          promiseArr = null
+        })
+      })
+    },
+    changeSelectBoxShow () {
+      this.selectBoxShow = false
+    },
+    selectImageChange (item) {
+      this.$emit('updateImage', item)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.meta2d-image-box{
+  position: relative;
+  .image-box {
+    width: 30px;
+    height: 30px;
+  }
+  .image-box-null {
+    border: 1px solid #999999;
+    box-sizing: border-box;
+  }
+  .image-select-box {
+    text-align: center;
+    width: 254px;
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 1;
+    padding: 10px 0px 0px 10px;
+    position: absolute;
+    top: 26px;
+    background: #ffffff;
+    border: 1px solid #999999;
+    border-radius: 4px;
+    left: 0;
+    .image-box-item {
+      width: 50px;
+      height: 70px;
+      margin: 0 10px 10px 0;
+      flex-direction: column;
+      align-items: center;
+      display: inline-block;
+      .imag-src{
+        width: 50px;
+        height: 50px;
+      }
+      .img-text {
+        width: 100%;
+        height: 20px;
+        line-height: 20px;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -715,7 +715,6 @@ export default {
        this.oldcCodeLength = 0
        this.codeMirrorValue[this.index] = ''
        // this.expressionList[this.index] = ''
-        console.log(this.index)
        this.$set(this.expressionList, this.index, '')
        this.$emit('change', '')
      }
@@ -1183,7 +1182,6 @@ export default {
      deep: true,
      immediate: true,
      handler (n, o) {
-        console.log(n)
        this.codeMirrorValue[this.index] = n[this.index]
        if (this.isTopo && this.firstInit) {
          setTimeout(() => {
--- 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" :projectName="currentProject.name" :timeType="timeType"/>
+    <meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :project="currentProject" :timeType="timeType" @reload="reload"/>
    <transition name="el-zoom-in-bottom">
      <bottom-box
        v-if="bottomBox.showSubList"
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import user from './user'
 import panel from './panel'
 import terminalFile from './terminalFile'
+import meta2dStore from '@/components/common/project/meta2d/js/meta2dStore'
 // import topology from './topology'

 Vue.use(Vuex)
@@ -10,7 +11,8 @@ const store = new Vuex.Store({
  modules: {
    user,
    panel,
-    terminalFile
+    terminalFile,
+    meta2dStore
  },
  state: {
    /* 监听对象变化，用于顶部菜单与底部内容的同步 */