数据对接，字段确认和补充

src/pages/eleFireCard/eleFireCard.vue

@@ -5,7 +5,7 @@
       <div class="gas-container">
         <return-back></return-back>
         <h3>电气火灾监控实时信息</h3>
-        <p>更新时间：2021-06-15 13:25:00</p>
+        <p>更新时间：{{time}}</p>
         <div>
           <ul class="cardTabs">
             <li class="active">数据列表</li>
@@ -16,42 +16,156 @@
             <div>
               <table>
                 <tr>
-                  <th>供电过压告警：
-                    <span class="normal" >
+                  <th>
+                    供电过压告警：
+                     <span v-if="getData.length > 0 " class="normal" :class="[getData[0].AlarmStatus==0?'normal':'error']">
+                      {{ getData[0].AlarmStatus==0?'正常':getData[0].AlarmStatus==1?"告警":"故障" }}
+                    </span>
+                    <span v-else class="normal">
+                      默认正常
+                    </span>
+                    
+                  </th>
+                  <th>
+                    供电低压告警：
+                    <span v-if="getData.length > 0 " class="normal" :class="[getData[1].AlarmStatus==0?'normal':'error']">
+                      {{ getData[1].AlarmStatus==0?'正常':getData[1].AlarmStatus==1?"告警":"故障" }}
+                    </span>
+                    <span v-else class="normal">
+                      默认正常
+                    </span>
+                  </th>
 
-                     <!-- {{getData[0].List.length}}  -->
-                      <!-- {{getData[0].List}} -->
-                      <!-- {{getData[0].List[0].Value}}  v-if="getData[0].List.length>0" -->  
-                      正常
-                      </span>
-                      <!-- <span class="normal" v-else>  "
-                     111
-                      </span> -->
-                    </th>
-                  <th>供电低压告警：<span class="normal">正常</span></th>
-                  <th>供电过流告警：<span class="normal">正常</span></th>
-                  <th>漏电告警：<span class="normal">正常</span></th>
+                  <th>
+                    供电过流告警：
+                    <span v-if="getData.length > 0 " class="normal" :class="[getData[2].AlarmStatus==0?'normal':'error']">
+                      {{ getData[2].AlarmStatus==0?'正常':getData[2].AlarmStatus==1?"告警":"故障" }}
+                    </span>
+                    <span v-else class="normal">
+                      默认正常
+                    </span>
+                  </th>
+
+                  <th>
+                    漏电告警：
+                    <span v-if="getData.length > 0 " class="normal" :class="[getData[3].AlarmStatus==0?'normal':'error']">
+                      {{ getData[3].AlarmStatus==0?'正常':getData[3].AlarmStatus==1?"告警":"故障" }}
+                    </span>
+                    <span v-else 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>
+                    <P>A相线缆温度超高：
+                      <span v-if="getData.length > 0 " class="normal" :class="[getData[4].AlarmStatus==0?'normal':'error']">
+                      {{ getData[4].AlarmStatus==0?'正常':getData[4].AlarmStatus==1?"告警":"故障" }}
+                    </span>
+                    <span v-else class="normal">
+                      默认正常
+                    </span>
+                    </P>
+                    <P>B相线缆温度超高：
+                       <span v-if="getData.length > 0 " class="normal" :class="[getData[5].AlarmStatus==0?'normal':'error']">
+                      {{ getData[5].AlarmStatus==0?'正常':getData[5].AlarmStatus==1?"告警":"故障" }}
+                    </span>
+                    <span v-else class="normal">
+                      默认正常
+                    </span>
+                    </P>
+                    <P>C相线缆温度超高：
+                       <span v-if="getData.length > 0 " class="normal" :class="[getData[6].AlarmStatus==0?'normal':'error']">
+                      {{ getData[6].AlarmStatus==0?'正常':getData[6].AlarmStatus==1?"告警":"故障" }}
+                    </span>
+                    <span v-else 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>
+                    <P>A相电压：
+                      <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[7].Value}}
+                      </span>
+                      <span v-else>
+                        219.00
+                      </span>
+                    </P>
+                    <P>B相电压：
+                       <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[8].Value}}
+                      </span>
+                      <span v-else>
+                        219.00
+                      </span>
+                    </P>
+                    <P>C相电压：
+                       <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[9].Value}}
+                      </span>
+                      <span v-else>
+                        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>
+                    <P>A相电流：
+                       <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[10].Value}}
+                      </span>
+                      <span v-else>
+                        9.00
+                      </span>
+                    </P>
+                    <P>B相电流：
+                      <!-- <span class="error">3.00</span> -->
+                      <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[11].Value}}
+                      </span>
+                      <span v-else>
+                        9.00
+                      </span>
+                    </P>
+                    <P>C相电流：
+                      <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[12].Value}}
+                      </span>
+                      <span v-else>
+                        9.00
+                      </span>
+                      <!-- <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>
+                    <P>A相线缆温度：
+                      <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[13].Value}}
+                      </span>
+                      <span v-else>
+                        29.00
+                      </span>
+                      <!-- <span class="normal">29.00</span> -->
+                    </P>
+                    <P>B相线缆温度：
+                      <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[14].Value}}
+                      </span>
+                      <span v-else>
+                        29.00
+                      </span>
+                      
+                      <!-- <span class="error">56.00</span> -->
+                      </P>
+                    <P>C相线缆温度：
+                      <span class="normal"  v-if="getData.length > 0 ">
+                        {{getData[15].Value}}
+                      </span>
+                      <span v-else>
+                        29.00
+                      </span>
+                      <!-- <span class="normal">29.00</span> -->
+                    </P>
                   </td>
                 </tr>
               </table>
@@ -76,7 +190,8 @@ export default {
     return {
       StationID: "",
       DeviceID: "",
-      getData:[]
+      getData: [],
+      time:''
     };
   },
   watch: {
@@ -100,7 +215,6 @@ export default {
         const redata = JSON.parse(e.data);
 
         if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
-
           var json = {};
           json.CMD = "getDeviceDetail";
           json.StationID = this.StationID;
@@ -112,14 +226,12 @@ export default {
           //   console.log("每隔30秒请求一次getDeviceDetail");
           //   this.global.sendWs(json);
           // }, 30000);
-
         }
 
         if (redata.CMD == "getDeviceDetail") {
-         console.log("redata.RESULT");
-         
-          this.getData =redata.RESULT.Device[0].Points;
-           console.log(this.getData[0].List.length);
+          console.log("redata.RESULT");
+          this.getData = redata.RESULT.Device[0].Points;
+          this.time=redata.time
         }
       }
     },

src/pages/eleFireData/components/cableTemChart.vue

@@ -1,46 +1,89 @@
 <template>
-  <div
-    id="myChart"
-    :style="{ width: '100%', height: ' 100% ' }"
-    stye="z-index:1000"
-  ></div>
+  <div id="cableRemChart" :style="{ width: '100%', height: ' 100% ' }"  ></div>
 </template>
 <script>
-var yearData = [
-  {
-    data: [
-      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
-      [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
-      [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
-    ],
-  },
-];
+// var yearData = [
+//   {
+//     data: [
+//        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+//       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
+//       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
+//     ],
+//   },
+// ];
 
 export default {
+  props: {
+    getData: [],
+  },
   name: "lineChart",
   data() {
     return {
       myChart: null,
+      cableRemA: [],
+      cableRemB: [],
+      cableRemC: [],
     };
   },
+  computed: {
+    A: function () {
+      var aa = [];
+      this.cableRemA.forEach(function (item) {
+        aa.push(item.Value);
+      });
+      return aa;
+    },
+
+    B: function () {
+      var bb = [];
+      this.cableRemB.forEach(function (item) {
+        bb.push(item.Value);
+      });
+      return bb;
+    },
+
+    C: function () {
+      var cc = [];
+      this.cableRemC.forEach(function (item) {
+        cc.push(item.Value);
+      });
+      return cc;
+    },
+    Time: function () {
+      var time = [];
+      this.cableRemC.forEach(function (item) {
+        time.push(item.Time);
+      });
+      return time;
+    },
+  },
   mounted() {
-    this.draw();
+
+    setTimeout(() => {
+      console.log("子组件中的this.getData");
+      console.log(this.getData);
+      this.cableRemA = this.getData[13].LIST;
+      this.cableRemB = this.getData[14].LIST;
+      this.cableRemC = this.getData[15].LIST;
+      this.draw();
+    }, 100);
+
     window.addEventListener("resize", () => {
       this.myChart.resize();
     });
   },
   methods: {
     draw() {
-      this.myChart = this.$echarts.init(document.getElementById("myChart"));
+      this.myChart = this.$echarts.init(document.getElementById("cableRemChart"));
       this.myChart.setOption({
         // 通过这个color修改两条线的颜色
         title: {
-          text: "ABC三相线缆温度",
+          text: "ABC三相电流",
           textStyle: {
             align: "center",
             color: "#fff",
-            fontSize: ".225rem ",
-            fontWeight: "400",
+            fontSize: '.225rem ',
+            fontWeight:'400'
           },
           left: "center",
         },
@@ -51,17 +94,17 @@ export default {
         },
         // 图列组件
         legend: {
-          //   show:false,
-          itemGap: 120,
+        //   show:false,
+          itemGap: 100,
           /* 如果series对象有name值，则legend可以不用写data */
           // 修改图列组件文字颜色
           textStyle: {
             color: "#fff",
-            fontSize: ".225rem ",
+            fontSize:'.225rem '
           },
 
           bottom: "-2%",
-          // left:"-30%",
+          // right:"-18%"
         },
         grid: {
           left: "1%",
@@ -73,20 +116,21 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: true,
-          data: [
-            "09:00",
-            "11:00",
-            "13:00",
-            "15:00",
-            "17:00",
-            "19:00",
-            "21:00",
-            "23:00",
-            "01:00",
-            "03:00",
-            "05:00",
-            "07:00",
-          ],
+          // data: [
+          //   "09:00",
+          //   "11:00",
+          //   "13:00",
+          //   "15:00",
+          //   "17:00",
+          //   "19:00",
+          //   "21:00",
+          //   "23:00",
+          //   "01:00",
+          //   "03:00",
+          //   "05:00",
+          //   "07:00",
+          // ],
+          data:this.Time,
           axisTick: {
             show: false, //去除刻度线
           },
@@ -122,21 +166,24 @@ export default {
             name: "A相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[0],
+            // data: yearData[0].data[0],
+            data:this.A,
             symbolSize: 10, //拐点圆的大小
           },
           {
             name: "B相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[1],
+            // data: yearData[0].data[1],
+           data: this.B,
             symbolSize: 10, //拐点圆的大小
           },
           {
             name: "C相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[2],
+            // data: yearData[0].data[2],
+            data:this.C,
             symbolSize: 10, //拐点圆的大小
           },
         ],

src/pages/eleFireData/components/eleCurrentChart.vue

@@ -2,34 +2,82 @@
   <div id="eleCurrentChart" :style="{ width: '100%', height: '100% ' }"></div>
 </template>
 <script>
-
-//三相电压
-var yearData = [
-  {
-    data: [
-      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
-      [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
-      [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
-    ],
-  },
-];
+//三相电压模拟数据
+// var yearData = [
+//   {
+//     data: [
+//       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+//       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
+//       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
+//     ],
+//   },
+// ];
 
 export default {
+  props: {
+    getData: [],
+  },
   name: "lineChart",
   data() {
     return {
       myChart: null,
+      eleCurrentA: [],
+      eleCurrentB: [],
+      eleCurrentC: [],
     };
   },
+  computed: {
+    A: function () {
+      var aa = [];
+      this.eleCurrentA.forEach(function (item) {
+        aa.push(item.Value);
+      });
+      return aa;
+    },
+
+    B: function () {
+      var bb = [];
+      this.eleCurrentB.forEach(function (item) {
+        bb.push(item.Value);
+      });
+      return bb;
+    },
+
+    C: function () {
+      var cc = [];
+      this.eleCurrentC.forEach(function (item) {
+        cc.push(item.Value);
+      });
+      return cc;
+    },
+    Time: function () {
+      var time = [];
+      this.eleCurrentC.forEach(function (item) {
+        time.push(item.Time);
+      });
+      return time;
+    },
+  },
   mounted() {
-    this.draw();
     window.addEventListener("resize", () => {
       this.myChart.resize();
     });
+
+    setTimeout(() => {
+      console.log("子组件中的this.getData");
+      console.log(this.getData);
+      this.eleCurrentA = this.getData[7].LIST;
+      this.eleCurrentB = this.getData[8].LIST;
+      this.eleCurrentC = this.getData[9].LIST;
+      this.draw();
+    }, 100);
   },
+
   methods: {
     draw() {
-      this.myChart = this.$echarts.init(document.getElementById("eleCurrentChart"));
+      this.myChart = this.$echarts.init(
+        document.getElementById("eleCurrentChart")
+      );
       this.myChart.setOption({
         // 通过这个color修改两条线的颜色
         title: {
@@ -37,8 +85,8 @@ export default {
           textStyle: {
             align: "center",
             color: "#fff",
-            fontSize: '.225rem ',
-            fontWeight:'400'
+            fontSize: ".225rem ",
+            fontWeight: "400",
           },
           left: "center",
         },
@@ -49,13 +97,11 @@ export default {
         },
         // 图列组件
         legend: {
-          show:true,
+          show: true,
           itemGap: 50,
-          /* 如果series对象有name值，则legend可以不用写data */
-          // 修改图列组件文字颜色
           textStyle: {
             color: "#fff",
-            fontSize:'.225rem '
+            fontSize: ".225rem ",
           },
 
           bottom: "-2%",
@@ -70,20 +116,21 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: true,
-          data: [
-            "09:00",
-            "11:00",
-            "13:00",
-            "15:00",
-            "17:00",
-            "19:00",
-            "21:00",
-            "23:00",
-            "01:00",
-            "03:00",
-            "05:00",
-            "07:00",
-          ],
+          // data: [
+          //   "09:00",
+          //   "11:00",
+          //   "13:00",
+          //   "15:00",
+          //   "17:00",
+          //   "19:00",
+          //   "21:00",
+          //   "23:00",
+          //   "01:00",
+          //   "03:00",
+          //   "05:00",
+          //   "07:00",
+          // ],
+          data: this.Time,
           axisTick: {
             show: false, //去除刻度线
           },
@@ -119,21 +166,24 @@ export default {
             name: "A相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[0],
+            // data: yearData[0].data[0],
+            data: this.A,
             symbolSize: 10, //拐点圆的大小
           },
           {
             name: "B相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[1],
+            // data: yearData[0].data[1],
+            data: this.B,
             symbolSize: 10, //拐点圆的大小
           },
           {
             name: "C相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[2],
+            // data: yearData[0].data[2],
+            data: this.C,
             symbolSize: 10, //拐点圆的大小
           },
         ],

src/pages/eleFireData/components/voltageChart.vue

@@ -2,25 +2,72 @@
   <div id="voltageChart" :style="{ width: '100%', height: ' 100% ' }"  ></div>
 </template>
 <script>
-var yearData = [
-  {
-    data: [
-       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
-      [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
-      [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
-    ],
-  },
-];
+// var yearData = [
+//   {
+//     data: [
+//        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+//       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
+//       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
+//     ],
+//   },
+// ];
 
 export default {
+  props: {
+    getData: [],
+  },
   name: "lineChart",
   data() {
     return {
       myChart: null,
+      voltageA: [],
+      voltageB: [],
+      voltageC: [],
     };
   },
+  computed: {
+    A: function () {
+      var aa = [];
+      this.voltageA.forEach(function (item) {
+        aa.push(item.Value);
+      });
+      return aa;
+    },
+
+    B: function () {
+      var bb = [];
+      this.voltageB.forEach(function (item) {
+        bb.push(item.Value);
+      });
+      return bb;
+    },
+
+    C: function () {
+      var cc = [];
+      this.voltageC.forEach(function (item) {
+        cc.push(item.Value);
+      });
+      return cc;
+    },
+    Time: function () {
+      var time = [];
+      this.voltageC.forEach(function (item) {
+        time.push(item.Time);
+      });
+      return time;
+    },
+  },
   mounted() {
-    this.draw();
+
+    setTimeout(() => {
+      console.log("子组件中的this.getData");
+      console.log(this.getData);
+      this.voltageA = this.getData[10].LIST;
+      this.voltageB = this.getData[11].LIST;
+      this.voltageC = this.getData[12].LIST;
+      this.draw();
+    }, 100);
+
     window.addEventListener("resize", () => {
       this.myChart.resize();
     });
@@ -69,20 +116,21 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: true,
-          data: [
-            "09:00",
-            "11:00",
-            "13:00",
-            "15:00",
-            "17:00",
-            "19:00",
-            "21:00",
-            "23:00",
-            "01:00",
-            "03:00",
-            "05:00",
-            "07:00",
-          ],
+          // data: [
+          //   "09:00",
+          //   "11:00",
+          //   "13:00",
+          //   "15:00",
+          //   "17:00",
+          //   "19:00",
+          //   "21:00",
+          //   "23:00",
+          //   "01:00",
+          //   "03:00",
+          //   "05:00",
+          //   "07:00",
+          // ],
+          data:this.Time,
           axisTick: {
             show: false, //去除刻度线
           },
@@ -118,21 +166,24 @@ export default {
             name: "A相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[0],
+            // data: yearData[0].data[0],
+            data:this.A,
             symbolSize: 10, //拐点圆的大小
           },
           {
             name: "B相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[1],
+            // data: yearData[0].data[1],
+           data: this.B,
             symbolSize: 10, //拐点圆的大小
           },
           {
             name: "C相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[2],
+            // data: yearData[0].data[2],
+            data:this.C,
             symbolSize: 10, //拐点圆的大小
           },
         ],

src/pages/eleFireData/eleFireData.vue

@@ -3,56 +3,183 @@
     <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>更新时间：{{time}}</p>
 
-      <div>
-        <ul class="cardTabs">
-          <li @click="goEleFireCard">数据列表</li>
-          <li class="active" >数据可视化</li>
-        </ul>
+        <div>
+          <ul class="cardTabs">
+            <li @click="goEleFireCard">数据列表</li>
+            <li class="active">数据可视化</li>
+          </ul>
 
-        <div class="tabBox eleFire-data">
-         <div class="column2">
-           <div class="panel sec1">
-             <div class="inner-box">
-               <div>
-                 <p>供电过压告警：<span class="normal">正常</span></p>
-                 <p>供电低压告警：<span class="normal">正常</span></p>
-               </div>
-               <div>
-                 <p>供电过流告警：<span class="normal">正常</span></p>
-                 <p>漏电告警：<span class="normal">正常</span></p>
-               </div>
-               <div>
-                 <p style="width:100%">
-                   A相线缆温度超高：<span class="normal" style="margin-right:.3rem">正常</span>
-                   B相线缆温度超高：<span class="normal" style="margin-right:.3rem">正常</span>  
-                   C相线缆温度超高：<span class="normal" style="margin-right:.3rem">正常</span>
-                 </p>
-                 </div>
-             </div>
-           </div>
-           <div class="panel eleCurrentChart" >
-
-           <voltage-chart></voltage-chart>
-
-           </div>
-         </div>
-         <div class="column2">
-           <div class="panel">  <ele-current-chart></ele-current-chart></div>
-           <div class="panel">
-             <cable-tem-chart></cable-tem-chart>
-           </div>
-         </div>
-         
+          <div class="tabBox eleFire-data">
+            <div class="column2">
+              <div class="panel sec1">
+                <div class="inner-box">
+                  <div>
+                    <p>
+                      供电过压告警：
+                      <span
+                        v-if="getData.length > 0"
+                        class="normal"
+                        :class="[
+                          getData[0].AlarmStatus == 0 ? 'normal' : 'error',
+                        ]"
+                      >
+                        {{
+                          getData[0].AlarmStatus == 0
+                            ? "正常"
+                            : getData[0].AlarmStatus == 1
+                            ? "告警"
+                            : "故障"
+                        }}
+                      </span>
+                      <span v-else class="normal">默认正常</span>
+                    </p>
+                    <p>
+                      供电低压告警：
+                      <span
+                        v-if="getData.length > 0"
+                        class="normal"
+                        :class="[
+                          getData[1].AlarmStatus == 0 ? 'normal' : 'error',
+                        ]"
+                      >
+                        {{
+                          getData[1].AlarmStatus == 0
+                            ? "正常"
+                            : getData[1].AlarmStatus == 1
+                            ? "告警"
+                            : "故障"
+                        }}
+                      </span>
+                      <span v-else class="normal">默认正常</span>
+                    </p>
+                  </div>
+                  <div>
+                    <p>
+                      供电过流告警：
+                      <span
+                        v-if="getData.length > 0"
+                        class="normal"
+                        :class="[
+                          getData[2].AlarmStatus == 0 ? 'normal' : 'error',
+                        ]"
+                      >
+                        {{
+                          getData[2].AlarmStatus == 0
+                            ? "正常"
+                            : getData[2].AlarmStatus == 1
+                            ? "告警"
+                            : "故障"
+                        }}
+                      </span>
+                      <span v-else class="normal">默认正常</span>
+                    </p>
+                    <p>
+                      漏电告警：
+                      <span
+                        v-if="getData.length > 0"
+                        class="normal"
+                        :class="[
+                          getData[3].AlarmStatus == 0 ? 'normal' : 'error',
+                        ]"
+                      >
+                        {{
+                          getData[3].AlarmStatus == 0
+                            ? "正常"
+                            : getData[3].AlarmStatus == 1
+                            ? "告警"
+                            : "故障"
+                        }}
+                      </span>
+                      <span v-else class="normal">默认正常</span>
+                    </p>
+                  </div>
+                  <div>
+                    <p style="width: 100%">
+                      A相线缆温度超高：
+                      <span
+                        v-if="getData.length > 0"
+                        class="normal"
+                        :class="[
+                          getData[4].AlarmStatus == 0 ? 'normal' : 'error',
+                        ]"
+                        style="margin-right: 0.3rem"
+                      >
+                        {{
+                          getData[4].AlarmStatus == 0
+                            ? "正常"
+                            : getData[4].AlarmStatus == 1
+                            ? "告警"
+                            : "故障"
+                        }}
+                      </span>
+                      <span v-else class="normal" style="margin-right: 0.3rem"
+                        >正常</span
+                      >
+                      B相线缆温度超高：
+                      <span
+                        v-if="getData.length > 0"
+                        class="normal"
+                        :class="[
+                          getData[5].AlarmStatus == 0 ? 'normal' : 'error',
+                        ]"
+                        style="margin-right: 0.3rem"
+                      >
+                        {{
+                          getData[5].AlarmStatus == 0
+                            ? "正常"
+                            : getData[5].AlarmStatus == 1
+                            ? "告警"
+                            : "故障"
+                        }}
+                      </span>
+                      <span v-else class="normal" style="margin-right: 0.3rem"
+                        >正常</span
+                      >
+                      C相线缆温度超高：
+                      <span
+                        v-if="getData.length > 0"
+                        class="normal"
+                        :class="[
+                          getData[6].AlarmStatus == 0 ? 'normal' : 'error',
+                        ]"
+                        style="margin-right: 0.3rem"
+                      >
+                        {{
+                          getData[6].AlarmStatus == 0
+                            ? "正常"
+                            : getData[6].AlarmStatus == 1
+                            ? "告警"
+                            : "故障"
+                        }}
+                      </span>
+                      <span v-else class="normal" style="margin-right: 0.3rem"
+                        >正常</span
+                      >
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="panel eleCurrentChart">
+                <voltage-chart :getData="getData"></voltage-chart>
+              </div>
+            </div>
+            <div class="column2">
+              <div class="panel">
+                <ele-current-chart :getData="getData"></ele-current-chart>
+              </div>
+              <div class="panel">
+                <cable-tem-chart :getData="getData"></cable-tem-chart>
+              </div>
+            </div>
+          </div>
+          <div style="height: 0.325rem"></div>
         </div>
-        <div style="height:0.325rem"></div>
       </div>
     </div>
-    </div>
-    
   </div>
 </template>  
 
@@ -66,13 +193,21 @@ import cableTemChart from "./components/cableTemChart";
 export default {
   name: "eleFireData",
   components: {
-    topHeader,returnBack,eleCurrentChart,voltageChart,cableTemChart
+    topHeader,
+    returnBack,
+    eleCurrentChart,
+    voltageChart,
+    cableTemChart,
   },
-  data(){
-    return{
+  data() {
+    return {
       StationID: "",
       DeviceID: "",
-    }
+      getData: [],
+      eleCurrent: [],
+      time:''
+   
+    };
   },
   watch: {
     "$store.state.wsInfo"(val) {
@@ -82,15 +217,13 @@ export default {
   created() {
     this.DeviceID = this.$route.query.DeviceID;
     this.StationID = this.$store.state.StationID;
-
   },
-  methods:{
+  methods: {
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
 
         if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
-
           var json = {};
           json.CMD = "getDeviceDetail";
           json.StationID = this.StationID;
@@ -102,28 +235,27 @@ export default {
             console.log("每隔30秒请求一次getDeviceDetail");
             this.global.sendWs(json);
           }, 30000);
-
         }
 
         if (redata.CMD == "getDeviceDetail") {
           console.log("redata.RESULT");
-          console.log(redata.RESULT.Device);
-          this.getData = redata.RESULT.Device;
+          console.log(redata.RESULT.Device[0].Points);
+          this.getData = redata.RESULT.Device[0].Points;
+          this.time=redata.time
         }
       }
     },
-  
-    goEleFireCard(){
+
+    goEleFireCard() {
       this.$router.push({
-          path: "/eleFireCard",
-          query: { DeviceID: this.DeviceID },
-        })
-    }
-  }
+        path: "/eleFireCard",
+        query: { DeviceID: this.DeviceID },
+      });
+    },
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>

src/pages/gasCard/components/lineChart.vue

@@ -2,25 +2,53 @@
   <div id="myChart" :style="{ width: '100%', height: ' 5rem ' }"></div>
 </template>
 <script>
-var yearData = [
-  {
-    data: [
-      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
-      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
-      [80, 93, 90, 93, 120, 130, 130, 32, 29, 33, 50, 160],
-    ],
-  },
-];
+// var yearData = [
+//   {
+//     data: [
+//       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+//       [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
+//       [80, 93, 90, 93, 120, 130, 130, 32, 29, 33, 50, 160],
+//     ],
+//   },
+// ];
 
 export default {
   name: "lineChart",
+  props: {
+    getData: [],
+  },
   data() {
     return {
       myChart: null,
+      chartA: [],
     };
   },
+  computed:{
+    A: function () {
+      var aa = [];
+      this.chartA.forEach(function (item) {
+        aa.push(item.Value);
+      });
+      return aa;
+    },
+    Time: function () {
+      var time = [];
+      this.voltageC.forEach(function (item) {
+        time.push(item.Time);
+      });
+      return time;
+    },
+  },
   mounted() {
-    this.draw();
+
+    setTimeout(() => {
+      console.log("子组件中的this.getData");
+      console.log(this.getData);
+      this.chartA = this.getData.Points[1].LIST;
+ 
+      this.draw();
+    }, 100);
+ 
     window.addEventListener("resize", () => {
       this.myChart.resize();
     });
@@ -66,20 +94,21 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: true,
-          data: [
-            "09:00",
-            "11:00",
-            "13:00",
-            "15:00",
-            "17:00",
-            "19:00",
-            "21:00",
-            "23:00",
-            "01:00",
-            "03:00",
-            "05:00",
-            "07:00",
-          ],
+          // data: [
+          //   "09:00",
+          //   "11:00",
+          //   "13:00",
+          //   "15:00",
+          //   "17:00",
+          //   "19:00",
+          //   "21:00",
+          //   "23:00",
+          //   "01:00",
+          //   "03:00",
+          //   "05:00",
+          //   "07:00",
+          // ],
+          data:this.time,
           axisTick: {
             show: false, //去除刻度线
           },
@@ -115,23 +144,11 @@ export default {
             name: "位置AAA",
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            data: yearData[0].data[0],
+            // data: yearData[0].data[0],
+            data:this.A,
             symbolSize: 10, //拐点圆的大小
           },
-          // {
-          //   name: "位置bbb",
-          //   type: "line",
-          //   smooth: false, // 曲线是否平滑显示
-          //   data: yearData[0].data[1],
-          //   symbolSize: 10, //拐点圆的大小
-          // },
-          // {
-          //   name: "位置CCC",
-          //   type: "line",
-          //   smooth: false, // 曲线是否平滑显示
-          //   data: yearData[0].data[2],
-          //   symbolSize: 10, //拐点圆的大小
-          // },
+         
         ],
       });
     },

src/pages/gasCard/gasCard.vue

@@ -6,7 +6,7 @@
         <return-back></return-back>
 
         <h3>可燃气体监控实时信息</h3>
-        <p>更新时间：2021-06-15 13:25:00</p>
+        <p>更新时间：{{time}}</p>
 
         <div>
           <ul class="cardTabs">
@@ -17,21 +17,26 @@
           <div class="tabBox">
             <div>
               <div v-if="Inv == 1" class="lineChart gas-data">
-                <line-chart></line-chart>
+                <line-chart :getData="getData"></line-chart>
               </div>
 
               <table v-if="Inv == 0">
                 <tr>
                   <th>名称</th>
-                  <th>设备位置</th>
+                  <!-- <th>设备位置</th> -->
                   <th>浓度</th>
                   <th>告警状态</th>
                 </tr>
                 <tr>
-                  <td>{{ getData.DeviceType }}</td>
-                  <td>位置BBBBBB</td>
-                  <td>0.00%LEL</td>
-                  <td class="normal">正常</td>
+                  <td>{{ getData.DeviceName }}</td>
+                  <!-- <td>位置BBBBBB</td> -->
+                  <td>
+                    <!-- 0.00%LEL -->
+                    {{nongDu}}
+                  </td>
+                  <td class="normal" :class="[ AlarmStatus == 0 ? 'normal' : 'error',]">
+                    {{AlarmStatus==0?"正常":AlarmStatus==1?"告警":"故障"}}
+                    </td>
                 </tr>
               </table>
             </div>
@@ -59,6 +64,11 @@ export default {
       DeviceID: "",
       getData: {},
       StationID: "",
+      time:'',
+      AlarmStatus:'',
+      nongDu:'',
+      chartPoint:[],
+      chartDate:[]
     };
   },
   watch: {
@@ -79,6 +89,7 @@ export default {
     messageHandle(e) {
       if (e.data.search("{") != -1) {
         const redata = JSON.parse(e.data);
+        this.time=redata.time;
 
         if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
 
@@ -97,10 +108,12 @@ export default {
         }
 
         if (redata.CMD == "getDeviceDetail") {
-  
-          // console.log("redata.RESULT");
-          // console.log(redata.RESULT.Device[0].point);
-          // this.getData = redata.RESULT.Device;
+          console.log("redata.RESULT");
+          console.log(redata.RESULT.Device[0]);
+          this.getData =redata.RESULT.Device[0];
+          this.AlarmStatus=this.getData.Points[0].AlarmStatus
+          this.nongDu=this.getData.Points[1].Value
+
         }
       }
     },