{"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"]}]}