| 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\\ConfigNode\\index.vue?vue&type=style&index=0&id=5b14a28e&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\\ConfigNode\\index.vue","mtime":1667192807136},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5lbC1yb3cgew0KICBtYXJnaW4tYm90dG9tOiA1cHg7DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwZA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/system/processModeling/flow-x6/components/ConfigPanel/ConfigNode","sourcesContent":["<template>\r\n <div style=\"width: 100%;height: 100%;\">\r\n <el-tabs v-model=\"activeName\">\r\n <el-tab-pane label=\"节点\" name=\"1\">\r\n <!-- 调节边框的颜色 对无边框的不起作用 -->\r\n <el-row v-show=\"nodeType == 'text'\">\r\n <el-col :span='10'>Border Color</el-col>\r\n <el-col :span='14'>\r\n <el-input size=\"mini\" type=\"color\" v-model=\"nodeStroke\" style=\"width: 100%\" @change=\"onStrokeChange\"/>\r\n </el-col>\r\n </el-row>\r\n <!-- 调节边框的宽度 对无边框的不起作用 -->\r\n <el-row v-show=\"nodeType == 'text'\">\r\n <el-col :span='8'>Border Width</el-col>\r\n <el-col :span='12'>\r\n <el-slider size=\"mini\" :min='1' :max='5' :step='1' v-model=\"nodeStrokeWidth\" @change=\"onStrokeWidthChange\"/>\r\n </el-col>\r\n <el-col :span='2'>\r\n <div class=\"result\">{{nodeStrokeWidth}}</div>\r\n </el-col>\r\n </el-row>\r\n <!-- 填充颜色 对image不起作用 -->\r\n <el-row v-show=\"nodeType == 'text'\">\r\n <el-col :span='8'>Fill isTransparent</el-col>\r\n <el-col :span='14'>\r\n <el-switch v-model=\"isNodeFill\" active-color=\"#13ce66\" inactive-color=\"#ff4949\"></el-switch>\r\n </el-col>\r\n </el-row>\r\n <el-row v-show=\"nodeType == 'text' && !isNodeFill\">\r\n <el-input size=\"mini\" type=\"color\" v-model=\"nodeFill\" style=\"width: 100%\" @change=\"onFillChange\"/>\r\n </el-row>\r\n <!-- <el-row>\r\n <el-col :span='8'>Image Width</el-col>\r\n <el-col :span='14'>\r\n <el-slider :min='20' :max='300' :step='20' v-model=\"nodeImageWidth\" style=\"width: 100%\" @change=\"onImageWidth\"/>\r\n </el-col>\r\n </el-row>\r\n <el-row>\r\n <el-col :span='8'>Image Height</el-col>\r\n <el-col :span='14'>\r\n <el-slider :min='20' :max='300' :step='20' v-model=\"nodeImageHeight\" style=\"width: 100%\" @change=\"onImageHeight\"/>\r\n </el-col>\r\n </el-row> -->\r\n <el-row v-show=\"nodeType == 'image'\">\r\n <el-col :span='8'>Port ID</el-col>\r\n <el-col :span='14'>\r\n <el-select size=\"mini\" v-model=\"portId\" placeholder=\"请选择\">\r\n <el-option label=\"top\" value=\"port1\" />\r\n <el-option label=\"right\" value=\"port2\" />\r\n <el-option label=\"bottom\" value=\"port3\" />\r\n <el-option label=\"left\" value=\"port4\" />\r\n </el-select>\r\n </el-col>\r\n </el-row>\r\n <el-row v-show=\"portId\">\r\n <el-col :span='8'>Port Left</el-col>\r\n <el-col :span='12'>\r\n <el-slider size=\"mini\" :min='-5' :max='100' :step='1' v-model=\"portX\" style=\"width: 100%\"/>\r\n </el-col>\r\n <el-col :span='2'>\r\n <div class=\"result\">{{ portX }}</div>\r\n </el-col>\r\n </el-row>\r\n <el-row v-show=\"portId\">\r\n <el-col :span='8'>Port Top</el-col>\r\n <el-col :span='12'>\r\n <el-slider size=\"mini\" :min='-5' :max='100' :step='1' v-model=\"portY\" style=\"width: 100%\"/>\r\n </el-col>\r\n <el-col :span='2'>\r\n <div class=\"result\">{{ portY }}</div>\r\n </el-col>\r\n </el-row>\r\n <el-row v-show=\"portId\">\r\n <el-col :span='10'>Port Color</el-col>\r\n <el-col :span='14'>\r\n <el-input size=\"mini\" type=\"color\" v-model=\"portColor\" style=\"width: 100%\" @change=\"onPortColorChange\"/>\r\n </el-col>\r\n </el-row>\r\n <el-row v-show=\"portId\">\r\n <el-col :span='10'>Port Fill</el-col>\r\n <el-col :span='14'>\r\n <el-input size=\"mini\" type=\"color\" v-model=\"portFill\" style=\"width: 100%\" @change=\"onPortFillChange\"/>\r\n </el-col>\r\n </el-row>\r\n <el-row>\r\n <el-col :span='8'>Node ZIndex</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-tab-pane>\r\n <el-tab-pane label=\"文本\" name=\"2\">\r\n <el-row>\r\n <el-col :span='8'>Font Size</el-col>\r\n <el-col :span='12'>\r\n <el-slider size=\"mini\" :min='8' :max='16' :step='1' v-model=\"nodeFontSize\" @change=\"onFontSizeChange\"/>\r\n </el-col>\r\n <el-col :span='2'>\r\n <div class=\"result\">{{ nodeFontSize }}</div>\r\n </el-col>\r\n </el-row>\r\n <el-row>\r\n <el-col :span='8'>Font Color</el-col>\r\n <el-col :span='14'>\r\n <el-input size=\"mini\" type=\"color\" v-model=\"nodeColor\" style=\"width: 100%\" @change=\"onColorChange\"/>\r\n </el-col>\r\n </el-row>\r\n </el-tab-pane>\r\n <el-tab-pane v-if=\"nodeType == 'text'\" label=\"属性\" name=\"3\">\r\n <el-row>\r\n <el-col :span='8'>Status</el-col>\r\n <el-col :span='14'>\r\n <el-select size=\"mini\" @change=\"onNodeStatusChange\" v-model=\"nodeStatus\" placeholder=\"请选择\">\r\n <el-option label=\"停止\" :value=\"0\" />\r\n <el-option label=\"运行\" :value=\"1\" />\r\n </el-select>\r\n </el-col>\r\n </el-row>\r\n <el-row>\r\n <el-col :span='8'>PointCode</el-col>\r\n <el-col :span='14'>\r\n <el-select size=\"mini\" @change=\"onNodePointCode\" v-model=\"nodePointCode\" placeholder=\"请选择\">\r\n <el-option label=\"52\" value=\"52\" />\r\n <el-option label=\"51\" value=\"51\" />\r\n </el-select>\r\n </el-col>\r\n </el-row>\r\n <el-row>\r\n <el-col :span='8'>FieldName</el-col>\r\n <el-col :span='14'>\r\n <el-select size=\"mini\" @change=\"onNodeFieldName\" v-model=\"nodeFieldName\" placeholder=\"请选择\">\r\n <el-option label=\"fieldName1\" value=\"fieldName1\" />\r\n <el-option label=\"fieldName2\" value=\"fieldName2\" />\r\n </el-select>\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 { nodeOpt } from \"./method\";\r\nexport default {\r\n data() {\r\n return {\r\n curCel: null,\r\n activeName: '1',\r\n isNodeFill: false\r\n }\r\n },\r\n props: { id: String },\r\n watch: {\r\n id: {\r\n handler() {\r\n this.curCel = nodeOpt(this.id, this.$store.state.flow)\r\n if(this.curCel) {\r\n this.ZIndex = this.curCel.getZIndex()\r\n this.isNodeFill = false\r\n if(this.nodeType == 'text') {\r\n this.curCel?.setData({\r\n status: this.nodeStatus ?? 0,\r\n pointCode: this.nodePointCode ?? '',\r\n fieldName: this.nodeFieldName ?? ''\r\n })\r\n }\r\n }\r\n },\r\n immediate: false,\r\n deep: true\r\n },\r\n portId: {\r\n handler() {\r\n if(this.portId) {\r\n const { x, y } = this.curCel?.getPortProp(this.portId)?.args\r\n if(x && y) {\r\n this.portX = parseInt(x.slice(0, -1))\r\n this.portY = parseInt(y.slice(0, -1))\r\n }\r\n }\r\n },\r\n immediate: false\r\n },\r\n portX: {\r\n handler() {\r\n this.curCel?.setPortProp(this.portId, 'args', { x: this.portX + '%', y: this.portY + '%' })\r\n },\r\n immediate: false\r\n },\r\n portY: {\r\n handler() {\r\n this.curCel?.setPortProp(this.portId, 'args', { x: this.portX + '%', y: this.portY + '%' })\r\n },\r\n immediate: false\r\n },\r\n ZIndex: {\r\n handler() {\r\n if(this.curCel) {\r\n this.curCel?.setZIndex(this.ZIndex)\r\n }\r\n },\r\n immediate: false\r\n },\r\n isNodeFill: {\r\n handler() {\r\n if(this.isNodeFill) {\r\n this.curCel?.attr('body/fill', 'transparent')\r\n } else {\r\n this.curCel?.attr('body/fill', '#fff')\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n computed: {\r\n nodeStroke: {\r\n get() {\r\n return this.$store.state.flow.nodeStroke\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeStroke', val)\r\n }\r\n },\r\n nodeStrokeWidth: {\r\n get() {\r\n return this.$store.state.flow.nodeStrokeWidth\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeStrokeWidth', val)\r\n }\r\n },\r\n nodeFill: {\r\n get() {\r\n return this.$store.state.flow.nodeFill\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeFill', val)\r\n }\r\n },\r\n // nodeImageWidth: {\r\n // get() {\r\n // return this.$store.state.flow.nodeImageWidth\r\n // },\r\n // set(val) {\r\n // this.$store.commit('flow/updatenodeImageWidth', val)\r\n // }\r\n // },\r\n // nodeImageHeight: {\r\n // get() {\r\n // return this.$store.state.flow.nodeImageHeight\r\n // },\r\n // set(val) {\r\n // this.$store.commit('flow/updatenodeImageHeight', val)\r\n // }\r\n // },\r\n portId: {\r\n get() {\r\n return this.$store.state.flow.portId\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateportId', val)\r\n }\r\n },\r\n portX: {\r\n get() {\r\n return this.$store.state.flow.portX\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateportX', val)\r\n }\r\n },\r\n portY: {\r\n get() {\r\n return this.$store.state.flow.portY\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateportY', val)\r\n }\r\n },\r\n portColor: {\r\n get() {\r\n return this.$store.state.flow.portColor\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateportColor', val)\r\n }\r\n },\r\n portFill: {\r\n get() {\r\n return this.$store.state.flow.portFill\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateportFill', 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 nodeFontSize: {\r\n get() {\r\n return this.$store.state.flow.nodeFontSize\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeFontSize', val)\r\n }\r\n },\r\n nodeColor: {\r\n get() {\r\n return this.$store.state.flow.nodeColor\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeColor', val)\r\n }\r\n },\r\n nodeStatus: {\r\n get() {\r\n return this.$store.state.flow.nodeStatus\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeStatus', val)\r\n }\r\n },\r\n nodePointCode: {\r\n get() {\r\n return this.$store.state.flow.nodePointCode\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodePointCode', val)\r\n }\r\n },\r\n nodeFieldName: {\r\n get() {\r\n return this.$store.state.flow.nodeFieldName\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeFieldName', val)\r\n }\r\n },\r\n nodeType: {\r\n get() {\r\n return this.$store.state.flow.nodeType\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatenodeType', val)\r\n }\r\n },\r\n },\r\n methods: {\r\n onStrokeChange () {\r\n this.curCel?.attr('body/stroke', this.nodeStroke)\r\n },\r\n\r\n onStrokeWidthChange () {\r\n this.curCel?.attr('body/strokeWidth', this.nodeStrokeWidth)\r\n },\r\n\r\n onFillChange () {\r\n this.curCel?.attr('body/fill', this.nodeFill)\r\n },\r\n\r\n // onImageWidth (e) {\r\n // this.curCel?.attr('image/width', this.nodeImageWidth)\r\n // },\r\n\r\n // onImageHeight (e) {\r\n // this.curCel?.attr('image/height', this.nodeImageHeight)\r\n // },\r\n\r\n onPortColorChange() {\r\n this.curCel?.setPortProp(this.portId, ['attrs', 'circle', 'stroke'], this.portColor)\r\n },\r\n\r\n onPortFillChange() {\r\n this.curCel?.setPortProp(this.portId, ['attrs', 'circle', 'fill'], this.portFill)\r\n },\r\n\r\n onFontSizeChange () {\r\n this.curCel?.attr('text/fontSize', this.nodeFontSize)\r\n },\r\n\r\n onColorChange () {\r\n this.curCel?.attr('text/fill', this.nodeColor)\r\n },\r\n\r\n onNodeStatusChange () {\r\n // this.curCel?.attr('data/status', this.nodeStatus)\r\n this.curCel?.setData({ status: this.nodeStatus })\r\n },\r\n onNodePointCode () {\r\n // this.curCel?.attr('data/pointCode', this.nodePointCode)\r\n this.curCel?.setData({ pointCode: this.nodePointCode })\r\n },\r\n onNodeFieldName () {\r\n // this.curCel?.attr('data/fieldName', this.nodeFieldName)\r\n this.curCel?.setData({ fieldName: this.nodeFieldName })\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.el-row {\r\n margin-bottom: 5px;\r\n}\r\n</style>\r\n"]}]}
|
