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

<template>
	<div
		id="deepProcessingContainerB"
		ref="deepProcessingContainerB"
		style="width: 100%; height: 100%">
		<div
			id="deepProcessingContainer"
			ref="deepProcessingContainer"
			class="deepProcessingBoard"
			style="
				position: absolute;
				transform-origin: left top;
				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="display: grid; gap: 16px; grid-template-rows: 462px 462px">
				<TopThree />
				<BottomTwo />
			</div>

			<!-- <div
				class="main-body"
				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
				<div class="left-side" style="flex: 1">
					<TopThree />
				</div>
				<div class="middle-side" style="flex: 1">
					<BottomTwo />
				</div>
			</div> -->
		</div>
	</div>
</template>

<script>
import KHeader from '../components/Header';
import TopThree from './TopThree';
import BottomTwo from './BottomTwo';
import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce';
import { getDcsMsg, getMesMsg } from './../utils/wsInterface';

export default {
	name: 'deepProcessingBoard',
	components: {
		KHeader,
		TopThree,
		BottomTwo,
	},
	// provide() {
	// 	return {
	// 		resizeChart: null,
	// 	};
	// },
	data() {
		return {
			isFullScreen: false,
			scaleNum: 0.8,
		};
	},
	created() {
		this.init();
	},
	destroy() {
		this.destroy();
	},
	mounted() {
		this.boxReset = debounce(() => {
			this.resetSize();
		}, 300);
		this.boxReset();
		window.addEventListener('resize', () => {
			this.boxReset();
		});
		// closeWebsocket()
		// getDcsMsg()
		// getMesMsg()
	},
	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.deepProcessingContainerB);
		},
		resetSize() {
			let deepProcessingContainer = document.getElementById(
				'deepProcessingContainer'
			);
			let rw = parseFloat(window.innerWidth);
			let rh = parseFloat(window.innerHeight);
			let bw = parseFloat(deepProcessingContainer.style.width);
			let bh = parseFloat(deepProcessingContainer.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">
.deepProcessingBoard {
	background: url(../assets/bg.png) no-repeat;
	background-size: cover;
	background-position: 0 0;
	overflow: auto;
}
</style>