feat： topo重构（70%）

2023-02-20 19:11:10 +08:00
parent 0d445fe849
commit febce1caca
10 changed files with 301 additions and 95 deletions
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
@@ -3,6 +3,9 @@
  height: 100%;
  position: relative;
 }
+.meta2d-box.list-page{
+  background: $--background-color-empty;
+}
 .meta2d-main{
  width: 100%;
  height: 100%;
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
@@ -10,6 +10,7 @@
    padding: 0 !important;
    box-sizing: border-box;
    right: 0;
+    background: $--background-color-empty;
  }
  .form-row-item{
    vertical-align: top;
--- a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
+++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
@@ -17,6 +17,7 @@ export default {
  },
  methods: {
    reload () {
+      if (this.currentProject.id) {
        this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
          if (res.data && res.data.topo) {
            this.topoData = res.data.topo.topo || {}
@@ -31,3 +32,4 @@ export default {
      }
    }
  }
+}
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
@@ -14,6 +14,7 @@ import {
  myCubeAnchors
 } from '../../L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+import bus from '@/libs/bus'
 export default {
  data () {
    return {
@@ -23,8 +24,6 @@ export default {
      meta2dLoading: true
    }
  },
-  mounted () {
-  },
  methods: {
    init () {
      const meta2dOptions = {}
@@ -47,6 +46,11 @@ export default {
        }
        return true
      }
+      meta2d.beforeRemovePens = async (pens) => {
+        bus.$emit('changeSelectPens', [])
+        // 返回 true 允许 remove
+        return true
+      }
      // getTopology(this.topoData)).on('translate', this.topTranslate) // 平移·
      meta2d.on('active', this.pensActive) // 选中·
      // meta2d.on('scale', this.topoScale) // 缩放·
@@ -56,6 +60,7 @@ export default {
      meta2d.on('leave', this.penLeave) // 移出画笔·
      // meta2d.on('add', this.appPen) // 添加新画笔·
      meta2d.on('click', this.topoClick) // click画笔·
+
      setTopology(this.meta2dId, meta2d)
    },
    reload () {
@@ -89,11 +94,14 @@ export default {
      })
    },
    nodeInit (pen) { // 初始化节点参数
+      if (pen.data && pen.data.params) {
+        return
+      }
      pen.data = {
        params: { // 用于编辑时 重置为节点初始状态
-          background: '#22222200',
-          color: '#222222ff',
-          textColor: '#222222ff',
+          background: pen.background || '#22222200',
+          color: pen.color || '#222222ff',
+          textColor: pen.textColor || '#222222ff',
          image: ''
        },
        imageId: '',
@@ -112,33 +120,39 @@ export default {
          legends: [] // {legend: '' , alias}
        }
      }
-      pen.isNz = true
-      pen.background = '#22222200'
-      pen.textAlign = 'center'
-      pen.textBaseline = 'middle'
-      pen.color = '#222222ff'
-      pen.textColor = '#222222ff'
-      pen.image = ''
-      pen.imageId = ''
-      pen.imageRatio = false
-      pen.ratio = false
-      pen.rotate = 0
-      pen.globalAlpha = 1
-      pen.borderType = 0
-      pen.lineWidth = 1
-      pen.lineDash = []
-      pen.borderRadius = 0
+      pen.disableInput = pen.disableInput || true
+      pen.background = pen.background || '#22222200'
+      pen.textAlign = pen.textAlign || 'center'
+      pen.textBaseline = pen.textBaseline || 'middle'
+      pen.color = pen.color || '#222222ff'
+      pen.textColor = pen.textColor || '#222222ff'
+      pen.image = pen.image || ''
+      pen.imageId = pen.imageId || ''
+      pen.imageRatio = pen.imageRatio || false
+      pen.ratio = pen.ratio || false
+      pen.rotate = pen.rotate || 0
+      pen.globalAlpha = pen.globalAlpha || 1
+      pen.borderType = pen.borderType || 0
+      pen.lineWidth = pen.lineWidth || 1
+      pen.lineDash = pen.lineDash || []
+      pen.borderRadius = pen.borderRadius || 0
      pen.paddingTop = 5
      pen.paddingBottom = 5
      pen.paddingLeft = 5
      pen.paddingRight = 5
+      pen.visible = pen.visible || true
+      pen.isNz = true
+      pen.locked = pen.locked || 0
    },
    lineInit (pen) { // 初始化连线参数
+      if (pen.data && pen.data.params) {
+        return
+      }
      pen.data = {
        params: {
-          animateColor: '#FA901CFF',
-          borderColor: '#22222200',
-          color: '#222222FF'
+          animateColor: pen.animateColor || '#FA901CFF',
+          borderColor: pen.borderColor || '#22222200',
+          color: pen.color || '#222222FF'
        },
        valueMapping: [],
        legend: '',
@@ -146,27 +160,34 @@ export default {
        enable: {
          valueMapping: true,
          tooltip: true
-        },
        }
-      pen.disableInput = true
-      pen.lineAnimateType = 0
-      pen.animateSpan = 1
-      pen.animateReverse = false
-      pen.fromArrow = ''
-      pen.animateColor = '#FA901CFF'
-      pen.borderColor = '#22222200'
-      pen.borderWidth = 0
-      pen.color = '#222222ff'
-      pen.toArrow = ''
-      pen.borderType = 0
-      pen.lineWidth = 1
-      pen.lineDash = []
-      pen.isNz = true
+      }
+      pen.disableInput = pen.disableInput || true
+      pen.lineAnimateType = pen.lineAnimateType || 0
+      pen.animateSpan = pen.animateSpan || 1
+      pen.animateReverse = pen.animateReverse || false
+      pen.fromArrow = pen.fromArrow || ''
+      pen.animateColor = pen.animateColor || '#FA901CFF'
+      pen.borderColor = pen.borderColor || '#22222200'
+      pen.borderWidth = pen.borderWidth || 0
+      pen.color = pen.color || '#222222ff'
+      pen.toArrow = pen.toArrow || ''
+      pen.borderType = pen.borderType || 0
+      pen.lineWidth = pen.lineWidth || 1
+      pen.lineDash = pen.lineDash || []
+      pen.isNz = pen.isNz || true
+      pen.visible = pen.visible || true
+      pen.locked = pen.locked || 0
    },
    pensActive (pens, e) { // 选中节点
      this.selectPens = pens
+      setTimeout(() => {
+        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 = []
@@ -200,5 +221,7 @@ export default {
        this.$emit('reload')
      }
    }
+  },
+  beforeDestroy () {
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -7,6 +7,26 @@
        <i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
      </div>
      <div v-show="canvasProps.backGround" class="form-row-content">
+        <div class="form-row-item">
+          <div class="form-row-key">
+            Background
+          </div>
+          <div class="form-row-value">
+            <nezhaColor
+              :isTopo="true"
+              :value-arr="[{name:'bac',value: background}]"
+              @colorChange="backgroundChange"/>
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-row-key">
+            Image
+          </div>
+          <div class="form-row-value">
+            <!--                <el-input  v-model="pen.image" size="small" @change="change('image')"/>-->
+            <meta2dSelectImage :selectImage="bkImage" @updateImage="updateImage"/>
+          </div>
+        </div>
      </div>
      <div class="form-row-title">
        Elements
@@ -17,20 +37,40 @@
            v-model="elements"
            :scroll-sensitivity="150"
            :options="{
-                    dragClass:'drag-valueMapping-class',
+              dragClass:'drag-chart-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 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)">
+            <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">
+                <span>
                  <i v-if="item.type !== 1" class="nz-icon nz-icon-zhengfangxing" />
                  <i v-else class="nz-icon nz-icon-compare" />
+                </span>
                <span>
-                123123123
+                    <span @click.stop="penChange(item, 'locked')" class="pen-tools-item">
+                    <i  class="nz-icon nz-icon-lock" v-if="item.locked"/>
+                    <i  class="nz-icon nz-icon-unlock" v-if="!item.locked"/>
+                  </span>
+                  <span @click.stop="penChange(item, 'visible')" class="pen-tools-item">
+                    <i  class="nz-icon nz-icon-mimakejian1" v-if="item.visible"/>
+                    <i  class="nz-icon nz-icon-mimabukejian" v-if="!item.visible"/>
+                  </span>
+                  <span @click.stop="copyPen(item)" class="pen-tools-item">
+                    <i  class="nz-icon nz-icon-override"/>
+                  </span>
+                  <span @click.stop="delPen(item)" class="pen-tools-item">
+                    <i  class="nz-icon nz-icon-minus"/>
+                  </span>
+                  <span style="cursor: grab;" class="drag-sort pen-tools-item" :title="$t('dashboard.panel.chartForm.sort')">
+                    <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
+                  </span>
                </span>
              </div>
          </div>
@@ -44,7 +84,10 @@
 <script>
 import { getTopology } from '@/components/common/js/common'
 import draggable from 'vuedraggable'
-
+import bus from '@/libs/bus'
+import { deepClone, s8 } from '@meta2d/core'
+import nezhaColor from '@/components/common/nezhaColor'
+import meta2dSelectImage from '@/components/common/project/meta2d/meta2dSelectImage'
 export default {
  name: 'meta2dCanvas',
  props: {
@@ -52,28 +95,98 @@ export default {
    meta2dId: {}
  },
  components: {
-    draggable
+    draggable,
+    nezhaColor,
+    meta2dSelectImage
  },
  data () {
    return {
-      elements: []
+      elements: [],
+      background: '#ffffff00',
+      bkImage: '',
+      bkImageId: ''
    }
  },
  mounted () {
    this.elements = getTopology(this.meta2dId).store.data.pens
+    this.background = getTopology(this.meta2dId).store.data.background || '#ffffff00'
+    this.bkImage = getTopology(this.meta2dId).store.data.bkImage || ''
  },
  methods: {
    updateShow (key) {
      this.canvasProps[key] = !this.canvasProps[key]
    },
    penActive (item) {
-      console.log(item.id)
-      getTopology(this.meta2dId).active(item)
+      this.$emit('changeActiveName')
+      getTopology(this.meta2dId).active([item])
+      getTopology(this.meta2dId).setValue(item)
+      bus.$emit('changeSelectPens', [item])
+    },
+    penChange (item, key) {
+      const obj = {
+        id: item.id
+      }
+      if (key === 'visible') {
+        obj.visible = !item.visible
+        if (!item.visible) {
+          if (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)
+          bus.$emit('changeSelectPens', [item])
+        }
+      }
+      if (key === 'locked') {
+        if (!item.locked) {
+          obj.locked = 10
+          if (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)
+          bus.$emit('changeSelectPens', [item])
+        }
+      }
+      getTopology(this.meta2dId).setValue(obj)
+    },
+    copyPen (item) {
+      const obj = deepClone(item)
+      obj.id = s8()
+      obj.x += item.width / 2
+      obj.y += item.height / 2
+      getTopology(this.meta2dId).addPen(obj, true)
+    },
+    delPen (item) {
+      if (item.id === getTopology(this.meta2dId).store.active[0].id) {
+        bus.$emit('changeSelectPens', [])
+      }
+      getTopology(this.meta2dId).delete([item])
+    },
+    backgroundChange (val) {
+      this.background = val
+      getTopology(this.meta2dId).setBackgroundColor(val)
+      getTopology(this.meta2dId).render()
+    },
+    updateImage (image) {
+      this.bkImage = image.image
+      this.bkImageId = image.id
+      getTopology(this.meta2dId).setBackgroundImage(image.image)
+      console.log(getTopology(this.meta2dId).data())
    }
  }
 }
 </script>

-<style scoped>
-
+<style scoped lang="scss">
+.pen-tools-item {
+  margin-right: 5px;
+  fontSize:17px;
+  cursor: pointer;
+}
 </style>
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -1,27 +1,56 @@
 <template>
-  <div class="topo-header">
-    <div v-if="!isChart"> {{project && project.name}} </div>
-    <div class="tools-left">
+  <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
-          class="icon"
          draggable="true"
          @dragstart.stop="onDragstart($event)"
          @click="onTouchstart($event)"
        >
-          <div>Rectangle</div>
+          <i class="nz-icon nz-icon-zhengfangxing" />
        </div>
      </div>
      <div class="tools-left-draw" @click="setDrawPen()">
-        钢笔
+          <i  class="nz-icon nz-icon-compare" />
      </div>
    </div>
-    <div>
-      <button v-has="'project_edit'" v-if="!isChart" class="top-tool-btn margin-r-10" type="button" @click="editMeta2d" :title="$t('overall.edit')">
+    <div v-if="!editFlag" class="top-tool-right">
+      <pick-time
+        v-show="!editFlag"
+        ref="pickTime"
+        v-model="searchTime"
+        :refresh-data-func="dateChange"
+        :showTimePicker="false"
+        :use-chart-unit="false"
+        class="pickTime margin-r-10">
+      </pick-time>
+      <button v-has="'project_edit'" 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 class="top-tool-btn" type="button" @click="changeScreen" :title="topoScreen? $t('dashboard.screen.exit') : $t('dashboard.screen')">
+        <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
+      </button>
+    </div>
+    <div v-if="editFlag" class="top-tool-right float-right">
+      <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
+              style="margin-right: 20px"
+      >
+        {{$t('overall.preview')}}
+      </button>
+      <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
+              style="margin-right: 20px"
+      >
+        {{$t('project.topology.previewExit')}}
+      </button>
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
+              :disabled="prevent_opt.save"
+              :class="{'nz-btn-disabled':prevent_opt.save}"
+              style="margin-right: 20px">
+        {{$t('overall.save')}}
+      </button>
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
+        {{$t('project.topology.exit')}}
      </button>
    </div>
  </div>
@@ -31,6 +60,7 @@
 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";
 export default {
  name: 'meta2dHeader',
  mixins: [topoUtil],
@@ -40,11 +70,14 @@ export default {
      type: Boolean,
      default: false
    },
-    project: {}
+    project: {},
+    editFlag: {}
  },
  data () {
    return {
-      topoScreenState: ''
+      topoScreenState: '',
+      isPreview: false,
+      searchTime: bus.getTimezontDateRange(),
    }
  },
  computed: {
@@ -129,11 +162,29 @@ export default {
          type: 'error'
        })
      })
+    },
+    dateChange () {
+
+    },
+    changeScreen () {
+      this.$store.commit('setShowTopoScreen', !this.topoScreen)
+    },
+    previewTopology () {
+
+    },
+    previewExit () {
+
+    },
+    cancelTopology () {
+      this.$emit('exitEdit', true)
    }
  }
 }
 </script>

 <style scoped lang="scss">
-
+.tools-left-drag{
+  margin-left: 10px;
+  margin-right: 10px;
+}
 </style>
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="meta2d-box" v-my-loading="meta2dLoading">
-    <meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" @edit="editFlag = true" @exitEdit="exitEdit"/>
+  <div class="meta2d-box list-page" v-my-loading="meta2dLoading">
+    <meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" :editFlag="editFlag" @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>
@@ -22,6 +22,7 @@ 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'
+import bus from '@/libs/bus'
 export default {
  name: 'meta2dMain',
  mixins: [meta2dMain, topoUtil],
@@ -50,6 +51,7 @@ export default {
  },
  mounted () {
    this.init()
+    bus.$on('changeSelectPens', this.pensActive)
  },
  methods: {

@@ -57,6 +59,7 @@ export default {
  beforeDestroy () {
    getTopology(this.meta2dId).destroy()
    setTopology(this.meta2dId, null)
+    bus.$off('changeSelectPens', this.pensActive)
  }

 }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
@@ -5,7 +5,7 @@
        <meta2dElement :selectPens.sync="selectPens" @change="change" :elements="elements"/>
      </el-tab-pane>
      <el-tab-pane label="canvas" name="canvas">
-        <meta2dCanvas :canvasProps="canvasProps" :meta2dId='meta2dId' ref ='meta2dCanvas'/>
+        <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"/>
@@ -41,14 +41,17 @@ export default {
  },
  watch: {
    selectPens (n) {
-      if (n.length === 1) {
+      if (n.length === 1 && this.isUpdate) {
        this.activeName = 'elements'
+      } else {
+        this.activeName = 'canvas'
      }
    }
  },
  data () {
    return {
      activeName: 'canvas',
+      isUpdate: true,
      canvasProps: {
        backGround: true
      },
@@ -75,7 +78,9 @@ export default {
        this.getQueryValues(this.$refs.meta2dData.elements, startTime, endTime)
      }
    },
-
+    changeActiveName () {
+      this.isUpdate = false
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
@@ -5,6 +5,10 @@
      <div v-else class="image-box image-box-null" />
    </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>
@@ -26,7 +30,8 @@ export default {
      tools: [],
      imgageLoading: false,
      iconArray: [],
-      selectBoxShow: false
+      selectBoxShow: false,
+      imageNull: ''
    }
  },
  mounted () {