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>波次号：</div>
                                <div class=" text-center">
                                    <b v-if="task&&task.station_task_batches">
                                        <div v-for="taskBatch in task.station_task_batches">
                                            @{{ taskBatch.batch.code }}
                                        </div>
                                    </b>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col py-3 text-muted text-center">
                                <img id="barcode" alt="" :data-refresh="batchCode">
                            </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=true)
                                        &&(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:{
                broadcastName : "{{config('database.redis.options.prefix').'station-'.$station->id}}",
                channelName : ".App\\Events\\BroadcastToStation",
                error:"",
                station:{!! $station??[] !!},
                inputs:{
                    manuallyTakeBox:{
                        visible:false,
                        text:'',
                    }
                },
                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();
                this._listenBroadcast();
            },
            methods:{
                _makeMenuHiding(){
                    $('.navbar,.nav1,.nav2').hide();
                    $('.nav3').on('mouseenter', function () {
                        $('.navbar,.nav1,.nav2').show();
                    });
                    $('.body').on('mouseenter', function () {
                        $('.navbar,.nav1,.nav2').hide();
                    });
                },
                _listenBroadcast(){
                    initEcho();
                    window.Echo.channel(this.broadcastName).listen(this.channelName,(msg)=> {
                        console.log((new Date()).toTimeString(),msg);
                        let json = JSON.parse(msg.json);
                        if(!json||json.length===0)return;
                        this.station['current_station_task']=json;
                    });
                },
                manuallyTakeBoxOut(){
                    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='';
                    })
                },
            },
            computed:{
                task(){
                    if(!this.station['current_station_task'])return null;
                    return this.station['current_station_task'];
                },
                batchCode(){
                    if(!this.task)return;
                    let batches = this.task.station_task_batches;
                    if(batches
                        && Array.isArray(batches)
                        && batches.length>0
                    ){
                        setTimeout(function (){
                            setBarcode(batches[0].batch.code,"#barcode",1,50,false);
                        })
                    }
                    return batches[0].batch.code;
                },
                taskCommodities(){
                    if(!this.task)return [];
                    return this.station['current_station_task']['station_task_commodities'];
                },
                taskCommoditiesListByBin(){
                    if(!this.task)return [];
                    function reIndexByBin() {
                        this.taskCommoditiesListByBinVar = [];
                        this.taskCommoditiesListByBinVar.md5 = md5(JSON.stringify(this.station['current_station_task']['station_task_commodities']));
                        let _this=this;
                        this.station['current_station_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.station['current_station_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;
                    }

                },
            }
        });
    </script>
@endsection