空箱分析展示

app/Http/Controllers/StationController.php

@@ -64,7 +64,8 @@ SELECT COUNT(*) count FROM (SELECT SUM(QTY) qty FROM INV_LOT_LOC_ID WHERE
 TRACEID = '*' AND LOCATIONID IN {$codes} GROUP BY LOCATIONID) inv WHERE INV.qty!=0
 SQL;
             $count = DB::connection("oracle")->selectOne(DB::raw($sql))->count;
-            $res[] = intval($count/$len*1000)/10;
+            //$res[] = intval($count/$len*1000)/10;
+            $res[] = [$len,$count];
         }
         Cache::tags("loadBoxMonitor")->put($cacheKey,$res,1800);
         $this->success($res);

resources/views/station/monitor/visual.blade.php

@@ -7,15 +7,19 @@
             <div class="col-6 offset-3 row">
                 <b>总占有率：</b>
                 <div class="progress w-75">
-                    <div class="progress-bar bg-danger" :style="{width:val+'%'}">@{{ val+'%' }}</div>
-                    <div class="progress-bar bg-success" :style="{width:(100-val)+'%'}">@{{val|reduce}}</div>
+                    <div class="progress-bar bg-danger" :style="{width:statistic.np1+'%'}">@{{ statistic.np1+'%' }}</div>
+                    <div class="progress-bar bg-warning text-dark" :style="{width:statistic.np2+'%'}">@{{ statistic.np2+'%' }}</div>
+                    <div class="progress-bar bg-success" :style="{width:statistic.np3+'%'}">@{{ statistic.np3+'%' }}</div>
                 </div>
             </div>
             <div class="col-6 offset-3 row mt-5">
-                <div class="col-1 bg-success"></div>
-                <div class="col-1">空箱</div>
-                <div class="col-1 bg-danger offset-5"></div>
+                <b>共：@{{ this.statistic.sum }}</b>
+                <div class="col-1 bg-danger text-white ml-2 font-weight-bold">@{{ this.statistic.number1 }}</div>
                 <div class="col-1">非空</div>
+                <div class="col-1 bg-warning offset-2 text-dark font-weight-bold">@{{ this.statistic.number2 }}</div>
+                <div class="col-1">空架</div>
+                <div class="col-1 bg-success offset-2 text-white  font-weight-bold">@{{ this.statistic.number3 }}</div>
+                <div class="col-1">空箱</div>
             </div>
         </div>
         <div class="row bg-dark">
@@ -26,8 +30,9 @@
                             <div class="w-100 text-center d-inline-block"><i class="fa fa-spinner fa-pulse"></i></div>
                         </div>
                         <div class="progress mr-2" style="cursor: pointer" v-else @click="loadDetail(i,j)">
-                            <div class="progress-bar bg-danger" :style="{width:val+'%'}">@{{ val+'%' }}</div>
-                            <div class="progress-bar bg-success" :style="{width:(100-val)+'%'}">@{{val | reduce}}</div>
+                            <div class="progress-bar bg-danger" :style="{width:val[0]+'%'}">@{{ val[0]+'%' }}</div>
+                            <div class="progress-bar bg-warning" :style="{width:val[1]+'%'}">@{{ val[1]+'%' }}</div>
+                            <div class="progress-bar bg-success" :style="{width:val[2]+'%'}">@{{ val[2]+'%' }}</div>
                         </div>
                     </div>
                 </div>
@@ -55,6 +60,15 @@
                 sum:0,
                 quantity:0,
                 val:0,
+                statistic:{
+                    sum : 0,//总量
+                    number1 : 0,//空架
+                    number2 : 0,//非空箱
+                    number3 : 0,//空箱
+                    np1:100,
+                    np2:0,
+                    np3:0,
+                },
             },
             mounted() {
                 let data = [];
@@ -88,13 +102,26 @@
                         if (i%this.columnSize===0){arr.push(temp);temp = [];}
                     }
                     this.mapping.push(arr);
+                    let max = this.columnSize * this.heightSize;
                     window.tempTip.postBasicRequest("{{url('station/monitor/visual/getData')}}",{arr:arr},res=>{
-                        this.$set(this.data,index-1,res);
-                        res.forEach(val=>{
-                            this.sum += 100;
-                            this.quantity += Number(val);
+                        res.forEach((ar,i)=>{
+                            let sum = Number(ar[0]);
+                            let quantity = Number(ar[1]);
+                            let number1 = Number(this.accSubtr(max,sum));
+                            let number3 = Number(this.accSubtr(sum,quantity));
+                            let q1 = this.accDivCoupon(quantity,max)
+                            let q2 = this.accDivCoupon(number1,max)
+                            let q3 = this.accDivCoupon(number3,max)
+                            this.$set(this.data[index-1],i,[q1,q2,q3]);
+                            this.statistic.sum += max;
+                            this.statistic.number1 += number1;
+                            this.statistic.number2 += quantity;
+                            this.statistic.number3 += number3;
+                            this.statistic.np1 = this.accDivCoupon(this.statistic.number1,this.statistic.sum);
+                            this.statistic.np2 = this.accDivCoupon(this.statistic.number2,this.statistic.sum);
+                            this.statistic.np3 = this.accDivCoupon(this.statistic.number3,this.statistic.sum);
+                            console.log(this.statistic);
                         });
-                        this.val = Math.round((this.quantity/this.sum)*10000)/100;
                     });
                 },
                 loadDetail(index,j){
@@ -143,6 +170,26 @@
                         this.loadStatus = false;//加载完毕
                     });
                 },
+
+                 accSubtr(arg1,arg2){
+                    let r1,r2,m,n;
+                    try{r1=arg1.toString().split(".")[1].length;}catch(e){r1=0;}
+                    try{r2=arg2.toString().split(".")[1].length;}catch(e){r2=0;}
+                    m=Math.pow(10,Math.max(r1,r2));
+                    //动态控制精度长度
+                    n=(r1>=r2)?r1:r2;
+                    return ((arg1*m-arg2*m)/m).toFixed(n);
+                },
+                 accDivCoupon(arg1,arg2){
+                    let t1=0,t2=0,r1,r2;
+                    try{t1=arg1.toString().split(".")[1].length;}catch(e){}
+                    try{t2=arg2.toString().split(".")[1].length;}catch(e){}
+                    with(Math){
+                        r1=Number(arg1.toString().replace(".",""));
+                        r2=Number(arg2.toString().replace(".",""));
+                        return Math.round((r1/r2)*pow(10,t2-t1)*10000)/100;
+                    }
+                },
             },
             filters:{
                 reduce(val){