baoshi-was/resources/views/package/measureMonitor/index.blade.php

@extends('layouts.app')
@section('title')设备查询-包裹管理@endsection

@section('content')
    <div class="page-holder w-100 d-flex flex-wrap" id="list">
        <div class="container-fluid px-xl-5">
            <section class="py-5">
                <div class="row">
                    <div class="col-lg-12 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <div class="form-inline">
                                    <h5>
                                        <ul class="nav nav-pills">
                                            <b style="padding: 10px">请选择设备：</b>
                                            <li v-for="measuringMachine in measuringMachines" @click="clickMeasuringMachine(measuringMachine.id)" :class="[measuringMachine.name==package.measuringMachine ?  selectedMachine : otherMachine] " style="padding: 10px">
                                                <span :class="[measuringMachine.status=='离线' ?  off : on] " style="font-size:12px;"></span>
                                                <a style="text-decoration:none;cursor:pointer" class="text-dark"  >@{{measuringMachine.name}}</a>
                                            </li>
                                        </ul>
                                    </h5>
                                </div>
                                <div class="card-body" v-if="package.id">
                                    <h1>

                                        <table class="table card-text dashboard" :class="[package.measuringMachine_status=='在线'?'on':'off']" style="height: 800px">
                                            <tr>
                                                <th class="tag" scope="row">货主</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.owner}}</td>
                                                <th class="tag" scope="row">重量（KG）</th>
                                                <td>@{{package.weight}}</td>
                                            </tr>
                                            <tr>
                                                <th class="tag" scope="row">订单编号</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.orderno}}</td>
                                                <th class="tag" scope="row">收件人</th>
                                                <td>@{{package.recipient}}</td>
                                            </tr>
                                            <tr>
                                                <th class="tag" scope="row">承运商</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.logistic_name}}</td>
                                                <th class="tag" scope="row">快递单号</th>
                                                <td>@{{package.logistic_number}}</td>
                                            </tr>
                                            <tr>
                                                <th class="tag" scope="row">纸箱名称</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.paperBox}}</td>
                                                <th class="tag" scope="row">体积(CM³)</th>
                                                <td>@{{package.bulk}}</td>
                                            </tr>
                                            <tr>
                                                <th  class="tag" scope="row">状态</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.status}}</td>
                                                <th  class="tag" scope="row">操作时间</th>
                                                <td>@{{package.weighed_at}}</td>
                                            </tr>
                                        </table>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
@endsection
@section('lastScript')
    <style>
        #selected a:hover{background-color: #4aa0e6;display: block;cursor:pointer}
        .dashboard.off .tag {color:red;}
        .dashboard.on .tag {color:green;}
    </style>
    <script>
        let vue=new Vue({
            el:'#list',
            data:{
                package:
                    {id:'',logistic_number:'',orderno:'',
                        weight:'',owner:'',paperBox:'',
                        measuringMachine:'',recipient:'',measuringMachine_status:'',
                        status:'',weighed_at:'',bulk:'',logistic_name:''},
                measuringMachines:[
                        @foreach($measuringMachines as $measuringMachine)
                    {id:'{{$measuringMachine->id}}',name:'{{$measuringMachine->name}}',code:'{{$measuringMachine->code}}',status:'{{$measuringMachine->status}}',},
                    @endforeach
                ],
                measuringMachinesIndex:{},
                on:'fa fa-circle text-success',
                off:'fa fa-circle text-danger',
                selectedMachine:'nav-item btn btn-primary',
                otherMachine:'nav-item',
                onColor:{color:'green'},
                offColor:{color:'red'},
                logisticAudioURL:{},
                currentAudioIndex:1,
                amount:3,
            },
            mounted(){
                let body = $("#list");
                for(let i=1;i<=this.amount;i++){
                    let audioTag=$('<audio id="audio'+i+'" src="" autoplay></audio>');
                    body.append(audioTag);
                }


                this.measuringMachines.forEach((machine)=>{
                    this.measuringMachinesIndex[machine.name] = machine;
                })
                initEcho();
                Echo.channel('{{$laravelEchoPrefix}}package').listen('WeighedEvent',e=>{
                    let item = e.package;
                    let audio = document.getElementById('audio'+this.currentAudioIndex);
                    if (this.currentAudioIndex === this.amount){
                        this.currentAudioIndex = 1;
                    } else {
                        this.currentAudioIndex = this.currentAudioIndex +1;
                    }
                    if (item && item.measuring_machine && item.measuring_machine.name === this.package.measuringMachine){
                        if (item.id === this.package.id){
                            this.package.measuringMachine_status = item.measuring_machine.status;
                            this.measuringMachinesIndex[item.measuring_machine.name].status = item.measuring_machine.status;
                            window.tempTip.setDuration(2000);
                            window.tempTip.showSuccess('暂无新数据');
                            return ;
                        }
                        this.updateData(item);
                        let logistic_name = item.order ? (item.order.logistic ? item.order.logistic.name : '') : '';
                        let logistic_number = item.logistic_number;
                        this.speech(logistic_name,logistic_number);
                        window.tempTip.setDuration(1000);
                        window.tempTip.showSuccess('刷新成功!');
                    }
                });
            },
            methods:{
                clickMeasuringMachine(e){
                    let url  = '{{route('measureMonitor.dataApi')}}';
                    let data = {id:e};
                    window.axios.post(url,data).then(res =>{
                            if (res.data.id){
                                let orderPackage=res.data;
                                this.updateData(orderPackage);
                                this.package.measuringMachine= orderPackage.measuring_machine ? orderPackage.measuring_machine.name : '';
                            }else {
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('暂无数据!');
                            }
                        }).catch(err=>{
                            tempTip.setDuration(4000);
                            tempTip.show('切换设备错误：'+err);
                        });
                },
                updateData(item){
                    this.package.id=item.id;
                    this.package.logistic_number=item.logistic_number;
                    this.package.orderno = item.order ?  item.order.code : '';
                    this.package.weight=item.weight;
                    this.package.owner=item.order ? (item.order.owner ? item.order.owner.name : '') : '';
                    this.package.paperBox=item.paper_box ? item.paper_box.name : '';
                    this.package.recipient=item.order ? item.order.recipient : '';
                    this.package.status=item.status;
                    this.package.weighed_at=item.weighed_at;
                    this.package.bulk=item.bulk;
                    this.package.logistic_name=item.order ? (item.order.logistic ? item.order.logistic.name : '') : '';
                    this.package.measuringMachine_status=item.measuring_machine ? item.measuring_machine.status : '';
                    this.measuringMachinesIndex[item.measuring_machine ? item.measuring_machine.name : ''].status = item.measuring_machine ? item.measuring_machine.status : '离线';
                },
                speech(logistic_name,logistic_number){
                    let audio = document.getElementById('audio'+this.currentAudioIndex);
                    window.tempTip.setDuration(3000);
                    let url = '{{route('measureMonitor.speechApi')}}';
                    let data = {logistic:logistic_name,logistic_number:logistic_number};
                    window.axios.post(url,data).then(res=>{
                        if(res.data.success){
                            let name =res.data.data.name;
                            let path = res.data.data.path;
                            this.logisticAudioURL[name] = path;
                            audio.src = path;
                            setTimeout(()=>{
                                audio.play();
                            },0);
                        }else {
                            if (res.data.data){
                                audio.src = res.data.data.path;
                                setTimeout(()=>{
                                    audio.play();
                                },0);
                            }
                        }
                    }).catch(err=>{
                        window.tempTip.show('语音合成发生错误：'+err);
                    });
                },
            },
        });
    </script>
@endsection