src/views/databoard/kiln/EnergeCost.vue

@@ -7,35 +7,29 @@
 
 <template>
 	<Container name="能耗" size="middle" style="">
+		<EnergeTop />
+		<SplitLine :horizontal="true" />
+		<div class="" style="flex: 2; padding: 8px">
 			<div
-			class="absolute"
+				class="header-line"
-			style="
+				style="margin-bottom: 8px; display: flex; align-items: center">
-				padding: 12px;
+				<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
-				display: grid;
+					烟气趋势图
-				grid-template-columns: repeat(3, 1fr);
+				</h2>
-				grid-auto-rows: auto;
+				<Switcher />
-				gap: 8px;
-			">
-			<ShadowRect v-for="n in 9" :key="n" :rounded="false">
-				<div
-					class="material"
-					style="
-						flex: 1;
-						padding: 6px;
-						display: flex;
-						flex-direction: column;
-						gap: 4px;
-						align-items: center;
-						justify-content: center;
-					">
-					<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
-						234
-					</span>
-					<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
-						- 原料1/吨 -
-					</span>
 			</div>
-			</ShadowRect>
+			<div
+				class="select-line"
+				style="
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+				">
+				<SelectorBtnGroup
+					:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
+				<SelectorBtnGroup :options="['日', '周', '月', '年']" />
+			</div>
+			<div class="chart" style="height: 193px"></div>
 		</div>
 	</Container>
 </template>
@@ -43,9 +37,12 @@
 <script>
 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';
 export default {
 	name: 'MaterialCost',
-	components: { Container, ShadowRect },
+	components: { Container, ShadowRect, SplitLine, Switcher, EnergeTop },
 	props: {},
 	data() {
 		return {};

src/views/databoard/kiln/EnergeTop.vue

@@ -0,0 +1,123 @@
+<!-- 
+    filename: EnergeTop.vue
+    author: liubin
+    date: 2023-12-11 09:31:41
+    description: 
+-->
+
+<template>
+	<div
+		class="energe-top"
+		style="
+			flex: 1;
+			display: grid;
+			grid-template-columns: 1fr 1fr 1fr;
+			grid-template-rows: auto;
+			gap: 8px;
+			padding: 4px;
+		">
+		<ShadowRect
+			style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
+			<span
+				style="
+					font-size: 16px;
+					line-height: 1.55;
+					text-align: right;
+					padding-right: 8px;
+					letter-spacing: 1px;
+				">
+				余热发电
+			</span>
+			<span
+				style="
+					font-size: 16px;
+					line-height: 1.55;
+					text-align: right;
+					padding-right: 8px;
+					letter-spacing: 1px;
+				">
+				1023kWh
+			</span>
+		</ShadowRect>
+
+		<ShadowRect>
+			<div
+				style="
+					font-size: 16px;
+					line-height: 1.25;
+					flex: 1.2;
+					text-align: right;
+					padding-right: 8px;
+					letter-spacing: 3px;
+				">
+				<p style="margin: 0; line-height: inherit">水耗量</p>
+			</div>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">32Km³</span>
+		</ShadowRect>
+
+		<ShadowRect>
+			<div
+				style="
+					font-size: 16px;
+					line-height: 1.25;
+					flex: 1.2;
+					text-align: right;
+					padding-right: 8px;
+					letter-spacing: 3px;
+				">
+				<p style="margin: 0; line-height: inherit">天然气I</p>
+			</div>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">322Km³</span>
+		</ShadowRect>
+
+		<ShadowRect>
+			<div
+				style="
+					font-size: 16px;
+					line-height: 1.25;
+					flex: 1.2;
+					text-align: right;
+					padding-right: 8px;
+					letter-spacing: 3px;
+				">
+				<p style="margin: 0; line-height: inherit">电耗量</p>
+			</div>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">132kWh</span>
+		</ShadowRect>
+
+		<ShadowRect>
+			<div
+				style="
+					font-size: 16px;
+					line-height: 1.25;
+					flex: 1.2;
+					text-align: right;
+					padding-right: 8px;
+					letter-spacing: 3px;
+				">
+				<p style="margin: 0; line-height: inherit">天然气II</p>
+			</div>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">992Km³</span>
+		</ShadowRect>
+	</div>
+</template>
+
+<script>
+import ShadowRect from '../components/ShadowRect.vue';
+
+export default {
+	name: 'EnergeTop',
+	components: { ShadowRect },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.energe-top {
+}
+</style>

src/views/databoard/kiln/FanSequence.vue

@@ -7,6 +7,9 @@
 
 <template>
 	<Container name="风机运行频率" size="middle" style="">
+		<div class="" style="position: absolute; top: 18px; left: 180px">
+			<Switcher />
+		</div>
 		<div
 			class="absolute"
 			style="
@@ -39,9 +42,10 @@
 <script>
 import Container from '../components/Container.vue';
 import ShadowRect from '../components/ShadowRect.vue';
+import Switcher from '../components/Switcher.vue';
 export default {
 	name: 'FanSequence',
-	components: { Container, ShadowRect },
+	components: { Container, ShadowRect, Switcher },
 	props: {},
 	data() {
 		return {};

src/views/databoard/kiln/GasHandle.vue

@@ -101,7 +101,7 @@
 						:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
 					<SelectorBtnGroup :options="['日', '周', '月', '年']" />
 				</div>
-				<div class="chart" style="height: 240px"></div>
+				<div class="chart" style="height: 220px"></div>
 			</div>
 		</Container>
 	</div>
@@ -111,10 +111,12 @@
 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: 'GasHandle',
-	components: { Container, ShadowRect, KilnLine },
+	components: { Container, ShadowRect, KilnLine, Switcher, SelectorBtnGroup },
 	props: {},
 	data() {
 		return {};