1

src/views/databoard/kiln/index.vue

@@ -6,36 +6,46 @@
 -->
 
 <template>
-	<div
-		class="KilnDataBoard"
-		style="
-			position: absolute;
-			top: -8px;
-			left: -16px;
-			width: calc(100% + 28px);
-			height: calc(100% + 38px);
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
-		">
-		<KHeader />
+	<div id='kilnContainer' style="width: 100%;height: 100%;">
 		<div
-			class="main-body"
-			style="flex: 1; display: flex; gap: 16px; padding: 8px 16px">
-			<div class="left-side" style="flex: 2">
-				<LeftFour />
-			</div>
-			<div class="right-side" style="flex: 1">
-				<RightTwo />
+			id='kilnContainerB'
+			ref='kilnContainer'
+			class="KilnDataBoard"
+			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'/>
+			<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.vue';
-import LeftFour from './LeftFour.vue';
+import KHeader from '../components/Header';
+import LeftFour from './LeftFour';
 import RightTwo from './RightTwo.vue';
+import screenfull from 'screenfull'
+import { debounce } from '@/utils/debounce'
+import { getDcsMsg } from './../utils/dcs'
 
 export default {
 	name: 'KilnDataBoard',
@@ -49,15 +59,110 @@ export default {
 	// 		resizeChart: null,
 	// 	};
 	// },
-	mounted() {
-		// this.$el.addEventListener('resize', () => {
-		// 	console.log('resizzzze...')
-		// 	this.resizeChart = Math.random();
-		// });
-	},
 	data() {
-		return {};
+		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()
+    })
+		// this.getMes()
+		// closeWebsocket()
+		getDcsMsg()
+		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.kilnContainer)
+			console.log('11111')
+			// this.resetSize()
+			console.log('2222')
+    },
+		resetSize() {
+      let kilnContainerBox = document.querySelector('#kilnContainerB')
+      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) {
+				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
+    },
+		// 获取ws
+		getMes() {
+			const userId = 'dcsmsg' + new Date().getTime()
+			connectWebsocket(
+				// 测试地址
+				'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
+				// 传递给后台的数据
+				'',
+				// 成功拿到后台返回的数据的回调函数
+				(data) => {
+					console.log('成功的回调函数, 接收到的data数据: ', data)
+
+				},
+				// websocket连接失败的回调函数
+				(err) => {
+					console.log('失败的回调函数', err)
+				}
+			)
+		}
+	}
 };
 </script>
 
@@ -66,5 +171,6 @@ export default {
 	background: url(../assets/bg.png) no-repeat;
 	background-size: cover;
 	background-position: 0 0;
+	overflow: auto;
 }
 </style>