update

src/views/Elevator/components/LeftStatus.vue

@@ -2,26 +2,37 @@
   <div class="left-box">
     <div class="sheng">
       <p>升到位</p>
-      <p><i class="iconfont icon-zhengque"></i></p>
+      <p><i class="iconfont icon-zhengque" :class="{color:leftStatus == 'top'}"></i></p>
     </div>
     <div class="zhong">
       <div class="zhong-left">
         <div>上升中</div>
-        <div><i class="iconfont icon-shangshengzhong"></i></div>
+        <div><i class="iconfont icon-shangshengzhong" :class="{color:leftStatus == 'up'}"></i></div>
       </div>
       <div class="zhong-right">
-        <div><i class="iconfont icon-xiajiangzhong"></i></div>
+        <div><i class="iconfont icon-xiajiangzhong" :class="{color:leftStatus == 'down'}"></i></div>
         <div>下降中</div>
       </div>
     </div>
     <div class="jiang">
-      <p><i class="iconfont icon-zhengque"></i></p>
+      <p><i class="iconfont icon-zhengque" :class="{color:leftStatus == 'bottom'}"></i></p>
       <p>降到位</p>
     </div>
   </div>
 </template>
 
 <script setup lang='ts'>
+import { onMounted, onUnmounted, ref, reactive,watch } from 'vue'
+const prop = defineProps({
+  leftStatusObj: {
+    type: Object,
+    default: ''
+  },
+  leftStatus: {
+    type: String,
+    default: ''
+  }
+})
 </script>
 
 <style scoped>
@@ -60,4 +71,7 @@
     font-size: 50px;
     color: #ccc;
 }
+.color {
+  color: #00FFFF;
+}
 </style>

src/views/Elevator/index.vue

@@ -10,7 +10,7 @@
             <div class="l-content">
                 <div class="l-content-box">
                     <Border title="实时状态">
-                        <LeftStatus></LeftStatus>
+                        <LeftStatus :leftStatus="thatstatus"></LeftStatus>
                     </Border>
                 </div>
 
@@ -19,15 +19,15 @@
         <div class="center">
             <div class="left-column"></div>
             <div class="right-column"></div>
-            <div class="sec_floor" :class="{sec_door}">
+            <div class="sec_floor" :class="{ sec_door }">
                 <img src="./images/left.png" class="left-door" alt="">
                 <img src="./images/right.png" class="right-door" alt="">
             </div>
-            <div class="fir_floor" :class="{fir_door}">
+            <div class="fir_floor" :class="{ fir_door }">
                 <img src="./images/left.png" class="left-door" alt="">
                 <img src="./images/right.png" class="right-door" alt="">
             </div>
-            <div class="elevator">
+            <div class="elevator" :style="{ transform: 'translateY(' + y_px + 'px)' }">
                 <img src="./images/elevator.svg" alt="">
             </div>
         </div>
@@ -47,15 +47,33 @@
 </template>
 
 <script setup lang='ts'>
-import { onMounted, onUnmounted, ref, reactive } from 'vue'
+import { onMounted, onUnmounted, ref, reactive, watch } from 'vue'
 import Border from './components/Border.vue'
 import LeftStatus from './components/LeftStatus.vue'
 import Buttons from './components/Buttons.vue'
 import useNowTime from "@/hook/nowTime";
 let { timeHtml } = useNowTime();
 
-
-let thatstatus = ref(true)
+let timer = null;
+let leftStatusObj = {
+    'up': {
+        name: '上升中',
+        status: false
+    },
+    'down': {
+        name: '下降中',
+        status: false
+    },
+    'top': {
+        name: '升到位',
+        status: true
+    },
+    'bottom': {
+        name: '降到位',
+        status: false
+    }
+}
+let thatstatus = ref('top')
 //二楼电梯门
 let sec_door = ref(false)
 //一楼电梯门
@@ -82,6 +100,9 @@ let sec_floor = reactive([
         status: false
     }
 ])
+let y_px = ref(0)
+let max_px = 680;
+let min_px = 0;
 
 let fir_floor = reactive([
     {
@@ -101,6 +122,45 @@ let fir_floor = reactive([
     }
 ])
 
+watch(() => thatstatus.value, (val) => {
+    console.log(val)
+    if (val == 'up') {
+        elevatorUp('up')
+    } else if (val == 'down') {
+        elevatorUp('down')
+    } else if (val == 'top') {
+        elevatorUp('top')
+    } else if (val == 'bottom') {
+        elevatorUp('bottom')
+    }
+})
+
+/**
+ * 电梯上升/下降
+ */
+function elevatorUp(type) {
+    if (type == 'top') {
+        y_px.value = min_px
+        return
+    } else if (type == 'bottom') {
+        y_px.value = max_px
+        return
+    }
+    timer = setInterval(() => {
+        if (type == 'up') {
+            y_px.value -= 1
+            if (y_px.value <= min_px) {
+                clearInterval(timer)
+            }
+        } else if (type == 'down') {
+            y_px.value += 1
+            if (y_px.value >= max_px) {
+                clearInterval(timer)
+            }
+        }
+    }, 100)
+}
+
 
 onMounted(() => {
     document.getElementById('app').style.backgroundColor = '#000928'
@@ -154,16 +214,18 @@ onUnmounted(() => {
     box-sizing: border-box;
     border: 1px solid rgba(0, 255, 255, 1);
     border-radius: 20px;
-
+    overflow: hidden;
 }
 
 .elevator {
     width: 100%;
+    transition: all 0.5s ease;
 }
 
 .elevator img {
-    width: 70%;
+    height: 400px;
 }
+
 .left-column {
     position: absolute;
     width: 21px;
@@ -197,6 +259,7 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
     perspective: 2000px;
+    z-index: 1;
 }
 
 .fir_floor {
@@ -208,6 +271,7 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
     perspective: 2000px;
+    z-index: 1;
 }
 
 .left-door,
@@ -228,12 +292,14 @@ onUnmounted(() => {
     border-left: 1px solid rgb(8, 8, 8);
 }
 
-.sec_door .left-door,.fir_door .left-door {
+.sec_door .left-door,
+.fir_door .left-door {
     /* transform: rotateY(-140deg); */
     transform: translateX(-90%);
 }
 
-.sec_door .right-door,.fir_door .right-door {
+.sec_door .right-door,
+.fir_door .right-door {
     /* transform: rotateY(140deg); */
     transform: translateX(90%);
 }
@@ -307,5 +373,4 @@ onUnmounted(() => {
 .right .r-box {
     width: 482px;
     height: 328px;
-}
-</style>
+}</style>