update

src/views/databoard/components/Container.vue

@@ -6,14 +6,23 @@
 -->
 
 <template>
-	<div
+	<div class="kiln-container" :class="['kiln-container__' + size]">
-		class="kiln-container"
+		<div class="container-hd" style="display: flex; align-items: center">
-		:style="{ width: width ? width + 'px' : 'initial' }">
+			<i
-		<div class="container-hd">
+				class=""
-			<i class="">
+				style="display: inline-block; margin-left: 12px; padding-top: 4px">
-				<img src="" alt="" />
+				<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,28 @@
 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');
+				case 'ISRA缺陷检测':
+					return require('../assets/gas.png');
+				case '能耗':
+					return require('../assets/gas.png');
+				case '窑炉信息':
+					return require('../assets/gas.png');
+				case '烟气处理':
+					return require('../assets/gas.png');
+			}
+		},
+	},
 	methods: {},
 };
 </script>
@@ -41,9 +67,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/DateBtnGroup.vue

@@ -54,11 +54,11 @@ button {
 	padding: 6px 8px;
 }
 .date-btn-group {
-	position: absolute;
+	// position: absolute;
-	top: 40px;
+	// top: 40px;
-	right: 100px;
+	// right: 100px;
-	border: 1px solid #ccc;
+	// border: 1px solid #ccc;
-	padding: 12px;
+	// padding: 12px;
 	display: flex;
 	align-items: center;
 	gap: 12px;

src/views/databoard/components/Header.vue

@@ -5,21 +5,71 @@
     description: 顶部标题
 -->
 
-<template></template>
+<template>
+	<header class="kiln-header">
+		<h1
+			style="
+				font-size: 32px;
+				margin-bottom: 36px;
+				color: #0ee8e4;
+				letter-spacing: 5px;
+			">
+			窑炉生产运行驾驶舱
+		</h1>
+		<!-- left: 312px; -->
+		<div
+			class="firm"
+			style="
+				position: absolute;
+				bottom: 24px;
+				left: 16.5vw;
+				color: #fff;
+				font-size: 16px;
+				letter-spacing: 1px;
+			">
+			单位: 河南汇融科技服务有限公司
+		</div>
+		<div
+			class="datetime"
+			style="
+				position: absolute;
+				bottom: 18px;
+				right: 15.5vw;
+				color: #fff;
+				font-size: 16px;
+				letter-spacing: 1px;
+                display: flex;
+                align-items: center;
+                gap: 16px;
+			">
+			<DateBtnGroup />
+			{{ new Date().toLocaleString() }}
+		</div>
+	</header>
+</template>
 
 <script>
+import DateBtnGroup from './DateBtnGroup.vue';
 export default {
-    name: "KilnHeader",
+	name: 'KilnHeader',
-    components: {},
+	components: { DateBtnGroup },
-    props: {},
+	props: {},
-    data() {
+	data() {
-        return {}
+		return {};
-    },
+	},
-    computed: {},
+	computed: {},
-    methods: {},
+	methods: {},
-}
+};
 </script>
 
 <style scoped lang="scss">
-
+.kiln-header {
+	background: url('../assets/head.png') no-repeat;
+	height: 88px;
+	background-size: 100%;
+	background-position: 0 0;
+	display: grid;
+	place-content: center;
+	position: relative;
+}
 </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',
+					width: this.horizontal ? '100%' : '4px',
-					height: this.horizontal ? '2px' : '100%',
+					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/EnergeCost.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/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/IsraCheck.vue

@@ -0,0 +1,80 @@
+<!-- 
+    filename: IsraCheck.vue
+    author: liubin
+    date: 2023-12-06 09:50:13
+    description: 
+-->
+
+<template>
+	<Container name="ISRA缺陷检测" size="middle" style="">
+		<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px">
+			<div class="f" style="flex: 9"></div>
+			<ul
+				class="legend"
+				style="
+					flex: 1;
+					padding: 8px;
+					display: flex;
+					justify-content: center;
+					gap: 20px;
+					color: #fff;
+					font-size: 14px;
+				">
+				<li class="fault-1">缺陷1</li>
+				<li class="fault-2">缺陷2</li>
+				<li class="fault-3">缺陷3</li>
+				<li class="fault-4">缺陷4</li>
+			</ul>
+		</div>
+	</Container>
+</template>
+
+<script>
+import Container from '../components/Container.vue';
+import ShadowRect from '../components/ShadowRect.vue';
+export default {
+	name: 'IsraCheck',
+	components: { Container, ShadowRect },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: relative;
+}
+
+li::before {
+	content: '';
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #ccc;
+	position: absolute;
+	top: 30%;
+	left: -12px;
+}
+
+li.fault-1::before {
+	background: #2760ff;
+}
+li.fault-2::before {
+	background: #518eec;
+}
+li.fault-3::before {
+	background: #0ee8e4;
+}
+li.fault-4::before {
+	background: #ddb523;
+}
+</style>

src/views/databoard/kiln/LeftFour.vue

@@ -0,0 +1,41 @@
+<!-- 
+    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 />
+		<IsraCheck />
+		<EnergeCost />
+		<FanSequence />
+	</div>
+</template>
+
+<script>
+import MaterialCost from './MaterialCost.vue';
+import FanSequence from './FanSequence.vue';
+import IsraCheck from './IsraCheck.vue';
+import EnergeCost from './EnergeCost.vue';
+export default {
+	name: 'LeftFour',
+	components: { MaterialCost, EnergeCost, IsraCheck, 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/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>

src/views/databoard/kiln/index.vue

@@ -14,202 +14,46 @@
 			left: -16px;
 			width: calc(100% + 28px);
 			height: calc(100% + 38px);
-			background: #073f4a;
 			display: flex;
 			flex-direction: column;
 			gap: 16px;
 		">
-		<!-- test area  -->
+		<KHeader />
-		<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">
-				<!-- without slot  -->
-			</ShadowRect>
-		</div>
-
-		<!-- 原料用量统计 -->
-		<div
-			class="absolute"
-			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;
-			">
-			<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>
-
-		<!-- btn group  -->
-		<div
-			class="absolute"
-			style="
-				position: absolute;
-				top: 10px;
-				left: 60px;
-				padding: 12px;
-				background: #0003;
-				border: 1px solid #ccc;
-			">
-			<SelectorBtnGroup :options="['日', '周', '月', '年']" />
-		</div>
-		<div
-			class="absolute"
-			style="
-				position: absolute;
-				top: 90px;
-				left: 60px;
-				padding: 12px;
-				background: #0003;
-				border: 1px solid #ccc;
-			">
-			<SelectorBtnGroup
-				:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
-		</div>
-
-		<!-- switcher  -->
-		<div
-			class="absolute"
-			style="
-				position: absolute;
-				top: 10px;
-				right: 10px;
-				padding: 12px;
-				background: #0003;
-				border: 1px solid #ccc;
-			">
-			<Switcher />
-		</div>
-
-		<!-- container  -->
-		<Container name="能耗" :width="300">
-			<div
-				class="v"
-				style="height: 100px; background: #ccc; width: 300px"></div>
-			<KilnLine :horizontal="true" />
-			<div
-				class="v"
-				style="height: 100px; background: #caf; width: 300px"></div>
-		</Container>
-
-		<!-- null  -->
-		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
-		<section
 			class="main-body"
-			style="
+			style="flex: 1; display: flex; gap: 16px; padding: 8px 16px">
-				display: grid;
+			<div class="left-side" style="flex: 2">
-				gap: 16px;
+				<LeftFour />
-				flex: 1;
+			</div>
-				grid-template-columns: repeat(3, minmax(100px, 1fr));
+			<div class="right-side" style="flex: 1">
-			">
+				<RightTwo />
-			<div class="main-left" style="background: #f001"></div>
+			</div>
-			<div class="main-middle" style="background: #0f01"></div>
+		</div>
-			<div class="main-right" style="background: #00f1"></div>
-		</section>
 	</div> 
 </template>
 
 <script>
-import DateBtnGroup from '../components/DateBtnGroup.vue';
+import KHeader from '../components/Header.vue';
-import ShadowRect from '../components/ShadowRect.vue';
+import LeftFour from './LeftFour.vue';
-import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
+import RightTwo from './RightTwo.vue';
-import Switcher from '../components/Switcher.vue';
-import KilnLine from '../components/line';
-import Container from '../components/Container.vue';
-
-console.log('Line', KilnLine)
 
 export default {
 	name: 'KilnDataBoard',
 	components: {
-		DateBtnGroup,
+		KHeader,
-		KilnLine,
+		LeftFour,
-		Container,
+		RightTwo,
-		ShadowRect,
-		SelectorBtnGroup,
-		Switcher,
 	},
-	props: {},
 	data() {
 		return {};
 	},
-	computed: {},
-	methods: {},
 };
 </script>
 
 <style scoped lang="scss">
 .KilnDataBoard {
+	background: url(../assets/bg.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
 }
 </style>