feat： topo重构（70%）

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%;

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;

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

@@ -17,17 +17,19 @@ export default {
   },
   methods: {
     reload () {
-      this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
+      if (this.currentProject.id) {
-        if (res.data && res.data.topo) {
+        this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
-          this.topoData = res.data.topo.topo || {}
+          if (res.data && res.data.topo) {
-          this.querysArray = res.data.topo.elements || []
+            this.topoData = res.data.topo.topo || {}
-          this.timeType = res.data.topo.timeType || 1
+            this.querysArray = res.data.topo.elements || []
-        } else {
+            this.timeType = res.data.topo.timeType || 1
-          this.topoData = {}
+          } else {
-          this.querysArray = []
+            this.topoData = {}
-          this.timeType = 1
+            this.querysArray = []
-        }
+            this.timeType = 1
-      })
+          }
+        })
+      }
     }
   }
 }

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',
+          background: pen.background || '#22222200',
-          color: '#222222ff',
+          color: pen.color || '#222222ff',
-          textColor: '#222222ff',
+          textColor: pen.textColor || '#222222ff',
           image: ''
         },
         imageId: '',
@@ -112,33 +120,39 @@ export default {
           legends: [] // {legend: '' , alias}
         }
       }
-      pen.isNz = true
+      pen.disableInput = pen.disableInput || true
-      pen.background = '#22222200'
+      pen.background = pen.background || '#22222200'
-      pen.textAlign = 'center'
+      pen.textAlign = pen.textAlign || 'center'
-      pen.textBaseline = 'middle'
+      pen.textBaseline = pen.textBaseline || 'middle'
-      pen.color = '#222222ff'
+      pen.color = pen.color || '#222222ff'
-      pen.textColor = '#222222ff'
+      pen.textColor = pen.textColor || '#222222ff'
-      pen.image = ''
+      pen.image = pen.image || ''
-      pen.imageId = ''
+      pen.imageId = pen.imageId || ''
-      pen.imageRatio = false
+      pen.imageRatio = pen.imageRatio || false
-      pen.ratio = false
+      pen.ratio = pen.ratio || false
-      pen.rotate = 0
+      pen.rotate = pen.rotate || 0
-      pen.globalAlpha = 1
+      pen.globalAlpha = pen.globalAlpha || 1
-      pen.borderType = 0
+      pen.borderType = pen.borderType || 0
-      pen.lineWidth = 1
+      pen.lineWidth = pen.lineWidth || 1
-      pen.lineDash = []
+      pen.lineDash = pen.lineDash || []
-      pen.borderRadius = 0
+      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',
+          animateColor: pen.animateColor || '#FA901CFF',
-          borderColor: '#22222200',
+          borderColor: pen.borderColor || '#22222200',
-          color: '#222222FF'
+          color: pen.color || '#222222FF'
         },
         valueMapping: [],
         legend: '',
@@ -146,27 +160,34 @@ export default {
         enable: {
           valueMapping: true,
           tooltip: true
-        },
+        }
       }
-      pen.disableInput = true
+      pen.disableInput = pen.disableInput || true
-      pen.lineAnimateType = 0
+      pen.lineAnimateType = pen.lineAnimateType || 0
-      pen.animateSpan = 1
+      pen.animateSpan = pen.animateSpan || 1
-      pen.animateReverse = false
+      pen.animateReverse = pen.animateReverse || false
-      pen.fromArrow = ''
+      pen.fromArrow = pen.fromArrow || ''
-      pen.animateColor = '#FA901CFF'
+      pen.animateColor = pen.animateColor || '#FA901CFF'
-      pen.borderColor = '#22222200'
+      pen.borderColor = pen.borderColor || '#22222200'
-      pen.borderWidth = 0
+      pen.borderWidth = pen.borderWidth || 0
-      pen.color = '#222222ff'
+      pen.color = pen.color || '#222222ff'
-      pen.toArrow = ''
+      pen.toArrow = pen.toArrow || ''
-      pen.borderType = 0
+      pen.borderType = pen.borderType || 0
-      pen.lineWidth = 1
+      pen.lineWidth = pen.lineWidth || 1
-      pen.lineDash = []
+      pen.lineDash = pen.lineDash || []
-      pen.isNz = true
+      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 () {
   }
 }

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,22 +37,42 @@
             v-model="elements"
             :scroll-sensitivity="150"
             :options="{
-                    dragClass:'drag-valueMapping-class',
+              dragClass:'drag-chart-class',
-                    fallbackClass:'fallback-class',
+              fallbackClass:'fallback-class',
-                    forceFallback:true,
+              forceFallback:true,
-                    ghostClass:'chart-ghost',
+              ghostClass:'chart-ghost',
-                    chosenClass:'choose-class',
+              chosenClass:'choose-class',
-                    scroll:true,
+              scroll:true,
-                    animation: 150,
+              filter: '.drag-disabled',
-                  }">
+              animation: 150,
-            <div v-for="item in elements" :key="item.id">
+              handle: '.drag-sort'
-            <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" />
+            <div v-for="item in elements" :key="item.id" @click.stop="penActive(item)">
-              <i v-else class="nz-icon nz-icon-compare" />
+              <div class="pen-tools" style="background: #999;margin-bottom: 10px;border-radius: 2px;display: flex;justify-content: space-between;padding: 3px 10px">
-              <span>
+                <span>
-                123123123
+                  <i v-if="item.type !== 1" class="nz-icon nz-icon-zhengfangxing" />
-              </span>
+                  <i v-else class="nz-icon nz-icon-compare" />
-            </div>
+                </span>
+                <span>
+                    <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>
           </draggable>
         </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)
+      this.$emit('changeActiveName')
-      getTopology(this.meta2dId).active(item)
+      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>

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

@@ -1,27 +1,56 @@
 <template>
-  <div class="topo-header">
+  <div class="topo-header top-tools">
-    <div v-if="!isChart"> {{project && project.name}} </div>
+    <div v-if="!isChart && !editFlag"> {{project && project.name}} </div>
-    <div class="tools-left">
+    <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>
+    <div v-if="!editFlag" class="top-tool-right">
-      <button v-has="'project_edit'" v-if="!isChart" class="top-tool-btn margin-r-10" type="button" @click="editMeta2d" :title="$t('overall.edit')">
+      <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')">
+      <button class="top-tool-btn" type="button" @click="changeScreen" :title="topoScreen? $t('dashboard.screen.exit') : $t('dashboard.screen')">
-        save
+        <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>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="meta2d-box" v-my-loading="meta2dLoading">
+  <div class="meta2d-box list-page" v-my-loading="meta2dLoading">
-    <meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" @edit="editFlag = true" @exitEdit="exitEdit"/>
+    <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)
   }
 
 }

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>

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 () {

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -100,7 +100,7 @@
 
         </span>
           <span class="float-right">
-          <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
+            <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
                   style="margin-right: 20px"
           >
              {{$t('overall.preview')}}
@@ -110,13 +110,13 @@
             >
              {{$t('project.topology.previewExit')}}
            </button>
-           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
+            <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
                    :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">
+            <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
              {{$t('project.topology.exit')}}
            </button>
          </span>