feat： 添加name 以及右键置顶，置底 复制和删除的功能

nezha-fronted/src/components/charts/diagram-chart.vue

@@ -41,7 +41,7 @@
         </div>
         <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
           <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <diagram style="height: 100%;width: 100%" :topoData="chartData.param.topo" :fromChart="true" :topologyIndexF="chartData.id" ref="diagram"/>
+            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" ref="diagram"/>
           </div>
         </div>
         <!--全屏-->
@@ -53,7 +53,7 @@
           </div>
           <div class="rich-text-screen-container"  >
             <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
-              <diagram :topoData="chartData.param.topo" :fromChart="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
+              <diagram :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
             </div>
           </div>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -67,7 +67,7 @@
 <script>
 import loading from '../common/loading'
 import 'quill/dist/quill.snow.css'
-import diagram from "@/components/common/ChartDiagram/diagram";
+import diagram from '@/components/common/ChartDiagram/diagram'
 export default {
   name: 'diagram-chart',
   components: {
@@ -96,7 +96,11 @@ export default {
   },
   data () {
     return {
-      data: {}, // 该图表信息,chartItem
+      data: {
+        param: {
+          topo: {}
+        }
+      }, // 该图表信息,chartItem
       noData: false,
       unit: {},
       text: '', // 保存信息
@@ -202,6 +206,7 @@ export default {
       this.firstShow = true // 展示操作按键
 
       this.panelIdInner = panelId
+      console.log(chartItem)
       this.data = chartItem
       this.text = chartItem.param.text
       this.screenText = chartItem.param.text

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -134,7 +134,7 @@
           </div>
           <div :class="['page',fromOverView?'overview-page':'']">
             <!--画布部分-->
-            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
+            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"  @contextmenu="onContextMenu($event)"></div>
             <!--设置属性-->
             <div v-if="editTopologyFlag&&toolShow.attr" class="props">
               <canvas-props ref="CanvasProps"
@@ -150,6 +150,9 @@
                             @notModuleIDArrChange="notModuleIDArrChange">
               </canvas-props>
             </div>
+            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag" :style="this.contextmenu">
+              <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
+            </div>
             <!--所有节点上的小图标-->
             <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
                  :key="index"
@@ -333,6 +336,7 @@ import endpointTable from '../project/popData/endpointTable'
 import topoTooltip from '../project/L5/topoTooltip'
 import { getMetricTypeValue } from '../js/tools'
 import bus from '../../../libs/bus'
+import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
 // 注册到画布
 registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
 registerNode('myCube', myCubec, myCubeAnchors, null, null)
@@ -476,7 +480,8 @@ export default {
     alertTable,
     assetTable,
     endpointTable,
-    topoTooltip
+    topoTooltip,
+    CanvasContextMenu
   },
   props: {
     topologyIndexF: {
@@ -523,6 +528,7 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
+        this.topologyLoading = true
         setTimeout(() => {
           this.init()
         }, 100)
@@ -549,6 +555,7 @@ export default {
     }
     document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
     window.addEventListener('resize', this.winResize)
+    window.addEventListener('click', this.contextmenuNone)
   },
   methods: {
     init () {
@@ -1835,6 +1842,13 @@ export default {
         this.getNodesArr()
       }, 100)
     },
+    contextmenuNone () {
+      this.contextmenu = {
+        left: null,
+        top: null,
+        bottom: null
+      }
+    },
     canvasMove (e) { // 画布上的移动 确定tooltip的位置
       if (this.tooltipPosition.show) {
         return
@@ -1919,6 +1933,22 @@ export default {
     },
     penToBottom () {
       getTopology(this.topologyIndex).bottom()
+    },
+    onContextMenu (event) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (event.clientY + 360 < document.body.clientHeight) {
+        this.contextmenu = {
+          left: event.clientX + 'px',
+          top: event.clientY + 'px'
+        }
+      } else {
+        this.contextmenu = {
+          left: event.clientX + 'px',
+          bottom: document.body.clientHeight - event.clientY + 'px'
+        }
+      }
     }
   },
   destroyed () {
@@ -1930,6 +1960,7 @@ export default {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
     }
     window.removeEventListener('resize', this.winResize)
+    window.removeEventListener('resize', this.contextmenuNone)
   }
 }
 </script>
@@ -2607,4 +2638,8 @@ export default {
   .h100{
     height: calc(100% - 30px) !important;
   }
+  .context-menu {
+    position: fixed;
+    z-index: 10;
+  }
 </style>

nezha-fronted/src/components/common/language/cn.js

@@ -1432,7 +1432,7 @@ const cn = {
       unitError: '请选择对应的目录',
       imgError: '请上传图片',
       folder: '目录',
-      selMod: '请个所有节点绑定module',
+      selMod: '请为所有节点绑定module',
       none: '无',
       previewExit: '继续编辑'
     },

nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue

@@ -7,74 +7,39 @@
       <a :class="{disabled:!props.node && !props.nodes}" @click="onBottom()">置底</a>
     </div>
     <div class="line"></div>
-    <div v-if="props.nodes">
-      <a @click="onCombine()">组合</a>
-      <div>
-        <a @click="onCombine(true)">包含</a>
-      </div>
-    </div>
-    <div v-if="props.node && props.node.name === 'combine'">
-      <a @click="onUncombine()">取消组合/包含</a>
-    </div>
-    <div>
-      <a
-        :class="{disabled:!props.node && !props.nodes}"
-        @click="onLock()"
-      >{{ props.locked ? '解锁' : '锁定' }}</a>
-    </div>
-    <div class="line"></div>
     <div>
       <a :class="{disabled:!props.node && !props.nodes && !props.line}" @click="onDel()">删除</a>
     </div>
     <div class="line"></div>
     <div>
-      <a @click="canvas.undo()" class="flex">
+      <a @click="canvascut()" class="flex">
-        <span class="full">撤消</span>
-        <span class="ml50">Ctrl + Z</span>
-      </a>
-    </div>
-    <div>
-      <a @click="canvas.redo()">
-        恢复
-        <span class="ml50">Ctrl + Shift+ Z</span>
-      </a>
-    </div>
-    <div class="line"></div>
-    <div>
-      <a @click="canvas.cut()" class="flex">
         <span class="full">剪切</span>
         <span class="ml50">Ctrl + X</span>
       </a>
     </div>
     <div>
-      <a @click="canvas.copy()" class="flex">
+      <a @click="canvascopy()" class="flex">
         <span class="full">复制</span>
         <span class="ml50">Ctrl + C</span>
       </a>
     </div>
     <div>
-      <a @click="canvas.paste()" class="flex">
+      <a @click="canvaspaste()" class="flex">
         <span class="full">粘贴</span>
         <span class="ml50">Ctrl + V</span>
       </a>
     </div>
-    <div class="line"></div>
-    <div>
-      <a :class="{disabled:!props.node || !props.node.image}" @click="onCopyImage()" class="flex">
-        <span class="full">复制节点图片地址</span>
-      </a>
-    </div>
   </div>
 </template>
 
 <script >
+import { getTopology } from '../../js/common'
 export default {
   data () {
     return {}
   },
   props: {
-    canvas: {
+    index: {
-      type: Object,
       require: true
     },
     props: {
@@ -85,46 +50,46 @@ export default {
   methods: {
     onTop () {
       if (this.props.node) {
-        this.canvas.top(this.props.node)
+        getTopology(this.index).top(this.props.node)
       }
 
       if (this.props.nodes) {
         for (const item of this.props.nodes) {
-          this.canvas.top(item)
+          getTopology(this.index).top(item)
         }
       }
 
-      this.canvas.render()
+      getTopology(this.index).render()
     },
 
     onBottom () {
       if (this.props.node) {
-        this.canvas.bottom(this.props.node)
+        getTopology(this.index).bottom(this.props.node)
       }
 
       if (this.props.nodes) {
         for (const item of this.props.nodes) {
-          this.canvas.bottom(item)
+          getTopology(this.index).bottom(item)
         }
       }
 
-      this.canvas.render()
+      getTopology(this.index).render()
     },
 
     onCombine (stand) {
       if (!this.props.nodes) {
         return
       }
-      this.canvas.combine(this.props.nodes, stand)
+      getTopology(this.index).combine(this.props.nodes, stand)
-      this.canvas.render()
+      getTopology(this.index).render()
     },
 
     onUncombine () {
       if (!this.props.node) {
         return
       }
-      this.canvas.uncombine(this.props.node)
+      getTopology(this.index).uncombine(this.props.node)
-      this.canvas.render()
+      getTopology(this.index).render()
     },
 
     onLock () {
@@ -144,12 +109,21 @@ export default {
           item.locked = this.props.locked
         }
       }
-      this.canvas.render(true)
+      getTopology(this.index).render(true)
     },
 
     onDel () {
-      this.canvas.delete()
+      getTopology(this.index).delete()
-    }
+    },
+    canvascut () {
+      getTopology(this.index).cut()
+    },
+    canvascopy () {
+      getTopology(this.index).copy()
+    },
+    canvaspaste () {
+      getTopology(this.index).paste()
+    },
   }
 }
 </script>

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -22,6 +22,9 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item v-if="!selection.pen.type&&fromDiagram" :label="$t('project.topology.name')" class="full-form-item" prop="type">
+            <el-input v-model="selection.pen.data.title" @change="changeTitle" class="input" size="small"></el-input>
+          </el-form-item>
 <!--          &lt;!&ndash;iconToolState&ndash;&gt;-->
 <!--          <el-form-item :label="'Icon state'" class="half-form-item" prop="type" v-if="!selection.pen.type">-->
 <!--            <el-switch-->
@@ -98,7 +101,7 @@
           <div class="tooltip-box">
             <!--title-->
             <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
-              <el-input v-model="selection.pen.data.title" @change="changeTitle" class="input" size="small"></el-input>
+              <el-input v-model="selection.pen.data.chartTitle" @change="changeTitle" class="input" size="small"></el-input>
             </el-form-item>
             <!--chart aggregation-->
             <el-form-item :label="$t('dashboard.panel.chartForm.aggregation')" class="half-form-item" prop="type">

nezha-fronted/src/components/common/project/L5/topoTooltip.vue

@@ -81,7 +81,7 @@ export default {
       this.tempDom.width = 250
     },
     process (item) {
-      const chartData = { ...this.chartDataTemp, ...item }
+      const chartData = { ...this.chartDataTemp, ...item, name: item.chartTitle }
       chartData.elements = []
       chartData.expressArr.forEach((item1, index) => {
         chartData.elements.push({

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

@@ -147,7 +147,7 @@
           </div>
           <div :class="['page',fromOverView?'overview-page':'']" :style="`border: 1px solid ${theme.rightBoxBorderColor};`">
             <!--画布部分-->
-            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
+            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>
             <!--设置属性-->
             <div v-if="editTopologyFlag&&toolShow.attr" class="props">
               <canvas-props ref="CanvasProps"
@@ -162,6 +162,9 @@
                             @notModuleIDArrChange="notModuleIDArrChange">
               </canvas-props>
             </div>
+            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0" :style="this.contextmenu">
+              <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
+            </div>
             <!--所有节点上的小图标-->
             <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
                  :key="index"
@@ -354,6 +357,7 @@ import {
 import { getTopology, setTopology } from '../js/common'
 import CanvasProps from './L5/CanvasProps'
 import topologyTopTool from './L5//topologyTopTool'
+import CanvasContextMenu from './L5/CanvasContextMenu'
 import popDataMain from './popData/Main'
 import popDataInfo from './popData/Info'
 import alertTable from './popData/alertTable'
@@ -506,7 +510,8 @@ export default {
     assetTable,
     endpointTable,
     topoTooltip,
-    topologyPrev
+    topologyPrev,
+    CanvasContextMenu
   },
   props: {
     topologyIndexF: {
@@ -610,15 +615,6 @@ export default {
   },
   created () {
     canvasRegister()
-    if (process.client) {
-      document.onclick = event => {
-        this.contextmenu = {
-          left: null,
-          top: null,
-          bottom: null
-        }
-      }
-    }
   },
   mounted () {
     if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
@@ -626,6 +622,7 @@ export default {
     }
     document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
     window.addEventListener('resize', this.winResize)
+    window.addEventListener('click', this.contextmenuNone)
   },
   methods: {
     init () {
@@ -1970,6 +1967,13 @@ export default {
         this.getNodesArr()
       }, 100)
     },
+    contextmenuNone () {
+      this.contextmenu = {
+        left: null,
+        top: null,
+        bottom: null
+      }
+    },
     canvasMove (e) { // 画布上的移动 确定tooltip的位置
       if (this.tooltipPosition.show) {
         return
@@ -2057,6 +2061,22 @@ export default {
     },
     changeScreen () {
       this.$store.commit('setShowTopoScreen', !this.topoScreen)
+    },
+    onContextMenu (event) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (event.clientY + 360 < document.body.clientHeight) {
+        this.contextmenu = {
+          left: event.clientX + 'px',
+          top: event.clientY + 'px'
+        }
+      } else {
+        this.contextmenu = {
+          left: event.clientX + 'px',
+          bottom: document.body.clientHeight - event.clientY + 'px'
+        }
+      }
     }
   },
   destroyed () {
@@ -2068,6 +2088,7 @@ export default {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
     }
     window.removeEventListener('resize', this.winResize)
+    window.removeEventListener('resize', this.contextmenuNone)
   }
 }
 </script>
@@ -2738,4 +2759,8 @@ export default {
   /deep/ .el-collapse-item__arrow{
     display: none;
   }
+  .context-menu {
+    position: fixed;
+    z-index: 10;
+  }
 </style>