From cc0d3d8b75259aaeb803b40f4734e0588adbb0f4 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Wed, 6 Dec 2023 10:38:56 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E7=83=9F=E6=B0=94=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/databoard/components/Container.vue |   4 +
 src/views/databoard/kiln/RightTwo.vue        | 158 +++++++++++++++++++
 src/views/databoard/kiln/index.vue           |  74 +--------
 3 files changed, 168 insertions(+), 68 deletions(-)
 create mode 100644 src/views/databoard/kiln/RightTwo.vue

diff --git a/src/views/databoard/components/Container.vue b/src/views/databoard/components/Container.vue
index 8abbd111..e691b8f5 100644
--- a/src/views/databoard/components/Container.vue
+++ b/src/views/databoard/components/Container.vue
@@ -51,6 +51,10 @@ export default {
 					return require('../assets/gas.png');
 				case '能耗':
 					return require('../assets/gas.png');
+				case '窑炉信息':
+					return require('../assets/gas.png');
+				case '烟气处理':
+					return require('../assets/gas.png');
 			}
 		},
 	},
diff --git a/src/views/databoard/kiln/RightTwo.vue b/src/views/databoard/kiln/RightTwo.vue
new file mode 100644
index 00000000..3fcc5034
--- /dev/null
+++ b/src/views/databoard/kiln/RightTwo.vue
@@ -0,0 +1,158 @@
+<!-- 
+    filename: RightTwo.vue
+    author: liubin
+    date: 2023-12-06 10:19:00
+    description: 
+-->
+
+<template>
+	<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>
+	</div>
+</template>
+
+<script>
+import Container from '../components/Container.vue';
+import ShadowRect from '../components/ShadowRect.vue';
+import KilnLine from '../components/line';
+import Switcher from '../components/Switcher.vue';
+import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
+export default {
+	name: 'RightTwo',
+	components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/databoard/kiln/index.vue b/src/views/databoard/kiln/index.vue
index 9c0d2056..2cef5878 100644
--- a/src/views/databoard/kiln/index.vue
+++ b/src/views/databoard/kiln/index.vue
@@ -18,72 +18,6 @@
 			flex-direction: column;
 			gap: 16px;
 		">
-		<!-- test area  -->
-		<!-- <DateBtnGroup /> -->
-
-		<!-- 风机频率  -->
-		<!-- <div
-			class="absolute"
-			style="
-				position: absolute;
-				top: 120px;
-				right: 100px;
-				padding: 12px;
-				background: #0003;
-				border: 1px solid #ccc;
-				display: grid;
-				grid-template-columns: repeat(2, 320px);
-				grid-auto-rows: 56px;
-				gap: 8px;
-			">
-			<ShadowRect v-for="n in 8" :key="n">
-				<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> -->
-		<!-- 窑炉信息  -->
-		<!-- <div
-			class="absolute"
-			style="
-				position: absolute;
-				top: 450px;
-				right: 100px;
-				padding: 12px;
-				background: #0003;
-				border: 1px solid #ccc;
-				display: grid;
-				grid-template-columns: repeat(2, 320px);
-				grid-auto-rows: 56px;
-				gap: 8px;
-			">
-			<ShadowRect v-for="n in 8" :key="n"> 
-			</ShadowRect>
-		</div> -->
-
-		<!-- 原料用量统计 -->
-		<!-- <div
-			style="
-				position: absolute;
-				top: 10px;
-				left: 10px;
-				margin: 10px;
-				width: 400px;
-			">
-			<MaterialCost />
-		</div> -->
-
 		<!-- btn group  -->
 		<!-- <div
 			class="absolute"
@@ -151,11 +85,13 @@
 			<div class="main-right" style="background: #00f1"></div>
 		</section> -->
 		<KHeader />
-		<div class="main-body" style="flex: 1; display: flex; gap: 16px">
+		<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;"></div>
+			<div class="right-side" style="flex: 1">
+				<RightTwo />
+			</div>
 		</div>
 	</div>
 </template>
@@ -171,6 +107,7 @@ import KHeader from '../components/Header.vue';
 
 import MaterialCost from './MaterialCost.vue';
 import LeftFour from './LeftFour.vue';
+import RightTwo from './RightTwo.vue';
 
 console.log('Line', KilnLine);
 
@@ -181,6 +118,7 @@ export default {
 		KilnLine,
 		KHeader,
 		LeftFour,
+		RightTwo,
 		Container,
 		ShadowRect,
 		SelectorBtnGroup,