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

@extends('layouts.app')
@section('title')设备@endsection

@section('content')
    @component('weight.menu')@endcomponent
    <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 v-if="package.measuringMachine==measuringMachine.name" :class="[package.measuringMachine_status=='离线' ?  off : on] " style="font-size:12px;"></span>--}}
                                                <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" scope="row">重量（KG）</th>
                                                <td>@{{package.weight}}</td>
                                            </tr>
                                            <tr>
                                                <th class="tag" scope="row" scope="row">订单编号</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.orderno}}</td>
                                                <th class="tag" scope="row" scope="row">收件人</th>
                                                <td>@{{package.recipient}}</td>
                                            </tr>
                                            <tr>
                                                <th class="tag" scope="row" scope="row">承运商</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.logistic_name}}</td>
                                                <th class="tag" scope="row" scope="row">快递单号</th>
                                                <td>@{{package.logistic_number}}</td>
                                            </tr>
                                            <tr>
                                                <th class="tag" scope="row" scope="row">纸箱名称</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.paperBox}}</td>
                                                <th class="tag" scope="row" scope="row">体积(CM³)</th>
                                                <td>@{{package.bulk}}</td>
                                            </tr>
                                            <tr>
                                                <th  class="tag" scope="row" scope="row">状态</th>
                                                <td style="border-right:thick double #aaaaaa;">@{{package.status}}</td>
                                                <th  class="tag" scope="row" 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);
                }
                let _this=this;
                _this.measuringMachines.forEach(function(machine){
                    _this.measuringMachinesIndex[machine.name]=machine;
                });

                initEcho();
                Echo.channel('{{$laravelEchoPrefix}}package').listen('WeighedEvent',(e)=>{
                    let package=e.package;
                    let _this=this;
                    let audio=document.getElementById("audio"+_this.currentAudioIndex);
                    if (_this.currentAudioIndex==_this.amount){
                        _this.currentAudioIndex=1;
                    }else{
                        _this.currentAudioIndex=_this.currentAudioIndex+1;
                    }
                    if (package && package.measuring_machine && package.measuring_machine.name ===_this.package.measuringMachine){
                        if (package.id ===_this.package.id){
                            _this.package.measuringMachine_status=package.measuring_machine.status;
                            _this.measuringMachinesIndex[package.measuring_machine.name].status=package.measuring_machine.status;
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('暂无新数据');
                            return;
                        }
                        _this.updateData(_this,package);
                        let logistic_name = package.order ? (package.order.logistic ? package.order.logistic.name : '') : '';
                        if (_this.logisticAudioURL[logistic_name]){
                            audio.src=_this.logisticAudioURL[logistic_name];
                            audio.play();
                        }else {
                            axios.post('/package/measureMonitor/speech',{logistic:logistic_name})
                                .then(function (response) {
                                    if (response.data){
                                        _this.logisticAudioURL[_this.package.logistic_name]=response.data;
                                        audio.src=response.data;
                                        audio.play();
                                    }else {
                                        tempTip.setDuration(4000);
                                        tempTip.show('没有对应快递名称!');
                                    }
                                })
                                .catch(function (err) {
                                    tempTip.setDuration(4000);
                                    tempTip.show('语音合成发生错误：'+err);
                                });
                        }
                        tempTip.setDuration(1000);
                        tempTip.showSuccess('刷新成功!');
                    }
                });
            },
            methods:{
                clickMeasuringMachine(e){
                    let _this=this;
                    axios.post('{{url('package/measureMonitor/data')}}',{id:e})
                        .then(function (response) {
                            if (response.data.id){
                                let orderPackage=response.data;
                                _this.updateData(_this,orderPackage);
                                _this.package.measuringMachine=orderPackage.measuring_machine ? orderPackage.measuring_machine.name : '';                            }else {
                                tempTip.setDuration(4000);
                                tempTip.showSuccess('暂无数据!');
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(4000);
                            tempTip.show('切换设备错误：'+err);
                        });
                },
                updateData(_this,package){
                    _this.package.id=package.id;
                    _this.package.logistic_number=package.logistic_number;
                    _this.package.orderno = package.order ?  package.order.code : '';
                    _this.package.weight=package.weight;
                    _this.package.owner=package.order ? (package.order.owner ? package.order.owner.name : '') : '';
                    _this.package.paperBox=package.paper_box ? package.paper_box.name : '';
                    _this.package.recipient=package.order ? package.order.recipient : '';
                    _this.package.status=package.status;
                    _this.package.weighed_at=package.weighed_at;_this.package.bulk=package.bulk;
                    _this.package.logistic_name=package.order ? (package.order.logistic ? package.order.logistic.name : '') : '';
                    _this.package.measuringMachine_status=package.measuring_machine ? package.measuring_machine.status : '';
                    _this.measuringMachinesIndex[package.measuring_machine ? package.measuring_machine.name : ''].status=package.measuring_machine ? package.measuring_machine.status : '离线';
                }
            },
        });
    </script>
@endsection