update

src/views/databoard/kiln/EnergeCost.vue

@@ -7,35 +7,29 @@
 
 <template>
 	<Container name="能耗" size="middle" style="">
-		<div
-			class="absolute"
-			style="
-				padding: 12px;
-				display: grid;
-				grid-template-columns: repeat(3, 1fr);
-				grid-auto-rows: auto;
-				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>
+		<EnergeTop />
+		<SplitLine :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: 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 {};