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

2021-06-30 16:11:37 +08:00
parent 3a414f89a0
commit 523d9f7e45
7 changed files with 115 additions and 73 deletions
--- a/nezha-fronted/src/components/charts/diagram-chart.vue
+++ b/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
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1432,7 +1432,7 @@ const cn = {
      unitError: '请选择对应的目录',
      imgError: '请上传图片',
      folder: '目录',
-      selMod: '请个所有节点绑定module',
+      selMod: '请为所有节点绑定module',
      none: '无',
      previewExit: '继续编辑'
    },
--- a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
+++ b/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">
-        <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">
+      <a @click="canvascut()" 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: {
-      type: Object,
+    index: {
      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)
-      this.canvas.render()
+      getTopology(this.index).combine(this.props.nodes, stand)
+      getTopology(this.index).render()
    },

    onUncombine () {
      if (!this.props.node) {
        return
      }
-      this.canvas.uncombine(this.props.node)
-      this.canvas.render()
+      getTopology(this.index).uncombine(this.props.node)
+      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>
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/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">
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/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({
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/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>