全屏

src/charts/initChart.vue

@@ -59,7 +59,7 @@ export default {
         this.resizeObserver = null
       }
       if (this.chart) {
-        this.chart.getEl().dispose()
+        this.chart.dispose()
         this.chart = null
       }
     },

src/utils/fullscreen.js

@@ -0,0 +1,55 @@
+// 进入全屏
+export const requestFullscreen = (element) => {
+  if (element.requestFullscreen) {
+    element.requestFullscreen()
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen()
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen()
+  }
+}
+
+// 退出全屏
+export const exitFullscreen = () => {
+  if (!document) {
+    return
+  }
+
+  if (!isFullscreen()) {
+    return
+  }
+
+  if (document.exitFullscreen) {
+    document.exitFullscreen()
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen()
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen()
+  }
+}
+
+// 检测全屏状态
+export const isFullscreen = (element) => {
+  if (!document) return false
+  return (
+    (document.fullscreenElement === element) ||
+    (document.webkitFullscreenElement === element) ||
+    (document.msFullscreenElement === element)
+  )
+}
+
+/**
+ * 监听 ESC 键退出全屏
+ */
+export const listenForEscExit = (fn) => {
+  if (!document) return
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      fn()
+      document.removeEventListener('keydown', handleKeyDown) // 移除监听
+    }
+  }
+
+  document.addEventListener('keydown', handleKeyDown)
+}

src/views/dataBook/components/mGraph.vue

@@ -237,7 +237,7 @@ export default {
           className: 'labelNode',
           ...NODES_SIZE
         },
-        meta: {
+        meta: { // 元数据
           color: defaultNodeColor,
           title: '元数据',
           className: '',
@@ -307,10 +307,10 @@ export default {
         this.graphOptions.downloadImageFileName = data.rootId ?? ''
 
         data.nodes.forEach(ele => {
-          if (!this.config[ele.type]) {
+          if (!this.config[ele.node_type]) {
             return
           }
-          Object.assign(ele, this.config[ele.type])
+          Object.assign(ele, this.config[ele.node_type])
         })
 
         data.lines.forEach(ele => {

src/views/dataChart/dataChartEdit.vue

@@ -12,7 +12,16 @@
     </div>
 
     <div class="chart-content d-flex heightFull">
-      <div class="chart-content-show heightFull mr-3 overflow-hidden" ref="box">
+      <div class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
+        <div v-if="!empty" class="position-absolute" style="right: 10px; top: 80px; z-index: 999">
+          <v-btn
+              icon
+              color="primary"
+              @click="setFullscreen"
+            >
+              <v-icon>{{ fullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
+            </v-btn>
+        </div>
         <MEmpty v-if="empty"></MEmpty>
         <InitChart ref="chart" class="heightFull widthFull"></InitChart>
       </div>
@@ -28,6 +37,10 @@ import * as Charts from './utils/options.js'
 import DataChartEditChat from './dataChartEditChat.vue'
 import InitChart from '@/charts/initChart'
 import { cloneDeep } from 'lodash'
+import {
+  requestFullscreen,
+  exitFullscreen
+} from '@/utils/fullscreen'
 export default {
   name: 'dataChartEdit',
   components: {
@@ -37,6 +50,7 @@ export default {
   },
   data () {
     return {
+      fullscreen: false,
       Charts,
       chart: null,
       chartsOpt: {
@@ -61,6 +75,15 @@ export default {
       this.chartsOpt.key = key
       this.setData()
     },
+    setFullscreen () {
+      this.fullscreen = !this.fullscreen
+      const $el = this.$refs.box
+      if (this.fullscreen) {
+        requestFullscreen($el)
+      } else {
+        exitFullscreen($el)
+      }
+    },
     onRender ({ type, data }) {
       this.chartsOpt.config.xAxisData = type
       this.chartsOpt.data = data
@@ -145,4 +168,12 @@ export default {
     }
   }
 }
+.position {
+  &-relative {
+    position: relative;
+  }
+  &-absolute {
+    position: absolute;
+  }
+}
 </style>