yudao-dev/src/views/dashboard/coldDashboard/index.vue

<template>
	<div
		id="coldContainerB"
		ref="coldContainerB"
		style="width: 100%; height: 100%">
		<div
			id="coldContainer"
			class="coldContainer"
			style="width: 1920px; height: 1080px"
			:style="{ transform: 'scale(' + scaleNum + ')' }">
			<KHeader
				:isFullScreen="isFullScreen"
				@screenfullChange="screenfullChange"
				topTitle="自贡冷端数据看板" />
			<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
			<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
			<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
			<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
		</div>
	</div>
</template>
<script>
import KHeader from '../components/Header';
import DataBox from './components/dataBox';
import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce';
import { getUserProfile } from '@/api/system/user';
export default {
	name: 'ColdDashboard',
	components: {
		KHeader,
		DataBox,
	},
	data() {
		return {
			isFullScreen: false,
			scaleNum: 1,
			url: process.env.VUE_APP_WS_API,
			websock: '',
			line1: {},
			line2: {},
			line3: {},
			line4: {},
		};
	},
	created() {
		this.init();
		this.initWebSocket();
	},
	mounted() {
		this.boxReset();
		window.addEventListener('resize', this.boxReset);
	},
	destroyed() {
		window.removeEventListener('resize', this.boxReset);
		this.websocketclose();
	},
	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.coldContainerB);
		},
		resetSize() {
			let coldContainerBox = document.getElementById('coldContainer');
			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;
		},
		initWebSocket() {
			// 初始化weosocket
			const path = `${this.url}/websocket/message?userId=4`;
			this.websock = new WebSocket(path);
			this.websock.onmessage = this.websocketonmessage;
			this.websock.onopen = this.websocketonopen;
			this.websock.onerror = this.websocketonerror;
			this.websock.onclose = this.websocketclose;
		},

		websocketonopen() {
			// 连接建立之后执行send方法发送数据
			this.websocketsend();
		},
		websocketonerror() {
			// 连接建立失败重连
			this.initWebSocket();
		},
		websocketonmessage(e) {
			let msgData = e.data;
			try {
				msgData = JSON.parse(e.data);
			} catch (error) {
				console.log('websocket: [unable to msgData] :  ', e.data);
			}
			if (!Object.prototype.toString.call(msgData).includes('Object')) return;
			msgData.originRatioTables &&
				msgData.originRatioTables.forEach((item) => {
					item.lineName.includes('1') && (this.line1 = item);
					item.lineName.includes('2') && (this.line2 = item);
					item.lineName.includes('3') && (this.line3 = item);
					item.lineName.includes('4') && (this.line4 = item);
				});
		},
		websocketsend() {
			// 数据发送
			this.websock.send('');
		},
		websocketsend(val) {
			// 数据发送
			this.websock.send(val);
		},
		websocketclose(e) {
			// 关闭
			this.websock.close();
			console.log('断开连接', e);
		},
	},
};
</script>
<style lang="scss" scoped>
.coldContainer {
	position: absolute;
	transform-origin: 16px 8px;
	font-size: 16px;
	top: 0px;
	left: 0px;
	width: 1920px;
	height: 1080px;
	background: url(../assets/bg1.png) no-repeat;
	background-size: cover;
	background-position: 0 0;
	overflow: auto;
	.box1 {
		position: absolute;
		top: 141px;
		left: 40px;
	}
	.box2 {
		position: absolute;
		top: 141px;
		right: 40px;
	}
	.box3 {
		position: absolute;
		bottom: 66px;
		left: 40px;
	}
	.box4 {
		position: absolute;
		bottom: 66px;
		right: 40px;
	}
}
</style>