From a64b64b06a77fd4b4af0f4111e45ae843ed0bc06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Tue, 16 Aug 2022 16:42:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=E7=AE=A1=E7=90=86):=E8=AE=BE=E5=A4=87=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E9=A1=B5=E9=9D=A2=E6=9B=B4=E6=94=B9=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/jlw/envirManage/index.vue    |   2 +-
 .../jlw/envirManage/leftCenter.vue            | 233 ++++++++++--------
 2 files changed, 131 insertions(+), 104 deletions(-)

diff --git a/src/views/projectAdmin/jlw/envirManage/index.vue b/src/views/projectAdmin/jlw/envirManage/index.vue
index 3f531837..6250908b 100644
--- a/src/views/projectAdmin/jlw/envirManage/index.vue
+++ b/src/views/projectAdmin/jlw/envirManage/index.vue
@@ -5,7 +5,7 @@
             <leftTop title="环境监测" /> 
       </div>
       <div class="leftCenter">
-            <leftCenter title="雾炮喷淋"></leftCenter>
+            <leftCenter title="设备情况"></leftCenter>
       </div>
       <div class="leftBottom">
             <leftBottom title="趋势图"></leftBottom>
diff --git a/src/views/projectAdmin/jlw/envirManage/leftCenter.vue b/src/views/projectAdmin/jlw/envirManage/leftCenter.vue
index a042221d..2e4fd96f 100644
--- a/src/views/projectAdmin/jlw/envirManage/leftCenter.vue
+++ b/src/views/projectAdmin/jlw/envirManage/leftCenter.vue
@@ -3,50 +3,56 @@
   <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
     <div class="blockContent alarmBlockContent">
-          <vue-scroll>
-            <table class="greenTable">
-              <thead>
-                <tr>
-                  <th>
-                    报警设备
-                  </th>
-                  <th>
-                    报警时间
-                  </th>
-                  <th>
-                    报警类型
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(item, index) in alarmList" :key="index">
-                  <td>
-                    {{ item.deviceName }}
-                  </td>
-                  <td>{{ item.tempAlarmTime }}</td>
-                  <td>
-                    <div :class=" !item.show ? 'unAlarm' : 'alarmType'">
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="placeholderBox placeholderBox2"
-              v-if="alarmList.length == 0"
-            >
-              <img src="@/assets/images/noData3.png" alt="" srcset="" />
+      <vue-scroll>
+        <div class="devInfoBox">
+          <div class="item">
+            <img src="@/assets/images/dataBoard/online.jpg" alt />
+            <div>
+              <p class="num" style="color:#5181F6">{{onlineDevNum}}</p>
               <p>
-              <!-- 暂无数据 -->
-               {{$t('message.dataBoard.nodata')}}
+                <!-- 在线设备 -->
+                {{$t('message.dataBoard.onlineDev')}}
               </p>
             </div>
-          </vue-scroll>
+          </div>
+          <div class="item">
+            <img src="@/assets/images/dataBoard/offline.jpg" alt />
+            <div>
+              <p class="num" style="color:#F67F51">{{offlineDevNum}}</p>
+              <p>
+                <!-- 离线设备 -->
+                {{$t('message.dataBoard.notOnlineDev')}}
+              </p>
+            </div>
+          </div>
         </div>
+
+        <div class="devListBox">
+          <ul>
+            <li v-for="(item,index) in devList" :key="index">
+              <p>{{ item.deviceName }}</p>
+              <span class="offline" v-if="item.isClosed==2">
+                <!-- 离线 -->
+                {{$t('message.dataBoard.notOnline')}}
+              </span>
+              <span class="online" v-else>
+                <!-- 在线 -->
+                {{$t('message.dataBoard.online')}}
+              </span>
+            </li>
+          </ul>
+        </div>
+        <div class="noData" v-if="devList.length == 0">
+          <img src="@/assets/images/noData3.png" alt srcset />
+          <p>暂无数据</p>
+        </div>
+      </vue-scroll>
+    </div>
   </div>
 </template>
 
 <script>
+import { environmentDevList } from "@/assets/js/api/environmentManage";
 export default {
   props: {
     title: {
@@ -56,31 +62,37 @@ export default {
   },
   data() {
     return {
-      alarmList: [
-        {
-          deviceName: "一号设备",
-          tempAlarmTime: "塔吊喷淋",
-          show: true,
-        },
-        {
-          deviceName: "一号设备",
-          tempAlarmTime: "塔吊喷淋",
-          show: false,
-        },
-        {
-          deviceName: "一号设备",
-          tempAlarmTime: "塔吊喷淋",
-          show: false,
-        },
-        {
-          deviceName: "一号设备",
-          tempAlarmTime: "塔吊喷淋",
-          show: true,
-        }
-      ],
-      
-      value:true,
+      devList: [],
+      onlineDevNum: 0,
+      offlineDevNum: 0,
     };
+  },
+  mounted() {
+    this.getDevList();
+  },
+  methods: {
+    //获取环境设备列表--环境监测实时数据--下拉
+    getDevList() {
+      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
+        result => {
+          // console.log('列表', result)
+          this.devList = result.result;
+          console.log(this.devList);
+          if (result.result.length > 0) {
+            this.currentDevDetail = result.result[0];
+            this.offlineDevNum = 0;
+            this.onlineDevNum = 0;
+            this.devList.forEach(element => {
+              if (element.isClosed == 2) {
+                this.offlineDevNum++;
+              } else {
+                this.onlineDevNum++;
+              }
+            });
+          } 
+        }
+      );
+    }
   }
 };
 </script>
@@ -89,6 +101,7 @@ export default {
 .containerBox {
   width: 100%;
   height: 100%;
+  overflow:auto;
   border: 1px solid #0081c3;
 
   .titleTxt {
@@ -97,54 +110,68 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
-  .greenTable{
-    margin-top: 30px;
-
-    th {
-      color: #6adce8;
-      border-bottom: 1px solid rgba(31, 68, 86, 0.3);
-    }
-     td{
-      color: white;
 
+  .devInfoBox {
+    display: flex;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    .item {
+      display: inline-flex;
+      align-items: center;
+      flex: 1;
+      img {
+        margin-right: 7px;
+        margin-left: 40px;
+      }
+      p {
+        opacity: 0.8;
+        font-size: 14px;
+      }
+      .num {
+        opacity: 1;
+        font-size: 20px;
+      }
     }
   }
-  .alarmType{
-    position:relative;
-    left: 40%;
-    width: 35px;
-    height: 15px;
-    background-color: #08b58a;
-    border-radius: 8px ;
+  .devListBox {
+    margin: 0 10px;
+    li {
+      height: 37px;
+      line-height: 37px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 6px;
+      background-color: rgba(68, 215, 182, 0.1);
+      span {
+        width: 55px;
+        height: 100%;
+        text-align: center;
+      }
+    }
+    p {
+      font-size: 16px;
+      opacity: 0.8;
+      padding-left: 32px;
+    }
+    .online {
+      background-color: rgba(68, 215, 182, 0.54);
+    }
+    .offline {
+      background-color: rgba(151, 12, 12, 0.54);
+    }
   }
-  .alarmType::before{
-    content: '';
-    position: absolute;
-    top: 1px;
-    left: 3px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: #fff;
-  }
-  .unAlarm{
-    position:relative;
-    left: 40%;
-    width: 35px;
-    height: 15px;
-    background-color: #6d7077;
-    border-radius: 8px ;
-  }
-  .unAlarm::before{
-    content: '';
-    position: absolute;
-    top: 1px;
-    right: 3px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: #fff;
+  .noData{
+    margin-top: 5%;
+    margin-left: 35%;
+    p{
+      margin-left: 5%;
+    }
   }
 }
+::-webkit-scrollbar {
+ width: 3px;
+ color: #636364;
+}
 </style>