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

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

@section('content')
    <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 h3 py-2 text-muted row">
                        <select class="form-control col-2 offset-4" id="station" @change="listenerStation()">
                            <option selected value=""></option>
                            <option v-for="station in stations" :value="station.code">
                                @{{ station.code }}
                            </option>
                        </select>
                        <span class="col-2">智能分拣</span>
                    </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>
                                        <label class="align-bottom mb-0 p-0">
                                            <input content="col-4" type="checkbox" class="switch" v-model="isCacheShelf"></input><br>
                                            <small class="mb-0 h6">缓存架</small>
                                        </label>
                                    </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">
                                    <g><rect x="0" y="80" width="300" height="80"
                                          style="fill:#ffffff;stroke-width:3;stroke:rgb(11,51,71)">
                                        </rect>
                                        <text x="10" y="135" font-family="Verdana" font-weight="bold" font-size="40" fill="green">
                                            @{{ box }}</text>
                                    </g>
                                    <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>
                                            <button class="btn btn-success btn-lg" @click="manuallyTakeBoxOutTwo">二期出库</button>
                                            <button class="btn btn-success btn-lg" @click="manuallyTakeBoxInTwo">二期入库</button>
                                            <button class="btn btn-sm btn-primary btn-lg" @click="paddingEmptyBox">填充空箱</button>
                                            <div class="row mt-1">
                                                <select class="form-control ml-3" v-model="type" style="width:150px">
                                                    <option v-for="strategy in strategies" :value="strategy.code">@{{ strategy.name }}</option>
                                                </select>
                                                <select class="form-control ml-1" v-model="stationCode" style="width:150px">
                                                    <option v-for="st in stations" :value="st.code">@{{ st.code }}</option>
                                                </select>
                                            </div>
                                        </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:"",
                isCacheShelf:false,
                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:'',},},
                    },
                },
                stations:[],
                baseUrl:"https://swms.baoshi56.com/",
                stationWs:null,
                prodNum:null,
                box:"",
                list:[],
                type:"",
                stationCode:"",
                strategies:[],
            },
            mounted() {
                this._makeMenuHiding();
                //initEcho();
                //this._listenTaskBroadcast();
                //this._listenAllTaskBroadcast();
                this._loadStation();
            },
            methods:{
                // 加载站点
                _loadStation(){
                    $.ajax({
                        url : this.baseUrl+"equipment/getSortingStationList",
                        type : "get",
                        success : (res,status)=>{
                            if (res.code === 200){
                                this.stations = res.data;
                                this.stationCode = this.stations[0].code;
                            } else {
                                window.tempTip.show(res.message);
                            }
                        },
                        error : (err,status)=>{
                            window.tempTip.show("分拣站信息获取失败");
                        },
                        timeout:3000,
                    })
                    $.ajax({
                        url : this.baseUrl+"device/robot/hairou/getStrategies",
                        type : "post",
                        success : (res,status)=>{
                            if (res.code === 200){
                                this.strategies = res.data;
                                this.type = this.strategies[0].code;
                            } else {
                                window.tempTip.show(res.message);
                            }
                        },
                        error : (err,status)=>{
                            window.tempTip.show("分配策略获取失败");
                        },
                        timeout:3000,
                    })
                },
                listenerStation(){
                   let val = document.getElementById("station").value;
                   // 手动关闭不重试
                   if (val === '' && this.stationWs != null){
                       this.stationWs.close();
                       window.clearInterval(this.prodNum);
                       this.list = null;
                       return;
                   }
                   this.stationWs = new WebSocket("wss://swms.baoshi56.com/ws/device/check/picking.info/"+val);
                   this.stationWs.onopen = (event=> {
                       console.info("Connection open success!");
                   });
                    this.stationWs.onmessage = (event => {
                        let obj = JSON.parse(event.data);
                        if(obj.dataType !== "heartbeat"){
                            this.box = obj.code;
                            let list = [];
                            let arr = (JSON.parse(obj.list));
                            if (arr && arr.length>0){
                                arr.forEach(info => {
                                    list.push({
                                        status : "待处理",
                                        commodity : {
                                            name : "",
                                            barcodes : [
                                                {code : info.barcode},
                                                {code : info.barcodeAs},
                                            ],
                                        },
                                        amount : info.quantity
                                    })
                                })
                            }
                            this.list = list;
                        }
                    });
                    this.stationWs.onerror = function (event) {
                        console.error(event);
                    };
                    this.prodNum = window.setInterval(()=>{
                        if (this.stationWs != null){
                            let obj = {
                                "requestId" : "stationListener",
                                "dataType" : "heartbeat",
                            };
                            this.stationWs.send(JSON.stringify(obj));
                        }
                    },15000);
                    // 被关闭就五秒后重试
                    this.stationWs.onclose = (event => {
                        window.clearInterval(this.prodNum);
                        setTimeout(()=>{
                            this.listenerStation();
                        },5000);
                    });
                },
                _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;
                    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;
                    window.Echo.channel(this.allTaskBroadcastName).listen(this.channelName,(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.unshift(stationTaskIn_toAdd);
                                _this.$forceUpdate();
                            }
                        })
                    });
                },
                selectBatch(stationTaskBatch){
                    if (this.current_stationTaskBatch!==stationTaskBatch)this.isCacheShelf = false;
                    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;
                    })
                },
                _waveOutBound(waveCode){
                    $.ajax({
                        url: this.baseUrl+"device/robot/hairou/task/createOutBound/picking?code="+waveCode
                            +"&strategy="+this.type+"&station="+this.stationCode,
                        type: "get",
                        success : (res,status)=>{
                            if (res.code === 200 && res.data){
                                window.tempTip.showSuccess("开始执行");
                            } else {
                                window.tempTip.show(res.message);
                            }
                        },
                        error : (err,status)=>{
                            window.tempTip.show("系统错误");
                        },
                        timeout:3000,
                    })
                },
                _formatBoxes(){
                    let arr = this.inputs.manuallyTakeBox.text.trim().split(/\s+/);
                    if (arr.length===0){
                        return;
                    }
                    let boxes = [];
                    arr.forEach(box=>{
                        if (box.length <= 10 && box.length > 0){
                            let before = "IDE0000000";
                            boxes.push(before.substring(0,before.length - box.length)+box);
                        }
                    });
                    return boxes;
                },
                manuallyTakeBoxInTwo(){
                    let boxes = this._formatBoxes();
                    if (boxes.length===0){
                        return;
                    }
                    window.tempTip.inputVal('请输入货主名称：',(code)=>{
                        let obj = {
                            "boxCodes":boxes,
                            "toLocations":null,
                            "owner":code,
                        }
                        $.ajax({
                            url: this.baseUrl+"device/robot/hairou/task/createInBound/custom",
                            type: "post",
                            headers: {'Content-Type':'application/json;charset=utf8'},
                            data: JSON.stringify(obj),
                            success : (res,status)=>{
                                if (res.code === 200 && res.data){
                                    window.tempTip.showSuccess("开始执行");
                                } else {
                                    window.tempTip.show(res.message);
                                }
                            },
                            error : (err,status)=>{
                                window.tempTip.show("系统错误");
                            },
                            timeout:3000,
                        })
                    });
                },
                manuallyTakeBoxOutTwo(){
                    if (this.inputs.manuallyTakeBox.text.length === 13 && this.inputs.manuallyTakeBox.text.substring(0,1) === "W"){
                        this._waveOutBound(this.inputs.manuallyTakeBox.text);
                        return;
                    }
                    let arr = this.inputs.manuallyTakeBox.text.trim().split(/\s+/);
                    if (arr.length===0){
                        return;
                    }
                    let boxes = this._formatBoxes();
                    if (boxes.length===0){
                        return;
                    }
                    let obj = {
                        "boxCodes":boxes,
                        "typeName":this.type,
                        "toLocation":this.stationCode
                    }
                    $.ajax({
                        url: this.baseUrl+"device/robot/hairou/task/createOutBound/custom",
                        type: "post",
                        headers: {'Content-Type':'application/json;charset=utf8'},
                        data: JSON.stringify(obj),
                        success : (res,status)=>{
                            if (res.code === 200 && res.data){
                                window.tempTip.showSuccess("开始执行");
                            } else {
                                window.tempTip.show(res.message);
                            }
                        },
                        error : (err,status)=>{
                            window.tempTip.show("系统错误");
                        },
                        timeout:3000,
                    })
                },
                paddingEmptyBox(){
                    window.tempTip.inputVal("调取数量",amount=>{
                        window.tempTip.postBasicRequest("{{url('/api/thirdPart/haiq/storage/paddingEmptyBox')}}",{amount:amount},res=>{
                            this.inputs.manuallyTakeBox.text = res;
                        });
                    });
                },
                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,isCacheShelf:this.isCacheShelf})
                        .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;
                                _this.stationTaskBatch_index['_'+stationTaskBatch.batch_id]=stationTaskBatch;
                                _this.stationTask_indexByBatch['_'+stationTaskBatch.batch_id]=stationTask;
                            }
                            stationTaskBatches.push(stationTaskBatch)
                        })
                    });
                    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.list)return this.list;
                    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