baoshi-was/resources/views/station/monitor/visual.blade.php

@extends('layouts.app')
@section('title')料箱分布 - 监视器@endsection

@section('content')
    <div class="container-fluid d-none" id="container">
        <div class="row mt-5 mb-5 text-center">
            <div class="col-6 offset-3 row">
                <b>总占有率：</b>
                <div class="progress w-75">
                    <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">
                <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 cursor-pointer" @click="getBoxes()">@{{ this.statistic.number3 }}</div>
                <div class="col-1">空箱</div>
            </div>
        </div>
        <div class="row bg-dark">
            <div class="col-6 row mt-2 mb-2" v-for="(arr,i) in data">
                <div class="offset-1 col-10 row">
                    <div style="width: 12.5%" v-for="(val,j) in arr">
                        <div class="progress mr-2" v-if="val===undefined">
                            <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[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>
            </div>
        </div>
        @include("station.monitor._loadDetail")
    </div>
@endsection

@section('lastScript')
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                rowSize:8, //单排大小：X列
                columnSize:4,//单列大小 X竖
                heightSize:10,//高度大小 X行
                maxLoadSize:18,//最大加载大小 X排
                data:[],//数据池
                prefix:"HAI",
                mapping:[],
                details:{}, //详情池
                detail:[],  //当前详情
                loadStatus:false,
                sum:0,
                quantity:0,
                val:0,
                statistic:{
                    sum : 0,//总量
                    number1 : 0,//空架
                    number2 : 0,//非空箱
                    number3 : 0,//空箱
                    np1:100,
                    np2:0,
                    np3:0,
                },
                blacklist:{
                    "HAI01-045-%":[
                        "HAI01-045-01",
                        "HAI01-045-02",
                        "HAI01-045-03",
                        "HAI01-045-04",
                    ],
                    "HAI01-046-%":[
                        "HAI01-046-01",
                        "HAI01-046-02",
                        "HAI01-046-03",
                        "HAI01-046-04",
                    ],
                    "HAI01-047-%":[
                        "HAI01-047-01",
                        "HAI01-047-02",
                        "HAI01-047-03",
                        "HAI01-047-04",
                    ],
                    "HAI01-048-%":[
                        "HAI01-048-01",
                        "HAI01-048-02",
                        "HAI01-048-03",
                        "HAI01-048-04",
                    ],
                },
            },
            mounted() {
                let data = [];
                for (let i=this.maxLoadSize;i>0;i--){
                    let arr = [];
                    for (let j=0;j<this.rowSize;j++){
                        arr.push(undefined);
                    }
                    data.push(arr);
                    this.loadData(i,data.length);
                }
                this.data = data;
                $("#container").removeClass("d-none");
            },
            methods:{
                loadData(row,index){
                    let size = this.rowSize*this.columnSize;
                    if (row%2!==0){
                        size *= 2;
                        row += 1;
                    }
                    row = row/2;
                    let len = row.toString().length;
                    let before = "00";
                    let location = (this.prefix+(len===2 ? (Math.ceil(row)).toString() :
                        before.substr(0,2-len)+(Math.ceil(row)).toString()))+'-';
                    let arr = [];
                    let temp = [];
                    for (let i=size-(this.rowSize*this.columnSize)+1;i<=size;i++){
                        temp.push(location+(before.substr(0,3-(i.toString().length))+i.toString())+"-%");
                        if (i%this.columnSize===0){arr.push(temp);temp = [];}
                    }
                    this.mapping.push(arr);
                    let max = this.columnSize * this.heightSize;
<<<<<<< HEAD
                    console.log(arr);
                    /*window.tempTip.postBasicRequest("{{url('station/monitor/visual/getData')}}",{arr:arr},res=>{
=======
                    window.tempTip.postBasicRequest("{{url('station/monitor/visual/getData')}}",{arr:arr},res=>{
>>>>>>> b0347ca84d8eeedd9c1ac88b1c55b77c6a0613e8
                        let sub = {};
                        arr.forEach((ar,i)=>{
                            for (let key in this.blacklist){
                                if (ar.indexOf(key)!==-1){
                                    if (!sub['_'+i])sub['_'+i] = this.blacklist[key].length;
                                    else sub['_'+i] += this.blacklist[key].length;
                                }
                            }
                        });
                        res.forEach((ar,i)=>{
                            let amount = max;
                            if (sub['_'+i])amount -= sub['_'+i];
                            let sum = Number(ar[0]);
                            let quantity = Number(ar[1]);
                            let number2 = Number(this.accSubtr(amount,sum));
                            let number3 = Number(this.accSubtr(sum,quantity));
                            let q1 = this.accDivCoupon(quantity,amount)
                            let q2 = this.accDivCoupon(number2,amount)
                            let q3 = this.accDivCoupon(number3,amount)
                            this.$set(this.data[index-1],i,[q1,q2,q3]);
                            this.statistic.sum += amount;
                            this.statistic.number1 += quantity;
                            this.statistic.number2 += number2;
                            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);
                        });
<<<<<<< HEAD
                    });*/
=======
                    });
>>>>>>> b0347ca84d8eeedd9c1ac88b1c55b77c6a0613e8
                },
                loadDetail(index,j){
                    $("#modal").modal('show');
                    let key = index+'-'+j;
                    if (this.details[key]){ //缓存池存在取缓存池 转为即时后关闭缓存池即可
                        this.detail = this.details[key];
                        return;
                    }
                    let arr = this.mapping[index][j];
                    let res = []; //扁平化的库位参数  一维数组
                    let before = "00";//前缀
                    let maxLen = 2;//最大高度 位数
                    let rowIndex = 0;//行下标记录
                    let mapping = {};//库位与数据池的下标映射
                    let detail = [];//数据池
                    for (let i=this.heightSize;i>0;i--){
                        let columnIndex = 0;//列下标记录
                        let detailTemp = [];//数据池第二维数组
                        let suffix = i.toString().length<maxLen ? before.substr(0,maxLen-i.toString().length)+i.toString() : i.toString();
                        for (let k=arr.length-1;k>=0;k--){
                            let val = arr[k].substr(0,arr[k].length-1)+suffix;
                            if (this.blacklist[arr[k]] && this.blacklist[arr[k]].indexOf(val)!==-1)continue;
                            res.push(val);
                            detailTemp.push({location:val,status:undefined});
                            mapping[val] = [rowIndex,columnIndex];
                            columnIndex++;
                        }
                        detail.push(detailTemp);
                        rowIndex++;
                    }//用对象将数据池结构组装占位，用mapping来映射库位与其应在数据池内的实际下标，拿到真实数据后根据映射进行填充
                    this.loadStatus = true;//开启加载动画
                    //启异步请求数据
                    window.tempTip.postBasicRequest("{{url('station/monitor/visual/getDetail')}}",{arr:res},res=>{
                        if (res){
                            res.forEach(obj=>{
                                if (mapping[obj.location]){
                                    detail[mapping[obj.location][0]][mapping[obj.location][1]] = obj;
                                }
                            });//真实数据查找映射填充
                        }
                        this.detail = detail;//扔进当前详情列表
                        this.details[key] = detail;//缓存结果
                        setTimeout(()=>{
                            this.details[key] = undefined;
                        },1800000);//缓存池半小时后清除
                        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;
                    }
                },
                getBoxes(){
                    console.warn("稍等下......");
                    $("#modal").hide();
                    for (let i=0;i<vue.data.length;i++){
                        for (let j=0;j<vue.data[i].length;j++){
                            if (vue.data[i][j][2]>0){
                                vue.loadDetail(i,j);
                            }
                        }
                    }
                    setTimeout(()=>{
                        let loc = [];
                        for (let key in vue.details){
                            for (let i=0;i<vue.details[key].length;i++){
                                for (let j=0;j<vue.details[key][i].length;j++){
                                    let obj = vue.details[key][i][j];
                                    if (obj.status===false){
                                        loc.push(obj.location);
                                    }
                                }
                            }
                        }
                        window.tempTip.postBasicRequest("{{url('station/monitor/visual/getBoxes')}}",{arr:loc},res=>{
                            console.log(res);
                        });
                    },3000)
                }
            },
            filters:{
                reduce(val){
                    let r2,m,n;
                    try{r2=val.toString().split(".")[1].length}catch(e){r2=0}
                    m=Math.pow(10,Math.max(0,r2));
                    n=(0>=r2)?0:r2;
                    return (((100*m-val*m)/m).toFixed(n))+"%";
                }
            }
        });
    </script>
@endsection