{"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\\components\\ConfigPanel\\ConfigEdge\\index.vue?vue&type=style&index=0&id=41bc3489&scoped=true&lang=css&","dependencies":[{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\src\\views\\system\\processModeling\\flow-x6\\components\\ConfigPanel\\ConfigEdge\\index.vue","mtime":1687325644955},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5lbC1yb3cgew0KICBtYXJnaW4tYm90dG9tOiA1cHg7DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgYA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/system/processModeling/flow-x6/components/ConfigPanel/ConfigEdge","sourcesContent":["<template>\r\n  <div style=\"width: 100%;height: 100%;\">\r\n    <el-tabs>\r\n      <el-tab-pane label=\"线条\">\r\n        <el-row>\r\n          <el-col :span=\"8\">线边的宽度</el-col>\r\n          <el-col :span=\"12\">\r\n            <el-slider\r\n              :min=\"1\"\r\n              :max=\"25\"\r\n              :step=\"1\"\r\n              size=\"mini\"\r\n              v-model=\"strokeWidth\"\r\n              @change=\"onStrokeWidthChange\"\r\n            />\r\n          </el-col>\r\n          <el-col :span=\"2\">\r\n            <div class=\"result\">{{ strokeWidth }}</div>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">外线边的宽度</el-col>\r\n          <el-col :span=\"12\">\r\n            <el-slider\r\n              :min=\"1\"\r\n              :max=\"25\"\r\n              :step=\"1\"\r\n              size=\"mini\"\r\n              v-model=\"outStrokeWidth\"\r\n              @change=\"onOutStrokeWidthChange\"\r\n            />\r\n          </el-col>\r\n          <el-col :span=\"2\">\r\n            <div class=\"result\">{{ outStrokeWidth }}</div>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">线条颜色</el-col>\r\n          <el-col :span=\"14\">\r\n            <el-input\r\n              type=\"color\"\r\n              v-model=\"stroke\"\r\n              size=\"mini\"\r\n              style=\"width: 100%\"\r\n              @change=\"onStrokeChange\"\r\n            />\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">外线条的颜色</el-col>\r\n          <el-col :span=\"14\">\r\n            <el-input\r\n              type=\"color\"\r\n              v-model=\"outStroke\"\r\n              size=\"mini\"\r\n              style=\"width: 100%\"\r\n              @change=\"onOutStrokeChange\"\r\n            />\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">虚线</el-col>\r\n          <el-col :span=\"12\">\r\n            <el-slider\r\n              :min=\"0\"\r\n              :max=\"10\"\r\n              :step=\"1\"\r\n              size=\"mini\"\r\n              v-model=\"strokeDasharray\"\r\n              @change=\"onStrokeDasharray\"\r\n            />\r\n          </el-col>\r\n          <el-col :span=\"2\">\r\n            <div class=\"result\">{{ strokeDasharray }}</div>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">动画</el-col>\r\n          <el-col :span=\"12\">\r\n            <el-slider\r\n              :min=\"0\"\r\n              :max=\"50\"\r\n              :step=\"1\"\r\n              size=\"mini\"\r\n              v-model=\"animation\"\r\n              @change=\"onAnimation\"\r\n            />\r\n          </el-col>\r\n          <el-col :span=\"2\">\r\n            <div class=\"result\">{{ animation }}</div>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">连接方式</el-col>\r\n          <el-col :span=\"14\">\r\n            <el-select\r\n              style=\"width: 100%\"\r\n              size=\"mini\"\r\n              v-model=\"connector\"\r\n              @change=\"onConnectorChange\"\r\n            >\r\n              <el-option value=\"normal\">Normal</el-option>\r\n              <el-option value=\"smooth\">Smooth</el-option>\r\n              <el-option value=\"rounded\">Rounded</el-option>\r\n              <el-option value=\"jumpover\">Jumpover</el-option>\r\n            </el-select>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">路由</el-col>\r\n          <el-col :span=\"14\">\r\n            <el-select\r\n              style=\"width: 100%\"\r\n              size=\"mini\"\r\n              v-model=\"edgeRouter\"\r\n              @change=\"onEdgeRouter\"\r\n            >\r\n              <el-option value=\"normal\">Normal</el-option>\r\n              <el-option value=\"orth\">Orth</el-option>\r\n              <el-option value=\"oneSide\">OneSide</el-option>\r\n              <el-option value=\"manhattan\">Manhattan</el-option>\r\n              <el-option value=\"metro\">Metro</el-option>\r\n              <el-option value=\"er\">Er</el-option>\r\n            </el-select>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row v-show=\"edgeRouter == 'er'\">\r\n          <el-col :span=\"8\">Edge Offset</el-col>\r\n          <el-col :span=\"12\">\r\n            <el-slider\r\n              :min=\"8\"\r\n              :max=\"64\"\r\n              :step=\"1\"\r\n              size=\"mini\"\r\n              v-model=\"edgeOffset\"\r\n            />\r\n          </el-col>\r\n          <el-col :span=\"2\">\r\n            <div class=\"result\">{{ edgeOffset }}</div>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row v-show=\"edgeRouter == 'er'\">\r\n          <el-col :span=\"8\">边的描述</el-col>\r\n          <el-col :span=\"14\">\r\n            <el-select\r\n              style=\"width: 100%\"\r\n              size=\"mini\"\r\n              v-model=\"edgeDirection\"\r\n            >\r\n              <el-option value=\"L\">L</el-option>\r\n              <el-option value=\"R\">R</el-option>\r\n              <el-option value=\"H\">H</el-option>\r\n              <el-option value=\"T\">T</el-option>\r\n              <el-option value=\"B\">B</el-option>\r\n              <el-option value=\"V\">V</el-option>\r\n            </el-select>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span='8'>节点层级</el-col>\r\n          <el-col :span='12'>\r\n            <el-slider size=\"mini\" :min='0' :max='100' :step='1' v-model=\"ZIndex\" style=\"width: 100%\"/>\r\n          </el-col>\r\n          <el-col :span='2'>\r\n            <div class=\"result\">{{ ZIndex }}</div>\r\n          </el-col>\r\n        </el-row>\r\n        <el-row>\r\n          <el-col :span=\"8\">标签</el-col>\r\n          <el-col :span=\"14\">\r\n            <el-input\r\n              v-model=\"label\"\r\n              size=\"mini\"\r\n              style=\"width: 100%\"\r\n              @change=\"onLabelChange\"\r\n            />\r\n          </el-col>\r\n        </el-row>\r\n      </el-tab-pane>\r\n    </el-tabs>\r\n  </div>\r\n</template>\r\n<script>\r\nimport FlowGraph from \"../../../graph\";\r\nexport default {\r\n  name: 'index',\r\n  data() {\r\n    return {\r\n      curCell: null\r\n    }\r\n  },\r\n  computed: {\r\n    strokeWidth: {\r\n      get() {\r\n        return this.$store.state.flow.strokeWidth\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updatestrokeWidth', val)\r\n      }\r\n    },\r\n    outStrokeWidth: {\r\n      get() {\r\n        return this.$store.state.flow.outStrokeWidth\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateoutStrokeWidth', val)\r\n      }\r\n    },\r\n    stroke: {\r\n      get() {\r\n        return this.$store.state.flow.stroke\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updatestroke', val)\r\n      }\r\n    },\r\n    outStroke: {\r\n      get() {\r\n        return this.$store.state.flow.outStroke\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateoutStroke', val)\r\n      }\r\n    },\r\n    strokeDasharray: {\r\n      get() {\r\n        return this.$store.state.flow.strokeDasharray\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updatestrokeDasharray', val)\r\n      }\r\n    },\r\n    animation: {\r\n      get() {\r\n        return this.$store.state.flow.animation\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateanimation', val)\r\n      }\r\n    },\r\n    connector: {\r\n      get() {\r\n        return this.$store.state.flow.connector\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateconnector', val)\r\n      }\r\n    },\r\n    edgeRouter: {\r\n      get() {\r\n        return this.$store.state.flow.edgeRouter\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateedgeRouter', val)\r\n      }\r\n    },\r\n    edgeOffset: {\r\n      get() {\r\n        return this.$store.state.flow.edgeOffset\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateedgeOffset', val)\r\n      }\r\n    },\r\n    edgeDirection: {\r\n      get() {\r\n        return this.$store.state.flow.edgeDirection\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateedgeDirection', val)\r\n      }\r\n    },\r\n    ZIndex: {\r\n      get() {\r\n        return this.$store.state.flow.ZIndex\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updateZIndex', val)\r\n      }\r\n    },\r\n    label: {\r\n      get() {\r\n        return this.$store.state.flow.label\r\n      },\r\n      set(val) {\r\n        this.$store.commit('flow/updatelabel', val)\r\n      }\r\n    }\r\n  },\r\n  props: { id: String },\r\n  watch: {\r\n    id: {\r\n      handler() {\r\n        const { graph } = FlowGraph;\r\n        const cell = graph.getCellById(this.id);\r\n        if (!cell || !cell.isEdge()) {\r\n          return;\r\n        }\r\n        this.curCell = cell;\r\n        this.ZIndex = cell.getZIndex()\r\n        const connector = cell.getConnector() || {\r\n          name: \"normal\",\r\n        };\r\n        this.stroke = cell.attr(\"line/stroke\");\r\n        this.strokeWidth = cell.attr(\"line/strokeWidth\");\r\n        this.connector = connector.name;\r\n        this.label = (cell.getLabels()[0]?.attrs)?.text?.text || \"\";\r\n      },\r\n      deep: false,\r\n      immediate: false\r\n    },\r\n    edgeOffset: {\r\n      handler() {\r\n        this.curCell?.prop('router/args', { offset: this.edgeOffset, direction: this.edgeDirection })\r\n      },\r\n      immediate: false\r\n    },\r\n    edgeDirection: {\r\n      handler() {\r\n        this.curCell?.prop('router/args', { offset: this.edgeOffset, direction: this.edgeDirection })\r\n      },\r\n      immediate: false\r\n    },\r\n    ZIndex: {\r\n      handler() {\r\n        if(this.curCell) {\r\n          this.curCell?.setZIndex(this.ZIndex)\r\n        }\r\n      },\r\n      immediate: false\r\n    }\r\n  },\r\n  methods: {\r\n    // 线边的宽度\r\n    onStrokeWidthChange() {\r\n      this.curCell?.attr(\"line/strokeWidth\", this.strokeWidth);\r\n      console.log(this.curCell, '----->>>')\r\n    },\r\n    // 外线边的宽度\r\n    onOutStrokeWidthChange() {\r\n      this.curCell?.attr(\"outline/strokeWidth\", this.outStrokeWidth);\r\n    },\r\n    // 线边颜色\r\n    onStrokeChange() {\r\n      this.curCell?.attr(\"line/stroke\", this.stroke);\r\n    },\r\n    // 外线边颜色\r\n    onOutStrokeChange() {\r\n      this.curCell?.attr(\"outline/stroke\", this.outStroke);\r\n    },\r\n    // 虚线\r\n    onStrokeDasharray() {\r\n      this.curCell?.attr(\"line/strokeDasharray\", this.strokeDasharray);\r\n    },\r\n    // 动画\r\n    onAnimation() {\r\n      this.curCell?.attr(\"line/style/animation\", `ant-line ${this.animation}s infinite linear`);\r\n    },\r\n    // 连接方式\r\n    onConnectorChange () {\r\n      this.curCell?.setConnector(this.connector);\r\n    },\r\n    // 路由\r\n    onEdgeRouter () {\r\n      this.curCell?.setRouter({ name: this.edgeRouter })\r\n    },\r\n    onLabelChange() {\r\n      this.curCell.setLabels([\r\n        {\r\n          attrs: {\r\n            text: {\r\n              text: this.label,\r\n            },\r\n          },\r\n          position: {\r\n            distance: 0.5,\r\n          },\r\n        },\r\n      ]);\r\n    }\r\n  }\r\n}\r\n</script>\r\n<style scoped>\r\n.el-row {\r\n  margin-bottom: 5px;\r\n}\r\n</style>>\r\n"]}]}