websocket渲染

src/components/topHeader.vue

@@ -32,17 +32,21 @@
 
 <script>
 import TimeMenu from "@/components/TimeMenu";
+
 export default {
   // name: "header",
   components: {
     TimeMenu,
   },
+  props: {
+      // StationID: String,
+    },
+  
   data() {
     return {
       title: "智慧安防数据分析看板",
 
       siteList: [],
-      // homeData: [],
       flag: true,
       StationID: "",
       isOpen: false,

src/pages/eleFireData/eleFireData.vue

@@ -4,7 +4,7 @@
     <div class="mainbox">
       <div class="gas-container">
       <return-back></return-back>
-      <h3>电气火灾监控实时信息</h3>
+      <h3>电气火灾监控实时信息 </h3>
       <p>更新时间：2021-06-15 13:25:00</p>
 
       <div>

src/pages/gasCard/gasCard.vue

@@ -3,38 +3,38 @@
     <top-header></top-header>
     <div class="mainbox">
       <div class="gas-container">
-      <!-- <div class="return-back">返回</div> -->
-              <return-back></return-back>
+        <!-- <div class="return-back">返回</div> -->
+        <return-back></return-back>
 
-      <h3>可燃气体监控实时信息</h3>
-      <p>更新时间：2021-06-15 13:25:00</p>
+        <h3>可燃气体监控实时信息</h3>
+        <p>更新时间：2021-06-15 13:25:00</p>
 
-      <div>
-        <ul class="cardTabs">
-          <li  @click="Inv=0" :class="{'active':Inv===0}">数据列表</li>
-          <li @click="Inv=1" :class="{'active':Inv===1}">数据可视化</li>
-        </ul>
+        <div>
+          <ul class="cardTabs">
+            <li @click="Inv = 0" :class="{ active: Inv === 0 }">数据列表</li>
+            <li @click="Inv = 1" :class="{ active: Inv === 1 }">数据可视化</li>
+          </ul>
 
-        <div class="tabBox">
-          <div>
-            <div v-if="Inv == 1" class="lineChart gas-data">
-             <line-chart></line-chart>
-            </div>
+          <div class="tabBox">
+            <div>
+              <div v-if="Inv == 1" class="lineChart gas-data">
+                <line-chart></line-chart>
+              </div>
 
-             <table v-if="Inv == 0" >
-              <tr>
-                <th>名称qq</th>
-                <th>设备位置</th>
-                <th>浓度</th>
-                <th>告警状态</th>
-              </tr>
-              <tr>
-                <td>一氧化碳</td>
-                <td>位置BBBBBB</td>
-                <td>0.00%LEL</td>
-                <td>正常</td>
-              </tr>
-              <!-- <tr>
+              <table v-if="Inv == 0">
+                <tr>
+                  <th>名称</th>
+                  <th>设备位置</th>
+                  <th>浓度</th>
+                  <th>告警状态</th>
+                </tr>
+                <tr>
+                  <td>{{getData.DeviceType}}</td>
+                  <td>位置BBBBBB</td>
+                  <td>0.00%LEL</td>
+                  <td>正常</td>
+                </tr>
+                <!-- <tr>
                 <td>一氧化碳</td>
                 <td>位置CCCCC</td>
                 <td>0.00%LEL</td>
@@ -46,13 +46,12 @@
                 <td>0.00%LEL</td>
                 <td>正常</td>
               </tr> -->
-            </table>
+              </table>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    </div>
-    
   </div>
 </template>
 
@@ -63,17 +62,53 @@ import returnBack from "@/components/returnBack";
 export default {
   name: "index",
   components: {
-    topHeader,returnBack,lineChart
+    topHeader,
+    returnBack,
+    lineChart,
   },
-  data(){
-    return{
+  data() {
+    return {
       Inv: 0,
-    }
-  }
+      DeviceID:'',
+      getData:{}
+    };
+  },
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val);
+    },
+  },
+
+  created() {
+    this.DeviceID = this.$route.query.DeviceID;
+    console.log("DeviceID");
+    console.log(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: "7c9c30af-6132-43d1-98fb-020395183094",
+            DeviceID:  this.DeviceID,
+          });
+        }
+        if (redata.CMD == "getDeviceDetail") {
+     console.log('redata.RESULT')
+          console.log(redata.RESULT.Device)
+          this.getData = redata.RESULT.Device;
+
+        
+        }
+      }
+    },
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>

src/pages/index/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <!-- 头部区域 -->
-    <top-header></top-header>
+        <top-header></top-header>
+
+    <!-- <top-header :StationID='StationID'></top-header> -->
 
     <!-- 首页主体start -->
     <div class="mainbox">
@@ -37,60 +39,7 @@
             </div>
           </div>
         </div>
-        <div class="column">
-          <div class="panel" @click="goInnerCard">
-            <div>
-              <img src="@/assets/images/panel-icon.png" alt="" />
-              <p>状态：<span>正常</span></p>
-              <p class="light-color">电气火灾</p>
-              <p class="light-color">电缆温度：51℃</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="column">
-          <div class="panel fault" @click="goInnerCard">
-            <div>
-              <img src="@/assets/images/panel-icon.png" alt="" />
-              <p>状态：<span>故障</span></p>
-              <p class="light-color">电气火灾</p>
-              <p class="light-color">电缆温度：51℃</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="column">
-          <div class="panel normal" @click="goGasCard">
-            <div>
-              <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>
-              <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>
-              <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>
     </div>
   </div>
@@ -105,6 +54,7 @@ export default {
   },
   data() {
     return {
+       StationID: "",
       homeData: [],
     };
   },
@@ -119,8 +69,11 @@ export default {
       if (e.data.search("{") != -1) {
    
         const redata = JSON.parse(e.data);
-        // 初始化获取站点下拉数据
+        // this.StationID = redata.RESULT[0].StationID;
+        
         if (redata.CMD == "getStationInfo" && redata.RESULT) {
+          
+
           // 如果有站点选项，发送请求获取站点信息页数据
           this.global.sendWs({
             CMD: "getStationDetail",
@@ -137,9 +90,9 @@ export default {
     },
     goInnerCard(item) {
       if (item.DeviceType == "电气火灾监测装置") {
-        this.$router.push("/eleFireCard?DeviceID="+item.DeviceID);
+        this.$router.push({path: '/eleFireCard', query: {DeviceID: item.DeviceID}});
       } else {
-         this.$router.push("/gasCard?DeviceID="+item.DeviceID);
+        this.$router.push({path: '/gasCard?', query: {DeviceID: item.DeviceID}});
       }
     },
     goGasCard() {

src/router/index.js

@@ -53,6 +53,9 @@ const router = new VueRouter({
     linkActiveClass: 'active'
 })
 
+
+
+
 // 3.将router对象传入到Vue实例
 router.beforeEach((to, from, next) => {
     /* 路由发生变化修改页面title */
@@ -63,4 +66,7 @@ router.beforeEach((to, from, next) => {
 })
 
 
+
+
+
 export default router