From 2d51ecaf4cabfbf8eb37f883640f459644b964c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Wed, 31 Aug 2022 10:29:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E5=8F=8C?=
 =?UTF-8?q?=E7=A2=B3=E7=AE=A1=E7=90=86):=E9=9B=BE=E7=82=AE=E5=96=B7?=
 =?UTF-8?q?=E6=B7=8B=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/zjsj/carbon/leftCenter.vue   | 128 +++++++++++++++++-
 1 file changed, 123 insertions(+), 5 deletions(-)

diff --git a/src/views/projectAdmin/zjsj/carbon/leftCenter.vue b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
index 91b401d1..23da58ae 100644
--- a/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
+++ b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
@@ -1,14 +1,132 @@
 <template>
   <Card title="雾炮喷淋">
-    雾炮喷淋
+    <div class="containerBox">
+      <div class="dataBoardContent">
+        <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 />
+            <p>
+              <!-- 暂无数据 -->
+              {{$t('message.dataBoard.nodata')}}
+            </p>
+          </div>
+        </vue-scroll>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from "../components/Card.vue";
 export default {
-  components: { Card }
-}
+  components: { Card },
+  data() {
+    return {
+      alarmList: [
+        {
+          deviceName: "一号设备",
+          tempAlarmTime: "塔吊喷淋",
+          show: true
+        },
+        {
+          deviceName: "一号设备",
+          tempAlarmTime: "塔吊喷淋",
+          show: false
+        },
+        {
+          deviceName: "一号设备",
+          tempAlarmTime: "塔吊喷淋",
+          show: false
+        },
+        {
+          deviceName: "一号设备",
+          tempAlarmTime: "塔吊喷淋",
+          show: true
+        }
+      ],
+
+      value: true
+    };
+  }
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.containerBox {
+  width: 100%;
+  height: 100%;
+
+  .titleTxt {
+    font-size: 18px;
+    color: #6ee4f0;
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+  .greenTable {
+    margin-top: 30px;
+
+    th {
+      color:#72bdc9;
+      border-bottom: 1px solid rgba(31, 68, 86, 0.3);
+    }
+    td {
+      color: white;
+      line-height: 25px;
+    }
+  }
+  .alarmType {
+    position: relative;
+    left: 40%;
+    width: 35px;
+    height: 15px;
+    background-color: #08b58a;
+    border-radius: 8px;
+  }
+  .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;
+  }
+}
+</style>