add 用量统计&风机频率

src/views/databoard/kiln/index.vue

@@ -14,16 +14,15 @@
 			left: -16px;
 			width: calc(100% + 28px);
 			height: calc(100% + 38px);
-			background: #073f4a;
 			display: flex;
 			flex-direction: column;
 			gap: 16px;
 		">
 		<!-- test area  -->
-		<DateBtnGroup />
+		<!-- <DateBtnGroup /> -->
 
 		<!-- 风机频率  -->
-		<div
+		<!-- <div
 			class="absolute"
 			style="
 				position: absolute;
@@ -53,9 +52,9 @@
 					{{ Math.floor(Math.random() * 100) }}Hz
 				</span>
 			</ShadowRect>
-		</div>
+		</div> -->
 		<!-- 窑炉信息  -->
-		<div
+		<!-- <div
 			class="absolute"
 			style="
 				position: absolute;
@@ -69,50 +68,24 @@
 				grid-auto-rows: 56px;
 				gap: 8px;
 			">
-			<ShadowRect v-for="n in 8" :key="n">
-				<!-- without slot  -->
+			<ShadowRect v-for="n in 8" :key="n"> 
 			</ShadowRect>
-		</div>
+		</div> -->
 
 		<!-- 原料用量统计 -->
-		<div
-			class="absolute"
+		<!-- <div
 			style="
 				position: absolute;
-				top: 120px;
-				left: 60px;
-				padding: 12px;
-				background: #0003;
-				border: 1px solid #ccc;
-				display: grid;
-				grid-template-columns: repeat(3, 144px);
-				grid-auto-rows: auto;
-				gap: 8px;
+				top: 10px;
+				left: 10px;
+				margin: 10px;
+				width: 400px;
 			">
-			<ShadowRect v-for="n in 9" :key="n" :rounded="true">
-				<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>
+			<MaterialCost />
+		</div> -->
 
 		<!-- btn group  -->
-		<div
+		<!-- <div
 			class="absolute"
 			style="
 				position: absolute;
@@ -136,10 +109,10 @@
 			">
 			<SelectorBtnGroup
 				:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
-		</div>
+		</div> -->
 
 		<!-- switcher  -->
-		<div
+		<!-- <div
 			class="absolute"
 			style="
 				position: absolute;
@@ -150,10 +123,10 @@
 				border: 1px solid #ccc;
 			">
 			<Switcher />
-		</div>
+		</div> -->
 
 		<!-- container  -->
-		<Container name="能耗" :width="300">
+		<!-- <Container name="能耗" :width="300">
 			<div
 				class="v"
 				style="height: 100px; background: #ccc; width: 300px"></div>
@@ -161,10 +134,10 @@
 			<div
 				class="v"
 				style="height: 100px; background: #caf; width: 300px"></div>
-		</Container>
+		</Container> -->
 
 		<!-- null  -->
-		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
+		<!-- <section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
 		<section
 			class="main-body"
 			style="
@@ -176,7 +149,14 @@
 			<div class="main-left" style="background: #f001"></div>
 			<div class="main-middle" style="background: #0f01"></div>
 			<div class="main-right" style="background: #00f1"></div>
-		</section>
+		</section> -->
+		<KHeader />
+		<div class="main-body" style="flex: 1; display: flex; gap: 16px">
+			<div class="left-side" style="flex: 2">
+				<LeftFour />
+			</div>
+			<div class="right-side" style="flex: 1;"></div>
+		</div>
 	</div>
 </template>
 
@@ -187,18 +167,25 @@ import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
 import Switcher from '../components/Switcher.vue';
 import KilnLine from '../components/line';
 import Container from '../components/Container.vue';
+import KHeader from '../components/Header.vue';
 
-console.log('Line', KilnLine)
+import MaterialCost from './MaterialCost.vue';
+import LeftFour from './LeftFour.vue';
+
+console.log('Line', KilnLine);
 
 export default {
 	name: 'KilnDataBoard',
 	components: {
 		DateBtnGroup,
 		KilnLine,
+		KHeader,
+		LeftFour,
 		Container,
 		ShadowRect,
 		SelectorBtnGroup,
 		Switcher,
+		MaterialCost,
 	},
 	props: {},
 	data() {
@@ -211,5 +198,8 @@ export default {
 
 <style scoped lang="scss">
 .KilnDataBoard {
+	background: url(../assets/bg.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
 }
 </style>