12.29

src/views/databoard/deepProcessing/BottomTwo.vue

@@ -0,0 +1,29 @@
+<template>
+	<div
+		class="bottom-two"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 462px 462px;
+		">
+		<OrderStatus />
+		<YieldRate />
+	</div>
+</template>
+
+<script>
+import OrderStatus from './OrderStatus.vue';
+import YieldRate from './YieldRate.vue';
+export default {
+	name: 'BottomTwo',
+	components: { OrderStatus, YieldRate },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/databoard/deepProcessing/OrderStatus.vue

@@ -0,0 +1,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="订单完成情况" size="small" style="">
+      digndna
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'OrderStatus',
+  components: { Container },
+}
+</script>

src/views/databoard/deepProcessing/TopThree.vue

@@ -0,0 +1,29 @@
+<template>
+	<div
+		class="top-three"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 462px 462px;
+		">
+		<OrderStatus />
+		<YieldRate />
+	</div>
+</template>
+
+<script>
+import OrderStatus from './OrderStatus.vue';
+import YieldRate from './YieldRate.vue';
+export default {
+	name: 'TopThree',
+	components: { OrderStatus, YieldRate },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/databoard/deepProcessing/YieldRate.vue

@@ -0,0 +1,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="本日生产良品率" size="small" style="">
+      0000987
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'YieldRate',
+  components: { Container },
+}
+</script>

src/views/databoard/deepProcessing/index.vue

@@ -0,0 +1,145 @@
+<template>
+	<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
+		<div
+			id='deepProcessingContainer'
+			ref='deepProcessingContainer'
+			class="deepProcessingBoard"
+			style="
+				position: absolute;
+				transform-origin: 16px 8px;
+				font-size: 16px;
+				top: -8px;
+				left: -16px;
+				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: 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()
+		console.log('mounted...........')
+	},
+	destroyed() {
+		console.log('destroyed...........')
+	},
+	methods: {
+		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.wholePlantContainerB)
+    },
+		resetSize() {
+      let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
+      let rw = parseFloat(window.innerWidth)
+      let rh = parseFloat(window.innerHeight)
+      let bw = parseFloat(wholePlantContainerBox.style.width)
+      let bh = parseFloat(wholePlantContainerBox.style.height)
+			let wx = 0
+			let hx = 0
+			if (screenfull.isFullscreen) {
+				console.log('全屏')
+				wx = rw / bw
+				hx = rh / bh
+				console.log(this.scaleNum)
+			}else{
+				console.log('非全屏')
+				console.log(this.$store.state.app.sidebar.opened)
+				if (this.$store.state.app.sidebar.opened) {
+					wx = (rw-264) / bw
+					hx = (rh-116) / bh
+				}else{
+					wx = (rw-78) / 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>