From da7a4bdd057c236619850968774135da3886f5bc Mon Sep 17 00:00:00 2001 From: miao <2514145421@qq.com> Date: Fri, 24 Feb 2023 16:38:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=AD=94=E5=A2=99=E5=B1=82?= =?UTF-8?q?=E7=BA=A7=E9=97=AE=E9=A2=98=E4=BB=A5=E5=8F=8A=E6=81=A2=E5=A4=8D?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ControlPanelDialog.vue | 272 +++++++++++++++----------- 1 file changed, 163 insertions(+), 109 deletions(-) diff --git a/src/components/ControlPanelDialog.vue b/src/components/ControlPanelDialog.vue index 2003c28..95c033c 100644 --- a/src/components/ControlPanelDialog.vue +++ b/src/components/ControlPanelDialog.vue @@ -268,7 +268,8 @@ class="col" style="font-size: 0.7rem" v-model="percenter" - @update:model-value="changePercenter()" + @update:model-value="changePercenter(1)" + @change="changePercenter(2)" @keydown.prevent.stop.capture="testLog($event)" label :label-value="percenter" @@ -279,6 +280,7 @@ :max="2" :step="0.05" /> +
+ = ref(null); let current_index = ref(-1); let monitor_list_current_index = ref(-1); - const monitor_percenter = ref([0.1, 0.2, 0.3, 0.4, 0.5]); - const monitor_proportion = ref(["16:9", "4:3"]); let window_rect = reactive({ x: 0, y: 0, @@ -840,39 +848,7 @@ export default defineComponent({ const ch = 144; const model = ref(null); let magic_switch = ref(false); - const options = ref([ - { - id: "55", - w: 1214, - h: 684, - desc: "Google", - }, - { - id: "49", - w: 1078, - h: 608, - desc: "Facebook", - }, - { - id: "46", - w: 1022, - h: 577, - desc: "Twitter", - }, - { - id: "70", - w: 1920, - h: 1080, - desc: "Apple", - }, - // { - // id: '55', - // w:1214, - // h:684, - // desc: 'Oracle', - // inactive: true - // } - ]); + //调整与背景的百分比 const percenter = ref(1); let last_percenter = ref(1); @@ -907,7 +883,11 @@ export default defineComponent({ const filter_px = (val: number) => { return Math.round(val); }; - const realtime_upload = async () => { + const realtime_upload = async ( + WallList: any = test_monitor_wall.value, + per: number = percenter.value, + tep:number=1 + ) => { let client = GlobalData.getInstance().getCurrentClient(); const settings = await GlobalData.getInstance() .getCurrentClient() @@ -916,14 +896,12 @@ export default defineComponent({ output_length.value = parseInt(settings.wall_col.toString()) * parseInt(settings.wall_row.toString()); - if (output_length.value > test_monitor_list.value.length) { - let num = output_length.value - test_monitor_list.value.length; + if (output_length.value > WallList.length) { + let num = output_length.value - WallList.length; while (num > 0) { - let index = test_monitor_list.value.length; + let index = WallList.length; let uuid = (index + 1).toString(); - test_monitor_list.value.push( - new test_monitor(index, uuid, aw, ah, ar) - ); + WallList.push(new test_monitor(index, uuid, aw, ah, ar)); num--; } getpx(); @@ -936,7 +914,10 @@ export default defineComponent({ cloud_monitor_list.magic_wall_enable = true; cloud_monitor_list.col = parseInt(settings.wall_col.toString()); cloud_monitor_list.row = parseInt(settings.wall_row.toString()); - test_monitor_wall.value.forEach((element, index) => { + if(tep==1){ + WallList = ordination(WallList); + } + WallList.forEach((element: any, index: number) => { if (element.isShow) { cloud_monitor_list.windows.push({ index: element.id, @@ -949,7 +930,7 @@ export default defineComponent({ angle: parseInt(element.angle.toString()), initial_h: element.InitialH, initial_w: element.InitialW, - percenter: percenter.value, + percenter: per, background_h: wall_dom.offsetHeight, background_w: wall_dom.offsetWidth, }); @@ -960,7 +941,7 @@ export default defineComponent({ const setMagic = await client.setMagicWallConfig(cloud_monitor_list); if (setMagic?.success) { let monitorList: any = []; - test_monitor_wall.value.forEach((element, index) => { + WallList.forEach((element: any, index: number) => { if (element.isShow && wall_dom) { monitorList.push({ id: element.id, @@ -969,8 +950,8 @@ export default defineComponent({ h: element.h / wall_dom.offsetHeight, w: element.w / wall_dom.offsetWidth, angle: parseInt(element.angle.toString()), - centerx: element.centerx / 3840, - centery: element.centery / 2160, + centerx: element.centerx / 3840, + centery: element.centery / 2160, }); } }); @@ -1359,7 +1340,9 @@ export default defineComponent({ test_monitor_list.value[index].isactive = true; }; let test_delete_flag = false; + let isupdata=(false); const refresh_all = () => { + refresh_resize(2); test_monitor_wall.value = []; current_index.value = -1; monitor_list_current_index.value=-1 @@ -1367,39 +1350,82 @@ export default defineComponent({ multiple_select.value = []; multiple.value = false; loading.value = false; - test_monitor_list.value.forEach((element) => { - element.isHide = false; - element.isactive=false; - }); - last_wall.value.forEach((element) => { - element.isShow = true; - test_monitor_wall.value.push(JSON.parse(JSON.stringify(element))); - test_monitor_list.value[element.id].isHide = true; - }); - realtime_upload(); + // test_monitor_list.value.forEach((element) => { + // element.isHide = false; + // element.isactive=false; + // }); + // last_wall.value.forEach((element) => { + // element.isShow = true; + // test_monitor_wall.value.push(JSON.parse(JSON.stringify(element))); + // test_monitor_list.value[element.id].isHide = true; + // }); + realtime_upload(last_wall.value,last_percenter.value,2); + isupdata=true; }; - EventBus.getInstance().on(EventNamesDefine.WindowResize, () => { + let sort_index: any = ref([]); + let old_sort_index: any = []; + + const ordination = (wall_list: any, sort: any = sort_index.value) => { + let temp_list: test_monitor[] = []; + + wall_list.forEach((ele: any, index: number) => { + let i = sort.indexOf(ele.uuid); + temp_list[i] = wall_list[index]; + }); + return temp_list; + }; + const refresh_resize = (a: number) => { const wall_dom = wall.value; if (wall_dom) { - test_monitor_wall.value.forEach(async (element) => { - let teph = element.InitialH; - let tepw = element.InitialW; - element.InitialH = wall_dom.offsetHeight * element.resizeh; - element.InitialW = wall_dom.offsetWidth * element.resizew; - element.h = element.InitialH * percenter.value; - element.w = element.InitialW * percenter.value; - let sizeh = element.InitialH / teph; - let sizew = element.InitialW / tepw; - element.currentx = element.currentx * sizew; - element.currenty = element.currenty * sizeh; - element.centerx = - Math.round(((element.currentx + element.w / 2) / wall_dom.offsetWidth) * 3840); - element.centery = - Math.round(((element.currenty + element.h / 2) / wall_dom.offsetHeight) * 2160); - }); + if (a == 1) { + test_monitor_wall.value.forEach(async (element) => { + let teph = element.InitialH; + let tepw = element.InitialW; + element.InitialH = wall_dom.offsetHeight * element.resizeh; + element.InitialW = wall_dom.offsetWidth * element.resizew; + element.h = element.InitialH * percenter.value; + element.w = element.InitialW * percenter.value; + let sizeh = element.InitialH / teph; + let sizew = element.InitialW / tepw; + element.currentx = element.currentx * sizew; + element.currenty = element.currenty * sizeh; + element.centerx = Math.round( + ((element.currentx + element.w / 2) / wall_dom.offsetWidth) * 3840 + ); + element.centery = Math.round( + ((element.currenty + element.h / 2) / wall_dom.offsetHeight) * + 2160 + ); + }); + } + + if (a == 2) { + last_wall.value.forEach((ele) => { + let teph = ele.InitialH; + let tepw = ele.InitialW; + ele.InitialH = wall_dom.offsetHeight * ele.resizeh; + ele.InitialW = wall_dom.offsetWidth * ele.resizew; + ele.h = ele.InitialH * percenter.value; + ele.w = ele.InitialW * percenter.value; + let sizeh = ele.InitialH / teph; + let sizew = ele.InitialW / tepw; + ele.currentx = ele.currentx * sizew; + ele.currenty = ele.currenty * sizeh; + ele.centerx = Math.round( + ((ele.currentx + ele.w / 2) / wall_dom.offsetWidth) * 3840 + ); + ele.centery = Math.round( + ((ele.currenty + ele.h / 2) / wall_dom.offsetHeight) * 2160 + ); + }); + } } + }; + EventBus.getInstance().on(EventNamesDefine.WindowResize, () => { + refresh_resize(1); }); const refresh_magic = (a: any) => { + sort_index.value=[] let monitorList: any = []; $store.commit("setShowMonitorList", monitorList); if (a) { @@ -1439,20 +1465,23 @@ export default defineComponent({ item.currentx = element.lt.x * wall_dom.offsetWidth; item.currenty = element.lt.y * wall_dom.offsetHeight; percenter.value = parseFloat(element.percenter.toString()); - last_percenter.value = percenter.value; item.InitialH = element.initial_h * sizeh; item.InitialW = element.initial_w * sizew; item.h = item.InitialH * percenter.value; item.w = item.InitialW * percenter.value; item.resizew = item.InitialW / wall_dom.offsetWidth; item.resizeh = item.InitialH / wall_dom.offsetHeight; - item.centerx = - Math.round(((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840); - item.centery = - Math.round(((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160); + item.centerx = Math.round( + ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840 + ); + item.centery = Math.round( + ((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160 + ); item.angle = element.angle; item.isShow = true; test_monitor_wall.value.push(JSON.parse(JSON.stringify(item))); + + sort_index.value.push(test_monitor_list.value[element.index].uuid); test_monitor_list.value.forEach((ele) => { if (element.index == ele.id) { ele.isHide = true; @@ -1478,7 +1507,8 @@ export default defineComponent({ } tep_item.centerx--; tep_item.currentx = - (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2; + (tep_item.centerx / 3840) * wall_dom.offsetWidth - + tep_item.w / 2; } } }); @@ -1487,7 +1517,7 @@ export default defineComponent({ if (item.centerx > min) { item.centerx--; item.currentx = - (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2; + (item.centerx / 3840) * wall_dom.offsetWidth - item.w / 2; } } } @@ -1511,7 +1541,7 @@ export default defineComponent({ tep_item.centery--; tep_item.currenty = (tep_item.centery / 2160) * wall_dom.offsetHeight - - tep_item.h/2; + tep_item.h / 2; } } }); @@ -1520,8 +1550,7 @@ export default defineComponent({ if (item.centery > min) { item.centery--; item.currenty = - (item.centery / 2160) * wall_dom.offsetHeight - - item.h/2; + (item.centery / 2160) * wall_dom.offsetHeight - item.h / 2; } } } @@ -1544,7 +1573,8 @@ export default defineComponent({ const wall_dom = wall.value; if (wall_dom) { tep_item.currentx = - (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2; + (tep_item.centerx / 3840) * wall_dom.offsetWidth - + tep_item.w / 2; } } } @@ -1556,7 +1586,7 @@ export default defineComponent({ const wall_dom = wall.value; if (wall_dom) { item.currentx = - (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2; + (item.centerx / 3840) * wall_dom.offsetWidth - item.w / 2; } } } @@ -1580,7 +1610,7 @@ export default defineComponent({ tep_item.centery++; tep_item.currenty = (tep_item.centery / 2160) * wall_dom.offsetHeight - - tep_item.h/2; + tep_item.h / 2; } } }); @@ -1589,7 +1619,7 @@ export default defineComponent({ if (item.centery < max) { item.centery++; item.currenty = - (item.centery / 2160) * wall_dom.offsetHeight - item.h/2; + (item.centery / 2160) * wall_dom.offsetHeight - item.h / 2; } } } @@ -1617,8 +1647,7 @@ export default defineComponent({ if (temp.key == "magic_wall_config") { const a = JSON.parse(temp.value).windows; if ( - current_index.value == -1 || - multiple_select.value.length < 1 + true ) { refresh_magic(a); } @@ -1644,18 +1673,13 @@ export default defineComponent({ getpx, lcm, model, - options, offsetHeight, offsetWidth, filter_px, activeMonitorList, - monitor_percenter, - monitor_proportion, output_length, multiple_select, multiple, - exceedrange, - four_point, show_dialog, loading, window_rect, @@ -1667,14 +1691,14 @@ export default defineComponent({ percenter, last_percenter, wall, - set_x, min_x, max_x, - set_y, min_y, max_y, moveMonitor, moveingMonitor, + sort_index, + ordination, loga(a: any) { console.log(a); }, @@ -1682,6 +1706,9 @@ export default defineComponent({ monitor_list_current_index.value = -1; show_dialog.value = true; magic_switch.value = true; + sort_index.value = []; + old_sort_index=[] + last_wall.value=[] let client = GlobalData.getInstance().getCurrentClient(); if (client) { const settings = await GlobalData.getInstance() @@ -1724,6 +1751,7 @@ export default defineComponent({ multiple_select.value = []; multiple.value = false; last_wall.value = []; + sort_index.value = []; test_monitor_list.value.forEach((element) => { element.isHide = false; }); @@ -1755,6 +1783,12 @@ export default defineComponent({ item.isShow = true; test_monitor_wall.value.push(JSON.parse(JSON.stringify(item))); last_wall.value.push(JSON.parse(JSON.stringify(item))); + sort_index.value.push( + test_monitor_list.value[element.index].uuid + ); + old_sort_index.push( + test_monitor_list.value[element.index].uuid + ); test_monitor_list.value.forEach((ele) => { if (element.index == ele.id) { ele.isHide = true; @@ -1771,6 +1805,8 @@ export default defineComponent({ } }, resetData() { + old_sort_index = []; + sort_index.value = []; test_monitor_wall.value = []; current_index.value = -1; percenter.value = 1; @@ -1796,6 +1832,7 @@ export default defineComponent({ cloud_monitor_list.magic_wall_enable = true; cloud_monitor_list.col = parseInt(settings.wall_col.toString()); cloud_monitor_list.row = parseInt(settings.wall_row.toString()); + test_monitor_wall.value = ordination(test_monitor_wall.value); test_monitor_wall.value.forEach((element, index) => { if (element.isShow) { cloud_monitor_list.windows.push({ @@ -1853,6 +1890,14 @@ export default defineComponent({ activeMouseDown(item: test_monitor, index: number) { item.active = true; Unchecked.value = false; + current_index.value = index; + const temp_index = sort_index.value.findIndex( + (v: any) => v == item.uuid + ); + if (temp_index != -1) { + sort_index.value.splice(temp_index, 1); + sort_index.value.push(item.uuid); + } if (multiple.value) { if (multiple_select.value.indexOf(index) != -1) { test_monitor_wall.value[index].active = false; @@ -1865,16 +1910,15 @@ export default defineComponent({ } else { multiple_select.value = []; if (item.active) { - test_monitor_wall.value.forEach((element) => { - element.active = false; + test_monitor_wall.value.forEach((element, i) => { + if (i != index) { + element.active = false; + } }); multiple_select.value.push(index); + current_index.value = sort_index.value.indexOf(item.uuid); } - item.active = true; } - item.active = true; - - current_index.value = index; }, onDragStart(e: DragEvent, item: test_monitor) { item.start_x = e.offsetX; @@ -1947,6 +1991,7 @@ export default defineComponent({ } else { if (test_monitor_wall.value.indexOf(item) == -1) { test_monitor_wall.value.push(item); + sort_index.value.push(item.uuid); test_delete_flag = true; } current_index.value = test_monitor_wall.value.length - 1; @@ -1988,6 +2033,8 @@ export default defineComponent({ test_monitor_list.value[item.id] = JSON.parse( JSON.stringify(test_monitor_wall.value[index]) ); + const temp_index = sort_index.value.indexOf(item.uuid); + sort_index.value.splice(temp_index, 1); test_monitor_list.value[item.id].isHide = false; test_monitor_wall.value[index].isShow = false; multiple_select.value = []; @@ -2003,15 +2050,20 @@ export default defineComponent({ test_monitor_list.value.forEach((element) => { element.isHide = false; }); - test_monitor_wall.value.forEach((element) => { - element.isShow = false; + test_monitor_wall.value.forEach((element, i) => { + if (index != i) { + element.isShow = false; + } }); + sort_index.value = [item.uuid]; test_monitor_list.value[item.id].isHide = true; test_monitor_wall.value[index].isShow = true; realtime_upload(); + current_index.value = sort_index.value.indexOf(item.uuid); }, //cache和与主存间的地址映射由硬件自动完成 closeAllWindows() { + sort_index.value = []; current_index.value = -1; test_monitor_wall.value.forEach((ele) => { ele.cmh = Math.round(ele.h / lcm.value); @@ -2066,7 +2118,7 @@ export default defineComponent({ } realtime_upload(); }, - changePercenter() { + changePercenter(a:number) { const wall_dom = wall.value; let tep = false; test_monitor_wall.value.forEach((element) => { @@ -2096,7 +2148,9 @@ export default defineComponent({ tep = true; } }); - realtime_upload(); + if(a==2){ + realtime_upload(); + } }, canel_active() { Unchecked.value = true;