update inwater outwater

src/components/boxes/HistoryTemp.vue

@@ -7,13 +7,13 @@
       style="
         position: absolute;
         top: 8px;
-        left: -30px;
+        left: -20px;
         width: 110%;
         height: 105%;
         background: #eee1;
         display: grid;
         place-items: center;
-        font-size: 24px;
+        font-size: 12px;
         color: #eee9;
       "
     >
@@ -62,9 +62,9 @@ h3 {
   margin: 0;
   font-family: sans-serif;
   font-weight: 400;
-  font-size: adjust(14px);
+  font-size: adjust(h(20px));
-  letter-spacing: adjust(1px);
+  letter-spacing: 1px;
-  color: #52fff8;
+  color: #0c71ff;
-  margin: adjust(12px) 0;
+  margin: adjust(h(12px)) 0;
 }
 </style>

src/components/boxes/InWater.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 窑炉进口水温 -->
   <Container class="in-water" usage="NumberAndChart">
-    <SubContainer title="窑炉进口水温" icon="inWater" padding="20px">
+    <SubContainer title="进口实时水温" icon="inWater">
       <div class="pic" style=""></div>
       <div class="content flex flex-col">
         <div class="realtime">
@@ -9,7 +9,6 @@
             <span class="temp-data">{{ waterInTemp }}</span>
             <span class="unit">℃</span>
           </div>
-          <div class="text">进口实时水温</div>
         </div>
         <div class="wave"></div>
         <div class="graph flex-1">
@@ -49,17 +48,15 @@ export default {
 .in-water {
   position: absolute;
   top: adjust(h(430px));
-  left: adjust(w(5660px));
+  left: adjust(w(5630px));
-  height: adjust(h(665px));
+  height: adjust(h(620px));
-  width: adjust(w(780px));
+  width: adjust(w(880px));
 }
 
 .pic {
-  background: url(../../assets/in-water.png) no-repeat;
+  background: url(../../assets/in-water.png) top 0 left 0 / 90% no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
   position: absolute;
-  top: adjust(24px);
+  top: adjust(10px);
   right: 0;
   width: adjust(w(440px));
   height: adjust(h(380px));
@@ -70,8 +67,8 @@ export default {
 }
 
 .wave {
-  transform: translateX(adjust(-16px));
+  transform: translateX(adjust(-8px));
-  width: adjust(w(793px));
+  width: adjust(w(852px));
   height: adjust(h(76px));
   background: url(../../assets/inwater.png) no-repeat;
   background-size: 100% 100%;
@@ -86,9 +83,10 @@ export default {
   // background: #eee;
 }
 
+
 .time {
   // background: #eee;
-  margin: adjust(12px) 0;
+  margin: adjust(4px) 0;
   padding-left: adjust(14px);
 }
 
@@ -96,42 +94,20 @@ export default {
   margin-right: adjust(5px);
 }
 
+.temp-data {
+  color: #0068ff;
+  font-size: adjust(h(88px));
+  letter-spacing: 1px;
+}
+
 .unit {
-  font-family: Ubuntu, monospace, sans-serif !important;
+  font-family: sans-serif !important;
-  font-size: adjust(20px);
+  font-size: adjust(h(48px));
-  letter-spacing: adjust(1px);
+  font-weight: 400;
+  letter-spacing: 1px;
   align-self: flex-end;
-}
+  margin-bottom: 4px;
-
+  margin-left: 4px;
-.text {
+  color: #0068ff;
-  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);
 }
 </style>

src/components/boxes/OutWater.vue

@@ -1,44 +1,18 @@
 <template>
   <!-- 窑炉出口水温 -->
-  <Container usage="NumberAndChart">
+  <Container class="out-water" usage="NumberAndChart">
-    <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
+    <SubContainer title="出口实时水温" icon="inWater">
       <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 waterOutTemp.split('')">
+            <span class="temp-data">{{ waterOutTemp }}</span>
-              <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
+          <HistoryTrend key="water-out" title="窑炉出口水温历史" :series="kilnWaterOut" />
-            key="water-out"
-            title="窑炉出口水温历史"
-            :series="kilnWaterOut"
-          />
         </div>
       </div>
     </SubContainer>
@@ -67,16 +41,21 @@ export default {
   },
 };
 </script>
-
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
-.pic {
+.out-water {
-  background: url(../../assets/out-water.png) no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
   position: absolute;
-  top: adjust(24px);
+  top: adjust(h(1065px));
+  left: adjust(w(5630px));
+  height: adjust(h(620px));
+  width: adjust(w(880px));
+}
+
+.pic {
+  background: url(../../assets/out-water.png) top 0 left 0 / 90% no-repeat;
+  position: absolute;
+  top: adjust(10px);
   right: 0;
   width: adjust(w(440px));
   height: adjust(h(380px));
@@ -87,10 +66,10 @@ export default {
 }
 
 .wave {
-  transform: translateX(adjust(-16px)) rotateY(0.5turn);
+  transform: translateX(adjust(-8px));
-  width: adjust(w(793px));
+  width: adjust(w(852px));
   height: adjust(h(76px));
-  background: url(../../assets/inwater.png) no-repeat;
+  background: url(../../assets/outwater.png) no-repeat;
   background-size: 100% 100%;
 }
 
@@ -103,9 +82,10 @@ export default {
   // background: #eee;
 }
 
+
 .time {
   // background: #eee;
-  margin: adjust(12px) 0;
+  margin: adjust(4px) 0;
   padding-left: adjust(14px);
 }
 
@@ -113,44 +93,20 @@ export default {
   margin-right: adjust(5px);
 }
 
+.temp-data {
+  color: #0068ff;
+  font-size: adjust(h(88px));
+  letter-spacing: 1px;
+}
+
 .unit {
-  font-family: Ubuntu, monospace, sans-serif !important;
+  font-family: sans-serif !important;
-  font-size: adjust(20px);
+  font-size: adjust(h(48px));
-  letter-spacing: adjust(1px);
+  font-weight: 400;
+  letter-spacing: 1px;
   align-self: flex-end;
-}
+  margin-bottom: 4px;
-
+  margin-left: 4px;
-.text {
+  color: #0068ff;
-  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
-  );
 }
 </style>

src/components/charts/BarChart.vue

@@ -75,17 +75,17 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: adjust(20),
+          top: adjust(0),
-          left: adjust(28),
+          left: adjust(10),
-          bottom: adjust(18),
+          bottom: adjust(10),
-          right: adjust(12),
+          right: adjust(0),
         },
         xAxis: {
           type: "category",
           data: this.updateXAxis(),
           axisLine: {
             lineStyle: {
-              color: "#5982b2a0",
+              color: '#0068ff33'
             },
           },
           axisTick: {
@@ -93,9 +93,9 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(8),
+            fontSize: adjust(4),
-            lineHeight: adjust(1),
+            lineHeight: adjust(0),
-            margin: adjust(6),
+            margin: adjust(4),
             rotate: 30,
           },
         },
@@ -110,7 +110,7 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#5982b2a0",
+              color: '#0068ff33'
             },
           },
           axisTick: {
@@ -119,12 +119,13 @@ export default {
           axisLabel: {
             formatter: "{value} ℃",
             color: "#fff9",
-            fontSize: adjust(8),
+            fontSize: adjust(4),
-            lineHeight: adjust(1),
+            lineHeight: adjust(0),
           },
           splitLine: {
             lineStyle: {
-              color: "#5982b2a0",
+              // color: "#5982b2a0",
+            color: '#0068ff33'
             },
           },
           // data: [100, 200, 300, 400, 500],

src/components/layout/SubContainer.vue

@@ -3,7 +3,7 @@
 	<div class="sub-container" :style="{ padding }">
 		<div class="title">
 			<span class="icon" :class="iconClass[icon]"></span>
-			<span>{{ title }}</span>
+			<span class="title_text">{{ title }}</span>
 		</div>
 		<div class="content">
 			<slot />
@@ -25,7 +25,7 @@ export default {
 		},
 		padding: {
 			type: String,
-			default: "10px",
+			default: "20px",
 		},
 	},
 	data() {
@@ -57,8 +57,8 @@ export default {
 
 .icon {
 	height: adjust(17px);
-	width: adjust(17px);
+	width: adjust(16px);
-	margin-right: adjust(8px);
+	margin-right: 0;
 }
 
 .icon-clock {
@@ -97,19 +97,23 @@ export default {
 }
 
 .icon-water-in {
-	background: url(../../assets/water-temp.png);
+	background: url(../../assets/water-temp.png) top 24% left 0 / 80% 75% no-repeat;
-	background-size: 100% 100%;
 }
 
 .title {
-	font-size: adjust(h(52px));
+	font-size: adjust(h(38px));
-	color: #72f2ff;
+	letter-spacing: 1px;
+	color: #3565ff;
 	font-family: sans-serif;
 	user-select: none;
 	display: flex;
 	align-items: center;
 }
 
+.title_text {
+	line-height: 0;
+}
+
 .content {
 	height: 1px;
 	/* background: #eee; */

src/store/index.js

@@ -31,7 +31,7 @@ export default new Vuex.Store({
     kilnPressure: '00',
     fireChangeTime: '00:00:00',
     lastFireChangeTime: '0分0秒',
-    waterInTemp: '000',
+    waterInTemp: '00.0',
     waterOutTemp: '000'
   },
   getters: {