diff --git a/src/assets/date.png b/src/assets/date.png
index d619c2f..7513cea 100644
Binary files a/src/assets/date.png and b/src/assets/date.png differ
diff --git a/src/assets/eq.png b/src/assets/eq.png
index fe7a4df..34705d8 100644
Binary files a/src/assets/eq.png and b/src/assets/eq.png differ
diff --git a/src/components/boxes/BottomTemp.vue b/src/components/boxes/BottomTemp.vue
index 43e0275..2eaf62b 100644
--- a/src/components/boxes/BottomTemp.vue
+++ b/src/components/boxes/BottomTemp.vue
@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-7"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnBtm1)"
 					:series="kilnBtm1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-8"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnBtm2)"
 					:series="kilnBtm2"
 				/>
diff --git a/src/components/boxes/FanRuntime.vue b/src/components/boxes/FanRuntime.vue
index 670369a..a7a3a4b 100644
--- a/src/components/boxes/FanRuntime.vue
+++ b/src/components/boxes/FanRuntime.vue
@@ -4,6 +4,21 @@
     <SubContainer title="风机运行情况" icon="fan" padding="34px">
       <div class="tables flex" style="height: 100%">
         <div class="table-wrapper flex-1 align-start">
+          <div
+            v-if="tableData1 && tableData1.length === 0"
+            style="
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background: #eee1;
+              display: grid;
+              place-items: center;
+              font-size: 24px;
+              color: #eee9;
+            "
+          >无数据</div>
           <table class="table-1">
             <thead>
               <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
@@ -21,7 +36,11 @@
 							style="font-size: 7px; background: #0b5499; opacity: 35%"
 						> -->
             <transition-group name="fan-list" tag="tbody" mode="out-in">
-              <tr class="t-row" v-for="row in tableData1" :key="(row && 'length' in row) ? row[0] : Math.random()">
+              <tr
+                class="t-row"
+                v-for="row in tableData1"
+                :key="row && 'length' in row ? row[0] : Math.random()"
+              >
                 <td v-for="(d, idx) in row" :key="idx">
                   <template v-if="idx === 2">
                     <FrequentComp :value="d" />
@@ -109,7 +128,7 @@ export default {
   watch: {
     fan: {
       handler: function (data) {
-        if (!data) return
+        if (!data) return;
         let idx = 0;
         this.tableData1 = data.slice(0, 10).map((item, index) => {
           idx += 1;
@@ -128,9 +147,9 @@ export default {
       const inData = this.tableCache.shift();
       const outData = this.tableData1.shift();
       setTimeout(() => {
-        this.tableData1.splice(this.tableData1.length, 0, inData);
+        if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
       }, 200);
-      this.tableCache.push(outData);
+      if (outData) this.tableCache.push(outData);
     }, 3000);
   },
 };
diff --git a/src/components/boxes/GasFlow.vue b/src/components/boxes/GasFlow.vue
index 6dcbd00..84e8724 100644
--- a/src/components/boxes/GasFlow.vue
+++ b/src/components/boxes/GasFlow.vue
@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-3"
 					class="flex-1"
+					unit="单位 m³/h"
 					:legend="Object.keys(gasTable1)"
 					:series="gasTable1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-4"
 					class="flex-1"
+					unit="单位 m³/h"
 					:legend="Object.keys(gasTable2)"
 					:series="gasTable2"
 				/>
diff --git a/src/components/boxes/HistoryTemp.vue b/src/components/boxes/HistoryTemp.vue
index d81f59a..352cc63 100644
--- a/src/components/boxes/HistoryTemp.vue
+++ b/src/components/boxes/HistoryTemp.vue
@@ -1,8 +1,24 @@
 <template>
-  <div class="history-temp flex flex-col" style="height: 100%">
-    <h3>窑炉历史温度趋势</h3>
+  <div class="history-temp flex flex-col" style="height: 100%; position: relative;">
+    <h3>{{ title }}</h3>
     <BarChart class="flex-1" :series="series" />
-    <!-- :data="compType === 'inWater' ? kilnWaterIn : kilnWaterOut" -->
+    <div
+      v-if="series && series.length === 0"
+      style="
+        position: absolute;
+        top: 8px;
+        left: -30px;
+        width: 110%;
+        height: 105%;
+        background: #eee1;
+        display: grid;
+        place-items: center;
+        font-size: 24px;
+        color: #eee9;
+      "
+    >
+      无数据
+    </div>
   </div>
 </template>
 
@@ -18,6 +34,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    title: {
+      type: String,
+      default: "窑炉历史温度趋势",
+    },
   },
   data() {
     return {};
diff --git a/src/components/boxes/InWater.vue b/src/components/boxes/InWater.vue
index 3167244..1591b4a 100644
--- a/src/components/boxes/InWater.vue
+++ b/src/components/boxes/InWater.vue
@@ -34,7 +34,11 @@
         </div>
         <div class="wave"></div>
         <div class="graph flex-1">
-          <HistoryTrend key="water-in" :series="kilnWaterIn" />
+          <HistoryTrend
+            key="water-in"
+            title="窑炉进口水温历史"
+            :series="kilnWaterIn"
+          />
         </div>
       </div>
     </SubContainer>
diff --git a/src/components/boxes/KilnRuntime.vue b/src/components/boxes/KilnRuntime.vue
index 99aab2a..080b61f 100644
--- a/src/components/boxes/KilnRuntime.vue
+++ b/src/components/boxes/KilnRuntime.vue
@@ -1,20 +1,20 @@
 <template>
-	<!-- 窑炉运行时间 -->
-	<Container usage="NumberOrDate">
-		<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
-			<div class="flex flex-col">
-				<div class="time flex flex-center">
-					<DigitalBox
-						class="time--item"
-						v-for="(item, index) in time"
-						:key="index"
-						:value="item"
-					/>
-				</div>
-				<div class="text">窑炉运行时间</div>
-			</div>
-		</SubContainer>
-	</Container>
+  <!-- 窑炉运行时间 -->
+  <Container usage="NumberOrDate">
+    <SubContainer title="窑炉运行时间" icon="clock" padding="34px">
+      <div class="flex flex-col">
+        <div class="time flex flex-center">
+          <DigitalBox
+            class="time--item"
+            v-for="(item, index) in time"
+            :key="index"
+            :value="item"
+          />
+        </div>
+        <div class="text">窑炉运行时间</div>
+      </div>
+    </SubContainer>
+  </Container>
 </template>
 
 <script>
@@ -23,14 +23,28 @@ import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
 
 export default {
-	name: "KilnRuntime",
-	components: { Container, SubContainer, DigitalBox },
-	props: {},
-	data() {
-		return {
-			time: "2202天55时",
-		};
-	},
+  name: "KilnRuntime",
+  components: { Container, SubContainer, DigitalBox },
+  props: {},
+  data() {
+    return {
+      time: "   天  时",
+    };
+  },
+  mounted() {
+	this.getRuntime()
+    setInterval(this.getRuntime, 1000 * 60 * 60);
+  },
+  methods: {
+    getRuntime() {
+      const diff = Date.now() - new Date("2023-5-12 10:00:00");
+      const days = parseInt(diff / 1000 / 60 / 60 / 24);
+      const hours = parseInt(
+        (diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
+      );
+      this.time = `${days}天${hours}时`;
+    },
+  },
 };
 </script>
 
@@ -38,47 +52,47 @@ export default {
 @import "../../assets/styles/functions";
 
 .time {
-	// background: #eee;
-	margin: adjust(12px) 0;
+  // background: #eee;
+  margin: adjust(12px) 0;
 }
 
 .flex-center {
-	justify-content: center;
-	align-items: center;
+  justify-content: center;
+  align-items: center;
 }
 
 .time--item:not(:last-child) {
-	margin-right: adjust(8px);
+  margin-right: adjust(8px);
 }
 
 .text {
-	padding: adjust(12px) 0;
-	text-align: center;
-	font-size: adjust(23px);
-	letter-spacing: adjust(4px);
+  padding: adjust(12px) 0;
+  text-align: center;
+  font-size: adjust(23px);
+  letter-spacing: adjust(4px);
   position: relative;
-	z-index: 10;
-	user-select: none;
+  z-index: 10;
+  user-select: none;
 }
 
 .text::after {
-	content: "";
-	display: block;
+  content: "";
+  display: block;
   position: absolute;
-	z-index: 0;
-	left: 12%;
-	bottom: adjust(10px);
-	height: adjust(4px);
-	width: 76%;
-	/* 渐变色 */
-	background: radial-gradient(
-		ellipse at center,
-		#6fe2ff,
-		#6fe2ffc0,
-		#52cbef80,
-		#52cbef30,
-		#52cbef00,
-		transparent
-	);
+  z-index: 0;
+  left: 12%;
+  bottom: adjust(10px);
+  height: adjust(4px);
+  width: 76%;
+  /* 渐变色 */
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #6fe2ffc0,
+    #52cbef80,
+    #52cbef30,
+    #52cbef00,
+    transparent
+  );
 }
 </style>
diff --git a/src/components/boxes/OilFlow.vue b/src/components/boxes/OilFlow.vue
index 877da07..cd04a28 100644
--- a/src/components/boxes/OilFlow.vue
+++ b/src/components/boxes/OilFlow.vue
@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-1"
 					class="flex-1"
+					unit="单位 kg/h"
 					:legend="Object.keys(oilTable1)"
 					:series="oilTable1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-2"
 					class="flex-1"
+					unit="单位 kg/h"
 					:legend="Object.keys(oilTable2)"
 					:series="oilTable2"
 				/>
diff --git a/src/components/boxes/OutWater.vue b/src/components/boxes/OutWater.vue
index 86bb7d4..bc9c66c 100644
--- a/src/components/boxes/OutWater.vue
+++ b/src/components/boxes/OutWater.vue
@@ -34,7 +34,11 @@
         </div>
         <div class="wave"></div>
         <div class="graph flex-1">
-          <HistoryTrend key="water-out" :series="kilnWaterOut" />
+          <HistoryTrend
+            key="water-out"
+            title="窑炉出口水温历史"
+            :series="kilnWaterOut"
+          />
         </div>
       </div>
     </SubContainer>
diff --git a/src/components/boxes/TopTemp.vue b/src/components/boxes/TopTemp.vue
index bb60d78..a8af3fa 100644
--- a/src/components/boxes/TopTemp.vue
+++ b/src/components/boxes/TopTemp.vue
@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-5"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnTop1)"
 					:series="kilnTop1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-6"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnTop2)"
 					:series="kilnTop2"
 				/>
diff --git a/src/components/boxes/XicaoTemp.vue b/src/components/boxes/XicaoTemp.vue
index 3b63548..de95a57 100644
--- a/src/components/boxes/XicaoTemp.vue
+++ b/src/components/boxes/XicaoTemp.vue
@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-9"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(xiCao1)"
 					:series="xiCao1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-10"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(xiCao2)"
 					:series="xiCao2"
 				/>
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
index a0e5f65..1d081cf 100644
--- a/src/components/charts/BarChart.vue
+++ b/src/components/charts/BarChart.vue
@@ -58,6 +58,18 @@ export default {
     },
   },
   methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
     init() {
       if (!this.chart)
         this.chart = echarts.init(document.getElementById(this.id));
@@ -70,9 +82,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: Array(24)
-            .fill(1)
-            .map((_, index) => index + 1 + ":00"),
+          data: this.updateXAxis(),
           axisLine: {
             lineStyle: {
               color: "#5982b2a0",
@@ -83,7 +93,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
             margin: adjust(6),
             rotate: 30,
@@ -109,7 +119,7 @@ export default {
           axisLabel: {
             formatter: "{value} ℃",
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
           },
           splitLine: {
@@ -121,8 +131,7 @@ export default {
         },
         series: [
           {
-            data:
-              this.series,
+            data: this.series,
             //   Array(24)
             //     .fill(1)
             //     .map(() => {
@@ -136,7 +145,7 @@ export default {
             barWidth: adjust(4),
             label: {
               show: true,
-              fontSize: adjust(6),
+              fontSize: adjust(7),
               color: "#eee8",
               position: "top",
             },
diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
index f5c6e23..72c10b6 100644
--- a/src/components/charts/LineChart.vue
+++ b/src/components/charts/LineChart.vue
@@ -70,6 +70,10 @@ export default {
         title: { text: "default chart" },
       }),
     },
+    unit: {
+      type: "String",
+      default: "单位/m³",
+    },
     legend: {
       type: Array,
       default: () => [],
@@ -88,14 +92,24 @@ export default {
         "#F31868",
         "#30E89A",
         "#2760FF",
-        "#723fff",
-        "#ee3fff",
-        "#800f77",
+        "#7138FF",
+        "#F318D8",
+        "#C0F318",
         "#f77",
         "#19f",
         "#98f",
       ],
       data: [],
+      legendtext: [
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+      ],
     };
   },
   mounted() {
@@ -111,6 +125,18 @@ export default {
     },
   },
   methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
     init() {
       if (!this.chart)
         this.chart = echarts.init(document.getElementById(this.id));
@@ -122,9 +148,7 @@ export default {
           right: adjust(12),
         },
         xAxis: {
-          data: Array(24)
-            .fill(1)
-            .map((_, index) => index + 1 + ":00"),
+          data: this.updateXAxis(),
           axisLine: {
             lineStyle: {
               color: "#5982b2a0",
@@ -135,7 +159,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(6),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
             margin: adjust(8),
             rotate: 30,
@@ -143,11 +167,11 @@ export default {
         },
         yAxis: {
           type: "value",
-          name: "单位/m³",
+          name: this.unit,
           nameTextStyle: {
             color: "#fff9",
-            fontSize: adjust(7),
-            align: "right",
+            fontSize: adjust(9),
+            align: "",
           },
           axisLine: {
             show: true,
@@ -161,7 +185,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(6),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
           },
           splitLine: {
@@ -252,32 +276,50 @@ li {
 }
 
 ul {
-  margin-left: adjust(8px);
-  padding: 0 adjust(8px);
-  // background: #eee3;
-  // flex: 1;
-  // width: adjust(154px);
+  // padding: 0 adjust(8px);
   display: flex;
-  overflow-x: auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  height: adjust(28px);
+  // background: #eeec;
+  overflow-x: hidden;
+  white-space: pre-wrap;
   padding-bottom: adjust(2px);
 }
 
-li:not(:last-child) {
-  margin-right: adjust(16px);
+li {
+  text-align: right;
+  position: relative;
+  min-width: 40px;
+  margin-right: adjust(9px);
+  padding: 0 adjust(2px);
 }
 
-li {
-  position: relative;
-  width: 40px;
+li:not(:last-child) {
+  // margin-right: adjust(16px);
+}
+
+.line-chart__custom-legend {
+  position: absolute;
+  top: adjust(-32px);
+  right: 0;
+  font-size: adjust(9px);
+  font-family: Ubuntu, sans-serif;
+  padding: 0;
+  // max-width: 100%;
+  width: 65%;
+  align-items: flex-start;
+  justify-content: flex-end;
 }
 
 li::before {
   content: "";
   position: absolute;
   top: adjust(2px);
-  left: adjust(-6px);
-  width: adjust(4px);
-  height: adjust(4px);
+  left: adjust(-8px);
+  width: adjust(8px);
+  height: adjust(8px);
   border-radius: adjust(1px);
   background: #eee6;
 }
@@ -298,13 +340,13 @@ li:nth-child(5)::before {
   background: #2760ff;
 }
 li:nth-child(6)::before {
-  background: #723fff;
+  background: #7138FF;
 }
 li:nth-child(7)::before {
-  background: #ee3fff;
+  background: #F318D8;
 }
 li:nth-child(8)::before {
-  background: #800f77;
+  background: #C0F318;
 }
 li:nth-child(9)::before {
   background: #f77;
@@ -325,18 +367,4 @@ li:nth-child(11)::before {
   height: 100%;
   width: adjust(1px);
 }
-
-.line-chart__custom-legend {
-  position: absolute;
-  top: adjust(-13px);
-  right: 0;
-  font-size: adjust(7px);
-  font-family: Ubuntu, sans-serif;
-  // background: #fff2;
-  padding: 0;
-  // max-width: 100%;
-  width: 60%;
-  align-items: flex-start;
-  justify-content: flex-end;
-}
 </style>
diff --git a/src/components/isolate-area-1/Area.vue b/src/components/isolate-area-1/Area.vue
index 99273cb..fef2828 100644
--- a/src/components/isolate-area-1/Area.vue
+++ b/src/components/isolate-area-1/Area.vue
@@ -31,11 +31,21 @@ export default {
   computed: {
     ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
     rdata() {
+      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
+      min = +min 
+      sec = +sec 
+      let timer = setInterval(() => {
+        if (sec) sec -= 1
+        else {
+          sec = 59
+          min -= 1
+        }
+      }, 1000);
       return [
         // { icon: "temp", title: "车间温度", value: "27℃" },
         { icon: "fire", title: "当前火向", value: this.fireDirection },
         { icon: "clock", title: "换火时间", value: this.fireChangeTime },
-        { icon: "sand", title: "剩余时间", value: this.lastFireChangeTime + 'h' },
+        { icon: "sand", title: "剩余时间", value: this.lastFireChangeTime },
       ];
     },
   },
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index ac71331..241000a 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -1,19 +1,59 @@
 <template>
-	<header class="header relative">
-		<div>
-			<span class="header--logo">
-				<!-- <img src="../../assets/logo.png" alt="logo"> -->
-			</span>
-			<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
-		</div>
-		<span class="header--wing absolute company"></span>
-		<span class="header--wing absolute datetime"></span>
-	</header>
+  <header class="header relative">
+    <div>
+      <span class="header--logo">
+        <!-- <img src="../../assets/logo.png" alt="logo"> -->
+      </span>
+      <h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
+    </div>
+    <span class="header--wing absolute company"></span>
+    <span class="header--wing absolute datetime">
+      {{ date }} {{ week }} {{ time }}
+    </span>
+  </header>
 </template>
 
 <script>
 export default {
-	name: "Header",
+  name: "Header",
+  data() {
+    return {
+      today: new Date(),
+      time: "00:00:00",
+    };
+  },
+  computed: {
+    date() {
+      return this.today.toLocaleDateString().replaceAll("/", ".");
+    },
+    week() {
+      return [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ][this.today.getDay()];
+    },
+  },
+  mounted() {
+    this.time = this.getTime().join(":");
+    setInterval(() => {
+      this.time = this.getTime().join(":");
+    }, 1000);
+  },
+  methods: {
+    getTime() {
+      const now = new Date();
+      return [
+        now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
+        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
+        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
+      ];
+    },
+  },
 };
 </script>
 
@@ -22,56 +62,60 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
-	background: url(../../assets/header.png) center/contain no-repeat;
-	background-size: 100%;
-	height: adjust(h(280px));
-	width: adjust($actual_width);
-	display: grid;
-	place-items: center;
+  background: url(../../assets/header.png) center/contain no-repeat;
+  background-size: 100%;
+  height: adjust(h(280px));
+  width: adjust($actual_width);
+  display: grid;
+  place-items: center;
 
-	> div {
-		display: flex;
-		align-items: center;
-		margin-bottom: adjust(10px);
+  > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: adjust(10px);
 
-		.header--logo {
-			width: adjust(102px);
-			height: adjust(56px);
-			background: url(../../assets/logo.png) center/contain no-repeat;
-		}
+    .header--logo {
+      width: adjust(102px);
+      height: adjust(56px);
+      background: url(../../assets/logo.png) center/contain no-repeat;
+    }
 
-		h1 {
-			margin-left: adjust(20px);
-			font-size: adjust(35px);
-			// line-height: adjust(100px);
-			// background: #eee;
-			user-select: none;
-			letter-spacing: adjust(8px);
-			font-weight: 600;
-			// color: #6bf2ff;
-			color: $main-color;
-			font-family: "微软雅黑", sans-serif;
-		}
-	}
+    h1 {
+      margin-left: adjust(20px);
+      font-size: adjust(35px);
+      // line-height: adjust(100px);
+      // background: #eee;
+      user-select: none;
+      letter-spacing: adjust(8px);
+      font-weight: 600;
+      // color: #6bf2ff;
+      color: $main-color;
+      font-family: "微软雅黑", sans-serif;
+    }
+  }
 }
 
 .header--wing {
-	left: 0;
-	bottom: adjust(10px);
-	height: adjust(h(78px));
+  left: 0;
+  bottom: adjust(10px);
+  height: adjust(h(78px));
 }
 
 .company {
-	margin-left: adjust(w(1460px));
-	width: adjust(w(1320px));
-	height: adjust(h(48px));
-	background: url("../../assets/company.png") center/cover no-repeat;
+  margin-left: adjust(w(1460px));
+  width: adjust(w(1320px));
+  height: adjust(h(48px));
+  background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
-	margin-left: adjust(w(6150px));
-	width: adjust(w(1320px));
-	height: adjust(h(48px));
-	background: url("../../assets/date.png") center/cover no-repeat;
+  color: $main-color;
+  font-size: adjust(26px);
+  text-align: center;
+  // display: inline-block;
+  margin-left: adjust(w(6150px));
+  width: adjust(w(1320px));
+  height: adjust(h(48px));
+  background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 0ea1252..5173980 100644
--- a/src/components/layout/Main.vue
+++ b/src/components/layout/Main.vue
@@ -1,69 +1,69 @@
 <template>
-	<main class="">
-		<div class="video-crash" v-if="false"></div>
+  <main class="">
+    <div class="video-crash" v-if="false"></div>
 
-		<div class="eq-main absolute">
-			<div class="video-bottom" style="">
-				<video
-					id="1"
-					preload="auto"
-					height="200"
-					muted
-					autoplay
-					loop
-					disablepictureinpicture
-					src="../../assets/videos/fire-to-top.mp4"
-				></video>
-			</div>
+    <div class="eq-main absolute">
+      <div class="video-bottom" v-show="true || fireDirection === '北火'" style="">
+        <video
+          id="1"
+          preload="auto"
+          height="200"
+          muted
+          autoplay
+          loop
+          disablepictureinpicture
+          src="../../assets/videos/fire-to-top.mp4"
+        ></video>
+      </div>
 
-			<div class="video-top" style="">
-				<video
-					id="2"
-					class="video-top"
-					preload="auto"
-					height="200"
-					muted
-					autoplay
-					loop
-					disablepictureinpicture
-					src="../../assets/videos/fire-to-bottom.mp4"
-				></video>
-			</div>
-		</div>
+      <div class="video-top" v-show="fireDirection === '南火'" style="">
+        <video
+          id="2"
+          class="video-top"
+          preload="auto"
+          height="200"
+          muted
+          autoplay
+          loop
+          disablepictureinpicture
+          src="../../assets/videos/fire-to-bottom.mp4"
+        ></video>
+      </div>
+    </div>
 
-		<AreaOne class="area-one" />
+    <AreaOne class="area-one" />
 
-		<div class="absolute left kiln-runtime">
-			<KilnRuntime />
-		</div>
-		<div class="absolute left kiln-pressure">
-			<KilnPressure />
-		</div>
-		<div class="absolute left fan-runtime">
-			<FanRuntime />
-		</div>
-		<div class="absolute left oil-flow">
-			<OilFlow />
-		</div>
-		<div class="absolute left gas-flow">
-			<GasFlow />
-		</div>
-		<div class="absolute left top-temp">
-			<TopTemp />
-		</div>
-		<div class="absolute left bottom-temp">
-			<BottomTemp />
-		</div>
-		<div class="absolute left ou-temp">
-			<XicaoTemp />
-		</div>
-		<div class="absolute in-water">
-			<InWater />
-		</div>
-		<div class="absolute out-water">
-			<OutWater />
-		</div>
-	</main>
+    <div class="absolute left kiln-runtime">
+      <KilnRuntime />
+    </div>
+    <div class="absolute left kiln-pressure">
+      <KilnPressure />
+    </div>
+    <div class="absolute left fan-runtime">
+      <FanRuntime />
+    </div>
+    <div class="absolute left oil-flow">
+      <OilFlow />
+    </div>
+    <div class="absolute left gas-flow">
+      <GasFlow />
+    </div>
+    <div class="absolute left top-temp">
+      <TopTemp />
+    </div>
+    <div class="absolute left bottom-temp">
+      <BottomTemp />
+    </div>
+    <div class="absolute left ou-temp">
+      <XicaoTemp />
+    </div>
+    <div class="absolute in-water">
+      <InWater />
+    </div>
+    <div class="absolute out-water">
+      <OutWater />
+    </div>
+  </main>
 </template>
 
 <script>
@@ -84,52 +84,38 @@ import { mapMutations, mapState } from "vuex";
 import WsClient from "../../utils/wsClass";
 
 export default {
-	name: "Main",
-	components: {
-		AreaOne,
-		KilnRuntime,
-		KilnPressure,
-		FanRuntime,
-		OilFlow,
-		GasFlow,
-		TopTemp,
-		BottomTemp,
-		XicaoTemp,
-		InWater,
-		OutWater,
-	},
-	props: {},
-	data() {
-		return {};
-	},
-	computed: mapState([
-		"kilnPressure",
-		"oilTable1",
-		"oilTable2",
-		"gasTable1",
-		"gasTable2",
-		"kilnTop1",
-		"kilnTop2",
-		"kilnBtm1",
-		"kilnBtm2",
-		"xiCao1",
-		"xiCao2",
-		"kilnWaterIn",
-		"kilnWaterOut",
-	]),
-	mounted() {
-		const wsc = new WsClient(this);
-		wsc.registerListeners();
-	},
-	// watch: {
-	//  // works
-	// 	'kilnTop1': val => {
-	// 		console.log('val', val)
-	// 	}
-	// },
-	methods: {
-		...mapMutations(["update"]),
-	},
+  name: "Main",
+  components: {
+    AreaOne,
+    KilnRuntime,
+    KilnPressure,
+    FanRuntime,
+    OilFlow,
+    GasFlow,
+    TopTemp,
+    BottomTemp,
+    XicaoTemp,
+    InWater,
+    OutWater,
+  },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: mapState(["kilnPressure", "fireDirection"]),
+  mounted() {
+    const wsc = new WsClient(this);
+    wsc.registerListeners();
+  },
+  // watch: {
+  //  // works
+  // 	'kilnTop1': val => {
+  // 		console.log('val', val)
+  // 	}
+  // },
+  methods: {
+    ...mapMutations(["update"]),
+  },
 };
 </script>
 
@@ -137,124 +123,158 @@ export default {
 @import "../../assets/styles/functions";
 
 main {
-	height: 1px;
-	flex: 1;
-	// background: #eee2;
+  height: 1px;
+  flex: 1;
+  // background: #eee2;
 }
 
 .area-one {
-	position: absolute;
-	top: adjust(160px);
-	left: adjust(1588px);
+  position: absolute;
+  top: adjust(160px);
+  left: adjust(1588px);
 }
 
 .video-crash {
-	height: adjust(h(424px));
-	width: adjust(w(800px));
-	background: url(../../assets/tv.png) no-repeat;
-	background-size: 100%;
-	display: inline-block;
-	position: absolute;
-	top: 356px;
-	left: 1580px;
+  height: adjust(h(424px));
+  width: adjust(w(800px));
+  background: url(../../assets/tv.png) no-repeat;
+  background-size: 100%;
+  display: inline-block;
+  position: absolute;
+  top: 356px;
+  left: 1580px;
 }
 
 .video-bottom {
-	position: absolute;
-	bottom: adjust(153.5px);
-	left: adjust(63.5px);
-	transform: scale(1.02, 1.02);
+  position: absolute;
+  bottom: adjust(178px);
+  left: adjust(16px);
+  transform: scale(.9, .57);
 }
 
 .video-top {
-	position: absolute;
-	top: adjust(64px);
-	left: adjust(35px);
-	transform: scale(1.02, 1.02);
+  position: absolute;
+  top: adjust(44px);
+  left: adjust(22px);
+  transform: scale(.95, .9);
 }
 
 .eq-main {
-	width: adjust(w(7150px));
-	height: adjust(h(960px));
-	background: url(../../assets/eq.png) no-repeat;
-	background-size: 100%;
-	top: adjust(170px);
-	left: adjust(380px);
-	position: relative;
-	transform: rotateY(0.5turn);
+  width: adjust(w(7150px));
+  height: adjust(h(960px));
+  background: url(../../assets/eq.png) no-repeat;
+  background-size: 100%;
+  top: adjust(170px);
+  left: adjust(380px);
+  position: relative;
+  transform: rotateY(0.5turn);
+}
+
+.eq-main::before {
+  content: "";
+  position: absolute;
+  //   right: adjust(1200px);
+  opacity: 0;
+  top: adjust(118px);
+  width: adjust(150px);
+  height: adjust(150px);
+  background: url(../../assets/mirror.png) no-repeat;
+  background-size: 100% 100%;
+  animation: 10s linear 0.3s infinite mirror-to-left-2;
 }
 
 .eq-main::after {
-	content: "";
-	position: absolute;
-	right: adjust(1200px);
-	top: adjust(164px);
-	width: adjust(150px);
-	height: adjust(150px);
-	background: url(../../assets/mirror.png) no-repeat;
-	background-size: 100% 100%;
-	animation: 10s linear .3s infinite mirror-to-left;
+  content: "";
+  position: absolute;
+  //   right: adjust(1200px);
+  opacity: 0;
+  top: adjust(118px);
+  width: adjust(150px);
+  height: adjust(150px);
+  background: url(../../assets/mirror.png) no-repeat;
+  background-size: 100% 100%;
+  animation: 10s linear 5s infinite mirror-to-left;
 }
 
 @keyframes mirror-to-left {
-	0% {
-		right: adjust(1200px);
-	}
-	// 50% {
-	// 	right: adjust(800px);
-	// }
-	100% {
-		right: adjust(60px);
-	}
+  0% {
+    opacity: 1;
+  }
+  1% {
+    right: adjust(1200px);
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    right: adjust(60px);
+  }
+}
+
+@keyframes mirror-to-left-2 {
+  0% {
+    opacity: 1;
+  }
+  1% {
+    right: adjust(1200px);
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    right: adjust(60px);
+  }
 }
 
 .kiln-runtime {
-	top: adjust(h(200px));
-	left: adjust(w(60px));
+  top: adjust(h(200px));
+  left: adjust(w(60px));
 }
 
 .kiln-pressure {
-	top: adjust(h(610px));
-	left: adjust(w(60px));
+  top: adjust(h(610px));
+  left: adjust(w(60px));
 }
 
 .fan-runtime {
-	top: adjust(h(1020px));
-	left: adjust(w(60px));
+  top: adjust(h(1020px));
+  left: adjust(w(60px));
 }
 
 .oil-flow {
-	top: adjust(h(1588px));
-	left: adjust(w(60px));
+  top: adjust(h(1588px));
+  left: adjust(w(60px));
 }
 
 .gas-flow {
-	top: adjust(h(1588px));
-	left: adjust(w(1660px));
+  top: adjust(h(1588px));
+  left: adjust(w(1660px));
 }
 .top-temp {
-	top: adjust(h(1588px));
-	left: adjust(w(3260px));
+  top: adjust(h(1588px));
+  left: adjust(w(3260px));
 }
 .bottom-temp {
-	top: adjust(h(1588px));
-	left: adjust(w(4860px));
+  top: adjust(h(1588px));
+  left: adjust(w(4860px));
 }
 .ou-temp {
-	top: adjust(h(1588px));
-	left: adjust(w(6460px));
+  top: adjust(h(1588px));
+  left: adjust(w(6460px));
 }
 .in-water {
-	top: adjust(h(200px));
-	left: adjust(w(8096px));
-	//   left: w(5096px);
-	z-index: 100;
+  top: adjust(h(200px));
+  left: adjust(w(8096px));
+  //   left: w(5096px);
+  z-index: 100;
 }
 
 .out-water {
-	top: adjust(h(1177px));
-	left: adjust(w(8096px));
-	//   left: w(5096px);
-	z-index: 100;
+  top: adjust(h(1177px));
+  left: adjust(w(8096px));
+  //   left: w(5096px);
+  z-index: 100;
 }
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 612cad4..4f8dbe4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -20,11 +20,11 @@ export default new Vuex.Store({
     kilnWaterOut: [],
     fan: [],
     fireDirection: "南火",
-    kilnPressure: '99',
-    fireChangeTime: '13:30:11',
-    lastFireChangeTime: '33',
-    waterInTemp: '099',
-    waterOutTemp: '056'
+    kilnPressure: '00',
+    fireChangeTime: '00:00:00',
+    lastFireChangeTime: '/',
+    waterInTemp: '000',
+    waterOutTemp: '000'
   },
   getters: {
   },
@@ -72,7 +72,7 @@ export default new Vuex.Store({
           break
         }
         case 'kiln-water-in': {
-          state.kilnWaterIn = payload.data
+          state.kilnWaterIn = payload.data 
           //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }