diff --git a/config/dev.env.js b/config/dev.env.js index 4b88297..1de90ec 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -4,7 +4,7 @@ const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', - //BASE_API: '"http://127.0.0.1:8080/xlyReport"', +// BASE_API: '"http://127.0.0.1:8080/xlyReport"', BASE_API: '"http://weberp.xlyprint.cn/xlyReport"', //API_WS: '"ws://127.0.0.1:8080/api/websocket"' }) diff --git a/src/utils/debounce.js b/src/utils/debounce.js new file mode 100644 index 0000000..afe29f1 --- /dev/null +++ b/src/utils/debounce.js @@ -0,0 +1,39 @@ +/** + * 防抖函数 + * @param func 用户传入的防抖函数 + * @param wait 等待的时间 + * @param immediate 是否立即执行 + */ +export const debounce = function(func, wait = 50, immediate = false) { + // 缓存一个定时器id + let timer = null + let result + const debounced = function(...args) { + // 如果已经设定过定时器了就清空上一次的定时器 + if (timer) { + clearTimeout(timer) + } + if (immediate) { + const callNow = !timer + // 等待wait的时间间隔后,timer为null的时候,函数才可以继续执行 + timer = setTimeout(() => { + timer = null + }, wait) + // 未执行过,执行 + if (callNow) result = func.apply(this, args) + } else { + // 开始一个定时器,延迟执行用户传入的方法 + timer = setTimeout(() => { + // 将实际的this和参数传入用户实际调用的函数 + func.apply(this, args) + }, wait) + } + return result + } + debounced.cancel = function() { + clearTimeout(timer) + timer = null + } + // 这里返回的函数时每次用户实际调用的防抖函数 + return debounced +} diff --git a/src/views/bigscreenDesigner/designer/components/customColorComponents.vue b/src/views/bigscreenDesigner/designer/components/customColorComponents.vue index da1ad74..4647d2e 100644 --- a/src/views/bigscreenDesigner/designer/components/customColorComponents.vue +++ b/src/views/bigscreenDesigner/designer/components/customColorComponents.vue @@ -8,7 +8,7 @@ @click="handleAddClick" >新增 - + diff --git a/src/views/bigscreenDesigner/designer/index.vue b/src/views/bigscreenDesigner/designer/index.vue index e592c84..edb237c 100644 --- a/src/views/bigscreenDesigner/designer/index.vue +++ b/src/views/bigscreenDesigner/designer/index.vue @@ -314,6 +314,7 @@ import { getToken } from "@/utils/auth"; import { Revoke } from "@/utils/revoke"; import { mapMutations } from 'vuex'; import process from "process"; +import { debounce } from '@/utils/debounce'; // 引入防抖函数 export default { name: "Login", @@ -378,7 +379,6 @@ export default { options: [], }, ], // 工作区中拖放的组件 - // 当前激活组件 widgetIndex: 0, // 当前激活组件右侧配置属性 @@ -395,6 +395,8 @@ export default { visibleContentMenu: false, rightClickIndex: -1, activeName: "first", + selectMore:[],//按住shift多选的图层 + shiftEnt:false,//shift键盘是否按住 }; }, computed: { @@ -467,6 +469,15 @@ export default { window.addEventListener("mouseup", () => { this.grade = false; }); + window.addEventListener('keydown', code => this.handleKeyDown(code)); // 监听键盘按下事件 + window.addEventListener('keyup', code => this.handleKeyUp(code)); // 监听键盘松开事件 + + }, + // 在beforeDestroy中 + beforeDestroy() { + // 销毁监听键盘事件 + window.removeEventListener('keydown', code => this.handleKeyDown(code)); + window.removeEventListener('keyup', code => this.handleKeyUp(code)); }, methods: { ...mapMutations('dataSource', ['SET_STATIC_DATA']), @@ -482,6 +493,19 @@ export default { } this.widgets = record; }, + // 监听按下键盘事件 + handleKeyDown: debounce(function(code) { + // 判断是否按住shift键,是就把pin赋值为true + if (code.keyCode === 16 && code.shiftKey) { + this.shiftEnt = true; + } + }, 500, true), + handleKeyUp: debounce(function(code) { + // 判断是否松开shift键,是就把pin赋值为false + if (code.keyCode === 16) { + this.shiftEnt = false; + } + }, 500, true), /** * @description: 重做 * @param {*} @@ -866,10 +890,12 @@ export default { }, // 如果是点击大屏设计器中的底层,加载大屏底层属性 setOptionsOnClickScreen() { - this.screenCode = "screen"; - // 选中不同的组件 右侧都显示第一栏 - this.activeName = "first"; - this.widgetOptions = getToolByCode("screen")["options"]; + if(!this.shiftEnt) { + this.screenCode = "screen"; + // 选中不同的组件 右侧都显示第一栏 + this.activeName = "first"; + this.widgetOptions = getToolByCode("screen")["options"]; + } }, getScreenData(data){ const screenData = {}; @@ -909,23 +935,37 @@ export default { }, widgetsClick(index) { const draggableArr = this.$refs.widgets; - for (let i = 0; i < draggableArr.length; i++) { - if (i == index) { - this.$refs.widgets[i].$refs.draggable.setActive(true); - } else { - this.$refs.widgets[i].$refs.draggable.setActive(false); + //判断是否按住了shift键盘 + if(this.shiftEnt){ + for (let i = 0; i < draggableArr.length; i++) { + if (i == index) { + this.$refs.widgets[i].$refs.draggable.setActive(true); + } + } + this.setOptionsOnClickWidget(index); + this.grade = true; + }else{ + //没有按住shift键标识编辑单个 + for (let i = 0; i < draggableArr.length; i++) { + if (i == index) { + this.$refs.widgets[i].$refs.draggable.setActive(true); + } else { + this.$refs.widgets[i].$refs.draggable.setActive(false); + } } + this.setOptionsOnClickWidget(index); + this.grade = true; } - this.setOptionsOnClickWidget(index); - this.grade = true; }, widgetsMouseup(e) { this.grade = false; }, handleMouseDown() { - const draggableArr = this.$refs.widgets; - for (let i = 0; i < draggableArr.length; i++) { - this.$refs.widgets[i].$refs.draggable.setActive(false); + if(!this.shiftEnt){ + const draggableArr = this.$refs.widgets; + for (let i = 0; i < draggableArr.length; i++) { + this.$refs.widgets[i].$refs.draggable.setActive(false); + } } }, setWidgetOptionsData(val){ @@ -1086,8 +1126,9 @@ export default { this.widgets.splice(index, 1); }, //输入ctrl+c - entryCopy(){ - this.copylayer(); + entryCopy(index){ + const obj = this.deepClone(this.widgets[index]); + this.widgets.splice(this.widgets.length, 0, obj); } }, }; diff --git a/src/views/bigscreenDesigner/designer/tools/index.js b/src/views/bigscreenDesigner/designer/tools/index.js index dc82f43..6056a21 100644 --- a/src/views/bigscreenDesigner/designer/tools/index.js +++ b/src/views/bigscreenDesigner/designer/tools/index.js @@ -108,6 +108,7 @@ const screenConfig = { value: '', }], position: [], + selectMore:[] } }