From 68e6c50defd99a8014d6e20281f1d206c6363c63 Mon Sep 17 00:00:00 2001
From: "20932067@zju.edu.cn" <Clay>
Date: Tue, 11 May 2021 11:57:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0er-=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/top/demo-topology.vue    |  18 ++
 .../packages/topology/src/node/er-table.js    |  21 +++
 packages/topology.vue                         | 176 ++++++++++++++++++
 3 files changed, 215 insertions(+)
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
 create mode 100644 packages/topology.vue

diff --git a/hchyun-ui/src/views/system/top/demo-topology.vue b/hchyun-ui/src/views/system/top/demo-topology.vue
index 6aacb23..5dc1759 100644
--- a/hchyun-ui/src/views/system/top/demo-topology.vue
+++ b/hchyun-ui/src/views/system/top/demo-topology.vue
@@ -27,6 +27,24 @@ export default {
     return {
       graphData: {
         nodes: [
+          // {
+          //   id: "job",
+          //   label: "Job",
+          //   type:'base',
+          //   attrs: [{
+          //     key: "id",
+          //     type: "number(3)"
+          //   },
+          //     {
+          //       key: "title",
+          //       type: "varchar(255)"
+          //     },
+          //     {
+          //       key: "level",
+          //       type: "number(3)"
+          //     }
+          //   ]
+          // },
           {
             id: 'client-01',
             x: -95,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
new file mode 100644
index 0000000..eb7feb1
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
@@ -0,0 +1,21 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 节点基础方法
+ */
+
+import utils from '../utils'
+
+export default {
+  setState(name, value, item) {
+    // 设置节点状态
+    utils.node.setState(name, value, item)
+    // 设置锚点状态
+    utils.anchor.setState(name, value, item)
+  },
+  // 绘制后附加锚点
+  afterDraw(cfg, group) {
+    // 绘制锚点
+    utils.anchor.draw(cfg, group)
+  }
+}
diff --git a/packages/topology.vue b/packages/topology.vue
new file mode 100644
index 0000000..0f66c1b
--- /dev/null
+++ b/packages/topology.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="demo-topology">
+    <cc-topology
+        ref="topology"
+        :graph-data="graphData"
+        :node-app-config="nodeAppConfig"
+        :edge-app-config="edgeAppConfig"
+        :graph-mode-config="graphModeConfig"
+        :node-type-list="nodeTypeList"
+        @doAutoRefresh="doAutoRefresh"
+        @doManualRefresh="doManualRefresh"
+        @doChangeMode="doChangeMode"
+        @doSaveData="doSaveData"
+        @submitDataHandler="submitDataHandler"
+        @reviewPassed="reviewPassed"
+        @reviewRejected="reviewRejected"
+    >
+    </cc-topology>
+  </div>
+</template>
+
+<script>
+/* 局部注册 */
+import {dataSave, dataParsing, review} from '@/api/top/top'
+import {CCTopology} from '../../../packages/index'
+import {deepClone} from '../../utils/index'
+
+export default {
+  name: 'DemoTopology',
+  components: {
+    'cc-topology': CCTopology
+  },
+  data() {
+    return {
+      eid: '',
+      graphData: {},
+      nodeTypeList: [],
+      // 节点配置
+      nodeAppConfig: {
+        videoAddress: '视频地址',
+        uuid: 'uuid',
+        ip: '设备ip',
+        gatewayType: '网关类型',
+        equipmentNum: '设备序号',
+        tubeNum: '管道号'
+      },
+      edgeAppConfig: {
+        threshold: '阈值'
+      },
+      // todo 配置预览
+      graphModeConfig: 'edit',
+      autoRefreshTimer: null
+    }
+  },
+  mounted() {
+    this.eid = this.$route.query.eid
+    let graphData = deepClone(this.graphData)
+    this.$refs.topology.initTopo(graphData)
+  },
+  methods: {
+    //todo
+    doAutoRefresh(interval) {
+      if (interval === -1) {
+        clearInterval(this.autoRefreshTimer)
+      } else {
+        clearInterval(this.autoRefreshTimer)
+        this.autoRefreshTimer = setInterval(() => {
+        }, interval)
+        this.$once('hook:beforeDestroy', () => {
+          clearInterval(this.autoRefreshTimer)
+        })
+      }
+    },
+    doChangeMode(graphMode) {
+      clearInterval(this.autoRefreshTimer)
+      let graphData = deepClone(this.graphData)
+      this.$refs.topology.changeGraphMode(graphData, graphMode)
+    },
+    doManualRefresh() {
+      // this.randomChange()
+    },
+    doSaveData(graphData) {
+      this.$XModal.confirm('您确定要保存该数据?').then(type => {
+        if (type === 'confirm') {
+          var data = {
+            id: this.eid,
+            dsdata: JSON.stringify(graphData)
+          }
+          this.uploadData(data)
+        }
+      })
+    },
+    submitDataHandler(graphData) {
+      this.$XModal.confirm('您确定要提交该数据?').then(type => {
+        if (type === 'confirm') {
+          var data = {
+            id: this.eid,
+            dsdata: JSON.stringify(graphData)
+          }
+          this.submitData(data)
+        }
+      })
+    },
+    submitData(data) {
+      dataParsing(data).then((res) => {
+        let data = res.data
+        if (data.code == 1) {
+          this.$XModal.message({message: data.msg, status: 'success'})
+          this.$router.replace('/pl')
+        } else {
+          this.$XModal.message({message: data.msg})
+        }
+      })
+    },
+    reviewPassed(state) {
+      this.$XModal.confirm('您确定要通过该项目?').then(type => {
+        if (type === 'confirm') {
+          var data = {
+            id: this.eid,
+            state: state
+          }
+          this.uploadReview(data)
+        }
+      })
+    },
+    reviewRejected(state) {
+      this.$XModal.confirm('您确定要拒绝该项目?').then(type => {
+        if (type === 'confirm') {
+          var data = {
+            id: this.eid,
+            state: state
+          }
+          this.uploadReview(data)
+        }
+      })
+    },
+    uploadReview(data) {
+      var vm = this
+      review(data).then((res) => {
+        let data = res.data
+        if (data.code == 1) {
+          this.$XModal.message({message: data.msg, status: 'success'})
+          vm.$router.replace('/pl')
+        } else {
+          this.$XModal.message({message: data.msg})
+        }
+      })
+    },
+    uploadData(datas) {
+      dataSave(datas).then((res) => {
+        let data = res.data
+        if (data.code == 1) {
+          this.$XModal.message({message: data.msg, status: 'success'})
+          // vm.$router.replace('/pl')
+        } else {
+          this.$XModal.message({message: data.msg})
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-topology {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+html {
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+</style>