30秒请求一次功能新增，开发优化代码等，等待后端接口

src/assets/styles/index.css

@@ -458,8 +458,13 @@ header .showTime {
     position: relative;
 }
 
-.gas-container>.timeItem {
-    width: 3.925rem;
+.gas-container .timeList {
+    max-width: 24rem;
+    text-align: left
+}
+
+.gas-container .timeItem {
+    width: 17.39%;
     display: inline-block;
     height: .9rem;
     line-height: .9rem;

src/components/topHeader.vue

@@ -20,6 +20,7 @@
     <!-- 当前时间  -->
     <time-menu></time-menu>
 
+    <!-- 电子巡检小图标 -->
     <img
       class="time-icon"
       @click="goRecordTime()"
@@ -35,22 +36,20 @@
 import TimeMenu from "@/components/TimeMenu";
 
 export default {
-  // name: "header",
+  name: "topHeader",
   components: {
     TimeMenu,
   },
-  props: {},
 
   data() {
     return {
       title: "智慧安防数据分析看板",
+      //当前路由
       routeName: this.$route.name,
-
+      //站点数据
       siteList: [],
-      flag: true,
       StationID: "",
-      isOpen: false,
-      msg: 1,
+
     };
   },
   watch: {
@@ -59,12 +58,13 @@ export default {
     },
 
     StationID(newVal, oldVal) {
-      console.log("watch时候的值");
-      console.log(newVal + ":" + oldVal);
+      // console.log("watch时候的值");
+      // console.log(newVal + ":" + oldVal);
       this.$store.commit("changeStationID", newVal);
-      console.log("放入store的值");
-      console.log(this.getStationId);
+      // console.log("放入store的值");
+      // console.log(this.getStationId);
 
+      //判断如果有站带，并且站点切换时，跳转至首页
       if (oldVal.length > 0) {
         if (this.$route.path == "/index") {
           this.$router.go(0);
@@ -76,9 +76,7 @@ export default {
     deep: true,
   },
   created() {
-   
     this.global.sendWs({ CMD: "getStationInfo" });
-
     this.StationID = this.getStationId;
   },
   mounted() {
@@ -96,34 +94,30 @@ export default {
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
-        // 初始化获取站点下拉数据
+
         if (redata.CMD == "getStationInfo") {
           this.siteList = redata.RESULT;
-
-          //页面刚初始化时  获取下拉列表的第一个值 放入store里面
-          console.log("created函数里获取store的值=====" + this.getStationId);
           if (this.getStationId.length == 0) {
             console.log("created走没有的逻辑");
+            // 初始化时，获取下拉列表的第一个值 放入store里
             this.StationID = this.siteList[0].StationID;
-            this.$store.commit("changeStationID", this.StationID);
+            this.$store.commit("changeStationID", this.StationID); 
           } else {
             console.log("created走有的逻辑");
           }
         }
-        // if (redata.CMD == "getStationDetail") {
-        //   this.homeData = redata.RESULT.LIST;
-        // }
+     
       }
     },
 
+    // 页面跳转至recordTime
     goRecordTime() {
       if (this.$route.path != "/recordTime") {
         this.$router.push("/recordTime");
-        //  this.$refs.indexChartstyle.display='none'
-        //  this.$refs.abc.style.cssText
       }
     },
 
+    //根据路由判断显示不同的标题内容
     navs() {
       switch (this.$route.name) {
         case "recordTime":

src/pages/eleFireCard/eleFireCard.vue

@@ -6,7 +6,6 @@
         <return-back></return-back>
         <h3>电气火灾监控实时信息</h3>
         <p>更新时间：2021-06-15 13:25:00</p>
-
         <div>
           <ul class="cardTabs">
             <li class="active">数据列表</li>
@@ -65,6 +64,7 @@ export default {
   data() {
     return {
       StationID: "",
+      DeviceID: "",
     };
   },
   watch: {
@@ -75,29 +75,35 @@ export default {
   created() {
     this.DeviceID = this.$route.query.DeviceID;
     this.StationID = this.$store.state.StationID;
-    this.global.sendWs({
-      CMD: "getDeviceDetail",
-      StationID: this.StationID,
-      DeviceID: this.DeviceID,
-    });
   },
   methods: {
     goEleFireData() {
       this.$router.push({
-          path: "/eleFireData",
-          query: { DeviceID: this.DeviceID },
-        });
+        path: "/eleFireData",
+        query: { DeviceID: this.DeviceID },
+      });
     },
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
 
-        // if (redata.CMD == "getStationInfo" && redata.RESULT) {
+        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
+
+          var json = {};
+          json.CMD = "getDeviceDetail";
+          json.StationID = this.StationID;
+          json.DeviceID = this.DeviceID;
+
+          this.global.sendWs(json);
 
-        // }
+          setInterval(() => {
+            console.log("每隔30秒请求一次getDeviceDetail");
+            this.global.sendWs(json);
+          }, 30000);
+
+        }
 
         if (redata.CMD == "getDeviceDetail") {
-         
           console.log("redata.RESULT");
           console.log(redata.RESULT.Device);
           this.getData = redata.RESULT.Device;

src/pages/eleFireData/components/cableTemChart.vue

@@ -1,20 +1,20 @@
 <template>
-  <div id="myChart" :style="{ width: '100%', height: ' 100% ' }" stye="z-index:1000"></div>
+  <div
+    id="myChart"
+    :style="{ width: '100%', height: ' 100% ' }"
+    stye="z-index:1000"
+  ></div>
 </template>
 <script>
 var yearData = [
   {
-    year: "2020", // 年份
     data: [
-      // 两个数组是因为有两条线
       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
     ],
   },
 ];
-// 实列化对象
-// var myChart = echarts.init(document.querySelector(".line .chart"));
 
 export default {
   name: "lineChart",
@@ -39,8 +39,8 @@ export default {
           textStyle: {
             align: "center",
             color: "#fff",
-            fontSize: '.225rem ',
-            fontWeight:'400'
+            fontSize: ".225rem ",
+            fontWeight: "400",
           },
           left: "center",
         },
@@ -51,18 +51,17 @@ export default {
         },
         // 图列组件
         legend: {
-        //   show:false,
+          //   show:false,
           itemGap: 120,
           /* 如果series对象有name值，则legend可以不用写data */
           // 修改图列组件文字颜色
           textStyle: {
             color: "#fff",
-            fontSize:'.225rem '
+            fontSize: ".225rem ",
           },
 
           bottom: "-2%",
           // left:"-30%",
-         
         },
         grid: {
           left: "1%",

src/pages/eleFireData/components/eleCurrentChart.vue

@@ -7,15 +7,12 @@
 var yearData = [
   {
     data: [
-      // 两个数组是因为有两条线
       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
     ],
   },
 ];
-// 实列化对象
-// var myChart = echarts.init(document.querySelector(".line .chart"));
 
 export default {
   name: "lineChart",

src/pages/eleFireData/components/voltageChart.vue

@@ -4,17 +4,13 @@
 <script>
 var yearData = [
   {
-    year: "2020", // 年份
     data: [
-      // 两个数组是因为有两条线
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
     ],
   },
 ];
-// 实列化对象
-// var voltageChart = echarts.init(document.querySelector(".line .chart"));
 
 export default {
   name: "lineChart",

src/pages/eleFireData/eleFireData.vue

@@ -66,7 +66,8 @@ export default {
   },
   data(){
     return{
-  
+      StationID: "",
+      DeviceID: "",
     }
   },
   watch: {
@@ -77,20 +78,28 @@ export default {
   created() {
     this.DeviceID = this.$route.query.DeviceID;
     this.StationID = this.$store.state.StationID;
-    this.global.sendWs({
-      CMD: "getDeviceDetail",
-      StationID: this.StationID,
-      DeviceID: this.DeviceID,
-    });
+
   },
   methods:{
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
 
-        // if (redata.CMD == "getStationInfo" && redata.RESULT) {
+        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
+
+          var json = {};
+          json.CMD = "getDeviceDetail";
+          json.StationID = this.StationID;
+          json.DeviceID = this.DeviceID;
 
-        // }
+          this.global.sendWs(json);
+
+          setInterval(() => {
+            console.log("每隔30秒请求一次getDeviceDetail");
+            this.global.sendWs(json);
+          }, 30000);
+
+        }
 
         if (redata.CMD == "getDeviceDetail") {
           console.log("redata.RESULT");

src/pages/gasCard/components/lineChart.vue

@@ -4,17 +4,13 @@
 <script>
 var yearData = [
   {
-    year: "2020", // 年份
     data: [
-      // 两个数组是因为有两条线
       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
       [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
       [80, 93, 90, 93, 120, 130, 130, 32, 29, 33, 50, 160],
     ],
   },
 ];
-// 实列化对象
-// var myChart = echarts.init(document.querySelector(".line .chart"));
 
 export default {
   name: "lineChart",

src/pages/gasCard/gasCard.vue

@@ -3,7 +3,6 @@
     <top-header></top-header>
     <div class="mainbox">
       <div class="gas-container">
-        <!-- <div class="return-back">返回</div> -->
         <return-back></return-back>
 
         <h3>可燃气体监控实时信息</h3>
@@ -34,18 +33,6 @@
                   <td>0.00%LEL</td>
                   <td>正常</td>
                 </tr>
-                <!-- <tr>
-                <td>一氧化碳</td>
-                <td>位置CCCCC</td>
-                <td>0.00%LEL</td>
-                <td>正常</td>
-              </tr>
-              <tr>
-                <td>一氧化碳</td>
-                <td>位置AAAAAAA</td>
-                <td>0.00%LEL</td>
-                <td>正常</td>
-              </tr> -->
               </table>
             </div>
           </div>
@@ -79,30 +66,34 @@ export default {
       this.messageHandle(val);
     },
   },
-  computed: {},
+  computed: {
+
+  },
 
   created() {
     this.DeviceID = this.$route.query.DeviceID;
     this.StationID = this.$store.state.StationID;
-
-    this.global.sendWs({
-      CMD: "getDeviceDetail",
-      StationID: this.StationID,
-      DeviceID: this.DeviceID,
-    });
   },
+  
   methods: {
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
 
-        if (redata.CMD == "getStationInfo" && redata.RESULT) {
-          // 如果有站点选项，发送请求获取站点信息页数据
-          // this.global.sendWs({
-          //   CMD: "getDeviceDetail",
-          //   StationID: this.StationID,
-          //   DeviceID: this.DeviceID,
-          // });
+        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
+
+          var json = {};
+          json.CMD = "getDeviceDetail";
+          json.StationID = this.StationID;
+          json.DeviceID = this.DeviceID;
+
+          this.global.sendWs(json);
+
+          setInterval(() => {
+            console.log("每隔30秒请求一次getDeviceDetail");
+            this.global.sendWs(json);
+          }, 30000);
+
         }
 
         if (redata.CMD == "getDeviceDetail") {

src/pages/index/index.vue

@@ -3,8 +3,6 @@
     <!-- 头部区域 -->
     <top-header></top-header>
 
-    <!-- <top-header :StationID='StationID'></top-header> -->
-
     <!-- 首页主体start -->
     <div class="mainbox">
       <div style="margin: 0rem auto; width: 15rem">
@@ -67,41 +65,43 @@ export default {
     return {
       StationID: "",
       homeData: [],
-      // test:''
     };
   },
   watch: {
     "$store.state.wsInfo"(val) {
       this.messageHandle(val);
     },
-    
-  
   },
   created() {
     // 如果有站点选项，发送请求获取站点信息页数据
     this.StationID = this.$store.state.StationID;
-     console.log( 1212121212)
-    console.log( this.StationID)
-
-  
+    console.log(1212121212);
+    console.log(this.StationID);
   },
   methods: {
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
-        if (redata.CMD == "getStationInfo"&& redata.RESULT[0].StationID) {
-           this.global.sendWs({
-            CMD: "getStationDetail",
-            StationID: this.StationID,
-          });
+        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
+          var json = {};
+          json.CMD = "getStationDetail";
+          json.StationID = this.StationID;
+
+          this.global.sendWs(json);
+
+          setInterval(() => {
+            console.log("每隔30秒请求一次getStationDetail");
+            this.global.sendWs(json);
+          }, 30000);
         }
 
         if (redata.CMD == "getStationDetail") {
-          this.homeData = redata.RESULT.LIST;   
+          this.homeData = redata.RESULT.LIST;
           console.log(this.homeData);
         }
       }
     },
+
     goInnerCard(item) {
       if (item.DeviceType == "电气火灾监测装置") {
         this.$router.push({
@@ -115,6 +115,7 @@ export default {
         });
       }
     },
+    
     goGasCard() {},
   },
 };

src/pages/inspectRecord/inspectRecord.vue

@@ -115,25 +115,30 @@ export default {
   created() {
     this.StationID = this.$store.state.StationID;
     this.Time = this.$route.query.Time;
-
-    this.global.sendWs({
-      CMD: "getPatrolDetail",
-      StationID: this.StationID,
-      Time: this.Time,
-    });
   },
   methods: {
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
         // 初始化获取站点下拉数据
-        if (redata.CMD == "getStationInfo" && redata.RESULT) {
-          // 如果有站点选项，发送请求获取站点信息页数据
+        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
+
+          var json = {};
+          json.CMD = "getPatrolDetail";
+          json.StationID = this.StationID;
+          json.Time = this.Time;
+
+          this.global.sendWs(json);
+
+          setInterval(() => {
+            console.log("每隔30秒请求一次getDeviceDetail");
+            this.global.sendWs(json);
+          }, 30000);
+
         }
         if (redata.CMD == "getPatrolDetail") {
           this.recordData = redata.RESULT.LIST;
-          console.log("this.recordData111");
-          console.log(this.recordData);
+          // console.log(this.recordData);
           this.recordDetailData = this.recordData;
         }
       }

src/pages/recordTime/recordTime.vue

@@ -4,16 +4,20 @@
     <div class="mainbox">
       <div class="gas-container">
         <return-back></return-back>
-        <div
-          class="timeItem"
-          v-for="(item, index) in recordData.slice(
-            (currentPage - 1) * Count,
-            currentPage * Count
-          )"
-          :key="index"
-          @click="goInspectDetail(item)"
-        >
-          {{ item.Time }}
+        <!-- <div style="max-width:1920px"> -->
+        <div class="timeList">
+          <div
+            class="timeItem"
+            v-for="(item, index) in recordData.slice(
+              (currentPage - 1) * Count,
+              currentPage * Count
+            )"
+            :key="index"
+            @click="goInspectDetail(item)"
+          >
+            {{ item.Time }}
+            <!-- </div> -->
+          </div>
         </div>
 
         <div
@@ -64,16 +68,14 @@ export default {
       Count: 5,
     };
   },
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val);
+    },
+  },
 
   created() {
     this.StationID = this.$store.state.StationID;
-    this.global.sendWs({
-      CMD: "getPatrolRecord",
-      StationID: this.StationID,
-      Start: 0,
-      Limit: 2,
-      Order: "DESC",
-    });
 
     (this.recordData = [
       {
@@ -122,11 +124,6 @@ export default {
       // 将数据的长度赋值给TotalCount
       (this.TotalCount = this.recordData.length);
   },
-  watch: {
-    // "$store.state.wsInfo"(val) {
-    //   this.messageHandle(val);
-    // },
-  },
 
   mounted() {
     document.getElementsByClassName(
@@ -135,10 +132,23 @@ export default {
   },
   methods: {
     messageHandle(e) {
-      // alert(1);
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
         // 初始化获取站点下拉数据
+        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
+          var json = {};
+
+          json.CMD = "getPatrolRecord";
+          json.StationID = this.StationID;
+          (json.Start = 0), (json.Limit = 2), (json.Order = "DESC");
+
+          this.global.sendWs(json);
+
+          setInterval(() => {
+            console.log("每隔30秒请求一次getPatrolRecord");
+            this.global.sendWs(json);
+          }, 30000);
+        }
 
         if (redata.CMD == "getPatrolRecord") {
           this.recordData = redata.RESULT.LIST;