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