伪造数据

src/components/mining/monitor/process_statistics.vue

@@ -1,31 +1,41 @@
 <template>
-<div>
-
-  <div id="lmid" >
+  <div>
+    <div id="lmid">
       <span class="title">生产统计</span>
-    <div class="center">
-      <div class="middle_top_list" style="width:220px">
-      <div class="list_title">割煤刀数
-        <br/>
-        当前班刀数/计划刀数
+      <div class="center">
+        <div class="middle_top_list" style="width: 220px">
+          <div class="list_title">
+            割煤刀数
+            <br />
+            当前班刀数/计划刀数
+          </div>
+          <div class="list_num list_num1">
+            <span class="counter-value">{{ data.curr_dao }}</span
+            >/<span class="counter-value">{{ data.plan_dao }}</span>
+          </div>
+        </div>
+        <div class="middle_top_list">
+          <div class="list_title">
+            回采米数
+            <br />
+            当前米数/总米数
+          </div>
+          <div class="list_num list_num2">
+            <span class="counter-value">{{ data.curr_mi }}</span
+            >/<span class="counter-value">{{ data.plan_mi }}</span
+            >m
+          </div>
+        </div>
+        <div class="middle_top_list" style="width: 160px">
+          <div class="list_title">出煤量</div>
+          <div class="list_num list_num2">
+            <span class="counter-value">{{ data.coalnum }}</span
+            >万吨
+          </div>
+        </div>
       </div>
-      <div class="list_num list_num1"><span class="counter-value">{{data.curr_dao}}</span>/<span class="counter-value">{{data.plan_dao}}</span></div>
-
-    </div>
-    <div class="middle_top_list">
-      <div class="list_title">回采米数
-         <br/>
-         当前米数/总米数
-      </div>
-      <div class="list_num list_num2"><span class="counter-value">{{data.curr_mi}}</span>/<span class="counter-value">{{data.plan_mi}}</span>m</div>
-    </div>
-    <div class="middle_top_list" style="width:160px">
-      <div class="list_title">出煤量</div>
-      <div class="list_num list_num2"><span class="counter-value">{{data.coalnum}}</span>万吨</div>
-    </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -34,57 +44,24 @@ export default {
   data() {
     return {
       data: {
-        curr_dao: "8",
+        curr_dao: 8,
         plan_dao: "10",
-        curr_mi: "1300",
+        curr_mi: 100,
         plan_mi: "2000",
-        coalnum:'2.4'
+        coalnum: 2.4,
       },
     };
   },
 
   mounted() {
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/49`);
-    this.initWebSocket();
-  },
-  methods: {
-    initWebSocket() {
-      // 连接错误
-      this.websocket.onerror = () => {
-        console.log(
-          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
-        );
-      };
-      // 连接成功
-      this.websocket.onopen = () => {
-        console.log(
-          "WebSocket连接成功    状态码：" + this.websocket.readyState
-        );
-      };
-      // 收到消息的回调
-      this.websocket.onmessage = (event) => {
-        if (JSON.parse(event.data).length) {
-          this.changeState(JSON.parse(event.data));
-        }
-      };
-      // 连接关闭的回调
-      this.websocket.onclose = () => {
-        console.log(
-          "WebSocket连接关闭    状态码：" + this.websocket.readyState
-        );
-      };
-      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
-      this.$once("hook:beforeDestroy", () => {
-        this.websocket.close();
-      });
-    },
-    changeState(data) {
-      this.data = data[0];
-    },
-    close() {
-      this.websocket.close();
-      console.log(123);
-    },
+    let interval = setInterval(() => {
+      this.data.curr_dao = this.getRandomNum(0, 10);
+      this.data.curr_mi += this.getRandomNum(0, 20);
+      this.data.coalnum = this.getRandomNumWithDecimals(0, 6);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
   computed: {
     ...mapState(["websocketIP"]),
@@ -92,15 +69,14 @@ export default {
 };
 </script>
 
-
 <style scoped>
-#lmid{
+#lmid {
   height: 200px;
-  
+
   background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
-.center{
+.center {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -108,7 +84,7 @@ export default {
 .title {
   padding-top: 5px;
   font-size: 18px;
-  color: #4ADEFE;
+  color: #4adefe;
   margin-left: 20px;
 }
 .middle_top_list {
@@ -118,10 +94,10 @@ export default {
   margin-top: 15%;
   margin-left: 5%;
   text-align: center;
-  color: #4ADEFE;
+  color: #4adefe;
 }
 .middle_top_list span {
-  color: #F3DB5C;
+  color: #f3db5c;
 }
 .list_title {
   font-size: 17px;
@@ -137,5 +113,4 @@ export default {
 .list_num span {
   font-size: 30px;
 }
-
-</style>
+</style>

src/components/monitor/detailedTable.vue

@@ -1,9 +1,7 @@
-
-
-  <template>
+<template>
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
-    <el-table :data="tableData">
+    <el-table :data="tableData" max-height="200">
       <el-table-column prop="serialNumber" label="测点编号" width="85">
       </el-table-column>
       <el-table-column prop="place" label="安装位置" width="180">
@@ -19,28 +17,47 @@
 export default {
   data() {
     return {
+      area: [
+        "原煤仓二层分站",
+        "碟子沟通风机房",
+        "地面主平硐井口",
+        "12302回风巷",
+      ],
       tableData: [
         {
-          serialNumber: "1",
+          serialNumber: 2,
           place: "原煤仓二层分站",
-          real_time: "18.3",
+          real_time: 18.3,
           dataQuality: "良好",
         },
         {
-          serialNumber: "2",
+          serialNumber: 1,
           place: "原煤仓二层分站",
-          real_time: "17.2",
+          real_time: 17.2,
           dataQuality: "良好",
         },
         {
-          serialNumber: "3",
+          serialNumber: 0,
           place: "碟子沟通风机房",
-          real_time: "18.3",
+          real_time: 18.3,
           dataQuality: "良好",
         },
       ],
     };
   },
+  mounted() {
+    let interval = setInterval(() => {
+      let temp = {};
+      temp["serialNumber"] = this.tableData.length;
+      temp["place"] = this.area[this.getRandomNum(0, 3)];
+      temp["real_time"] = this.getRandomNumWithDecimals(0, 20);
+      temp["dataQuality"] = Math.random() > 0.5 ? "良好" : "故障";
+      this.tableData.unshift(temp);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
   methods: {
     headerStyle({ row, column, rowIndex, columnIndex }) {
       return "tableStyle";
@@ -51,7 +68,7 @@ export default {
   },
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .main {
   padding: 6px;
   // border:3px solid #96c2f1;
@@ -103,4 +120,8 @@ export default {
   font-size: 16px;
   color: #4adefe;
 }
-</style>
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+</style>

src/components/monitor/left.vue

@@ -32,7 +32,7 @@ export default {
   name: "left",
   data() {
     return {
-      percentage: 80,
+      percentage: 70,
       // 基本信息区域
       leftData: [
         {
@@ -58,18 +58,22 @@ export default {
       ],
     };
   },
+  mounted() {
+    let interval = setInterval(() => {
+      this.percentage = this.getRandomNum(70, 100);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
   components: {
     scoreImg,
   },
   methods: {
     // 获取两个参数，一个是leftData 下拉选框可以选择的区域，一个是viewData 区域评分对应的柱状图数据
-    dataChange(leftData, viewData, percentage) {
+    dataChange(leftData) {
       // 将选择区域数据给基本信息表格
       this.leftData = leftData;
-      // 区域总分
-      this.percentage = percentage;
-      // 将柱状图数据传给柱状图子组件
-      this.$refs.scoreImg.dataChange(viewData);
     },
   },
 };
@@ -156,4 +160,4 @@ export default {
 .left_003 >>> .el-progress__text {
   color: #f3db5c;
 }
-</style>
+</style>

src/components/monitor/rightTable.vue

@@ -1,31 +1,14 @@
-  <template>
+<template>
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
     <span class="title">区域隐患</span>
-    <el-table :data="tableData">
-      <el-table-column
-        prop="name"
-        label="隐患名称"
-        width="80"
-      >
+    <el-table :data="tableData" max-height="420">
+      <el-table-column prop="name" label="隐患名称" width="80">
       </el-table-column>
-      <el-table-column
-        prop="time"
-        label="发生时间"
-        width="150"
-      >
+      <el-table-column prop="time" label="发生时间" width="150">
       </el-table-column>
-      <el-table-column
-        prop="rank"
-        label="级别"
-        width="70"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="result"
-        label="处理结果"
-        width="80"
-      >
+      <el-table-column prop="rank" label="级别" width="70"> </el-table-column>
+      <el-table-column prop="result" label="处理结果" width="80">
       </el-table-column>
     </el-table>
   </div>
@@ -34,37 +17,77 @@
 export default {
   data() {
     return {
+      danger: ["瓦斯报警", "设备过热", "烟雾报警"],
+      dangerLevel: ["一级", "二级", "三级"],
       tableData: [
         {
           name: "瓦斯报警",
           time: "2021-1-14 17:04:36",
-          rank:"一级",
-          result:'未处理'
+          rank: "一级",
+          result: "未处理",
         },
         {
           name: "设备过热",
           time: "2021-1-14 17:12:26",
-          rank:"二级",
-          result:'未处理'
+          rank: "二级",
+          result: "未处理",
         },
         {
           name: "烟雾报警",
           time: "2021-1-14 17:23:11",
-          rank:"二级",
-          result:'未处理'
+          rank: "二级",
+          result: "未处理",
         },
       ],
     };
   },
+  mounted() {
+    Date.prototype.Format = function (fmt) {
+      let o = {
+        "M+": this.getMonth() + 1, //月份
+        "d+": this.getDate(), //日
+        "H+": this.getHours(), //小时
+        "m+": this.getMinutes(), //分
+        "s+": this.getSeconds(), //秒
+        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+        S: this.getMilliseconds(), //毫秒
+      };
+      if (/(y+)/.test(fmt))
+        fmt = fmt.replace(
+          RegExp.$1,
+          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
+        );
+      for (let k in o)
+        if (new RegExp("(" + k + ")").test(fmt))
+          fmt = fmt.replace(
+            RegExp.$1,
+            RegExp.$1.length == 1
+              ? o[k]
+              : ("00" + o[k]).substr(("" + o[k]).length)
+          );
+      return fmt;
+    };
+    let interval = setInterval(() => {
+      let temp = {};
+      temp["name"] = this.danger[this.getRandomNum(0, 2)];
+      temp["time"] = new Date().Format("yyyy-MM-dd HH:mm:ss");
+      temp["rank"] = this.dangerLevel[this.getRandomNum(0, 2)];
+      temp["result"] = Math.random() > 0.5 ? "未处理" : "已处理";
+      this.tableData.unshift(temp);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
   methods: {
     dataChange(tableData) {
       // 区域隐患信息
       this.tableData = tableData;
-    }
+    },
   },
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .main {
   padding: 6px;
   // border:3px solid #96c2f1;
@@ -101,24 +124,28 @@ export default {
 .table-wrapper ::v-deep .el-table th {
   background-color: transparent !important;
   border: none;
-  color: #4ADEFE;
+  color: #4adefe;
   font-size: 14px;
 }
 .table-wrapper ::v-deep .el-table td,
 .el-table th.is-leaf {
   background-color: transparent !important;
-  color: #F3DB5C;
+  color: #f3db5c;
   font-size: 13px;
   border: none;
 }
 .title {
   border-bottom: #5ddcf8 1px solid;
   height: 40px;
-  width: 100%;;
+  width: 100%;
   font-size: 18px;
   line-height: 2;
   padding: 5px;
   font-weight: 500;
-  color: #4ADEFE;
+  color: #4adefe;
+}
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
-</style>
+</style>

src/components/monitor/scoreImg.vue

@@ -23,7 +23,7 @@ export default {
           left: "3%",
           right: "4%",
           bottom: "2%",
-          top: "10%",
+          top: "20%",
           containLabel: true,
         },
         legend: {
@@ -51,6 +51,8 @@ export default {
         yAxis: [
           {
             type: "value",
+            min: 0,
+            max: 100,
             axisLabel: {
               color: "#4adefe",
               fontSize: 11,
@@ -112,21 +114,42 @@ export default {
     this.myChart = this.$echarts.init(document.getElementById("bar"));
     this.myChart.setOption(this.option);
 
-  },
-  props: ["personScore"],
-  methods: {
-    dataChange(viewData) {
-      let newOption = {
+    let interval = setInterval(() => {
+      let newData = [
+        {
+          value: 90,
+          itemStyle: {
+            color: "#FF6666",
+          },
+        },
+        {
+          value: 87,
+          itemStyle: {
+            color: "#FFFF66",
+          },
+        },
+        {
+          value: 92,
+          itemStyle: {
+            color: "#99CC66",
+          },
+        },
+      ];
+      for (let i = 0; i < 3; i++) {
+        newData[i].value = this.getRandomNum(70, 100);
+      }
+      this.myChart.setOption({
         series: {
-          data: [],
+          data: newData,
         },
-      };
-      newOption.series.data = viewData;
-    this.myChart.setOption(newOption);
-    },
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
+  props: ["personScore"],
 };
 </script>
 
-<style>
-</style>
+<style></style>

src/components/tunneling/temporature-two.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="tempChart2"
-    style="width: 100%;height: 250px;"
+    style="width: 100px;height: 250px;"
   ></div>
 </template>
 

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div >
     <el-row class="tac" >
-      <el-col :span="2" style="margin-top: -30px;background-color: #06133d;">
+      <el-col :span="2" style="margin-top: -30px;">
         <!-- style="width: 110px;height: 800px;background-color: #409eff;" -->
         <div style="width: 110px; height: 800px;">
           <div style="
@@ -85,7 +85,7 @@
         <router-view></router-view>
       </el-col> 
       <!-- 右侧边栏 -->
-      <el-col :span="2" style="margin-top: -30px;background-color: #06133d;">
+      <el-col :span="2" style="margin-top: -30px;">
         <div style="width: 110px; height: 800px;">
           <div style="
               margin-left: 20px;

src/views/compressed/dataBoard/dataBoard.vue

@@ -167,7 +167,7 @@ export default {
 }
 .main {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,
@@ -238,7 +238,7 @@ export default {
   /* height: 30%; */
   /* display: inline; */
   /* height: 400px; */
-  margin-top: -40px;
+  margin-top: -60px;
   display: flex;
   justify-content: space-around;
 }

src/views/drain/dataBoard/dataBoard.vue

@@ -158,7 +158,7 @@ export default {
 }
 .main {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,
@@ -229,7 +229,7 @@ export default {
   /* height: 30%; */
   /* display: inline; */
   /* height: 400px; */
-  margin-top: -40px;
+  margin-top: -60px;
   display: flex;
   justify-content: space-around;
 }

src/views/drain/dataBoard/faultAlarm.vue

@@ -5,7 +5,7 @@
     <el-table :data="tableData"  max-height="160">
       <el-table-column
         prop="name"
-        label="名称"
+        label="时间"
         width="180"
       >
       </el-table-column>

src/views/gas/configImg/index.vue

@@ -13,7 +13,7 @@
       <!-- </div> -->
     </div>
 
-    <el-row>
+    <el-row style="margin-top: 30px">
       <div class="bottom">
         <!-- 浓度或流量曲线 -->
         <div class="bottom_left">
@@ -52,7 +52,7 @@ export default {
 <style scoped>
 .main1 {
   width: 100%;
-  height: 850px;
+  height: 900px;
   background-image: linear-gradient(
     to right,
     rgb(6, 19, 60) 0%,

src/views/gas/configImg/main.vue

@@ -366,7 +366,7 @@ export default {
         epipodiumtem: 55, //max80
         backshafttem: 65, //max80
         reducertem: 70, //max85
-        oilpressure: 0,
+        oilpressure: 12,
       },
     };
   },
@@ -404,7 +404,16 @@ export default {
       }
       this.valvestate.splice(0, 10, valveArr[0], valveArr[1],valveArr[2],valveArr[3],valveArr[4],valveArr[5],valveArr[6],valveArr[7],valveArr[8],valveArr[9]);
       
-
+      this.motor2.current = this.getRandomNum(0, 45);
+      this.motor2.voltage = this.getRandomNum(0, 220);
+      this.motor2.motortemperature = this.getRandomNum(0, 75);
+      this.motor2.phasetemperatuA = this.getRandomNum(0, 120);
+      this.motor2.phasetemperatuB = this.getRandomNum(0, 120);
+      this.motor2.phasetemperatuC = this.getRandomNum(0, 120);
+      this.motor2.epipodiumtem = this.getRandomNum(0, 80);
+      this.motor2.backshafttem = this.getRandomNum(0, 80);
+      this.motor2.reducertem = this.getRandomNum(0, 85);
+      this.motor2.oilpressure = this.getRandomNum(0, 200);
 
     }, 3000);
     this.$once("hook:beforeDestroy", () => {

src/views/mining/machines/index.vue

@@ -1,167 +1,146 @@
 <template>
   <div id="outer">
     <div class="title">
-      <p style="color:#4adefe;">三机监控</p>
+      <p style="color: #4adefe">三机监控</p>
     </div>
-    <img style="width: 1300px;margin-left:100px" src="./顶部.png" />
+    <img style="width: 1300px; margin-left: 100px" src="./顶部.png" />
     <div style="height: 50px"></div>
     <div class="row">
       <div class="square">
         <img class="img" src="./刮板机.png" />
         <div class="inf">
-          <div style="height: 20%;font-size: 20px;color: #4adefe;">刮板机 运行状态</div>
+          <div style="height: 20%; font-size: 20px; color: #4adefe">
+            刮板机 运行状态
+          </div>
           <div class="details">
-              <div>运行速度:
-              <span>
-                 {{ data[0].transporter_speed }}m/s
-              </span>
-             </div>
-            <div>电机功率:
-              <span>
-                {{ data[0].transporter_power }}W
-              </span>
+            <div>
+              运行速度:
+              <span> {{ data[0].transporter_speed }}m/s </span>
+            </div>
+            <div>
+              电机功率:
+              <span> {{ data[0].transporter_power }}W </span>
+            </div>
+            <div>
+              减速器油温:
+              <span> {{ data[0].transporter_reducerOilTemperature }}℃ </span>
+            </div>
+            <div>
+              电机电流:
+              <span> {{ data[0].transporter_current }}A </span>
             </div>
-            <div>减速器油温:
-              <span>
-                {{ data[0].transporter_reducerOilTemperature }}℃
-                </span>
-              </div>
-            <div>电机电流:
-              <span>
-                {{ data[0].transporter_current }}A
-              </span>
+            <div>
+              电机轴温:
+              <span> {{ data[0].transporter_motorTemperature }}℃ </span>
             </div>
-            <div>电机轴温:
-              <span>
-                {{ data[0].transporter_motorTemperature }}℃
-              </span>
+            <div>
+              冷却水水压:
+              <span> {{ data[0].transporter_pressure }}Pa </span>
             </div>
-            <div>冷却水水压:
-             <span>
-               {{ data[0].transporter_pressure }}Pa
-              </span> 
-              </div>
-            <div>电机电压:
-             <span>
-               {{ data[0].transporter_voltage }}V
-             </span> 
-              </div>
-            <div>减速器轴温:
-              <span>
-                {{ data[0].transporter_reducerShaftTemperature }}℃
-              </span>
+            <div>
+              电机电压:
+              <span> {{ data[0].transporter_voltage }}V </span>
+            </div>
+            <div>
+              减速器轴温:
+              <span> {{ data[0].transporter_reducerShaftTemperature }}℃ </span>
+            </div>
+            <div>
+              冷却水水温:
+              <span> {{ data[0].transporter_waterTemperature }}℃ </span>
             </div>
-            <div>冷却水水温:
-              <span>
-                {{ data[0].transporter_waterTemperature }}℃
-              </span>
-           </div>
           </div>
         </div>
       </div>
       <div class="square">
         <img class="img" src="./破碎机.png" />
         <div class="inf">
-          <div style="height: 20%;font-size: 20px;color: #4adefe;">破碎机 运行状态</div>
+          <div style="height: 20%; font-size: 20px; color: #4adefe">
+            破碎机 运行状态
+          </div>
           <div class="details">
-           <div>运行速度:
-              <span>
-                 {{ data[1].transporter_speed }}m/s
-              </span>
-             </div>
-            <div>电机功率:
-              <span>
-                {{ data[1].transporter_power }}W
-              </span>
+            <div>
+              运行速度:
+              <span> {{ data[1].transporter_speed }}m/s </span>
+            </div>
+            <div>
+              电机功率:
+              <span> {{ data[1].transporter_power }}W </span>
             </div>
-            <div>减速器油温:
-              <span>
-                {{ data[1].transporter_reducerOilTemperature }}℃
-                </span>
-              </div>
-            <div>电机电流:
-              <span>
-                {{ data[1].transporter_current }}A
-              </span>
+            <div>
+              减速器油温:
+              <span> {{ data[1].transporter_reducerOilTemperature }}℃ </span>
             </div>
-            <div>电机轴温:
-              <span>
-                {{ data[1].transporter_motorTemperature }}℃
-              </span>
+            <div>
+              电机电流:
+              <span> {{ data[1].transporter_current }}A </span>
             </div>
-            <div>冷却水水压:
-             <span>
-               {{ data[1].transporter_pressure }}Pa
-              </span> 
-              </div>
-            <div>电机电压:
-             <span>
-               {{ data[1].transporter_voltage }}V
-             </span> 
-              </div>
-            <div>减速器轴温:
-              <span>
-                {{ data[1].transporter_reducerShaftTemperature }}℃
-              </span>
+            <div>
+              电机轴温:
+              <span> {{ data[1].transporter_motorTemperature }}℃ </span>
+            </div>
+            <div>
+              冷却水水压:
+              <span> {{ data[1].transporter_pressure }}Pa </span>
+            </div>
+            <div>
+              电机电压:
+              <span> {{ data[1].transporter_voltage }}V </span>
+            </div>
+            <div>
+              减速器轴温:
+              <span> {{ data[1].transporter_reducerShaftTemperature }}℃ </span>
+            </div>
+            <div>
+              冷却水水温:
+              <span> {{ data[1].transporter_waterTemperature }}℃ </span>
             </div>
-            <div>冷却水水温:
-              <span>
-                {{ data[1].transporter_waterTemperature }}℃
-              </span>
-           </div>
           </div>
         </div>
       </div>
       <div class="square">
         <img class="img" src="./转载机.png" />
         <div class="inf">
-          <div style="height: 20%; font-size: 20px; color: #4adefe;">转载机 运行状态</div>
+          <div style="height: 20%; font-size: 20px; color: #4adefe">
+            转载机 运行状态
+          </div>
           <div class="details">
-          <div>运行速度:
-              <span>
-                 {{ data[2].transporter_speed }}m/s
-              </span>
-             </div>
-            <div>电机功率:
-              <span>
-                {{ data[2].transporter_power }}W
-              </span>
+            <div>
+              运行速度:
+              <span> {{ data[2].transporter_speed }}m/s </span>
+            </div>
+            <div>
+              电机功率:
+              <span> {{ data[2].transporter_power }}W </span>
+            </div>
+            <div>
+              减速器油温:
+              <span> {{ data[2].transporter_reducerOilTemperature }}℃ </span>
             </div>
-            <div>减速器油温:
-              <span>
-                {{ data[2].transporter_reducerOilTemperature }}℃
-                </span>
-              </div>
-            <div>电机电流:
-              <span>
-                {{ data[2].transporter_current }}A
-              </span>
+            <div>
+              电机电流:
+              <span> {{ data[2].transporter_current }}A </span>
             </div>
-            <div>电机轴温:
-              <span>
-                {{ data[2].transporter_motorTemperature }}℃
-              </span>
+            <div>
+              电机轴温:
+              <span> {{ data[2].transporter_motorTemperature }}℃ </span>
             </div>
-            <div>冷却水水压:
-             <span>
-               {{ data[2].transporter_pressure }}Pa
-              </span> 
-              </div>
-            <div>电机电压:
-             <span>
-               {{ data[2].transporter_voltage }}V
-             </span> 
-              </div>
-            <div>减速器轴温:
-              <span>
-                {{ data[2].transporter_reducerShaftTemperature }}℃
-              </span>
+            <div>
+              冷却水水压:
+              <span> {{ data[2].transporter_pressure }}Pa </span>
+            </div>
+            <div>
+              电机电压:
+              <span> {{ data[2].transporter_voltage }}V </span>
+            </div>
+            <div>
+              减速器轴温:
+              <span> {{ data[2].transporter_reducerShaftTemperature }}℃ </span>
+            </div>
+            <div>
+              冷却水水温:
+              <span> {{ data[2].transporter_waterTemperature }}℃ </span>
             </div>
-            <div>冷却水水温:
-              <span>
-                {{ data[2].transporter_waterTemperature }}℃
-              </span>
-           </div>
           </div>
         </div>
       </div>
@@ -171,72 +150,76 @@
 <script>
 import { mapState } from "vuex";
 export default {
-  
   name: "compressors",
   data() {
     return {
-      data: [{
-        transporter_speed:0,
-        transporter_power:10,
-        transporter_reducerOilTemperature:30,
-        transporter_current:20,
-        transporter_motorTemperature:60,
-        transporter_pressure:20,
-        transporter_voltage:232,
-        transporter_reducerShaftTemperature:10,
-        transporter_waterTemperature:50,
-      
-      },{
-         transporter_speed:3,
-        transporter_power:10,
-        transporter_reducerOilTemperature:30,
-        transporter_current:20,
-        transporter_motorTemperature:60,
-        transporter_pressure:20,
-        transporter_voltage:232,
-        transporter_reducerShaftTemperature:10,
-        transporter_waterTemperature:50,
-
-      },{
-         transporter_speed:30,
-        transporter_power:10,
-        transporter_reducerOilTemperature:30,
-        transporter_current:20,
-        transporter_motorTemperature:60,
-        transporter_pressure:20,
-        transporter_voltage:232,
-        transporter_reducerShaftTemperature:10,
-        transporter_waterTemperature:50,
-
-      }
-      ]
+      data: [
+        {
+          transporter_speed: 0,
+          transporter_power: 10,
+          transporter_reducerOilTemperature: 30,
+          transporter_current: 20,
+          transporter_motorTemperature: 60,
+          transporter_pressure: 20,
+          transporter_voltage: 232,
+          transporter_reducerShaftTemperature: 10,
+          transporter_waterTemperature: 50,
+        },
+        {
+          transporter_speed: 3,
+          transporter_power: 10,
+          transporter_reducerOilTemperature: 30,
+          transporter_current: 20,
+          transporter_motorTemperature: 60,
+          transporter_pressure: 20,
+          transporter_voltage: 232,
+          transporter_reducerShaftTemperature: 10,
+          transporter_waterTemperature: 50,
+        },
+        {
+          transporter_speed: 30,
+          transporter_power: 10,
+          transporter_reducerOilTemperature: 30,
+          transporter_current: 20,
+          transporter_motorTemperature: 60,
+          transporter_pressure: 20,
+          transporter_voltage: 232,
+          transporter_reducerShaftTemperature: 10,
+          transporter_waterTemperature: 50,
+        },
+      ],
     };
   },
 
-computed: {
+  computed: {
     ...mapState(["websocketIP"]),
   },
   mounted() {
     //如果id确定，再修改
-//     let data0 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
-//     this.initWebSocket(data0, "data0");
-//   let data1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
-//     this.initWebSocket(data1, "data1");
-// let data2 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
-//     this.initWebSocket(data2, "data2");
-   let interval = setInterval(() => {
-     for(let i=0;i<3;i++){
-     this.data[i].transporter_speed = this.getRandomNum(10, 100);
-      this.data[i].transporter_power = this.getRandomNum(90, 1000);
-       this.data[i].transporter_reducerOilTemperature = this.getRandomNum(70, 140);
-        this.data[i].transporter_current=this.getRandomNum(2,10);
-         this.data[i].transporter_motorTemperature=this.getRandomNum(2,10);
-          this.data[i].transporter_pressure=this.getRandomNum(100,1100);
-           this.data[i].transporter_voltage=this.getRandomNum(1,3000);
-           this.data[i].transporter_reducerShaftTemperature=this.getRandomNum(2,10000);
-            this.data[i].transporter_waterTemperature=this.getRandomNum(2,100);
-     }
- 
+    //     let data0 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
+    //     this.initWebSocket(data0, "data0");
+    //   let data1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
+    //     this.initWebSocket(data1, "data1");
+    // let data2 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
+    //     this.initWebSocket(data2, "data2");
+    let interval = setInterval(() => {
+      for (let i = 0; i < 3; i++) {
+        this.data[i].transporter_speed = this.getRandomNum(10, 100);
+        this.data[i].transporter_power = this.getRandomNum(90, 1000);
+        this.data[i].transporter_reducerOilTemperature = this.getRandomNum(
+          70,
+          140
+        );
+        this.data[i].transporter_current = this.getRandomNum(2, 10);
+        this.data[i].transporter_motorTemperature = this.getRandomNum(2, 10);
+        this.data[i].transporter_pressure = this.getRandomNum(100, 1100);
+        this.data[i].transporter_voltage = this.getRandomNum(1, 3000);
+        this.data[i].transporter_reducerShaftTemperature = this.getRandomNum(
+          2,
+          10000
+        );
+        this.data[i].transporter_waterTemperature = this.getRandomNum(2, 100);
+      }
     }, 3000);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
@@ -244,16 +227,13 @@ computed: {
   },
   methods: {
     getData0(data) {
-      this.data[0]=data[0];
-
+      this.data[0] = data[0];
     },
-        getData1(data) {
-      this.data[1]=data[1];
-
+    getData1(data) {
+      this.data[1] = data[1];
     },
-        getData2(data) {
-      this.data[2]=data[2];
-
+    getData2(data) {
+      this.data[2] = data[2];
     },
     initWebSocket(websocket, type, select) {
       // 连接错误
@@ -272,10 +252,10 @@ computed: {
         if (type == "data0") {
           this.getData0(JSON.parse(event.data));
         } else if (type == "data1") {
-        this.getData1(JSON.parse(event.data));
+          this.getData1(JSON.parse(event.data));
         } else if (type == "data2") {
           this.getData2(JSON.parse(event.data));
-        } 
+        }
       };
       // 连接关闭的回调
       websocket.onclose = () => {
@@ -287,16 +267,13 @@ computed: {
       });
     },
   },
-
-
-
 };
 </script>
 
 <style lang="less" scoped>
 #outer {
   width: 100%;
-  height: 850px;
+  height: 900px;
   background-image: linear-gradient(
     to right,
     rgb(6, 19, 60) 0%,
@@ -322,7 +299,7 @@ computed: {
     border-color: #302b33;
     margin-left: 200px;
     margin-bottom: 20px;
-    margin-top: -25px
+    margin-top: -25px;
   }
   .container {
     display: grid;

src/views/mining/supporting/supporting.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="wrapper">
+    <div><headline title="采煤工作面支护系统"></headline></div>
    <img class="leftImg" src="@/assets/img/supportRight.png" alt="">
    <img class="rightImg" src="@/assets/img/supportLeft.png" alt="">
    <!-- <div class="leftImg"></div> -->
@@ -19,6 +20,7 @@
 <script>
 import suppEchart from "./suppEchart";
 import tuiyiEchart from "./tuiyiEchart";
+import headline from "@/common/headline"
 export default {
   name: "Supporting",
   data() {
@@ -122,13 +124,14 @@ export default {
   components: {
     suppEchart,
     tuiyiEchart,
+    headline
   },
 };
 </script>
 <style scoped>
 .wrapper {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,

src/views/monitor/configImg/configImg.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="detail">
+    <div><headline title="安全监控系统系统图"></headline></div>
     <h2>监控区域</h2>
     <el-select style="margin-top: 10px" v-model="area" @change="selectArea">
       <el-option
@@ -24,7 +25,7 @@
               水害评分
             </el-col>
             <el-col :span="20">
-              <el-progress :percentage="95"> </el-progress>
+              <el-progress :percentage="score[0]"> </el-progress>
             </el-col>
           </el-row>
           <el-row :gutter="10">
@@ -32,7 +33,7 @@
               火灾评分
             </el-col>
             <el-col :span="20">
-              <el-progress :percentage="90"> </el-progress>
+              <el-progress :percentage="score[1]"> </el-progress>
             </el-col>
           </el-row>
           <el-row :gutter="10">
@@ -40,7 +41,7 @@
               矿压灾害
             </el-col>
             <el-col :span="20">
-              <el-progress :percentage="88"> </el-progress>
+              <el-progress :percentage="score[2]"> </el-progress>
             </el-col>
           </el-row>
           <el-row :gutter="10">
@@ -48,7 +49,7 @@
               粉尘
             </el-col>
             <el-col :span="20">
-              <el-progress :percentage="90"> </el-progress>
+              <el-progress :percentage="score[3]"> </el-progress>
             </el-col>
           </el-row>
           <el-row :gutter="10">
@@ -56,7 +57,7 @@
               通风情况
             </el-col>
             <el-col :span="20">
-              <el-progress :percentage="92"> </el-progress>
+              <el-progress :percentage="score[4]"> </el-progress>
             </el-col>
           </el-row>
           <el-row :gutter="10">
@@ -64,7 +65,7 @@
               瓦斯状况
             </el-col>
             <el-col :span="20">
-              <el-progress :percentage="95"> </el-progress>
+              <el-progress :percentage="score[5]"> </el-progress>
             </el-col>
           </el-row>
         </div>
@@ -95,28 +96,37 @@ import left from "@/components/monitor/left";
 import rightTable from "@/components/monitor/rightTable";
 import rate from "@/components/monitor/rate";
 import safetyAssess from "@/views/monitor/configImg/safetyAssess";
+import headline from "@/common/headline";
 export default {
   data() {
     return {
       area: "原煤仓二次分站",
       areaOptions: [
         {
-          id: 1,
+          id: 0,
           label: "原煤仓二次分站",
         },
         {
-          id: 2,
-          label: "原煤仓三次分站",
+          id: 1,
+          label: "碟子沟通风机房",
         },
         {
-          id: 3,
-          label: "原煤仓四次分站",
+          id: 2,
+          label: "地面主平硐井口",
         },
         {
-          id: 4,
-          label: "原煤仓五次分站",
+          id: 3,
+          label: "12302回风巷",
         },
       ],
+      totalArea: [
+        "原煤仓二层分站",
+        "碟子沟通风机房",
+        "地面主平硐井口",
+        "12302回风巷",
+      ],
+      workUse: ["上仓皮带出口", "上仓皮带入口","下仓皮带出口", "下仓皮带入口"],
+      score: [80, 90, 70, 88, 96, 76],
     };
   },
   components: {
@@ -126,6 +136,7 @@ export default {
     rightTable,
     rate,
     safetyAssess,
+    headline,
   },
   methods: {
     selectArea(val) {
@@ -133,44 +144,23 @@ export default {
       let leftData = [
         {
           name: "名称",
-          value: "原煤仓三层分站",
+          value: this.totalArea[val],
         },
         {
           name: "面积",
-          value: "2500m2",
+          value: this.getRandomNum(100, 2000) + "m2",
         },
         {
           name: "人员数量",
-          value: "5",
+          value: this.getRandomNum(1, 10),
         },
         {
           name: "设备数量",
-          value: "15",
+          value: this.getRandomNum(0, 20),
         },
         {
           name: "工作用途",
-          value: "上仓皮带出口",
-        },
-      ];
-      // 区域评分对应的柱状图数据
-      let viewData = [
-        {
-          value: 10,
-          itemStyle: {
-            color: "#FF6666",
-          },
-        },
-        {
-          value: 20,
-          itemStyle: {
-            color: "#FFFF66",
-          },
-        },
-        {
-          value: 32,
-          itemStyle: {
-            color: "#99CC66",
-          },
+          value: this.workUse[val],
         },
       ];
       //最右边区域隐患表格的数据
@@ -178,33 +168,45 @@ export default {
         {
           name: "瓦斯报警",
           time: "2021-12-14 17:04:36",
-          rank:"三级",
-          result:'已处理'
+          rank: "三级",
+          result: "已处理",
         },
         {
           name: "设备过热",
           time: "2021-12-14 17:12:26",
-          rank:"三级",
-          result:'已处理'
+          rank: "三级",
+          result: "已处理",
         },
         {
           name: "烟雾报警",
           time: "2021-12-14 17:23:11",
-          rank:"三级",
-          result:'已处理'
+          rank: "三级",
+          result: "已处理",
         },
       ];
-      this.$refs.left.dataChange(leftData, viewData, 70);
+      this.$refs.left.dataChange(leftData);
       this.$refs.rightTable.dataChange(tableData);
     },
   },
+  mounted() {
+    let interval = setInterval(() => {
+      let temp = [];
+      for (let i = 0; i < 6; i++) {
+        temp.push(this.getRandomNum(70, 100));
+      }
+      this.score = temp;
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
 };
 </script>
 
 <style scoped>
 .detail {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,
@@ -251,4 +253,4 @@ export default {
   background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
-</style>
+</style>

src/views/power_supply/configImg/TablePage.vue

@@ -20,7 +20,7 @@ export default {
 <style scoped>
 .com-page {
   width: 100%;
-  height: 850px;
+  height: 900px;
   background-image: linear-gradient(
     to right,
     rgb(6, 19, 60) 0%,

src/views/power_supply/dataBoard/dataBoard.vue

@@ -23,7 +23,7 @@
       <centerLeft1></centerLeft1>
       <centerRight1></centerRight1>
     </div>
-    <el-row>
+    <el-row style="margin-top:80px">
       <div class="bottom">
         <!-- 浓度或流量曲线 -->
         <div class="bottom_left">
@@ -115,7 +115,7 @@ export default {
 }
 .main1 {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,
@@ -143,6 +143,7 @@ export default {
 }
 .top {
   display: flex;
+  margin-top: 40px;
   justify-content: space-around;
 }
 .bottom {

src/views/transportation/configImg/belt/Analysis.vue

@@ -183,7 +183,7 @@ export default {
 <style scoped>
 .main {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   /* display: flex; */
   background-image: linear-gradient(

src/views/tunnelling/zutai.vue

@@ -96,7 +96,7 @@
                     class="text"
                     style="margin-left:12px"
                   >油位</span>
-                  <tempChart2 style="margin-top:-20px"></tempChart2>
+                  <tempChart2 style="margin-top:-20px;margin-left: -20px"></tempChart2>
                 </div>
               </div>
             </el-col>

src/views/ventilate/configImg/configImg.vue

@@ -7,7 +7,7 @@
           <img src="@/assets/img/风机组态图.png" />
         </div>
       </el-header>
-      <el-main style="margin-top:-20px">
+      <el-main>
         <el-row :gutter="10">
           <el-col :span="12">
             <div class="center">
@@ -254,36 +254,47 @@ export default {
       fan1: {
         motor1: [1, 3, 3, 2, 3, 1, 1, 2, 2, 2],
         motor2: [2, 3, 3, 1, 1, 1, 2, 3, 1, 1],
-        pipeline:[2, 3, 3, 2, 3, 2, 1],
+        pipeline: [2, 3, 3, 2, 3, 2, 1],
       },
       fan2: {
         motor1: [1, 3, 3, 2, 3, 1, 1, 2, 2, 2],
         motor2: [1, 2, 2, 2, 3, 3, 3, 2, 2, 2],
-        pipeline: [1, 1, 1, 3, 1, 3, 3]
+        pipeline: [1, 1, 1, 3, 1, 3, 3],
       },
     };
   },
-  mounted(){
-    // setInterval(() => {
-    //   this.fan1.motor1.shift();
-    //   this.fan1.motor1.push(this.generate(1,3));
-    
-    //   console.log(this.fan1.motor1);
-    // }, 3000);
-
+  mounted() {
+    let interval = setInterval(() => {
+      this.fan1.motor1 = this.fan1.motor1.map((item) => {
+        return this.getRandomNum(0, 500);
+      });
+      this.fan1.motor2 = this.fan1.motor2.map((item) => {
+        return this.getRandomNum(0, 500);
+      });
+      this.fan1.pipeline = this.fan1.pipeline.map((item) => {
+        return this.getRandomNum(0, 500);
+      });
+      this.fan2.motor1 = this.fan1.motor1.map((item) => {
+        return this.getRandomNum(0, 500);
+      });
+      this.fan2.motor2 = this.fan1.motor2.map((item) => {
+        return this.getRandomNum(0, 500);
+      });
+      this.fan2.pipeline = this.fan1.pipeline.map((item) => {
+        return this.getRandomNum(0, 500);
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
-  methods: {
-    generate(min,max) {
-       return (parseInt(Math.random() * (max - min + 1) + min, 10));
-    },
-  }
 };
 </script>
 
 <style scoped>
 .main {
   width: 100%;
-  height: 850px;
+  height: 900px;
   background-image: linear-gradient(
     to right,
     rgb(6, 19, 60) 0%,
@@ -341,4 +352,4 @@ export default {
   font-size: 15px;
   color: #4adefe;
 }
-</style>
+</style>

src/views/ventilate/dataBoard/dataBoard.vue

@@ -30,24 +30,44 @@
         <el-col :span="8">
           <div class="top_center">
             <!-- 三相绕组温度（定子温度） -->
-            <threeline ref="separate" :id="89" title="三相绕组温度" unit="°C" :type="separateType" :legend="separateLegand"></threeline>
+            <threeline
+              ref="separate"
+              :id="89"
+              title="三相绕组温度"
+              unit="°C"
+              :type="separateType"
+              :legend="separateLegand"
+            ></threeline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_right">
             <!-- 轴承温度 -->
-            <twoline ref="bearing" :id="89" title="轴承温度" unit="°C" :type="bearingType" :legend="bearingLegand"></twoline>
+            <twoline
+              ref="bearing"
+              :id="89"
+              title="轴承温度"
+              unit="°C"
+              :type="bearingType"
+              :legend="bearingLegand"
+            ></twoline>
           </div>
         </el-col>
       </el-row>
-
     </div>
     <div class="center">
       <el-row :gutter="10">
         <el-col :span="8">
           <div class="center_left">
             <!-- 振动 -->
-            <twoline ref="vibrate" :id="89" title="振动" unit="um/s" :type="vibrateType" :legend="vibrateLegand"></twoline>
+            <twoline
+              ref="vibrate"
+              :id="89"
+              title="振动"
+              unit="um/s"
+              :type="vibrateType"
+              :legend="vibrateLegand"
+            ></twoline>
           </div>
         </el-col>
         <el-col :span="8">
@@ -59,11 +79,16 @@
         <el-col :span="8">
           <div class="center_right">
             <!-- 全压 -->
-            <oneline ref="pressure" :id="91" title="管道全压" unit="Mpa" type="quanya_after"></oneline>
+            <oneline
+              ref="pressure"
+              :id="91"
+              title="管道全压"
+              unit="Mpa"
+              type="quanya_after"
+            ></oneline>
           </div>
         </el-col>
       </el-row>
-
     </div>
     <div class="bottom">
       <el-row :gutter="130">
@@ -73,21 +98,19 @@
           </div>
         </el-col>
         <el-col :span="12">
-            <div class="bottom_right">
-          <running-msg></running-msg>
-           </div>
+          <div class="bottom_right">
+            <running-msg></running-msg>
+          </div>
         </el-col>
       </el-row>
-
-
     </div>
   </div>
 </template>
 
 <script>
-import oneline from '@/common/oneline'
-import twoline from '@/common/twoline'
-import threeline from '@/common/threeline'
+import oneline from "@/common/oneline";
+import twoline from "@/common/twoline";
+import threeline from "@/common/threeline";
 import volAndCurrent from "./volAndCurrent";
 import separate from "./separate";
 import bearing from "./bearing";
@@ -110,13 +133,16 @@ export default {
           label: "2号风机",
         },
       ],
-      separateType:["raozuyiwendu_after","raozuerwendu_after","raozusanwendu_after"],
-      separateLegand:["绕组1温度","绕组2温度","绕组3温度"],
-      bearingType:["qianzhouwen_after","houzhouwen_after"],
-      bearingLegand:["前轴温","后轴温"],
-      vibrateType:["shuipingzhendong_after","chuizhizhendong_after"],
-      vibrateLegand:["水平振动","垂直振动"]
-
+      separateType: [
+        "raozuyiwendu_after",
+        "raozuerwendu_after",
+        "raozusanwendu_after",
+      ],
+      separateLegand: ["绕组1温度", "绕组2温度", "绕组3温度"],
+      bearingType: ["qianzhouwen_after", "houzhouwen_after"],
+      bearingLegand: ["前轴温", "后轴温"],
+      vibrateType: ["shuipingzhendong_after", "chuizhizhendong_after"],
+      vibrateLegand: ["水平振动", "垂直振动"],
     };
   },
   methods: {
@@ -139,7 +165,7 @@ export default {
     runningMsg,
     oneline,
     twoline,
-    threeline
+    threeline,
   },
 };
 </script>
@@ -162,7 +188,7 @@ export default {
 }
 .main {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,
@@ -235,11 +261,12 @@ export default {
   /* height: 400px; */
   margin-top: -40px;
   display: flex;
-  justify-content:space-around;
+  justify-content: space-around;
 }
 .bottom_left {
   width: 500px;
   height: 210px;
+  margin-top: -10px;
   background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }

src/views/ventilate/dataBoard/runningMsg.vue

@@ -1,22 +1,10 @@
-  <template>
+<template>
   <div class="table-wrapper">
     <span class="title">运行操作</span>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      max-height="160px"
-    >
-      <el-table-column
-        prop="name"
-        label="瓦斯泵本体设备"
-        width="180"
-      >
+    <el-table :data="tableData" style="width: 100%" max-height="160px">
+      <el-table-column prop="name" label="瓦斯泵本体设备" width="180">
       </el-table-column>
-      <el-table-column
-        prop="problem"
-        label="启停"
-        width="180"
-      >
+      <el-table-column prop="problem" label="启停" width="180">
       </el-table-column>
     </el-table>
   </div>
@@ -38,12 +26,11 @@ export default {
       ],
     };
   },
-     mounted() {
+  mounted() {
     let interval = setInterval(() => {
       let temp = {
         name: Math.random() > 0.5 ? "2#风机" : "3#风机",
-        problem:
-          Math.random() > 0.5 ? "开启" : "关闭",
+        problem: Math.random() > 0.5 ? "开启" : "关闭",
       };
       this.tableData.unshift(temp);
       console.log(this.tableData);
@@ -54,12 +41,12 @@ export default {
   },
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .table-wrapper {
   // padding-top: 20px;
   // margin-left: 110px;
   height: 80%;
- 
+
   ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
     background-color: rgba(9, 12, 14, 0.2);
     color: #fff;
@@ -100,4 +87,8 @@ export default {
   font-size: 18px;
   color: #4adefe;
 }
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 </style>

src/views/ventilate/ventilate.vue

@@ -1,41 +1,23 @@
 <template>
   <div>
     <!--标签-->
-    <el-tabs
-      v-model="activeName"
-      type="card"
-      @tab-click="handleClick"
-    >
-      <el-tab-pane
-        label="系统图"
-        name="third"
-      >
-        <config-img></config-img>
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="系统图" name="third">
+        <config-img v-if="activeName == 'third'"></config-img>
       </el-tab-pane>
-      <el-tab-pane
-        label="数据看板"
-        name="fourth"
-      >
-        <data-board></data-board>
+      <el-tab-pane label="数据看板" name="fourth">
+        <data-board v-if="activeName == 'fourth'"></data-board>
       </el-tab-pane>
-      <el-tab-pane
-        label="系统数据"
-        name="first"
-      >
-        <systemData></systemData>
+      <el-tab-pane label="系统数据" name="first">
+        <systemData v-if="activeName == 'first'"></systemData>
       </el-tab-pane>
-      <el-tab-pane
-        label="数据标准"
-        name="second"
-      >
-        <dataStandard></dataStandard>
+      <el-tab-pane label="数据标准" name="second">
+        <dataStandard v-if="activeName == 'second'"></dataStandard>
       </el-tab-pane>
-
     </el-tabs>
   </div>
 </template>
 
-
 <script>
 import dataStandard from "./dataStandard";
 import systemData from "./systemData";
@@ -61,6 +43,4 @@ export default {
 };
 </script>
 
-
-<style scoped>
-</style>
+<style scoped></style>