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

@extends('layouts.app')

@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">
                        <audio id="audio" src="" autoplay></audio>
                        <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 v-else :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.delivery_number}}</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}}</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:'',delivery_number:'',
                    weight:'',owner:'',paperBox:'',
                    measuringMachine:'',recipient:'',measuringMachine_status:'',
                    status:'',weighed_at:'',bulk:'',logistic:''},
                measuringMachines:[
                    @foreach($measuringMachines as $measuringMachine)
                    {id:'{{$measuringMachine->id}}',name:'{{$measuringMachine->name}}',code:'{{$measuringMachine->code}}',status:'{{$measuringMachine->status}}',},
                    @endforeach
                ],
                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'},
            },
            mounted(){
                initEcho();
                Echo.channel('bswas_database_package').listen('.weight',(e)=>{
                    let package=e.package;
                    let _this=this;
                    let audio=document.getElementById('audio');
                    if (package){
                        if (package.id===_this.package.id){
                            _this.package.measuringMachine_status=package.measuringMachine_status;
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('暂无新数据');
                        }else {
                            _this.updateData(_this,package);
                            axios.post('/package/measureMonitor/speech',{logistic:package.logistic_name})
                                .then(function (response) {
                                    if (response.data){
                                        audio.src=response.data;
                                        audio.play();
                                    }else {
                                        tempTip.setDuration(4000);
                                        tempTip.showSuccess('文件名不规范!');
                                    }
                                })
                                .catch(function (err) {
                                    tempTip.setDuration(4000);
                                    tempTip.showSuccess('语音合成发生错误：'+err);
                                });
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('刷新成功!');
                        }
                    }
                });
/*                if(this.timer){
                    clearInterval(this.timer);
                }else {
                    this.timer=setInterval(()=>{this.flushData();},18000);
                }*/
            },
           methods:{
               clickMeasuringMachine(e){
                   let _this=this;
                   axios.post('/package/measureMonitor/data',{id:e})
                       .then(function (response) {
                           if (response.data.id){
                               let package=response.data;
                                _this.updateData(_this,package);
                           }else {
                               tempTip.setDuration(4000);
                               tempTip.showSuccess('暂无数据!');
                           }
                       })
                       .catch(function (err) {
                           tempTip.setDuration(4000);
                           tempTip.showSuccess('切换设备错误：'+err);
                       });
               },
               updateData(_this,package){
                   _this.package.id=package.id;
                   _this.package.logistic_number=package.logistic_number;_this.package.delivery_number=package.delivery_number;
                   _this.package.weight=package.weight;_this.package.owner=package.owner_name;
                   _this.package.paperBox=package.paperBox_name;_this.package.measuringMachine=package.measuringMachine_name;
                   _this.package.recipient=package.recipient;_this.package.status=package.status;
                   _this.package.weighed_at=package.weighed_at;_this.package.bulk=package.bulk;
                   _this.package.logistic=package.logistic_name;
                   _this.package.measuringMachine_status=package.measuringMachine_status;
               }
            },
        });
    </script>
@endsection