{"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\\flow-x6\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\src\\views\\system\\processModeling\\flow-x6\\index.vue","mtime":1689156448322},{"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:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgIi4vaW5kZXguY3NzIjsNCmltcG9ydCBGbG93R3JhcGggZnJvbSAiLi9ncmFwaCI7DQppbXBvcnQgVG9vbEJhciBmcm9tICIuL2NvbXBvbmVudHMvVG9vbEJhci9pbmRleC52dWUiOw0KaW1wb3J0IENvbmZpZ1BhbmVsIGZyb20gIi4vY29tcG9uZW50cy9Db25maWdQYW5lbC9pbmRleC52dWUiOw0KaW1wb3J0IHsgJCwgZ2V0Q29udGFpbmVyU2l6ZSB9IGZyb20gIi4uLy4uLy4uLy4uL3V0aWxzIjsNCmV4cG9ydCBkZWZhdWx0IHsNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgaXNSZWFkeTogZmFsc2UsDQogICAgICBkZXN0cm95Rm46IG51bGwsDQogICAgICBkcmF3ZXI6IGZhbHNlLA0KICAgICAgZGlyZWN0aW9uOiAncnRsJywNCiAgICB9Ow0KICB9LA0KICBjb21wb25lbnRzOiB7IFRvb2xCYXIsIENvbmZpZ1BhbmVsIH0sDQoNCiAgbW91bnRlZCgpIHsNCiAgICB0aGlzLmRlc3Ryb3lGbiA9IHRoaXMuaW5pdEdyYXBoKCk7DQogIH0sDQogIGRlc3Ryb3llZCgpIHsNCiAgICAvLyB0aGlzLmRlc3Ryb3lGbigpOw0KICB9LA0KICBtZXRob2RzOiB7DQogICAgLy8gaGFuZGxlQ2xvc2UoZG9uZSkgew0KICAgIC8vICAgICB0aGlzLiRjb25maXJtKCfnoa7orqTlhbPpl63vvJ8nKQ0KICAgIC8vICAgICAgIC50aGVuKF8gPT4gew0KICAgIC8vICAgICAgICAgZG9uZSgpOw0KICAgIC8vICAgICAgIH0pDQogICAgLy8gICAgICAgLmNhdGNoKF8gPT4ge30pOw0KICAgIC8vICAgfSwNCiAgICAgIC8vIGNsb3NlRHJhd2VyKCkgew0KICAgICAgLy8gICB0aGlzLiRyZWZzLmRyYXdlci5jbG9zZSgpOw0KICAgICAgLy8gfSwNCiAgICBpbml0R3JhcGgoKSB7DQogICAgICBjb25zdCBncmFwaCA9IEZsb3dHcmFwaC5pbml0KA0KICAgICAgICAkKCIjY29udGFpbmVyIiksDQogICAgICAgICQoIiNjb250YWluZXIiKS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCwNCiAgICAgICAgJCgiI2NvbnRhaW5lciIpLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodA0KICAgICAgKTsNCiAgICAgIGNvbnN0IGdyYXBoSnNvbiA9IEpTT04ucGFyc2Uod2luZG93LmxvY2FsU3RvcmFnZS5nZXRJdGVtKCdncmFwaEpzb24nKSkNCiAgICAgIGlmKGdyYXBoSnNvbil7DQogICAgICAgIGdyYXBoLmZyb21KU09OKGdyYXBoSnNvbikNCiAgICAgIH0NCiAgICAgIHRoaXMuaXNSZWFkeSA9IHRydWU7DQogICAgICBjb25zdCByZXNpemVGbiA9ICgpID0+IHsNCiAgICAgICAgY29uc3QgeyB3aWR0aCwgaGVpZ2h0IH0gPSBnZXRDb250YWluZXJTaXplKCQoIi5wYW5lbCIpKTsNCiAgICAgICAgZ3JhcGgucmVzaXplKHdpZHRoLCBoZWlnaHQgLSAzOCk7DQogICAgICB9Ow0KICAgICAgcmVzaXplRm4oKTsNCiAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJyZXNpemUiLCByZXNpemVGbik7DQogICAgICByZXR1cm4gKCkgPT4gew0KICAgICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigicmVzaXplIiwgcmVzaXplRm4pOw0KICAgICAgICBncmFwaC5kaXNwb3NlKCk7DQogICAgICB9Ow0KICAgDQoNCiAgICB9LA0KICAgIA0KDQoNCiAgfSwNCn0NCg0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;;AAGA;;;;AAIA;AACA","file":"index.vue","sourceRoot":"src/views/system/processModeling/flow-x6","sourcesContent":["<template>\r\n  <div class=\"flow\">\r\n    <div class=\"content\">\r\n      <!--左侧工具栏-->\r\n      <div id=\"stencil\" />\r\n      <div class=\"panel\">\r\n        <!--流程图工具栏-->\r\n        <div class=\"toolbar\">\r\n          <tool-bar v-if=\"isReady\" />\r\n        </div>\r\n        <!--流程图画板-->\r\n        <div id=\"container\" />\r\n      </div>\r\n      <!--右侧工具栏-->\r\n      <div class=\"config\">\r\n        <config-panel v-if=\"isReady\" />\r\n      </div>\r\n    </div>\r\n    <!-- <el-drawer\r\n      ref=\"drawer\"\r\n      title=\"我是标题\"\r\n      :visible.sync=\"drawer\"\r\n      :direction=\"direction\"\r\n      :before-close=\"handleClose\">\r\n      <span>我来啦!</span>\r\n    </el-drawer> -->\r\n  </div>\r\n</template>\r\n<script>\r\nimport \"./index.css\";\r\nimport FlowGraph from \"./graph\";\r\nimport ToolBar from \"./components/ToolBar/index.vue\";\r\nimport ConfigPanel from \"./components/ConfigPanel/index.vue\";\r\nimport { $, getContainerSize } from \"../../../../utils\";\r\nexport default {\r\n  data() {\r\n    return {\r\n      isReady: false,\r\n      destroyFn: null,\r\n      drawer: false,\r\n      direction: 'rtl',\r\n    };\r\n  },\r\n  components: { ToolBar, ConfigPanel },\r\n\r\n  mounted() {\r\n    this.destroyFn = this.initGraph();\r\n  },\r\n  destroyed() {\r\n    // this.destroyFn();\r\n  },\r\n  methods: {\r\n    // handleClose(done) {\r\n    //     this.$confirm('确认关闭？')\r\n    //       .then(_ => {\r\n    //         done();\r\n    //       })\r\n    //       .catch(_ => {});\r\n    //   },\r\n      // closeDrawer() {\r\n      //   this.$refs.drawer.close();\r\n      // },\r\n    initGraph() {\r\n      const graph = FlowGraph.init(\r\n        $(\"#container\"),\r\n        $(\"#container\").getBoundingClientRect().width,\r\n        $(\"#container\").getBoundingClientRect().height\r\n      );\r\n      const graphJson = JSON.parse(window.localStorage.getItem('graphJson'))\r\n      if(graphJson){\r\n        graph.fromJSON(graphJson)\r\n      }\r\n      this.isReady = true;\r\n      const resizeFn = () => {\r\n        const { width, height } = getContainerSize($(\".panel\"));\r\n        graph.resize(width, height - 38);\r\n      };\r\n      resizeFn();\r\n      window.addEventListener(\"resize\", resizeFn);\r\n      return () => {\r\n        window.removeEventListener(\"resize\", resizeFn);\r\n        graph.dispose();\r\n      };\r\n   \r\n\r\n    },\r\n    \r\n\r\n\r\n  },\r\n}\r\n\r\n</script>\r\n<style lang=\"scss\">\r\n.x6-widget-snapline-vertical {\r\n  border-right-color: #ff4e50 !important;\r\n}\r\n.x6-widget-snapline-horizontal {\r\n  border-bottom-color: #ff4e50 !important;\r\n}\r\n.x6-widget-selection-box {\r\n  border: 1px dashed #5f95ff;\r\n  margin-top: -3px;\r\n  margin-left: -3px;\r\n}\r\n.x6-widget-selection-inner {\r\n  border: 1px dashed #5f95ff;\r\n}\r\n.x6-graph-svg-viewport {\r\n  padding: 0;\r\n}\r\n\r\n@keyframes stroke {\r\n  100% {\r\n    stroke-dashoffset: -400;\r\n  }\r\n}\r\n.animate-text1,\r\n.animate-text2,\r\n.animate-text3,\r\n.animate-text4 {\r\n  font-weight: bold;\r\n  fill: none;\r\n  stroke-width: 2px;\r\n  stroke-dasharray: 90 310;\r\n  animation: stroke 3s infinite linear;\r\n}\r\n.animate-text1 {\r\n  stroke: #873bf4;\r\n  text-shadow: 0 0 2px #873bf4;\r\n  animation-delay: -1.5s;\r\n}\r\n.animate-text2 {\r\n  stroke: #ff6e06;\r\n  text-shadow: 0 0 2px #ff6e06;\r\n  animation-delay: -3s;\r\n}\r\n\r\n .x6-widget-stencil {\r\n   color: rgba(34, 38, 83, 1);\r\n   background: #fff;\r\n }  \r\n .x6-widget-stencil-title {  \r\n  background: rgba(7, 68, 138, 1);\r\n  color: #fff;\r\n}\r\n.x6-widget-stencil-search-text {\r\n   color: #fff;\r\n   background: rgba(7, 68, 138, 1);\r\n }\r\n .x6-widget-stencil-group > .x6-widget-stencil-group-title {\r\n   /* background: #7daee3; */\r\n   color: #000;\r\n   height: 40px;\r\n   font-size: 18px;\r\n   line-height: 40px;\r\n   font-weight: normal;\r\n\r\n }\r\n\r\n\r\n .x6-widget-stencil.collapsable > .x6-widget-stencil-title::before, .x6-widget-stencil-group.collapsable > .x6-widget-stencil-group-title::before {\r\n    background-image: url('');\r\n    opacity: 0.4;\r\n    transition: all 0.3s;\r\n}\r\n.x6-widget-stencil-title{\r\n  visibility: hidden;\r\n}\r\n.x6-widget-stencil-search{\r\n  visibility: hidden;\r\n}\r\n.x6-widget-stencil {\r\n    position: absolute;\r\n    top: -80px;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n}\r\n\r\n.config{\r\n  width: 20%;\r\n  padding: 0 0;\r\n}\r\n#stencil{\r\n  width: 10%;\r\n}\r\n.el-tabs__header {\r\n  background: rgba(229, 229, 229);\r\n   /* height: 40px; */\r\n}\r\n.el-tabs__item {\r\n    height: 40px;\r\n    line-height: 40px;\r\n    font-size: 18px;\r\n    font-weight: normal;\r\n    /* color: #fff; */\r\n    position: relative;\r\n    margin-left: 10px !important;\r\n}\r\n/* .el-tabs__item:hover {\r\n    color: #fff;\r\n    cursor: pointer;\r\n} */\r\n/* .el-tabs__item.is-active {\r\n    color: #fff;\r\n} */\r\n.el-tab-pane{\r\n  margin-left: 10px !important;\r\n}\r\n.x6-graph-svg-stag{\r\n  margin-left: -10px;\r\n}\r\n.x6-graph{\r\n  height: 800px !important;\r\n}\r\n.bar{\r\n  z-index: 1 !important;\r\n}\r\n</style>\r\n"]}]}