websocket全局，并且渲染首页

package-lock.json

@@ -11186,6 +11186,11 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz?cache=0&sync_timestamp=1623945192157&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuex%2Fdownload%2Fvuex-3.6.2.tgz",
+      "integrity": "sha1-I2vAhqhww655lG8QfxbeWdWJXnE="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz",

package.json

@@ -12,7 +12,8 @@
     "echarts": "^4.8.0",
     "element-ui": "^2.15.2",
     "vue": "^2.6.11",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-
-    <router-view/>
+    <router-view />
     <!-- <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/> -->
   </div>
@@ -11,20 +10,59 @@
 // import HelloWorld from './components/HelloWorld.vue'
 
 export default {
-  name: 'App',
+  name: "App",
   // components: {
   //   HelloWorld
   // }
-}
+
+  created() {
+    //初始化方法
+    this.localSocket();
+  },
+  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.setWs(that.global.ws);
+        that.global.ws.onopen = function () {
+          console.log("websocket连接成功");
+        };
+
+
+        that.global.ws.onmessage =  (res)=> {
+          this.$store.commit('wsInfoMiT',res)
+        };
+
+        that.global.ws.onclose = function () {
+          // 关闭 websocket
+          console.log("连接已关闭...");
+
+          //断线重新连接
+          setTimeout(() => {
+            that.localSocket();
+          }, 2000);
+        };
+      } else {
+        // 浏览器不支持 WebSocket
+        console.log("您的浏览器不支持 WebSocket!");
+        this.openNotificationWithIcon(
+          "error",
+          "浏览器",
+          "您的浏览器不支持显示消息请更换",
+          1,
+          1
+        );
+      }
+      console.log(that.global.ws)
+    },
+  },
+};
 </script>
 
 <style>
-#app {
-  /* font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50; */
-  /* margin-top: 60px; */
-}
+
 </style>

src/assets/js/global.js

@@ -0,0 +1,17 @@
+// global.js 文件
+export default {
+    ws: {},
+    setWs: function(newWs) {
+        this.ws = newWs
+    },
+    sendWs: function(val) {
+        if (!val) return
+        if (this.ws && this.ws.readyState == 1) {
+            this.ws.send(JSON.stringify(val));
+        } else {
+            setTimeout(() => {
+                this.sendWs(val)
+            }, 1000)
+        }
+    }
+}

src/assets/styles/index.css

@@ -197,7 +197,7 @@ header .showTime {
 .filterSec option {
     border: 1px solid #2399ed;
     border-radius: 7px;
-    width: 3.375rem;
+    min-width: 3.375rem;
     font-size: 0.2rem;
     height: 0.45rem;
     color: #2399ed;

src/components/topHeader.vue

@@ -5,7 +5,7 @@
     <!-- 下拉筛选 -->
     <div class="filterSec">
       <span>站点：</span>
-      <select name="" id="">
+      <select name="" id="" v-model="StationID">
         <option
           :value="item.StationID"
           v-for="item in siteList"
@@ -42,84 +42,53 @@ export default {
       title: "智慧安防数据分析看板",
 
       siteList: [],
-      homeData: [],
+      // homeData: [],
       flag: true,
-      // websocket,
+      StationID: "",
+      isOpen: false,
+      msg: 1,
     };
   },
-  mounted() {
-    // this.navs();
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val)
+    },
   },
-  computed: {},
-
   created() {
-    this.initWebSocket();
+    this.global.sendWs( { CMD: "getStationInfo" });
   },
-  onload() {},
-  destroyed() {
-    this.websock.close(); //离开路由之后断开websocket连接
+  mounted() {
+    this.navs();
   },
+  computed: {},
 
-  methods: {
-    goRecordTime() {
-      this.$router.push("/recordTime");
-    },
-    initWebSocket() {
-      //初始化weosocket
-      const wsuri = "ws://172.16.120.210:6001";
-      this.websock = new WebSocket(wsuri);
-      this.websock.onmessage = this.websocketonmessage;
-      this.websock.onopen = this.websocketonopen;
-      this.websock.onerror = this.websocketonerror;
-      this.websock.onclose = this.websocketclose;
-    },
-    websocketonopen() {
-      //连接建立之后执行send方法发送数据
-      let actions = { CMD: "getStationInfo" };
-      this.websocketsend(JSON.stringify(actions));
-    },
-    websocketonerror() {
-      //连接建立失败重连
-      this.initWebSocket();
-    },
-    websocketonmessage(e) {
-      //数据接收
-      if (e.data.search("{") != -1) {
-        const redata = JSON.parse(e.data);
-        console.log(redata);
 
-        // 初始化获取站点下拉数据
-        if (redata.CMD == "getStationInfo") {
-          this.siteList = redata.RESULT;
-          // console.log(this.siteList)
-        }
+  onload() {},
+  destroyed() {},
 
-        // 如果有站点选项，发送请求获取站点信息页数据
-        if (this.flag) {
-          if (this.siteList[0].StationID) {
-            this.websocketsend(
-              JSON.stringify({
-                CMD: "getStationDetail",
-                StationID: "7c9c30af-6132-43d1-98fb-020395183094",
-              })
-            );
-            this.flag = false;
+  methods: {
+    messageHandle(e) {
+        if (e.data.search("{") != -1) {
+          const redata = JSON.parse(e.data);
+          // 初始化获取站点下拉数据
+          if (redata.CMD == "getStationInfo") {
+            this.siteList = redata.RESULT;
+            this.StationID = this.siteList[0].StationID;
+          }
+          if (redata.CMD == "getStationDetail") {
+            this.homeData = redata.RESULT.LIST;
           }
         }
-        if (redata.CMD == "getStationDetail") {
-          this.homeData = redata.RESULT.LIST;
-          console.log(this.homeData);
-        }
-      }
-    },
-    websocketsend(Data) {
-      //数据发送
-      this.websock.send(Data);
     },
 
-    websocketclose(e) {
-      //关闭
-      console.log("断开连接", e);
+    goRecordTime() {
+      this.$router.push("/recordTime");
+    },
+    navs() {
+      switch (this.$route.name) {
+        case "recordTime":
+          return [(this.title = "电子巡检记录列表")];
+      }
     },
   },
 };

src/main.js

@@ -3,13 +3,19 @@ import App from './App.vue'
 // 引入路由文件
 import router from './router/index'
 
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-Vue.use(ElementUI)
+//引入store
+import store from './store'
+
+
 
 
 
 // 引入样式
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
 import './assets/styles/index.css'
 
 //引入rem字体配置
@@ -17,12 +23,16 @@ import '@/assets/js/flexible.js';
 
 //引入
 import echarts from 'echarts'
-
 Vue.prototype.$echarts = echarts
 
+//引入公共文件 （websocket）
+import global from '@/assets/js/global.js'
+Vue.prototype.global = global
+
 Vue.config.productionTip = false
 
 new Vue({
     router,
+    store,
     render: h => h(App),
 }).$mount('#app')

src/pages/index/index.vue

@@ -5,10 +5,30 @@
 
     <!-- 首页主体start -->
     <div class="mainbox">
-      <div style=" margin: 0rem auto; width: 15rem">
+      <div style="margin: 0rem auto; width: 15rem">
+        <div class="column" v-for="item in homeData" :key="item.StationID">
+          <div
+            class="panel"
+            @click="goInnerCard(item)"
+            :class="{
+              alarm: Number(item.status) === 1,
+              fault: Number(item.status) === 2,
+            }"
+          >
+            <div>
+              <!-- <img src="@/assets/images/panel-icon.png" alt="" /> -->
+              <p>
+                状态：<span>{{ item.DeviceStatusNote }}</span>
+              </p>
+              <p class="light-color">{{ item.DeviceType }}</p>
+              <p v-if="item.DeviceType=='电气火灾监测装置'" class="light-color">  {{item.KeyPoints[0].PointName}}:  {{item.KeyPoints[0].ValueList[0].Value==0?'正常':'告警'}}</p>
+              <p v-else class="light-color">  {{item.KeyPoints[0].PointName}}:  {{item.KeyPoints[0].ValueList[0].Value}}</p>
+            </div>
+          </div>
+        </div>
 
-        <div class="column">
-          <div class="panel alarm" @click="goEleFireCard">
+        <!-- <div class="column">
+          <div class="panel alarm" @click="goInnerCard">
             <div>
               <img src="@/assets/images/panel-icon.png" alt="" />
               <p>状态：<span>告警</span></p>
@@ -17,32 +37,30 @@
             </div>
           </div>
         </div>
-
-        <div  class="column">
-           <div class="panel normal" @click="goGasCard">
+        <div class="column">
+          <div class="panel" @click="goInnerCard">
             <div>
-              <img src="@/assets/images/gas-icon.png" alt="" />
+              <img src="@/assets/images/panel-icon.png" alt="" />
               <p>状态：<span>正常</span></p>
-              <p class="light-color">可燃气体</p>
-              <p class="light-color">一氧化碳浓度：120ppm</p>
+              <p class="light-color">电气火灾</p>
+              <p class="light-color">电缆温度：51℃</p>
             </div>
           </div>
         </div>
 
         <div class="column">
-          <div class="panel" @click="goEleFireCard">
+          <div class="panel fault" @click="goInnerCard">
             <div>
               <img src="@/assets/images/panel-icon.png" alt="" />
-              <p>状态：<span>正常</span></p>
+              <p>状态：<span>故障</span></p>
               <p class="light-color">电气火灾</p>
               <p class="light-color">电缆温度：51℃</p>
             </div>
           </div>
-         
         </div>
 
         <div class="column">
-           <div class="panel" @click="goGasCard">
+          <div class="panel normal" @click="goGasCard">
             <div>
               <img src="@/assets/images/gas-icon.png" alt="" />
               <p>状态：<span>正常</span></p>
@@ -50,20 +68,21 @@
               <p class="light-color">一氧化碳浓度：120ppm</p>
             </div>
           </div>
-
         </div>
+
         <div class="column">
-          <div class="panel fault" @click="goEleFireCard">
+          <div class="panel" @click="goGasCard">
             <div>
-              <img src="@/assets/images/panel-icon.png" alt="" />
-              <p>状态：<span>故障</span></p>
-              <p class="light-color">电气火灾</p>
-              <p class="light-color">电缆温度：51℃</p>
+              <img src="@/assets/images/gas-icon.png" alt="" />
+              <p>状态：<span>正常</span></p>
+              <p class="light-color">可燃气体</p>
+              <p class="light-color">一氧化碳浓度：120ppm</p>
             </div>
           </div>
         </div>
+
         <div class="column">
-           <div class="panel" @click="goGasCard">
+          <div class="panel" @click="goGasCard">
             <div>
               <img src="@/assets/images/gas-icon.png" alt="" />
               <p>状态：<span>正常</span></p>
@@ -71,7 +90,7 @@
               <p class="light-color">一氧化碳浓度：120ppm</p>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -84,12 +103,47 @@ export default {
   components: {
     topHeader,
   },
+  data() {
+    return {
+      homeData: [],
+    };
+  },
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val);
+    },
+  },
+  created() {},
   methods: {
-    goEleFireCard() {
-      this.$router.push("/eleFireCard");
+    messageHandle(e) {
+      if (e.data.search("{") != -1) {
+   
+        const redata = JSON.parse(e.data);
+        // 初始化获取站点下拉数据
+        if (redata.CMD == "getStationInfo" && redata.RESULT) {
+          // 如果有站点选项，发送请求获取站点信息页数据
+          this.global.sendWs({
+            CMD: "getStationDetail",
+            StationID: "7c9c30af-6132-43d1-98fb-020395183094",
+          });
+        }
+        if (redata.CMD == "getStationDetail") {
+          this.homeData = redata.RESULT.LIST;
+          // console.log('redata')
+          // console.log(redata)
+          console.log(this.homeData);
+        }
+      }
+    },
+    goInnerCard(item) {
+      if (item.DeviceType == "电气火灾监测装置") {
+        this.$router.push("/eleFireCard?DeviceID="+item.DeviceID);
+      } else {
+         this.$router.push("/gasCard?DeviceID="+item.DeviceID);
+      }
     },
     goGasCard() {
-      this.$router.push("/gasCard");
+     
     },
   },
 };

src/pages/recordTime/recordTime.vue

@@ -4,6 +4,8 @@
     <div class="mainbox">
       <div class="gas-container">
         <return-back></return-back>
+        <div class="timeItem" v-for="(item,index) in recordData" :key="index"  @click="goInspectDetail()">{{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>
@@ -37,19 +39,25 @@
         <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="position:fixed;bottom: .3rem;text-align:center;display:block;width:100%">
-          <el-pagination
-          background
-          @size-change="handleSizeChange"
-          layout="prev, pager, next,jumper"
-          :total="1000"
+        <div
+          style="
+            position: fixed;
+            bottom: 0.3rem;
+            text-align: center;
+            display: block;
+            width: 100%;
+          "
         >
-        </el-pagination>
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            layout="prev, pager, next,jumper"
+            :total="1000"
+          >
+          </el-pagination>
         </div>
-        
       </div>
     </div>
   </div>
@@ -70,14 +78,46 @@ export default {
       currentPage2: 5,
       currentPage3: 5,
       currentPage4: 4,
+
+
+      recordData:[]
     };
   },
+
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val);
+    },
+  },
+
   mounted() {
     document.getElementsByClassName(
       "el-pagination__jump"
     )[0].childNodes[0].nodeValue = "跳转到: ";
   },
   methods: {
+    messageHandle(e) {
+      if (e.data.search("{") != -1) {
+        const redata = JSON.parse(e.data);
+        // 初始化获取站点下拉数据
+        if (redata.CMD == "getStationInfo" && redata.RESULT) {
+          // 如果有站点选项，发送请求获取站点信息页数据
+          this.global.sendWs({
+            CMD: "getPatrolRecord",
+            StationID: "7c9c30af-6132-43d1-98fb-020395183094",
+            Start: 0,
+            Limit: 30,
+            Order: "DESC",
+          });
+        }
+        if (redata.CMD == "getPatrolRecord") {
+          this.recordData = redata.RESULT.LIST;
+          console.log('this.recordData');
+          console.log(this.recordData);
+        }
+      }
+    },
+
     goInspectDetail() {
       this.$router.push("/inspectRecord");
     },

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        wsInfo: null
+    },
+    mutations: {
+        wsInfoMiT(state, val) {
+            state.wsInfo = val
+        }
+    }
+})