diff --git a/src/components/boxes/FanRuntime.vue b/src/components/boxes/FanRuntime.vue
index b9a91da..6e81dbb 100644
--- a/src/components/boxes/FanRuntime.vue
+++ b/src/components/boxes/FanRuntime.vue
@@ -14,13 +14,14 @@
                 <th>设备状态</th>
               </tr>
             </thead>
-            <tbody>
-              <!-- <tr
+            <!-- <tbody> -->
+            <!-- <tr
 							v-for="(row, index) in tableData1"
 							:key="index"
 							style="font-size: 7px; background: #0b5499; opacity: 35%"
 						> -->
-              <tr class="t-row" v-for="(row, index) in tableData1" :key="index">
+            <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()">
                 <td v-for="(d, idx) in row" :key="idx">
                   <template v-if="idx === 2">
                     <FrequentComp :value="d" />
@@ -33,7 +34,8 @@
                   </template>
                 </td>
               </tr>
-            </tbody>
+            </transition-group>
+            <!-- </tbody> -->
           </table>
         </div>
         <!-- 
@@ -73,6 +75,7 @@ import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import FrequentComp from "./subcomponents/TableFrequence.vue";
 import StatusComp from "./subcomponents/TableStatus.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "KilnPressure",
@@ -81,29 +84,55 @@ export default {
   data() {
     return {
       tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
+      tableCache: [
+        // [11, "风机11", "未运行", "正常" /**or 0,1*/],
+        // [12, "风机12", "未运行", "正常" /**or 0,1*/],
+        // [13, "风机13", "73Hz", "正常" /**or 0,1*/],
+      ],
       tableData1: [
-        // {
-        // 	id: 1,
-        // 	name: '风机1',
-        // 	sequence: '稳运行',
-        // 	status: '正常', // or 0
-        // }
-        [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
-        [2, "风机2", "未运行", "故障" /**or 0,1*/],
-        [3, "风机3", "333Hz", "正常" /**or 0,1*/],
-        [4, "风机4", "100Hz", "正常" /**or 0,1*/],
-        [5, "风机5", "未运行", "正常" /**or 0,1*/],
-        [6, "风机6", "未运行", "故障" /**or 0,1*/],
-        [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
-        [8, "风机8", "未运行", "正常" /**or 0,1*/],
-        [9, "风机9", "未运行", "正常" /**or 0,1*/],
-        [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
-        [11, "风机11", "未运行", "正常" /**or 0,1*/],
-        [12, "风机12", "未运行", "正常" /**or 0,1*/],
-        [13, "风机13", "73Hz", "正常" /**or 0,1*/],
+        // [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
+        // [2, "风机2", "未运行", "故障" /**or 0,1*/],
+        // [3, "风机3", "333Hz", "正常" /**or 0,1*/],
+        // [4, "风机4", "100Hz", "正常" /**or 0,1*/],
+        // [5, "风机5", "未运行", "正常" /**or 0,1*/],
+        // [6, "风机6", "未运行", "故障" /**or 0,1*/],
+        // [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
+        // [8, "风机8", "未运行", "正常" /**or 0,1*/],
+        // [9, "风机9", "未运行", "正常" /**or 0,1*/],
+        // [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
       ],
     };
   },
+  computed: {
+    ...mapState(["fan"]),
+  },
+  watch: {
+    fan: {
+      handler: function (data) {
+        if (!data) return
+        let idx = 0;
+        this.tableData1 = data.slice(0, 10).map((item, index) => {
+          idx += 1;
+          return [idx, ...item];
+        });
+        this.tableCache = data
+          .slice(10)
+          .map((item, index) => [index + 1 + idx, ...item]);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    setInterval(() => {
+      const inData = this.tableCache.shift();
+      const outData = this.tableData1.shift();
+      setTimeout(() => {
+        this.tableData1.splice(this.tableData1.length, 0, inData);
+      }, 200);
+      this.tableCache.push(outData);
+    }, 3000);
+  },
 };
 </script>
 
@@ -121,9 +150,23 @@ export default {
   background: #eee3;
 }
 
+.fan-list-enter-active,
+.fan-list-leave-active {
+  transition: all 0.5s;
+}
+
+// .fan-list-leave-move {
+//   transition: all 1s;
+// }
+
+.fan-list-enter,
+.fan-list-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
 .flex-1 {
   flex: 1;
-  // background: #eee;
 }
 
 .vertical-line {
@@ -138,9 +181,10 @@ export default {
   );
 }
 .table-wrapper {
-  padding-right: 6px;
+  // padding-right: 6px;
   height: 400px;
-  overflow-y: auto;
+  // overflow-y: auto;
+  overflow: hidden;
 }
 
 table {
@@ -153,7 +197,7 @@ table {
 // }
 
 .t-row {
-  height: adjust(13.88px);
+  height: adjust(14px);
 }
 
 .tables > table {
@@ -169,9 +213,9 @@ thead > tr th:first-child {
 }
 
 thead > tr th {
-  font-size: adjust(9px);
+  font-size: adjust(10px);
   line-height: 1.5;
-  padding: adjust(2px) adjust(8px);
+  padding: adjust(3px) adjust(8px);
   font-weight: 400;
   background: #044a8446;
   text-align: left;
@@ -182,7 +226,7 @@ tbody > tr:nth-child(odd) {
 }
 
 tbody > tr td {
-  font-size: adjust(9px);
+  font-size: adjust(10px);
   line-height: 1.25;
   padding: adjust(2px) adjust(8px);
   font-weight: 400;
diff --git a/src/components/boxes/HistoryTemp.vue b/src/components/boxes/HistoryTemp.vue
index 693c50a..d81f59a 100644
--- a/src/components/boxes/HistoryTemp.vue
+++ b/src/components/boxes/HistoryTemp.vue
@@ -1,28 +1,32 @@
 <template>
-	<div class="history-temp flex flex-col" style="height: 100%">
-		<h3>窑炉历史温度趋势</h3>
-		<BarChart class="flex-1" />
-	</div>
+  <div class="history-temp flex flex-col" style="height: 100%">
+    <h3>窑炉历史温度趋势</h3>
+    <BarChart class="flex-1" :series="series" />
+    <!-- :data="compType === 'inWater' ? kilnWaterIn : kilnWaterOut" -->
+  </div>
 </template>
 
 <script>
 import BarChart from "../charts/BarChart.vue";
+import { mapState } from "vuex";
 
 export default {
-	name: "HistoryTemp",
-	components: { BarChart },
-	props: {
-		series: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	data() {
-		return {};
-	},
-	created() {},
-	mounted() {},
-	methods: {},
+  name: "HistoryTemp",
+  components: { BarChart },
+  props: {
+    series: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["kilnWaterIn", "kilnWaterOut"]),
+  },
+  mounted() {},
+  methods: {},
 };
 </script>
 
@@ -30,17 +34,17 @@ export default {
 @import "../../assets/styles/functions";
 
 .flex-1 {
-	flex: 1;
-	// background: #eee;
+  flex: 1;
+  // background: #eee;
 }
 
 h3 {
-	margin: 0;
-	font-family: sans-serif;
-	font-weight: 400;
-	font-size: adjust(14px);
-	letter-spacing: adjust(1px);
-	color: #52fff8;
-	margin: adjust(12px) 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-weight: 400;
+  font-size: adjust(14px);
+  letter-spacing: adjust(1px);
+  color: #52fff8;
+  margin: adjust(12px) 0;
 }
 </style>
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
index f6da90c..a0e5f65 100644
--- a/src/components/charts/BarChart.vue
+++ b/src/components/charts/BarChart.vue
@@ -1,6 +1,6 @@
 <template>
-	<!-- bar chart  -->
-	<div class="bar-chart" :id="id"></div>
+  <!-- bar chart  -->
+  <div class="bar-chart" :id="id"></div>
 </template>
 
 <script>
@@ -8,9 +8,9 @@ import * as echarts from "echarts/core";
 import { BarChart } from "echarts/charts";
 
 import {
-	TitleComponent,
-	TooltipComponent,
-	GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
 } from "echarts/components";
 
 import { LabelLayout, UniversalTransition } from "echarts/features";
@@ -18,142 +18,142 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
 
 echarts.use([
-	TitleComponent,
-	TooltipComponent,
-	GridComponent,
-	BarChart,
-	LabelLayout,
-	UniversalTransition,
-	CanvasRenderer,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
 ]);
 
 function adjust(v) {
-	return v * 2;
+  return v * 2;
 }
 
 export default {
-	name: "BarChart",
-	props: {
-		config: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	data() {
-		return {
-			id: Math.random().toString(),
-			chart: null,
-		};
-	},
-	mounted() {
-		this.init();
-	},
-	watch: {
-		series: {
-			deep: true,
-			handler: function () {
-				console.log("BarChart: series changed!");
-				this.init();
-			},
-		},
-	},
-	methods: {
-		init() {
-			if (!this.chart)
-				this.chart = echarts.init(document.getElementById(this.id));
-			this.chart.setOption({
-				grid: {
-					top: adjust(10),
-					left: adjust(28),
-					bottom: adjust(18),
-					right: adjust(12),
-				},
-				xAxis: {
-					type: "category",
-					data: Array(24)
-						.fill(1)
-						.map((_, index) => index + 1 + ':00'),
-					axisLine: {
-						lineStyle: {
-							color: "#5982b2a0",
-						},
-					},
-					axisTick: {
-						show: false,
-					},
-					axisLabel: {
-						color: "#ffffff",
-						fontSize: adjust(7),
-						lineHeight: adjust(1),
-						margin: adjust(6),
-						rotate: 30
-					},
-				},
-				yAxis: {
-					type: "value",
-					// name: "单位/℃",
-					// nameTextStyle: {
-					// 	color: "#fff9",
-					// 	fontSize: adjust(8),
-					// 	align: "right",
-					// },
-					axisLine: {
-						show: true,
-						lineStyle: {
-							color: "#5982b2a0",
-						},
-					},
-					axisTick: {
-						show: false,
-					},
-					axisLabel: {
-						formatter: "{value} ℃",
-						color: "#fff9",
-						fontSize: adjust(7),
-						lineHeight: adjust(1),
-					},
-					splitLine: {
-						lineStyle: {
-							color: "#5982b2a0",
-						},
-					},
-					// data: [100, 200, 300, 400, 500],
-				},
-				series: [
-					{
-						data:
-							// this.series
-							Array(31)
-								.fill(1)
-								.map(() => {
-									let v = Math.ceil(Math.random() * 100);
-									while (v < 60) {
-										v = Math.ceil(Math.random() * 100);
-									}
-									return v;
-								}),
-						type: "bar",
-						barWidth: adjust(4),
-						label: {
-							show: true,
-							fontSize: adjust(6),
-							color: "#eee8",
-							position: "top",
-						},
-						itemStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: "#A0FF49" },
-								{ offset: 0.35, color: "#49FF9A" },
-								{ offset: 0.7, color: "#49F2FF" },
-								{ offset: 1, color: "#0D6FFF" },
-							]),
-						},
-					},
-				],
-			});
-		},
-		initData() {},
-	},
+  name: "BarChart",
+  props: {
+    series: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      id: Math.random().toString(),
+      chart: null,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    series: {
+      deep: true,
+      handler: function () {
+        console.log("BarChart: series changed!");
+        this.init();
+      },
+    },
+  },
+  methods: {
+    init() {
+      if (!this.chart)
+        this.chart = echarts.init(document.getElementById(this.id));
+      this.chart.setOption({
+        grid: {
+          top: adjust(10),
+          left: adjust(28),
+          bottom: adjust(18),
+          right: adjust(12),
+        },
+        xAxis: {
+          type: "category",
+          data: Array(24)
+            .fill(1)
+            .map((_, index) => index + 1 + ":00"),
+          axisLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: adjust(7),
+            lineHeight: adjust(1),
+            margin: adjust(6),
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // name: "单位/℃",
+          // nameTextStyle: {
+          // 	color: "#fff9",
+          // 	fontSize: adjust(8),
+          // 	align: "right",
+          // },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            formatter: "{value} ℃",
+            color: "#fff9",
+            fontSize: adjust(7),
+            lineHeight: adjust(1),
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          // data: [100, 200, 300, 400, 500],
+        },
+        series: [
+          {
+            data:
+              this.series,
+            //   Array(24)
+            //     .fill(1)
+            //     .map(() => {
+            //       let v = Math.ceil(Math.random() * 100);
+            //       while (v < 60) {
+            //         v = Math.ceil(Math.random() * 100);
+            //       }
+            //       return v;
+            //     }),
+            type: "bar",
+            barWidth: adjust(4),
+            label: {
+              show: true,
+              fontSize: adjust(6),
+              color: "#eee8",
+              position: "top",
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#A0FF49" },
+                { offset: 0.35, color: "#49FF9A" },
+                { offset: 0.7, color: "#49F2FF" },
+                { offset: 1, color: "#0D6FFF" },
+              ]),
+            },
+          },
+        ],
+      });
+    },
+    initData() {},
+  },
 };
 </script>
 
diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
index 73ec952..f5c6e23 100644
--- a/src/components/charts/LineChart.vue
+++ b/src/components/charts/LineChart.vue
@@ -134,7 +134,7 @@ export default {
             show: false,
           },
           axisLabel: {
-            color: "#ffffff",
+            color: "#fff9",
             fontSize: adjust(6),
             lineHeight: adjust(1),
             margin: adjust(8),
@@ -253,11 +253,22 @@ li {
 
 ul {
   margin-left: adjust(8px);
-  padding-left: adjust(8px);
+  padding: 0 adjust(8px);
+  // background: #eee3;
+  // flex: 1;
+  // width: adjust(154px);
+  display: flex;
+  overflow-x: auto;
+  padding-bottom: adjust(2px);
+}
+
+li:not(:last-child) {
+  margin-right: adjust(16px);
 }
 
 li {
   position: relative;
+  width: 40px;
 }
 
 li::before {
@@ -305,18 +316,6 @@ li:nth-child(11)::before {
   background: #98f;
 }
 
-ul {
-  flex: 1;
-  width: adjust(154px);
-  display: flex;
-  overflow-x: auto;
-  padding-bottom: adjust(2px);
-}
-
-li:not(:last-child) {
-  margin-right: adjust(8px);
-}
-
 .line-chart__wrapper {
   position: relative;
   background: #7771;
@@ -335,7 +334,8 @@ li:not(:last-child) {
   font-family: Ubuntu, sans-serif;
   // background: #fff2;
   padding: 0;
-  max-width: 100%;
+  // max-width: 100%;
+  width: 60%;
   align-items: flex-start;
   justify-content: flex-end;
 }
diff --git a/src/store/index.js b/src/store/index.js
index 1a17066..612cad4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -16,9 +16,9 @@ export default new Vuex.Store({
     kilnBtm2: {},
     xiCao1: {},
     xiCao2: {},
-    kilnWaterIn: {},
-    kilnWaterOut: {},
-    fan: {},
+    kilnWaterIn: [],
+    kilnWaterOut: [],
+    fan: [],
     fireDirection: "南火",
     kilnPressure: '99',
     fireChangeTime: '13:30:11',
@@ -33,107 +33,107 @@ export default new Vuex.Store({
       switch (payload.target) {
         case 'oil-1': {
           state.oilTable1 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'oil-2': {
           state.oilTable2 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'gas-1': {
           state.gasTable1 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'gas-2': {
           state.gasTable2 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-top-1': {
           state.kilnTop1 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-top-2': {
           state.kilnTop2 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-btm-1': {
           state.kilnBtm1 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-btm-2': {
           state.kilnBtm2 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-water-in': {
           state.kilnWaterIn = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-water-out': {
           state.kilnWaterOut = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'water-in-temp': {
           state.waterInTemp = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'water-out-temp': {
           state.waterOutTemp = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'xicao-1': {
           state.xiCao1 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'xicao-2': {
           state.xiCao2 = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'fan': {
           state.fan = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'fire-direction': {
           state.fireDirection = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'last-fire-change-time': {
           state.lastFireChangeTime = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-pressure': {
           state.kilnPressure = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'fire-change-time': {
           state.fireChangeTime = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'water-in-temp': {
           state.waterInTemp = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'water-out-temp': {
           state.waterOutTemp = payload.data
-          console.log('更换' + payload.target + '的数据' + payload.data)
+          //console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
       }
diff --git a/src/utils/wsClass.js b/src/utils/wsClass.js
index 09c474f..734f8d8 100644
--- a/src/utils/wsClass.js
+++ b/src/utils/wsClass.js
@@ -42,10 +42,10 @@ export default class WsClient {
     'kilnTempTopT2': 'kiln-top-2',
     'kilnTempBottomT1': 'kiln-btm-1',
     'kilnTempBottomT2': 'kiln-btm-2',
-    'kilnTempWaterT1': 'kiln-water-in',
-    'kilnTempWaterT2': 'kiln-water-out',
-    'kilnTempTinbathT1': 'kiln-water-in',
-    'kilnTempTinbathT2': 'kiln-water-out',
+    'inWater': 'kiln-water-in',
+    'outWater': 'kiln-water-out',
+    'kilnTempTinbathT1': 'xicao-1',
+    'kilnTempTinbathT2': 'xicao-2',
     'kilnGasT1': 'gas-1',
     'kilnGasT2': 'gas-2',
     'kilnOilT1': 'oil-1',