update 完成风机运行情况

src/components/boxes/FanRuntime.vue

@@ -3,7 +3,7 @@
 	<Container usage="Table">
 		<SubContainer title="风机运行情况" icon="docs" padding="17px">
 			<div class="tables flex" style="height: 100%">
-				<table class="table-1 flex-1">
+				<table class="table-1 flex-1 align-start">
 					<thead>
 						<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
 						<tr>
@@ -19,14 +19,24 @@
 							:key="index"
 							style="font-size: 7px; background: #0b5499; opacity: 35%"
 						> -->
-						<tr v-for="(row, index) in tableData1" :key="index">
+						<tr class="t-row" v-for="(row, index) in tableData1" :key="index">
-							<td v-for="(d, idx) in row" :key="idx">{{ d }}</td>
+							<td v-for="(d, idx) in row" :key="idx">
+								<template v-if="idx === 2">
+									<FrequentComp :value="d" />
+								</template>
+								<template v-else-if="idx === 3">
+									<StatusComp :value="d" />
+								</template>
+								<template v-else>
+									{{ d }}
+								</template>
+							</td>
 						</tr>
 					</tbody>
 				</table>
 
 				<div class="vertical-line"></div>
-				<table class="table-2 flex-1">
+				<table class="table-2 flex-1 align-start">
 					<thead>
 						<tr>
 							<th>序号</th>
@@ -36,8 +46,18 @@
 						</tr>
 					</thead>
 					<tbody>
-						<tr v-for="(row, index) in tableData1" :key="index">
+						<tr class="t-row" v-for="(row, index) in tableData1" :key="index">
-							<td v-for="(d, idx) in row" :key="idx">{{ d }}</td>
+							<td v-for="(d, idx) in row" :key="idx">
+								<template v-if="idx === 2">
+									<FrequentComp :value="d" />
+								</template>
+								<template v-else-if="idx === 3">
+									<StatusComp :value="d" />
+								</template>
+								<template v-else>
+									{{ d }}
+								</template>
+							</td>
 						</tr>
 					</tbody>
 				</table>
@@ -49,11 +69,13 @@
 <script>
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
+import FrequentComp from "./subcomponents/TableFrequence.vue";
+import StatusComp from "./subcomponents/TableStatus.vue";
 
 export default {
 	name: "KilnPressure",
 	props: {},
-	components: { Container, SubContainer },
+	components: { Container, SubContainer, FrequentComp, StatusComp },
 	data() {
 		return {
 			tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
@@ -64,19 +86,19 @@ export default {
 				// 	sequence: '稳运行',
 				// 	status: '正常', // or 0
 				// }
-				[1, "风机1", "未运行", "正常" /**or 0,1*/],
+				[1, "风机1", "2332Hz", "正常" /**or 0,1*/],
-				[2, "风机2", "未运行", "正常" /**or 0,1*/],
+				[2, "风机2", "未运行", "故障" /**or 0,1*/],
-				[3, "风机3", "未运行", "正常" /**or 0,1*/],
+				[3, "风机3", "333Hz", "正常" /**or 0,1*/],
-				[4, "风机4", "未运行", "正常" /**or 0,1*/],
+				[4, "风机4", "100Hz", "正常" /**or 0,1*/],
 				[5, "风机5", "未运行", "正常" /**or 0,1*/],
-				[6, "风机6", "未运行", "正常" /**or 0,1*/],
+				[6, "风机6", "未运行", "故障" /**or 0,1*/],
-				[7, "风机7", "未运行", "正常" /**or 0,1*/],
+				[7, "风机7", "3000Hz", "正常" /**or 0,1*/],
 				[8, "风机8", "未运行", "正常" /**or 0,1*/],
 				[9, "风机9", "未运行", "正常" /**or 0,1*/],
-				[10, "风机10", "未运行", "正常" /**or 0,1*/],
+				[10, "风机10", "86423Hz", "正常" /**or 0,1*/],
 				[11, "风机11", "未运行", "正常" /**or 0,1*/],
 				[12, "风机12", "未运行", "正常" /**or 0,1*/],
-				[13, "风机13", "未运行", "正常" /**or 0,1*/],
+				[13, "风机13", "73Hz", "正常" /**or 0,1*/],
 			],
 		};
 	},
@@ -107,6 +129,18 @@ table {
 	border-spacing: 1px;
 }
 
+// tr, td, th {
+// 	max-height: 13.88px !important;
+// }
+
+.t-row {
+	height: 13.88px;
+}
+
+.align-start {
+	align-self: flex-start;
+}
+
 thead > tr th {
 	font-size: 8px;
 	padding: 1px 3px;
@@ -128,20 +162,4 @@ tbody > tr td {
 tbody > tr td:first-child {
 	text-align: center;
 }
-
-tbody > tr td:last-child {
-	color: blue;
-}
-tbody > tr td:last-child.danger {
-	color: red;
-}
-tbody > tr td:last-child.safe {
-	color: green;
-}
-tbody > tr td:last-child.warn {
-	color: orange;
-}
-tbody > tr td:last-child.info {
-	color: gray;
-}
 </style>

src/components/boxes/subcomponents/TableFrequence.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="table-frequence" :class="cls">{{ value }}</div>
+</template>
+
+<script>
+export default {
+	name: "TableFrequence",
+	props: {
+    value: {
+      type: String,
+      default: '未运行'
+    }
+  },
+	data() {
+		return {
+      cls: {
+        'valid': this.value !== '未运行'
+      }
+    };
+	}
+};
+</script>
+
+<style scoped>
+.table-frequence {
+  font-family: Ubuntu, sans-serif !important;
+}
+
+.valid {
+  color: #30e89a;
+}
+</style>

src/components/boxes/subcomponents/TableStatus.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="table-status" :class="cls">{{ value }}</div>
+</template>
+
+<script>
+export default {
+	name: "TableFrequence",
+	props: {
+		value: {
+			type: String,
+			default: "正常",
+		},
+	},
+	data() {
+		return {
+			cls: {
+				invalid: this.value !== "正常",
+			},
+		};
+	},
+};
+</script>
+
+<style scoped>
+.table-status {
+	/* font-family: Ubuntu, sans-serif !important; */
+	color: #3984ff;
+	padding-left: 10px;
+	position: relative;
+}
+
+.table-status::after {
+	content: "";
+	position: absolute;
+	left: 1px;
+	top: 2px;
+	display: inline-block;
+	width: 4px;
+	height: 4px;
+	border-radius: 100px;
+	background: #3984ff;
+	box-shadow: 0px 0px 2px 2px rgba(39, 96, 255, 0.5);
+}
+
+.invalid {
+	color: #ff0c0c;
+}
+
+.invalid::after {
+	background: #ff0c0c;
+	box-shadow: 0px 0px 2px 2px rgba(255, 39, 39, 0.5);
+}
+</style>