修复魔墙层级问题以及恢复问题
This commit is contained in:
miao
parent
77e270c6b2
commit
da7a4bdd05
|
|
@ -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,
|
||||
|
|
@ -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,20 +1350,34 @@ 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) {
|
||||
if (a == 1) {
|
||||
test_monitor_wall.value.forEach(async (element) => {
|
||||
let teph = element.InitialH;
|
||||
let tepw = element.InitialW;
|
||||
|
|
@ -1392,14 +1389,43 @@ export default defineComponent({
|
|||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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) => {
|
||||
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) => {
|
||||
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;
|
||||
}
|
||||
});
|
||||
if(a==2){
|
||||
realtime_upload();
|
||||
}
|
||||
},
|
||||
canel_active() {
|
||||
Unchecked.value = true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue