From ab3575b5962a7d726a1d6436e0d3ad8c9f43e59e Mon Sep 17 00:00:00 2001
From: g7hoo <liubin_9396@163.com>
Date: Sat, 13 May 2023 15:59:41 +0800
Subject: [PATCH] update

---
 src/components/boxes/InWater.vue      | 192 ++++++++++++++------------
 src/components/boxes/KilnPressure.vue |  18 ++-
 src/components/boxes/OutWater.vue     |  28 +++-
 3 files changed, 137 insertions(+), 101 deletions(-)

diff --git a/src/components/boxes/InWater.vue b/src/components/boxes/InWater.vue
index c232deb..3167244 100644
--- a/src/components/boxes/InWater.vue
+++ b/src/components/boxes/InWater.vue
@@ -1,28 +1,44 @@
 <template>
-	<!-- 窑炉进口水温 -->
-	<Container usage="NumberAndChart">
-		<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
-			<div class="pic" style=""></div>
-			<div class="content flex flex-col">
-				<div class="realtime">
-					<div class="time flex flex-center">
-						<DigitalBox
-							class="time--item"
-							v-for="(item, index) in waterInTemp.split('')"
-							:key="index"
-							:value="item"
-						/>
-						<span class="unit">℃</span>
-					</div>
-					<div class="text">进口实时水温</div>
-				</div>
-				<div class="wave"></div>
-				<div class="graph flex-1">
-					<HistoryTrend key="water-in" :series="kilnWaterIn" />
-				</div>
-			</div>
-		</SubContainer>
-	</Container>
+  <!-- 窑炉进口水温 -->
+  <Container usage="NumberAndChart">
+    <SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
+      <div class="pic" style=""></div>
+      <div class="content flex flex-col">
+        <div class="realtime">
+          <div class="time flex flex-center">
+            <template v-for="(item, index) in waterInTemp.split('')">
+              <DigitalBox
+                v-if="item !== '.'"
+                class="time--item"
+                :key="index"
+                :value="item"
+                :wider="true"
+              />
+              <span
+                :key="index"
+                v-else
+                style="
+                  background: #fff;
+                  width: 10px;
+                  height: 10px;
+                  align-self: flex-end;
+                  margin-bottom: 9px;
+                  margin-right: 8px;
+                "
+              ></span>
+              <!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
+            </template>
+            <span class="unit">℃</span>
+          </div>
+          <div class="text">进口实时水温</div>
+        </div>
+        <div class="wave"></div>
+        <div class="graph flex-1">
+          <HistoryTrend key="water-in" :series="kilnWaterIn" />
+        </div>
+      </div>
+    </SubContainer>
+  </Container>
 </template>
 
 <script>
@@ -34,17 +50,17 @@ import HistoryTrend from "./HistoryTemp.vue";
 import { mapState } from "vuex";
 
 export default {
-	name: "InWater",
-	props: {},
-	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-	data() {
-		return {
-			chartConfig: {},
-		};
-	},
-	computed: {
-		...mapState(["kilnWaterIn", "waterInTemp"]),
-	},
+  name: "InWater",
+  props: {},
+  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+  data() {
+    return {
+      chartConfig: {},
+    };
+  },
+  computed: {
+    ...mapState(["kilnWaterIn", "waterInTemp"]),
+  },
 };
 </script>
 
@@ -52,85 +68,85 @@ export default {
 @import "../../assets/styles/functions";
 
 .pic {
-	background: url(../../assets/in-water.png) no-repeat;
-	background-size: 100% 100%;
-	background-position: center;
-	position: absolute;
-	top: adjust(24px);
-	right: 0;
-	width: adjust(w(440px));
-	height: adjust(h(380px));
+  background: url(../../assets/in-water.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  position: absolute;
+  top: adjust(24px);
+  right: 0;
+  width: adjust(w(440px));
+  height: adjust(h(380px));
 }
 
 .content {
-	height: 100%;
+  height: 100%;
 }
 
 .wave {
-	transform: translateX(adjust(-16px));
-	width: adjust(w(793px));
-	height: adjust(h(76px));
-	background: url(../../assets/inwater.png) no-repeat;
-	background-size: 100% 100%;
+  transform: translateX(adjust(-16px));
+  width: adjust(w(793px));
+  height: adjust(h(76px));
+  background: url(../../assets/inwater.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 .graph {
-	// background: #ccc3;
+  // background: #ccc3;
 }
 
 .flex-1 {
-	flex: 1;
-	// background: #eee;
+  flex: 1;
+  // background: #eee;
 }
 
 .time {
-	// background: #eee;
-	margin: adjust(12px) 0;
-	padding-left: adjust(14px);
+  // background: #eee;
+  margin: adjust(12px) 0;
+  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-	margin-right: adjust(5px);
+  margin-right: adjust(5px);
 }
 
 .unit {
-	font-family: Ubuntu, monospace, sans-serif !important;
-	font-size: adjust(20px);
-	letter-spacing: adjust(1px);
-	align-self: flex-end;
+  font-family: Ubuntu, monospace, sans-serif !important;
+  font-size: adjust(20px);
+  letter-spacing: adjust(1px);
+  align-self: flex-end;
 }
 
 .text {
-	display: inline-block;
-	margin-left: adjust(24px);
-	margin-bottom: adjust(10px);
-	padding: adjust(12px) 0;
-	text-align: center;
-	font-size: adjust(22px);
-	letter-spacing: adjust(1px);
-	position: relative;
-	z-index: 10;
-	user-select: none;
+  display: inline-block;
+  margin-left: adjust(24px);
+  margin-bottom: adjust(10px);
+  padding: adjust(12px) 0;
+  text-align: center;
+  font-size: adjust(22px);
+  letter-spacing: adjust(1px);
+  position: relative;
+  z-index: 10;
+  user-select: none;
 }
 
 .text::after {
-	content: "";
-	display: block;
-	position: absolute;
-	z-index: 0;
-	left: 0;
-	bottom: adjust(10px);
-	height: adjust(4px);
-	width: 100%;
-	/* 渐变色 */
-	background: radial-gradient(
-		ellipse at center,
-		#6fe2ff,
-		#6fe2ffc0,
-		#52cbef80,
-		#52cbef30,
-		#52cbef00,
-		transparent
-	);
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  bottom: adjust(10px);
+  height: adjust(4px);
+  width: 100%;
+  /* 渐变色 */
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #6fe2ffc0,
+    #52cbef80,
+    #52cbef30,
+    #52cbef00,
+    transparent
+  );
 }
 </style>
diff --git a/src/components/boxes/KilnPressure.vue b/src/components/boxes/KilnPressure.vue
index f356d2b..5ff4e26 100644
--- a/src/components/boxes/KilnPressure.vue
+++ b/src/components/boxes/KilnPressure.vue
@@ -4,13 +4,17 @@
     <SubContainer title="窑炉压力" icon="docs" padding="34px">
       <div class="pressure flex flex-col flex-start">
         <div class="time flex flex-center">
-          <DigitalBox
-            class="time--item"
-            v-for="(item, index) in kilnPressure.split('')"
-            :key="index"
-            :value="item"
-            :wider="true"
-          />
+          <template v-for="(item, index) in kilnPressure.split('')">
+            <DigitalBox
+              v-if="item !== '.'"
+              class="time--item"
+              :key="index"
+              :value="item"
+              :wider="true"
+            />
+			<span :key="index" v-else style="background: #fff; width: 10px; height: 10px; align-self: flex-end; margin-bottom: 9px; margin-right: 8px;"></span>
+			<!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
+          </template>
           <span class="unit">Pa</span>
         </div>
         <div class="text">窑炉压力值</div>
diff --git a/src/components/boxes/OutWater.vue b/src/components/boxes/OutWater.vue
index 4c83332..86bb7d4 100644
--- a/src/components/boxes/OutWater.vue
+++ b/src/components/boxes/OutWater.vue
@@ -6,12 +6,28 @@
       <div class="content flex flex-col">
         <div class="realtime">
           <div class="time flex flex-center">
-            <DigitalBox
-              class="time--item"
-              v-for="(item, index) in waterOutTemp.split('')"
-              :key="index"
-              :value="item"
-            />
+            <template v-for="(item, index) in waterOutTemp.split('')">
+              <DigitalBox
+                v-if="item !== '.'"
+                class="time--item"
+                :key="index"
+                :value="item"
+                :wider="true"
+              />
+              <span
+                :key="index"
+                v-else
+                style="
+                  background: #fff;
+                  width: 10px;
+                  height: 10px;
+                  align-self: flex-end;
+                  margin-bottom: 9px;
+                  margin-right: 8px;
+                "
+              ></span>
+              <!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
+            </template>
             <span class="unit">℃</span>
           </div>
           <div class="text">出口实时水温</div>