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

魔墙：恢复按钮以及实时更新

This commit is contained in:
miao 2023-01-03 15:00:54 +08:00
parent c21585bdba
commit 4ecd2ab89d
1 changed files with 118 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/ControlPanelDialog.vue
View File

@ -52,7 +52,7 @@
" "
> >
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw"> <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
<q-form @submit="onSubmit" > <q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm"> <q-card-section class="q-ma-none q-pa-sm">
<div class="row"> <div class="row">
<div class="col-auto text-h6"> <div class="col-auto text-h6">
@ -438,6 +438,14 @@
color="primary" color="primary"
v-close-popup v-close-popup
/> />
<q-btn
:loading="loading"
flat
no-caps
:label="$t('revert')"
color="primary"
@click="refresh_all()"
/>
<q-btn <q-btn
ref="accept" ref="accept"
flat flat
@ -578,6 +586,42 @@ export default defineComponent({
const bh = 90; const bh = 90;
//调整与背景的百分比 //调整与背景的百分比
const percenter = ref(1); const percenter = ref(1);
let last_percenter = ref(1);
const realtime_upload = async () => {
const settings = await GlobalData.getInstance()
.getCurrentClient()
?.getOutputBoardSetting();
const cloud_monitor_list = new MagicWallConfig();
const wall_dom = wall.value;
if (wall_dom && settings) {
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 (element.isShow) {
cloud_monitor_list.windows.push({
index: element.id,
lt: new PointF(
element.currentx / wall_dom.offsetWidth,
element.currenty / wall_dom.offsetHeight
),
h: element.h / wall_dom.offsetHeight,
w: element.w / wall_dom.offsetWidth,
angle: parseInt(element.angle.toString()),
initial_h: element.InitialH,
initial_w: element.InitialW,
percenter: percenter.value,
background_h: wall_dom.offsetHeight,
background_w: wall_dom.offsetWidth,
});
}
});
}
let client = GlobalData.getInstance().getCurrentClient();
if(client){
const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
}
};
const ar = 0.5; const ar = 0.5;
const br = 0.6; const br = 0.6;
let test_monitor_list: Ref<test_monitor[]> = ref([ let test_monitor_list: Ref<test_monitor[]> = ref([
@ -667,6 +711,8 @@ export default defineComponent({
} }
}; };
let test_monitor_wall: Ref<test_monitor[]> = ref([]); let test_monitor_wall: Ref<test_monitor[]> = ref([]);
let last_wall: Ref<test_monitor[]> = ref([]);
let multiple_select: Ref<number[]> = ref([]); let multiple_select: Ref<number[]> = ref([]);
const set_x = () => { const set_x = () => {
const wall_dom = wall.value; const wall_dom = wall.value;
@ -721,8 +767,10 @@ export default defineComponent({
return Math.floor( return Math.floor(
item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth) item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
); );
}else { } else {
return Math.floor(item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)); return Math.floor(
item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
);
} }
} else { } else {
return Math.floor(wall_dom.offsetWidth - item.w / 2); return Math.floor(wall_dom.offsetWidth - item.w / 2);
@ -784,7 +832,9 @@ export default defineComponent({
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight) item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
); );
} else { } else {
return Math.floor(item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)); return Math.floor(
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
);
} }
} else { } else {
return Math.floor(wall_dom.offsetHeight - item.h / 2); return Math.floor(wall_dom.offsetHeight - item.h / 2);
@ -842,6 +892,7 @@ export default defineComponent({
item.centerx = Math.floor(item.currentx + item.w / 2); item.centerx = Math.floor(item.currentx + item.w / 2);
item.centery = Math.floor(item.currenty + item.h / 2); item.centery = Math.floor(item.currenty + item.h / 2);
} }
realtime_upload();
}; };
const exceedrange = (item: test_monitor) => { const exceedrange = (item: test_monitor) => {
const wall_dom = wall.value; const wall_dom = wall.value;
@ -918,6 +969,7 @@ export default defineComponent({
test_monitor_list, test_monitor_list,
test_monitor_wall, test_monitor_wall,
percenter, percenter,
last_percenter,
wall, wall,
set_x, set_x,
min_x, min_x,
@ -930,10 +982,10 @@ export default defineComponent({
loga(a: any) { loga(a: any) {
console.log(a); console.log(a);
}, },
async showDialog() { async showDialog() {
show_dialog.value = true; show_dialog.value = true;
let client = GlobalData.getInstance().getCurrentClient(); let client = GlobalData.getInstance().getCurrentClient();
if (client) { if (client) {
const response = await client.getMagicWallConfig(); const response = await client.getMagicWallConfig();
const a = response?.config.windows; const a = response?.config.windows;
@ -947,6 +999,7 @@ 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;
@ -956,6 +1009,7 @@ export default defineComponent({
item.angle = element.angle; item.angle = element.angle;
item.isShow = true; item.isShow = true;
test_monitor_wall.value.push(item); test_monitor_wall.value.push(item);
last_wall.value.push(JSON.parse(JSON.stringify(item)));
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;
@ -976,6 +1030,7 @@ export default defineComponent({
percenter.value = 1; percenter.value = 1;
multiple_select.value = []; multiple_select.value = [];
multiple.value = false; multiple.value = false;
last_wall.value = [];
test_monitor_list.value.forEach((element) => { test_monitor_list.value.forEach((element) => {
element.isHide = false; element.isHide = false;
}); });
@ -989,12 +1044,10 @@ export default defineComponent({
.getCurrentClient() .getCurrentClient()
?.getOutputBoardSetting(); ?.getOutputBoardSetting();
if (client && wall_dom && settings) { if (client && wall_dom && settings) {
const response = await client.getMagicWallConfig();
const cloud_monitor_list = new MagicWallConfig(); const cloud_monitor_list = new MagicWallConfig();
cloud_monitor_list.magic_wall_enable = true; //response?.config.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());
let tep_width = 0;
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({
@ -1110,6 +1163,7 @@ export default defineComponent({
} }
current_index.value = test_monitor_wall.value.length - 1; current_index.value = test_monitor_wall.value.length - 1;
} }
realtime_upload();
}, },
onDragEnter(e: DragEvent, index: string) { onDragEnter(e: DragEvent, index: string) {
e.stopPropagation(); e.stopPropagation();
@ -1139,7 +1193,7 @@ export default defineComponent({
current_index.value = -1; current_index.value = -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 = [];
}, },
closeOtherWindows(item: test_monitor, index: number) { closeOtherWindows(item: test_monitor, index: number) {
current_index.value = index; current_index.value = index;
@ -1161,7 +1215,7 @@ export default defineComponent({
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element) => {
element.isShow = false; element.isShow = false;
}); });
multiple_select.value=[] multiple_select.value = [];
}, },
box_width(row: number, col: number) { box_width(row: number, col: number) {
let tep = JSON.parse( let tep = JSON.parse(
@ -1182,11 +1236,13 @@ export default defineComponent({
const wall_dom = wall.value; const wall_dom = wall.value;
const item = test_monitor_wall.value[current_index.value]; const item = test_monitor_wall.value[current_index.value];
item.currentx = item.centerx - item.w / 2; item.currentx = item.centerx - item.w / 2;
realtime_upload();
}, },
center_y() { center_y() {
const wall_dom = wall.value; const wall_dom = wall.value;
const item = test_monitor_wall.value[current_index.value]; const item = test_monitor_wall.value[current_index.value];
item.currenty = item.centery - item.h / 2; item.currenty = item.centery - item.h / 2;
realtime_upload();
}, },
changePercenter() { changePercenter() {
const wall_dom = wall.value; const wall_dom = wall.value;
@ -1211,6 +1267,7 @@ export default defineComponent({
tep = true; tep = true;
} }
}); });
realtime_upload();
}, },
canel_active() { canel_active() {
Unchecked.value = true; Unchecked.value = true;
@ -1227,23 +1284,24 @@ export default defineComponent({
const wall_dom = wall.value; const wall_dom = wall.value;
let item = test_monitor_wall.value[current_index.value]; let item = test_monitor_wall.value[current_index.value];
exceedrange(item); exceedrange(item);
realtime_upload();
}, },
sub_x() { sub_x() {
let item = test_monitor_wall.value[current_index.value]; let item = test_monitor_wall.value[current_index.value];
let minx=1000; let minx = 1000;
if (multiple_select.value.length > 1) { if (multiple_select.value.length > 1) {
multiple_select.value.forEach((element) => { multiple_select.value.forEach((element) => {
if (element != -1) { if (element != -1) {
let tep_item=test_monitor_wall.value[element]; let tep_item = test_monitor_wall.value[element];
let min = min_x(tep_item) ?? 0; let min = min_x(tep_item) ?? 0;
if (tep_item.centerx > min) { if (tep_item.centerx > min) {
if(minx>tep_item.centerx&&tep_item.angle!=0){ if (minx > tep_item.centerx && tep_item.angle != 0) {
minx=tep_item.centerx; minx = tep_item.centerx;
current_index.value=element current_index.value = element;
}
tep_item.currentx--;
tep_item.centerx--;
} }
tep_item.currentx--;
tep_item.centerx--;
}
} }
}); });
} else { } else {
@ -1253,22 +1311,23 @@ export default defineComponent({
item.centerx--; item.centerx--;
} }
} }
realtime_upload();
}, },
sub_y() { sub_y() {
let item = test_monitor_wall.value[current_index.value]; let item = test_monitor_wall.value[current_index.value];
let miny=1000; let miny = 1000;
if (multiple_select.value.length > 1) { if (multiple_select.value.length > 1) {
multiple_select.value.forEach((element) => { multiple_select.value.forEach((element) => {
if (element != -1) { if (element != -1) {
let tep_item=test_monitor_wall.value[element]; let tep_item = test_monitor_wall.value[element];
let min = min_y(tep_item) ?? 0; let min = min_y(tep_item) ?? 0;
if (tep_item.centery > min) { if (tep_item.centery > min) {
if(miny>tep_item.centery){ if (miny > tep_item.centery) {
miny=tep_item.centery; miny = tep_item.centery;
current_index.value=element current_index.value = element;
} }
tep_item.currenty--; tep_item.currenty--;
tep_item.centery--; tep_item.centery--;
} }
} }
}); });
@ -1279,21 +1338,22 @@ export default defineComponent({
item.centery--; item.centery--;
} }
} }
realtime_upload();
}, },
add_x() { add_x() {
let item = test_monitor_wall.value[current_index.value]; let item = test_monitor_wall.value[current_index.value];
let maxx=0; let maxx = 0;
if (multiple_select.value.length > 1) { if (multiple_select.value.length > 1) {
multiple_select.value.forEach((element) => { multiple_select.value.forEach((element) => {
if (element != -1) { if (element != -1) {
let tep_item=test_monitor_wall.value[element]; let tep_item = test_monitor_wall.value[element];
let max = max_x(tep_item) ?? 0; let max = max_x(tep_item) ?? 0;
if (tep_item.centerx < max) { if (tep_item.centerx < max) {
if(maxx<tep_item.centerx&&tep_item.angle!=0){ if (maxx < tep_item.centerx && tep_item.angle != 0) {
maxx=tep_item.centerx; maxx = tep_item.centerx;
current_index.value=element current_index.value = element;
} }
tep_item.currentx++; tep_item.currentx++;
tep_item.centerx++; tep_item.centerx++;
} }
@ -1306,20 +1366,21 @@ export default defineComponent({
item.centerx++; item.centerx++;
} }
} }
realtime_upload();
}, },
add_y() { add_y() {
let item = test_monitor_wall.value[current_index.value]; let item = test_monitor_wall.value[current_index.value];
let maxy=0; let maxy = 0;
if (multiple_select.value.length > 1) { if (multiple_select.value.length > 1) {
multiple_select.value.forEach((element) => { multiple_select.value.forEach((element) => {
if (element != -1) { if (element != -1) {
let tep_item=test_monitor_wall.value[element]; let tep_item = test_monitor_wall.value[element];
let max = max_y(tep_item) ?? 0; let max = max_y(tep_item) ?? 0;
if (tep_item.centery < max) { if (tep_item.centery < max) {
if(maxy<tep_item.centery&&tep_item.angle!=0){ if (maxy < tep_item.centery && tep_item.angle != 0) {
maxy=tep_item.centery; maxy = tep_item.centery;
current_index.value=element current_index.value = element;
} }
tep_item.currenty++; tep_item.currenty++;
tep_item.centery++; tep_item.centery++;
} }
@ -1332,6 +1393,24 @@ export default defineComponent({
item.centery++; item.centery++;
} }
} }
realtime_upload();
},
refresh_all() {
test_monitor_wall.value = [];
current_index.value = -1;
percenter.value = last_percenter.value;
multiple_select.value = [];
multiple.value = false;
loading.value = false;
test_monitor_list.value.forEach((element) => {
element.isHide = 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();
}, },
}; };
}, },