修改魔墙背景为16:9

This commit is contained in:
miao 2022-12-26 11:36:53 +08:00
parent 938cb8ed83
commit 5f4ab631d0
3 changed files with 14 additions and 11 deletions

View File

@ -127,12 +127,12 @@
<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-1"> 缩放</div>
<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: 85%; width: 95%; text-align: center;"
<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' : ''">
@ -142,7 +142,7 @@
</div>
</div>
<div ref="wall" v-if="$store.state.power_state"
style="position: absolute; height: 85%; width: 95%; overflow: hidden;" @click="canel_active()">
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)"
@ -496,18 +496,18 @@ export default defineComponent({
const wall_dom = wall.value
if (wall_dom) {
test_monitor_wall.value.forEach((element) => {
console.log(element.currentx+"111")
let teph=element.InitialH;
let tepw=element.InitialW;
element.InitialH = wall_dom.offsetHeight * element.resize;
element.InitialW = wall_dom.offsetWidth * element.resize;
element.h = element.InitialH * percenter.value;
element.w = element.InitialW * percenter.value;
element.currentx=element.currentx*percenter.value;
element.currenty=element.currenty*percenter.value;
let sizeh=element.InitialH/teph;
let sizew=element.InitialW/tepw;
element.currentx=element.currentx*sizew;
element.currenty=element.currenty*sizeh;
element.centerx = Math.floor(element.currentx + element.w / 2);
element.centery = Math.floor(element.currenty + element.h/ 2);
console.log(percenter.value+"222")
console.log(element.currentx*percenter.value+"222")
})
}
});
@ -779,9 +779,7 @@ export default defineComponent({
element.h = element.InitialH * percenter.value;
const rx: number = element.currentx + element.w;
const ry:number=element.currenty + element.h;
const wall_dom = wall.value;
if(wall_dom){
if (rx > wall_dom.offsetWidth) {
element.currentx = wall_dom.offsetWidth - element.w
@ -795,6 +793,9 @@ export default defineComponent({
if (element.isShow) {
tep = true;
}
if(element.angle!=0){
}
})
},
canel_active() {

View File

@ -408,4 +408,5 @@ export default {
"topology diagram":"Topology Diagram",
"physical central location":"Central Location",
"monitors list":"Monitors List",
"resize":"Resize"
};

View File

@ -677,4 +677,5 @@ export default {
"Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
"请输入合法地址. 例: 192.168.1.1 或 192.168.1.1:8080",
"equipment data": "联动设备",
"resize":"缩放",
};