src/views/databoard/components/Container.vue

@@ -6,14 +6,23 @@
 -->
 
 <template>
-	<div
-		class="kiln-container"
-		:style="{ width: width ? width + 'px' : 'initial' }">
-		<div class="container-hd">
-			<i class="">
-				<img src="" alt="" />
+	<div class="kiln-container" :class="['kiln-container__' + size]">
+		<div class="container-hd" style="display: flex; align-items: center">
+			<i
+				class=""
+				style="display: inline-block; margin-left: 12px; padding-top: 4px">
+				<img :src="imgSrc" width="18" height="16" alt="" />
 			</i>
-			<span>{{ name }}</span>
+			<span
+				style="
+					color: #fff;
+					font-size: 20px;
+					line-height: 2;
+					margin-left: 6px;
+					display: inline-block;
+				">
+				{{ name }}
+			</span>
 		</div>
 		<div class="container-body">
 			<slot>
@@ -27,11 +36,20 @@
 export default {
 	name: 'KilnContainer',
 	components: {},
-	props: ['name', 'width'],
+	props: ['name', 'width', 'size'],
 	data() {
 		return {};
 	},
-	computed: {},
+	computed: {
+		imgSrc() {
+			switch (this.name) {
+				case '原料用量统计':
+					return require('../assets/move.png');
+				case '风机运行频率':
+					return require('../assets/flow.png');
+			}
+		},
+	},
 	methods: {},
 };
 </script>
@@ -41,9 +59,27 @@ export default {
 	display: inline-block;
 	width: 100%;
 	height: 100%;
-	background: #ccc3;
+	padding: 8px;
 	display: flex;
 	flex-direction: column;
 	position: relative;
+
+	&__small {
+		background: url(../assets/short.png) no-repeat;
+		background-size: 100% 100%;
+		background-position: 0 0;
+	}
+
+	&__middle {
+		background: url(../assets/middle.png) no-repeat;
+		background-size: 100% 100%;
+		background-position: 0 0;
+	}
+
+	&__large {
+		background: url(../assets/high.png) no-repeat;
+		background-size: 100% 100%;
+		background-position: 0 0;
+	}
 }
 </style>

src/views/databoard/components/ShadowRect.vue

@@ -63,7 +63,7 @@ export default {
 .shadow-rect {
 	padding: 8px;
 	border-radius: 2px;
-	box-shadow: inset 0 0 10px 2px #ccc9;
+	box-shadow: inset 0 0 8px 2px #ccc3;
 	color: white;
 	display: flex;
 	align-items: center;

src/views/databoard/components/line.js

@@ -6,10 +6,10 @@ export default {
 			<div
 				class="line"
 				style={{
-					width: this.horizontal ? '100%' : '2px',
-					height: this.horizontal ? '2px' : '100%',
+					width: this.horizontal ? '100%' : '4px',
+					height: this.horizontal ? '4px' : '100%',
 					background:
-						'radial-gradient(ellipse at center, #3CE7FF 100%, #3CE7FF 50%, #3CE7FF 0%)',
+						'radial-gradient(ellipse at center, #3CE7FF, #3CE7FF66, transparent, transparent)',
 				}}></div>
 		);
 	},

src/views/databoard/kiln/FanSequence.vue

@@ -0,0 +1,54 @@
+<!-- 
+    filename: FanSequence.vue
+    author: liubin
+    date: 2023-12-06 09:40:51
+    description: 
+-->
+
+<template>
+	<Container name="风机运行频率" size="middle" 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 14" :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>
+</template>
+
+<script>
+import Container from '../components/Container.vue';
+import ShadowRect from '../components/ShadowRect.vue';
+export default {
+	name: 'FanSequence',
+	components: { Container, ShadowRect },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/databoard/kiln/LeftFour.vue

@@ -0,0 +1,39 @@
+<!-- 
+    filename: LeftFour.vue
+    author: liubin
+    date: 2023-12-06 09:35:30
+    description: 
+-->
+
+<template>
+	<div
+		class="left-four"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr 1fr;
+		">
+		<MaterialCost />
+		<MaterialCost />
+		<MaterialCost />
+		<FanSequence />
+	</div>
+</template>
+
+<script>
+import MaterialCost from './MaterialCost.vue';
+import FanSequence from './FanSequence.vue';
+export default {
+	name: 'LeftFour',
+	components: { MaterialCost, FanSequence },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/databoard/kiln/MaterialCost.vue

@@ -0,0 +1,58 @@
+<!-- 
+    filename: MaterialCost.vue
+    author: liubin
+    date: 2023-12-06 09:09:27
+    description: 
+-->
+
+<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>
+		</div>
+	</Container>
+</template>
+
+<script>
+import Container from '../components/Container.vue';
+import ShadowRect from '../components/ShadowRect.vue';
+export default {
+	name: 'MaterialCost',
+	components: { Container, ShadowRect },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

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;
@@ -70,49 +69,23 @@
 				gap: 8px;
 			">
 			<ShadowRect v-for="n in 8" :key="n"> 
-				<!-- without slot  -->
 			</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>