src/views/modules/work/OperationMonitor.vue

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