| 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\\ConfigGrid\\index.vue?vue&type=style&index=0&id=e9be8a5c&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\\ConfigGrid\\index.vue","mtime":1688986880013},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi54Ni1ncmFwaHsNCiAgaGVpZ2h0OiA4MDBweCAhaW1wb3J0YW50Ow0KfQ0KDQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAodA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/system/processModeling/flow-x6/components/ConfigPanel/ConfigGrid","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 <el-row align=\"middle\">\r\n <el-col :span='24'>\r\n <el-checkbox v-model=\"showGrid\">\r\n Show Grid\r\n </el-checkbox>\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\" v-show=\"showGrid\">\r\n <el-col :span='10'>Grid Type</el-col>\r\n <el-col :span='12'>\r\n <el-select style=\"width: 100%\" v-model=\"type\">\r\n <el-option :value=\"GRID_TYPE.DOT\">Dot</el-option>\r\n <el-option :value=\"GRID_TYPE.FIXED_DOT\">Fixed Dot</el-option>\r\n <el-option :value=\"GRID_TYPE.MESH\" default>Mesh</el-option>\r\n <el-option :value=\"GRID_TYPE.DOUBLE_MESH\">Double Mesh</el-option>\r\n </el-select>\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\" v-show=\"showGrid\">\r\n <el-col :span='10'>Grid Size</el-col>\r\n <el-col :span='10'>\r\n <el-slider :min='9' :max='20' :step='1' v-model=\"size\" />\r\n </el-col>\r\n <el-col :span='2'>\r\n <div class=\"result\">{{size}}</div>\r\n </el-col>\r\n </el-row>\r\n <div v-if=\"type === 'doubleMesh' && showGrid\">\r\n <el-row align=\"middle\">\r\n <el-col :span='10'>Primary Color</el-col>\r\n <el-col :span='12'>\r\n <el-input\r\n type=\"color\"\r\n v-model=\"color\"\r\n style=\"width: 100%\"\r\n />\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\">\r\n <el-col :span='10'>Primary Thickness</el-col>\r\n <el-col :span='10'>\r\n <el-slider :min='0.5' :max='10' :step='0.5 ' v-model=\"thickness\" />\r\n </el-col>\r\n <el-col :span=2>\r\n <div class=\"result\">{{ thickness.toFixed(1) }}</div>\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\">\r\n <el-col :span='10'>Secondary Color</el-col>\r\n <el-col :span='12'>\r\n <el-input type=\"color\" v-model=\"colorSecond\" style=\"width: 100%\" />\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\">\r\n <el-col :span='10'>Secondary Thickness</el-col>\r\n <el-col :span='10'>\r\n <el-slider\r\n :min='1.5'\r\n :max='10'\r\n :step='0.5'\r\n v-model=\"thicknessSecond\"\r\n />\r\n </el-col>\r\n <el-col :span=2>\r\n <div class=\"result\">{{ thicknessSecond.toFixed(1) }}</div>\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\">\r\n <el-col :span='10'>Scale Factor</el-col>\r\n <el-col :span='10'>\r\n <el-slider\r\n :min='1'\r\n :max='10'\r\n :step='1'\r\n v-model=\"factor\"\r\n />\r\n </el-col>\r\n <el-col :span='2'>\r\n <div class=\"result\">{{ factor }}</div>\r\n </el-col>\r\n </el-row>\r\n </div>\r\n <div v-else>\r\n <el-row align=\"middle\" v-show=\"showGrid\">\r\n <el-col :span='10'>Grid Color</el-col>\r\n <el-col :span='12'>\r\n <el-input type=\"color\" v-model=\"color\" style=\"width: 100%\" />\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\" v-show=\"showGrid\">\r\n <el-col :span='10'>Thickness</el-col>\r\n <el-col :span='10'>\r\n <el-slider :min='0.5' :max='10' :step='0.5' v-model=\"thickness\" />\r\n </el-col>\r\n <el-col :span=1>\r\n <div class=\"result\">{{thickness.toFixed(1)}}</div>\r\n </el-col>\r\n </el-row>\r\n </div>\r\n </el-tab-pane>\r\n\r\n <el-tab-pane label=\"背景\" name=\"2\">\r\n <el-row align=\"middle\">\r\n <el-col :span=6>Color</el-col>\r\n <el-col :span=14>\r\n <el-input type=\"color\" v-model=\"bgColor\" style= \"width: 100%\" />\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\">\r\n <el-col :span=\"14\" :offset=\"6\">\r\n <el-checkbox v-model=\"showImage\">\r\n Show Image\r\n </el-checkbox>\r\n </el-col>\r\n </el-row>\r\n <div v-if=\"showImage\">\r\n <el-row align=\"middle\">\r\n <el-col :span='6'>Repeat</el-col>\r\n <el-col :span='14'>\r\n <el-select style=\"width: 100%\" v-model=\"repeat\">\r\n <el-option :value=\"REPEAT_TYPE.NO_REPEAT\">No Repeat</el-option>\r\n <el-option :value=\"REPEAT_TYPE.REPEAT\">Repeat</el-option>\r\n <el-option :value=\"REPEAT_TYPE.REPEAT_X\">Repeat X</el-option>\r\n <el-option :value=\"REPEAT_TYPE.REPEAT_Y\">Repeat Y</el-option>\r\n <el-option :value=\"REPEAT_TYPE.ROUND\">Round</el-option>\r\n <el-option :value=\"REPEAT_TYPE.SPACE\">Space</el-option>\r\n <el-option :value=\"REPEAT_TYPE.FLIPX\">Flip X</el-option>\r\n <el-option :value=\"REPEAT_TYPE.FLIPY\">Flip Y</el-option>\r\n <el-option :value=\"REPEAT_TYPE.FLIPXY\">Flip XY</el-option>\r\n <el-option :value=\"REPEAT_TYPE.WATERMARK\">Watermark</el-option>\r\n </el-select>\r\n </el-col>\r\n </el-row>\r\n <div v-if=\"repeat === 'watermark'\">\r\n <el-row align=\"middle\">\r\n <el-col :span='16' :offset='6' style=\"font-size: 12px\">\r\n Watermark Angle\r\n </el-col>\r\n <el-col :span='14' :offset='6'>\r\n <el-slider :min='0' :max='360' :step='1' v-model=\"angle\" />\r\n </el-col>\r\n <el-col :span=2>\r\n <div class=\"result\">{{angle}}</div>\r\n </el-col>\r\n </el-row>\r\n </div>\r\n\r\n <el-row align=\"middle\">\r\n <el-col :span='6'>Position</el-col>\r\n <el-col :span='14'>\r\n <el-select style=\"width: 100%\" v-model=\"position\">\r\n <el-option value=\"center\">center</el-option>\r\n <el-option value=\"left\">left</el-option>\r\n <el-option value=\"right\">right</el-option>\r\n <el-option value=\"top\">top</el-option>\r\n <el-option value=\"bottom\">bottom</el-option>\r\n <el-option value=\"50px 50px\">50px 50px</el-option>\r\n <el-option :value=\"JSON.stringify({ x: 50, y: 50 })\">\r\n {`{ x: 50, y: 50 }`}\r\n </el-option>\r\n </el-select>\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\">\r\n <el-col :span='6'>Size</el-col>\r\n <el-col :span='14'>\r\n <el-select style=\"width: 100%\" v-model=\"bgSize\" >\r\n <el-option value=\"auto auto\">auto auto</el-option>\r\n <el-option value=\"cover\">cover</el-option>\r\n <el-option value=\"contain\">contain</el-option>\r\n <el-option value=\"30px 30px\">30px 30px</el-option>\r\n <el-option value=\"100% 100%\">100% 100%</el-option>\r\n <el-option :value=\"JSON.stringify({ width: 150, height: 150 })\">\r\n {`{width: 150, height: 150 }`}\r\n </el-option>\r\n </el-select>\r\n </el-col>\r\n </el-row>\r\n <el-row align=\"middle\">\r\n <el-col :span='6'>Opacity</el-col>\r\n <el-col :span='12'>\r\n <el-slider\r\n :min='0.05'\r\n :max='1'\r\n :step='0.05'\r\n v-model=\"opacity\"\r\n />\r\n </el-col>\r\n <el-col :span=4>\r\n <div class=\"result\">{{ opacity.toFixed(2) }}</div>\r\n </el-col>\r\n </el-row>\r\n </div>\r\n </el-tab-pane>\r\n </el-tabs>\r\n </div> \r\n</template>\r\n\r\n<script>\r\nimport GridOption from './method'\r\nconst GRID_TYPE_ENUM = {\r\n DOT : 'dot',\r\n FIXED_DOT : 'fixedDot',\r\n MESH : 'mesh',\r\n DOUBLE_MESH : 'doubleMesh',\r\n}\r\nconst REPEAT_TYPE_ENUM = {\r\n NO_REPEAT : 'no-repeat',\r\n REPEAT : 'repeat',\r\n REPEAT_X : 'repeat-x',\r\n REPEAT_Y : 'repeat-y',\r\n ROUND : 'round',\r\n SPACE : 'space',\r\n FLIPX : 'flipX',\r\n FLIPY : 'flipY',\r\n FLIPXY : 'flipXY',\r\n WATERMARK : 'watermark',\r\n}\r\nexport default {\r\n data() {\r\n return {\r\n GRID_TYPE: GRID_TYPE_ENUM,\r\n REPEAT_TYPE: REPEAT_TYPE_ENUM,\r\n activeName: '1'\r\n }\r\n },\r\n computed: {\r\n showGrid: {\r\n get() {\r\n return this.$store.state.flow.showGrid\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateshowGrid', val)\r\n }\r\n },\r\n type: {\r\n get() {\r\n return this.$store.state.flow.type\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatetype', val)\r\n }\r\n },\r\n size: {\r\n get() {\r\n return this.$store.state.flow.size\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatesize', val)\r\n }\r\n },\r\n color: {\r\n get() {\r\n return this.$store.state.flow.color\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatecolor', val)\r\n }\r\n },\r\n thickness: {\r\n get() {\r\n return this.$store.state.flow.thickness\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatethickness', val)\r\n }\r\n },\r\n colorSecond: {\r\n get() {\r\n return this.$store.state.flow.colorSecond\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatecolorSecond', val)\r\n }\r\n },\r\n thicknessSecond: {\r\n get() {\r\n return this.$store.state.flow.thicknessSecond\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatethicknessSecond', val)\r\n }\r\n },\r\n factor: {\r\n get() {\r\n return this.$store.state.flow.factor\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatefactor', val)\r\n }\r\n },\r\n bgColor: {\r\n get() {\r\n return this.$store.state.flow.bgColor\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatebgColor', val)\r\n }\r\n },\r\n showImage: {\r\n get() {\r\n return this.$store.state.flow.showImage\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateshowImage', val)\r\n }\r\n },\r\n repeat: {\r\n get() {\r\n return this.$store.state.flow.repeat\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updaterepeat', val)\r\n }\r\n },\r\n angle: {\r\n get() {\r\n return this.$store.state.flow.angle\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateangle', val)\r\n }\r\n },\r\n position: {\r\n get() {\r\n return this.$store.state.flow.position\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateposition', val)\r\n }\r\n },\r\n bgSize: {\r\n get() {\r\n return this.$store.state.flow.bgSize\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updatebgSize', val)\r\n }\r\n },\r\n opacity: {\r\n get() {\r\n return this.$store.state.flow.opacity\r\n },\r\n set(val) {\r\n this.$store.commit('flow/updateopacity', val)\r\n }\r\n }\r\n },\r\n watch: {\r\n 'showGrid': {\r\n handler() {\r\n GridOption.isShowGrid(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'type': {\r\n handler() {\r\n GridOption.gridOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'color': {\r\n handler() {\r\n GridOption.gridOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'thickness': {\r\n handler() {\r\n GridOption.gridOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'thicknessSecond': {\r\n handler() {\r\n GridOption.gridOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'colorSecond': {\r\n handler() {\r\n GridOption.gridOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'factor': {\r\n handler() {\r\n GridOption.gridOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'bgColor': {\r\n handler() {\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'showImage': {\r\n handler() {\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'repeat': {\r\n handler() {\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'angle': {\r\n handler() {\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'bgSize': {\r\n handler() {\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'position': {\r\n handler() {\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'opacity': {\r\n handler() {\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n 'size': {\r\n handler() {\r\n GridOption.setGridSize(this.$store.state.flow)\r\n },\r\n immediate: false,\r\n deep: false\r\n },\r\n },\r\n created() {\r\n GridOption.gridOpt(this.$store.state.flow)\r\n GridOption.setGridSize(this.$store.state.flow)\r\n GridOption.backGroundOpt(this.$store.state.flow)\r\n GridOption.isShowGrid(this.$store.state.flow)\r\n }\r\n}\r\n</script>\r\n<style scoped>\r\n.x6-graph{\r\n height: 800px !important;\r\n}\r\n\r\n</style>\r\n"]}]}
|
