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;