修改图表

hw-ui/src/views/board/warehouse/fifthFloor.vue

@@ -181,7 +181,7 @@ export default {
               allowPointSelect: false,
               cursor: 'pointer',
               depth: 35,
-              startAngle: 45,y
+              startAngle: 45,
               size: 200,
               dataLabels: {
                 enabled: true,

hw-ui/src/views/board/warehouse/thirdFloor.vue

@@ -4,7 +4,10 @@
     <div class="headTitle">京源智能仓储监控平台</div>
     <div class="wareHouse">
       <div v-for="i in wareHouseData" class="list">
-        <div class="item" v-for="ii in i" :style="`background-color: ${ii.locationStatus==='1'?'#75f66e':'#999'};color: ${ii.locationStatus==='1'?'#000':'#fff'}`">{{ ii.locationCode }}</div>
+        <div class="item" v-for="ii in i"
+             :style="`background-color: ${ii.locationStatus==  '1'?'#75f66e':'#999'};color: ${ii.locationStatus=='1'?'#000':'#fff'}`"
+        >{{ ii.locationCode }}
+        </div>
       </div>
     </div>
     <div v-for="(i,k) in title"
@@ -112,12 +115,12 @@
     <!--    <div class="span" style="top: 67.6%;right: 53%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
     <!--    <div class="span" style="top: 50.6%;right: 8%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
     <!--    <div class="span" style="top: 67.6%;right: 8%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
-    <div class="span" style="top: 88.2%;right: 40%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>
+    <div class="span" style="top: 88.2%;right: 40%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">{{ locationData.notUse }}</div>
     <div class="span" style="top: 88.2%;left: 60%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">个</div>
-    <div class="span" style="top: 88.2%;left: 62%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">66%</div>
+    <div class="span" style="top: 88.2%;left: 62%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">{{ locationData.notUseRate }}%</div>
-    <div class="span" style="top: 88.2%;right: 20%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>
+    <div class="span" style="top: 88.2%;right: 20%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">{{ locationData.isUse }}</div>
     <div class="span" style="top: 88.2%;left: 80%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">个</div>
-    <div class="span" style="top: 88.2%;left: 82%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">66%</div>
+    <div class="span" style="top: 88.2%;left: 82%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">{{ locationData.isUseRate }}%</div>
   </div>
 </template>
 
@@ -168,7 +171,8 @@ export default {
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 0
       },
-      scrollTableData: []
+      scrollTableData: [],
+      locationData:{}
     }
   },
   mounted() {
@@ -188,21 +192,30 @@ export default {
       })
       locationStatus().then(e => {
         console.log(e)
+        let isUse = e.data.filter(v=> v.containerCode).length
+        console.log(isUse)
+        this.locationData = {
+          isUse:isUse,
+          notUse:e.data.length - isUse,
+          isUseRate : ((isUse / e.data.length)*100).toFixed(0),
+          notUseRate : (((e.data.length - isUse) / e.data.length)*100).toFixed(0)
+        }
+
         function groupArrayBySize(arr, groupSize) {
           if (!Array.isArray(arr) || typeof groupSize !== 'number' || groupSize <= 0) {
             throw new Error('Invalid input')
           }
 
-          const result = [];
+          const result = []
 
           for (let i = 0; i < arr.length; i += groupSize) {
-            result.push(arr.slice(i, i + groupSize));
+            result.push(arr.slice(i, i + groupSize))
           }
 
-          return result;
+          return result
         }
 
-        this.wareHouseData = groupArrayBySize(e.data, 30);
+        this.wareHouseData = groupArrayBySize(e.data, 30)
       })
       productCompleteCount().then(e => {
 
@@ -373,7 +386,6 @@ export default {
         })
       })
       productPlan().then(e => {
-        console.log(e)
         this.scrollTableData = e.data.map(v => {
           return {
             taskCode: v.taskCode,
@@ -461,6 +473,7 @@ export default {
   width: 33.3%;
   height: 32%;
 }
+
 .wareHouse {
   position: absolute;
   top: 37%;
@@ -470,10 +483,12 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
   .list {
     width: 100%;
     display: flex;
     justify-content: space-between;
+
     .item {
       display: inline-block;
       width: 2%;