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">
                                波次号：<b>@{{ task.taskBatch.batch.code }}</b>
                            </div>
                            <div class="col py-3 h4">

                            </div>
                        </div>
                        <div class="row">
                            <div class="py-3 text-muted">
                                <img id="barcode" alt="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col py-3 h4">
                                料箱号：<b v-if="task.currentCommodityIndex!=-1">@{{task.taskCommodities[task.currentCommodityIndex]['materialBox']['code']}}</b>
                            </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="row">
                            <div class="col py-3 h4" v-for="wall in walls">
                                <table class="table border">
                                    <tr v-for="row in wall">
                                        <td class="border p-0" v-for="column in row"
                                            :class="task.currentCommodityIndex!=-1&&task.taskCommodities[task.currentCommodityIndex]['binNumber']==column ? 'bg-info' : ''">
                                            <span style="opacity:0.25">@{{ column }}</span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-1 text-left font-weight-bold">数量：</div>
                            <div class="col-2 text-left">@{{ task.sum }}/@{{ task.currentSum }}</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">
                                    <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.bg">
                                        <td>@{{ i+1 }}</td>
                                        <td>@{{ taskCommodity.name }}</td>
                                        <td>@{{ taskCommodity.amount }}</td>
                                        <td><small 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>
        new Vue({
            el:"#container",
            data:{
                broadcastName : "{{config('database.redis.options.prefix').'presence-station-'.$station->id}}",
                channelName : ".App\\Events\\BroadcastToStation",
                task : {
                    currentCommodityIndex : -1,
                    taskCommodities:[
                        /*{amount:"",binNumber:"",name:"",barcodes:[]},*/
                    ],
                    taskBatch:{
                        batch:{
                            code:"",
                        },
                    },
                    box:{},
                    sum : 0,
                    currentSum : 0,
                },
                boxes:[],
                walls:[],
                wall:{
                    row:Number("{{$wall->bin_row_length}}"),
                    column:Number("{{$wall->bin_column_length}}"),
                    amount:Number("{{$wall->bin_wall_amount}}"),
                },
                color:"red",
                error:"",
            },
            mounted() {
                $('.navbar,.nav1,.nav2').hide();
                $('.nav3').on('mouseenter', function () {
                    $('.navbar,.nav1,.nav2').show();
                });
                $('.body').on('mouseenter', function () {
                    $('.navbar,.nav1,.nav2').hide();
                });
                this._broadcast();
                this._renderingWall(this.wall.amount,this.wall.row,this.wall.column);
               /* this._renderingBox(3,5);*/
            },
            methods:{
                _broadcast(){
                    initEcho();
                    window.Echo.channel(this.broadcastName).listen(this.channelName,(msg)=> {
                        let json = JSON.parse(msg.json);
                        this._refreshData(json);
                    });
                },
                //刷新数据
                _refreshData(obj){
                    let task={};
                    task.taskCommodities = [];
                    task.sum = 0;
                    task.currentSum = 0;
                    task.currentCommodityIndex = "";
                    obj.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.task_batches[0];
                    setBarcode(task.taskBatch.batch.code,"#barcode",2,50,false);
                    this.task = task;
                },
                //渲染墙格口
                _renderingWall(amount, row, column){
                    for (let i=0;i<amount;i++){
                        this.walls.push(this._createWall(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 "";
                },
                //生成墙格口
                _createWall(row, column, increment){
                    let wall = [];
                    for (let i=1;i<=row;i++){
                        let columns = [];
                        for (let j=((i-1)*column)+1;j<=i*column;j++){
                            columns.push(j+increment);
                        }
                        wall.unshift(columns);
                    }
                    return wall;
                },
                //渲染料箱格口
                _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;
                },
            },
        });
    </script>
@endsection