update

src/components/boxes/FanRuntime.vue

@@ -14,13 +14,14 @@
                 <th>设备状态</th>
               </tr>
             </thead>
-            <tbody>
+            <!-- <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: [
-        // {
+        // [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
-        // 	id: 1,
+        // [2, "风机2", "未运行", "故障" /**or 0,1*/],
-        // 	name: '风机1',
+        // [3, "风机3", "333Hz", "正常" /**or 0,1*/],
-        // 	sequence: '稳运行',
+        // [4, "风机4", "100Hz", "正常" /**or 0,1*/],
-        // 	status: '正常', // or 0
+        // [5, "风机5", "未运行", "正常" /**or 0,1*/],
-        // }
+        // [6, "风机6", "未运行", "故障" /**or 0,1*/],
-        [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
+        // [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
-        [2, "风机2", "未运行", "故障" /**or 0,1*/],
+        // [8, "风机8", "未运行", "正常" /**or 0,1*/],
-        [3, "风机3", "333Hz", "正常" /**or 0,1*/],
+        // [9, "风机9", "未运行", "正常" /**or 0,1*/],
-        [4, "风机4", "100Hz", "正常" /**or 0,1*/],
+        // [10, "风机10", "86423Hz", "正常" /**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*/],
       ],
     };
   },
+  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;

src/components/boxes/HistoryTemp.vue

@@ -1,26 +1,30 @@
 <template>
   <div class="history-temp flex flex-col" style="height: 100%">
     <h3>窑炉历史温度趋势</h3>
-		<BarChart class="flex-1" />
+    <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,
+      type: Array,
-			default: () => ({}),
+      default: () => [],
     },
   },
   data() {
     return {};
   },
-	created() {},
+  computed: {
+    ...mapState(["kilnWaterIn", "kilnWaterOut"]),
+  },
   mounted() {},
   methods: {},
 };

src/components/charts/BarChart.vue

@@ -34,9 +34,9 @@ function adjust(v) {
 export default {
   name: "BarChart",
   props: {
-		config: {
+    series: {
-			type: Object,
+      type: Array,
-			default: () => ({}),
+      default: () => [],
     },
   },
   data() {
@@ -72,7 +72,7 @@ export default {
           type: "category",
           data: Array(24)
             .fill(1)
-						.map((_, index) => index + 1 + ':00'),
+            .map((_, index) => index + 1 + ":00"),
           axisLine: {
             lineStyle: {
               color: "#5982b2a0",
@@ -82,11 +82,11 @@ export default {
             show: false,
           },
           axisLabel: {
-						color: "#ffffff",
+            color: "#fff9",
             fontSize: adjust(7),
             lineHeight: adjust(1),
             margin: adjust(6),
-						rotate: 30
+            rotate: 30,
           },
         },
         yAxis: {
@@ -122,16 +122,16 @@ export default {
         series: [
           {
             data:
-							// this.series
+              this.series,
-							Array(31)
+            //   Array(24)
-								.fill(1)
+            //     .fill(1)
-								.map(() => {
+            //     .map(() => {
-									let v = Math.ceil(Math.random() * 100);
+            //       let v = Math.ceil(Math.random() * 100);
-									while (v < 60) {
+            //       while (v < 60) {
-										v = Math.ceil(Math.random() * 100);
+            //         v = Math.ceil(Math.random() * 100);
-									}
+            //       }
-									return v;
+            //       return v;
-								}),
+            //     }),
             type: "bar",
             barWidth: adjust(4),
             label: {

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;
 }

src/store/index.js

@@ -16,9 +16,9 @@ export default new Vuex.Store({
     kilnBtm2: {},
     xiCao1: {},
     xiCao2: {},
-    kilnWaterIn: {},
+    kilnWaterIn: [],
-    kilnWaterOut: {},
+    kilnWaterOut: [],
-    fan: {},
+    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
         }
       }

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',
+    'inWater': 'kiln-water-in',
-    'kilnTempWaterT2': 'kiln-water-out',
+    'outWater': 'kiln-water-out',
-    'kilnTempTinbathT1': 'kiln-water-in',
+    'kilnTempTinbathT1': 'xicao-1',
-    'kilnTempTinbathT2': 'kiln-water-out',
+    'kilnTempTinbathT2': 'xicao-2',
     'kilnGasT1': 'gas-1',
     'kilnGasT2': 'gas-2',
     'kilnOilT1': 'oil-1',