src/views/databoard/components/Container.vue

@@ -6,23 +6,14 @@
 -->
 
 <template>
-	<div class="kiln-container" :class="['kiln-container__' + size]">
+	<div
-		<div class="container-hd" style="display: flex; align-items: center">
+		class="kiln-container"
-			<i
+		:style="{ width: width ? width + 'px' : 'initial' }">
-				class=""
+		<div class="container-hd">
-				style="display: inline-block; margin-left: 12px; padding-top: 4px">
+			<i class="">
-				<img :src="imgSrc" width="18" height="16" alt="" />
+				<img src="" alt="" />
 			</i>
-			<span
+			<span>{{ name }}</span>
-				style="
-					color: #fff;
-					font-size: 20px;
-					line-height: 2;
-					margin-left: 6px;
-					display: inline-block;
-				">
-				{{ name }}
-			</span>
 		</div>
 		<div class="container-body">
 			<slot>
@@ -36,28 +27,11 @@
 export default {
 	name: 'KilnContainer',
 	components: {},
-	props: ['name', 'width', 'size'],
+	props: ['name', 'width'],
 	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>
@@ -67,27 +41,9 @@ export default {
 	display: inline-block;
 	width: 100%;
 	height: 100%;
-	padding: 8px;
+	background: #ccc3;
 	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,71 +5,21 @@
     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: { DateBtnGroup },
+    components: {},
-	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 8px 2px #ccc3;
+	box-shadow: inset 0 0 10px 2px #ccc9;
 	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%' : '4px',
+					width: this.horizontal ? '100%' : '2px',
-					height: this.horizontal ? '4px' : '100%',
+					height: this.horizontal ? '2px' : '100%',
 					background:
-						'radial-gradient(ellipse at center, #3CE7FF, #3CE7FF66, transparent, transparent)',
+						'radial-gradient(ellipse at center, #3CE7FF 100%, #3CE7FF 50%, #3CE7FF 0%)',
 				}}></div>
 		);
 	},

src/views/databoard/kiln/EnergeCost.vue

@@ -1,58 +0,0 @@
-<!-- 
-    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

@@ -1,54 +0,0 @@
-<!-- 
-    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

@@ -1,80 +0,0 @@
-<!-- 
-    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

@@ -1,41 +0,0 @@
-<!-- 
-    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

@@ -1,58 +0,0 @@
-<!-- 
-    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

@@ -1,158 +0,0 @@
-<!-- 
-    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,46 +14,202 @@
 			left: -16px;
 			width: calc(100% + 28px);
 			height: calc(100% + 38px);
+			background: #073f4a;
 			display: flex;
 			flex-direction: column;
 			gap: 16px;
 		">
-		<KHeader />
+		<!-- test area  -->
+		<DateBtnGroup />
+
+		<!-- 风机频率  -->
 		<div
-			class="main-body"
+			class="absolute"
-			style="flex: 1; display: flex; gap: 16px; padding: 8px 16px">
+			style="
-			<div class="left-side" style="flex: 2">
+				position: absolute;
-				<LeftFour />
+				top: 120px;
-			</div>
+				right: 100px;
-			<div class="right-side" style="flex: 1">
+				padding: 12px;
-				<RightTwo />
+				background: #0003;
-			</div>
+				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="
+				display: grid;
+				gap: 16px;
+				flex: 1;
+				grid-template-columns: repeat(3, minmax(100px, 1fr));
+			">
+			<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>
 	</div>
 </template>
 
 <script>
-import KHeader from '../components/Header.vue';
+import DateBtnGroup from '../components/DateBtnGroup.vue';
-import LeftFour from './LeftFour.vue';
+import ShadowRect from '../components/ShadowRect.vue';
-import RightTwo from './RightTwo.vue';
+import SelectorBtnGroup from '../components/SelectorBtnGroup.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: {
-		KHeader,
+		DateBtnGroup,
-		LeftFour,
+		KilnLine,
-		RightTwo,
+		Container,
+		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>