'init'

src/views/outView/VisualCreate.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-02-18 09:54:16
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-02-21 11:13:08
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\outView\VisualCreate.vue
+-->
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-11 19:50:03
+ * @Description:
+-->
+<template>
+  <div class="visual-create-container">
+    <div class="back-to-home" @click="back">返回</div>
+    <div id="visual-create-container" :height="windowHeight / 1.5 + 'px'" :width="windowWidth / 2 + 'px'" />
+  </div>
+</template>
+
+<script>
+import { MetricFlow } from '@/utils/metricflow'
+
+export default {
+  name: 'VisualCreate',
+  data() {
+    return {
+      metricFlow: null,
+      nodeList: [{
+        'id': 'primaryKey',
+        'title': { 'name': '运行时间统计' },
+        'data': [
+          { 'name': '方法：IndexController#method1' },
+          { 'name': '平均耗时：0.333ms' }
+        ],
+        'x': 20,
+        'y': 200
+      }, {
+        'id': 'primaryKey2',
+        'from': 'primaryKey',
+        'title': { 'name': '运行时间统计' },
+        'data': [
+          { 'name': '方法：IndexController#method1' },
+          { 'name': '平均耗时：0.333ms' }
+        ],
+        'x': 300,
+        'y': 200
+      }],
+      node: [],
+      windowHeight: 0,
+      windowWidth: 0,
+      changeNow: false
+    }
+  },
+  mounted() {
+    this.windowHeight = document.body.offsetHeight - 20
+    this.windowWidth = document.body.offsetWidth - 16
+    this.$nextTick(() => {
+      this.createSvg()
+      window.addEventListener('resize', this.resize)
+    })
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    createSvg() {
+      if (!this.changeNow) {
+        this.metricFlow = MetricFlow('visual-create-container')
+        this.node = []
+        this.nodeList.map(item => {
+          this.node.push(this.metricFlow.createNode(item, item.x, item.y))
+        })
+      }
+    },
+    removeSvg() {
+      const methods = document.getElementById('methods')
+      const svgBack = document.getElementById('svgBack')
+      methods.remove()
+      svgBack.remove()
+    },
+    back() {
+      this.$router.go(-1)
+    },
+    resize() {
+      this.windowHeight = document.body.offsetHeight - 20
+      this.windowWidth = document.body.offsetWidth - 16
+      if (!this.changeNow) {
+        this.removeSvg()
+        this.changeNow = true
+        setTimeout(() => {
+          this.changeNow = false
+          this.createSvg()
+        }, 100)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.visual-create-container {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  #visual-create-container {
+    padding: 8px;
+  }
+  .back-to-home {
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    cursor: pointer;
+  }
+}
+</style>