155 lines
3.5 KiB
Vue
155 lines
3.5 KiB
Vue
<template>
|
|
<div class='home-box'>
|
|
<div
|
|
id="homeComtainerB"
|
|
ref="homeComtainerB"
|
|
>
|
|
<div
|
|
class='home-comtainer'
|
|
id="homeComtainer"
|
|
style="width: 1920px; height: 1080px"
|
|
:style="{ transform: 'scale(' + scaleNum + ')' }"
|
|
>
|
|
<HomeHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange"/>
|
|
<div class='line-one'>
|
|
<LossSum style='margin-right: 16px;'/>
|
|
<EqAlarm style='margin-right: 16px;'/>
|
|
<Count />
|
|
</div>
|
|
<div class='line-two'>
|
|
<div>
|
|
<SectionInputAndOutput style='margin-bottom: 16px;'/>
|
|
<LineRate />
|
|
</div>
|
|
<LineInpurAndOutput style='margin-left: 16px;'/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import HomeHeader from './components/HomeHeader.vue';
|
|
import LossSum from './components/LossSum.vue';
|
|
import EqAlarm from './components/EqAlarm.vue';
|
|
import Count from './components/Count.vue';
|
|
import SectionInputAndOutput from './components/SectionInputAndOutput.vue';
|
|
import LineRate from './components/LineRate.vue';
|
|
import LineInpurAndOutput from './components/LineInpurAndOutput.vue';
|
|
import { debounce } from '@/utils/debounce';
|
|
import screenfull from 'screenfull';
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
HomeHeader,
|
|
LossSum,
|
|
EqAlarm,
|
|
Count,
|
|
SectionInputAndOutput,
|
|
LineRate,
|
|
LineInpurAndOutput
|
|
},
|
|
data() {
|
|
return {
|
|
isFullScreen: false,
|
|
scaleNum: 1
|
|
};
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
mounted() {
|
|
this.boxReset();
|
|
window.addEventListener('resize', this.boxReset);
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('resize', this.boxReset);
|
|
},
|
|
methods: {
|
|
boxReset() {
|
|
debounce(() => {
|
|
this.resetSize();
|
|
}, 300)();
|
|
},
|
|
change() {
|
|
this.isFullScreen = screenfull.isFullscreen;
|
|
},
|
|
init() {
|
|
if (screenfull.isEnabled) {
|
|
screenfull.on('change', this.change);
|
|
}
|
|
},
|
|
destroy() {
|
|
if (screenfull.isEnabled) {
|
|
screenfull.off('change', this.change);
|
|
}
|
|
},
|
|
// 全屏
|
|
screenfullChange() {
|
|
if (!screenfull.isEnabled) {
|
|
this.$message({
|
|
message: 'you browser can not work',
|
|
type: 'warning',
|
|
});
|
|
return false;
|
|
}
|
|
screenfull.toggle(this.$refs.homeComtainerB);
|
|
},
|
|
resetSize() {
|
|
let coldContainerBox = document.getElementById('homeComtainer');
|
|
let rw = parseFloat(window.innerWidth);
|
|
let rh = parseFloat(window.innerHeight);
|
|
let bw = parseFloat(coldContainerBox.style.width);
|
|
let bh = parseFloat(coldContainerBox.style.height);
|
|
let wx = 0;
|
|
let hx = 0;
|
|
if (screenfull.isFullscreen) {
|
|
wx = rw / bw;
|
|
hx = rh / bh;
|
|
} else {
|
|
if (this.$store.state.app.sidebar.opened) {
|
|
wx = (rw - 280) / bw;
|
|
hx = (rh - 116) / bh;
|
|
} else {
|
|
wx = (rw - 85) / bw;
|
|
hx = (rh - 116) / bh;
|
|
}
|
|
}
|
|
this.scaleNum = wx;
|
|
},
|
|
},
|
|
watch: {
|
|
'$store.state.app.sidebar.opened': {
|
|
handler(newVal, oldVal) {
|
|
this.boxReset();
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.home-box {
|
|
min-height: calc(100vh - 56px - 72px);
|
|
min-width: calc(100vh - 280px);
|
|
background-color: #F2F4F9;
|
|
}
|
|
.home-comtainer{
|
|
background-color: #F2F4F9;
|
|
position: absolute;
|
|
transform-origin: 16px 8px;
|
|
top: 0px;
|
|
left: 0px;
|
|
padding-left: 16px;
|
|
padding-top: 10px;
|
|
overflow: hidden;
|
|
.line-one {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
}
|
|
.line-two {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
</style> |