joylink/rtsa-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

加滚动条

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-10-15 18:16:18 +08:00
parent ed3392d378
commit 702cc229a3
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/layouts/IscsDrawLayout.vue
View File

@ -154,13 +154,18 @@
<div <div
v-show="subMenuDisplayForm !== DisplayForm.draw" v-show="subMenuDisplayForm !== DisplayForm.draw"
id="component-container" id="component-container"
class="show-component"
> >
<q-scroll-area
:style="`width: ${showComponent.width}px;height: ${showComponent.height}px`"
>
<div class="show-component">
<cCTV-monitoring <cCTV-monitoring
v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'" v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'"
:stationName="drawStore.selectSubmenuAndStation.station" :stationName="drawStore.selectSubmenuAndStation.station"
/> />
</div> </div>
</q-scroll-area>
</div>
<q-page-sticky position="bottom-right" :offset="fabPos"> <q-page-sticky position="bottom-right" :offset="fabPos">
<q-fab <q-fab
icon="add" icon="add"
@ -555,6 +560,10 @@ const canvasHeight = ref(0);
const headerHeight = ref(0); const headerHeight = ref(0);
const footerHeight = ref(0); const footerHeight = ref(0);
const rightWidth = ref(0); const rightWidth = ref(0);
const showComponent = reactive({
width: 0,
height: 0,
});
function onHeaderResize(size: { height: number; width: number }) { function onHeaderResize(size: { height: number; width: number }) {
headerHeight.value = size.height; headerHeight.value = size.height;
@ -581,6 +590,7 @@ function onResize() {
const componentDom = document.getElementById('component-container'); const componentDom = document.getElementById('component-container');
if (dom) { if (dom) {
dom.style.width = canvasWidth.value + 'px'; dom.style.width = canvasWidth.value + 'px';
showComponent.width = canvasWidth.value;
if (subMenuDisplayForm.value == DisplayForm.draw) { if (subMenuDisplayForm.value == DisplayForm.draw) {
dom.style.height = canvasHeight.value + 'px'; dom.style.height = canvasHeight.value + 'px';
} else if (subMenuDisplayForm.value == DisplayForm.drawAndComponent) { } else if (subMenuDisplayForm.value == DisplayForm.drawAndComponent) {
@ -588,10 +598,12 @@ function onResize() {
(subMenu) => subMenu.value == selectSubMenuName.value (subMenu) => subMenu.value == selectSubMenuName.value
).heightPercent; ).heightPercent;
dom.style.height = (heightPercent / 100) * canvasHeight.value + 'px'; dom.style.height = (heightPercent / 100) * canvasHeight.value + 'px';
componentDom.style.height = const height = (1 - heightPercent / 100) * canvasHeight.value - 1;
(1 - heightPercent / 100) * canvasHeight.value - 1 + 'px'; componentDom.style.height = height + 'px';
showComponent.height = height;
} else { } else {
componentDom.style.height = canvasHeight.value + 'px'; componentDom.style.height = canvasHeight.value + 'px';
showComponent.height = canvasHeight.value;
} }
} }
} }