yudao-dev/src/views/databoard/kiln/index.vue

<template>
	<div
		id="kilnContainerB"
		ref="kilnContainerB"
		style="width: 100%; height: 100%">
		<div
			id="kilnContainer"
			ref="kilnContainer"
			class="KilnDataBoard"
			style="
				position: absolute;
				transform-origin: 16px 8px;
				font-size: 16px;
				top: 0px;
				left: 0px;
				width: 1920px;
				height: 1080px;
				display: flex;
				flex-direction: column;
				gap: 24px;
			"
			:style="{ transform: 'scale(' + scaleNum + ')' }">
			<KHeader
				:isFullScreen="isFullScreen"
				@screenfullChange="screenfullChange"
				topTitle="窑炉生产运行驾驶舱" />
			<div
				class="main-body"
				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
				<div
					class="left-side"
					style="flex: 2">
					<LeftFour />
				</div>
				<div
					class="right-side"
					style="flex: 1">
					<RightTwo />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import KHeader from '../components/Header';
import LeftFour from './LeftFour';
import RightTwo from './RightTwo.vue';
import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce';

export default {
	name: 'Kiln',
	components: {
		KHeader,
		LeftFour,
		RightTwo,
	},
	computed: {
		sidebarStatus() {
			return this.$store.state.app.sidebar.opened;
		},
	},
	// provide() {
	// 	return {
	// 		resizeChart: null,
	// 	};
	// },
	data() {
		return {
			isFullScreen: false,
			scaleNum: 0.8,
		};
	},
	watch: {
		sidebarStatus() {
			this.boxReset();
		},
	},
	created() {
		this.init();
	},
	mounted() {
		this.boxReset();
		window.addEventListener('resize', this.boxReset);
	},
	destroyed() {
		window.removeEventListener('resize', this.boxReset);
		this.destroy();
	},
	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.kilnContainerB);
		},
		resetSize() {
			let kilnContainerBox = document.getElementById('kilnContainer');
			let rw = parseFloat(window.innerWidth);
			let rh = parseFloat(window.innerHeight);
			let bw = parseFloat(kilnContainerBox.style.width);
			let bh = parseFloat(kilnContainerBox.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;
		},
	},
};
</script>

<style scoped lang="scss">
.KilnDataBoard {
	background: url(../assets/bg.png) no-repeat;
	background-size: cover;
	background-position: 0 0;
	overflow: auto;
}
</style>