魔墙:添加更新通知

This commit is contained in:
miao 2023-02-07 14:59:33 +08:00
parent 2ca40619d5
commit b58ad2a4fd
4 changed files with 159 additions and 24 deletions

BIN
public/magic_bg/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@ -90,6 +90,7 @@
icon="close" icon="close"
color="red" color="red"
v-close-popup v-close-popup
@click="close_magic_switch()"
> >
<q-tooltip> <q-tooltip>
{{ $t("close") }} {{ $t("close") }}
@ -276,7 +277,7 @@
" "
:class="$store.state.power_state ? 'wall' : ''" :class="$store.state.power_state ? 'wall' : ''"
> >
<div <!-- <div
class="row" class="row"
v-for="i in 64 / 8" v-for="i in 64 / 8"
:key="i" :key="i"
@ -286,7 +287,7 @@
<div class="col" v-for="j in 8" :key="j"> <div class="col" v-for="j in 8" :key="j">
{{ i * j }} {{ i * j }}
</div> </div>
</div> </div> -->
</div> </div>
<div <div
ref="wall" ref="wall"
@ -476,6 +477,11 @@
></div> ></div>
<div <div
v-else v-else
:class="
test_monitor_list[(item - 1) * 4 + (j - 1)].isactive
? 'list_select'
: ''
"
style=" style="
background-color: grey; background-color: grey;
border: 1px solid black; border: 1px solid black;
@ -519,6 +525,7 @@
<div <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>
<!-- :class="monitor_list_current_index==(item - 1) * 4 + (j - 1)?'list_select':''" -->
<div <div
v-else v-else
style="background-color: grey; border: 1px solid black" style="background-color: grey; border: 1px solid black"
@ -526,6 +533,11 @@
width: box_width(item, j), width: box_width(item, j),
height: box_height(item, j), height: box_height(item, j),
}" }"
:class="
test_monitor_list[(item - 1) * 4 + (j - 1)].isactive
? 'list_select'
: ''
"
@click="activeMonitorList((item - 1) * 4 + (j - 1))" @click="activeMonitorList((item - 1) * 4 + (j - 1))"
:draggable="$store.state.power_state" :draggable="$store.state.power_state"
@dragstart=" @dragstart="
@ -581,6 +593,7 @@
no-caps no-caps
color="primary" color="primary"
v-close-popup v-close-popup
@click="close_magic_switch()"
/> />
<q-btn <q-btn
:loading="loading" :loading="loading"
@ -614,6 +627,8 @@
.wall { .wall {
border: 1px solid black; border: 1px solid black;
background: no-repeat url("../../public/magic_bg/bg.jpg");
background-size: 36.8vw 20.7vw;
} }
.wall_row { .wall_row {
@ -623,6 +638,9 @@
.drag-enter { .drag-enter {
outline-style: dashed; outline-style: dashed;
} }
.list_select {
border: 2px dashed black !important;
}
</style> </style>
<script lang="ts"> <script lang="ts">
@ -682,6 +700,7 @@ export class test_monitor {
resizeh = 0.0; resizeh = 0.0;
isHide = false; isHide = false;
isShow = false; isShow = false;
isactive = false;
reset() { reset() {
this.uuid = ""; this.uuid = "";
this.active = false; this.active = false;
@ -706,6 +725,7 @@ export class test_monitor {
this.InitialW = 0; this.InitialW = 0;
this.startw = 0.0; this.startw = 0.0;
this.starth = 0.0; this.starth = 0.0;
this.isactive = false;
} }
constructor(id: number, uuid: string, w: number, h: number, resize: number) { constructor(id: number, uuid: string, w: number, h: number, resize: number) {
this.reset(); this.reset();
@ -720,6 +740,26 @@ export class test_monitor {
this.cmh = 0.0; this.cmh = 0.0;
} }
} }
class test_monitor2 {
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;
}
}
class exporttxt { class exporttxt {
id = 0; id = 0;
point_left_top = {}; point_left_top = {};
@ -937,6 +977,18 @@ export default defineComponent({
}); });
} }
}; };
const upload_magic_switch = async () => {
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
const SetMagicWallGridState = await client.setMagicWallGridState(
magic_switch.value
);
}
};
const close_magic_switch = () => {
magic_switch.value = false;
upload_magic_switch();
};
const radians = (item: test_monitor) => { const radians = (item: test_monitor) => {
return /*a*/ (item.angle * Math.PI) / 180; return /*a*/ (item.angle * Math.PI) / 180;
}; };
@ -1238,12 +1290,11 @@ export default defineComponent({
}; };
const activeMonitorList = (index: number) => { const activeMonitorList = (index: number) => {
monitor_list_current_index.value = index; monitor_list_current_index.value = index;
test_monitor_list.value[index].active = true; test_monitor_list.value[index].isactive = true;
test_monitor_list.value.forEach((element) => { test_monitor_list.value.forEach((element) => {
element.active = false; element.isactive = false;
}); });
test_monitor_list.value[index].active = true; test_monitor_list.value[index].isactive = true;
}; };
let test_delete_flag = false; let test_delete_flag = false;
const refresh_all = () => { const refresh_all = () => {
@ -1288,12 +1339,54 @@ export default defineComponent({
try { try {
switch (notify.packet.command) { switch (notify.packet.command) {
case Protocol.Commands.kRpcSetMagicWallGridState: case Protocol.Commands.kRpcSetMagicWallGridState:
let temp = JSON.parse( {
notify.data let temp = JSON.parse(
) as Protocol.MagicWallGridStateNotifyEntity; notify.data
if (temp) { ) as Protocol.MagicWallGridStateNotifyEntity;
magic_switch.value = temp.grid_showing; if (temp) {
magic_switch.value = temp.grid_showing;
}
} }
break;
case Protocol.Commands.kRpcSetMagicWallConfig:
{
let temp = JSON.parse(
notify.data
) as Protocol.MagicWallNotifyEntity;
// if (temp) {
// //
// const a = temp?.config.windows;
// let monitorList: any = [];
// if (a) {
// a.forEach((element) => {
// let item: test_monitor2 = new test_monitor2(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);
// }
// }
// });
// }
// }
}
break;
} }
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@ -1301,6 +1394,8 @@ export default defineComponent({
} }
); );
return { return {
close_magic_switch,
upload_magic_switch,
magic_switch, magic_switch,
magic_isbutton, magic_isbutton,
refresh_all, refresh_all,
@ -1502,6 +1597,7 @@ export default defineComponent({
timeout: 2500, timeout: 2500,
}); });
show_dialog.value = false; show_dialog.value = false;
close_magic_switch();
} }
loading.value = false; loading.value = false;
}, },
@ -1949,14 +2045,6 @@ export default defineComponent({
}); });
} }
}, },
async upload_magic_switch() {
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
const SetMagicWallGridState = await client.setMagicWallGridState(
magic_switch.value
);
}
},
}; };
}, },
}); });

View File

@ -3206,6 +3206,15 @@ export namespace Protocol {
constructor() { constructor() {
super(); super();
this.command = Commands.kRpcSetMagicWallGridState; this.command = Commands.kRpcSetMagicWallGridState;
super.flag = PacketEntity.FLAG_NOTIFY;
}
}
export class MagicWallNotifyEntity extends PacketEntity {
config: MagicWallConfig = new MagicWallConfig();
constructor() {
super();
this.command = Commands.kRpcSetMagicWallConfig;
super.flag = PacketEntity.FLAG_NOTIFY;
} }
} }

View File

@ -715,20 +715,19 @@ export default defineComponent({
} }
}; };
const show_magic_wall = async () => { const show_magic_wall = async () => {
// $store.state.windows_sort.findIndex((element) => element == item.uuid) // $store.state.windows_sort.findIndex((element) => element == item.uuid)
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 settings = await GlobalData.getInstance() const settings = await GlobalData.getInstance()
.getCurrentClient() .getCurrentClient()
?.getOutputBoardSetting(); ?.getOutputBoardSetting();
if (response&&settings) { if (response && settings) {
const a = response?.config.windows; const a = response?.config.windows;
const wall_dom = wall.value; const wall_dom = wall.value;
let monitorList: any = []; let monitorList: any = [];
if (a && wall_dom) { if (a && wall_dom) {
offsetHeight = wall_dom.clientHeight; offsetHeight = wall_dom.clientHeight;
offsetWidth = wall_dom.clientHeight; offsetWidth = wall_dom.clientHeight;
@ -985,6 +984,45 @@ export default defineComponent({
} }
} }
break; break;
case Protocol.Commands.kRpcSetMagicWallConfig:
{
let temp = JSON.parse(
notify.data
) as Protocol.MagicWallNotifyEntity;
if (temp) {
//
const a = temp?.config.windows;
let monitorList: any = [];
if (a) {
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);
}
}
});
}
}
}
break;
} }
} catch {} } catch {}
} }