src/views/databoard/components/ShadowRect.vue

@@ -6,9 +6,11 @@
 -->
 
 <template>
-	<div class="shadow-rect">
+	<div class="shadow-rect" :style="{ borderRadius: rounded ? '8px' : '2px' }">
 		<slot>
-			<div class="test-data" style="flex: 1; display: flex; align-items: center">
+			<div
+				class="test-data"
+				style="flex: 1; display: flex; align-items: center">
 				<span
 					style="
 						flex: 7;
@@ -41,10 +43,17 @@
 export default {
 	name: '',
 	components: {},
-	props: {},
+	props: ['rounded'],
 	data() {
 		return {};
 	},
+	watch: {
+		rounded(val) {
+			if (val) {
+				console.log('val', val);
+			}
+		},
+	},
 	computed: {},
 	methods: {},
 };
@@ -56,7 +65,7 @@ export default {
 	border-radius: 2px;
 	box-shadow: inset 0 0 10px 2px #ccc9;
 	color: white;
-    display: flex;
-    align-items: center;
+	display: flex;
+	align-items: center;
 }
 </style>

src/views/databoard/kiln/index.vue

@@ -21,6 +21,8 @@
 		">
 		<!-- test area  -->
 		<DateBtnGroup />
+
+		<!-- 风机频率  -->
 		<div
 			class="absolute"
 			style="
@@ -32,10 +34,77 @@
 				border: 1px solid #ccc;
 				display: grid;
 				grid-template-columns: repeat(2, 320px);
-				grid-auto-rows: 60px;
+				grid-auto-rows: 56px;
 				gap: 8px;
 			">
-			<ShadowRect v-for="n in 8" :key="n"></ShadowRect>
+			<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>
 
 		<!-- null  -->