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-10 15:19:01 +08:00
parent d41b0843b1
commit e38899754e
3 changed files with 113 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/ControlPanelDialog.vue
View File

@ -40,6 +40,23 @@
//ctrl //ctrl
multiple = true; multiple = true;
} }
//对齐
if (evt.keyCode == 87 && multiple_select.length > 1) {
//上
alignTop();
}
if (evt.keyCode == 83 && multiple_select.length > 1) {
//下
alignBottom();
}
if (evt.keyCode == 65 && multiple_select.length > 1) {
//左
alignLeft();
}
if (evt.keyCode == 68 && multiple_select.length > 1) {
//右
alignRight();
}
} }
" "
@keyup=" @keyup="
@ -332,8 +349,8 @@
{{ item.uuid }} {{ item.uuid }}
<q-separator></q-separator> <q-separator></q-separator>
x:{{ item.centerx }} y:{{ item.centery }} x:{{ item.centerx }} y:{{ item.centery }}
<q-separator></q-separator> <!-- <q-separator></q-separator>
W:{{ filter_px(item.w) }}H:{{ filter_px(item.h) }} W:{{ filter_px(item.w) }}H:{{ filter_px(item.h) }} -->
</div> </div>
</vue3-resize-drag> </vue3-resize-drag>
</div> </div>
@ -368,7 +385,7 @@
val.toString().length > 0) || val.toString().length > 0) ||
$t('Please type something'), $t('Please type something'),
(val) => (val) =>
parseInt(val) >= 0 || parseInt(val) >= 1 ||
$t('the number must be greater than 0'), $t('the number must be greater than 0'),
(val) => (val) =>
parseInt(val) <= 3840 || parseInt(val) <= 3840 ||
@ -409,7 +426,7 @@
val.toString().length > 0) || val.toString().length > 0) ||
$t('Please type something'), $t('Please type something'),
(val) => (val) =>
parseInt(val) >= 0 || parseInt(val) >= 1 ||
$t('the number must be greater than 0'), $t('the number must be greater than 0'),
(val) => (val) =>
parseInt(val) <= 2160 || parseInt(val) <= 2160 ||
@ -477,10 +494,14 @@
> >
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }} {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
W:{{ W:{{
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw) filter_px(
test_monitor_list[(item - 1) * 4 + (j - 1)].cmw
)
}} }}
H:{{ H:{{
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh) filter_px(
test_monitor_list[(item - 1) * 4 + (j - 1)].cmh
)
}} }}
</div> </div>
</div> </div>
@ -513,10 +534,14 @@
> >
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }} {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
W:{{ W:{{
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw) filter_px(
test_monitor_list[(item - 1) * 4 + (j - 1)].cmw
)
}} }}
H:{{ H:{{
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh) filter_px(
test_monitor_list[(item - 1) * 4 + (j - 1)].cmh
)
}} }}
</div> </div>
</div> </div>
@ -632,8 +657,8 @@ class test_monitor {
angle = 0; angle = 0;
id = 0; id = 0;
resize = 0.0; resize = 0.0;
resizew=0.0; resizew = 0.0;
resizeh=0.0 resizeh = 0.0;
isHide = false; isHide = false;
isShow = false; isShow = false;
reset() { reset() {
@ -654,8 +679,8 @@ class test_monitor {
this.isHide = false; //列表隐藏 this.isHide = false; //列表隐藏
this.isShow = false; //墙显示 this.isShow = false; //墙显示
this.resize = 0.0; this.resize = 0.0;
this.resizew=0.0; this.resizew = 0.0;
this.resizeh=0.0; this.resizeh = 0.0;
this.InitialW = 0; this.InitialW = 0;
this.InitialW = 0; this.InitialW = 0;
this.startw = 0.0; this.startw = 0.0;
@ -797,6 +822,7 @@ export default defineComponent({
); );
num--; num--;
} }
getpx()
} }
} }
const cloud_monitor_list = new MagicWallConfig(); const cloud_monitor_list = new MagicWallConfig();
@ -825,48 +851,32 @@ export default defineComponent({
} }
}); });
} }
if(client){ if (client) {
const setMagic = await client.setMagicWallConfig(cloud_monitor_list); // const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
if(!setMagic?.success){ // if(!setMagic?.success){
$q.notify({ // $q.notify({
color: "negative", // color: "negative",
icon: "warning", // icon: "warning",
message: // message:
$t.t("update magic wall") + // $t.t("update magic wall") +
$t.t("fail") + // $t.t("fail") +
"!", // "!",
position: "top", // position: "top",
timeout: 2500, // timeout: 2500,
}); // });
} // }
} }
}; };
const getpx = () => { const getpx = () => {
const wall_dom = wall.value; const wall_dom = wall.value;
if(wall_dom){ if (wall_dom) {
lcm.value = (wall_dom.offsetWidth*0.5/1214); lcm.value = (wall_dom.offsetWidth * 0.5) / 1214;
// console.log(lcm.value)
test_monitor_list.value.forEach((ele) => { test_monitor_list.value.forEach((ele) => {
ele.cmw = ele.w /lcm.value; ele.cmw = Math.round(ele.w / lcm.value);
ele.cmh = ele.h /lcm.value; ele.cmh = Math.round(ele.h / lcm.value);
}); });
} }
}; };
const getsize=(item:test_monitor)=>{
const wall_dom = wall.value;
if(wall_dom){
// item.w=item.w/3840*wall_dom.offsetWidth;
// item.h=item.h/2160*wall_dom.offsetHeight;
}
}
const setsize=(item:test_monitor)=>{
const wall_dom = wall.value;
if(wall_dom){
// item.w=item.w/wall_dom.offsetWidth*3840;
// item.h=item.h/wall_dom.offsetHeight*2160;
}
}
const radians = () => { const radians = () => {
const item = test_monitor_wall.value[current_index.value]; const item = test_monitor_wall.value[current_index.value];
return /*a*/ (item.angle * Math.PI) / 180; return /*a*/ (item.angle * Math.PI) / 180;
@ -1164,7 +1174,7 @@ export default defineComponent({
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => { EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
const wall_dom = wall.value; const wall_dom = wall.value;
if (wall_dom) { if (wall_dom) {
getpx() getpx();
let size_h = offsetHeight.value / wall_dom.offsetHeight; let size_h = offsetHeight.value / wall_dom.offsetHeight;
let size_w = offsetWidth.value / wall_dom.offsetWidth; let size_w = offsetWidth.value / wall_dom.offsetWidth;
test_monitor_wall.value.forEach((element) => { test_monitor_wall.value.forEach((element) => {
@ -1185,8 +1195,6 @@ export default defineComponent({
}); });
return { return {
getpx, getpx,
getsize,
setsize,
lcm, lcm,
model, model,
options, options,
@ -1423,11 +1431,10 @@ export default defineComponent({
const wall_dom = wall.value; const wall_dom = wall.value;
item.isShow = true; item.isShow = true;
if (wall_dom) { if (wall_dom) {
getsize(item)
item.InitialH = item.h; item.InitialH = item.h;
item.InitialW = item.w; item.InitialW = item.w;
item.resizew = item.w / wall_dom.offsetWidth; item.resizew = item.w / wall_dom.offsetWidth;
item.resizeh=item.h / wall_dom.offsetHeight; item.resizeh = item.h / wall_dom.offsetHeight;
item.h = item.InitialH * percenter.value; item.h = item.InitialH * percenter.value;
item.w = item.InitialW * percenter.value; item.w = item.InitialW * percenter.value;
if (item.currentx > wall_dom?.offsetWidth - item.w) { if (item.currentx > wall_dom?.offsetWidth - item.w) {
@ -1460,6 +1467,7 @@ export default defineComponent({
} }
} }
}, },
onDragEnter(e: DragEvent, index: string) { onDragEnter(e: DragEvent, index: string) {
e.stopPropagation(); e.stopPropagation();
let target: HTMLElement | null = e.target as HTMLElement; let target: HTMLElement | null = e.target as HTMLElement;
@ -1486,9 +1494,8 @@ export default defineComponent({
}, },
closeWindow(item: test_monitor, index: number) { closeWindow(item: test_monitor, index: number) {
current_index.value = -1; current_index.value = -1;
setsize(item) item.cmw = Math.round(item.w / lcm.value);
item.cmw = item.w /lcm.value; item.cmh = Math.round(item.h / lcm.value);
item.cmh = item.h / lcm.value;
test_monitor_list.value[item.id] = JSON.parse( test_monitor_list.value[item.id] = JSON.parse(
JSON.stringify(test_monitor_wall.value[index]) JSON.stringify(test_monitor_wall.value[index])
); );
@ -1500,9 +1507,8 @@ export default defineComponent({
closeOtherWindows(item: test_monitor, index: number) { closeOtherWindows(item: test_monitor, index: number) {
current_index.value = index; current_index.value = index;
test_monitor_wall.value.forEach((ele) => { test_monitor_wall.value.forEach((ele) => {
setsize(ele) ele.cmh = Math.round(ele.h / lcm.value);
ele.cmh = ele.h /lcm.value; ele.cmw = Math.round(ele.w / lcm.value);
ele.cmw = ele.w /lcm.value;
test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele)); test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
}); });
test_monitor_list.value.forEach((element) => { test_monitor_list.value.forEach((element) => {
@ -1518,9 +1524,8 @@ export default defineComponent({
closeAllWindows() { closeAllWindows() {
current_index.value = -1; current_index.value = -1;
test_monitor_wall.value.forEach((ele) => { test_monitor_wall.value.forEach((ele) => {
setsize(ele) ele.cmh = Math.round(ele.h / lcm.value);
ele.cmh = ele.h /lcm.value; ele.cmw = Math.round(ele.w / lcm.value);
ele.cmw = ele.w /lcm.value;
test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele)); test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
}); });
test_monitor_list.value.forEach((element) => { test_monitor_list.value.forEach((element) => {
@ -1551,7 +1556,7 @@ export default defineComponent({
return tep.starth * 0.4 + "px"; return tep.starth * 0.4 + "px";
}, },
show_box_line_height(height: number) { show_box_line_height(height: number) {
return height * 0.3 + "px"; return height * 0.5 + "px";
}, },
center_x() { center_x() {
const wall_dom = wall.value; const wall_dom = wall.value;
@ -1736,12 +1741,53 @@ export default defineComponent({
changewidth() { changewidth() {
let item = test_monitor_list.value[monitor_list_current_index.value]; let item = test_monitor_list.value[monitor_list_current_index.value];
item.w = Number(item.cmw) * lcm.value; item.w = Number(item.cmw) * lcm.value;
// console.log(item.w)
}, },
changeHeight() { changeHeight() {
let item = test_monitor_list.value[monitor_list_current_index.value]; let item = test_monitor_list.value[monitor_list_current_index.value];
item.h = item.cmh * lcm.value; item.h = item.cmh * lcm.value;
}, },
alignTop() {
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;
}
});
realtime_upload();
},
alignBottom() {
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;
}
});
realtime_upload();
},
alignRight() {
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;
}
});
realtime_upload();
},
alignLeft() {
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;
}
});
realtime_upload();
},
}; };
}, },
}); });

1
src/i18n/en-US/index.ts
View File

@ -403,6 +403,7 @@ export default {
"Please Input Vaild Host. Example: 192.168.1.1 or 192.168.1.1:8080", "Please Input Vaild Host. Example: 192.168.1.1 or 192.168.1.1:8080",
"equipment data": "Equipment Data", "equipment data": "Equipment Data",
"set magic wall":"Set Magic wall", "set magic wall":"Set Magic wall",
"update magic wall":"Update Magic Wall",
"magic wall":"Magic Wall", "magic wall":"Magic Wall",
"angle":"Angle", "angle":"Angle",
"topology diagram":"Topology Diagram", "topology diagram":"Topology Diagram",

1
src/i18n/zh-CN/index.ts
View File

@ -669,6 +669,7 @@ export default {
"edit user or password": "修改用户名和密码", "edit user or password": "修改用户名和密码",
"old password error": "旧密码不匹配", "old password error": "旧密码不匹配",
"set magic wall":"设置魔墙", "set magic wall":"设置魔墙",
"update magic wall":"更新魔墙",
"magic wall":"魔墙", "magic wall":"魔墙",
"angle":"角度", "angle":"角度",
"topology diagram":"拓扑图", "topology diagram":"拓扑图",