修改魔墙旋转时超出
This commit is contained in:
miao
parent
5f4ab631d0
commit
f65ee05422
|
|
@ -1,11 +1,16 @@
|
|||
<template>
|
||||
<q-dialog persistent v-model="show_dialog" @before-hide="resetData" @keydown="
|
||||
(evt) => {
|
||||
if (!loading && evt.keyCode == 27) {
|
||||
show_dialog = false;
|
||||
<q-dialog
|
||||
persistent
|
||||
v-model="show_dialog"
|
||||
@before-hide="resetData"
|
||||
@keydown="
|
||||
(evt) => {
|
||||
if (!loading && evt.keyCode == 27) {
|
||||
show_dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
">
|
||||
"
|
||||
>
|
||||
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
|
||||
<q-form @submit="onSubmit">
|
||||
<q-card-section class="q-ma-none q-pa-sm">
|
||||
|
|
@ -15,7 +20,15 @@
|
|||
</div>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn :loading="loading" flat round :disable="loading" icon="close" color="red" v-close-popup>
|
||||
<q-btn
|
||||
:loading="loading"
|
||||
flat
|
||||
round
|
||||
:disable="loading"
|
||||
icon="close"
|
||||
color="red"
|
||||
v-close-popup
|
||||
>
|
||||
<q-tooltip>
|
||||
{{ $t("close") }}
|
||||
</q-tooltip>
|
||||
|
|
@ -27,7 +40,6 @@
|
|||
<q-separator />
|
||||
|
||||
<q-card-section style="max-height: 80vh; width: 55vw" class="scroll">
|
||||
|
||||
<q-card class="my-card" flat bordered>
|
||||
<q-card-section horizontal>
|
||||
<q-card-section class="col-3" style="">
|
||||
|
|
@ -37,17 +49,33 @@
|
|||
<div class="row no-wrap items-center">
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<span class="q-mb-md" style="font-size:1rem"> angle:</span>
|
||||
<span class="q-mb-md" style="font-size: 1rem">
|
||||
angle:</span
|
||||
>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-if="(current_index > -1)" type="number" min="0"
|
||||
v-model="(test_monitor_wall[current_index].angle)"
|
||||
oninput="if(value<0)value=0;if(value>360)value=360;" hint="" @update:model-value="changeAngle()">
|
||||
<q-input
|
||||
v-if="current_index > -1"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="test_monitor_wall[current_index].angle"
|
||||
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>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input v-else type="number" min="0" :model-value="0" :disable="true" hint="">
|
||||
<q-input
|
||||
v-else
|
||||
type="number"
|
||||
min="0"
|
||||
:model-value="0"
|
||||
:disable="true"
|
||||
hint=""
|
||||
>
|
||||
<template v-slot:append>
|
||||
<span class="input_append">°</span>
|
||||
</template>
|
||||
|
|
@ -65,9 +93,14 @@
|
|||
<span class="q-mb-md">X:</span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-if="(current_index > -1)" type="number" :min="min_x()"
|
||||
v-model="test_monitor_wall[current_index].centerx" @update:model-value="center_x()"
|
||||
:max="max_x()" :rules="[
|
||||
<q-input
|
||||
v-if="current_index > -1"
|
||||
type="number"
|
||||
:min="min_x()"
|
||||
v-model="test_monitor_wall[current_index].centerx"
|
||||
@update:model-value="center_x()"
|
||||
:max="max_x()"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null &&
|
||||
val != undefined &&
|
||||
|
|
@ -76,12 +109,22 @@
|
|||
(val) =>
|
||||
parseInt(val) >= 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
]" lazy-rules hint="">
|
||||
]"
|
||||
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="">
|
||||
<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>
|
||||
|
|
@ -91,15 +134,21 @@
|
|||
</div>
|
||||
<br />
|
||||
|
||||
|
||||
<div class="row ">
|
||||
<div class="row">
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<span class="q-mb-md">Y:</span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-if="(current_index > -1)" :hint="''" type="number" :min="min_y()" :max="max_y()"
|
||||
v-model="test_monitor_wall[current_index].centery" @update:model-value="center_y()" :rules="[
|
||||
<q-input
|
||||
v-if="current_index > -1"
|
||||
:hint="''"
|
||||
type="number"
|
||||
:min="min_y()"
|
||||
:max="max_y()"
|
||||
v-model="test_monitor_wall[current_index].centery"
|
||||
@update:model-value="center_y()"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null &&
|
||||
val != undefined &&
|
||||
|
|
@ -108,12 +157,21 @@
|
|||
(val) =>
|
||||
parseInt(val) > 0 ||
|
||||
$t('the number must be greater than 0'),
|
||||
]" lazy-rules>
|
||||
]"
|
||||
lazy-rules
|
||||
>
|
||||
<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="">
|
||||
<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>
|
||||
|
|
@ -124,47 +182,110 @@
|
|||
</q-card-section>
|
||||
<q-separator vertical></q-separator>
|
||||
|
||||
<q-card-section @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop"
|
||||
style="max-height: 80vh; width: 55vw ; position: relative;">
|
||||
<q-card-section
|
||||
@dragenter="onDragEnter"
|
||||
@dragleave="onDragLeave"
|
||||
@dragover="onDragOver"
|
||||
@drop="onDrop"
|
||||
style="max-height: 80vh; width: 55vw; position: relative"
|
||||
>
|
||||
<div class="text-h6 row">
|
||||
<div for="" class="col-2"> {{ $t("resize") }}</div>
|
||||
<q-slider class="col" style="font-size:0.7rem" v-model="percenter"
|
||||
@update:model-value="changePercenter()" label :label-value="percenter" markers
|
||||
switch-marker-labels-side label-always :min="0.1" :max="2" :step="0.1" />
|
||||
<div for="" class="col-2">{{ $t("resize") }}</div>
|
||||
<q-slider
|
||||
class="col"
|
||||
style="font-size: 0.7rem"
|
||||
v-model="percenter"
|
||||
@update:model-value="changePercenter()"
|
||||
label
|
||||
:label-value="percenter"
|
||||
markers
|
||||
switch-marker-labels-side
|
||||
label-always
|
||||
:min="0.1"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
/>
|
||||
</div>
|
||||
<div style="position: absolute; height: 20.7vw; width: 36.8vw; text-align: center;"
|
||||
:class="$store.state.power_state ? 'wall' : ''">
|
||||
<div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;"
|
||||
:class="(i % 2) == 0 ? 'wall_row' : ''">
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
height: 20.7vw;
|
||||
width: 36.8vw;
|
||||
text-align: center;
|
||||
"
|
||||
:class="$store.state.power_state ? 'wall' : ''"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
v-for="i in 64 / 8"
|
||||
:key="i"
|
||||
style="height: 12.5%; align-items: center"
|
||||
:class="i % 2 == 0 ? 'wall_row' : ''"
|
||||
>
|
||||
<div class="col" v-for="j in 8" :key="j">
|
||||
{{ (i * j) }}
|
||||
{{ i * j }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="wall" v-if="$store.state.power_state"
|
||||
style="position: absolute; height: 20.7vw; width: 36.8vw;overflow: hidden;" @click="canel_active()">
|
||||
<div v-for=" (item, index) of test_monitor_wall" @click.stop="Unchecked == false">
|
||||
<vue3-resize-drag v-if="item.isShow" :w="item.w" :h="item.h" :x="item.currentx"
|
||||
:y="item.currenty" :isActive="true" :isGuide="(true && item.angle == 0)"
|
||||
:rotate="parseInt(item.angle.toString())" :is-resizable="false" :resizeIconSize="10"
|
||||
style="background-color: grey; text-align: center;position: absolute; "
|
||||
@moveHandler="moveingMonitor(item, $event, index)" @moveEndHandler="moveMonitor(item, $event)"
|
||||
@mousedown="activeMouseDown(item, index)" :z-index="item.active ? 99 : 0">
|
||||
<div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
|
||||
style="text-align:center;" :style="{ lineHeight: show_box_line_height(item.h) }">
|
||||
<div
|
||||
ref="wall"
|
||||
v-if="$store.state.power_state"
|
||||
style="
|
||||
position: absolute;
|
||||
height: 20.7vw;
|
||||
width: 36.8vw;
|
||||
overflow: hidden;
|
||||
"
|
||||
@click="canel_active()"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) of test_monitor_wall"
|
||||
@click.stop="Unchecked == false"
|
||||
>
|
||||
<vue3-resize-drag
|
||||
v-if="item.isShow"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:x="item.currentx"
|
||||
:y="item.currenty"
|
||||
:isActive="true"
|
||||
:isGuide="true && item.angle == 0"
|
||||
:rotate="parseInt(item.angle.toString())"
|
||||
:is-resizable="false"
|
||||
:resizeIconSize="10"
|
||||
style="
|
||||
background-color: grey;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
"
|
||||
@moveHandler="moveingMonitor(item, $event, index)"
|
||||
@moveEndHandler="moveMonitor(item, $event)"
|
||||
@mousedown="activeMouseDown(item, index)"
|
||||
:z-index="item.active ? 99 : 0"
|
||||
>
|
||||
<div
|
||||
class="full-height full-width"
|
||||
:class="item.active ? 'monitor_selected' : ''"
|
||||
style="text-align: center"
|
||||
:style="{ lineHeight: show_box_line_height(item.h) }"
|
||||
>
|
||||
<q-popup-proxy context-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section @click="closeWindow(item, index)"> {{ $t("close this window") }}
|
||||
<q-item-section @click="closeWindow(item, index)">
|
||||
{{ $t("close this window") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section @click="closeOtherWindows(item, index)">
|
||||
<q-item-section
|
||||
@click="closeOtherWindows(item, index)"
|
||||
>
|
||||
{{ $t("close other windows") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section @click="closeAllWindows()"> {{ $t("close all windows") }}
|
||||
<q-item-section @click="closeAllWindows()">
|
||||
{{ $t("close all windows") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -181,53 +302,109 @@
|
|||
<q-card class="my-card" flat bordered>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-h6">{{ $t("monitors list") }}</q-item-label>
|
||||
<q-item-label class="text-h6">{{
|
||||
$t("monitors list")
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator></q-separator>
|
||||
<q-card-section horizontal>
|
||||
<q-list key="uuid" class=" full-width">
|
||||
<div v-for="item in (Math.ceil(test_monitor_list.length / 4))" class="row justify-around">
|
||||
<div v-for="(j) in 4" style="display:inline-block"
|
||||
v-if="(item < test_monitor_list.length / 4 || (test_monitor_list.length % 4 == 0))"
|
||||
:style="{ lineHeight: box_height(item, j) }">
|
||||
<div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide">
|
||||
|
||||
</div>
|
||||
<div v-else style="background-color: grey; border: 1px solid black;text-align: center;"
|
||||
:style="{ width: box_width(item, j), height: box_height(item, j) }"
|
||||
<q-list key="uuid" class="full-width">
|
||||
<div
|
||||
v-for="item in Math.ceil(test_monitor_list.length / 4)"
|
||||
class="row justify-around"
|
||||
>
|
||||
<div
|
||||
v-for="j in 4"
|
||||
style="display: inline-block"
|
||||
v-if="
|
||||
item < test_monitor_list.length / 4 ||
|
||||
test_monitor_list.length % 4 == 0
|
||||
"
|
||||
:style="{ lineHeight: box_height(item, j) }"
|
||||
>
|
||||
<div
|
||||
v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
|
||||
></div>
|
||||
<div
|
||||
v-else
|
||||
style="
|
||||
background-color: grey;
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
"
|
||||
:style="{
|
||||
width: box_width(item, j),
|
||||
height: box_height(item, j),
|
||||
}"
|
||||
:draggable="$store.state.power_state"
|
||||
@dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
|
||||
@dragend="(evt) => onDragend(evt, item, j)">
|
||||
{{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
|
||||
@dragstart="
|
||||
(evt) =>
|
||||
onDragStart(
|
||||
evt,
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)]
|
||||
)
|
||||
"
|
||||
@dragend="(evt) => onDragend(evt, item, j)"
|
||||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else v-for="j in (test_monitor_list.length) % 4"
|
||||
style="display:inline-block;text-align: center;" :style="{ lineHeight: box_height(item, j) }">
|
||||
<div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide">
|
||||
|
||||
</div>
|
||||
<div v-else style="background-color: grey; border: 1px solid black;"
|
||||
:style="{ width: box_width(item, j), height: box_height(item, j) }"
|
||||
<div
|
||||
v-else
|
||||
v-for="j in test_monitor_list.length % 4"
|
||||
style="display: inline-block; text-align: center"
|
||||
:style="{ lineHeight: box_height(item, j) }"
|
||||
>
|
||||
<div
|
||||
v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
|
||||
></div>
|
||||
<div
|
||||
v-else
|
||||
style="background-color: grey; border: 1px solid black"
|
||||
:style="{
|
||||
width: box_width(item, j),
|
||||
height: box_height(item, j),
|
||||
}"
|
||||
:draggable="$store.state.power_state"
|
||||
@dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
|
||||
@dragend="(evt) => onDragend(evt, item, j)">
|
||||
{{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
|
||||
@dragstart="
|
||||
(evt) =>
|
||||
onDragStart(
|
||||
evt,
|
||||
test_monitor_list[(item - 1) * 4 + (j - 1)]
|
||||
)
|
||||
"
|
||||
@dragend="(evt) => onDragend(evt, item, j)"
|
||||
>
|
||||
{{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<q-separator />
|
||||
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn :loading="loading" flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
|
||||
<q-btn ref="accept" flat :label="$t('Accept')" no-caps :loading="loading" type="submit" color="primary" />
|
||||
<q-btn
|
||||
:loading="loading"
|
||||
flat
|
||||
:label="$t('Cancel')"
|
||||
no-caps
|
||||
color="primary"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
ref="accept"
|
||||
flat
|
||||
:label="$t('Accept')"
|
||||
no-caps
|
||||
:loading="loading"
|
||||
type="submit"
|
||||
color="primary"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
|
|
@ -369,26 +546,70 @@ export default defineComponent({
|
|||
height: 0,
|
||||
active: false
|
||||
});
|
||||
const radians = () => {
|
||||
const item = test_monitor_wall.value[current_index.value]
|
||||
return /*a*/ (item.angle * Math.PI) / 180;
|
||||
};
|
||||
const calculateCoordinates=(px:number,py:number, cx:number,cy:number) =>{
|
||||
const x =cx+(px-cx)*Math.cos(radians())-(py - cy) * Math.sin(radians());
|
||||
|
||||
const y =cy+(px-cx)*Math.sin(radians())+(py - cy) * Math.cos(radians());
|
||||
|
||||
return { x, y };
|
||||
};
|
||||
const four_point=()=>{
|
||||
const item = test_monitor_wall.value[current_index.value]
|
||||
item.centerx = parseInt(item.centerx.toString())
|
||||
item.centery = parseInt(item.centery.toString())
|
||||
const x2: number = item.currentx + item.w;
|
||||
const y2: number = item.currenty + item.h;
|
||||
if(item.angle!=0){
|
||||
// console.log("这里")
|
||||
// console.log(item)
|
||||
const point_left_top=calculateCoordinates(item.currentx,item.currenty,item.centerx,item.centery);
|
||||
const point_left_bootom=calculateCoordinates(item.currentx,y2,item.centerx,item.centery);
|
||||
const point_right_top=calculateCoordinates(x2,item.currenty,item.centerx,item.centery);
|
||||
const point_right_bottom=calculateCoordinates(x2,y2,item.centerx,item.centery);
|
||||
const point_list=[point_left_top,point_left_bootom,point_right_top,point_right_bottom];
|
||||
return point_list;
|
||||
}
|
||||
};
|
||||
let test_monitor_wall: Ref<test_monitor[]> = ref([]);
|
||||
const set_x = () => {
|
||||
const wall_dom = wall.value
|
||||
const item = test_monitor_wall.value[current_index.value]
|
||||
const rx: number = item.currentx + item.w;
|
||||
if (wall_dom) {
|
||||
// if(item.angle!=0){
|
||||
// const point_list=four_point();
|
||||
// point_list?.forEach((element)=>{
|
||||
// if(element.x<0){
|
||||
// return item.currentx+=Math.abs(element.x);
|
||||
// }else if(element.x>wall_dom.offsetWidth){
|
||||
// return item.currentx-=(element.x-wall_dom.offsetWidth);
|
||||
// }
|
||||
// })
|
||||
// }else{
|
||||
if (rx > wall_dom.offsetWidth) {
|
||||
item.currentx = wall_dom.offsetWidth - item.w
|
||||
return item.currentx;
|
||||
} else {
|
||||
return item.currentx;
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
};
|
||||
const min_x = () => {
|
||||
const wall_dom = wall.value
|
||||
const item = test_monitor_wall.value[current_index.value]
|
||||
const point_list=four_point();
|
||||
if (wall_dom) {
|
||||
return Math.floor(item.w / 2)
|
||||
if(item.angle!=0&&point_list){
|
||||
return Math.floor(item.centerx)
|
||||
}else{
|
||||
return Math.floor(item.w / 2)
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
const max_x = () => {
|
||||
|
|
@ -404,13 +625,25 @@ export default defineComponent({
|
|||
const item = test_monitor_wall.value[current_index.value]
|
||||
const ry: number = item.currenty + item.h;
|
||||
if (wall_dom) {
|
||||
if (ry > wall_dom.offsetHeight) {
|
||||
item.currenty = wall_dom.offsetHeight - item.h
|
||||
return item.currenty;
|
||||
} else {
|
||||
return item.currenty;
|
||||
// if(item.angle!=0){
|
||||
// const point_list=four_point();
|
||||
// point_list?.forEach((element)=>{
|
||||
// if(element.y<0){
|
||||
// return item.currenty+=Math.abs(element.y);
|
||||
// }else if(element.x>wall_dom.offsetHeight){
|
||||
// return item.currenty-=(element.y-wall_dom.offsetHeight);
|
||||
// }
|
||||
// })
|
||||
// }else{
|
||||
if (ry > wall_dom.offsetHeight) {
|
||||
item.currenty = wall_dom.offsetHeight - item.h
|
||||
return item.currenty;
|
||||
} else {
|
||||
return item.currenty;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const min_y = () => {
|
||||
const wall_dom = wall.value
|
||||
|
|
@ -425,6 +658,9 @@ export default defineComponent({
|
|||
if (wall_dom) {
|
||||
return Math.floor(wall_dom.offsetHeight - item.h / 2)
|
||||
}
|
||||
};
|
||||
const max_angle=()=>{
|
||||
|
||||
};
|
||||
let Unchecked = ref(false);
|
||||
const moveingMonitor = (item: test_monitor, rect: show__Rect, index: number) => {
|
||||
|
|
@ -452,16 +688,17 @@ export default defineComponent({
|
|||
const moveMonitor = (item: test_monitor, rect: show__Rect) => {
|
||||
//计算是否超出，然后放回
|
||||
const wall_dom = wall.value
|
||||
|
||||
if (rect.left < 0) {
|
||||
item.currentx = 0
|
||||
} else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
|
||||
item.currentx = set_x() ?? 0;
|
||||
item.currentx = Number(set_x()) ?? 0;
|
||||
} else {
|
||||
item.currentx = rect.left
|
||||
}
|
||||
if (rect.top < 0) {
|
||||
item.currenty = 0
|
||||
} else if (wall.value && rect.top > wall.value.offsetHeight - item.h) {
|
||||
} else if (wall_dom && rect.top > wall_dom.offsetHeight - item.h) {
|
||||
item.currenty = set_y() ?? 0;
|
||||
} else {
|
||||
item.currenty = rect.top
|
||||
|
|
@ -491,6 +728,54 @@ export default defineComponent({
|
|||
|
||||
return element;
|
||||
};
|
||||
|
||||
const exceedrange=(item:test_monitor)=>{
|
||||
const wall_dom = wall.value
|
||||
// const item = test_monitor_wall.value[current_index.value]
|
||||
let a=0;
|
||||
const point_list=four_point();
|
||||
if(wall_dom&&point_list){
|
||||
point_list.forEach((element)=>{
|
||||
a++;
|
||||
// console.log(a)
|
||||
// console.log(element)
|
||||
// console.log(wall_dom.offsetWidth)
|
||||
let maxx=0;
|
||||
let maxy=0;
|
||||
let minx=0;
|
||||
let miny=0;
|
||||
if(element.x<0){
|
||||
if(minx>element.x){
|
||||
minx=element.x;
|
||||
item.currentx+=Math.abs(element.x);
|
||||
item.centerx=item.w/2+item.currentx;
|
||||
}
|
||||
}else if(element.x>wall_dom.offsetWidth){
|
||||
if(maxx<element.x){
|
||||
maxx=element.x;
|
||||
item.currentx-=(element.x-wall_dom.offsetWidth);
|
||||
item.centerx=item.currentx+item.w/2;
|
||||
}
|
||||
}
|
||||
if(element.y<0){
|
||||
if(miny>element.y){
|
||||
miny=element.y;
|
||||
item.currenty+=Math.abs(element.y);
|
||||
item.centery=item.h/2+item.currenty;
|
||||
}
|
||||
}else if(element.y>wall_dom.offsetHeight){
|
||||
if(maxy<element.y){
|
||||
maxy=element.y
|
||||
item.currenty-=(element.y-wall_dom.offsetHeight);
|
||||
item.centery=item.currenty+item.h/2;
|
||||
}
|
||||
}
|
||||
})
|
||||
// item.centerx=item.centerx+item.currentx;
|
||||
// item.centery=item.centery+item.currenty;
|
||||
}
|
||||
// return item;
|
||||
};
|
||||
let test_delete_flag = false;
|
||||
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
|
||||
const wall_dom = wall.value
|
||||
|
|
@ -512,6 +797,9 @@ export default defineComponent({
|
|||
}
|
||||
});
|
||||
return {
|
||||
exceedrange,
|
||||
max_angle,
|
||||
four_point,
|
||||
show_dialog,
|
||||
loading,
|
||||
window_rect,
|
||||
|
|
@ -541,16 +829,16 @@ export default defineComponent({
|
|||
const response = await client.getMagicWallConfig()
|
||||
const a = response?.config.windows;
|
||||
const wall_dom = wall.value
|
||||
console.log(response)
|
||||
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])
|
||||
let sizeh=wall_dom.offsetHeight/element.background_h;
|
||||
let sizew=wall_dom.offsetWidth/element.background_w;
|
||||
item.currentx = element.lt.x * wall_dom.offsetWidth;
|
||||
item.currenty = element.lt.y * wall_dom.offsetHeight;
|
||||
percenter.value = parseFloat((element.percenter).toString());
|
||||
item.InitialH = element.initial_h;
|
||||
item.InitialW = element.initial_w;
|
||||
item.InitialH = element.initial_h*sizeh;
|
||||
item.InitialW = element.initial_w*sizew;
|
||||
item.h = (item.InitialH * percenter.value);
|
||||
item.w = (item.InitialW * percenter.value);
|
||||
item.centerx = Math.floor(item.currentx + item.w / 2);
|
||||
|
|
@ -599,7 +887,6 @@ export default defineComponent({
|
|||
//处理缩放后超出
|
||||
// element=isexceed(element);
|
||||
// console.log(wall_dom.offsetHeight)
|
||||
console.log(element)
|
||||
cloud_monitor_list.windows.push({
|
||||
index: element.id,
|
||||
lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight),
|
||||
|
|
@ -793,9 +1080,7 @@ export default defineComponent({
|
|||
if (element.isShow) {
|
||||
tep = true;
|
||||
}
|
||||
if(element.angle!=0){
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
canel_active() {
|
||||
|
|
@ -809,10 +1094,10 @@ export default defineComponent({
|
|||
},
|
||||
changeAngle(){
|
||||
const wall_dom = wall.value
|
||||
const item = test_monitor_wall.value[current_index.value]
|
||||
console.log(item.currentx)
|
||||
let item = test_monitor_wall.value[current_index.value]
|
||||
exceedrange(item);
|
||||
}
|
||||
};
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue