{"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=style&index=0&id=21324893&scoped=true&lang=css&","dependencies":[{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\src\\views\\system\\processModeling\\flow-x6\\index.vue","mtime":1688986575625},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQoueDYtd2lkZ2V0LXNuYXBsaW5lLXZlcnRpY2FsIHsNCiAgYm9yZGVyLXJpZ2h0LWNvbG9yOiAjZmY0ZTUwICFpbXBvcnRhbnQ7DQp9DQoueDYtd2lkZ2V0LXNuYXBsaW5lLWhvcml6b250YWwgew0KICBib3JkZXItYm90dG9tLWNvbG9yOiAjZmY0ZTUwICFpbXBvcnRhbnQ7DQp9DQoueDYtd2lkZ2V0LXNlbGVjdGlvbi1ib3ggew0KICBib3JkZXI6IDFweCBkYXNoZWQgIzVmOTVmZjsNCiAgbWFyZ2luLXRvcDogLTNweDsNCiAgbWFyZ2luLWxlZnQ6IC0zcHg7DQp9DQoueDYtd2lkZ2V0LXNlbGVjdGlvbi1pbm5lciB7DQogIGJvcmRlcjogMXB4IGRhc2hlZCAjNWY5NWZmOw0KfQ0KLng2LWdyYXBoLXN2Zy12aWV3cG9ydCB7DQogIHBhZGRpbmc6IDA7DQp9DQoNCkBrZXlmcmFtZXMgc3Ryb2tlIHsNCiAgMTAwJSB7DQogICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IC00MDA7DQogIH0NCn0NCi5hbmltYXRlLXRleHQxLA0KLmFuaW1hdGUtdGV4dDIsDQouYW5pbWF0ZS10ZXh0MywNCi5hbmltYXRlLXRleHQ0IHsNCiAgZm9udC13ZWlnaHQ6IGJvbGQ7DQogIGZpbGw6IG5vbmU7DQogIHN0cm9rZS13aWR0aDogMnB4Ow0KICBzdHJva2UtZGFzaGFycmF5OiA5MCAzMTA7DQogIGFuaW1hdGlvbjogc3Ryb2tlIDNzIGluZmluaXRlIGxpbmVhcjsNCn0NCi5hbmltYXRlLXRleHQxIHsNCiAgc3Ryb2tlOiAjODczYmY0Ow0KICB0ZXh0LXNoYWRvdzogMCAwIDJweCAjODczYmY0Ow0KICBhbmltYXRpb24tZGVsYXk6IC0xLjVzOw0KfQ0KLmFuaW1hdGUtdGV4dDIgew0KICBzdHJva2U6ICNmZjZlMDY7DQogIHRleHQtc2hhZG93OiAwIDAgMnB4ICNmZjZlMDY7DQogIGFuaW1hdGlvbi1kZWxheTogLTNzOw0KfQ0KDQogLng2LXdpZGdldC1zdGVuY2lsIHsNCiAgIGNvbG9yOiByZ2JhKDM0LCAzOCwgODMsIDEpOw0KICAgYmFja2dyb3VuZDogI2ZmZjsNCiB9ICANCiAueDYtd2lkZ2V0LXN0ZW5jaWwtdGl0bGUgeyAgDQogIGJhY2tncm91bmQ6IHJnYmEoNywgNjgsIDEzOCwgMSk7DQogIGNvbG9yOiAjZmZmOw0KfQ0KLng2LXdpZGdldC1zdGVuY2lsLXNlYXJjaC10ZXh0IHsNCiAgIGNvbG9yOiAjZmZmOw0KICAgYmFja2dyb3VuZDogcmdiYSg3LCA2OCwgMTM4LCAxKTsNCiB9DQogLng2LXdpZGdldC1zdGVuY2lsLWdyb3VwID4gLng2LXdpZGdldC1zdGVuY2lsLWdyb3VwLXRpdGxlIHsNCiAgIC8qIGJhY2tncm91bmQ6ICM3ZGFlZTM7ICovDQogICBjb2xvcjogIzAwMDsNCiAgIGhlaWdodDogNDBweDsNCiAgIGZvbnQtc2l6ZTogMThweDsNCiAgIGxpbmUtaGVpZ2h0OiA0MHB4Ow0KICAgZm9udC13ZWlnaHQ6IG5vcm1hbDsNCg0KIH0NCg0KDQogLng2LXdpZGdldC1zdGVuY2lsLmNvbGxhcHNhYmxlID4gLng2LXdpZGdldC1zdGVuY2lsLXRpdGxlOjpiZWZvcmUsIC54Ni13aWRnZXQtc3RlbmNpbC1ncm91cC5jb2xsYXBzYWJsZSA+IC54Ni13aWRnZXQtc3RlbmNpbC1ncm91cC10aXRsZTo6YmVmb3JlIHsNCiAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJycpOw0KICAgIG9wYWNpdHk6IDAuNDsNCiAgICB0cmFuc2l0aW9uOiBhbGwgMC4zczsNCn0NCi54Ni13aWRnZXQtc3RlbmNpbC10aXRsZXsNCiAgdmlzaWJpbGl0eTogaGlkZGVuOw0KfQ0KLng2LXdpZGdldC1zdGVuY2lsLXNlYXJjaHsNCiAgdmlzaWJpbGl0eTogaGlkZGVuOw0KfQ0KLng2LXdpZGdldC1zdGVuY2lsIHsNCiAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgdG9wOiAtODBweDsNCiAgICByaWdodDogMDsNCiAgICBib3R0b206IDA7DQogICAgbGVmdDogMDsNCn0NCg0KLmNvbmZpZ3sNCiAgd2lkdGg6IDIwJTsNCiAgcGFkZGluZzogMCAwOw0KfQ0KI3N0ZW5jaWx7DQogIHdpZHRoOiAxMCU7DQp9DQouZWwtdGFic19faGVhZGVyIHsNCiAgYmFja2dyb3VuZDogcmdiYSgyMjksIDIyOSwgMjI5KTsNCiAgIC8qIGhlaWdodDogNDBweDsgKi8NCn0NCi5lbC10YWJzX19pdGVtIHsNCiAgICBoZWlnaHQ6IDQwcHg7DQogICAgbGluZS1oZWlnaHQ6IDQwcHg7DQogICAgZm9udC1zaXplOiAxOHB4Ow0KICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7DQogICAgLyogY29sb3I6ICNmZmY7ICovDQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIG1hcmdpbi1sZWZ0OiAxMHB4Ow0KfQ0KLyogLmVsLXRhYnNfX2l0ZW06aG92ZXIgew0KICAgIGNvbG9yOiAjZmZmOw0KICAgIGN1cnNvcjogcG9pbnRlcjsNCn0gKi8NCi8qIC5lbC10YWJzX19pdGVtLmlzLWFjdGl2ZSB7DQogICAgY29sb3I6ICNmZmY7DQp9ICovDQouZWwtdGFiLXBhbmV7DQogIG1hcmdpbi1sZWZ0OiAxMHB4Ow0KfQ0KLng2LWdyYXBoLXN2Zy1zdGFnew0KICBtYXJnaW4tbGVmdDogLTEwcHg7DQp9DQogOjp2LWRlZXAueDYtZ3JhcGh7DQogIGhlaWdodDogODAwcHggIWltcG9ydGFudDsNCn0NCg0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA;AACA;AACA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;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","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 scoped>\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;\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;\r\n}\r\n.x6-graph-svg-stag{\r\n  margin-left: -10px;\r\n}\r\n ::v-deep.x6-graph{\r\n  height: 800px !important;\r\n}\r\n\r\n</style>\r\n"]}]}