图形化-设备监控

2022-08-01 09:05:45 +08:00
parent 01f0d56348
commit 4d562043d5
99 changed files with 5780 additions and 6 deletions
--- a/nladmin-ui/src/views/system/monitor/device/index.vue
+++ b/nladmin-ui/src/views/system/monitor/device/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-row>
+      <div id="container" className="container" />
+    </el-row>
+  </div>
+</template>
+
+<script>
+import crudStage from '@/api/logicflow/stage'
+import paramCrud from '@/api/system/param'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+
+import { LogicFlow } from '@logicflow/core'
+import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
+let data = {}
+let lf = ''
+export default {
+  name: 'MonitorDevice',
+  data() {
+    return {
+      stageParam: 'test', // 舞台参数
+      dialogDeviceMsgVisible: false,
+      device_code: null,
+      tops: '20vh',
+      stage_code: '',
+      stageSelectList: [],
+      arr: [], // 显示数组
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      dialogFormVisible4: false,
+      form: {
+        device_code: '',
+        hasGoodStatus: null,
+        barcode: '',
+        suspended: null,
+        material_type: '',
+        requireSucess: '',
+        fullrequireSucess: ''
+      },
+      allDeviceMsg: [],
+      msgTop: '200px',
+      msgLeft: '200px'
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    // 流程图初始化
+    init() {
+      // 初始化配置
+      lf = new LogicFlow({
+        overlapMode: 1,
+        container: document.querySelector('#container'), // 容器
+        // 画布配置
+        // width: window.innerWidth, // 宽度
+        height: window.innerHeight, // 高度
+        grid: { // 不用格子直接显示，使用背景
+          visible: false,
+          type: 'mesh',
+          size: 5
+        },
+        background: {
+          backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
+          backgroundRepeat: 'repeat'
+        },
+        adjustEdge: false,
+        adjustEdgeMiddle: false,
+        adjustEdgeStartAndEnd: false,
+        adjustNodePosition: false,
+        hideAnchors: true,
+        nodeTextEdit: false,
+        edgeTextEdit: false
+      })
+      lf.setTheme(
+        {
+          baseEdge: { strokeWidth: 1 },
+          baseNode: { strokeWidth: 1 },
+          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
+          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
+        }
+      )
+      // 注册自定义元素
+      registerCustomElement(lf)
+      // 删除默认的右键菜单
+      lf.extension.menu.setMenuConfig({
+        nodeMenu: false
+      })
+      lf.on('node:click', (data, e) => { // 鼠标点击节点
+        // 展开显示设备信息
+        console.log('1')
+      })
+      lf.on('node:contextmenu', (data, e, position) => { // 右键
+        console.log('2')
+      })
+      // 开始渲染
+      lf.render(data)
+      this.initStageData()
+    },
+    initStageData() {
+      // 获取舞台编码
+      paramCrud.getStageCodeByCode(this.stageParam).then(res => {
+        if (res.value !== undefined) {
+          crudStage.getNewStageDataByCode(res.value).then(res => {
+            data = JSON.parse(res.stage_data)
+            lf.render(data)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+html, body {
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped>
+.container {
+  background-color: #f8f9fa;
+  height: 100%;
+}
+.newDialog /deep/ .el-dialog__header {
+  padding: 1vh 1vw 0 1vw;
+}
+.newDialog /deep/ .el-dialog__body {
+  padding: 1vh 1vw;
+}
+.toolbar-sty {
+  position: absolute;
+  margin-top: 5px;
+  top: 0;
+  padding: 5px;
+  left: 30px;
+  height: 45px;
+  /*width: 310px;*/
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 10;
+  background: #e5e5e5;
+}
+</style>