<template>
|
<div class="data-screen" :style="screenStyle">
|
<header-panel />
|
<left-panel v-if="!loading" :data="data" />
|
<center-panel v-if="!loading" :data="data" />
|
<right-panel v-if="!loading" :data="data" />
|
</div>
|
</template>
|
|
<script>
|
import HeaderPanel from '@/components/datascreen/HeaderPanel.vue';
|
import LeftPanel from '@/components/datascreen/LeftPanel.vue';
|
import CenterPanel from '@/components/datascreen/CenterPanel.vue';
|
import RightPanel from '@/components/datascreen/RightPanel.vue';
|
import { getData } from './service';
|
|
export default {
|
name: 'DataScreen',
|
components: {
|
HeaderPanel,
|
LeftPanel,
|
CenterPanel,
|
RightPanel
|
},
|
data() {
|
return {
|
screenStyle: {
|
width: '1920px',
|
height: '1080px',
|
transform: `scale(${window.innerWidth / 1920})`,
|
transformOrigin: 'left top'
|
},
|
data: {},
|
loading: true
|
};
|
},
|
created() {
|
this.handleResize();
|
getData().then(res => {
|
this.data = res.data;
|
this.loading = false;
|
});
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleResize);
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleResize);
|
},
|
methods: {
|
handleResize() {
|
const widthScale = window.innerWidth / 1920;
|
const heightScale = window.innerHeight / 1080;
|
const scale = Math.min(widthScale, heightScale);
|
this.screenStyle.transform = `scale(${scale})`;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.data-screen {
|
position: relative;
|
background: #000033;
|
color: #fff;
|
overflow: hidden;
|
background: url('@/assets/背景色.png') no-repeat center center;
|
background-size: 100% 100%;
|
}
|
</style>
|
