添加魔墙在主页面的显示

This commit is contained in:
miao 2023-01-29 15:07:46 +08:00
parent a20a1c916c
commit 3c20ba2461
4 changed files with 1769 additions and 1369 deletions

View File

@ -568,7 +568,7 @@
no-caps
:label="$t('revert')"
color="primary"
@click="refresh_all()"
@click="refresh_all"
/>
<q-btn
ref="accept"
@ -637,7 +637,7 @@ import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { number } from "@intlify/core-base";
// import VeeValidate from 'vee-validate';
class test_monitor {
export class test_monitor {
uuid = "";
active = false;
start_x = 0;
@ -822,7 +822,7 @@ export default defineComponent({
);
num--;
}
getpx()
getpx();
}
}
const cloud_monitor_list = new MagicWallConfig();
@ -851,21 +851,39 @@ export default defineComponent({
}
});
}
if (client) {
const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
if(!setMagic?.success){
$q.notify({
color: "negative",
icon: "warning",
message:
$t.t("update magic wall") +
$t.t("fail") +
"!",
position: "top",
timeout: 2500,
});
}
}
// if (client) {
// const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
// if (setMagic?.success) {
// let monitorList:any=[]
// test_monitor_wall.value.forEach((element, index) => {
// if (element.isShow&&wall_dom) {
// monitorList.push({
// id: element.id,
// currentx: element.currentx / wall_dom.offsetWidth,
// currenty: element.currenty / wall_dom.offsetHeight,
// 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,
// });
// }
// });
// $store.commit("setShowMonitorList", monitorList);
// }
// if(!setMagic?.success){
// $q.notify({
// color: "negative",
// icon: "warning",
// message:
// $t.t("update magic wall") +
// $t.t("fail") +
// "!",
// position: "top",
// timeout: 2500,
// });
// }
// }
};
const getpx = () => {
const wall_dom = wall.value;
@ -1171,12 +1189,27 @@ export default defineComponent({
test_monitor_list.value[index].active = true;
};
let test_delete_flag = false;
const 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();
};
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
const wall_dom = wall.value;
console.log(test_monitor_wall.value)
if (wall_dom) {
getpx();
let size_h = offsetHeight.value / wall_dom.offsetHeight;
let size_w = offsetWidth.value / wall_dom.offsetWidth;
test_monitor_wall.value.forEach((element) => {
let teph = element.InitialH;
let tepw = element.InitialW;
@ -1191,9 +1224,11 @@ export default defineComponent({
element.centerx = Math.floor(element.currentx + element.w / 2);
element.centery = Math.floor(element.currenty + element.h / 2);
});
getpx();
}
});
return {
refresh_all,
getpx,
lcm,
model,
@ -1260,6 +1295,7 @@ export default defineComponent({
);
num--;
}
getpx();
}
if (
output_length.value !=
@ -1293,7 +1329,7 @@ export default defineComponent({
item.centery = Math.floor(item.currenty + item.h / 2);
item.angle = element.angle;
item.isShow = true;
test_monitor_wall.value.push(item);
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) {
@ -1354,6 +1390,24 @@ export default defineComponent({
}
});
const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
if (setMagic?.success) {
let monitorList:any=[]
test_monitor_wall.value.forEach((element, index) => {
if (element.isShow&&wall_dom) {
monitorList.push({
id: element.id,
currentx: element.currentx / wall_dom.offsetWidth,
currenty: element.currenty / wall_dom.offsetHeight,
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,
});
}
});
$store.commit("setShowMonitorList", monitorList);
}
$q.notify({
color: setMagic?.success ? "positive" : "negative",
icon: setMagic?.success ? "done" : "warning",
@ -1721,23 +1775,7 @@ export default defineComponent({
}
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();
},
changewidth() {
let item = test_monitor_list.value[monitor_list_current_index.value];
item.w = Number(item.cmw) * lcm.value;
@ -1747,7 +1785,7 @@ export default defineComponent({
item.h = item.cmh * lcm.value;
},
alignTop() {
let item=test_monitor_wall.value[multiple_select.value[0]];
let item = test_monitor_wall.value[multiple_select.value[0]];
multiple_select.value.forEach((element) => {
if (element != -1) {
let tep_item = test_monitor_wall.value[element];
@ -1758,28 +1796,28 @@ export default defineComponent({
realtime_upload();
},
alignBottom() {
let item=test_monitor_wall.value[multiple_select.value[0]];
let item = test_monitor_wall.value[multiple_select.value[0]];
multiple_select.value.forEach((element) => {
if (element != -1) {
let tep_item = test_monitor_wall.value[element];
tep_item.currenty = item.currenty+item.h-tep_item.h;
tep_item.currenty = item.currenty + item.h - tep_item.h;
}
});
realtime_upload();
},
alignRight() {
let item=test_monitor_wall.value[multiple_select.value[0]];
let item = test_monitor_wall.value[multiple_select.value[0]];
multiple_select.value.forEach((element) => {
if (element != -1) {
let tep_item = test_monitor_wall.value[element];
tep_item.currentx = item.currentx+item.w-tep_item.w;
tep_item.currentx = item.currentx + item.w - tep_item.w;
}
});
realtime_upload();
},
alignLeft() {
let item=test_monitor_wall.value[multiple_select.value[0]];
let item = test_monitor_wall.value[multiple_select.value[0]];
multiple_select.value.forEach((element) => {
if (element != -1) {
let tep_item = test_monitor_wall.value[element];

View File

@ -292,7 +292,7 @@
<q-item
clickable
:disable="!$store.state.power_state"
v-if="$store.state.isLedPlayer()"
v-if="$store.state.isLedPlayer()&&!$store.state.custom_defines.function_magic_wall"
v-close-popup
@click="
($store.state.isSpecialVideo()

View File

@ -28,7 +28,7 @@
item.y * ($refs.wall?.offsetHeight ?? 0)
"
:zIndex="
$store.state.windows_sort.findIndex((element) => element == item.uuid)
$store.state.windows_sort.findIndex((element) => element == item.uuid) +1
"
:isActive="item.uuid == $store.state.selected_window"
:resizeIconSize="14"
@ -67,11 +67,79 @@
</window>
</vue3-resize-drag>
</div>
<div
id="magic_wall_grids"
ref="magic_wall_grids"
@click="onWallGridsClick"
v-if="
$store.state.power_state &&
$store.state.custom_defines.function_magic_wall
"
>
<div
class="row magic_wall_grids"
:style="{
height: magic_height(item_height) + 'px',
}"
>
<vue3-resize-drag
v-for="(item, index) of $store.state.show_monitor_list"
:w="item.w * $refs.wall?.clientWidth"
:h="item.h * $refs.wall?.clientHeight"
:x="item.currentx * $refs.wall?.clientWidth"
:y="item.currenty * $refs.wall?.clientHeight"
:rotate="parseInt(item.angle.toString())"
:is-resizable="false"
:isGuide="false"
class="magic_wall"
@dragenter="magic_select(index, item, $event)"
>
</vue3-resize-drag>
<q-popup-proxy
context-menu
@show="
{
last_context_menu_pos_x = $event.layerX;
last_context_menu_pos_y = $event.layerY;
}
"
>
<q-list>
<q-item
:disable="plan_running || !$store.state.power_state"
clickable
v-close-popup
@click="openWindowByLocalFile($event)"
>
<q-item-section avatar>
<q-icon name="open_in_browser" />
</q-item-section>
<q-item-section> {{ $t("open window") }} </q-item-section>
</q-item>
<q-item
:disable="plan_running || !$store.state.power_state"
clickable
v-close-popup
@click="closeAllWindows"
>
<q-item-section avatar>
<q-icon name="close" color="red" />
</q-item-section>
<q-item-section> {{ $t("close all windows") }} </q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</div>
</div>
<div
id="wall_grids"
ref="wall_grids"
@click="onWallGridsClick"
v-if="$store.state.power_state"
v-if="
$store.state.power_state &&
!$store.state.custom_defines.function_magic_wall
"
>
<div
v-for="row of wall_rows"
@ -176,6 +244,16 @@
background: #aacceec2;
border: 1px solid #0069bee7;
}
.magic_wall {
border: 1px solid black;
background-color: rgb(173, 228, 251);
position: absolute;
}
.magic_wall_select {
border: 1px dashed black;
}
.magic_wall_grids {
}
</style>
<script lang="ts">
@ -191,7 +269,7 @@ import { NullSignalSource, useStore } from "src/store";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
import { useQuasar } from "quasar";
import { extend, useQuasar } from "quasar";
import { NotifyMessage } from "src/common/ClientConnection";
import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
@ -204,7 +282,6 @@ import FileEntity from "src/entities/FileEntity";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import FileSuffixHelper from "src/common/FileSuffixHelper";
import { SpecialVideoHelper } from "src/common/SpecialVideoHelper";
class Rect {
start_x = 0;
start_y = 0;
@ -218,10 +295,29 @@ class Rect {
this.end_y = 0;
}
}
class test_monitor {
w = 0.0;
h = 0.0;
currentx = 0.0;
currenty = 0.0;
centerx = 0.0;
centery = 0.0;
angle = 0;
id = 0;
constructor(id: number, w: number, h: number) {
this.currentx = 0.0;
this.currenty = 0.0;
this.angle = 0;
this.centerx = 0;
this.centery = 0;
this.id = id;
this.w = w;
this.h = h;
}
}
export default defineComponent({
name: "PageWall",
components: {
vue3ResizeDrag,
Window,
@ -241,7 +337,7 @@ export default defineComponent({
const window_rect_edit_dialog: Ref<any> = ref(null);
const show_windows_flag = ref(true); // window
const refresh_windows_pos = () => {
const refresh_windows_pos = async () => {
// ,
show_windows_flag.value = false;
setTimeout(() => {
@ -249,6 +345,7 @@ export default defineComponent({
show_windows_flag.value = true;
});
}, 100);
};
EventBus.getInstance().on(
@ -282,10 +379,174 @@ export default defineComponent({
const area_open_window_flag = ref(false);
const area_open_window_rect = ref(new Rect());
let item_witdh = ref(0);
const item_height = ref(0);
const radians = () => {
const test_monitor_list: any = clacMonitor();
if (test_monitor_list) {
const item = test_monitor_list[current_index.value];
return /*a*/ (item.angle * Math.PI) / 180;
}
};
const calculateCoordinates = (
px: number,
py: number,
cx: number,
cy: number
) => {
const x =
cx +
(px - cx) * Math.cos(Number(radians())) -
(py - cy) * Math.sin(Number(radians()));
const y =
cy +
(px - cx) * Math.sin(Number(radians())) +
(py - cy) * Math.cos(Number(radians()));
return { x, y };
};
let current_index = ref(0);
const clacMonitor = () => {
let test_monitor_list: any = [];
$store.state.show_monitor_list.forEach((element) => {
let item: test_monitor = new test_monitor(0, 0, 0);
const wall_dom = wall.value;
if (wall_dom) {
item.h = element.h * wall_dom.clientHeight;
item.w = element.w * wall_dom.clientWidth;
item.currentx = element.currentx * wall_dom.clientWidth;
item.currenty = element.currenty * wall_dom.clientHeight;
item.centerx = item.currentx + item.w * 0.5;
item.centery = item.currenty + item.h * 0.5;
item.angle = element.angle;
item.id = element.id;
test_monitor_list.push(item);
}
});
return test_monitor_list;
};
const four_point = () => {
const test_monitor_list: any = clacMonitor();
if (test_monitor_list) {
const item = test_monitor_list[current_index.value];
item.centerx = parseInt(item.centerx.toString());
item.centery = parseInt(item.centery.toString());
const x2: number = item.currentx + item.w;
const y2: number = item.currenty + item.h;
if (item.angle != 0) {
const point_left_top = calculateCoordinates(
item.currentx,
item.currenty,
item.centerx,
item.centery
);
const point_left_bootom = calculateCoordinates(
item.currentx,
y2,
item.centerx,
item.centery
);
const point_right_top = calculateCoordinates(
x2,
item.currenty,
item.centerx,
item.centery
);
const point_right_bottom = calculateCoordinates(
x2,
y2,
item.centerx,
item.centery
);
const point_list = [
point_left_top,
point_left_bootom,
point_right_top,
point_right_bottom,
];
return point_list;
}
}
};
const select_x = () => {
const point_list = four_point();
const item = $store.state.show_monitor_list[current_index.value];
if (item.angle != 0) {
if (point_list) {
let minx = 100000;
point_list.forEach((element) => {
if (minx > element.x) {
minx = element.x;
}
});
return minx;
}
} else {
if (wall.value) return item.currentx * wall.value?.clientWidth;
}
};
const select_y = () => {
const point_list = four_point();
let miny = 100000;
if (point_list) {
point_list.forEach((element) => {
if (miny > element.y) {
miny = element.y;
}
});
}
const item = $store.state.show_monitor_list[current_index.value];
if (item.angle != 0) {
return miny;
} else {
if (wall.value) return item.currenty * wall.value?.clientHeight;
}
};
const select_height = () => {
const point_list = four_point();
let maxy = 0;
let miny = 100000;
if (point_list) {
point_list.forEach((element) => {
if (miny > element.y) {
miny = element.y;
}
if (maxy < element.y) {
maxy = element.y;
}
});
}
const item = $store.state.show_monitor_list[current_index.value];
if (item.angle != 0) {
return maxy - miny;
} else {
if (wall.value) return item.h * wall.value?.clientHeight;
}
};
const select_width = () => {
const point_list = four_point();
let maxx = 0;
let minx = 100000;
if (point_list) {
point_list.forEach((element) => {
if (minx > element.x) {
minx = element.x;
}
if (maxx < element.x) {
maxx = element.x;
}
});
}
const item = $store.state.show_monitor_list[current_index.value];
if (item.angle != 0) {
return maxx - minx;
} else {
if (wall.value) return item.w * wall.value?.clientWidth;
}
};
const calcWallItemWH = () => {
item_witdh.value = Math.floor(
(wall?.value?.parentElement?.offsetWidth ?? 0) / wall_cols.value
@ -415,6 +676,7 @@ export default defineComponent({
);
}
}
//
}
}
area_open_window_flag.value = false;
@ -450,6 +712,53 @@ export default defineComponent({
}
};
const magic_height = (h: number) => {
const wall_dom = wall.value;
if (wall_dom?.parentElement) {
h = wall_dom.parentElement.offsetHeight * 0.6;
}
return 500;
};
const show_magic_wall = async () => {
console.log( $store.state.windows_sort)
// $store.state.windows_sort.findIndex((element) => element == item.uuid)
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
const response = await client.getMagicWallConfig();
if (response) {
const a = response?.config.windows;
const wall_dom = wall.value;
let monitorList: any = [];
if (a && wall_dom) {
a.forEach((element) => {
let item: test_monitor = new test_monitor(0, 0, 0);
item.h = element.h;
item.w = element.w;
item.currentx = element.lt.x;
item.currenty = element.lt.y;
item.angle = element.angle;
item.id = element.index;
if ($store.state.show_monitor_list.length == 0) {
monitorList.push(item);
$store.commit("setShowMonitorList", monitorList);
} else {
let flag = false;
$store.state.show_monitor_list.forEach((ele: any) => {
if (element.index == ele.id) {
flag = true;
}
});
if (!flag) {
monitorList.push(item);
$store.commit("setShowMonitorList", monitorList);
}
}
});
}
}
}
};
EventBus.getInstance().on(EventNamesDefine.WindowMouseDown, wallMouseDown);
EventBus.getInstance().on(EventNamesDefine.WindowMouseMove, wallMouseMove);
EventBus.getInstance().on(EventNamesDefine.WindowMouseUp, wallMouseUp);
@ -685,6 +994,9 @@ export default defineComponent({
elementResizeDetectorMaker().listenTo(
wall.value,
(element: HTMLElement) => {
if ($store.state.custom_defines.function_magic_wall) {
show_magic_wall();
}
if (element) {
calcWallItemWH();
}
@ -751,6 +1063,7 @@ export default defineComponent({
};
return {
magic_height,
windows,
wall,
window_rect_edit_dialog,
@ -957,6 +1270,25 @@ export default defineComponent({
.getCurrentClient()
?.replaceWindow2(find_window, uuid);
} else {
if (
$store.state.custom_defines.function_magic_wall
) {
const item =
$store.state.show_monitor_list[
current_index.value
];
if (wall.value) {
x = Number(select_x()) / wall.value.clientWidth;
y =
Number(select_y()) / wall.value.clientHeight;
width =
Number(select_width()) /
wall.value.clientWidth;
height =
Number(select_height()) /
wall.value.clientHeight;
}
}
const open_window_request =
new Protocol.OpenWindowRequestEntity(
uuid,
@ -999,6 +1331,14 @@ export default defineComponent({
target?.classList.add("drag-enter");
}
},
magic_select(index: number, item: test_monitor, e: DragEvent) {
current_index.value = index;
e.stopPropagation();
let target: HTMLElement | null = e.target as HTMLElement;
if (target) {
target?.classList.add("drag-enter");
}
},
onDragLeave(e: DragEvent) {
let target: HTMLElement = e.target as HTMLElement;

View File

@ -39,7 +39,27 @@ export class CustomDefines {
function_mirroring_output = false;
function_magic_wall=false;
}
class test_monitor {
w = 0.0;
h = 0.0;
currentx = 0.0;
currenty = 0.0;
centerx = 0.0;
centery = 0.0;
angle = 0;
id = 0;
constructor(id: number, w: number, h: number) {
this.currentx = 0.0;
this.currenty = 0.0;
this.angle = 0;
this.centerx = 0;
this.centery = 0;
this.id = id;
this.w = w;
this.h = h;
}
}
export interface StateInterface {
// Define your own store structure, using submodules if needed
// example: ExampleStateInterface;
@ -77,7 +97,7 @@ export interface StateInterface {
device_attribute: number;
power_state: boolean;
product_name: string;
show_monitor_list:test_monitor[];
custom_defines: CustomDefines;
isLedPlayer: () => boolean;
@ -340,9 +360,8 @@ export default store(function (/* { ssrContext } */) {
device_attribute: 0,
power_state: false,
product_name: EProductNames.LED_PLAYER,
show_monitor_list:[],
custom_defines: new CustomDefines(),
isLedPlayer: () => {
return (
Store.state.product_name == EProductNames.LED_PLAYER ||
@ -358,6 +377,9 @@ export default store(function (/* { ssrContext } */) {
setInitialized(state: StateInterface, playload?: any) {
state.initialized = true;
},
setShowMonitorList(state: StateInterface, playload?: any) {
state.show_monitor_list = playload
},
updateLandspace(state: StateInterface, playload?: any) {
if (typeof playload == "boolean") {
state.landspace = playload;