From b4d2b690044b251402cf9521c6fdfa966d3a7740 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Mon, 11 Dec 2023 09:11:51 +0800
Subject: [PATCH] update

---
 src/views/databoard/kiln/GasHandle.vue | 130 ++++++++++++++++++++++++
 src/views/databoard/kiln/KilnInfo.vue  |  71 ++++++++++++++
 src/views/databoard/kiln/RightTwo.vue  | 131 +------------------------
 3 files changed, 206 insertions(+), 126 deletions(-)
 create mode 100644 src/views/databoard/kiln/GasHandle.vue
 create mode 100644 src/views/databoard/kiln/KilnInfo.vue

diff --git a/src/views/databoard/kiln/GasHandle.vue b/src/views/databoard/kiln/GasHandle.vue
new file mode 100644
index 00000000..942d9f97
--- /dev/null
+++ b/src/views/databoard/kiln/GasHandle.vue
@@ -0,0 +1,130 @@
+<!-- 
+    filename: GasHandle.vue
+    author: liubin
+    date: 2023-12-11 09:02:40
+    description: 
+-->
+
+<template>
+	<div class="gas-handle" style="flex: 2">
+		<Container name="烟气处理" size="large" style="">
+			<div
+				class=""
+				style="
+					flex: 1;
+					display: grid;
+					grid-template-columns: 1fr 1fr;
+					grid-template-rows: auto;
+					gap: 8px;
+					padding: 8px;
+				">
+				<ShadowRect>
+					<span
+						style="
+							font-size: 16px;
+							line-height: 1.24;
+							flex: 1.2;
+							text-align: right;
+							padding-right: 8px;
+							letter-spacing: 1px;
+						">
+						氧气含量
+					</span>
+					<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
+				</ShadowRect>
+				<ShadowRect>
+					<div
+						style="
+							font-size: 16px;
+							line-height: 1.5;
+							flex: 1.2;
+							text-align: right;
+							padding-right: 8px;
+							letter-spacing: 3px;
+						">
+						<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>
+				</ShadowRect>
+
+				<ShadowRect>
+					<div
+						style="
+							font-size: 16px;
+							line-height: 1.5;
+							flex: 1.2;
+							text-align: right;
+							padding-right: 8px;
+							letter-spacing: 3px;
+						">
+						<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>
+				</ShadowRect>
+
+				<ShadowRect>
+					<div
+						style="
+							font-size: 16px;
+							line-height: 1.5;
+							flex: 1.2;
+							text-align: right;
+							padding-right: 8px;
+							letter-spacing: 3px;
+						">
+						<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>
+				</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">
+						烟气趋势图
+					</h2>
+					<Switcher />
+				</div>
+				<div
+					class="select-line"
+					style="
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+					">
+					<SelectorBtnGroup
+						:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
+					<SelectorBtnGroup :options="['日', '周', '月', '年']" />
+				</div>
+				<div class="chart" style="height: 240px"></div>
+			</div>
+		</Container>
+	</div>
+</template>
+
+<script>
+import Container from '../components/Container.vue';
+import ShadowRect from '../components/ShadowRect.vue';
+import KilnLine from '../components/line';
+
+export default {
+	name: 'GasHandle',
+	components: { Container, ShadowRect, KilnLine },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.gas-handle {
+}
+</style>
diff --git a/src/views/databoard/kiln/KilnInfo.vue b/src/views/databoard/kiln/KilnInfo.vue
new file mode 100644
index 00000000..c4341541
--- /dev/null
+++ b/src/views/databoard/kiln/KilnInfo.vue
@@ -0,0 +1,71 @@
+<!-- 
+    filename: KilnInfo.vue
+    author: liubin
+    date: 2023-12-11 09:01:15
+    description: 
+-->
+
+<template>
+	<div class="kiln-info" style="flex: 1">
+		<Container name="窑炉信息" size="small" style="">
+			<div
+				class="absolute"
+				style="
+					padding: 12px;
+					display: grid;
+					grid-template-columns: repeat(2, 1fr);
+					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>
+			</div>
+		</Container>
+	</div>
+</template>
+
+<script>
+import Container from '../components/Container.vue';
+import ShadowRect from '../components/ShadowRect.vue';
+export default {
+	name: 'KilnInfo',
+	components: { Container, ShadowRect },
+	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: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.kiln-info {
+}
+</style>
diff --git a/src/views/databoard/kiln/RightTwo.vue b/src/views/databoard/kiln/RightTwo.vue
index 3fcc5034..001e7116 100644
--- a/src/views/databoard/kiln/RightTwo.vue
+++ b/src/views/databoard/kiln/RightTwo.vue
@@ -9,131 +9,8 @@
 	<div
 		class="right-two"
 		style="display: flex; gap: 16px; flex-direction: column">
-		<div class="kiln-info" style="flex: 1">
-			<Container name="窑炉信息" size="small" style="">
-				<div
-					class="absolute"
-					style="
-						padding: 12px;
-						display: grid;
-						grid-template-columns: repeat(2, 1fr);
-						grid-auto-rows: auto;
-						gap: 8px;
-					">
-					<ShadowRect v-for="n in 8" :key="n" :rounded="false">
-						<span
-							style="
-								font-size: 16px;
-								line-height: 1.24;
-								flex: 1.2;
-								text-align: right;
-								padding-right: 8px;
-								letter-spacing: 1px;
-							">
-							{{ n }}#风机
-						</span>
-						<span style="font-size: 16px; line-height: 1.24; flex: 1">
-							{{ Math.floor(Math.random() * 100) }}Hz
-						</span>
-					</ShadowRect>
-				</div>
-			</Container>
-		</div>
-		<div class="gas-handle" style="flex: 2">
-			<Container name="烟气处理" size="large" style="">
-				<div
-					class=""
-					style="
-						flex: 1;
-						display: grid;
-						grid-template-columns: 1fr 1fr;
-						grid-template-rows: auto;
-						gap: 8px;
-						padding: 8px;
-					">
-					<ShadowRect>
-						<span
-							style="
-								font-size: 16px;
-								line-height: 1.24;
-								flex: 1.2;
-								text-align: right;
-								padding-right: 8px;
-								letter-spacing: 1px;
-							">
-							氧气含量
-						</span>
-						<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
-					</ShadowRect>
-					<ShadowRect>
-						<div
-							style="
-								font-size: 16px;
-								line-height: 1.5;
-								flex: 1.2;
-								text-align: right;
-								padding-right: 8px;
-								letter-spacing: 3px;
-							">
-							<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>
-					</ShadowRect>
-
-					<ShadowRect>
-						<div
-							style="
-								font-size: 16px;
-								line-height: 1.5;
-								flex: 1.2;
-								text-align: right;
-								padding-right: 8px;
-								letter-spacing: 3px;
-							">
-							<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>
-					</ShadowRect>
-
-					<ShadowRect>
-						<div
-							style="
-								font-size: 16px;
-								line-height: 1.5;
-								flex: 1.2;
-								text-align: right;
-								padding-right: 8px;
-								letter-spacing: 3px;
-							">
-							<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>
-					</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;">烟气趋势图</h2>
-						<Switcher />
-					</div>
-					<div
-						class="select-line"
-						style="
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-						">
-						<SelectorBtnGroup
-							:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
-						<SelectorBtnGroup :options="['日', '周', '月', '年']" />
-					</div>
-					<div class="chart" style="height: 220px"></div>
-				</div>
-			</Container>
-		</div>
+		<KilnInfo />
+		<GasHandle />
 	</div>
 </template>
 
@@ -143,9 +20,11 @@ import ShadowRect from '../components/ShadowRect.vue';
 import KilnLine from '../components/line';
 import Switcher from '../components/Switcher.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
+import KilnInfo from './KilnInfo.vue';
+import GasHandle from './GasHandle.vue';
 export default {
 	name: 'RightTwo',
-	components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect },
+	components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect, KilnInfo, GasHandle },
 	props: {},
 	data() {
 		return {};