| 1 |
- {"remainingRequest":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\src\\views\\system\\processModeling\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\src\\views\\system\\processModeling\\index.vue","mtime":1688094707727},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1688725391035},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":1688725407620},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1688725391035},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1688725415411}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgRmxvd0dyYXBoIGZyb20gJy4vZmxvdy14Ni9ncmFwaCcNCmltcG9ydCB7ICQsIGdldENvbnRhaW5lclNpemUgfSBmcm9tICcuLi8uLi8uLi91dGlscycNCmV4cG9ydCBkZWZhdWx0IHsNCiAgZGF0YSgpew0KICAgIHJldHVybnsNCiAgICB9DQogIH0sDQogIG1vdW50ZWQoKSB7DQogICAgdGhpcy5nZXRGbG93SnNvbigpDQogIH0sDQogIGRlc3Ryb3llZCgpIHsNCiAgICBjb25zdCB7IGdyYXBoIH0gPSBGbG93R3JhcGgNCiAgICAvLyDplIDmr4HnlLvluIPvvIzotYTmupDlm57mlLYNCiAgICBpZihncmFwaCkgZ3JhcGguZGlzcG9zZSgpDQogICAgLy8g56e76Zmk55uR5ZCsDQogICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHRoaXMucmVzaXplRm4pDQogIH0sDQogIG1ldGhvZHM6ew0KICAgIC8vIOWOu+WQjuWPsOaLv2pzb24NCiAgICBnZXRGbG93SnNvbigpIHsNCiAgICAgIHNldFRpbWVvdXQoKCkgPT4gew0KICAgICAgICBjb25zdCBncmFwaEpzb24gPSBKU09OLnBhcnNlKHdpbmRvdy5sb2NhbFN0b3JhZ2UuZ2V0SXRlbSgnZ3JhcGhKc29uJykpDQogICAgICAgIGNvbnNvbGUubG9nKGdyYXBoSnNvbikNCiAgICAgICAgaWYoZ3JhcGhKc29uKSB7DQogICAgICAgICAgdGhpcy5pbml0Rmxvd0ltYWdlKGdyYXBoSnNvbikNCiAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICB0aGlzLiRyb3V0ZXIucHVzaCgnL2Zsb3cteDYnKQ0KICAgICAgICB9DQogICAgICB9LCAzMDApDQoNCiAgICB9LA0KICAgIC8vIOagueaNrmpzb27muLLmn5MNCiAgICBpbml0Rmxvd0ltYWdlKGdyYXBoSnNvbikgew0KICAgICAgLy8g5Yid5aeL5YyW55S75p2/DQogICAgICBjb25zdCBncmFwaCA9IEZsb3dHcmFwaC5pbml0KCQoJyNmbG93LWNvbnRhaW5lcicpLCAkKCcjZmxvdy1jb250YWluZXInKS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCwgJCgnI2Zsb3ctY29udGFpbmVyJykuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuaGVpZ2h0LCBmYWxzZSkNCiAgICAgIC8vIOa4suafk+aTjeS9nA0KICAgICAgZ3JhcGguZnJvbUpTT04oZ3JhcGhKc29uKQ0KDQogICAgICAvLyDnm5HlkKzmlbDmja7mlLnlj5jkuovku7YNCiAgICAgIGdyYXBoLmdldE5vZGVzKCkuZm9yRWFjaChub2RlID0+IHsNCiAgICAgICAgaWYobm9kZS5nZXREYXRhKCkpIHsNCiAgICAgICAgICBub2RlLm9uKCJjaGFuZ2U6ZGF0YSIsICh7IGNlbGwsIGN1cnJlbnQgfSkgPT4gew0KICAgICAgICAgICAgLy8gY3VycmVudCDlsLHmmK/miJHku6znu5HlrprnmoQg5Lia5Yqh5bGe5oCnZGF0YQ0KICAgICAgICAgICAgaWYoY3VycmVudC5zdGF0dXMgPT0gMCkgew0KICAgICAgICAgICAgICBjZWxsLmF0dHIoJ2JvZHkvZmlsbCcsICdyZWQnKQ0KICAgICAgICAgICAgICBjZWxsLmF0dHIoJ3RleHQvZmlsbCcsICcjZmZmJykNCiAgICAgICAgICAgICAgY2VsbC5hdHRyKCd0ZXh0L3RleHQnLCAnMTAw4oSDJykNCiAgICAgICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgICAgIGNlbGwuYXR0cignYm9keS9maWxsJywgJ2dyZWVuJykNCiAgICAgICAgICAgICAgY2VsbC5hdHRyKCd0ZXh0L2ZpbGwnLCAnIzA4MDgwOCcpDQogICAgICAgICAgICAgIGNlbGwuYXR0cigndGV4dC90ZXh0JywgJzE1MOKEgycpDQogICAgICAgICAgICB9DQogICAgICAgICAgfSkNCiAgICAgICAgfQ0KICAgICAgfSkNCiAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCB0aGlzLnJlc2l6ZUZuKQ0KICAgIH0sDQogICAgLy8g5pS55Y+Y54q25oCBDQogICAgZWRpdEZsb3dEYXRhKCkgew0KICAgICAgY29uc3QgeyBncmFwaCB9ID0gRmxvd0dyYXBoOw0KICAgICAgZ3JhcGguZ2V0Tm9kZXMoKS5mb3JFYWNoKG5vZGUgPT4gew0KICAgICAgICBpZihub2RlLmdldERhdGEoKSkgew0KICAgICAgICAgIGxldCBjdXJTdGF0dXMgPSBub2RlLmdldERhdGEoKS5zdGF0dXMNCiAgICAgICAgICBub2RlLnNldERhdGEoew0KICAgICAgICAgICAgc3RhdHVzOiBjdXJTdGF0dXMgPT0gMCA/IDEgOiAwDQogICAgICAgICAgfSkNCiAgICAgICAgfQ0KICAgICAgfSkNCiAgICB9LA0KICAgIHJlc2l6ZUZuKCkgew0KICAgICAgc2V0VGltZW91dCgoKSA9PiB7DQogICAgICAgIGNvbnN0IHsgd2lkdGgsIGhlaWdodCB9ID0gZ2V0Q29udGFpbmVyU2l6ZSgkKCcjZmxvdy1pbWFnZScpKQ0KICAgICAgICB0aGlzLmdyYXBoLnJlc2l6ZSh3aWR0aCwgaGVpZ2h0KQ0KICAgICAgfSwgMTAwKQ0KICAgIH0NCiAgfQ0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/system/processModeling","sourcesContent":["\r\n<template>\r\n <div class=\"index\">\r\n <div id=\"flow-image\">\r\n <el-tooltip class=\"item\" effect=\"dark\" content=\"编辑图形\" placement=\"right\">\r\n <el-button style=\"position: absolute; top: 2px; right: 2px;z-index: 9999;\" @click=\"$router.push('/flow-x6')\"><i class=\"el-icon-edit-outline\"></i></el-button>\r\n </el-tooltip>\r\n <el-button style=\"position: absolute; top: 2px; right: 60px;z-index: 9999;\" @click=\"editFlowData\">Edit Data</el-button>\r\n <div id=\"flow-container\"></div>\r\n\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nimport FlowGraph from './flow-x6/graph'\r\nimport { $, getContainerSize } from '../../../utils'\r\nexport default {\r\n data(){\r\n return{\r\n }\r\n },\r\n mounted() {\r\n this.getFlowJson()\r\n },\r\n destroyed() {\r\n const { graph } = FlowGraph\r\n // 销毁画布，资源回收\r\n if(graph) graph.dispose()\r\n // 移除监听\r\n window.removeEventListener('resize', this.resizeFn)\r\n },\r\n methods:{\r\n // 去后台拿json\r\n getFlowJson() {\r\n setTimeout(() => {\r\n const graphJson = JSON.parse(window.localStorage.getItem('graphJson'))\r\n console.log(graphJson)\r\n if(graphJson) {\r\n this.initFlowImage(graphJson)\r\n } else {\r\n this.$router.push('/flow-x6')\r\n }\r\n }, 300)\r\n\r\n },\r\n // 根据json渲染\r\n initFlowImage(graphJson) {\r\n // 初始化画板\r\n const graph = FlowGraph.init($('#flow-container'), $('#flow-container').getBoundingClientRect().width, $('#flow-container').getBoundingClientRect().height, false)\r\n // 渲染操作\r\n graph.fromJSON(graphJson)\r\n\r\n // 监听数据改变事件\r\n graph.getNodes().forEach(node => {\r\n if(node.getData()) {\r\n node.on(\"change:data\", ({ cell, current }) => {\r\n // current 就是我们绑定的 业务属性data\r\n if(current.status == 0) {\r\n cell.attr('body/fill', 'red')\r\n cell.attr('text/fill', '#fff')\r\n cell.attr('text/text', '100℃')\r\n } else {\r\n cell.attr('body/fill', 'green')\r\n cell.attr('text/fill', '#080808')\r\n cell.attr('text/text', '150℃')\r\n }\r\n })\r\n }\r\n })\r\n window.addEventListener('resize', this.resizeFn)\r\n },\r\n // 改变状态\r\n editFlowData() {\r\n const { graph } = FlowGraph;\r\n graph.getNodes().forEach(node => {\r\n if(node.getData()) {\r\n let curStatus = node.getData().status\r\n node.setData({\r\n status: curStatus == 0 ? 1 : 0\r\n })\r\n }\r\n })\r\n },\r\n resizeFn() {\r\n setTimeout(() => {\r\n const { width, height } = getContainerSize($('#flow-image'))\r\n this.graph.resize(width, height)\r\n }, 100)\r\n }\r\n }\r\n}\r\n</script>\r\n<style scoped>\r\n.index {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n#flow-image {\r\n width: 80%;\r\n height: 90%;\r\n position: relative;\r\n}\r\n#flow-container {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}\r\n</style>\r\n"]}]}
|
