{"remainingRequest":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\src\\views\\system\\logicflow\\editor\\components\\Diagram.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\src\\views\\system\\logicflow\\editor\\components\\Diagram.vue","mtime":1732871026743},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":1732872825017},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1732872825835}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport LogicFlow from '@logicflow/core'\r\nimport { SelectionSelect } from '@logicflow/extension'\r\nimport '@logicflow/core/dist/style/index.css'\r\nimport '@logicflow/extension/lib/style/index.css'\r\nimport DiagramToolbar from './DiagramToolbar.vue'\r\nimport DiagramSidebar from './DiagramSidebar.vue'\r\nimport PropertyPanel from './PropertyPanel.vue'\r\nimport { registerCustomElement } from './node'\r\nimport crudStage from '@/api/logicflow/stage'\r\n\r\nlet data = ''\r\nlet lf = ''\r\nexport default {\r\n  name: 'Diagram',\r\n  components: {\r\n    DiagramToolbar,\r\n    DiagramSidebar,\r\n    PropertyPanel\r\n  },\r\n  data() {\r\n    return {\r\n      sidebarWidth: 200,\r\n      diagramWidth: 0,\r\n      diagramHeight: 0,\r\n      lf: '',\r\n      filename: '',\r\n      activeNodes: [],\r\n      activeEdges: [],\r\n      properties: {},\r\n      defaultForm: {\r\n        stage_uuid: null,\r\n        stage_code: null,\r\n        stage_name: null,\r\n        grid_width: null,\r\n        grid_length: null,\r\n        stage_data: null,\r\n        is_active: '1',\r\n        is_delete: '0',\r\n        create_by: null,\r\n        create_time: null,\r\n        update_by: null,\r\n        update_time: null\r\n      },\r\n      showChoice: false,\r\n      transform: 0,\r\n      nodeSize: {\r\n        width: '',\r\n        heigh: ''\r\n      },\r\n      nodeObj: {} // 给子组件传递信息 -- 下拉框实时更新信息\r\n    }\r\n  },\r\n  mounted() {\r\n    if (window.location.search) {\r\n      const query = window.location.search.substring(1).split('&').reduce((map, kv) => {\r\n        const [key, value] = kv.split('=')\r\n        map[key] = value\r\n        return map\r\n      }, {})\r\n      this.filename = query.filename\r\n      const d = window.sessionStorage.getItem(this.filename)\r\n      if (d) {\r\n        data = JSON.parse(d)\r\n      }\r\n    }\r\n    this.initLogicFlow(data)\r\n  },\r\n  methods: {\r\n    initLogicFlow(data) {\r\n      // 引入框选插件\r\n      LogicFlow.use(SelectionSelect)\r\n      lf = new LogicFlow({\r\n        container: this.$refs.diagram,\r\n        overlapMode: 1,\r\n        autoWrap: true,\r\n        metaKeyMultipleSelected: true,\r\n        multipleSelectKey: 'shift',\r\n        keyboard: {\r\n          enabled: true\r\n        },\r\n        grid: {\r\n          visible: false,\r\n          size: 5\r\n        },\r\n        background: {\r\n          backgroundImage: 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=\")',\r\n          backgroundRepeat: 'repeat'\r\n        }\r\n      })\r\n      lf.setTheme(\r\n        {\r\n          baseEdge: { strokeWidth: 1 },\r\n          baseNode: { strokeWidth: 1 },\r\n          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },\r\n          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }\r\n        }\r\n      )\r\n      // 注册自定义元素\r\n      registerCustomElement(lf)\r\n      lf.setDefaultEdgeType('pro-polyline')\r\n\r\n      lf.render(data)\r\n      this.lf = lf\r\n      this.lf.on('selection:selected,node:click,blank:click,edge:click', () => { // 选择/点击事件\r\n        this.$nextTick(() => {\r\n          const { nodes, edges } = this.lf.getSelectElements()\r\n          this.$set(this, 'activeNodes', nodes)\r\n          this.activeNodes = nodes\r\n          this.activeEdges = edges\r\n          this.$_getProperty()\r\n        })\r\n      })\r\n    },\r\n    // 获取可以进行设置的属性\r\n    $_getProperty() {\r\n      // console.log('选中')\r\n      let properties = {}\r\n      const { nodes, edges } = this.lf.getSelectElements()\r\n      console.log('选中的节点', nodes)\r\n      // const graphModel = this.lf.graphModel\r\n      // console.log(graphModel)\r\n      // 只传第一个,以第一个为显示是否绑定设备等信息，其余显示正常不用处理\r\n      this.nodeObj = nodes[0]\r\n      nodes.forEach(node => {\r\n        if (node.type === 'html-node') {\r\n          this.showChoice = true\r\n        } else {\r\n          this.showChoice = false\r\n        }\r\n        // debugger\r\n        properties = { ...properties, ...node.properties }\r\n      })\r\n      edges.forEach(edge => {\r\n        properties = { ...properties, ...edge.properties }\r\n      })\r\n      this.properties = properties\r\n      return properties\r\n    },\r\n    $_dragInNode(type) {\r\n      // debugger\r\n      this.lf.dnd.startDrag({ // 拖拽创建结点\r\n        type\r\n      })\r\n    },\r\n    $_changeNodeFill(color) {\r\n      const { nodes } = this.lf.graphModel.getSelectElements()\r\n      nodes.forEach(({ id }) => {\r\n        this.lf.setProperties(id, {\r\n          fill: color\r\n        })\r\n      })\r\n    },\r\n    $_setStyle(item) {\r\n      this.activeNodes.forEach(({ id }) => {\r\n        // console.log(this.lf.graphModel.getNodeModelById(id))\r\n        console.log(this.lf.getProperties(id))\r\n        this.lf.setProperties(id, item)\r\n      })\r\n      this.activeEdges.forEach(({ id }) => {\r\n        this.lf.setProperties(id, item)\r\n      })\r\n      this.$_getProperty()\r\n    },\r\n    $_setZIndex(type) {\r\n      this.activeNodes.forEach(({ id }) => {\r\n        this.lf.setElementZIndex(id, type)\r\n      })\r\n      this.activeEdges.forEach(({ id }) => {\r\n        this.lf.setElementZIndex(id, type)\r\n      })\r\n    },\r\n    $_cleanGraph() { // 清空画布\r\n      data = []\r\n      lf.render(data)\r\n    },\r\n    $_saveGraph() { // 保存数据\r\n      // debugger\r\n      // console.log(this.defaultForm)\r\n      if (this.defaultForm.stage_code === null) {\r\n        this.$message.error('请选择舞台！')\r\n      } else {\r\n        const data = this.lf.getGraphData()\r\n        this.defaultForm.stage_data = JSON.stringify(data) // 转成string存储\r\n        crudStage.addNewStage(this.defaultForm).then(res => {\r\n          // console.log(res)\r\n          this.$notify({\r\n            title: '成功',\r\n            message: '保存成功',\r\n            type: 'success'\r\n          })\r\n        })\r\n      }\r\n      // 保存到本地存储\r\n      // localStorage.setItem('graphData', JSON.stringify(data))\r\n      // 保存到服务器\r\n      // console.log(data)\r\n      // 下载本地文件\r\n      // this.download(this.filename, JSON.stringify(data))\r\n    },\r\n    download(filename, text) { // 下载json文件\r\n      window.sessionStorage.setItem(filename, text)\r\n      const element = document.createElement('a')\r\n      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))\r\n      element.setAttribute('download', filename)\r\n      element.style.display = 'none'\r\n      document.body.appendChild(element)\r\n      element.click()\r\n      document.body.removeChild(element)\r\n    },\r\n    $_changeStage(val) { // 选择舞台的事件\r\n      this.defaultForm.stage_code = val\r\n      // 根据code获取数据\r\n      crudStage.getNewStageDataByCode(val).then(res => {\r\n        if (res) {\r\n          data = JSON.parse(res.stage_data)\r\n          lf.render(data)\r\n        }\r\n      })\r\n    },\r\n    $_verticalAlign() {\r\n      // 垂直对齐\r\n      const { nodes } = this.lf.getSelectElements()\r\n      let _x = 0 // 计算平均x\r\n      nodes.forEach(node => {\r\n        _x += node.x\r\n        if (node.type === 'html-node') {\r\n          this.showChoice = true\r\n        } else {\r\n          this.showChoice = false\r\n        }\r\n      })\r\n      _x = Math.round(_x / nodes.length)\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        graphModel.moveNode(node.id, (_x - node.x), 0, true)\r\n      })\r\n    },\r\n    $_horizontalAlign() {\r\n      // 水平对齐\r\n      const { nodes } = this.lf.getSelectElements()\r\n      let _y = 0 // 计算平均y\r\n      nodes.forEach(node => {\r\n        _y += node.y\r\n        if (node.type === 'html-node') {\r\n          this.showChoice = true\r\n        } else {\r\n          this.showChoice = false\r\n        }\r\n      })\r\n      _y = Math.round(_y / nodes.length)\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        graphModel.moveNode(node.id, 0, (_y - node.y), true)\r\n      })\r\n    },\r\n    $_leftAlign() {\r\n      // 左对齐\r\n      const { nodes } = this.lf.getSelectElements()\r\n      let min = 99999 // 最小值\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        // 计算原来的X\r\n        const _x = nodeModel.x - 1 / 2 * nodeModel._width\r\n        if (_x < min) {\r\n          min = _x\r\n        }\r\n      })\r\n      // 移动\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        const _x = nodeModel.x - 1 / 2 * nodeModel._width\r\n        console.log('R_x:', _x, ' nodeModel.x', nodeModel.x, ' nodeModel._width:', nodeModel._width)\r\n        graphModel.moveNode(node.id, min - _x, 0, true)\r\n      })\r\n    },\r\n    $_rightAlign() {\r\n      // 右对齐\r\n      const { nodes } = this.lf.getSelectElements()\r\n      let max = -99999 // 最大值\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        // 计算原来的X\r\n        const _x = nodeModel.x + 1 / 2 * nodeModel._width\r\n        if (_x > max) {\r\n          max = _x\r\n        }\r\n      })\r\n      // 移动\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        const _x = nodeModel.x + 1 / 2 * nodeModel._width\r\n        graphModel.moveNode(node.id, max - _x, 0, true)\r\n      })\r\n    },\r\n    $_upAlign() {\r\n      // 向上对齐\r\n      const { nodes } = this.lf.getSelectElements()\r\n      let min = 99999 // 最小值\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        // 计算原来的X\r\n        const _y = nodeModel.y - 1 / 2 * nodeModel._height\r\n        if (_y < min) {\r\n          min = _y\r\n        }\r\n      })\r\n      // 移动\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        const _y = nodeModel.y - 1 / 2 * nodeModel._height\r\n        graphModel.moveNode(node.id, 0, min - _y, true)\r\n      })\r\n    },\r\n    $_downAlign() {\r\n      // 向下\r\n      const { nodes } = this.lf.getSelectElements()\r\n      let max = -99999 // 最大值\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        // 计算原来的X\r\n        const _y = nodeModel.y + 1 / 2 * nodeModel._height\r\n        if (_y > max) {\r\n          max = _y\r\n        }\r\n      })\r\n      // 移动\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        const _y = nodeModel.y + 1 / 2 * nodeModel._height\r\n        graphModel.moveNode(node.id, 0, max - _y, true)\r\n      })\r\n    },\r\n    $_horizontalDistribution() {\r\n      const { nodes } = this.lf.getSelectElements()\r\n      if (nodes.length === 0) {\r\n        return\r\n      }\r\n      // 排序\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        for (let j = i + 1; j < nodes.length; j++) {\r\n          if (nodes[i].x > nodes[j].x) {\r\n            const tempX = nodes[i]\r\n            nodes[i] = nodes[j]\r\n            nodes[j] = tempX\r\n          }\r\n        }\r\n      }\r\n      // 计算距离 nodes[0].x 与 nodes[length-1].x是起始终点\r\n      let distance = 0 // 每个组件需要的间距\r\n      let htDistance = nodes[nodes.length - 1].x - nodes[0].x\r\n      const graphModel = this.lf.graphModel\r\n      let nodeModel = ''\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        if (i === 0 || i === nodes.length - 1) {\r\n          nodeModel = graphModel.getNodeModelById(nodes[i].id)\r\n          // 头尾直接/2扣掉就行\r\n          htDistance -= (Math.round(nodeModel._width / 2))\r\n        } else {\r\n          // 扣掉内部的width\r\n          nodeModel = graphModel.getNodeModelById(nodes[i].id)\r\n          htDistance -= nodeModel._width\r\n        }\r\n      }\r\n      distance = Math.round(htDistance / (nodes.length - 1))\r\n      // 挪动\r\n      for (let i = 1; i < nodes.length - 1; i++) {\r\n        // 本个的左边和上一个右边的距离\r\n        // 计算上一个的右边\r\n        nodeModel = graphModel.getNodeModelById(nodes[i - 1].id)\r\n        const frontX = nodeModel.x + Math.round(1 / 2 * nodeModel._width)\r\n        // 计算本个的左边\r\n        nodeModel = graphModel.getNodeModelById(nodes[i].id)\r\n        const backX = nodeModel.x - Math.round(1 / 2 * nodeModel._width)\r\n        // 计算二者距离\r\n        const frontToBackDistance = backX - frontX\r\n        // 挪动 此时nodeModel是本个的id的\r\n        graphModel.moveNode(nodes[i].id, distance - frontToBackDistance, 0, true)\r\n      }\r\n    },\r\n    $_verticalDistribution() {\r\n      const { nodes } = this.lf.getSelectElements()\r\n      if (nodes.length === 0) {\r\n        return\r\n      }\r\n      // 排序\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        for (let j = i + 1; j < nodes.length; j++) {\r\n          if (nodes[i].y > nodes[j].y) {\r\n            const tempY = nodes[i]\r\n            nodes[i] = nodes[j]\r\n            nodes[j] = tempY\r\n          }\r\n        }\r\n      }\r\n      // 计算距离 nodes[0].y 与 nodes[length-1].y是起始终点\r\n      let distance = 0 // 每个组件需要的间距\r\n      let htDistance = nodes[nodes.length - 1].y - nodes[0].y\r\n      const graphModel = this.lf.graphModel\r\n      let nodeModel = ''\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        if (i === 0 || i === nodes.length - 1) {\r\n          nodeModel = graphModel.getNodeModelById(nodes[i].id)\r\n          // 头尾直接/2扣掉就行\r\n          htDistance -= (Math.round(nodeModel._height / 2))\r\n        } else {\r\n          // 扣掉内部的width\r\n          nodeModel = graphModel.getNodeModelById(nodes[i].id)\r\n          htDistance -= nodeModel._height\r\n        }\r\n      }\r\n      distance = Math.round(htDistance / (nodes.length - 1))\r\n      // 挪动\r\n      for (let i = 1; i < nodes.length - 1; i++) {\r\n        // 本个的左边和上一个右边的距离\r\n        // 计算上一个的右边\r\n        nodeModel = graphModel.getNodeModelById(nodes[i - 1].id)\r\n        const frontY = nodeModel.y + Math.round(1 / 2 * nodeModel._height)\r\n        // 计算本个的左边\r\n        nodeModel = graphModel.getNodeModelById(nodes[i].id)\r\n        const backY = nodeModel.y - Math.round(1 / 2 * nodeModel._height)\r\n        // 计算二者距离\r\n        const frontToBackDistance = backY - frontY\r\n        // 挪动 此时nodeModel是本个的id的\r\n        graphModel.moveNode(nodes[i].id, 0, distance - frontToBackDistance, true)\r\n      }\r\n    },\r\n    $_lock() {\r\n      //\r\n      const { nodes } = this.lf.getSelectElements()\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        console.log(nodeModel)\r\n        if (nodeModel.draggable) {\r\n          // nodeModel.draggable = false\r\n          this.lf.setProperties(node.id, {\r\n            isLock: true\r\n          })\r\n        }\r\n      })\r\n    },\r\n    $_unlock() {\r\n      //\r\n      const { nodes } = this.lf.getSelectElements()\r\n      const graphModel = this.lf.graphModel\r\n      nodes.forEach(node => {\r\n        const nodeModel = graphModel.getNodeModelById(node.id)\r\n        if (!nodeModel.draggable) {\r\n          // nodeModel.draggable = true\r\n          this.lf.setProperties(node.id, {\r\n            isLock: false\r\n          })\r\n        }\r\n      })\r\n    }\r\n  }\r\n}\r\n",null]}