zhouzhendong
/
baoshi-was


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
							<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>入库区终端-入库预约</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <style>
        html{
            background: white;
            height: 100%;
            width: 100%;
        }
        .h-90{
            height: 90%;
        }
        .h-10{
            height: 10%;
        }
        #msg{
            width:266px;
            position: fixed;
            z-index:999;
            top: 49%;
            margin-top:-80px;
            left:50%;
            margin-left:-133px;
            background:#fff;
            box-shadow:5px 5px 8px #999;
            font-size:17px;
            color:#666;
            border:1px solid #f8f8f8;
            text-align: center;
            line-height: 2rem;
            display:inline-block;
            padding-bottom:20px;
            border-radius:5px;
        }
        #msg_top {
            background: #f8f8f8;
            padding: 5px 15px 5px 20px;
            text-align: left;
        }
        #msg_top span{
            font-size:22px;
            float:right;
            cursor:pointer;
        }
        #msg_cont{
            padding:15px 20px 20px;
            text-align:left;
        }
        #msg_clear{
            background:#8fc31f;
            float:right;
        }
        #msg_success{
            background:#2a9055;
            float:right;
        }
        .msg_btn{
            display:inline-block;
            color:#fff;
            padding:1px 15px;
            border-radius:2px;
            margin-right:15px;
            cursor:pointer;
        }
        hr{
            border: 2px solid #1b1e21;
            border-radius: 2px;
        }
        .modal-body-div{
            width: 30%;
            display: inline-block;
        }
        .modal-body-item{
            margin: 10px;
            border: 2px solid #aaaaaa;
            border-radius: 5px;
            height:100px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column
        }
        .modal-body-item-text{
            margin-left:10%;
            width: 80%;
        }
        .br-1{
            border-right:2px solid #aaaaaa;
        }
        table{
            border-top: 3px solid #1b1e21;
        }
    </style>
</head>
<body onload="initLoad()" class="h-100">
    <div class="container-fluid h-100 d-none" id="container">
        <div class="ml-5 h1 font-weight-bold mt-2 mb-0 h-10">
            <div class="h-5"></div>
            <div class="h-5 h6">
                <div class="font-weight-bold row">
                    <div class="col-2"><span class="fa fa-diamond text-info"></span>&nbsp;当天预约车辆：</div>
                    <div class="col-8 m-0">
                        <div class="progress">
                            <div class="progress-bar bg-info progress-bar-striped" :style="{width:(count.total>0 ? (count.work/count.total)*100 : 0)+'%'}">作业中：@{{ count.work }}</div>
                            <div class="progress-bar bg-secondary progress-bar-striped" :style="{width:(count.total>0 ? (count.notReached/count.total)*100 : 0)+'%'}">待送达：@{{ count.notReached }}</div>
                            <div class="progress-bar bg-success progress-bar-striped" :style="{width:(count.total>0 ? (count.success/count.total)*100 : 100)+'%'}">已完成：@{{ count.success }}</div>
                        </div>
                    </div>
                </div>
                <hr class="font-weight-bold">
            </div>
        </div>
        <div class="row h-90 mt-0">
            <div class="col-8 br-1">
                <div class="w-100 text-center">
                    <h1 class="font-weight-bold">当日预约</h1>
                </div>
                <table class="table w-100 h3">
                    <tr>
                        <th>货主</th>
                        <th>车牌/预约号</th>
                        <th>吨位/立方</th>
                        <th>特殊要求</th>
                        <th>预约时间</th>
                        <th>到场时间</th>
                        <th>状态</th>
                    </tr>
                    <tr v-for="data in list">
                        <td class="text-secondary">@{{ data.owner_name }}</td>
                        <td class="text-danger">@{{ data.license_plate_number }}</td>
                        <td class="text-secondary"><i v-if="data.tonne">@{{ data.tonne }}吨</i><br><i v-if="data.cubic_meter">@{{ data.cubic_meter }}立方</i></td>
                        <td class="text-primary">@{{ data.type }}</td>
                        <td class="text-secondary">@{{ data.period }}</td>
                        <td class="text-secondary">@{{ data.delivery_time }}</td>
                        <td :class="data.status == '未送达' ? 'text-dark' : (data.status=='作业中' ? 'text-primary' : 'text-success')">@{{ data.status }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-4">
                <div class="w-100 text-center">
                    <h2 class="font-weight-bold">后续预约</h2>
                </div>
                <table class="table w-100 h4">
                    <tr>
                        <th>货主</th>
                        <th>车牌/预约号</th>
                        <th>吨位/立方</th>
                        <th>特殊要求</th>
                        <th>预约时间</th>
                    </tr>
                    <tr v-for="data in nextList">
                        <td class="text-secondary">@{{ data.owner_name }}</td>
                        <td class="text-danger">@{{ data.license_plate_number }}</td>
                        <td class="text-secondary"><i v-if="data.tonne">@{{ data.tonne }}吨</i><br><i v-if="data.cubic_meter">@{{ data.cubic_meter }}立方</i></td>
                        <td class="text-primary">@{{ data.type }}</td>
                        <td class="text-secondary">@{{ data.period }}</td>
                        <td class="text-secondary">@{{ data.delivery_time }}</td>
                        <td :class="data.status == '未送达' ? 'text-dark' : (data.status=='作业中' ? 'text-primary' : 'text-success')">@{{ data.status }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="text-center font-weight-bold">选择仓库</div>
                    </div>
                    <div class="modal-body" id="modal-body"></div>
                    <div class="modal-footer">
                        <button class="btn btn-success" onclick="selectedWarehouse()"> 确 定 </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/utilities/qrcode.js') }}"></script>
<script type="text/javascript">
    var warehouses = [@foreach($warehouses as $warehouse)@json($warehouse),@endforeach];
    var warehouse = "{{$id}}";
    var selected = "";
    //初始化询问
    function initLoad() {
        if (!warehouse){
            let dom = document.getElementById("modal-body");
            for (let i=0;i<warehouses.length;i++){
                let div = document.createElement("div");
                div.className="modal-body-div";
                let div1 = document.createElement("div");
                div1.className="modal-body-item";
                div1.style.cursor = "pointer";
                div1.dataset.id = warehouses[i].id;
                div1.id = "warehouse-"+warehouses[i].id;
                if (i===0){
                    div1.className += " box-shadow-dark";
                    selected = "warehouse-"+warehouses[i].id;
                }
                div1.onclick = function(){
                    let dom = event.target;
                    while (!dom.id)dom = dom.parentElement;
                    if (dom.id===selected)return;
                    document.getElementById(selected).className = "modal-body-item";
                    document.getElementById(dom.id).className = "modal-body-item box-shadow-dark";
                    selected = dom.id;
                };
                let div2 = document.createElement("div");
                div2.className="modal-body-item-text";
                div2.innerText = warehouses[i].name;
                div1.appendChild(div2);
                div.appendChild(div1);
                dom.appendChild(div);
            }
            $("#modal").modal('show');
        }else alert("是否需要开启全屏?");
    }
    function selectedWarehouse() {
        if (!selected) return;
        warehouse = document.getElementById(selected).dataset.id;
        vue._initData();
        history.pushState(null,null,window.location.href+"?warehouse="+warehouse);
        $("#modal").modal('hide');
        alert("是否需要开启全屏?");
    }
    //重绘弹窗样式
    function alert(e){
        $("body").append('<div id="msg"><div id="msg_top">设置<span class="msg_close">×</span></div><div id="msg_cont">'+e+
            '</div><div class="msg_close msg_btn" id="msg_clear">取消</div><div class="msg_close msg_btn" id="msg_success" onclick="launchFullScreen()">确定</div></div>');
        $(".msg_close").click(function (){
            $("#msg").remove();
        });
    }
    //全屏
    function launchFullScreen() {
        let element = window.document.body;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
    let vue = new Vue({
        el:"#container",
        data:{
            list:[],
            nextList:[],
            key:"",
            baseUrl:"{{url('store/deliveryAppointment/delivery?k=')}}",
            QrCode : null,
            count : {
                total : 0,
                success : 0,
                notReached : 0,
                work : 0,
            },
        },
        mounted(){
            $("#container").removeClass("d-none");
            if (warehouse) this._initData();
            this._broadcast();
            /*this._getKey();
            setTimeout(()=>{
                //刷新密匙
                this._getKey()
            },this._getDiffDate());
            setInterval(()=>{
                this._createQrCode(this.baseUrl+this.base64());
            },60000);*/
        },
        methods:{
            _broadcast(){
                initEcho();
                window.Echo.channel('{{config('database.redis.options.prefix')}}delivery').listen('.car',(res)=>{this._sortData(res.delivery)})
            },
            _countChange(oldStatus,newStatus){
                switch (oldStatus) {
                    case '未送达':
                        this.count.notReached--;
                        break;
                    case '作业中':
                        this.count.work--;
                        break;
                }
                if (!oldStatus && newStatus)this.count.total++;
                switch (newStatus) {
                    case '未送达':
                        this.count.notReached++;
                        break;
                    case '作业中':
                        this.count.work++;
                        break;
                    case '已完成':
                        this.count.success++;
                        break;
                }
            },
            _formatObj(res){
                return {
                    "id"                    : res.id,
                    "license_plate_number"  : res.license_plate_number,
                    "driver_name"           : res.driver_name,
                    "driver_phone"          : res.driver_phone,
                    "cubic_meter"           : res.cubic_meter,
                    "tonne"                 : res.tonne,
                    "owner_name"            : res.owner_name,
                    "type"                  : res.type,
                    "period"                : res.period,
                    "delivery_time"         : res.delivery_time,
                    "status"                : res.status,
                };
            },
            _sortData(res){
                if (res.warehouse!=warehouse)return;
                if (res.change){
                    let continueMark = true;
                    switch (Number(res.old)) {
                        case 0:
                            switch (Number(res.new)) {
                                case 0:
                                    continueMark = false;
                                    break;
                                default:
                                    this.list.some((data,i)=>{
                                        if (data.id==res.id){
                                            this.$delete(this.list,i);
                                            return true;
                                        }
                                    });
                                    if (Number(res.old)===1) continueMark = false;
                                    break;
                            }
                            break;
                        case 1:
                            this.nextList.some((data,i)=>{
                                if (data.id==res.id){
                                    if (res.new!=1)this.$delete(this.nextList,i);
                                    else this.$set(this.nextList,i,this._formatObj(res));
                                    return true;
                                }
                            });
                            if (res.new==0) continueMark = false;
                            break;
                        case 2:
                            continueMark = false;
                            break;
                    }
                    if (continueMark) return;
                }
                if (res.morrow){
                    if (this.nextList.length>=10) this.nextList = this.nextList.splice(0,9);
                    this.nextList.push(this._formatObj(res));
                    return;
                }
                if (this.list.every((data,i)=>{
                    if (data.id === res.id){
                        this._countChange(data.status,res.status);
                        data = this._formatObj(res);
                        this.list.splice(i,1);
                        if (data.status=='1'){
                            if (this.list.every((car,j)=>{
                                if (car.status!=data.status){
                                    this.list.splice(j,0,data);
                                    return false;
                                }
                                return true;
                            }))this.list.push(data);
                        }else this.list.push(data);
                        return false;
                    }
                    return true;
                })){
                    this._countChange(null,res.status);
                    if (this.list.length>=10) this.list = this.list.splice(0,9);
                    let obj = this._formatObj(res);
                    if (res.status=='1'){
                        if (this.list.every((car,j)=>{
                            if (car.status!=res.status){
                                this.list.splice(j,0,obj);
                                return false;
                            }
                            return true;
                        }))this.list.push(obj);
                    }else this.list.push(obj);
                }
                /*setTimeout(()=>{
                    this.list.some((data,i)=>{
                        if (data.license_plate_number === res.license_plate_number) {
                            this.$set(this.list[i],"is_delivery",false);
                            return true;
                        }
                    });
                },1800000);*/
            },
            //初始化数据
            _initData(){
                let url = "{{url('store/deliveryAppointment/getExhibitionList')}}";
                window.tempTip.postBasicRequest(url,{warehouse:warehouse},res=>{
                    if (!res)return;
                    if (res.list){
                        /*let data = res.list;
                        data.forEach((item,i)=>{
                            if (item.diff){
                                data[i].is_delivery = true;
                                setTimeout(()=>{
                                    this.list.some((data,i)=>{
                                        if (data.license_plate_number === item.license_plate_number) {
                                            this.$set(this.list[i],"is_delivery",false);
                                            return true;
                                        }
                                    });
                                },item.diff);
                            }
                        });*/
                        this.list = res.list;
                        this.nextList = res.nextDay;
                        this.count.notReached = res.notReached;
                        this.count.success = res.success;
                        this.count.work = res.work;
                        this.count.total = res.notReached+res.success+res.work;
                    }
                    //判断下次刷新数据的时间
                    let refreshVal = res.refresh ? res.refresh : this._getDiffDate();
                    setTimeout(()=>{
                        this._initData();
                    },refreshVal);
                });
            },
            /*//获取密匙
            _getKey(){
                let url = "{{--{{url('store/deliveryAppointment/getKey')}}--}}";
                window.tempTip.postBasicRequest(url,{},res=>{
                    this.key = res;
                    this._createQrCode(this.baseUrl+this.base64());
                });
            },
            //生成二维码
            _createQrCode(text){
                if (!this.QrCode){
                    let dom = document.getElementById("code");
                    let height = dom.parentNode.offsetHeight<dom.parentNode.offsetWidth ? dom.parentNode.offsetHeight : dom.parentNode.offsetWidth;
                    this.QrCode = new QRCode(dom,{
                            text: text,
                            width: height*1.4,
                            height: height,
                            colorDark : "#000000",
                            colorLight : "#ffffff",
                        }
                    );
                }else{
                    this.QrCode.clear();
                    this.QrCode.makeCode(text);
                }
            },*/
            //获取当前时间距离明天0点的时间差  毫秒
            _getDiffDate(){
                let now = new Date();
                let dateTime = now.getTime();
                let yy = now.getFullYear();
                let mm = now.getMonth() + 1;
                let dd = now.getDate();
                let clock = yy + "-";
                if(mm < 10) clock += "0";
                clock += mm + "-";
                if(dd < 10) clock += "0";
                clock += dd+" 00:00:00";
                let timestamp = new Date(clock).getTime()+(24*60*60*1000);
                return timestamp-dateTime;
            },
            /*//加密
            base64(){
                let _keyStr= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
                let output = "";
                let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                let i = 0;
                let str = Math.floor(new Date().getTime()/1000).toString();
                str = str.slice(str.length-8);
                let input = this._utf8_encode(this.key+str);
                while (i < input.length) {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output +
                        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
                        _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
                }
                return output;
            },
            _utf8_encode (string) {
                string = string.replace(/\r\n/g,"\n");
                let utftext = "";
                for (let n = 0; n < string.length; n++) {
                    let c = string.charCodeAt(n);
                    if (c < 128) {
                        utftext += String.fromCharCode(c);
                    } else if((c > 127) && (c < 2048)) {
                        utftext += String.fromCharCode((c >> 6) | 192);
                        utftext += String.fromCharCode((c & 63) | 128);
                    } else {
                        utftext += String.fromCharCode((c >> 12) | 224);
                        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                        utftext += String.fromCharCode((c & 63) | 128);
                    }
                }
                return utftext;
            }*/
        },
    });
</script>
</html>