1

2023-12-28 16:16:25 +08:00
parent 0bb434bc22
commit 41e1f46cfc
28 changed files with 704 additions and 157 deletions
--- a/src/views/databoard/kiln/EnergeCost.vue
+++ b/src/views/databoard/kiln/EnergeCost.vue
@@ -12,13 +12,13 @@
 		<div class="" style="flex: 2; padding: 8px">
 			<div
 				class="header-line"
-				style="margin-bottom: 8px; display: flex; align-items: center">
+				style="margin: 8px 0 16px; display: flex; align-items: center">
 				<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
-					烟气趋势图
+					能耗趋势图
 				</h2>
-				<Switcher />
+				<!-- <Switcher /> -->
 				<div>
-					<span class="lgd lgd-total">总量</span>
+					<!-- <span class="lgd lgd-total">总量</span> -->
 					<!-- <span class="lgd lgd-day">白班</span>
 						<span class="lgd lgd-night">夜班</span> -->
 				</div>
@@ -31,10 +31,10 @@
 					justify-content: space-between;
 				">
 				<SelectorBtnGroup
-					:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
-				<SelectorBtnGroup :options="['日', '周', '月', '年']" />
+					:options="['电耗能', '天然气I', '天然气II']" />
+				<SelectorBtnGroup :options="['周', '月', '年']" />
 			</div>
-			<div class="chart" style="height: 150px; margin-top: 8px;">
+			<div class="chart" style="height: 200px; margin-top: 8px;">
 				<GasChart />
 			</div>
 		</div>
@@ -45,8 +45,8 @@
 import Container from '../components/Container.vue';
 import ShadowRect from '../components/ShadowRect.vue';
 import SplitLine from '../components/line';
-import Switcher from '../components/Switcher.vue';
-import EnergeTop from './EnergeTop.vue';
+import Switcher from '../components/Switcher';
+import EnergeTop from './EnergeTop';
 import GasChart from '../components/GasChart.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
 export default {
--- a/src/views/databoard/kiln/EnergeTop.vue
+++ b/src/views/databoard/kiln/EnergeTop.vue
@@ -15,6 +15,7 @@
 			grid-template-rows: auto;
 			gap: 8px;
 			padding: 4px;
+			margin-bottom: 6px;
 		">
 		<ShadowRect
 			style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
--- a/src/views/databoard/kiln/FanSequence.vue
+++ b/src/views/databoard/kiln/FanSequence.vue
@@ -7,7 +7,7 @@

 <template>
 	<Container name="风机运行频率" size="middle" style="">
-		<div class="" style="position: absolute; top: 18px; left: 180px">
+		<div class="" style="position: absolute; top: 26px; left: 220px">
 			<Switcher />
 		</div>
 		<div
@@ -17,22 +17,22 @@
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
 				grid-auto-rows: auto;
-				gap: 8px;
+				gap: 10px;
 			">
-			<ShadowRect v-for="n in 14" :key="n" :rounded="false">
+			<ShadowRect v-for="(value, key, i) in fanFrequencyInfo" :key="i" :rounded="false">
 				<span
 					style="
-						font-size: 16px;
-						line-height: 1.24;
-						flex: 1.2;
+						font-size: 18px;
+						line-height: 1.1;
+						flex: 3.5;
 						text-align: right;
 						padding-right: 8px;
 						letter-spacing: 1px;
 					">
-					{{ n }}#风机
+					{{ key }}:
 				</span>
-				<span style="font-size: 16px; line-height: 1.24; flex: 1">
-					{{ Math.floor(Math.random() * 100) }}Hz
+				<span style="font-size: 20px; line-height: 1; flex: 1">
+					{{ value }}Hz
 				</span>
 			</ShadowRect>
 		</div>
@@ -42,16 +42,24 @@
 <script>
 import Container from '../components/Container.vue';
 import ShadowRect from '../components/ShadowRect.vue';
-import Switcher from '../components/Switcher.vue';
+import Switcher from '../components/Switcher';
 export default {
 	name: 'FanSequence',
 	components: { Container, ShadowRect, Switcher },
+	computed: {
+		fanFrequencyInfo() {
+			return this.$store.state.websocket.fanFrequencyInfo
+		}
+	},
 	props: {},
 	data() {
 		return {};
 	},
-	computed: {},
-	methods: {},
+	mounted() {
+
+	},
+	methods: {
+	}
 };
 </script>

--- a/src/views/databoard/kiln/GasHandle.vue
+++ b/src/views/databoard/kiln/GasHandle.vue
@@ -21,7 +21,7 @@
 				<ShadowRect>
 					<span
 						style="
-							font-size: 16px;
+							font-size: 20px;
 							line-height: 1.24;
 							flex: 1.2;
 							text-align: right;
@@ -30,12 +30,12 @@
 						">
 						氧气含量
 					</span>
-					<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
 				</ShadowRect>
 				<ShadowRect>
 					<div
 						style="
-							font-size: 16px;
+							font-size: 20px;
 							line-height: 1.5;
 							flex: 1.2;
 							text-align: right;
@@ -45,13 +45,13 @@
 						<p style="margin: 0; line-height: inherit">一氧化氮</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
 				</ShadowRect>

 				<ShadowRect>
 					<div
 						style="
-							font-size: 16px;
+							font-size: 20px;
 							line-height: 1.5;
 							flex: 1.2;
 							text-align: right;
@@ -61,13 +61,13 @@
 						<p style="margin: 0; line-height: inherit">二氧化硫</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">59mg/m³</span>
 				</ShadowRect>

 				<ShadowRect>
 					<div
 						style="
-							font-size: 16px;
+							font-size: 20px;
 							line-height: 1.5;
 							flex: 1.2;
 							text-align: right;
@@ -77,22 +77,22 @@
 						<p style="margin: 0; line-height: inherit">二氧化氮</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
 				</ShadowRect>
 			</div>
 			<KilnLine :horizontal="true" />
 			<div class="" style="flex: 2; padding: 8px">
 				<div
 					class="header-line"
-					style="margin-bottom: 8px; display: flex; align-items: center">
-					<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
+					style="margin-bottom: 10px; display: flex; align-items: center">
+					<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
 						烟气趋势图
 					</h2>
-					<Switcher />
+					<!-- <Switcher /> -->
 					<div>
-						<span class="lgd lgd-total">总量</span>
-						<span class="lgd lgd-day">白班</span>
-						<span class="lgd lgd-night">夜班</span>
+						<!-- <span class="lgd lgd-total">总量</span> -->
+						<!-- <span class="lgd lgd-day">白班</span>
+						<span class="lgd lgd-night">夜班</span> -->
 					</div>
 				</div>
 				<div
@@ -103,10 +103,10 @@
 						justify-content: space-between;
 					">
 					<SelectorBtnGroup
-						:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
+						:options="['氧气含量', '二氧化硫', '一氧化氮', '二氧化氮']" />
 					<SelectorBtnGroup :options="['日', '周', '月', '年']" />
 				</div>
-				<div class="chart" style="height: 220px">
+				<div class="chart" style="height: 250px;margin-top: 10px;">
 					<GasChart />
 				</div>
 			</div>
@@ -118,7 +118,7 @@
 import Container from '../components/Container.vue';
 import ShadowRect from '../components/ShadowRect.vue';
 import KilnLine from '../components/line';
-import Switcher from '../components/Switcher.vue';
+import Switcher from '../components/Switcher';
 import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
 import GasChart from '../components/GasChart.vue';

--- a/src/views/databoard/kiln/IsraCheck.vue
+++ b/src/views/databoard/kiln/IsraCheck.vue
@@ -7,9 +7,10 @@

 <template>
 	<Container name="ISRA缺陷检测" size="middle" style="">
-		<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
+		<ISRAChart />
+		<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
 			<div class="f" style="flex: 9;">
-				<ISRAChart />
+				
 			</div>
 			<ul
 				class="legend"
@@ -27,7 +28,7 @@
 				<li class="fault-3">缺陷3</li>
 				<li class="fault-4">缺陷4</li>
 			</ul>
-		</div>
+		</div> -->
 	</Container>
 </template>

--- a/src/views/databoard/kiln/KilnInfo.vue
+++ b/src/views/databoard/kiln/KilnInfo.vue
@@ -17,22 +17,37 @@
 					grid-auto-rows: auto;
 					gap: 8px;
 				">
-				<ShadowRect v-for="info in kilnInfo" :key="info.name" :rounded="false">
-					<span
-						style="
-							font-size: 16px;
-							line-height: 1.45;
-							flex: 1.2;
-							text-align: right;
-							padding-right: 8px;
-							letter-spacing: 1px;
-						">
-						{{ info.name }}
-					</span>
-					<span style="font-size: 16px; line-height: 1.45; flex: 1">
-						{{ info.value }}
-						<!-- {{ Math.floor(Math.random() * 100) }}Hz -->
-					</span>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">窑炉压力:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.kilnPressure }}</span>
+				</ShadowRect>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">循环水温度:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterTemp }}</span>
+				</ShadowRect>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">循环水流量:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterFlow }}</span>
+				</ShadowRect>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">循环水压力:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterPressure }}</span>
+				</ShadowRect>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">助燃风压力:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.combustionAirPressure }}</span>
+				</ShadowRect>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">碹顶加权温度:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.topTemp }}</span>
+				</ShadowRect>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">压缩气压力:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.compressedAirPressure }}</span>
+				</ShadowRect>
+				<ShadowRect :rounded="false">
+					<span class="kiln-info-item">熔化加权温度:</span>
+					<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.meltTemp }}</span>
 				</ShadowRect>
 			</div>
 		</Container>
@@ -48,24 +63,26 @@ export default {
 	props: {},
 	data() {
 		return {
-			kilnInfo: [
-				{ name: '窑炉压力', value: '83Kpa' },
-				{ name: '循环水温度', value: '53℃' },
-				{ name: '循环水流量', value: '23m³/h' },
-				{ name: '循环水压力', value: '33Kpa' },
-				{ name: '助燃风压力', value: '12Kpa' },
-				{ name: '碹顶加权温度', value: '32℃' },
-				{ name: '压缩气压力', value: '83Kpa' },
-				{ name: '融化加权温度', value: '123℃' },
-			],
 		};
 	},
-	computed: {},
+	computed: {
+		kilnInfoMsg() {
+			return this.$store.state.websocket.kilnInfo
+		}
+	},
 	methods: {},
 };
 </script>

 <style scoped lang="scss">
 .kiln-info {
+	.kiln-info-item {
+		font-size: 20px;
+		line-height: 1.7;
+		flex: 1.5;
+		text-align: right;
+		padding-right: 8px;
+		letter-spacing: 1px;
+	}
 }
 </style>
--- a/src/views/databoard/kiln/LeftFour.vue
+++ b/src/views/databoard/kiln/LeftFour.vue
@@ -12,7 +12,7 @@
 			display: grid;
 			gap: 16px;
 			grid-template-columns: 1fr 1fr;
-			grid-template-rows: 1fr 1fr;
+			grid-template-rows: 462px 462px;
 		">
 		<MaterialCost />
 		<IsraCheck />
--- a/src/views/databoard/kiln/MaterialCost.vue
+++ b/src/views/databoard/kiln/MaterialCost.vue
@@ -21,7 +21,7 @@
 					class="material"
 					style="
 						flex: 1;
-						padding: 6px;
+						padding: 12px 6px 20px;
 						display: flex;
 						flex-direction: column;
 						gap: 4px;
@@ -31,7 +31,7 @@
 					<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
 						234
 					</span>
-					<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
+					<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
 						- 原料1/吨 -
 					</span>
 				</div>
--- a/src/views/databoard/kiln/RightTwo.vue
+++ b/src/views/databoard/kiln/RightTwo.vue
@@ -8,7 +8,11 @@
 <template>
 	<div
 		class="right-two"
-		style="display: flex; gap: 16px; flex-direction: column">
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 320px 605px;
+		">
 		<KilnInfo />
 		<GasHandle />
 	</div>
@@ -18,7 +22,7 @@
 import Container from '../components/Container.vue';
 import ShadowRect from '../components/ShadowRect.vue';
 import KilnLine from '../components/line';
-import Switcher from '../components/Switcher.vue';
+import Switcher from '../components/Switcher';
 import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
 import KilnInfo from './KilnInfo.vue';
 import GasHandle from './GasHandle.vue';
--- a/src/views/databoard/kiln/index.vue
+++ b/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>