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