WuXiDiKe/nladmin-ui/src/views/system/monitor/device/index.vue

<template>
  <div>
    <el-row>
      <div id="container" className="container" />
    </el-row>
  </div>
</template>

<script>
import crudStage from '@/api/logicflow/stage'
import paramCrud from '@/views/system/param/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() {
      // 获取舞台编码
      this.getValueByCode(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>