修改图表

hw-ui/src/views/board/production/secondFloor.vue

@@ -106,6 +106,56 @@
     <div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">{{ topData.diff[2] }}</div>
     <div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">{{ topData.diff[3] }}</div>
     <div class="state" :style="`background-color:${LineStatus?'#ffff00':'#ff0000'}`"></div>
+
+    <div class="status" style="top: 68%;left: 77%">当前楼层：{{ tsjData.currentFloor }}F</div>
+    <div class="status" style="top: 68%;left: 85%">状态：
+      <span style="color: #67C23A">{{ tsjData.elevatorStatus }}</span>
+    </div>
+    <div class="status" style="top: 68%;left: 93%">目标楼层：
+      <span style="color: #F56C6C">{{ tsjData.targetFloor }}F</span>
+    </div>
+    <div class="table2">
+      <div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 33%">
+          起始楼层
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 33%">
+          目标楼层
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 33%">
+          任务状态
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData1"
+        class="case-item"
+        style="height: calc(100% - 50px);overflow: hidden;font-size: 0.8vw"
+      >
+        <div
+          v-for="(item, index) in scrollTableData1"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem" style="width: 33%"
+            >
+              {{ item.currPointId }}F
+            </div>
+            <div
+              class="scrollTableItem" style="width: 33%"
+            >
+              {{ item.endPointId }}F
+            </div>
+            <div
+              class="scrollTableItem" style="width: 33%"
+            >
+              {{ item.taskStatusStr }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
   </div>
 </template>
 
@@ -121,6 +171,7 @@ import {
   workOrderProgress
 } from '@/api/board/secondFloorProduction'
 import { parseTime } from '@/utils/ruoyi'
+import { elevatorStatus } from '@/api/board/firstFloorProduction'
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
@@ -131,6 +182,7 @@ export default {
   },
   data() {
     return {
+      tsjData: {},
       LineStatus: true,
       topData: {
         planAmount: [0, 0, 0, 0],
@@ -196,7 +248,8 @@ export default {
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 0
       },
-      scrollTableData: []
+      scrollTableData: [],
+      scrollTableData1: []
     }
   },
   mounted() {
@@ -211,6 +264,10 @@ export default {
   },
   methods: {
     getData() {
+      elevatorStatus().then(e=>{
+        this.tsjData = e.data
+        this.scrollTableData1 = e.data?.wcsTaskList
+      })
       workOrderProgress().then(e => {
         console.log(e)
         this.scrollTableData = e.data.map((v, k) => {
@@ -800,9 +857,9 @@ export default {
 
 .chart4 {
   position: absolute;
-  top: 66%;
-  left: 73%;
-  width: 23.8%;
+  top: 29%;
+  left: 29%;
+  width: 41.8%;
   height: 29%;
 
 }
@@ -817,4 +874,20 @@ export default {
   border-radius: 50%;
   background-color: #ffff00;
 }
+.status {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-size: 1.1vw;
+  white-space: nowrap;
+  color: #eee;
+}
+.table2 {
+  position: absolute;
+  top: 71%;
+  left: 73%;
+  width: 23.5%;
+  height: 18.5%;
+  color: #fff;
+  font-size: 0.8vw
+}
 </style>