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">
                <div class="col-1 bg-success"></div>
                <div class="col-1">空箱</div>
                <div class="col-1 bg-danger offset-5"></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:(100-val)+'%'}">@{{(100-val)+'%'}}</div>
                            <div class="progress-bar bg-success" :style="{width:val+'%'}">@{{ val+'%' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include("station.monitor._loadDetail")
    </div>
@endsection

@section('lastScript')
    <script>
        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,
            },
            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 = 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);
                    window.tempTip.postBasicRequest("{{url('station/monitor/visual/getData')}}",{arr:arr},res=>{
                        this.$set(this.data,index-1,res);
                    });
                },
                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;
                            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;//加载完毕
                    });
                },
            }
        });
    </script>
@endsection