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

@extends('layouts.app')
@section('title'){{$station->name}} - 监视器 - 站@endsection

@section('content')
    <div id="nav2">
        @component('station.menu')
        @endcomponent
        @component('station.monitor.menu')
            <li class="nav-item">
                <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('{{$station->id}}',3)}">显示：{{$station->name}}</a>
            </li>
        @endcomponent
    </div>
    <div class="container-fluid body" id="container">
        <div class="card">
            <div class="card-body">
                <div class="row border" style="opacity: 0.75">
                    <div class="col-4 text-center h3 py-2 font-weight-bold text-info position-relative">
                        宝时云仓
                    </div>
                    <div class="col text-center  h3 py-2 text-muted">
                        智能分拣
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-4">
                        <div class="row">
                            <div class="col py-3 h4">
                                <div class="row">
                                    <div class="col">选择执行波次：</div>
                                </div>
                                <div class="row" v-if="current_stationTaskBatch">
                                    <div class="col font-weight-bold text-center position-relative"
                                         :style="[
                                                    {opacity:
                                                        current_stationTaskBatch.status==='完成'?'0.5':'1'
                                                    },
                                                ]"
                                         :class="[
                                            (current_stationTaskBatch.runningStatus==='')?'text-info':'',
                                            (current_stationTaskBatch.runningStatus==='请求中')?'text-dark':'',
                                            (current_stationTaskBatch.runningStatus==='请求失败')?'text-danger':'',
                                            (current_stationTaskBatch.runningStatus==='请求成功')?'text-success':'',
                                            (current_stationTaskBatch.runningStatus==='请求异常')?'text-danger':'',
                                         ]"
                                    >
                                        <div class="text-center mt-2">@{{ current_stationTaskBatch.batch.code }}</div>
                                        <div class="text-center" style="font-size: 12px;">
                                            @{{ current_stationTaskBatch.batch.owner.name }}
                                        </div>
                                        <div class="col text-muted text-left">
                                            <img id="barcode" :alt="batchCode">
                                        </div>
                                    </div>
                                    <div class="col text-center">
                                        <button class="btn btn-lg mt-4" @click="runTheTaskBatch()"
                                                :class="[
                                            (current_stationTaskBatch.runningStatus==='')?'btn-info':'',
                                            (current_stationTaskBatch.runningStatus==='请求中')?'btn-dark':'',
                                            (current_stationTaskBatch.runningStatus==='请求失败')?'btn-danger':'',
                                            (current_stationTaskBatch.runningStatus==='请求成功')?'btn-success':'',
                                            (current_stationTaskBatch.runningStatus==='请求异常')?'btn-danger':'',
                                         ]"
                                        >
                                            <span v-if="!current_stationTaskBatch.runningStatus">执行</span>
                                            <span v-if="current_stationTaskBatch.runningStatus==='请求中'">请求中</span>
                                            <span v-if="current_stationTaskBatch.runningStatus==='请求失败'">(失败)重新执行</span>
                                            <span v-if="current_stationTaskBatch.runningStatus==='请求成功'">(请求成功)重新执行</span>
                                            <span v-if="current_stationTaskBatch.runningStatus==='请求异常'">(请求异常)重新执行</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="text-center my-2" style="overflow-y: scroll;max-height:200px;">
                                    <div class="flex flex-column flex-wrap" v-if="stationTaskBatches">
                                        <button v-for="stationTaskBatch in stationTaskBatches"
                                                @click="selectBatch(stationTaskBatch)"
                                                class="btn"
                                                :class="[
                                                    (current_stationTaskBatch&&current_stationTaskBatch.id===stationTaskBatch.id)?'btn-outline-info':'btn-outline-dark',
                                                ]"
                                                :style="[
                                                    {opacity:
                                                        stationTaskBatch.status==='完成'?'0.5':'1'
                                                    },
                                                ]"
                                        >
                                            @{{stationTaskBatch.batch.code | simplifyBatchCode}}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col py-3 h4">
                                料箱号：
                                <div v-if="task&&processingTaskMaterialBox">
                                    @{{processingTaskMaterialBox.material_box.code}}
                                </div>
                            </div>
                        </div>
                        <div class="row pt-2">
                            <div class="col text-center">
                                <svg class="box-display" width="300" height="160" viewBox="0 0 300 160">
                                    <rect x="0" y="80" width="300" height="80"
                                          style="fill:#ffffff;stroke-width:3;stroke:rgb(11,51,71)"/>
                                    <polygon points="0,80 50,0 250,0 300,80"
                                             style="fill:#ffffff;stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.single.status"
                                             class="spot single" points="0,80 50,0 250,0 300,80"
                                             :class="[
                                                grids.single.status==='启用'?'normal':'',
                                                grids.single.status==='处理中'?'box-spot-color n1':'',
                                             ]"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />


                                    <polygon v-if="grids.half.left.status"
                                             class="spot half-left" points="0,80 50,0 150,0 150,80"
                                             :class="[
                                                grids.half.left.status==='启用'?'normal':'',
                                                grids.half.left.status==='处理中'?'box-spot-color n1':'',
                                             ]"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.half.right.status"
                                             class="spot half-right" points="150,0 150,80 300,80 250,0"
                                             :class="[
                                                grids.half.right.status==='启用'?'normal':'',
                                                grids.half.right.status==='处理中'?'box-spot-color n2':'',
                                             ]"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />

                                    <polygon v-if="grids.quarter.left.top.status"
                                             :class="[
                                                grids.quarter.left.top.status==='启用'?'normal':'',
                                                grids.quarter.left.top.status==='处理中'?'box-spot-color n1':'',
                                             ]"
                                             class="spot quarter-left-top" points="29.17,33.33 50,0 150,0 150,33.33"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.quarter.left.bottom.status"
                                             :class="[
                                                grids.quarter.left.bottom.status==='启用'?'normal':'',
                                                grids.quarter.left.bottom.status==='处理中'?'box-spot-color n2':'',
                                             ]"
                                             class="spot quarter-left-bottom" points="0,80 29.17,33.33 150,33.33 150,80"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />

                                    <polygon v-if="grids.quarter.right.top.status"
                                             :class="[
                                                grids.quarter.right.top.status==='启用'?'normal':'',
                                                grids.quarter.right.top.status==='处理中'?'box-spot-color n3':'',
                                             ]"
                                             class="spot quarter-right-top" points="150,33.33 150,0 250,0 270.83,33.33"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.quarter.right.bottom.status"
                                             :class="[
                                                grids.quarter.right.bottom.status==='启用'?'normal':'',
                                                grids.quarter.right.bottom.status==='处理中'?'box-spot-color n4':'',
                                             ]"
                                             class="spot quarter-right-bottom" points="150,33.33 150,80 300,80 270.83,33.33"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />

                                    <polygon v-if="grids.sixth.left.top.status"
                                             :class="[
                                                grids.sixth.left.top.status==='启用'?'normal':'',
                                                grids.sixth.left.top.status==='处理中'?'box-spot-color n1':'',
                                             ]"
                                             class="spot sixth-left-top" points="29.17,33.33 50,0 117,0 110.39,33.33"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.sixth.left.bottom.status"
                                             :class="[
                                                grids.sixth.left.bottom.status==='启用'?'normal':'',
                                                grids.sixth.left.bottom.status==='处理中'?'box-spot-color n2':'',
                                             ]"
                                             class="spot sixth-left-bottom" points="0,80 29.17,33.33 110.39,33.33 100,80"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />

                                    <polygon v-if="grids.sixth.mid.top.status"
                                             :class="[
                                                grids.sixth.mid.top.status==='启用'?'normal':'',
                                                grids.sixth.mid.top.status==='处理中'?'box-spot-color n3':'',
                                             ]"
                                             class="spot sixth-mid-top" points="117,0 110.39,33.33 191.61,33.33 185.5,0"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.sixth.mid.bottom.status"
                                             :class="[
                                                grids.sixth.mid.bottom.status==='启用'?'normal':'',
                                                grids.sixth.mid.bottom.status==='处理中'?'box-spot-color n4':'',
                                             ]"
                                             class="spot sixth-mid-bottom" points="110.39,33.33 100,80 200,80 191.61,33.33"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.sixth.right.top.status"
                                             :class="[
                                                grids.sixth.right.top.status==='启用'?'normal':'',
                                                grids.sixth.right.top.status==='处理中'?'box-spot-color n5':'',
                                             ]"
                                             class="spot sixth-right-top" points="191.61,33.33 185.5,0 250,0 270.83,33.33"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                    <polygon v-if="grids.sixth.right.bottom.status"
                                             :class="[
                                                grids.sixth.right.bottom.status==='启用'?'normal':'',
                                                grids.sixth.right.bottom.status==='处理中'?'box-spot-color n6':'',
                                             ]"
                                             class="spot sixth-right-bottom" points="200,80 191.61,33.33 270.83,33.33 300,80"
                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
                                </svg>
                                <div class="text-left">
                                    <div >
                                        <div class="btn btn-outline-info" @click="
                                        (inputs.manuallyTakeBox.visible=!inputs.manuallyTakeBox.visible)
                                        &&(inputs.manuallyTakeBox.text='')">手动出库</div>
                                        <div class="position-relative bg-white" v-if="inputs.manuallyTakeBox.visible">
                                <textarea  name="" id="" cols="30" rows="3" class="form-control" v-model="inputs.manuallyTakeBox.text"
                                           placeholder="点选此处写入料箱号，可以省略IDE前缀和0，多个用空格分隔，例入：5121 156"></textarea>
                                            <button class="btn btn-info btn-lg" @click="manuallyTakeBoxOut">出库</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col text-center">
                        <div class="d-flex flex-row justify-content-between" style="gap: 10px;" v-if="taskCommoditiesListByWall.length">
                            <div class="border h4 d-flex flex-column-reverse flex-grow-1" v-for="wall in taskCommoditiesListByWall">
                                <div class="d-flex flex-row" v-for="row in wall">
                                    <div class="border p-1 flex-grow-1" v-for="column in row"
                                         :class="[
                                            column.status?'':'small text-muted',
                                            column.status==='待处理'?'small text-muted':'',
                                            column.status==='异常'?'bg-danger':'',
                                            column.status==='处理队列'?'font-weight-bold':'',
                                            column.status==='完成'?'small text-muted bg-success':'',
                                            column.status==='处理中' && !column.taskCommodity.material_box_position?'font-weight-bold bg-primary':'',
                                            column.status==='处理中' && column.taskCommodity.material_box_position===1?'font-weight-bold box-spot-color n1':'',
                                            column.status==='处理中' && column.taskCommodity.material_box_position===2?'font-weight-bold box-spot-color n2':'',
                                            column.status==='处理中' && column.taskCommodity.material_box_position===3?'font-weight-bold box-spot-color n3':'',
                                            column.status==='处理中' && column.taskCommodity.material_box_position===4?'font-weight-bold box-spot-color n4':'',
                                            column.status==='处理中' && column.taskCommodity.material_box_position===5?'font-weight-bold box-spot-color n5':'',
                                            column.status==='处理中' && column.taskCommodity.material_box_position===6?'font-weight-bold box-spot-color n6':'',
                                         ]"
                                         :style="{
                                            opacity:column.status?1:0.5,
                                         }">
                                        <span class="d-inline-block"  style="width: 36px;">
                                            @{{column.number}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col flex text-left">
                                <span class="" style="opacity: 0.6"> 数量：</span>
                                <span class="font-weight-bold">@{{ processedCommodities }}</span>
                                /
                                <span class="text-muted">@{{ totalCommodities }}</span>
                            </div>
                            <div class="col-1 offset-2 text-muted" v-if="error">异常：</div>
                            <div class="col-6" v-if="error">@{{ error }}</div>
                        </div>
                        <div class="row">
                            <div class="col py-1">
                                <table class="table table-hover border table-sm" style="opacity: 0.85" v-if="taskCommodities">
                                    <tr class="text-muted">
                                        <th class="py-2">序号</th>
                                        <th class="py-2">商品</th>
                                        <th class="py-2">数量</th>
                                        <th class="py-2">条码</th>
                                    </tr>
                                    <tr class="" v-for="(taskCommodity,i) in taskCommodities" :class="[
                                        taskCommodity.status==='待处理'?'text-muted':'',
                                        taskCommodity.status==='挂起'?'bg-white':'',
                                        taskCommodity.status==='处理队列'?'font-weight-bold':'',
                                        taskCommodity.status==='完成'?'bg-success':'',
                                        taskCommodity.status==='异常'?'bg-danger':'',
                                        taskCommodity.status==='取消'?'text-muted':'',
                                        taskCommodity.status==='处理中' && !taskCommodity.material_box_position?'bg-primary':'',
                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===1?'box-spot-color n1':'',
                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===2?'box-spot-color n2':'',
                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===3?'box-spot-color n3':'',
                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===4?'box-spot-color n4':'',
                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===5?'box-spot-color n5':'',
                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===6?'box-spot-color n6':'',
                                        ]">
                                        <td style="opacity: 0.6">@{{ i+1 }}</td>
                                        <td>@{{ taskCommodity.commodity.name }}</td>
                                        <td>@{{ taskCommodity.amount }}</td>
                                        <td><small class="font-weight-bold" v-for="barcode in taskCommodity.commodity.barcodes">@{{ barcode.code }}</small><br></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .spot.normal{
            fill: #fff;
        }
        .box-spot-color{
            color: #fff;
        }
        .box-spot-color.n1{
            background: #d7e3ff;
            fill: #d7e3ff;
        }
        .box-spot-color.n2{
            background: #393409;
            fill: #393409;
        }
        .box-spot-color.n3{
            background: #391709;
            fill: #391709;
        }
        .box-spot-color.n4{
            background: #092039;
            fill: #092039;
        }
        .box-spot-color.n5{
            background: #390931;
            fill: #390931;
        }
        .box-spot-color.n6{
            background: #1a0106;
            fill: #1a0106;
        }

    </style>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
    <script>
        $vue=new Vue({
            el:"#container",
            data:{
                taskBroadcastName : "{{config('database.redis.options.prefix').'station-'.$station->id}}",
                allTaskBroadcastName : "{{config('database.redis.options.prefix').'station-0'}}",
                channelName : ".App\\Events\\BroadcastToStation",
                error:"",
                station:{!! $station !!},
                inputs:{
                    manuallyTakeBox:{
                        visible:false,
                        text:'',
                    }
                },
                current_stationTaskBatch: null,
                stationTask_indexByBatch: [],
                stationTaskBatch_index: [],
                grids:{
                    single:{status:'',},
                    half:{
                        left:{status:'',},
                        right:{status:'',}
                    },
                    quarter:{
                        left:{top:{status:'',},bottom:{status:'',},},
                        right:{top:{status:'',},bottom:{status:'',},},
                    },
                    sixth:{
                        left:{top:{status:'',},bottom:{status:'',},},
                        mid:{top:{status:'',},bottom:{status:'',},},
                        right:{top:{status:'',},bottom:{status:'',},},
                    },
                },
            },
            mounted() {
                this._makeMenuHiding();
                initEcho();
                this._listenTaskBroadcast();
                this._listenAllTaskBroadcast();
            },
            methods:{
                _makeMenuHiding(){
                    $('.navbar,.nav1,.nav2').hide();
                    $('.nav3').on('mouseenter', function () {
                        $('.navbar,.nav1,.nav2').show();
                    });
                    $('.body').on('mouseenter', function () {
                        $('.navbar,.nav1,.nav2').hide();
                    });
                },
                _listenTaskBroadcast(){
                    let _this=this;
                    console.log(this.taskBroadcastName,this.channelName);
                    window.Echo.channel(this.taskBroadcastName).listen(this.channelName,(msg)=> {
                        console.log('1:',(new Date()).toTimeString(),msg);
                        let taskIn = JSON.parse(msg.json);
                        if(!taskIn||taskIn.length===0)return;
                        taskIn['station_task_batches'].forEach(function(station_task_batch){
                            let taskOld=_this.stationTask_indexByBatch[station_task_batch['batch_id']];
                            if(typeof(taskOld)==='undefined')return;
                            for(let key in taskIn){
                                if(taskIn.hasOwnProperty(key)){
                                    if(taskOld[key].hasOwnProperty(key)){
                                        taskOld[key]=taskIn[key]
                                    }
                                }
                            }
                        });
                    });
                },
                _listenAllTaskBroadcast(){
                    let _this=this;
                    console.log(this.allTaskBroadcastName,this.channelName);
                    window.Echo.channel(this.allTaskBroadcastName).listen(this.channelName,(msg)=> {
                        console.log('2:',(new Date()).toTimeString(),msg);
                        let stationTasksIn = JSON.parse(msg.json);
                        if(!stationTasksIn||stationTasksIn.length===0)return;
                        stationTasksIn.forEach(function(stationTaskIn){
                            let stationTaskIn_toAdd=stationTaskIn;
                            _this.stationTasks.forEach(function(stationTask){
                                if(stationTask.id===stationTaskIn.id){
                                    for(let key in stationTaskIn){
                                        if(stationTaskIn.hasOwnProperty(key)){
                                            if(stationTask[key].hasOwnProperty(key)){
                                                stationTask[key]=stationTaskIn[key]
                                            }
                                        }
                                    }
                                    stationTaskIn_toAdd=null;
                                }
                            });
                            if(stationTaskIn_toAdd){
                                _this.station.station_tasks_today.push(stationTaskIn_toAdd);
                            }
                        })

                    });
                },
                selectBatch(stationTaskBatch){
                    this.current_stationTaskBatch=stationTaskBatch;
                    if(typeof(this.current_stationTaskBatch.runningStatus)==='undefined')
                        this.current_stationTaskBatch.runningStatus=''
                },
                manuallyTakeBoxOut(){
                    let _this=this;
                    if(typeof(window.manuallyHairouRequesting)==='undefined'
                        ||window.manuallyHairouRequesting===false){
                        window.manuallyHairouRequesting=true;
                    }else{return;}
                    let text = this.inputs.manuallyTakeBox.text.trim();
                    if(!text){
                        alert('请输入料箱号')
                        return
                    }
                    axios.post('{{url('/api/thirdPart/haiq/storage/takeOutToULine')}}',{codes:text})
                        .then(function(response){
                            tempTip.okWindow(response.data.result,'确定')
                        }).catch(function(err){
                        tempTip.okWindow(err,'确定')
                    }).finally(function(){
                        _this.inputs.manuallyTakeBox.text='';
                        window.manuallyHairouRequesting=false;
                    })
                },
                runTheTaskBatch(){
                    let _this=this;
                    _this.current_stationTaskBatch.runningStatus='请求中';
                    _this.$forceUpdate();
                    axios.post('{{url('/api/thirdPart/haiq/runTaskBatch')}}',{station_task_batch_id:_this.current_stationTaskBatch.id})
                        .then(function(response){
                            if(!response.data.success){
                                _this.current_stationTaskBatch.runningStatus='请求失败';
                                return;
                            }
                            _this.current_stationTaskBatch.runningStatus='请求成功'
                        }).catch(function(err){
                        _this.current_stationTaskBatch.runningStatus='请求异常'
                        tempTip.okWindow(err+'： 服务器代码出错，请联系开发部门负责人','确定')
                    }).finally(function(){
                        _this.$forceUpdate();
                    });
                },
            },
            computed:{
                task(){
                    if(!this.current_stationTaskBatch||typeof(this.stationTask_indexByBatch['_'+this.current_stationTaskBatch.batch_id])==='undefined')return null;
                    return this.stationTask_indexByBatch['_'+this.current_stationTaskBatch.batch_id];
                },
                stationTasks(){
                    if(!this.station)return;
                    return this.station.station_tasks_today;
                },
                stationTaskBatches(){
                    if(!this.stationTasks)return;
                    let _this=this;
                    let stationTaskBatches=[];
                    this.stationTasks.forEach(function(stationTask){
                        if(!stationTask.station_task_batches)return;
                        stationTask.station_task_batches.forEach(function(stationTaskBatch){
                            if(typeof(_this.stationTaskBatch_index['_'+stationTaskBatch.batch_id])==='undefined'){
                                // if(stationTaskBatch_index['_'+stationTaskBatch.batch_id]['status']==='完成')return;
                                stationTaskBatches.push(stationTaskBatch)
                                _this.stationTaskBatch_index['_'+stationTaskBatch.batch_id]=stationTaskBatch;
                                _this.stationTask_indexByBatch['_'+stationTaskBatch.batch_id]=stationTask;
                            }
                        })
                    });
                    return stationTaskBatches;
                },
                batchCode(){
                    let _this=this;
                    if(!this.current_stationTaskBatch)return;
                    if(typeof(this.current_stationTaskBatch)!=='undefined'
                        && typeof(this.current_stationTaskBatch.batch)!=='undefined'
                    ){
                        setTimeout(function (){
                            setBarcode(_this.current_stationTaskBatch.batch.code,"#barcode",1,50,false);
                        })
                    }
                    return this.current_stationTaskBatch.batch.code;
                },
                taskCommodities(){
                    if(!this.task)return [];
                    return this.task['station_task_commodities'];
                },
                taskCommoditiesListByBin(){
                    if(!this.task)return [];
                    function reIndexByBin() {
                        this.taskCommoditiesListByBinVar = [];
                        this.taskCommoditiesListByBinVar.md5 = md5(JSON.stringify(this.task['station_task_commodities']));
                        let _this=this;
                        this.task['station_task_commodities']
                            .forEach(function (taskCommodity) {
                                if (typeof (_this.taskCommoditiesListByBinVar[taskCommodity['bin_number']]) === 'undefined') {
                                    _this.taskCommoditiesListByBinVar[taskCommodity['bin_number']] = null;
                                }
                                _this.taskCommoditiesListByBinVar[taskCommodity['bin_number']]=taskCommodity;
                            })
                        return this.taskCommoditiesListByBinVar;
                    }

                    if((typeof this.taskCommoditiesListByBinVar)==='undefined'||!this.taskCommoditiesListByBinVar){
                        return reIndexByBin.call(this);
                    }
                    let md5Now = md5(JSON.stringify(this.task['station_task_commodities']));

                    if(this.taskCommoditiesListByBinVar.md5!==md5Now){
                        return reIndexByBin.call(this);
                    }
                    return this.taskCommoditiesListByBinVar;
                },
                taskCommoditiesListByWall(){
                    if(!this.task)return [];
                    let columnLength=this.station.station_type_bin_monitor.bin_column_length,
                        rowLength=this.station.station_type_bin_monitor.bin_row_length,
                        wallAmount=this.station.station_type_bin_monitor.bin_wall_amount,
                        walls=[],
                        wall,
                        row;
                    for(let wI=0;wI<wallAmount;wI++){
                        wall=[];
                        for(let rI=0;rI<rowLength;rI++){
                            row=[];
                            for(let cI=0;cI<columnLength;cI++){
                                let number=((wI*rowLength+rI)*columnLength)+cI+1;
                                let commoditiesInBin={
                                    taskCommodity:this.taskCommoditiesListByBin[number],
                                    number:number,
                                    status:''
                                };
                                if(typeof(commoditiesInBin.taskCommodity)==='undefined'
                                    ||!commoditiesInBin.taskCommodity){
                                    commoditiesInBin.taskCommodity={};
                                }else{
                                    commoditiesInBin.status=commoditiesInBin.taskCommodity['status'];
                                }
                                row.push(commoditiesInBin);
                            }
                            wall.push(row);
                        }
                        walls.push(wall)
                    }
                    return walls
                },
                processedCommodities(){
                    if(!this.task)return 0;
                    let processedAmount=0;
                    this.task['station_task_commodities'].forEach(function (taskCommodity) {
                        if (taskCommodity.status === '完成') {
                            processedAmount+=taskCommodity.amount;
                        }
                    })
                    return processedAmount;
                },
                totalCommodities(){
                    if(!this.task)return 0;
                    let amount=0;
                    this.task['station_task_commodities'].forEach(function (taskCommodity) {
                        amount+=taskCommodity.amount;
                    })
                    return amount;
                },
                processingTaskMaterialBox(){
                    if(!this.task)return [];
                    let taskMaterialBox=null;
                    this.task.station_task_material_boxes.some(function(taskMaterialBox_in){
                        if(taskMaterialBox_in.status==='处理中'){
                            taskMaterialBox=taskMaterialBox_in;
                        }
                    });
                    return taskMaterialBox;
                },
            },
            watch:{
                'station':{
                    immediate:true,
                    deep:true,
                    handler:function(newStation){
                        let grids={
                            single:{status:'',amount:'',},
                            half:{
                                left:{status:'',amount:'',},
                                right:{status:'',amount:'',}
                            },
                            quarter:{
                                left:{top:{status:'',amount:'',},bottom:{status:'',amount:'',},},
                                right:{top:{status:'',amount:'',},bottom:{status:'',amount:'',},},
                            },
                            sixth:{
                                left:{top:{status:'',amount:'',},bottom:{status:'',amount:'',},},
                                mid:{top:{status:'',amount:'',},bottom:{status:'',amount:'',},},
                                right:{top:{status:'',amount:'',},bottom:{status:'',amount:'',},},
                            },
                        };
                        if(!newStation.current_station_task||newStation.current_station_task.length===0) {
                            this.grids=grids;
                            return;
                        }
                        let gridsAmount=(function(){
                                let taskMaterialBox=null;
                                newStation.current_station_task.station_task_material_boxes.some(function(taskMaterialBox_in){
                                    if(taskMaterialBox_in.status==='处理中'){
                                        taskMaterialBox=taskMaterialBox_in;
                                    }
                                });
                                if(!taskMaterialBox)return 1;
                                return taskMaterialBox.material_box.grid_amount;
                            }
                        )();
                        let positions=(function(){
                            let positions=[];
                            newStation.current_station_task['station_task_commodities'].forEach(function(taskCommodity){
                                if(taskCommodity.status==='处理中'){
                                    positions.push(taskCommodity.material_box_position)
                                }
                            });
                            return positions;
                        })();
                        switch (gridsAmount){
                            case 1:
                                if(positions.length>0){
                                    grids.single.status='处理中';
                                }break;
                            case 2:
                                positions.forEach(function(position){
                                    grids.half.left.status = '启用';
                                    grids.half.right.status = '启用';
                                    switch (position){
                                        case 1: grids.half.left.status = '处理中';break;
                                        case 2: grids.half.right.status = '处理中';break;
                                    }
                                });break;
                            case 4:
                                positions.forEach(function(position){
                                    grids.quarter.left.top.status = '启用';
                                    grids.quarter.right.top.status = '启用';
                                    grids.quarter.left.bottom.status = '启用';
                                    grids.quarter.right.bottom.status = '启用';
                                    switch (position){
                                        case 1: grids.quarter.left.top.status = '处理中';break;
                                        case 2: grids.quarter.left.bottom.status = '处理中';break;
                                        case 3: grids.quarter.right.top.status = '处理中';break;
                                        case 4: grids.quarter.right.bottom.status = '处理中';break;
                                    }
                                });break;
                            case 6:
                                positions.forEach(function(position){
                                    grids.sixth.left.top.status = '启用';
                                    grids.sixth.mid.top.status = '启用';
                                    grids.sixth.right.top.status = '启用';
                                    grids.sixth.left.bottom.status = '启用';
                                    grids.sixth.mid.bottom.status = '启用';
                                    grids.sixth.right.bottom.status = '启用';
                                    switch (position){
                                        case 1: grids.sixth.left.top.status = '处理中';break;
                                        case 2: grids.sixth.left.bottom.status = '处理中';break;
                                        case 3: grids.sixth.mid.top.status = '处理中';break;
                                        case 4: grids.sixth.mid.bottom.status = '处理中';break;
                                        case 5: grids.sixth.right.top.status = '处理中';break;
                                        case 6: grids.sixth.right.bottom.status = '处理中';break;
                                    }
                                });break;
                        }
                        this.grids=grids;
                    }

                },
            },
            filters:{
                simplifyBatchCode(val){
                    if(!val){return ''}
                    return val.replace(/W\d{6}0*/,'').trim()
                }
            }
        });
    </script>
@endsection