魔墙：显示列表添加可修改单个窗口的宽高
This commit is contained in:
miao
parent
ae6eb30af5
commit
27dfbe138f
|
|
@ -102,7 +102,6 @@
|
|||
oninput="if(value<0)value=0;if(value>360)value=360;"
|
||||
hint=""
|
||||
@update:model-value="changeAngle()"
|
||||
:max="max_angle()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append">°</span>
|
||||
|
|
@ -333,6 +332,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)}}
|
||||
</div>
|
||||
</vue3-resize-drag>
|
||||
</div>
|
||||
|
|
@ -349,6 +350,89 @@
|
|||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<span class="q-mb-md">W:</span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-if="monitor_list_current_index > -1"
|
||||
type="number"
|
||||
:min="0"
|
||||
v-model="test_monitor_list[monitor_list_current_index].w"
|
||||
@update:model-value="changewidth()"
|
||||
:max="2000"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null &&
|
||||
val != undefined &&
|
||||
val.toString().length > 0) ||
|
||||
$t('Please type something'),
|
||||
(val) =>
|
||||
parseInt(val) >= 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
]"
|
||||
lazy-rules
|
||||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
v-else
|
||||
type="number"
|
||||
:model-value="0"
|
||||
:disable="true"
|
||||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<span class="q-mb-md">H:</span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-if="monitor_list_current_index > -1"
|
||||
type="number"
|
||||
:min="0"
|
||||
v-model="test_monitor_list[monitor_list_current_index].h"
|
||||
@update:model-value="changeHeight()"
|
||||
:max="2000"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null &&
|
||||
val != undefined &&
|
||||
val.toString().length > 0) ||
|
||||
$t('Please type something'),
|
||||
(val) =>
|
||||
parseInt(val) >= 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
]"
|
||||
lazy-rules
|
||||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
v-else
|
||||
type="number"
|
||||
min="0"
|
||||
:model-value="0"
|
||||
:disable="true"
|
||||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator></q-separator>
|
||||
<q-card-section horizontal>
|
||||
<q-list key="uuid" class="full-width">
|
||||
|
|
@ -360,7 +444,7 @@
|
|||
v-for="j in 4"
|
||||
style="display: inline-block"
|
||||
v-if="item < output_length / 4 || output_length % 4 == 0"
|
||||
:style="{ lineHeight: box_height(item, j) }"
|
||||
:style="{ lineHeight: box_line_height(item, j) }"
|
||||
>
|
||||
<div
|
||||
v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
|
||||
|
|
@ -378,6 +462,7 @@
|
|||
height: box_height(item, j),
|
||||
}"
|
||||
:draggable="$store.state.power_state"
|
||||
@click="activeMonitorList((item - 1) * 4 + (j - 1))"
|
||||
@dragstart="
|
||||
(evt) =>
|
||||
onDragStart(
|
||||
|
|
@ -388,16 +473,17 @@
|
|||
@dragend="(evt) => onDragend(evt, item, j)"
|
||||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
W:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].w }} H:{{
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)].h
|
||||
W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
|
||||
}}
|
||||
<!-- 占比：{{test_monitor_list[(item - 1) * 4 + (j - 1)].resize }} -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
v-for="j in output_length % 4"
|
||||
style="display: inline-block; text-align: center"
|
||||
:style="{ lineHeight: box_height(item, j) }"
|
||||
:style="{ lineHeight: box_line_height(item, j) }"
|
||||
>
|
||||
<div
|
||||
v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
|
||||
|
|
@ -409,6 +495,7 @@
|
|||
width: box_width(item, j),
|
||||
height: box_height(item, j),
|
||||
}"
|
||||
@click="activeMonitorList((item - 1) * 4 + (j - 1))"
|
||||
:draggable="$store.state.power_state"
|
||||
@dragstart="
|
||||
(evt) =>
|
||||
|
|
@ -420,8 +507,8 @@
|
|||
@dragend="(evt) => onDragend(evt, item, j)"
|
||||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
W:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].w }} H:{{
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)].h
|
||||
W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -515,6 +602,7 @@ import MagicWallConfig from "src/entities/MagicWallConfig";
|
|||
import { PointF } from "src/entities/RectF";
|
||||
import { number } from "@intlify/core-base";
|
||||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||
import { filter } from "minimatch";
|
||||
// import VeeValidate from 'vee-validate';
|
||||
class test_monitor {
|
||||
uuid = "";
|
||||
|
|
@ -523,6 +611,8 @@ class test_monitor {
|
|||
start_y = 0;
|
||||
InitialW = 0;
|
||||
InitialH = 0;
|
||||
startw=0.0;
|
||||
starth=0.0;
|
||||
w = 0.0;
|
||||
h = 0.0;
|
||||
currentx = 0.0;
|
||||
|
|
@ -531,7 +621,7 @@ class test_monitor {
|
|||
centery = 0;
|
||||
angle = 0;
|
||||
id = 0;
|
||||
resize = 0;
|
||||
resize = 0.0;
|
||||
isHide = false;
|
||||
isShow = false;
|
||||
reset() {
|
||||
|
|
@ -549,9 +639,11 @@ class test_monitor {
|
|||
this.id = 0;
|
||||
this.isHide = false; //列表隐藏
|
||||
this.isShow = false; //墙显示
|
||||
this.resize = 0;
|
||||
this.resize = 0.0;
|
||||
this.InitialW = 0;
|
||||
this.InitialW = 0;
|
||||
this.startw=0.0;
|
||||
this.starth=0.0;
|
||||
}
|
||||
constructor(id: number, uuid: string, w: number, h: number, resize: number) {
|
||||
this.reset();
|
||||
|
|
@ -560,6 +652,8 @@ class test_monitor {
|
|||
this.w = w;
|
||||
this.h = h;
|
||||
this.resize = resize;
|
||||
this.startw=128;
|
||||
this.starth=72;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -576,6 +670,9 @@ export default defineComponent({
|
|||
let show_windows_flag = ref(true); // 用于刷新 window 坐标
|
||||
let wall: Ref<HTMLElement | null> = ref(null);
|
||||
let current_index = ref(-1);
|
||||
let monitor_list_current_index = ref(-1);
|
||||
const monitor_percenter = ref([0.1, 0.2, 0.3, 0.4, 0.5]);
|
||||
const monitor_proportion = ref(["16:9", "4:3"]);
|
||||
let window_rect = reactive({
|
||||
x: 0,
|
||||
y: 0,
|
||||
|
|
@ -584,12 +681,12 @@ export default defineComponent({
|
|||
angle: 0,
|
||||
});
|
||||
let multiple = ref(false);
|
||||
const aw = 128;
|
||||
const ah = 72;
|
||||
const bw = 160;
|
||||
const bh = 90;
|
||||
const cw = 192;
|
||||
const ch = 108;
|
||||
const aw = 607;
|
||||
const ah = 342;
|
||||
const bw = 539;
|
||||
const bh = 304;
|
||||
const cw = 511;
|
||||
const ch = 288;
|
||||
//调整与背景的百分比
|
||||
const percenter = ref(1);
|
||||
let last_percenter = ref(1);
|
||||
|
|
@ -627,6 +724,9 @@ export default defineComponent({
|
|||
height: 0,
|
||||
active: false,
|
||||
});
|
||||
const filter_px=(val:number)=>{
|
||||
return Math.round(val)
|
||||
}
|
||||
const realtime_upload = async () => {
|
||||
let client = GlobalData.getInstance().getCurrentClient();
|
||||
const settings = await GlobalData.getInstance()
|
||||
|
|
@ -674,21 +774,21 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
}
|
||||
// if(client){
|
||||
// const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
|
||||
// if(setMagic?.success){
|
||||
// $q.notify({
|
||||
// color: setMagic?.success ? "positive" : "negative",
|
||||
// icon: setMagic?.success ? "done" : "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){
|
||||
$q.notify({
|
||||
color: "negative",
|
||||
icon: "warning",
|
||||
message:
|
||||
$t.t("update magic wall") +
|
||||
$t.t("fail") +
|
||||
"!",
|
||||
position: "top",
|
||||
timeout: 2500,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
const radians = () => {
|
||||
const item = test_monitor_wall.value[current_index.value];
|
||||
|
|
@ -879,7 +979,6 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
};
|
||||
const max_angle = () => {};
|
||||
let Unchecked = ref(false);
|
||||
const moveingMonitor = (
|
||||
item: test_monitor,
|
||||
|
|
@ -973,6 +1072,15 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
};
|
||||
const activeMonitorList = (index: number) => {
|
||||
monitor_list_current_index.value = index;
|
||||
test_monitor_list.value[index].active = true;
|
||||
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
element.active = false;
|
||||
});
|
||||
test_monitor_list.value[index].active = true;
|
||||
};
|
||||
let test_delete_flag = false;
|
||||
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
|
||||
const wall_dom = wall.value;
|
||||
|
|
@ -994,16 +1102,20 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
return {
|
||||
filter_px,
|
||||
activeMonitorList,
|
||||
monitor_percenter,
|
||||
monitor_proportion,
|
||||
output_length,
|
||||
multiple_select,
|
||||
multiple,
|
||||
exceedrange,
|
||||
max_angle,
|
||||
four_point,
|
||||
show_dialog,
|
||||
loading,
|
||||
window_rect,
|
||||
Unchecked,
|
||||
monitor_list_current_index,
|
||||
current_index,
|
||||
test_monitor_list,
|
||||
test_monitor_wall,
|
||||
|
|
@ -1183,6 +1295,7 @@ export default defineComponent({
|
|||
item.active = false;
|
||||
test_delete_flag = false;
|
||||
e.dataTransfer?.setData("item", JSON.stringify(item));
|
||||
monitor_list_current_index.value = -1;
|
||||
},
|
||||
onDragOver(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
|
|
@ -1215,8 +1328,12 @@ export default defineComponent({
|
|||
const wall_dom = wall.value;
|
||||
item.isShow = true;
|
||||
if (wall_dom) {
|
||||
item.InitialH = wall_dom?.offsetHeight * item.resize;
|
||||
item.InitialW = wall_dom?.offsetWidth * item.resize;
|
||||
if(wall_dom.offsetHeight*0.5<item.h){
|
||||
item.h=item.h*0.5;
|
||||
item.w=item.w*0.5
|
||||
}
|
||||
item.InitialH = item.h;
|
||||
item.InitialW = item.w;
|
||||
item.h = item.InitialH * percenter.value;
|
||||
item.w = item.InitialW * percenter.value;
|
||||
if (item.currentx > wall_dom?.offsetWidth - item.w) {
|
||||
|
|
@ -1262,6 +1379,7 @@ export default defineComponent({
|
|||
},
|
||||
closeWindow(item: test_monitor, index: number) {
|
||||
current_index.value = -1;
|
||||
test_monitor_list.value[item.id]=JSON.parse(JSON.stringify(test_monitor_wall.value[index]))
|
||||
test_monitor_list.value[item.id].isHide = false;
|
||||
test_monitor_wall.value[index].isShow = false;
|
||||
multiple_select.value = [];
|
||||
|
|
@ -1269,7 +1387,9 @@ export default defineComponent({
|
|||
},
|
||||
closeOtherWindows(item: test_monitor, index: number) {
|
||||
current_index.value = index;
|
||||
let tep = JSON.parse(JSON.stringify(item));
|
||||
test_monitor_wall.value.forEach((ele) => {
|
||||
test_monitor_list.value[ele.id]=JSON.parse(JSON.stringify(ele));
|
||||
});
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
element.isHide = false;
|
||||
});
|
||||
|
|
@ -1282,6 +1402,9 @@ export default defineComponent({
|
|||
},
|
||||
closeAllWindows() {
|
||||
current_index.value = -1;
|
||||
test_monitor_wall.value.forEach((ele) => {
|
||||
test_monitor_list.value[ele.id]=JSON.parse(JSON.stringify(ele));
|
||||
});
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
element.isHide = false;
|
||||
});
|
||||
|
|
@ -1295,16 +1418,22 @@ export default defineComponent({
|
|||
let tep = JSON.parse(
|
||||
JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
|
||||
);
|
||||
return tep.w + "px";
|
||||
return tep.startw + "px";
|
||||
},
|
||||
box_height(row: number, col: number) {
|
||||
let tep = JSON.parse(
|
||||
JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
|
||||
);
|
||||
return tep.h + "px";
|
||||
return tep.starth + "px";
|
||||
},
|
||||
box_line_height(row: number, col: number) {
|
||||
let tep = JSON.parse(
|
||||
JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
|
||||
);
|
||||
return tep.starth*0.4 + "px";
|
||||
},
|
||||
show_box_line_height(height: number) {
|
||||
return height * 0.5 + "px";
|
||||
return height * 0.3 + "px";
|
||||
},
|
||||
center_x() {
|
||||
const wall_dom = wall.value;
|
||||
|
|
@ -1486,6 +1615,14 @@ export default defineComponent({
|
|||
});
|
||||
realtime_upload();
|
||||
},
|
||||
changewidth(){
|
||||
|
||||
},
|
||||
changeHeight(){
|
||||
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue