baoshi-was/resources/views/kpi/logisticsPunctuality/index.blade.php

@extends('layouts.app')
@section('title')承运商时效表@endsection
@section('content')
    <div class="d-none" id="list">
        <!--查询            -->
        <div class="row m-3" style="background-color: #fff;">
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="承运商">
                <input v-model="search.logisticName" class="form-control" type="text" step="01">
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="起始日期">
                <input v-model="search.startTime" class="form-control" type="date" step="01">
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="截止日期">
                <input v-model="search.endTime" class="form-control" type="date" step="01">
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-info" @click="searchData()">查询</button>
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-success" @click="resetSearch()">重置</button>
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-success" @click="downExcel()">导出EXCEL</button>
            </div>
        </div>

        <!--            导出-->
        <span class="dropdown"></span>
        <!--            表格-->
        <table class="table table-striped table-bordered table-hover text-nowrap waybill-table td-min-width-80"
               style="background: #fff;" id="table">
            <tr v-for="(item,i) in details.data" :key="i">
                <td class="td-warm text-muted"><span>@{{ i+1 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.logisticName }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.province }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.t1 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.t2 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.t3 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.t4 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.t5 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.orderTotalAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.orderHaveRouteAmount }}</span></td>
            </tr>
        </table>
    </div>


@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                selectTr: null,
                details: {
                    data: [],
                },
                search: {
                    startTime: null,
                    endTime: null,
                    logisticName: null,
                },
            },
            created() {
                let url = this.getBaseUrl();
                url += '/api/report/logisticsPunctuality/list';

                var day1 = new Date();
                day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
                var s1 = day1.getFullYear() + "-" + ((day1.getMonth() + 1) >= 10 ? (day1.getMonth() + 1) : ('0' + (day1.getMonth() + 1))) + "-" + (day1.getDate() >= 10 ? day1.getDate() : ('0' + day1.getDate()));

                //今天的时间
                var day2 = new Date();
                day2.setTime(day2.getTime());
                var s2 = day2.getFullYear() + "-" + ((day2.getMonth() + 1) >= 10 ? (day2.getMonth() + 1) : ('0' + (day2.getMonth() + 1))) + "-" + (day2.getDate() >= 10 ? day2.getDate() : ('0' + day2.getDate()));
                this.search.startTime = s1;
                this.search.endTime = s2;
                let search = Object.assign({}, this.search);
                search.startTime += ' 00:00:00';
                search.endTime += ' 23:59:59';

                axios.post(url, search).then(res => {
                    this.details.data = res.data.data;
                });
            },
            mounted: function () {
                $('#list').removeClass('d-none');
                let column = [
                    {name: 'logisticName', value: '承运商'},
                    {name: 'province', value: '省份'},
                    {name: 't1', value: '推单-出库（库内）'},
                    {name: 't2', value: '出库-揽收（月台）'},
                    {name: 't3', value: '揽收-中转（站点）'},
                    {name: 't4', value: '中转-签收（途中）'},
                    {name: 't5', value: ' 推单-签收（全部）'},
                    {name: 'case6Amount', value: '总单量'},
                    {name: 'case7Amount', value: '总有路由信息单量'},

                ];
                new Header({
                    el: "table",
                    name: "details",
                    column: column,
                    data: this.details.data,
                    restorationColumn: 'addtime',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                resetSearch() {
                    this.search = {
                        startTime: null,
                        endTime: null,
                        customerName: null,
                    };
                },
                searchData() {
                    this.pagination();
                },
                //根据环境获取不同的url
                getBaseUrl() {
                    let url = null;
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = 'http://127.0.0.1:8111'
                    } else if (env === 'production') {
                        url = 'https://stat.baoshi56.com'
                    }
                    return url;
                },
                pagination(flag) {
                    let url = this.getBaseUrl();
                    url += '/api/report/logisticsPunctuality/list';
                    let search = Object.assign({}, this.search);
                    search.startTime += ' 00:00:00';
                    search.endTime += ' 23:59:59';
                    axios.post(url, search).then(res => {
                        if (res.data.data === undefined) {
                            this.details.data = [];
                        } else {
                            this.details.data = res.data.data;
                        }
                    });
                },
                downExcel() {
                    let url = this.getBaseUrl();
                    url += '/api/report/scanInfo/export';
                    let search = this.getSearch();
                    axios.post(url, search).then(res => {
                        if (res.data.code === 200) {
                            let filename = res.data.data;
                            let downUrl = this.getBaseUrl() + '/api/report/scanInfo/export/' + filename;
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link.href = downUrl;
                            link.download = `${filename}.xlsx`;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            tempTip.showSuccess('导出成功!');
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.data);
                        }
                    })
                }
            },

        });
    </script>
@endsection