From dd23115673271abf4e23256e92c223169b154ba0 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 19 Aug 2022 10:41:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E5=B7=A5=E5=9C=B0)=EF=BC=9A=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=8D=87=E9=99=8D=E6=9C=BA=E5=BC=B9=E6=A1=86=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ElevatorDialog_.vue            | 127 ++++++++++++------
 1 file changed, 83 insertions(+), 44 deletions(-)

diff --git a/src/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue b/src/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue
index a5e27943..445bbbf1 100644
--- a/src/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue
+++ b/src/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue
@@ -1,46 +1,51 @@
 <template>
   <el-dialog title="升降机监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="elevatorDialog" @close="close">
     <div class="dllm">
-      <div class="card">
-        <div class="card-title">实时数据</div>
-        <div class="environment">
-          <div class="env-item green" :class="{ red: environmentInfo.heightAlarm != 0 || environmentInfo.heightPreAlarm != 0 }">
-            <div class="value">{{ environmentInfo.height }}<span>m</span></div>
-            <div class="label">高度</div>
-          </div>
-          <div class="env-item">
-            <div class="value">{{ environmentInfo.height * 2 }}<span>%</span></div>
-            <div class="label">高度百分比</div>
-          </div>
-          <div class="env-item">
-            <div class="value">
-              {{ environmentInfo.floorNum || '--' }}/{{ (environmentInfo.lifter || {}).totalFloor || '--' }}<span>层</span>
+      <div class="env-animate">
+        <div class="card">
+          <div class="card-title">实时数据</div>
+          <div class="environment">
+            <div class="env-item green" :class="{ red: environmentInfo.heightAlarm != 0 || environmentInfo.heightPreAlarm != 0 }">
+              <div class="value">{{ environmentInfo.height }}<span>m</span></div>
+              <div class="label">高度</div>
             </div>
-            <div class="label">当前楼层/总楼层</div>
-          </div>
-          <div class="env-item">
-            <div class="value">
-              {{ environmentInfo.runningState === 1 ? '上升' : environmentInfo.runningState === 2 ? '下降' : '停运' }}<span></span>
+            <div class="env-item">
+              <div class="value">{{ environmentInfo.height * 2 }}<span>%</span></div>
+              <div class="label">高度百分比</div>
+            </div>
+            <div class="env-item">
+              <div class="value">
+                {{ environmentInfo.floorNum || '--' }}/{{ (environmentInfo.lifter || {}).totalFloor || '--' }}<span>层</span>
+              </div>
+              <div class="label">当前楼层/总楼层</div>
+            </div>
+            <div class="env-item">
+              <div class="value">
+                {{ environmentInfo.runningState === 1 ? '上升' : environmentInfo.runningState === 2 ? '下降' : '停运' }}<span></span>
+              </div>
+              <div class="label">运行状态</div>
+            </div>
+            <div class="env-item green" :class="{ red: environmentInfo.obliguityXAlarm != 0 || environmentInfo.obliguityXPreAlarm != 0 }">
+              <div class="value">{{ environmentInfo.dipAngleX }}<span>°</span></div>
+              <div class="label">倾角X</div>
+            </div>
+            <div class="env-item green" :class="{ red: environmentInfo.obliguityYAlarm != 0 || environmentInfo.obliguityYPreAlarm != 0 }">
+              <div class="value">{{ environmentInfo.dipAngleY }}<span>°</span></div>
+              <div class="label">倾角Y</div>
+            </div>
+            <div class="env-item green" :class="{ red: environmentInfo.speedAlarm != 0 || environmentInfo.speedPreAlarm != 0 }">
+              <div class="value">{{ environmentInfo.speed }}<span>m/s</span></div>
+              <div class="label">当前速度</div>
+            </div>
+            <div class="env-item green" :class="{ red: environmentInfo.windSpeedAlarm != 0 || environmentInfo.windSpeedPreAlarm != 0 }">
+              <div class="value">{{ environmentInfo.windSpeed }}<span>m/s</span></div>
+              <div class="label">风速</div>
             </div>
-            <div class="label">运行状态</div>
-          </div>
-          <div class="env-item green" :class="{ red: environmentInfo.obliguityXAlarm != 0 || environmentInfo.obliguityXPreAlarm != 0 }">
-            <div class="value">{{ environmentInfo.dipAngleX }}<span>°</span></div>
-            <div class="label">倾角X</div>
-          </div>
-          <div class="env-item green" :class="{ red: environmentInfo.obliguityYAlarm != 0 || environmentInfo.obliguityYPreAlarm != 0 }">
-            <div class="value">{{ environmentInfo.dipAngleY }}<span>°</span></div>
-            <div class="label">倾角Y</div>
-          </div>
-          <div class="env-item green" :class="{ red: environmentInfo.speedAlarm != 0 || environmentInfo.speedPreAlarm != 0 }">
-            <div class="value">{{ environmentInfo.speed }}<span>m/s</span></div>
-            <div class="label">当前速度</div>
-          </div>
-          <div class="env-item green" :class="{ red: environmentInfo.windSpeedAlarm != 0 || environmentInfo.windSpeedPreAlarm != 0 }">
-            <div class="value">{{ environmentInfo.windSpeed }}<span>m/s</span></div>
-            <div class="label">风速</div>
           </div>
         </div>
+        <div class="animate">
+          <div class="car"></div>
+        </div>
       </div>
 
       <div class="infos">
@@ -169,6 +174,48 @@ export default {
     color: #fff;
     background-size: 100% 100%;
     z-index: 3;
+    display: flex;
+    flex-direction: column;
+    .env-animate {
+      flex: 1;
+      display: flex;
+      > :nth-child(1) {
+        width: 1000px;
+      }
+      .animate {
+        position: relative;
+        margin: 60px auto 0;
+        width: 130px;
+        height: 420px;
+        background: url(~@/assets/images/dataBoard/lifter-1.png) no-repeat;
+        background-position-x: -30px;
+        .car {
+          position: absolute;
+          left: 76px;
+          bottom: 10px;
+          width: 38px;
+          height: 50px;
+          background: url(~@/assets/images/dataBoard/lifter-2.png);
+          background-size: 100%;
+          animation: car 1s forwards;
+        }
+        @keyframes car {
+          0% {
+            bottom: 10px;
+          }
+          100% {
+            bottom: 200px;
+          }
+        }
+      }
+    }
+    .infos {
+      height: 260px;
+      display: flex;
+      > div {
+        flex: 1;
+      }
+    }
     .card {
       .card-title {
         margin-bottom: 20px;
@@ -239,14 +286,6 @@ export default {
         }
       }
     }
-
-    .infos {
-      height: 260px;
-      display: flex;
-      > div {
-        flex: 1;
-      }
-    }
   }
   .green {
     color: #35d17e;