完善对接,站点共享,分页模拟等

src/App.vue

@@ -18,24 +18,47 @@ export default {
   created() {
     //初始化方法
     this.localSocket();
+
+
+
+    
+
+    //在页面加载时读取sessionStorage里的状态信息
+    if (sessionStorage.getItem("store")) {
+      this.$store.replaceState(
+        Object.assign(
+          {},
+          this.$store.state,
+          JSON.parse(sessionStorage.getItem("store"))
+        )
+      );
+    }
+    //在页面刷新时将vuex里的信息保存到sessionStorage里
+    window.addEventListener("beforeunload", () => {
+      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
+    });
+
+
+
+
+
   },
   methods: {
-
     localSocket() {
       let that = this;
       if ("WebSocket" in window) {
         // console.log("您的浏览器支持 WebSocket!");
         // location.host
-        that.global.ws = new WebSocket("ws://172.16.120.210:6001");
+        // that.global.ws = new WebSocket("ws://172.16.120.210:6001");
+        that.global.ws = new WebSocket("ws://121.199.52.195:6001");
         that.global.setWs(that.global.ws);
         that.global.ws.onopen = function () {
           console.log("websocket连接成功");
         };
 
-
-        that.global.ws.onmessage =  (res)=> {
-          this.$store.commit('wsInfoMiT',res)
-          this.$store.commit('pusTimer',30)
+        that.global.ws.onmessage = (res) => {
+          this.$store.commit("wsInfoMiT", res);
+          this.$store.commit("pusTimer", 30);
         };
 
         that.global.ws.onclose = function () {
@@ -58,12 +81,11 @@ export default {
           1
         );
       }
-      console.log(that.global.ws)
+      console.log(that.global.ws);
     },
   },
 };
 </script>
 
 <style>
-
 </style>

src/assets/js/global.js

@@ -11,7 +11,7 @@ export default {
         } else {
             setTimeout(() => {
                 this.sendWs(val)
-            }, 1000)
+            }, 1)
         }
     }
 }

src/assets/styles/index.css

@@ -24,6 +24,10 @@ body {
     /* min-height: 600px; */
 }
 
+.noPointer {
+    cursor: not-allowed!important;
+}
+
 
 /* @font-face {
     font-family: electronicFont;

src/components/topHeader.vue

@@ -14,8 +14,6 @@
           {{ item.StationName }}
         </option>
         <option value="ss">ss</option>
-        <!-- <option value="">站点一</option>
-        <option value="">站点一</option> -->
       </select>
     </div>
 
@@ -28,6 +26,7 @@
       src="@/assets/images/time-icon.png"
       alt=""
       ref="indexChart"
+      :class="{ noPointer: routeName === 'recordTime' }"
     />
   </header>
 </template>
@@ -40,13 +39,12 @@ export default {
   components: {
     TimeMenu,
   },
-  props: {
-    // StationID: String,
-  },
+  props: {},
 
   data() {
     return {
       title: "智慧安防数据分析看板",
+      routeName: this.$route.name,
 
       siteList: [],
       flag: true,
@@ -59,21 +57,26 @@ export default {
     "$store.state.wsInfo"(val) {
       this.messageHandle(val);
     },
-    StationID(val) {
-      console.log("watch时候的值");
-      console.log(val);
-
-      //监听testStationId是否发生了变化
-      // console.log('监听testStationId是否发生了变化');
-      this.$store.commit("changeStationID", val);
 
+    StationID(newVal, oldVal) {
+      console.log("watch时候的值");
+      console.log(newVal + ":" + oldVal);
+      this.$store.commit("changeStationID", newVal);
       console.log("放入store的值");
       console.log(this.getStationId);
 
-      // this.$router.push({path: '/index'});
+      if (oldVal.length > 0) {
+        if (this.$route.path == "/index") {
+          this.$router.go(0);
+        } else {
+          this.$router.push("/index");
+        }
+      }
     },
+    deep: true,
   },
   created() {
+   
     this.global.sendWs({ CMD: "getStationInfo" });
 
     this.StationID = this.getStationId;
@@ -99,11 +102,10 @@ export default {
 
           //页面刚初始化时  获取下拉列表的第一个值 放入store里面
           console.log("created函数里获取store的值=====" + this.getStationId);
-
-          if (!this.getStationId) {
+          if (this.getStationId.length == 0) {
             console.log("created走没有的逻辑");
             this.StationID = this.siteList[0].StationID;
-            this.$store.commit("changeStationID", this.StationId);
+            this.$store.commit("changeStationID", this.StationID);
           } else {
             console.log("created走有的逻辑");
           }
@@ -117,11 +119,11 @@ export default {
     goRecordTime() {
       if (this.$route.path != "/recordTime") {
         this.$router.push("/recordTime");
-      //  this.$refs.indexChartstyle.display='none'
-      //  this.$refs.abc.style.cssText
-
+        //  this.$refs.indexChartstyle.display='none'
+        //  this.$refs.abc.style.cssText
       }
     },
+
     navs() {
       switch (this.$route.name) {
         case "recordTime":

src/pages/index/index.vue

@@ -67,28 +67,37 @@ export default {
     return {
       StationID: "",
       homeData: [],
+      // test:''
     };
   },
   watch: {
     "$store.state.wsInfo"(val) {
       this.messageHandle(val);
     },
+    
+  
   },
   created() {
     // 如果有站点选项，发送请求获取站点信息页数据
     this.StationID = this.$store.state.StationID;
-    this.global.sendWs({
-      CMD: "getStationDetail",
-      StationID: 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 == "getStationDetail") {
-          this.homeData = redata.RESULT.LIST;
+          this.homeData = redata.RESULT.LIST;   
           console.log(this.homeData);
         }
       }

src/pages/recordTime/recordTime.vue

@@ -6,47 +6,15 @@
         <return-back></return-back>
         <div
           class="timeItem"
-          v-for="(item, index) in recordData"
+          v-for="(item, index) in recordData.slice(
+            (currentPage - 1) * Count,
+            currentPage * Count
+          )"
           :key="index"
           @click="goInspectDetail(item)"
         >
           {{ item.Time }}
         </div>
-        <!-- <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div> -->
 
         <div
           style="
@@ -60,8 +28,11 @@
           <el-pagination
             background
             @size-change="handleSizeChange"
-            layout="prev, pager, next,jumper"
-            :total="1000"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="Count"
+            layout=" prev, pager, next, jumper"
+            :total="TotalCount"
           >
           </el-pagination>
         </div>
@@ -81,14 +52,16 @@ export default {
   },
   data() {
     return {
-      currentPage1: 5,
-      currentPage2: 5,
-      currentPage3: 5,
-      currentPage4: 4,
-
       StationID: "",
 
+      // 总数据
       recordData: [],
+      // 默认显示第几页
+      currentPage: 1,
+      // 总条数，根据接口获取数据长度(注意：这里不能为空)
+      TotalCount: 1,
+      // 默认每页显示的条数（可修改）
+      Count: 5,
     };
   },
 
@@ -101,12 +74,58 @@ export default {
       Limit: 2,
       Order: "DESC",
     });
-    // alert(this.$route.path)
+
+    (this.recordData = [
+      {
+        Time: "2021-06-15 13:01:14",
+      },
+      {
+        Time: "2021-06-15 13:01:09",
+      },
+      {
+        Time: "2021-06-15 13:01:04",
+      },
+      {
+        Time: "2021-06-15 13:00:59",
+      },
+      {
+        Time: "2021-06-15 13:00:54",
+      },
+      {
+        Time: "2021-06-15 15:01:14",
+      },
+      {
+        Time: "2021-06-15 16:01:09",
+      },
+      {
+        Time: "2021-06-15 17:01:04",
+      },
+      {
+        Time: "2021-06-15 18:00:59",
+      },
+      {
+        Time: "2021-06-15 19:00:54",
+      },
+      {
+        Time: "2021-06-15 13:00:59",
+      },
+      {
+        Time: "2021-06-15 13:00:54",
+      },
+      {
+        Time: "2021-06-15 15:01:14",
+      },
+      {
+        Time: "2021-06-15 16:01:09",
+      },
+    ]),
+      // 将数据的长度赋值给TotalCount
+      (this.TotalCount = this.recordData.length);
   },
   watch: {
-    "$store.state.wsInfo"(val) {
-      this.messageHandle(val);
-    },
+    // "$store.state.wsInfo"(val) {
+    //   this.messageHandle(val);
+    // },
   },
 
   mounted() {
@@ -135,11 +154,19 @@ export default {
         query: { Time: item.Time },
       });
     },
+
+    // 分页
+    // 每页显示的条数
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+      // 改变每页显示的条数
+      this.Count = val;
+      // 注意：在改变每页显示的条数时，要将页码显示到第一页
+      this.currentPage = 1;
     },
+    // 显示第几页
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+      // 改变默认的页数
+      this.currentPage = val;
     },
   },
 };

src/pages/test/pagination.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="app">
+    <!-- 将获取到的数据进行计算 -->
+    <div
+      class="timeItem"
+      v-for="(item, index) in recordData.slice(
+        (currentPage - 1) * Count,
+        currentPage * Count
+      )"
+      :key="index"
+      style="color: #fff"
+    >
+      {{ item.Time }}
+    </div>
+
+    <div class="tabListPage">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="Count"
+        layout=" prev, pager, next, jumper"
+        :total="TotalCount"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      // 总数据
+      recordData: [],
+      // 默认显示第几页
+      currentPage: 1,
+      // 总条数，根据接口获取数据长度(注意：这里不能为空)
+      TotalCount: 1,
+      // 默认每页显示的条数（可修改）
+      Count: 1,
+    };
+  },
+  methods: {
+    // 分页
+    // 每页显示的条数
+    handleSizeChange(val) {
+      // 改变每页显示的条数
+      this.Count = val;
+      // 注意：在改变每页显示的条数时，要将页码显示到第一页
+      this.currentPage = 1;
+    },
+    // 显示第几页
+    handleCurrentChange(val) {
+      // 改变默认的页数
+      this.currentPage = val;
+    },
+  },
+  created: function () {
+    (this.recordData =  [{
+            "Time": "2021-06-15 13:01:14"
+        },{
+            "Time": "2021-06-15 13:01:09"
+        },{
+            "Time": "2021-06-15 13:01:04"
+        },{
+            "Time": "2021-06-15 13:00:59"
+        },{
+            "Time": "2021-06-15 13:00:54"
+        }]),
+      // 将数据的长度赋值给TotalCount
+      (this.TotalCount = this.recordData.length);
+  },
+};
+</script>

src/router/index.js

@@ -8,6 +8,7 @@ import eleFireCard from '../pages/eleFireCard/eleFireCard'
 import eleFireData from '../pages/eleFireData/eleFireData'
 import inspectRecord from '../pages/inspectRecord/inspectRecord'
 import recordTime from '../pages/recordTime/recordTime'
+import pagination from '../pages/test/pagination'
 
 
 
@@ -47,6 +48,11 @@ const routes = [{
         name: 'recordTime',
         component: recordTime,
         meta: { title: '在线自动巡检记录' },
+    }, {
+        path: '/pagination',
+        name: 'pagination',
+        component: pagination,
+        meta: { title: '分页测试' },
     }
 ]
 const router = new VueRouter({