修复魔墙层级问题以及恢复问题

This commit is contained in:
miao 2023-02-24 16:38:42 +08:00
parent 77e270c6b2
commit da7a4bdd05
1 changed files with 163 additions and 109 deletions

View File

@ -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"
/>
<!-- -->
</div>
<div
style="
@ -335,7 +337,7 @@
@moveHandler="moveingMonitor(item, $event, index)"
@moveEndHandler="moveMonitor(item, $event)"
@mousedown="activeMouseDown(item, index)"
:z-index="item.active ? 99 : 0"
:z-index="sort_index.indexOf(item.uuid) ?? 0"
>
<div
class="full-height full-width"
@ -614,6 +616,14 @@
v-close-popup
@click="close_magic_switch()"
/>
<q-btn
:loading="loading"
flat
no-caps
:label="$t('clean screen')"
color="primary"
@click="closeAllWindows"
/>
<q-btn
:loading="loading"
flat
@ -822,8 +832,6 @@ export default defineComponent({
let wall: Ref<HTMLElement | null> = 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;