更新

src/views/modules/work/OperationMonitor.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-05-31 15:49:03
  * @LastEditors: zwq
- * @LastEditTime: 2022-06-06 15:27:38
+ * @LastEditTime: 2022-11-22 14:41:50
  * @Description:
 -->
 <template>
@@ -11,9 +11,8 @@
       style="width:100%;height:100%;border-bottom:1px dotted #ff0000;padding-bottom:10px"
     >
       <el-row :gutter="20">
-        <el-col :span="6"><div class="Ugui"></div></el-col>
-        <el-col :span="18">
-          <div class="zhigui">
+        <el-col :span="24">
+          <div class="zhigui" id="zhigui">
             <div class="car" id="car"></div>
           </div>
         </el-col>
@@ -358,8 +357,7 @@ export default {
         }
       ],
       car: '',
-      zhigui: '',
-      motion: ''
+      zhigui: ''
     }
   },
   created () {},
@@ -369,10 +367,24 @@ export default {
   methods: {
     init () {
       this.car = document.getElementById('car')
-      this.motion = setInterval(() => {
+      this.zhigui = document.getElementById('zhigui')
+      this.runCar()
+    },
+    runCar () {
+      const runCarInterval = setInterval(() => {
         this.car.style.left = this.car.offsetLeft - 1 + 'px'
         if (this.car.offsetLeft <= 0) {
-          clearInterval(this.motion)
+          clearInterval(runCarInterval)
+          this.backCar()
+        }
+      }, 100)
+    },
+    backCar () {
+      const backCarInterval = setInterval(() => {
+        this.car.style.left = this.car.offsetLeft + 1 + 'px'
+        if (this.zhigui.clientWidth - this.car.offsetLeft - this.car.offsetWidth <= 0) {
+          clearInterval(backCarInterval)
+          this.runCar()
         }
       }, 100)
     }
@@ -383,17 +395,11 @@ export default {
 <style scoped>
 .zhigui {
   height: 250px;
-  background: url("../../../assets/img/直轨.jpeg") repeat;
+  background: url("../../../assets/1.png") repeat;
   background-size: 100% 100%;
   padding-top: 100px;
   position: relative;
 }
-.Ugui {
-  height: 250px;
-  transform: rotate(180deg);
-  background: url("../../../assets/img/U轨道.jpeg") repeat;
-  background-size: 100% 100%;
-}
 .wareBody {
   margin: auto;
   height: 90%;
@@ -428,12 +434,12 @@ export default {
   background-color: #09bb07;
 }
 .car {
-  width: 50px;
-  height: 50px;
-  background-color: rgb(116, 79, 250);
-  background: url("../../../assets/img/car.jpeg") repeat;
+  width: 100px;
+  height: 100px;
+  background: url("../../../assets/2.png") repeat;
   background-size: 100% 100%;
   right: 0;
+  bottom: 40%;
   position: absolute;
 }
 .line {

src/views/modules/work/mttaskinfodet.vue

@@ -57,7 +57,7 @@
         align="center"
         label="终点">
         <template slot-scope="scope">
-          <span>{{ endPosition.find(item=>item.value === scope.row.targetPosition).label }}</span>
+          <span>{{ endPosition.find(item=>item.value === scope.row.targetPosition)?.label }}</span>
         </template>
       </el-table-column>
       <el-table-column