魔墙：修复添加宽高后出现的bug
This commit is contained in:
miao
parent
cbdaa5ee92
commit
d41b0843b1
|
|
@ -350,6 +350,7 @@
|
|||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<span class="q-mb-md">W:</span>
|
||||
|
|
@ -357,11 +358,9 @@
|
|||
<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"
|
||||
type="text"
|
||||
v-model="test_monitor_list[monitor_list_current_index].cmw"
|
||||
@update:model-value="changewidth()"
|
||||
:max="2000"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null &&
|
||||
|
|
@ -371,12 +370,15 @@
|
|||
(val) =>
|
||||
parseInt(val) >= 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
(val) =>
|
||||
parseInt(val) <= 3840 ||
|
||||
$t('the number must be less than 3840'),
|
||||
]"
|
||||
lazy-rules
|
||||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
<span class="input_append text-h6">mm</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
|
|
@ -387,7 +389,7 @@
|
|||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
<span class="input_append text-h6">mm</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
|
|
@ -397,11 +399,9 @@
|
|||
<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"
|
||||
type="text"
|
||||
v-model="test_monitor_list[monitor_list_current_index].cmh"
|
||||
@update:model-value="changeHeight()"
|
||||
:max="2000"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null &&
|
||||
|
|
@ -411,12 +411,15 @@
|
|||
(val) =>
|
||||
parseInt(val) >= 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
(val) =>
|
||||
parseInt(val) <= 2160 ||
|
||||
$t('the number must be less than 2160'),
|
||||
]"
|
||||
lazy-rules
|
||||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
<span class="input_append text-h6">mm</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
|
|
@ -428,7 +431,7 @@
|
|||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append text-h6">px</span>
|
||||
<span class="input_append text-h6">mm</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
|
|
@ -473,10 +476,12 @@
|
|||
@dragend="(evt) => onDragend(evt, item, j)"
|
||||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
|
||||
W:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
|
||||
}}
|
||||
H:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh)
|
||||
}}
|
||||
<!-- 占比：{{test_monitor_list[(item - 1) * 4 + (j - 1)].resize }} -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -507,8 +512,11 @@
|
|||
@dragend="(evt) => onDragend(evt, item, j)"
|
||||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
|
||||
W:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
|
||||
}}
|
||||
H:{{
|
||||
filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -600,10 +608,10 @@ import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize
|
|||
import itemDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag";
|
||||
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 { number } from "@intlify/core-base";
|
||||
// import VeeValidate from 'vee-validate';
|
||||
|
||||
class test_monitor {
|
||||
uuid = "";
|
||||
active = false;
|
||||
|
|
@ -615,6 +623,8 @@ class test_monitor {
|
|||
starth = 0.0;
|
||||
w = 0.0;
|
||||
h = 0.0;
|
||||
cmw = 0.0;
|
||||
cmh = 0.0;
|
||||
currentx = 0.0;
|
||||
currenty = 0.0;
|
||||
centerx = 0;
|
||||
|
|
@ -622,6 +632,8 @@ class test_monitor {
|
|||
angle = 0;
|
||||
id = 0;
|
||||
resize = 0.0;
|
||||
resizew=0.0;
|
||||
resizeh=0.0
|
||||
isHide = false;
|
||||
isShow = false;
|
||||
reset() {
|
||||
|
|
@ -631,6 +643,8 @@ class test_monitor {
|
|||
this.start_y = 0;
|
||||
this.w = 0.0;
|
||||
this.h = 0.0;
|
||||
this.cmh = 0.0;
|
||||
this.cmw = 0.0;
|
||||
this.currentx = 0.0;
|
||||
this.currenty = 0.0;
|
||||
this.centerx = 0;
|
||||
|
|
@ -640,6 +654,8 @@ class test_monitor {
|
|||
this.isHide = false; //列表隐藏
|
||||
this.isShow = false; //墙显示
|
||||
this.resize = 0.0;
|
||||
this.resizew=0.0;
|
||||
this.resizeh=0.0;
|
||||
this.InitialW = 0;
|
||||
this.InitialW = 0;
|
||||
this.startw = 0.0;
|
||||
|
|
@ -654,6 +670,8 @@ class test_monitor {
|
|||
this.resize = resize;
|
||||
this.startw = 128;
|
||||
this.starth = 72;
|
||||
this.cmw = 0.0;
|
||||
this.cmh = 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -664,10 +682,9 @@ export default defineComponent({
|
|||
let $store = useStore();
|
||||
let $q = useQuasar();
|
||||
let $t = useI18n();
|
||||
|
||||
let lcm = ref(0);
|
||||
let show_dialog = ref(false);
|
||||
let loading = ref(false);
|
||||
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);
|
||||
|
|
@ -681,12 +698,46 @@ export default defineComponent({
|
|||
angle: 0,
|
||||
});
|
||||
let multiple = ref(false);
|
||||
const aw = 607;
|
||||
const ah = 342;
|
||||
const bw = 539;
|
||||
const bh = 304;
|
||||
const cw = 511;
|
||||
const ch = 288;
|
||||
const aw = 303.5;
|
||||
const ah = 171;
|
||||
const bw = 269.5;
|
||||
const bh = 152;
|
||||
const cw = 255.5;
|
||||
const ch = 144;
|
||||
const model = ref(null);
|
||||
const options = ref([
|
||||
{
|
||||
id: "55",
|
||||
w: 1214,
|
||||
h: 684,
|
||||
desc: "Google",
|
||||
},
|
||||
{
|
||||
id: "49",
|
||||
w: 1078,
|
||||
h: 608,
|
||||
desc: "Facebook",
|
||||
},
|
||||
{
|
||||
id: "46",
|
||||
w: 1022,
|
||||
h: 577,
|
||||
desc: "Twitter",
|
||||
},
|
||||
{
|
||||
id: "70",
|
||||
w: 1920,
|
||||
h: 1080,
|
||||
desc: "Apple",
|
||||
},
|
||||
// {
|
||||
// id: '55',
|
||||
// w:1214,
|
||||
// h:684,
|
||||
// desc: 'Oracle',
|
||||
// inactive: true
|
||||
// }
|
||||
]);
|
||||
//调整与背景的百分比
|
||||
const percenter = ref(1);
|
||||
let last_percenter = ref(1);
|
||||
|
|
@ -725,8 +776,8 @@ export default defineComponent({
|
|||
active: false,
|
||||
});
|
||||
const filter_px = (val: number) => {
|
||||
return Math.round(val)
|
||||
}
|
||||
return Math.round(val);
|
||||
};
|
||||
const realtime_upload = async () => {
|
||||
let client = GlobalData.getInstance().getCurrentClient();
|
||||
const settings = await GlobalData.getInstance()
|
||||
|
|
@ -790,6 +841,32 @@ 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)
|
||||
test_monitor_list.value.forEach((ele) => {
|
||||
ele.cmw = ele.w /lcm.value;
|
||||
ele.cmh = 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;
|
||||
|
|
@ -849,7 +926,7 @@ export default defineComponent({
|
|||
}
|
||||
};
|
||||
let offsetHeight = ref(0.0);
|
||||
let offsetWidth=ref(0.0)
|
||||
let offsetWidth = ref(0.0);
|
||||
let test_monitor_wall: Ref<test_monitor[]> = ref([]);
|
||||
let last_wall: Ref<test_monitor[]> = ref([]);
|
||||
let output_length = ref(0);
|
||||
|
|
@ -1087,14 +1164,14 @@ export default defineComponent({
|
|||
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
|
||||
const wall_dom = wall.value;
|
||||
if (wall_dom) {
|
||||
getpx()
|
||||
let size_h = offsetHeight.value / wall_dom.offsetHeight;
|
||||
let size_w = offsetWidth.value / wall_dom.offsetWidth;
|
||||
console.log(offsetHeight.value)
|
||||
test_monitor_wall.value.forEach((element) => {
|
||||
let teph = element.InitialH;
|
||||
let tepw = element.InitialW;
|
||||
element.InitialH = wall_dom.offsetHeight * element.resize;
|
||||
element.InitialW = wall_dom.offsetWidth * element.resize;
|
||||
element.InitialH = wall_dom.offsetHeight * element.resizeh;
|
||||
element.InitialW = wall_dom.offsetWidth * element.resizew;
|
||||
element.h = element.InitialH * percenter.value;
|
||||
element.w = element.InitialW * percenter.value;
|
||||
let sizeh = element.InitialH / teph;
|
||||
|
|
@ -1107,6 +1184,12 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
return {
|
||||
getpx,
|
||||
getsize,
|
||||
setsize,
|
||||
lcm,
|
||||
model,
|
||||
options,
|
||||
offsetHeight,
|
||||
offsetWidth,
|
||||
filter_px,
|
||||
|
|
@ -1150,8 +1233,9 @@ export default defineComponent({
|
|||
const response = await client.getMagicWallConfig();
|
||||
const wall_dom = wall.value;
|
||||
if (wall_dom) {
|
||||
offsetHeight.value=wall_dom.offsetHeight
|
||||
offsetWidth.value=wall_dom.offsetWidth
|
||||
offsetHeight.value = wall_dom.offsetHeight;
|
||||
offsetWidth.value = wall_dom.offsetWidth;
|
||||
getpx();
|
||||
}
|
||||
if (response && settings) {
|
||||
const a = response?.config.windows;
|
||||
|
|
@ -1184,7 +1268,6 @@ export default defineComponent({
|
|||
});
|
||||
loading.value = false;
|
||||
} else if (a && wall_dom) {
|
||||
|
||||
a.forEach((element) => {
|
||||
let item: test_monitor = new test_monitor(0, "0", 0, 0, 0);
|
||||
extend(true, item, test_monitor_list.value[element.index]);
|
||||
|
|
@ -1340,16 +1423,11 @@ export default defineComponent({
|
|||
const wall_dom = wall.value;
|
||||
item.isShow = true;
|
||||
if (wall_dom) {
|
||||
while(wall_dom.offsetWidth<item.w*2){
|
||||
console.log("进来了")
|
||||
console.log(item.w)
|
||||
console.log(wall_dom.offsetWidth*0.5)
|
||||
item.h=item.h*0.5;
|
||||
item.w=item.w*0.5
|
||||
}
|
||||
item.resize=item.w/wall_dom.offsetWidth
|
||||
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.h = item.InitialH * percenter.value;
|
||||
item.w = item.InitialW * percenter.value;
|
||||
if (item.currentx > wall_dom?.offsetWidth - item.w) {
|
||||
|
|
@ -1360,14 +1438,27 @@ export default defineComponent({
|
|||
}
|
||||
item.centerx = Math.floor(item.currentx + item.w / 2);
|
||||
item.centery = Math.floor(item.currenty + item.h / 2);
|
||||
}
|
||||
if (
|
||||
item.h > wall_dom.offsetHeight ||
|
||||
item.w > wall_dom.offsetWidth
|
||||
) {
|
||||
$q.notify({
|
||||
color: "negative",
|
||||
icon: "warning",
|
||||
message: "该显示器超出,请调整缩放",
|
||||
position: "top",
|
||||
timeout: 2500,
|
||||
});
|
||||
} else {
|
||||
if (test_monitor_wall.value.indexOf(item) == -1) {
|
||||
test_monitor_wall.value.push(item);
|
||||
test_delete_flag = true;
|
||||
}
|
||||
current_index.value = test_monitor_wall.value.length - 1;
|
||||
}
|
||||
realtime_upload();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onDragEnter(e: DragEvent, index: string) {
|
||||
e.stopPropagation();
|
||||
|
|
@ -1395,7 +1486,12 @@ 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]))
|
||||
setsize(item)
|
||||
item.cmw = item.w /lcm.value;
|
||||
item.cmh = item.h / lcm.value;
|
||||
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 = [];
|
||||
|
|
@ -1404,6 +1500,9 @@ 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;
|
||||
test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
|
||||
});
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
|
|
@ -1419,6 +1518,9 @@ 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;
|
||||
test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
|
||||
});
|
||||
test_monitor_list.value.forEach((element) => {
|
||||
|
|
@ -1632,13 +1734,14 @@ export default defineComponent({
|
|||
realtime_upload();
|
||||
},
|
||||
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;
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue