| 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=style&index=0&id=77327765&scoped=true&lang=css&","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\\css-loader\\dist\\cjs.js","mtime":1688725399018},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1688725423149},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\postcss-loader\\src\\index.js","mtime":1688725407590},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5pbmRleCB7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IDEwMCU7DQogIGRpc3BsYXk6IGZsZXg7DQogIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KfQ0KI2Zsb3ctaW1hZ2Ugew0KICB3aWR0aDogODAlOw0KICBoZWlnaHQ6IDkwJTsNCiAgcG9zaXRpb246IHJlbGF0aXZlOw0KfQ0KI2Zsb3ctY29udGFpbmVyIHsNCiAgd2lkdGg6IDEwMCU7DQogIGhlaWdodDogMTAwJTsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB0b3A6IDA7DQogIGxlZnQ6IDA7DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;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"]}]}
|
