From af0309e7932b18bfef9d05a30170f297d80364ad Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Mon, 29 Aug 2022 14:07:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E5=AE=89?=
 =?UTF-8?q?=E5=85=A8=E7=AE=A1=E7=90=86):=20=E5=AE=8C=E6=88=90=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=9B=91=E6=8E=A7=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/zjsj/security/rightTop.vue   | 56 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/views/projectAdmin/zjsj/security/rightTop.vue b/src/views/projectAdmin/zjsj/security/rightTop.vue
index 8206274c..b6c6db72 100644
--- a/src/views/projectAdmin/zjsj/security/rightTop.vue
+++ b/src/views/projectAdmin/zjsj/security/rightTop.vue
@@ -1,6 +1,23 @@
 <template>
   <Card title="设备监控">
-    设备监控
+    <div class="devices">
+      <vue-scroll>
+        <div class="device" v-for="i in 6" :key="i">
+          <div class="device-name">压榨机</div>
+          <div class="info">
+            <img class="image" src="../assets/images/common/bg-event.jpg" />
+            <div class="detail">
+              <div class="detail-item green">状态：进行中</div>
+              <div class="detail-item grey">电压：10000V</div>
+              <div class="detail-item orange">电流：100A</div>
+              <div class="detail-item">线缆温度：120℃</div>
+              <div class="detail-item">环境温度：53℃</div>
+              <div class="detail-item">漏电流：99A</div>
+            </div>
+          </div>
+        </div>
+      </vue-scroll>
+    </div>
   </Card>
 </template>
 
@@ -11,4 +28,39 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+  .device {
+    width: 100%;
+    height: 176px;
+    .device-name {
+      height: 36px;
+      line-height: 36px;
+    }
+    .info {
+      height: 22px;
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+  .green {
+    color: #46d7b6;
+  }
+  .grey {
+    color: #9da1aa;
+  }
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>