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