魔墙:恢复按钮以及实时更新
This commit is contained in:
parent
c21585bdba
commit
4ecd2ab89d
|
@ -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();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue