魔墙:显示列表添加可修改单个窗口的宽高

This commit is contained in:
miao 2023-01-05 15:19:36 +08:00
parent ae6eb30af5
commit 27dfbe138f
1 changed files with 175 additions and 38 deletions

View File

@ -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(){
},
}; };
}, },
}); });