websocket请求及数据共享完善 大屏适配完善

src/assets/styles/index.css

@@ -85,7 +85,7 @@ header .showTime {
 .mainbox {
     display: flex;
     min-width: 1024px;
-    max-width: 1920px;
+    /* max-width: 1920px; */
     margin: 0 auto;
     padding-bottom: 20px;
     /* padding: 1.25rem 4.375rem 0; */
@@ -396,7 +396,7 @@ header .showTime {
 .gasRecord {
     display: flex;
     min-width: 1024px;
-    max-width: 1920px;
+    /* max-width: 1920px; */
     margin: 0 auto;
     padding: .375rem 2.5rem 0;
 }

src/components/topHeader.vue

@@ -27,6 +27,7 @@
       @click="goRecordTime()"
       src="@/assets/images/time-icon.png"
       alt=""
+      ref="indexChart"
     />
   </header>
 </template>
@@ -40,9 +41,9 @@ export default {
     TimeMenu,
   },
   props: {
-      // StationID: String,
-    },
-  
+    // StationID: String,
+  },
+
   data() {
     return {
       title: "智慧安防数据分析看板",
@@ -56,10 +57,9 @@ export default {
   },
   watch: {
     "$store.state.wsInfo"(val) {
-      this.messageHandle(val)
+      this.messageHandle(val);
     },
     StationID(val) {
-
       console.log("watch时候的值");
       console.log(val);
 
@@ -69,57 +69,58 @@ export default {
 
       console.log("放入store的值");
       console.log(this.getStationId);
+
+      // this.$router.push({path: '/index'});
     },
-  
   },
   created() {
-   this.global.sendWs( { CMD: "getStationInfo" });
+    this.global.sendWs({ CMD: "getStationInfo" });
 
-this.StationID = this.getStationId;
-   
+    this.StationID = this.getStationId;
   },
   mounted() {
     this.navs();
   },
   computed: {
-    getStationId(){
-      return this.$store.state.StationID
-    }
+    getStationId() {
+      return this.$store.state.StationID;
+    },
   },
-    
-
 
   destroyed() {},
 
   methods: {
     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) {
-              console.log("created走没有的逻辑");
-              this.StationID = this.siteList[0].StationID;
-              this.$store.commit("changeStationID", this.StationId);
-            } else {
-              console.log("created走有的逻辑");
-            }
-            
-            
-          }
-          if (redata.CMD == "getStationDetail") {
-            this.homeData = redata.RESULT.LIST;
+      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) {
+            console.log("created走没有的逻辑");
+            this.StationID = this.siteList[0].StationID;
+            this.$store.commit("changeStationID", this.StationId);
+          } else {
+            console.log("created走有的逻辑");
           }
         }
+        // if (redata.CMD == "getStationDetail") {
+        //   this.homeData = redata.RESULT.LIST;
+        // }
+      }
     },
 
     goRecordTime() {
-      this.$router.push("/recordTime");
+      if (this.$route.path != "/recordTime") {
+        this.$router.push("/recordTime");
+      //  this.$refs.indexChartstyle.display='none'
+      //  this.$refs.abc.style.cssText
+
+      }
     },
     navs() {
       switch (this.$route.name) {

src/pages/eleFireCard/eleFireCard.vue

@@ -63,11 +63,46 @@ export default {
     returnBack,
   },
   data() {
-    return {};
+    return {
+      StationID: "",
+    };
+  },
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val);
+    },
+  },
+  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("/eleFireData");
+      this.$router.push({
+          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 == "getDeviceDetail") {
+         
+          console.log("redata.RESULT");
+          console.log(redata.RESULT.Device);
+          this.getData = redata.RESULT.Device;
+        }
+      }
     },
   },
 };

src/pages/eleFireData/eleFireData.vue

@@ -69,9 +69,42 @@ export default {
   
     }
   },
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val);
+    },
+  },
+  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 == "getDeviceDetail") {
+          console.log("redata.RESULT");
+          console.log(redata.RESULT.Device);
+          this.getData = redata.RESULT.Device;
+        }
+      }
+    },
+  
     goEleFireCard(){
-      this.$router.push('/eleFireCard')
+      this.$router.push({
+          path: "/eleFireCard",
+          query: { DeviceID: this.DeviceID },
+        })
     }
   }
 };

src/pages/gasCard/gasCard.vue

@@ -79,29 +79,32 @@ export default {
       this.messageHandle(val);
     },
   },
-  computed: {
-  
-  },
+  computed: {},
 
   created() {
     this.DeviceID = this.$route.query.DeviceID;
     this.StationID = this.$store.state.StationID;
 
-    console.log("DeviceID");
-    console.log(this.DeviceID);
     this.global.sendWs({
       CMD: "getDeviceDetail",
       StationID: this.StationID,
-      // StationID: "7c9c30af-6132-43d1-98fb-020395183094",
       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 == "getDeviceDetail") {
           console.log("redata.RESULT");
           console.log(redata.RESULT.Device);

src/pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 头部区域 -->
-        <top-header></top-header>
+    <top-header></top-header>
 
     <!-- <top-header :StationID='StationID'></top-header> -->
 
@@ -23,8 +23,19 @@
                 状态：<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>
+              <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>
@@ -54,7 +65,7 @@ export default {
   },
   data() {
     return {
-       StationID: "",
+      StationID: "",
       homeData: [],
     };
   },
@@ -64,38 +75,38 @@ export default {
     },
   },
   created() {
-
     // 如果有站点选项，发送请求获取站点信息页数据
-           this.StationID = this.$store.state.StationID;
-          this.global.sendWs({
-            CMD: "getStationDetail",
-            StationID:  this.StationID,
-          });
+    this.StationID = this.$store.state.StationID;
+    this.global.sendWs({
+      CMD: "getStationDetail",
+      StationID: this.StationID,
+    });
   },
   methods: {
     messageHandle(e) {
       if (e.data.search("{") != -1) {
-   
         const redata = JSON.parse(e.data);
-        
+
         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({path: '/eleFireCard', query: {DeviceID: item.DeviceID}});
+        this.$router.push({
+          path: "/eleFireCard",
+          query: { DeviceID: item.DeviceID },
+        });
       } else {
-        this.$router.push({path: '/gasCard?', query: {DeviceID: item.DeviceID}});
+        this.$router.push({
+          path: "/gasCard?",
+          query: { DeviceID: item.DeviceID },
+        });
       }
     },
-    goGasCard() {
-     
-    },
+    goGasCard() {},
   },
 };
 </script>

src/pages/inspectRecord/inspectRecord.vue

@@ -3,94 +3,93 @@
     <top-header></top-header>
     <div class="mainbox">
       <div class="gas-container">
-      <return-back></return-back>
-      <h3>电气火灾监控信息</h3>
-      <p>更新时间：2021-06-15 13:25:00</p>
+        <return-back></return-back>
+        <h3>电气火灾监控信息</h3>
+        <p>更新时间：2021-06-15 13:25:00</p>
 
-      <div class="tabBox fireTabs" style="margin-bottom: 3%">
-        <table>
-          <tr>
-            <th>供电过压告警：<span class="normal">正常</span></th>
-            <th>供电低压告警：<span class="normal">正常</span></th>
-            <th>供电过流告警：<span class="normal">正常</span></th>
-            <th>漏电告警：<span class="normal">正常</span></th>
-          </tr>
-          <tr>
-            <td>
-              <P>A相线缆温度超高：<span class="normal">正常</span></P>
-              <P>B相线缆温度超高：<span class="normal">正常</span></P>
-              <P>C相线缆温度超高：<span class="normal">正常</span></P>
-            </td>
-            <td>
-              <P>A相电压：<span class="normal">219.00</span></P>
-              <P>B相电压：<span class="normal">219.00</span></P>
-              <P>C相电压：<span class="normal">219.00</span></P>
-            </td>
-            <td>
-              <P>A相电流：<span class="normal">9.00</span></P>
-              <P>B相电流：<span class="error">3.00</span></P>
-              <P>C相电流：<span class="normal">9.00</span></P>
-            </td>
-            <td>
-              <P>A相线缆温度：<span class="normal">29.00</span></P>
-              <P>B相线缆温度：<span class="error">56.00</span></P>
-              <P>C相线缆温度：<span class="normal">29.00</span></P>
-            </td>
-          </tr>
-        </table>
-      </div>
+        <div class="tabBox fireTabs" style="margin-bottom: 3%">
+          <table>
+            <tr>
+              <th>供电过压告警：<span class="normal">正常</span></th>
+              <th>供电低压告警：<span class="normal">正常</span></th>
+              <th>供电过流告警：<span class="normal">正常</span></th>
+              <th>漏电告警：<span class="normal">正常</span></th>
+            </tr>
+            <tr>
+              <td>
+                <P>A相线缆温度超高：<span class="normal">正常</span></P>
+                <P>B相线缆温度超高：<span class="normal">正常</span></P>
+                <P>C相线缆温度超高：<span class="normal">正常</span></P>
+              </td>
+              <td>
+                <P>A相电压：<span class="normal">219.00</span></P>
+                <P>B相电压：<span class="normal">219.00</span></P>
+                <P>C相电压：<span class="normal">219.00</span></P>
+              </td>
+              <td>
+                <P>A相电流：<span class="normal">9.00</span></P>
+                <P>B相电流：<span class="error">3.00</span></P>
+                <P>C相电流：<span class="normal">9.00</span></P>
+              </td>
+              <td>
+                <P>A相线缆温度：<span class="normal">29.00</span></P>
+                <P>B相线缆温度：<span class="error">56.00</span></P>
+                <P>C相线缆温度：<span class="normal">29.00</span></P>
+              </td>
+            </tr>
+          </table>
+        </div>
 
-      <h3>可燃气体监控信息</h3>
-      <div class="gasRecord">
-        <div class="recordItem">
-          <h3>测试点位名称</h3>
-          <div>
-            <ul>
-              <li>可燃气体</li>
-              <li>告警状态</li>
-              <li>浓度值</li>
-            </ul>
-            <ul>
-              <li>一氧化碳</li>
-              <li class="normal"><span>正常</span></li>
-              <li>27.00</li>
-            </ul>
+        <h3>可燃气体监控信息</h3>
+        <div class="gasRecord">
+          <div class="recordItem">
+            <h3>测试点位名称</h3>
+            <div>
+              <ul>
+                <li>可燃气体</li>
+                <li>告警状态</li>
+                <li>浓度值</li>
+              </ul>
+              <ul>
+                <li>一氧化碳</li>
+                <li class="normal"><span>正常</span></li>
+                <li>27.00</li>
+              </ul>
+            </div>
           </div>
-        </div>
-        <div class="recordItem">
-          <h3>测试点位名称</h3>
-          <div>
-            <ul>
-              <li>可燃气体</li>
-              <li>告警状态</li>
-              <li>浓度值</li>
-            </ul>
-            <ul>
-              <li>一氧化碳</li>
-              <li class="normal"><span>正常</span></li>
-              <li>27.00</li>
-            </ul>
+          <div class="recordItem">
+            <h3>测试点位名称</h3>
+            <div>
+              <ul>
+                <li>可燃气体</li>
+                <li>告警状态</li>
+                <li>浓度值</li>
+              </ul>
+              <ul>
+                <li>一氧化碳</li>
+                <li class="normal"><span>正常</span></li>
+                <li>27.00</li>
+              </ul>
+            </div>
           </div>
-        </div>
-         <div class="recordItem">
-          <h3>测试点位名称</h3>
-          <div>
-            <ul>
-              <li>可燃气体</li>
-              <li>告警状态</li>
-              <li>浓度值</li>
-            </ul>
-            <ul>
-              <li>一氧化碳</li>
-              <li class="normal"><span>正常</span></li>
-              <li>27.00</li>
-            </ul>
+          <div class="recordItem">
+            <h3>测试点位名称</h3>
+            <div>
+              <ul>
+                <li>可燃气体</li>
+                <li>告警状态</li>
+                <li>浓度值</li>
+              </ul>
+              <ul>
+                <li>一氧化碳</li>
+                <li class="normal"><span>正常</span></li>
+                <li>27.00</li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    </div>
-    
   </div>
 </template>
 
@@ -104,9 +103,41 @@ export default {
     returnBack,
   },
   data() {
-    return {};
+    return {
+      recordDetailData: [],
+    };
+  },
+  watch: {
+    "$store.state.wsInfo"(val) {
+      this.messageHandle(val);
+    },
+  },
+  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 == "getPatrolDetail") {
+          this.recordData = redata.RESULT.LIST;
+          console.log("this.recordData111");
+          console.log(this.recordData);
+          this.recordDetailData = this.recordData;
+        }
+      }
+    },
     goEleFireData() {
       this.$router.push("/eleFireData");
     },

src/pages/recordTime/recordTime.vue

@@ -4,7 +4,14 @@
     <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"
+          v-for="(item, index) in recordData"
+          :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>
@@ -79,11 +86,23 @@ export default {
       currentPage3: 5,
       currentPage4: 4,
 
+      StationID: "",
 
-      recordData:[]
+      recordData: [],
     };
   },
 
+  created() {
+    this.StationID = this.$store.state.StationID;
+    this.global.sendWs({
+      CMD: "getPatrolRecord",
+      StationID: this.StationID,
+      Start: 0,
+      Limit: 2,
+      Order: "DESC",
+    });
+    // alert(this.$route.path)
+  },
   watch: {
     "$store.state.wsInfo"(val) {
       this.messageHandle(val);
@@ -97,29 +116,24 @@ export default {
   },
   methods: {
     messageHandle(e) {
+      // alert(1);
       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");
           console.log(this.recordData);
         }
       }
     },
 
-    goInspectDetail() {
-      this.$router.push("/inspectRecord");
+    goInspectDetail(item) {
+      this.$router.push({
+        path: "/inspectRecord",
+        query: { Time: item.Time },
+      });
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);

src/router/index.js

@@ -10,6 +10,9 @@ import inspectRecord from '../pages/inspectRecord/inspectRecord'
 import recordTime from '../pages/recordTime/recordTime'
 
 
+
+
+
 // 1.通过Vue.use(插件), 安装插件
 Vue.use(VueRouter)
 
@@ -26,15 +29,15 @@ const routes = [{
     }, {
         path: '/gasCard',
         component: gasCard,
-        meta: { title: '电气火灾' },
+        meta: { title: '可燃气体' },
     }, {
         path: '/eleFireCard',
         component: eleFireCard,
-        meta: { title: '可燃气体卡片页' },
+        meta: { title: '电气火灾卡片页' },
     }, {
         path: '/eleFireData',
         component: eleFireData,
-        meta: { title: '可燃气体数据展示' },
+        meta: { title: '电气火灾数据展示' },
     }, {
         path: '/inspectRecord',
         component: inspectRecord,
@@ -49,10 +52,18 @@ const routes = [{
 const router = new VueRouter({
     // 配置路由和组件之间的应用关系
     routes,
-    mode: 'history',
+    // mode: 'history',
     linkActiveClass: 'active'
 })
 
+// const VueRouterPush = router.prototype.push
+
+// router.prototype.push = function push(to) {
+
+//     return VueRouterPush.call(this, to).catch(err => err)
+
+// }
+
 
 
 

vue.config.js

@@ -19,4 +19,10 @@
 
 
 
-// }
+// }
+
+
+module.exports = {
+    publicPath: process.env.NODE_ENV === 'production' ?
+        './' : '/'
+}