魔墙:修复滑动条及输入控件随键盘而改变;加中心坐标变为3840*2160;修改主界面的魔墙颜色;
This commit is contained in:
parent
71bb5d58e7
commit
9ad2665b0d
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
"
|
||||
>
|
||||
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
|
||||
<q-card class="overflow-hidden" style="max-width: 60vw">
|
||||
<q-form @submit="onSubmit">
|
||||
<q-card-section class="q-ma-none q-pa-sm">
|
||||
<div class="row">
|
||||
|
@ -102,7 +102,8 @@
|
|||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section style="max-height: 80vh; width: 55vw" class="scroll">
|
||||
<q-card-section style="max-height: 80vh; width: 55vw" class="q-pa-none">
|
||||
<q-scroll-area style="height: 70vh">
|
||||
<q-card class="my-card" flat bordered>
|
||||
<q-card-section horizontal>
|
||||
<q-card-section class="col-3" style="">
|
||||
|
@ -122,6 +123,7 @@
|
|||
type="number"
|
||||
min="0"
|
||||
v-model="test_monitor_wall[current_index].angle"
|
||||
@keydown="testLog($event)"
|
||||
oninput="if(value<0)value=0;if(value>360)value=360;"
|
||||
hint=""
|
||||
@update:model-value="changeAngle()"
|
||||
|
@ -146,7 +148,9 @@
|
|||
</q-item>
|
||||
</div>
|
||||
<br />
|
||||
<div class="text-h5">{{ $t("physical central location") }}</div>
|
||||
<div class="text-h5">
|
||||
{{ $t("physical central location") }}
|
||||
</div>
|
||||
<q-separator />
|
||||
<br />
|
||||
<div class="row no-wrap items-center">
|
||||
|
@ -161,6 +165,7 @@
|
|||
:min="min_x()"
|
||||
v-model="test_monitor_wall[current_index].centerx"
|
||||
@update:model-value="center_x()"
|
||||
@keydown="testLog($event)"
|
||||
:max="max_x()"
|
||||
:rules="[
|
||||
(val) =>
|
||||
|
@ -210,6 +215,7 @@
|
|||
:max="max_y()"
|
||||
v-model="test_monitor_wall[current_index].centery"
|
||||
@update:model-value="center_y()"
|
||||
@keydown="testLog($event)"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null &&
|
||||
|
@ -249,7 +255,12 @@
|
|||
@dragleave="onDragLeave"
|
||||
@dragover="onDragOver"
|
||||
@drop="onDrop"
|
||||
style="max-height: 80vh; width: 55vw; position: relative"
|
||||
style="
|
||||
max-height: 80vh;
|
||||
width: 75%;
|
||||
position: relative;
|
||||
margin-top: 1.5vh; ;
|
||||
"
|
||||
>
|
||||
<div class="text-h6 row">
|
||||
<div for="" class="col-2">{{ $t("resize") }}</div>
|
||||
|
@ -258,6 +269,7 @@
|
|||
style="font-size: 0.7rem"
|
||||
v-model="percenter"
|
||||
@update:model-value="changePercenter()"
|
||||
@keydown.prevent.stop.capture="testLog($event)"
|
||||
label
|
||||
:label-value="percenter"
|
||||
markers
|
||||
|
@ -334,7 +346,9 @@
|
|||
<q-popup-proxy context-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section @click="closeWindow(item, index)">
|
||||
<q-item-section
|
||||
@click="closeWindow(item, index)"
|
||||
>
|
||||
{{ $t("close this window") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
@ -473,7 +487,9 @@
|
|||
:style="{ lineHeight: box_line_height(item, j) }"
|
||||
>
|
||||
<div
|
||||
v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
|
||||
v-if="
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)].isHide
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-else
|
||||
|
@ -523,7 +539,9 @@
|
|||
:style="{ lineHeight: box_line_height(item, j) }"
|
||||
>
|
||||
<div
|
||||
v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
|
||||
v-if="
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)].isHide
|
||||
"
|
||||
></div>
|
||||
<!-- :class="monitor_list_current_index==(item - 1) * 4 + (j - 1)?'list_select':''" -->
|
||||
<div
|
||||
|
@ -568,6 +586,7 @@
|
|||
</q-card>
|
||||
|
||||
<q-separator />
|
||||
</q-scroll-area>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions>
|
||||
|
@ -910,6 +929,7 @@ export default defineComponent({
|
|||
getpx();
|
||||
}
|
||||
}
|
||||
|
||||
const cloud_monitor_list = new MagicWallConfig();
|
||||
const wall_dom = wall.value;
|
||||
if (wall_dom && settings) {
|
||||
|
@ -949,8 +969,8 @@ export default defineComponent({
|
|||
h: element.h / wall_dom.offsetHeight,
|
||||
w: element.w / wall_dom.offsetWidth,
|
||||
angle: parseInt(element.angle.toString()),
|
||||
centerx: element.centerx / wall_dom.offsetWidth,
|
||||
centery: element.centery / wall_dom.offsetHeight,
|
||||
centerx: element.centerx / 3840,
|
||||
centery: element.centery / 2160,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -1012,39 +1032,43 @@ export default defineComponent({
|
|||
return { x, y };
|
||||
};
|
||||
const four_point = (item: test_monitor) => {
|
||||
item.centerx = parseInt(item.centerx.toString());
|
||||
item.centery = parseInt(item.centery.toString());
|
||||
const wall_dom = wall.value;
|
||||
let centerx: any, centery: any;
|
||||
if (wall_dom) {
|
||||
centerx = (item.centerx / 3840) * wall_dom.offsetWidth;
|
||||
centery = (item.centery / 2160) * wall_dom.offsetHeight;
|
||||
}
|
||||
centerx = Math.round(centerx);
|
||||
centery = Math.round(centery);
|
||||
// item.centerx = Math.round((item.centerx));
|
||||
// item.centery = Math.round(item.centery);
|
||||
const x2: number = item.currentx + item.w;
|
||||
const y2: number = item.currenty + item.h;
|
||||
const x1: number = centerx;
|
||||
const y1: number = centery;
|
||||
if (item.angle != 0) {
|
||||
const point_left_top = calculateCoordinates(
|
||||
item.currentx,
|
||||
item.currenty,
|
||||
item.centerx,
|
||||
item.centery,
|
||||
x1,
|
||||
y1,
|
||||
item
|
||||
);
|
||||
const point_left_bootom = calculateCoordinates(
|
||||
item.currentx,
|
||||
y2,
|
||||
item.centerx,
|
||||
item.centery,
|
||||
x1,
|
||||
y1,
|
||||
item
|
||||
);
|
||||
const point_right_top = calculateCoordinates(
|
||||
x2,
|
||||
item.currenty,
|
||||
item.centerx,
|
||||
item.centery,
|
||||
item
|
||||
);
|
||||
const point_right_bottom = calculateCoordinates(
|
||||
x2,
|
||||
y2,
|
||||
item.centerx,
|
||||
item.centery,
|
||||
x1,
|
||||
y1,
|
||||
item
|
||||
);
|
||||
const point_right_bottom = calculateCoordinates(x2, y2, x1, y1, item);
|
||||
const point_list = [
|
||||
point_left_top,
|
||||
point_left_bootom,
|
||||
|
@ -1095,12 +1119,16 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
if (minx < 0) {
|
||||
return Math.floor(item.w / 2 + item.currentx + Math.abs(minx));
|
||||
return Math.round(
|
||||
((item.w / 2 + item.currentx + Math.abs(minx)) /
|
||||
wall_dom.offsetWidth) *
|
||||
3840
|
||||
);
|
||||
} else {
|
||||
return Math.floor(minx);
|
||||
return Math.round((minx / wall_dom.offsetWidth) * 3840);
|
||||
}
|
||||
} else {
|
||||
return Math.floor(item.w / 2);
|
||||
return Math.round((item.w / 2 / wall_dom.offsetWidth) * 3840);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -1118,16 +1146,22 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
if (maxx > wall_dom.offsetWidth) {
|
||||
return Math.floor(
|
||||
item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
|
||||
return Math.round(
|
||||
((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) /
|
||||
wall_dom.offsetWidth) *
|
||||
3840
|
||||
);
|
||||
} else {
|
||||
return Math.floor(
|
||||
item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
|
||||
return Math.round(
|
||||
((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) /
|
||||
wall_dom.offsetWidth) *
|
||||
3840
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return Math.floor(wall_dom.offsetWidth - item.w / 2);
|
||||
return Math.round(
|
||||
((wall_dom.offsetWidth - item.w / 2) / wall_dom.offsetWidth) * 3840
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -1159,12 +1193,16 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
if (miny < 0) {
|
||||
return Math.floor(item.h / 2 + item.currenty + Math.abs(miny));
|
||||
return Math.round(
|
||||
((item.h / 2 + item.currenty + Math.abs(miny)) /
|
||||
wall_dom.offsetHeight) *
|
||||
2160
|
||||
);
|
||||
} else {
|
||||
return Math.floor(miny);
|
||||
return Math.round((miny / wall_dom.offsetHeight) * 2160);
|
||||
}
|
||||
} else {
|
||||
return Math.floor(item.h / 2);
|
||||
return Math.round((item.h / 2 / wall_dom.offsetHeight) * 2160);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -1182,16 +1220,23 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
if (maxy > wall_dom.offsetHeight) {
|
||||
return Math.floor(
|
||||
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
|
||||
return Math.round(
|
||||
((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) /
|
||||
wall_dom.offsetHeight) *
|
||||
2160
|
||||
);
|
||||
} else {
|
||||
return Math.floor(
|
||||
item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
|
||||
return Math.round(
|
||||
((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) /
|
||||
wall_dom.offsetHeight) *
|
||||
2160
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return Math.floor(wall_dom.offsetHeight - item.h / 2);
|
||||
return Math.round(
|
||||
((wall_dom.offsetHeight - item.h / 2) / wall_dom.offsetHeight) *
|
||||
2160
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -1211,12 +1256,17 @@ export default defineComponent({
|
|||
if (wall_dom) {
|
||||
item.h = item.InitialH * percenter.value;
|
||||
item.w = item.InitialW * percenter.value;
|
||||
}
|
||||
item.active = true;
|
||||
item.currentx = rect.left;
|
||||
item.currenty = rect.top;
|
||||
item.centerx = Math.floor(item.currentx + item.w / 2);
|
||||
item.centery = Math.floor(item.currenty + item.h / 2);
|
||||
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
|
||||
);
|
||||
}
|
||||
|
||||
if (Number.isNaN(rect.left || rect.left < 0)) {
|
||||
item.currentx = 0;
|
||||
}
|
||||
|
@ -1227,7 +1277,7 @@ export default defineComponent({
|
|||
const wall_dom = wall.value;
|
||||
if (item.angle != 0) {
|
||||
exceedrange(item);
|
||||
} else {
|
||||
} else if (wall_dom) {
|
||||
if (rect.left < 0) {
|
||||
item.currentx = 0;
|
||||
} else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
|
||||
|
@ -1242,8 +1292,12 @@ export default defineComponent({
|
|||
} else {
|
||||
item.currenty = rect.top;
|
||||
}
|
||||
item.centerx = Math.floor(item.currentx + item.w / 2);
|
||||
item.centery = Math.floor(item.currenty + item.h / 2);
|
||||
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
|
||||
);
|
||||
}
|
||||
realtime_upload();
|
||||
};
|
||||
|
@ -1272,19 +1326,27 @@ export default defineComponent({
|
|||
});
|
||||
if (minx < 0) {
|
||||
item.currentx += Math.abs(minx);
|
||||
item.centerx = item.w / 2 + item.currentx;
|
||||
item.centerx = Math.round(
|
||||
((item.w / 2 + item.currentx) / wall_dom.offsetWidth) * 3840
|
||||
);
|
||||
}
|
||||
if (maxx > wall_dom.offsetWidth) {
|
||||
item.currentx -= maxx - wall_dom.offsetWidth;
|
||||
item.centerx = item.currentx + item.w / 2;
|
||||
item.centerx = Math.round(
|
||||
((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840
|
||||
);
|
||||
}
|
||||
if (miny < 0) {
|
||||
item.currenty += Math.abs(miny);
|
||||
item.centery = item.h / 2 + item.currenty;
|
||||
item.centery = Math.round(
|
||||
((item.h / 2 + item.currenty) / wall_dom.offsetHeight) * 2160
|
||||
);
|
||||
}
|
||||
if (maxy > wall_dom.offsetHeight) {
|
||||
item.currenty -= maxy - wall_dom.offsetHeight;
|
||||
item.centery = item.currenty + item.h / 2;
|
||||
item.centery = Math.round(
|
||||
((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -1300,12 +1362,14 @@ export default defineComponent({
|
|||
const refresh_all = () => {
|
||||
test_monitor_wall.value = [];
|
||||
current_index.value = -1;
|
||||
monitor_list_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;
|
||||
element.isactive=false;
|
||||
});
|
||||
last_wall.value.forEach((element) => {
|
||||
element.isShow = true;
|
||||
|
@ -1328,8 +1392,10 @@ export default defineComponent({
|
|||
let sizew = element.InitialW / tepw;
|
||||
element.currentx = element.currentx * sizew;
|
||||
element.currenty = element.currenty * sizeh;
|
||||
element.centerx = Math.floor(element.currentx + element.w / 2);
|
||||
element.centery = Math.floor(element.currenty + element.h / 2);
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -1380,12 +1446,13 @@ export default defineComponent({
|
|||
item.w = item.InitialW * percenter.value;
|
||||
item.resizew = item.InitialW / wall_dom.offsetWidth;
|
||||
item.resizeh = item.InitialH / wall_dom.offsetHeight;
|
||||
item.centerx = Math.floor(item.currentx + item.w / 2);
|
||||
item.centery = Math.floor(item.currenty + item.h / 2);
|
||||
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)));
|
||||
last_wall.value.push(JSON.parse(JSON.stringify(item)));
|
||||
test_monitor_list.value.forEach((ele) => {
|
||||
if (element.index == ele.id) {
|
||||
ele.isHide = true;
|
||||
|
@ -1394,6 +1461,140 @@ export default defineComponent({
|
|||
});
|
||||
}
|
||||
};
|
||||
const sub_x = () => {
|
||||
const wall_dom = wall.value;
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let minx = 1000;
|
||||
if (wall_dom) {
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let min = min_x(tep_item) ?? 0;
|
||||
if (tep_item.centerx > min) {
|
||||
if (minx > tep_item.centerx && tep_item.angle != 0) {
|
||||
minx = tep_item.centerx;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.centerx--;
|
||||
tep_item.currentx =
|
||||
(tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let min = min_x() ?? 0;
|
||||
if (item.centerx > min) {
|
||||
item.centerx--;
|
||||
item.currentx =
|
||||
(item.centerx / 3840) * wall_dom.offsetWidth - item.w/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
};
|
||||
const sub_y = () => {
|
||||
const wall_dom = wall.value;
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let miny = 1000;
|
||||
if (wall_dom) {
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let min = min_y(tep_item) ?? 0;
|
||||
if (tep_item.centery > min) {
|
||||
if (miny > tep_item.centery) {
|
||||
miny = tep_item.centery;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.centery--;
|
||||
tep_item.currenty =
|
||||
(tep_item.centery / 2160) * wall_dom.offsetHeight -
|
||||
tep_item.h/2;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let min = min_y() ?? 0;
|
||||
if (item.centery > min) {
|
||||
item.centery--;
|
||||
item.currenty =
|
||||
(item.centery / 2160) * wall_dom.offsetHeight -
|
||||
item.h/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
};
|
||||
const add_x = () => {
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let maxx = 0;
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let max = max_x(tep_item) ?? 0;
|
||||
if (tep_item.centerx < max) {
|
||||
if (maxx < tep_item.centerx && tep_item.angle != 0) {
|
||||
maxx = tep_item.centerx;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.centerx++;
|
||||
const wall_dom = wall.value;
|
||||
if (wall_dom) {
|
||||
tep_item.currentx =
|
||||
(tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let max = max_x() ?? 0;
|
||||
if (item.centerx < max) {
|
||||
item.centerx++;
|
||||
const wall_dom = wall.value;
|
||||
if (wall_dom) {
|
||||
item.currentx =
|
||||
(item.centerx / 3840) * wall_dom.offsetWidth - item.w/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
};
|
||||
const add_y = () => {
|
||||
const wall_dom = wall.value;
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let maxy = 0;
|
||||
if (wall_dom) {
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let max = max_y(tep_item) ?? 0;
|
||||
if (tep_item.centery < max) {
|
||||
if (maxy < tep_item.centery && tep_item.angle != 0) {
|
||||
maxy = tep_item.centery;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.centery++;
|
||||
tep_item.currenty =
|
||||
(tep_item.centery / 2160) * wall_dom.offsetHeight -
|
||||
tep_item.h/2;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let max = max_y() ?? 0;
|
||||
if (item.centery < max) {
|
||||
item.centery++;
|
||||
item.currenty =
|
||||
(item.centery / 2160) * wall_dom.offsetHeight - item.h/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
};
|
||||
EventBus.getInstance().on(
|
||||
EventNamesDefine.NotifyMessage,
|
||||
(notify: NotifyMessage) => {
|
||||
|
@ -1415,8 +1616,13 @@ export default defineComponent({
|
|||
) as Protocol.SetApplicationConfigRequestEntity;
|
||||
if (temp.key == "magic_wall_config") {
|
||||
const a = JSON.parse(temp.value).windows;
|
||||
if (
|
||||
current_index.value == -1 ||
|
||||
multiple_select.value.length < 1
|
||||
) {
|
||||
refresh_magic(a);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
@ -1426,6 +1632,10 @@ export default defineComponent({
|
|||
}
|
||||
);
|
||||
return {
|
||||
sub_x,
|
||||
sub_y,
|
||||
add_x,
|
||||
add_y,
|
||||
close_magic_switch,
|
||||
upload_magic_switch,
|
||||
magic_switch,
|
||||
|
@ -1469,6 +1679,7 @@ export default defineComponent({
|
|||
console.log(a);
|
||||
},
|
||||
async showDialog() {
|
||||
monitor_list_current_index.value = -1;
|
||||
show_dialog.value = true;
|
||||
magic_switch.value = true;
|
||||
let client = GlobalData.getInstance().getCurrentClient();
|
||||
|
@ -1534,8 +1745,12 @@ export default defineComponent({
|
|||
item.w = item.InitialW * percenter.value;
|
||||
item.resizew = item.InitialW / wall_dom.offsetWidth;
|
||||
item.resizeh = item.InitialH / wall_dom.offsetHeight;
|
||||
item.centerx = Math.floor(item.currentx + item.w / 2);
|
||||
item.centery = Math.floor(item.currenty + item.h / 2);
|
||||
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)));
|
||||
|
@ -1564,7 +1779,9 @@ export default defineComponent({
|
|||
last_wall.value = [];
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
element.isHide = false;
|
||||
element.isactive = false;
|
||||
});
|
||||
|
||||
loading.value = false;
|
||||
},
|
||||
async onSubmit() {
|
||||
|
@ -1611,8 +1828,8 @@ export default defineComponent({
|
|||
h: element.h / wall_dom.offsetHeight,
|
||||
w: element.w / wall_dom.offsetWidth,
|
||||
angle: parseInt(element.angle.toString()),
|
||||
centerx: element.centerx / wall_dom.offsetWidth,
|
||||
centery: element.centery / wall_dom.offsetHeight,
|
||||
centerx: element.centerx / 3840,
|
||||
centery: element.centery / 2160,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -1655,6 +1872,8 @@ export default defineComponent({
|
|||
}
|
||||
item.active = true;
|
||||
}
|
||||
item.active = true;
|
||||
|
||||
current_index.value = index;
|
||||
},
|
||||
onDragStart(e: DragEvent, item: test_monitor) {
|
||||
|
@ -1708,8 +1927,12 @@ export default defineComponent({
|
|||
if (item.currenty > wall_dom?.offsetHeight - item.h) {
|
||||
item.currenty = wall_dom?.offsetHeight - item.h;
|
||||
}
|
||||
item.centerx = Math.floor(item.currentx + item.w / 2);
|
||||
item.centery = Math.floor(item.currenty + item.h / 2);
|
||||
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
|
||||
);
|
||||
if (
|
||||
item.h > wall_dom.offsetHeight ||
|
||||
item.w > wall_dom.offsetWidth
|
||||
|
@ -1728,6 +1951,7 @@ export default defineComponent({
|
|||
}
|
||||
current_index.value = test_monitor_wall.value.length - 1;
|
||||
realtime_upload();
|
||||
monitor_list_current_index.value = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1827,13 +2051,19 @@ export default defineComponent({
|
|||
center_x() {
|
||||
const wall_dom = wall.value;
|
||||
const item = test_monitor_wall.value[current_index.value];
|
||||
item.currentx = item.centerx - item.w / 2;
|
||||
if (wall_dom) {
|
||||
item.currentx =
|
||||
(item.centerx / 3840) * wall_dom?.offsetWidth - item.w / 2;
|
||||
}
|
||||
realtime_upload();
|
||||
},
|
||||
center_y() {
|
||||
const wall_dom = wall.value;
|
||||
const item = test_monitor_wall.value[current_index.value];
|
||||
item.currenty = item.centery - item.h / 2;
|
||||
if (wall_dom) {
|
||||
item.currenty =
|
||||
(item.centery / 2160) * wall_dom?.offsetHeight - item.h / 2;
|
||||
}
|
||||
realtime_upload();
|
||||
},
|
||||
changePercenter() {
|
||||
|
@ -1852,9 +2082,16 @@ export default defineComponent({
|
|||
if (ry > wall_dom.offsetHeight) {
|
||||
element.currenty = wall_dom.offsetHeight - element.h;
|
||||
}
|
||||
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.floor(element.currentx + element.w / 2);
|
||||
element.centery = Math.floor(element.currenty + element.h / 2);
|
||||
|
||||
if (element.isShow) {
|
||||
tep = true;
|
||||
}
|
||||
|
@ -1871,6 +2108,11 @@ export default defineComponent({
|
|||
}
|
||||
multiple_select.value = [];
|
||||
multiple.value = false;
|
||||
if (monitor_list_current_index.value != -1) {
|
||||
test_monitor_list.value[monitor_list_current_index.value].isactive =
|
||||
false;
|
||||
monitor_list_current_index.value = -1;
|
||||
}
|
||||
},
|
||||
changeAngle() {
|
||||
const wall_dom = wall.value;
|
||||
|
@ -1878,115 +2120,6 @@ export default defineComponent({
|
|||
exceedrange(item);
|
||||
realtime_upload();
|
||||
},
|
||||
sub_x() {
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let minx = 1000;
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let min = min_x(tep_item) ?? 0;
|
||||
if (tep_item.centerx > min) {
|
||||
if (minx > tep_item.centerx && tep_item.angle != 0) {
|
||||
minx = tep_item.centerx;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.currentx--;
|
||||
tep_item.centerx--;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let min = min_x() ?? 0;
|
||||
if (item.centerx > min) {
|
||||
item.currentx--;
|
||||
item.centerx--;
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
},
|
||||
sub_y() {
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let miny = 1000;
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let min = min_y(tep_item) ?? 0;
|
||||
if (tep_item.centery > min) {
|
||||
if (miny > tep_item.centery) {
|
||||
miny = tep_item.centery;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.currenty--;
|
||||
tep_item.centery--;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let min = min_y() ?? 0;
|
||||
if (item.centery > min) {
|
||||
item.currenty--;
|
||||
item.centery--;
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
},
|
||||
add_x() {
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let maxx = 0;
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let max = max_x(tep_item) ?? 0;
|
||||
|
||||
if (tep_item.centerx < max) {
|
||||
if (maxx < tep_item.centerx && tep_item.angle != 0) {
|
||||
maxx = tep_item.centerx;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.currentx++;
|
||||
tep_item.centerx++;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let max = max_x() ?? 0;
|
||||
if (item.centerx < max) {
|
||||
item.currentx++;
|
||||
item.centerx++;
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
},
|
||||
add_y() {
|
||||
let item = test_monitor_wall.value[current_index.value];
|
||||
let maxy = 0;
|
||||
if (multiple_select.value.length > 1) {
|
||||
multiple_select.value.forEach((element) => {
|
||||
if (element != -1) {
|
||||
let tep_item = test_monitor_wall.value[element];
|
||||
let max = max_y(tep_item) ?? 0;
|
||||
if (tep_item.centery < max) {
|
||||
if (maxy < tep_item.centery && tep_item.angle != 0) {
|
||||
maxy = tep_item.centery;
|
||||
current_index.value = element;
|
||||
}
|
||||
tep_item.currenty++;
|
||||
tep_item.centery++;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let max = max_y() ?? 0;
|
||||
if (item.centery < max) {
|
||||
item.currenty++;
|
||||
item.centery++;
|
||||
}
|
||||
}
|
||||
realtime_upload();
|
||||
},
|
||||
|
||||
changewidth() {
|
||||
let item = test_monitor_list.value[monitor_list_current_index.value];
|
||||
|
@ -2038,6 +2171,36 @@ export default defineComponent({
|
|||
});
|
||||
realtime_upload();
|
||||
},
|
||||
testLog(a: any) {
|
||||
if (current_index.value != -1 || multiple_select.value.length > 1) {
|
||||
switch (a.key) {
|
||||
case "ArrowRight":
|
||||
{
|
||||
a.preventDefault();
|
||||
add_x();
|
||||
}
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
{
|
||||
a.preventDefault();
|
||||
sub_x();
|
||||
}
|
||||
break;
|
||||
case "ArrowUp":
|
||||
{
|
||||
a.preventDefault();
|
||||
sub_y();
|
||||
}
|
||||
break;
|
||||
case "ArrowDown":
|
||||
{
|
||||
a.preventDefault();
|
||||
add_y();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
export_magic_wall() {
|
||||
let res: string = "";
|
||||
test_monitor_wall.value.forEach((ele, index) => {
|
||||
|
|
|
@ -245,7 +245,7 @@
|
|||
}
|
||||
.magic_wall {
|
||||
border: 1px solid black;
|
||||
background-color: rgb(173, 228, 251);
|
||||
background-color: rgb(50,130,246);
|
||||
position: absolute;
|
||||
}
|
||||
.magic_wall_select {
|
||||
|
|
Loading…
Reference in New Issue