魔墙：添加对齐
This commit is contained in:
miao
parent
d41b0843b1
commit
b64ba60922
|
|
@ -40,6 +40,23 @@
|
|||
//ctrl
|
||||
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="
|
||||
|
|
@ -332,8 +349,8 @@
|
|||
{{ item.uuid }}
|
||||
<q-separator></q-separator>
|
||||
x:{{ item.centerx }} y:{{ item.centery }}
|
||||
<q-separator></q-separator>
|
||||
W:{{ filter_px(item.w) }}H:{{ filter_px(item.h) }}
|
||||
<!-- <q-separator></q-separator>
|
||||
W:{{ filter_px(item.w) }}H:{{ filter_px(item.h) }} -->
|
||||
</div>
|
||||
</vue3-resize-drag>
|
||||
</div>
|
||||
|
|
@ -370,7 +387,7 @@
|
|||
(val) =>
|
||||
parseInt(val) >= 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
(val) =>
|
||||
(val) =>
|
||||
parseInt(val) <= 3840 ||
|
||||
$t('the number must be less than 3840'),
|
||||
]"
|
||||
|
|
@ -411,7 +428,7 @@
|
|||
(val) =>
|
||||
parseInt(val) >= 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
(val) =>
|
||||
(val) =>
|
||||
parseInt(val) <= 2160 ||
|
||||
$t('the number must be less than 2160'),
|
||||
]"
|
||||
|
|
@ -477,10 +494,14 @@
|
|||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
W:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
|
||||
filter_px(
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)].cmw
|
||||
)
|
||||
}}
|
||||
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>
|
||||
|
|
@ -513,10 +534,14 @@
|
|||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
W:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
|
||||
filter_px(
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)].cmw
|
||||
)
|
||||
}}
|
||||
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>
|
||||
|
|
@ -632,8 +657,8 @@ class test_monitor {
|
|||
angle = 0;
|
||||
id = 0;
|
||||
resize = 0.0;
|
||||
resizew=0.0;
|
||||
resizeh=0.0
|
||||
resizew = 0.0;
|
||||
resizeh = 0.0;
|
||||
isHide = false;
|
||||
isShow = false;
|
||||
reset() {
|
||||
|
|
@ -654,8 +679,8 @@ class test_monitor {
|
|||
this.isHide = false; //列表隐藏
|
||||
this.isShow = false; //墙显示
|
||||
this.resize = 0.0;
|
||||
this.resizew=0.0;
|
||||
this.resizeh=0.0;
|
||||
this.resizew = 0.0;
|
||||
this.resizeh = 0.0;
|
||||
this.InitialW = 0;
|
||||
this.InitialW = 0;
|
||||
this.startw = 0.0;
|
||||
|
|
@ -825,7 +850,7 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
}
|
||||
if(client){
|
||||
if (client) {
|
||||
const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
|
||||
if(!setMagic?.success){
|
||||
$q.notify({
|
||||
|
|
@ -843,30 +868,14 @@ export default defineComponent({
|
|||
};
|
||||
const getpx = () => {
|
||||
const wall_dom = wall.value;
|
||||
if(wall_dom){
|
||||
lcm.value = (wall_dom.offsetWidth*0.5/1214);
|
||||
// console.log(lcm.value)
|
||||
if (wall_dom) {
|
||||
lcm.value = (wall_dom.offsetWidth * 0.5) / 1214;
|
||||
test_monitor_list.value.forEach((ele) => {
|
||||
ele.cmw = ele.w /lcm.value;
|
||||
ele.cmh = ele.h /lcm.value;
|
||||
});
|
||||
ele.cmw = Math.round(ele.w / 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 item = test_monitor_wall.value[current_index.value];
|
||||
return /*a*/ (item.angle * Math.PI) / 180;
|
||||
|
|
@ -1164,7 +1173,7 @@ export default defineComponent({
|
|||
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
|
||||
const wall_dom = wall.value;
|
||||
if (wall_dom) {
|
||||
getpx()
|
||||
getpx();
|
||||
let size_h = offsetHeight.value / wall_dom.offsetHeight;
|
||||
let size_w = offsetWidth.value / wall_dom.offsetWidth;
|
||||
test_monitor_wall.value.forEach((element) => {
|
||||
|
|
@ -1185,8 +1194,6 @@ export default defineComponent({
|
|||
});
|
||||
return {
|
||||
getpx,
|
||||
getsize,
|
||||
setsize,
|
||||
lcm,
|
||||
model,
|
||||
options,
|
||||
|
|
@ -1423,11 +1430,10 @@ export default defineComponent({
|
|||
const wall_dom = wall.value;
|
||||
item.isShow = true;
|
||||
if (wall_dom) {
|
||||
getsize(item)
|
||||
item.InitialH = item.h;
|
||||
item.InitialW = item.w;
|
||||
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.w = item.InitialW * percenter.value;
|
||||
if (item.currentx > wall_dom?.offsetWidth - item.w) {
|
||||
|
|
@ -1460,6 +1466,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
onDragEnter(e: DragEvent, index: string) {
|
||||
e.stopPropagation();
|
||||
let target: HTMLElement | null = e.target as HTMLElement;
|
||||
|
|
@ -1486,9 +1493,8 @@ export default defineComponent({
|
|||
},
|
||||
closeWindow(item: test_monitor, index: number) {
|
||||
current_index.value = -1;
|
||||
setsize(item)
|
||||
item.cmw = item.w /lcm.value;
|
||||
item.cmh = item.h / lcm.value;
|
||||
item.cmw = Math.round(item.w / lcm.value);
|
||||
item.cmh = Math.round(item.h / lcm.value);
|
||||
test_monitor_list.value[item.id] = JSON.parse(
|
||||
JSON.stringify(test_monitor_wall.value[index])
|
||||
);
|
||||
|
|
@ -1500,9 +1506,8 @@ export default defineComponent({
|
|||
closeOtherWindows(item: test_monitor, index: number) {
|
||||
current_index.value = index;
|
||||
test_monitor_wall.value.forEach((ele) => {
|
||||
setsize(ele)
|
||||
ele.cmh = ele.h /lcm.value;
|
||||
ele.cmw = ele.w /lcm.value;
|
||||
ele.cmh = Math.round(ele.h / lcm.value);
|
||||
ele.cmw = Math.round(ele.w / lcm.value);
|
||||
test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
|
||||
});
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
|
|
@ -1518,9 +1523,8 @@ export default defineComponent({
|
|||
closeAllWindows() {
|
||||
current_index.value = -1;
|
||||
test_monitor_wall.value.forEach((ele) => {
|
||||
setsize(ele)
|
||||
ele.cmh = ele.h /lcm.value;
|
||||
ele.cmw = ele.w /lcm.value;
|
||||
ele.cmh = Math.round(ele.h / lcm.value);
|
||||
ele.cmw = Math.round(ele.w / lcm.value);
|
||||
test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
|
||||
});
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
|
|
@ -1551,7 +1555,7 @@ export default defineComponent({
|
|||
return tep.starth * 0.4 + "px";
|
||||
},
|
||||
show_box_line_height(height: number) {
|
||||
return height * 0.3 + "px";
|
||||
return height * 0.5 + "px";
|
||||
},
|
||||
center_x() {
|
||||
const wall_dom = wall.value;
|
||||
|
|
@ -1736,12 +1740,53 @@ export default defineComponent({
|
|||
changewidth() {
|
||||
let item = test_monitor_list.value[monitor_list_current_index.value];
|
||||
item.w = Number(item.cmw) * lcm.value;
|
||||
// console.log(item.w)
|
||||
},
|
||||
changeHeight() {
|
||||
let item = test_monitor_list.value[monitor_list_current_index.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();
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue