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