修改魔墙背景为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" <q-card-section @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop"
style="max-height: 80vh; width: 55vw ; position: relative;"> style="max-height: 80vh; width: 55vw ; position: relative;">
<div class="text-h6 row"> <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" <q-slider class="col" style="font-size:0.7rem" v-model="percenter"
@update:model-value="changePercenter()" label :label-value="percenter" markers @update:model-value="changePercenter()" label :label-value="percenter" markers
switch-marker-labels-side label-always :min="0.1" :max="2" :step="0.1" /> switch-marker-labels-side label-always :min="0.1" :max="2" :step="0.1" />
</div> </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' : ''"> :class="$store.state.power_state ? 'wall' : ''">
<div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;" <div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;"
:class="(i % 2) == 0 ? 'wall_row' : ''"> :class="(i % 2) == 0 ? 'wall_row' : ''">
@ -142,7 +142,7 @@
</div> </div>
</div> </div>
<div ref="wall" v-if="$store.state.power_state" <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"> <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" <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)" :y="item.currenty" :isActive="true" :isGuide="(true && item.angle == 0)"
@ -496,18 +496,18 @@ export default defineComponent({
const wall_dom = wall.value const wall_dom = wall.value
if (wall_dom) { if (wall_dom) {
test_monitor_wall.value.forEach((element) => { 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.InitialH = wall_dom.offsetHeight * element.resize;
element.InitialW = wall_dom.offsetWidth * element.resize; element.InitialW = wall_dom.offsetWidth * element.resize;
element.h = element.InitialH * percenter.value; element.h = element.InitialH * percenter.value;
element.w = element.InitialW * percenter.value; element.w = element.InitialW * percenter.value;
element.currentx=element.currentx*percenter.value; let sizeh=element.InitialH/teph;
element.currenty=element.currenty*percenter.value; 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.centerx = Math.floor(element.currentx + element.w / 2);
element.centery = Math.floor(element.currenty + element.h/ 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; element.h = element.InitialH * percenter.value;
const rx: number = element.currentx + element.w; const rx: number = element.currentx + element.w;
const ry:number=element.currenty + element.h; const ry:number=element.currenty + element.h;
const wall_dom = wall.value; const wall_dom = wall.value;
if(wall_dom){ if(wall_dom){
if (rx > wall_dom.offsetWidth) { if (rx > wall_dom.offsetWidth) {
element.currentx = wall_dom.offsetWidth - element.w element.currentx = wall_dom.offsetWidth - element.w
@ -795,6 +793,9 @@ export default defineComponent({
if (element.isShow) { if (element.isShow) {
tep = true; tep = true;
} }
if(element.angle!=0){
}
}) })
}, },
canel_active() { canel_active() {

View File

@ -408,4 +408,5 @@ export default {
"topology diagram":"Topology Diagram", "topology diagram":"Topology Diagram",
"physical central location":"Central Location", "physical central location":"Central Location",
"monitors list":"Monitors List", "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": "Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
"请输入合法地址. 例: 192.168.1.1 或 192.168.1.1:8080", "请输入合法地址. 例: 192.168.1.1 或 192.168.1.1:8080",
"equipment data": "联动设备", "equipment data": "联动设备",
"resize":"缩放",
}; };