feat: 拓扑图 - 自适应高宽 & 标签页图标修改

packages/cc-topology/src/behavior/click-event-edit.js

@@ -16,7 +16,7 @@ export default {
   sendThis, // 暴露函数
   name: 'click-event-edit',
   options: {
-    getEvents () {
+    getEvents() {
       return {
         'node:click': 'onNodeClick',
         'node:contextmenu': 'onNodeRightClick',
@@ -27,7 +27,7 @@ export default {
         'canvas:click': 'onCanvasClick'
       }
     },
-    onNodeClick (event) {
+    onNodeClick(event) {
       // todo..."selected"是g6自带的状态，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态
       // let clickNode = event.item;
       // clickNode.setState('selected', !clickNode.hasState('selected'));
@@ -35,19 +35,19 @@ export default {
       vm.rightMenuShow = false
       this.updateVmData(event)
     },
-    onNodeRightClick (event) {
-      let graph = vm.graph
-      let clickNode = event.item
-      let clickNodeModel = clickNode.getModel()
-      let selectedNodes = graph.findAllByState('node', 'selected')
-      let selectedNodeIds = selectedNodes.map(item => {
+    onNodeRightClick(event) {
+      const graph = vm.graph
+      const clickNode = event.item
+      const clickNodeModel = clickNode.getModel()
+      const selectedNodes = graph.findAllByState('node', 'selected')
+      const selectedNodeIds = selectedNodes.map(item => {
         return item.getModel().id
       })
       vm.selectedNode = clickNode
       // 如果当前点击节点是之前选中的某个节点，就进行下面的处理
       if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) {
         vm.rightMenuShow = true
-        let rightMenu = vm.$refs.rightMenu
+        const rightMenu = vm.$refs.rightMenu
         rightMenu.style.left = event.clientX + 'px'
         rightMenu.style.top = event.clientY + 'px'
       } else {
@@ -64,17 +64,17 @@ export default {
       }
       graph.paint()
     },
-    onEdgeClick (event) {
-      let clickEdge = event.item
+    onEdgeClick(event) {
+      const clickEdge = event.item
       clickEdge.setState('selected', !clickEdge.hasState('selected'))
       vm.currentFocus = 'edge'
       this.updateVmData(event)
     },
-    onEdgeRightClick (event) {
-      let graph = vm.graph
-      let clickEdge = event.item
-      let clickEdgeModel = clickEdge.getModel()
-      let selectedEdges = graph.findAllByState('edge', 'selected')
+    onEdgeRightClick(event) {
+      const graph = vm.graph
+      const clickEdge = event.item
+      const clickEdgeModel = clickEdge.getModel()
+      const selectedEdges = graph.findAllByState('edge', 'selected')
       // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理
       if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) {
         // 先取消所有节点的选中状态
@@ -88,31 +88,31 @@ export default {
       }
       // let point = { x: event.x, y: event.y }
     },
-    onComboClick (event) {
+    onComboClick(event) {
       vm.currentFocus = 'combo'
       this.updateVmData(event)
     },
-    onComboRightClick (event) {
+    onComboRightClick(event) {
       vm.rightMenuShow = true
-      let rightMenu = vm.$refs.rightMenu
+      const rightMenu = vm.$refs.rightMenu
       rightMenu.style.left = event.clientX + 'px'
       rightMenu.style.top = event.clientY + 'px'
       vm.currentFocus = 'combo'
       this.updateVmData(event)
     },
-    onCanvasClick () {
+    onCanvasClick() {
       vm.currentFocus = 'canvas'
       vm.rightMenuShow = false
     },
-    updateVmData (event) {
+    updateVmData(event) {
       if (event.item._cfg.type === 'node') {
         // 更新vm的data: selectedNode 和 selectedNodeParams
-        let clickNode = event.item
+        const clickNode = event.item
         if (clickNode.hasState('selected')) {
-          let clickNodeModel = clickNode.getModel()
+          const clickNodeModel = clickNode.getModel()
           vm.selectedNode = clickNode
-          let nodeAppConfig = { ...vm.nodeAppConfig }
-          Object.keys(nodeAppConfig).forEach(function (key) {
+          const nodeAppConfig = { ...vm.nodeAppConfig }
+          Object.keys(nodeAppConfig).forEach(function(key) {
             nodeAppConfig[key] = ''
           })
           vm.selectedNodeParams = {
@@ -122,12 +122,12 @@ export default {
         }
       } else if (event.item._cfg.type === 'edge') {
         // 更新vm的data: selectedEdge 和 selectedEdgeParams
-        let clickEdge = event.item
+        const clickEdge = event.item
         if (clickEdge.hasState('selected')) {
-          let clickEdgeModel = clickEdge.getModel()
+          const clickEdgeModel = clickEdge.getModel()
           vm.selectedEdge = clickEdge
-          let edgeAppConfig = { ...vm.edgeAppConfig }
-          Object.keys(edgeAppConfig).forEach(function (key) {
+          const edgeAppConfig = { ...vm.edgeAppConfig }
+          Object.keys(edgeAppConfig).forEach(function(key) {
             edgeAppConfig[key] = ''
           })
           vm.selectedEdgeParams = {
@@ -137,8 +137,8 @@ export default {
         }
       } else if (event.item._cfg.type === 'combo') {
         // 更新vm的data: selectedCombo 和 selectedComboParams
-        let clickCombo = event.item
-        let clickComboModel = clickCombo.getModel()
+        const clickCombo = event.item
+        const clickComboModel = clickCombo.getModel()
         vm.selectedCombo = clickCombo
         vm.selectedComboParams = {
           label: clickComboModel.label || '',

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>monitorLogo.png">
+    <link rel="icon" href="<%= BASE_URL %>rongchuanglogo.png">
 <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2011217_f70ptj9y4oc.css">-->
 <!--    <title><%= webpackConfig.name %></title>-->
     <title>网络设备监控管理平台</title>

src/views/demos/topology.vue

@@ -632,7 +632,10 @@ export default {
 
 <style lang="scss" scoped>
 .el-container {
-  height: 900px!important;
+  position: absolute;
+  width: calc(100vw - 228px);
+  height: calc(92.4vh - 95px);
+  padding: 0 10px;
 
   .el-header {
     line-height: 60px;