修改魔墙背景为16:9
This commit is contained in:
parent
938cb8ed83
commit
5f4ab631d0
|
@ -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() {
|
||||||
|
|
|
@ -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"
|
||||||
};
|
};
|
||||||
|
|
|
@ -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":"缩放",
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue