页面修改 请求渲染， bug修复

src/App.vue

@@ -49,9 +49,9 @@ export default {
       if ("WebSocket" in window) {
         // console.log("您的浏览器支持 WebSocket!");
         // location.host
-        that.global.ws = new WebSocket("ws://172.16.120.210:6001"); //后台本机ip
+        // that.global.ws = new WebSocket("ws://172.16.120.210:6001"); //后台本机ip
         // that.global.ws = new WebSocket("ws://121.199.52.195:6001");  //线上测试ip
-        // that.global.ws = new WebSocket("ws://172.16.120.79:6001");  //虚拟机ip
+        that.global.ws = new WebSocket("ws://172.16.120.79:6001");  //虚拟机ip
         that.global.setWs(that.global.ws);
         that.global.ws.onopen = function () {
           console.log("websocket连接成功");

src/assets/styles/index.css

@@ -235,7 +235,7 @@ header .showTime {
 
 .gas-container p {
     font-size: .225rem;
-    margin-bottom: .575rem
+    margin-bottom: .25rem
 }
 
 .return-back {
@@ -252,7 +252,8 @@ header .showTime {
 }
 
 .cardTabs li {
-    width: 1.875rem;
+    min-width: 1.875rem;
+    padding: 0 .2rem;
     display: inline-block;
     font-size: 0.25rem;
     height: 0.575rem;

src/pages/eleFireData/components/cableTemChart.vue

@@ -24,6 +24,9 @@ export default {
       cableRemB: [],
       cableRemC: [],
     };
+  },
+  watch:{
+
   },
   computed: {
     A: function () {

src/pages/eleFireData/eleFireData.vue

@@ -164,15 +164,15 @@
                 </div>
               </div>
               <div class="panel eleCurrentChart">
-                <voltage-chart :getData="getData"></voltage-chart>
+                <voltage-chart :getData="getData" v-if="getData.length>0"></voltage-chart>
               </div>
             </div>
             <div class="column2">
               <div class="panel">
-                <ele-current-chart :getData="getData"></ele-current-chart>
+                <ele-current-chart :getData="getData" v-if="getData.length>0"></ele-current-chart>
               </div>
               <div class="panel">
-                <cable-tem-chart :getData="getData"></cable-tem-chart>
+                <cable-tem-chart :getData="getData" v-if="getData.length>0"></cable-tem-chart>
               </div>
             </div>
           </div>

src/pages/gasCard/gasCard.vue

@@ -75,7 +75,6 @@ export default {
     },
   },
   computed: {
-
   },
 
   created() {

src/pages/index/index.vue

@@ -23,7 +23,7 @@
                 <span v-if="item.DeviceStatus==1">告警</span>
                 <span v-if="item.DeviceStatus==2">故障</span>
               </p>
-              <p class="light-color">{{ item.DeviceType }}</p>
+              <p class="light-color">{{ item.DeviceName }}</p>
 
 
               <!-- 电气火灾渲染start -->
@@ -36,7 +36,7 @@
                    {{item.KeyPoints[0].ValueList[0].Value == 0 ? "正常" : "告警"}}
                 </span>
                 <span v-else>
-                 默认值
+                 -
                 </span>
               </p>
                <!-- 电气火灾渲染end -->
@@ -49,7 +49,7 @@
                 <span v-if="item.KeyPoints[0].ValueList.length>0">
                   {{ item.KeyPoints[0].ValueList[0].Value }}
                 </span>
-                <span v-else>默认值</span>
+                <span v-else>-</span>
               </p>
                <!-- 可燃气体渲染end -->
 

src/pages/inspectRecord/inspectRecord.vue

@@ -5,12 +5,48 @@
       <div class="gas-container">
         <return-back></return-back>
         <h3>电气火灾监控信息</h3>
-        <p>更新时间：2021-06-15 13:25:00</p>
+        <p>更新时间：{{ Time }}</p>
+        <ul class="cardTabs"  >
+          <li v-for="(item, index) in eleData"
+            :key="index"  @click="Inv = index" :class="{ active: Inv === index }">{{item.DeviceName}}</li>
+          <!-- <li @click="Inv = 1" :class="{ active: Inv === 1 }">电气火灾2</li> -->
+        </ul>
+        <div class="tabBox fireTabs" style="margin-bottom:3%">
+          <table v-show="Inv == index" v-for="(item, index) in eleData"
+            :key="index" >
+            <tr>
+              <th>1供电过压告警：<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 class="tabBox fireTabs" style="margin-bottom: 3%">
-          <table>
+          <!-- <table v-show="Inv == 1">
             <tr>
-              <th>供电过压告警：<span class="normal">正常</span></th>
+              <th>2供电过压告警：<span class="normal">正常</span></th>
               <th>供电低压告警：<span class="normal">正常</span></th>
               <th>供电过流告警：<span class="normal">正常</span></th>
               <th>漏电告警：<span class="normal">正常</span></th>
@@ -38,52 +74,57 @@
               </td>
             </tr>
           </table>
+
+          <table v-show="Inv == 2">
+            <tr>
+              <th>供电过压告警3：<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>
-            </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>
-          </div>
-          <div class="recordItem">
-            <h3>测试点位名称</h3>
+          <div
+            class="recordItem"
+            v-for="(item, index) in getData.slice(0, 3)"
+            :key="index"
+          >
+            <h3>{{ item.DeviceName }}</h3>
             <div>
               <ul>
-                <li>可燃气体</li>
-                <li>告警状态</li>
-                <li>浓度值</li>
+                <li v-for="(innerItem, index) in item.Points" :key="index">
+                  {{ innerItem.PointName}}
+                </li>
               </ul>
               <ul>
-                <li>一氧化碳</li>
-                <li class="normal"><span>正常</span></li>
-                <li>27.00</li>
+                <li v-for="(innerItem, index) in item.Points" :key="index">
+                  {{ 'Value' in innerItem ? innerItem.Value : '-'}}
+                </li>
               </ul>
             </div>
           </div>
@@ -104,7 +145,10 @@ export default {
   },
   data() {
     return {
-      recordDetailData: [],
+      getData: [],
+      eleData:[],
+      Inv: 0,
+      Time: "",
     };
   },
   watch: {
@@ -122,7 +166,6 @@ export default {
         const redata = JSON.parse(e.data);
         // 初始化获取站点下拉数据
         if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
-
           var json = {};
           json.CMD = "getPatrolDetail";
           json.StationID = this.StationID;
@@ -134,12 +177,13 @@ export default {
           //   console.log("每隔30秒请求一次getDeviceDetail");
           //   this.global.sendWs(json);
           // }, 30000);
-
-        } 
+        }
         if (redata.CMD == "getPatrolDetail") {
           this.recordData = redata.RESULT.LIST;
           // console.log(this.recordData);
-          this.recordDetailData = this.recordData;
+          this.getData = this.recordData;
+          this.eleData=this.recordData.slice(3,6);
+          console.log(this.eleData)
         }
       }
     },

src/pages/recordTime/recordTime.vue

@@ -8,10 +8,7 @@
         <div class="timeList">
           <div
             class="timeItem"
-            v-for="(item, index) in getData.slice(
-              (currentPage - 1) * Count,
-              currentPage * Count
-            )"
+            v-for="(item, index) in getData"
             :key="index"
             @click="goInspectDetail(item)"
           >
@@ -126,6 +123,8 @@ export default {
     // 分页
     // 每页显示的条数
     handleSizeChange(val) {
+      console.log('开始执行handelSizeChnage函数');
+      
       // 改变每页显示的条数
       this.Count = val;
       // 注意：在改变每页显示的条数时，要将页码显示到第一页
@@ -133,6 +132,18 @@ export default {
     },
     // 显示第几页
     handleCurrentChange(val) {
+      console.log('开始执行handleCurrentChange函数');
+      console.log(val)
+
+      var json = {};
+
+          json.CMD = "getPatrolRecord";
+          json.StationID = this.StationID;
+          (json.Start = (val-1)*5), (json.Limit = 5), (json.Order = "DESC");
+
+          this.global.sendWs(json);
+
+
       // 改变默认的页数
       this.currentPage = val;
     },