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