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">宝时云仓</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="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col py-3 h4">
                                料箱号：
                                <div v-if="task&&task.station_task_material_boxes">
                                    <div v-for="taskMaterialBox in task.station_task_material_boxes">
                                        <span v-if="taskMaterialBox.status==='处理中'">
                                            @{{taskMaterialBox.material_box.code}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row pt-2">
                            <div class="col">
                                {{--                                @include("station.monitor._svg")--}}
                                <img src="{{asset('images/demoBin.png')}}" alt="" class="img">
                            </div>
                        </div>
                    </div>
                    <div class="col text-center">
                        <div class="d-flex flex-row justify-content-around" v-if="station&&station.station_type_bin_monitor">
                            <div class="border h4 d-flex flex-column-reverse flex-grow-1 m-1" v-for="(wIndex) in station.station_type_bin_monitor.bin_wall_amount">
                                <div class="d-flex flex-row" v-for="(rIndex) in station.station_type_bin_monitor.bin_row_length">
                                    <div class="border p-1 flex-grow-1" v-for="(cIndex) in station.station_type_bin_monitor.bin_column_length">
                                        <span class="d-inline-block" style="width: 36px;">
                                            @{{ wIndex*rIndex*cIndex|iteratedIndex }}
                                            <span v-if="taskCommoditiesListByBin">
                                                <span v-for="taskCommodity in taskCommoditiesListByBin[5]">
                                                    @{{ taskCommodity['commodity']['name'] }}
                                                </span>
                                            </span>

                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-1 text-left font-weight-bold">数量：</div>
                            <div class="col-2 text-left">@{{ processedCommodities }}/@{{ totalCommodities }}</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" v-if="task&& task.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="text-muted" v-for="(taskCommodity,i) in task.taskCommodities" :class="taskCommodity.status| commodityBgClass">
                                        <td>@{{ i+1 }}</td>
                                        <td>@{{ taskCommodity.name }}</td>
                                        <td>@{{ taskCommodity.amount }}</td>
                                        <td><small class="text-dark font-weight-bold" v-for="barcode in taskCommodity.barcodes">@{{ barcode.code }}</small><br></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@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').'presence-station-'.$station->id}}",--}}
                broadcastName : "{{config('database.redis.options.prefix').'station-'.$station->id}}",
                channelName : ".App\\Events\\BroadcastToStation",
                // task : {
                //     currentCommodityIndex : -1,
                //     taskCommodities:[
                //         /*{amount:"",binNumber:"",name:"",barcodes:[]},*/
                //     ],
                //     taskBatch:{
                //         batch:{
                //             code:"",
                //         },
                //     },
                //     box:{},
                //     sum : 0,
                //     currentSum : 0,
                // },
                // boxes:[],
                {{--stationTypeBinMonitors:[],--}}
                {{--stationTypeBinMonitor:{--}}
                {{--    row:Number("{{$stationTypeBinMonitor->bin_row_length}}"),--}}
                {{--    column:Number("{{$stationTypeBinMonitor->bin_column_length}}"),--}}
                {{--    amount:Number("{{$stationTypeBinMonitor->bin_wall_amount}}"),--}}
                {{--},--}}
                // color:"red",
                error:"",
                station:{!! $station??[] !!},
                {{--stationTypeBinMonitor:{!! $stationTypeBinMonitor !!},--}}
            },
            mounted() {
                this._makeMenuHiding();
                this._listenBroadcast();
                // this._renderingstationTypeBinMonitor(this.stationTypeBinMonitor.amount,this.stationTypeBinMonitor.row,this.stationTypeBinMonitor.column);
            },
            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(1231,msg)
                        let json = JSON.parse(msg.json);
                        console.log(json)
                        this._refreshData(json);
                    });
                },
                //刷新数据
                _refreshData(obj){
                    let task={};
                    task.taskCommodities = [];
                    task.sum = 0;
                    task.currentSum = 0;
                    task.currentCommodityIndex = "";
                    obj.station_task_commodities.forEach((taskCommodity,i)=> {
                        task.sum += Number(taskCommodity.amount);
                        if (taskCommodity.status === '完成') task.currentSum += Number(taskCommodity.amount);
                        if (taskCommodity.status === '处理中') task.currentCommodityIndex = i;
                        task.taskCommodities.push({
                            bg:this._setColor(taskCommodity.status),
                            amount:taskCommodity.amount,
                            binNumber:taskCommodity.bin_number,
                            name:taskCommodity.commodity?taskCommodity.commodity.name:'',
                            barcodes:taskCommodity.commodity?taskCommodity.commodity.barcodes:[],
                            materialBox:taskCommodity.material_box,
                        });
                    });
                    task.taskBatch=obj.station_task_batches[0];
                    setBarcode(task.taskBatch.batch.code,"#barcode",1,50,false);
                    console.log(task)
                    this.task = task;
                },
                // //渲染墙格口
                // _renderingstationTypeBinMonitor(amount, row, column){
                //     for (let i=0;i<amount;i++){
                //         this.stationTypeBinMonitors.push(this._createstationTypeBinMonitor(row, column, i*(row*column)));
                //     }
                // },
                _setColor(status){
                    switch (status) {
                        case "待处理":return "";
                        case "挂起"  :return "bg-white";
                        case "处理中"  :return "bg-primary";
                        case "完成"  :return "bg-success";
                        case "异常"  :return "bg-danger";
                        case "取消"  :return "bg-dark text-white";
                    }
                    return "";
                },
                //生成墙格口
                _createstationTypeBinMonitor(row, column, increment){
                    let stationTypeBinMonitor = [];
                    for (let i=1;i<=row;i++){
                        let columns = [];
                        for (let j=((i-1)*column)+1;j<=i*column;j++){
                            columns.push(j+increment);
                        }
                        stationTypeBinMonitor.unshift(columns);
                    }
                    return stationTypeBinMonitor;
                },
                //渲染料箱格口
                _renderingBox(row, column, x=79, y=72, width=21, height=12){
                    let boxes = [];
                    for (let i=0;i<column;i++){
                        for (let j=row-1;j>=0;j--){
                            if (boxes.length===5) boxes.push({x:((i+j)*width)+x,y:(y+(i*height))-(j*height),sign:true});
                            else boxes.push({x:((i+j)*width)+x,y:(y+(i*height))-(j*height),sign:false});
                        }
                    }
                    this.boxes = boxes;
                },
            },
            computed:{
                task(){
                    return this.station['current_station_task'];
                },
                taskCommoditiesListByBin(){
                    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']] = [];
                                }
                                _this.taskCommoditiesListByBinVar[taskCommodity['bin_number']].push(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;
                },
                processedCommodities(){
                    return 1;
                },
                totalCommodities(){
                    return 2;
                },
            },
            filters:{
                commodityBgClass(status){
                    switch (status){
                        case '待处理':return "";
                        case '挂起':return "bg-white";
                        case '处理队列':return "bg-dark text-white";
                        case '处理中':return "bg-primary";
                        case '完成':return "bg-success";
                        case '异常':return "bg-danger";
                        case '取消':return "text-muted";
                    }
                    return '';
                },
                iteratedIndex(targetNumber){
                    if(targetNumber===1||(typeof this.iteratedIndexVar)==='undefined'||!this.iteratedIndexVar){
                        this.iteratedIndexVar=targetNumber;
                    }else{
                        this.iteratedIndexVar++;
                    }
                    return this.iteratedIndexVar;
                },
                binBgClass(targetNumber){
                    if(targetNumber===1||(typeof this.iteratedIndexVar)==='undefined'||!this.iteratedIndexVar){
                        this.iteratedIndexVar=targetNumber;
                    }else{
                        this.iteratedIndexVar++;
                    }
                    return this.iteratedIndexVar;
                },
            }
        });
    </script>
@endsection