lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
src/components/ControlPanelDialog.vue
View File

@ -268,7 +268,8 @@
class="col" class="col"
style="font-size: 0.7rem" style="font-size: 0.7rem"
v-model="percenter" v-model="percenter"
@update:model-value="changePercenter()" @update:model-value="changePercenter(1)"
@change="changePercenter(2)"
@keydown.prevent.stop.capture="testLog($event)" @keydown.prevent.stop.capture="testLog($event)"
label label
:label-value="percenter" :label-value="percenter"
@ -279,6 +280,7 @@
:max="2" :max="2"
:step="0.05" :step="0.05"
/> />
<!-- -->
</div> </div>
<div <div
style=" style="
@ -335,7 +337,7 @@
@moveHandler="moveingMonitor(item, $event, index)" @moveHandler="moveingMonitor(item, $event, index)"
@moveEndHandler="moveMonitor(item, $event)" @moveEndHandler="moveMonitor(item, $event)"
@mousedown="activeMouseDown(item, index)" @mousedown="activeMouseDown(item, index)"
:z-index="item.active ? 99 : 0" :z-index="sort_index.indexOf(item.uuid) ?? 0"
> >
<div <div
class="full-height full-width" class="full-height full-width"
@ -614,6 +616,14 @@
v-close-popup v-close-popup
@click="close_magic_switch()" @click="close_magic_switch()"
/> />
<q-btn
:loading="loading"
flat
no-caps
:label="$t('clean screen')"
color="primary"
@click="closeAllWindows"
/>
<q-btn <q-btn
:loading="loading" :loading="loading"
flat flat
@ -822,8 +832,6 @@ export default defineComponent({
let wall: Ref<HTMLElement | null> = ref(null); let wall: Ref<HTMLElement | null> = ref(null);
let current_index = ref(-1); let current_index = ref(-1);
let monitor_list_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({ let window_rect = reactive({
x: 0, x: 0,
y: 0, y: 0,
@ -840,39 +848,7 @@ export default defineComponent({
const ch = 144; const ch = 144;
const model = ref(null); const model = ref(null);
let magic_switch = ref(false); 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); const percenter = ref(1);
let last_percenter = ref(1); let last_percenter = ref(1);
@ -907,7 +883,11 @@ export default defineComponent({
const filter_px = (val: number) => { const filter_px = (val: number) => {
return Math.round(val); 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(); let client = GlobalData.getInstance().getCurrentClient();
const settings = await GlobalData.getInstance() const settings = await GlobalData.getInstance()
.getCurrentClient() .getCurrentClient()
@ -916,14 +896,12 @@ export default defineComponent({
output_length.value = output_length.value =
parseInt(settings.wall_col.toString()) * parseInt(settings.wall_col.toString()) *
parseInt(settings.wall_row.toString()); parseInt(settings.wall_row.toString());
if (output_length.value > test_monitor_list.value.length) { if (output_length.value > WallList.length) {
let num = output_length.value - test_monitor_list.value.length; let num = output_length.value - WallList.length;
while (num > 0) { while (num > 0) {
let index = test_monitor_list.value.length; let index = WallList.length;
let uuid = (index + 1).toString(); let uuid = (index + 1).toString();
test_monitor_list.value.push( WallList.push(new test_monitor(index, uuid, aw, ah, ar));
new test_monitor(index, uuid, aw, ah, ar)
);
num--; num--;
} }
getpx(); getpx();
@ -936,7 +914,10 @@ export default defineComponent({
cloud_monitor_list.magic_wall_enable = true; cloud_monitor_list.magic_wall_enable = true;
cloud_monitor_list.col = parseInt(settings.wall_col.toString()); cloud_monitor_list.col = parseInt(settings.wall_col.toString());
cloud_monitor_list.row = parseInt(settings.wall_row.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) { if (element.isShow) {
cloud_monitor_list.windows.push({ cloud_monitor_list.windows.push({
index: element.id, index: element.id,
@ -949,7 +930,7 @@ export default defineComponent({
angle: parseInt(element.angle.toString()), angle: parseInt(element.angle.toString()),
initial_h: element.InitialH, initial_h: element.InitialH,
initial_w: element.InitialW, initial_w: element.InitialW,
percenter: percenter.value, percenter: per,
background_h: wall_dom.offsetHeight, background_h: wall_dom.offsetHeight,
background_w: wall_dom.offsetWidth, background_w: wall_dom.offsetWidth,
}); });
@ -960,7 +941,7 @@ export default defineComponent({
const setMagic = await client.setMagicWallConfig(cloud_monitor_list); const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
if (setMagic?.success) { if (setMagic?.success) {
let monitorList: any = []; let monitorList: any = [];
test_monitor_wall.value.forEach((element, index) => { WallList.forEach((element: any, index: number) => {
if (element.isShow && wall_dom) { if (element.isShow && wall_dom) {
monitorList.push({ monitorList.push({
id: element.id, id: element.id,
@ -1359,7 +1340,9 @@ export default defineComponent({
test_monitor_list.value[index].isactive = true; test_monitor_list.value[index].isactive = true;
}; };
let test_delete_flag = false; let test_delete_flag = false;
let isupdata=(false);
const refresh_all = () => { const refresh_all = () => {
refresh_resize(2);
test_monitor_wall.value = []; test_monitor_wall.value = [];
current_index.value = -1; current_index.value = -1;
monitor_list_current_index.value=-1 monitor_list_current_index.value=-1
@ -1367,20 +1350,34 @@ export default defineComponent({
multiple_select.value = []; multiple_select.value = [];
multiple.value = false; multiple.value = false;
loading.value = false; loading.value = false;
test_monitor_list.value.forEach((element) => { // test_monitor_list.value.forEach((element) => {
element.isHide = false; // element.isHide = false;
element.isactive=false; // element.isactive=false;
}); // });
last_wall.value.forEach((element) => { // last_wall.value.forEach((element) => {
element.isShow = true; // element.isShow = true;
test_monitor_wall.value.push(JSON.parse(JSON.stringify(element))); // test_monitor_wall.value.push(JSON.parse(JSON.stringify(element)));
test_monitor_list.value[element.id].isHide = true; // test_monitor_list.value[element.id].isHide = true;
}); // });
realtime_upload(); 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; const wall_dom = wall.value;
if (wall_dom) { if (wall_dom) {
if (a == 1) {
test_monitor_wall.value.forEach(async (element) => { test_monitor_wall.value.forEach(async (element) => {
let teph = element.InitialH; let teph = element.InitialH;
let tepw = element.InitialW; let tepw = element.InitialW;
@ -1392,14 +1389,43 @@ export default defineComponent({
let sizew = element.InitialW / tepw; let sizew = element.InitialW / tepw;
element.currentx = element.currentx * sizew; element.currentx = element.currentx * sizew;
element.currenty = element.currenty * sizeh; element.currenty = element.currenty * sizeh;
element.centerx = element.centerx = Math.round(
Math.round(((element.currentx + element.w / 2) / wall_dom.offsetWidth) * 3840); ((element.currentx + element.w / 2) / wall_dom.offsetWidth) * 3840
element.centery = );
Math.round(((element.currenty + element.h / 2) / wall_dom.offsetHeight) * 2160); 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) => { const refresh_magic = (a: any) => {
sort_index.value=[]
let monitorList: any = []; let monitorList: any = [];
$store.commit("setShowMonitorList", monitorList); $store.commit("setShowMonitorList", monitorList);
if (a) { if (a) {
@ -1439,20 +1465,23 @@ export default defineComponent({
item.currentx = element.lt.x * wall_dom.offsetWidth; item.currentx = element.lt.x * wall_dom.offsetWidth;
item.currenty = element.lt.y * wall_dom.offsetHeight; item.currenty = element.lt.y * wall_dom.offsetHeight;
percenter.value = parseFloat(element.percenter.toString()); percenter.value = parseFloat(element.percenter.toString());
last_percenter.value = percenter.value;
item.InitialH = element.initial_h * sizeh; item.InitialH = element.initial_h * sizeh;
item.InitialW = element.initial_w * sizew; item.InitialW = element.initial_w * sizew;
item.h = item.InitialH * percenter.value; item.h = item.InitialH * percenter.value;
item.w = item.InitialW * percenter.value; item.w = item.InitialW * percenter.value;
item.resizew = item.InitialW / wall_dom.offsetWidth; item.resizew = item.InitialW / wall_dom.offsetWidth;
item.resizeh = item.InitialH / wall_dom.offsetHeight; item.resizeh = item.InitialH / wall_dom.offsetHeight;
item.centerx = item.centerx = Math.round(
Math.round(((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840); ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840
item.centery = );
Math.round(((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160); item.centery = Math.round(
((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160
);
item.angle = element.angle; item.angle = element.angle;
item.isShow = true; item.isShow = true;
test_monitor_wall.value.push(JSON.parse(JSON.stringify(item))); 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) => { test_monitor_list.value.forEach((ele) => {
if (element.index == ele.id) { if (element.index == ele.id) {
ele.isHide = true; ele.isHide = true;
@ -1478,7 +1507,8 @@ export default defineComponent({
} }
tep_item.centerx--; tep_item.centerx--;
tep_item.currentx = 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) { if (item.centery > min) {
item.centery--; item.centery--;
item.currenty = item.currenty =
(item.centery / 2160) * wall_dom.offsetHeight - (item.centery / 2160) * wall_dom.offsetHeight - item.h / 2;
item.h/2;
} }
} }
} }
@ -1544,7 +1573,8 @@ export default defineComponent({
const wall_dom = wall.value; const wall_dom = wall.value;
if (wall_dom) { if (wall_dom) {
tep_item.currentx = 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") { if (temp.key == "magic_wall_config") {
const a = JSON.parse(temp.value).windows; const a = JSON.parse(temp.value).windows;
if ( if (
current_index.value == -1 || true
multiple_select.value.length < 1
) { ) {
refresh_magic(a); refresh_magic(a);
} }
@ -1644,18 +1673,13 @@ export default defineComponent({
getpx, getpx,
lcm, lcm,
model, model,
options,
offsetHeight, offsetHeight,
offsetWidth, offsetWidth,
filter_px, filter_px,
activeMonitorList, activeMonitorList,
monitor_percenter,
monitor_proportion,
output_length, output_length,
multiple_select, multiple_select,
multiple, multiple,
exceedrange,
four_point,
show_dialog, show_dialog,
loading, loading,
window_rect, window_rect,
@ -1667,14 +1691,14 @@ export default defineComponent({
percenter, percenter,
last_percenter, last_percenter,
wall, wall,
set_x,
min_x, min_x,
max_x, max_x,
set_y,
min_y, min_y,
max_y, max_y,
moveMonitor, moveMonitor,
moveingMonitor, moveingMonitor,
sort_index,
ordination,
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);
}, },
@ -1682,6 +1706,9 @@ export default defineComponent({
monitor_list_current_index.value = -1; monitor_list_current_index.value = -1;
show_dialog.value = true; show_dialog.value = true;
magic_switch.value = true; magic_switch.value = true;
sort_index.value = [];
old_sort_index=[]
last_wall.value=[]
let client = GlobalData.getInstance().getCurrentClient(); let client = GlobalData.getInstance().getCurrentClient();
if (client) { if (client) {
const settings = await GlobalData.getInstance() const settings = await GlobalData.getInstance()
@ -1724,6 +1751,7 @@ export default defineComponent({
multiple_select.value = []; multiple_select.value = [];
multiple.value = false; multiple.value = false;
last_wall.value = []; last_wall.value = [];
sort_index.value = [];
test_monitor_list.value.forEach((element) => { test_monitor_list.value.forEach((element) => {
element.isHide = false; element.isHide = false;
}); });
@ -1755,6 +1783,12 @@ export default defineComponent({
item.isShow = true; item.isShow = true;
test_monitor_wall.value.push(JSON.parse(JSON.stringify(item))); test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
last_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) => { test_monitor_list.value.forEach((ele) => {
if (element.index == ele.id) { if (element.index == ele.id) {
ele.isHide = true; ele.isHide = true;
@ -1771,6 +1805,8 @@ export default defineComponent({
} }
}, },
resetData() { resetData() {
old_sort_index = [];
sort_index.value = [];
test_monitor_wall.value = []; test_monitor_wall.value = [];
current_index.value = -1; current_index.value = -1;
percenter.value = 1; percenter.value = 1;
@ -1796,6 +1832,7 @@ export default defineComponent({
cloud_monitor_list.magic_wall_enable = true; cloud_monitor_list.magic_wall_enable = true;
cloud_monitor_list.col = parseInt(settings.wall_col.toString()); cloud_monitor_list.col = parseInt(settings.wall_col.toString());
cloud_monitor_list.row = parseInt(settings.wall_row.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) => { test_monitor_wall.value.forEach((element, index) => {
if (element.isShow) { if (element.isShow) {
cloud_monitor_list.windows.push({ cloud_monitor_list.windows.push({
@ -1853,6 +1890,14 @@ export default defineComponent({
activeMouseDown(item: test_monitor, index: number) { activeMouseDown(item: test_monitor, index: number) {
item.active = true; item.active = true;
Unchecked.value = false; 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.value) {
if (multiple_select.value.indexOf(index) != -1) { if (multiple_select.value.indexOf(index) != -1) {
test_monitor_wall.value[index].active = false; test_monitor_wall.value[index].active = false;
@ -1865,16 +1910,15 @@ export default defineComponent({
} else { } else {
multiple_select.value = []; multiple_select.value = [];
if (item.active) { if (item.active) {
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element, i) => {
if (i != index) {
element.active = false; element.active = false;
}
}); });
multiple_select.value.push(index); 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) { onDragStart(e: DragEvent, item: test_monitor) {
item.start_x = e.offsetX; item.start_x = e.offsetX;
@ -1947,6 +1991,7 @@ export default defineComponent({
} else { } else {
if (test_monitor_wall.value.indexOf(item) == -1) { if (test_monitor_wall.value.indexOf(item) == -1) {
test_monitor_wall.value.push(item); test_monitor_wall.value.push(item);
sort_index.value.push(item.uuid);
test_delete_flag = true; test_delete_flag = true;
} }
current_index.value = test_monitor_wall.value.length - 1; current_index.value = test_monitor_wall.value.length - 1;
@ -1988,6 +2033,8 @@ export default defineComponent({
test_monitor_list.value[item.id] = JSON.parse( test_monitor_list.value[item.id] = JSON.parse(
JSON.stringify(test_monitor_wall.value[index]) 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_list.value[item.id].isHide = false;
test_monitor_wall.value[index].isShow = false; test_monitor_wall.value[index].isShow = false;
multiple_select.value = []; multiple_select.value = [];
@ -2003,15 +2050,20 @@ export default defineComponent({
test_monitor_list.value.forEach((element) => { test_monitor_list.value.forEach((element) => {
element.isHide = false; element.isHide = false;
}); });
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element, i) => {
if (index != i) {
element.isShow = false; element.isShow = false;
}
}); });
sort_index.value = [item.uuid];
test_monitor_list.value[item.id].isHide = true; test_monitor_list.value[item.id].isHide = true;
test_monitor_wall.value[index].isShow = true; test_monitor_wall.value[index].isShow = true;
realtime_upload(); realtime_upload();
current_index.value = sort_index.value.indexOf(item.uuid);
}, },
//cache和与主存间的地址映射由硬件自动完成 //cache和与主存间的地址映射由硬件自动完成
closeAllWindows() { closeAllWindows() {
sort_index.value = [];
current_index.value = -1; current_index.value = -1;
test_monitor_wall.value.forEach((ele) => { test_monitor_wall.value.forEach((ele) => {
ele.cmh = Math.round(ele.h / lcm.value); ele.cmh = Math.round(ele.h / lcm.value);
@ -2066,7 +2118,7 @@ export default defineComponent({
} }
realtime_upload(); realtime_upload();
}, },
changePercenter() { changePercenter(a:number) {
const wall_dom = wall.value; const wall_dom = wall.value;
let tep = false; let tep = false;
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element) => {
@ -2096,7 +2148,9 @@ export default defineComponent({
tep = true; tep = true;
} }
}); });
if(a==2){
realtime_upload(); realtime_upload();
}
}, },
canel_active() { canel_active() {
Unchecked.value = true; Unchecked.value = true;