baoshi-was/resources/views/control/panel.blade.php

@extends('layouts.app')
@section('title')控制台@endsection
@section('head')
    <link href="{{ mix('css/element-ui.css') }}" rel="stylesheet">
@endsection
@section('content')
    <div class="d-none" id="list">
        <div class="container-fluid">
            <div class="card">
                <h5 class="card-header">最近常用功能</h5>
                <div class="card-body row">
                    <ul class="list-group" v-for="(menu,index) in menus">
                        <div class="container-fluid btn-group justify-content-center">
                            <a class="btn-primary btn-lg" v-if="index<=3" :href="'/'+menu.route">@{{ menu.name }}</a>
                        </div>
                        <div v-if="menu.secondLevelMenu && menu.secondLevelMenu.length>0&&index<=3">
                            <div class="container-fluid btn-group m-1">
                                <a class="bth btn-sm btn-info m-1" v-for="(secondMenu,index) in menu.secondLevelMenu"
                                   :href="'/'+secondMenu.route" v-if="index < 2"> @{{ secondMenu.name }}</a>
                            </div>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="row my-3">
                <div class="col-sm-3 col-lg-3 col-xl-3 col-md-3">
                    <div class="card">
                        <div class="card-header text-dark h5">
                            <p>实时待处理订(总):@{{ totalOrders.total }}</p>
                        </div>
                        <div class="card-body">
                            <p>创建订单:@{{ totalOrders.createOrder }}</p>
                            <p>分配完成:@{{ totalOrders.assignedComplete }}</p>
                            <p>部分分配:@{{ totalOrders.partialAllocation }}</p>
                            <p>部分装箱:@{{ totalOrders.partPacking }}</p>
                            <p>分拨完成:@{{ totalOrders.sowComplete }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2 col-lg-2 col-xl-2 col-md-2" v-for="(warehousesOrder,index) in warehousesOrders">
                    <div class="card">
                        <div class="card-header text-success h5">
                            <p>@{{ getWareHouse(warehousesOrder.code) }}:@{{ warehousesOrder.total }}</p>
                        </div>
                        <div class="card-body">
                            <p>创建订单:@{{ warehousesOrder.createOrder }}</p>
                            <p>分配完成:@{{ warehousesOrder.assignedComplete }}</p>
                            <p>部分分配:@{{ warehousesOrder.partialAllocation }}</p>
                            <p>部分装箱:@{{ warehousesOrder.partPacking }}</p>
                            <p>分拨完成:@{{ warehousesOrder.sowComplete }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-3">
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <span v-show="orderCountingRecordsDayShow" class="demonstration mt-1">起始日期:</span>
                                <el-date-picker
                                    size="small"
                                    @blur="orderCountingRecordApi('')"
                                    v-show="orderCountingRecordsDayShow"
                                    v-model="orderCountingRecordsStart"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选起始日期">
                                </el-date-picker>

                                <span v-show="orderCountingRecordsDayShow" class="demonstration mt-1">结束日期:</span>
                                <el-date-picker
                                    size="small"
                                    @blur="orderCountingRecordApi('')"
                                    v-show="orderCountingRecordsDayShow"
                                    v-model="orderCountingRecordsEnd"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择结束日期">
                                </el-date-picker>

                                <span v-show="orderCountingRecordsMonthShow" class="demonstration mt-1">起始月:</span>
                                <el-date-picker
                                    size="small"
                                    @blur="orderCountingRecordApi('')"
                                    v-show="orderCountingRecordsMonthShow"
                                    v-model="orderCountingRecordsStart"
                                    type="month"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择起始月">
                                </el-date-picker>

                                <span v-show="orderCountingRecordsMonthShow" class="demonstration mt-1">结束月:</span>
                                <el-date-picker
                                    size="small"
                                    @blur="orderCountingRecordApi('')"
                                    v-show="orderCountingRecordsMonthShow"
                                    v-model="orderCountingRecordsEnd"
                                    type="month"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择结束月">
                                </el-date-picker>

                                <span v-show="orderCountingRecordsYearShow" class="demonstration mt-1">起始年:</span>
                                <el-date-picker
                                    size="small"
                                    @blur="orderCountingRecordApi('')"
                                    v-show="orderCountingRecordsYearShow"
                                    v-model="orderCountingRecordsStart"
                                    type="year"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择年">
                                </el-date-picker>

                                <span v-show="orderCountingRecordsYearShow" class="demonstration mt-1">结束年:</span>
                                <el-date-picker
                                    size="small"
                                    @blur="orderCountingRecordApi('')"
                                    v-show="orderCountingRecordsYearShow"
                                    v-model="orderCountingRecordsEnd"
                                    type="year"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择年">
                                </el-date-picker>
                                <div class="btn-group btn-group-sm ml-2" role="group">
                                    <el-button type="primary" value="日" @click="orderCountingRecordApi('日')"
                                               class="btn btn-secondary"
                                               v-model="orderCountingRecordsUnit">日
                                    </el-button>
                                    <el-button type="primary" value="月" @click="orderCountingRecordApi('月')"
                                               class="btn btn-secondary "
                                               v-model="orderCountingRecordsUnit">月
                                    </el-button>
                                    <el-button type="primary" value="年" @click="orderCountingRecordApi('年')"
                                               class="btn btn-secondary"
                                               v-model="orderCountingRecordsUnit">年
                                    </el-button>
                                </div>
                                <div class="ml-2">
                                    <el-select placeholder="请选择对应货主" multiple v-model="selectOrderOwners" size="small"
                                               @change="orderCountingRecordApi('')">
                                        <el-option label="选择所有" value="all"></el-option>
                                        <el-option v-for="item in owners" :label="item.name" :value="item.id"
                                                   :key="item.id"></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="card-body row">
                            <div id="orderCountingRecords" class="col-12"
                                 style="min-height: 500px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 col-lg-3 col-xl-3 col-md-3">
                    <div class="card">
                        <div class="card-header">
                            <div class="block row">
                                    <span class="demonstration"></span>
                                    <el-date-picker
                                        size="small"
                                        style="width: 60%;"
                                        @blur="logisticsCountingRecordsApi()"
                                        v-model="logisticsCountingRecordsData"
                                        type="daterange"
                                        align="right"
                                        unlink-panels
                                        range-separator="-"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="yyyy-MM-dd"
                                        :picker-options="pickerOptions">
                                    </el-date-picker>
                                    <el-select  placeholder="请选择对应货主" multiple v-model="selectLogisticsOwners" size="small" style="width: 50%"  @change="logisticsCountingRecordsApi('')">
                                        <el-option label="选择所有" value="all"></el-option>
                                        <el-option v-for="item in owners" :label="item.name" :value="item.id" :key="item.id"></el-option>
                                    </el-select>
                            </div>
                        </div>
                        <div class="card-body row">
                            <div id="logisticsCountingRecords" class="col-12"
                                 style="min-height:500px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 col-lg-3 col-xl-3 col-md-3">
                    <div class="card">
                        <div class="card-header">
                            <div class="block">
                                <span class="demonstration"></span>
                                <el-date-picker
                                    size="small"
                                    style="width: 80%;"
                                    @blur="warehouseCountingRecordsApi()"
                                    v-model="warehouseCountingRecordsData"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="card-body row">
                            <div  id="warehouseCountingRecords" class="col-12"
                                 style=min-height:500px;"></div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-3">
                @can('人事管理-临时工报表-可见全部组')
                    <div class="col-sm-6 col-lg-6  col-xl-6 col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="block row">
                                    <span class="demonstration"></span>
                                    <span v-show="laborReportsCountingRecordsDayShow"
                                          class="demonstration mt-1">起始日期:</span>
                                    <el-date-picker
                                        size="small"
                                        @blur="laborReportsCountingRecordApi('')"
                                        v-show="laborReportsCountingRecordsDayShow"
                                        v-model="laborReportsCountingRecordsStart"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选起始日期">
                                    </el-date-picker>
                                    <span v-show="laborReportsCountingRecordsDayShow"
                                          class="demonstration mt-1">结束日期:</span>
                                    <el-date-picker
                                        size="small"
                                        @blur="laborReportsCountingRecordApi('')"
                                        v-show="laborReportsCountingRecordsDayShow"
                                        v-model="laborReportsCountingRecordsEnd"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择结束日期">
                                    </el-date-picker>
                                    <span v-show="laborReportsCountingRecordsMonthShow"
                                          class="demonstration mt-1">起始月:</span>
                                    <el-date-picker
                                        size="small"
                                        @blur="laborReportsCountingRecordApi('')"
                                        v-show="laborReportsCountingRecordsMonthShow"
                                        v-model="laborReportsCountingRecordsStart"
                                        type="month"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择起始月">
                                    </el-date-picker>

                                    <span v-show="laborReportsCountingRecordsMonthShow"
                                          class="demonstration mt-1">结束月:</span>
                                    <el-date-picker
                                        size="small"
                                        @blur="laborReportsCountingRecordApi('')"
                                        v-show="laborReportsCountingRecordsMonthShow"
                                        v-model="laborReportsCountingRecordsEnd"
                                        type="month"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择结束月">
                                    </el-date-picker>

                                    <span v-show="laborReportsCountingRecordsYearShow"
                                          class="demonstration mt-1">起始年:</span>
                                    <el-date-picker
                                        size="small"
                                        @blur="laborReportsCountingRecordApi('')"
                                        v-show="laborReportsCountingRecordsYearShow"
                                        v-model="laborReportsCountingRecordsStart"
                                        type="year"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择年">
                                    </el-date-picker>

                                    <span v-show="laborReportsCountingRecordsYearShow"
                                          class="demonstration mt-1">结束年:</span>
                                    <el-date-picker
                                        size="small"
                                        @blur="laborReportsCountingRecordApi('')"
                                        v-show="laborReportsCountingRecordsYearShow"
                                        v-model="laborReportsCountingRecordsEnd"
                                        type="year"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择年">
                                    </el-date-picker>
                                    <div class="btn-group btn-group-sm ml-2" role="group">
                                        <el-button type="primary" value="日" @click="laborReportsCountingRecordApi('日')"
                                                   class="btn btn-secondary"
                                                   v-model="laborReportsCountingRecordUnit">日
                                        </el-button>
                                        <el-button type="primary" value="月" @click="laborReportsCountingRecordApi('月')"
                                                   class="btn btn-secondary"
                                                   v-model="laborReportsCountingRecordUnit">月
                                        </el-button>
                                        <el-button type="primary" value="年" @click="laborReportsCountingRecordApi('年')"
                                                   class="btn btn-secondary"
                                                   v-model="laborReportsCountingRecordUnit">年
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body row">
                                <div id="laborReportsCountingRecords"
                                     class="col-12"
                                     style="min-height:500px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-6  col-xl-6 col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <span class="demonstration"></span>
                                <el-date-picker
                                    size="small"
                                    @blur="laborReportsUserGroupsCountApi('')"
                                    v-model="laborReportsUserGroupsCountDate"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </div>
                            <div class="card-body row">
                                <div  id="laborReportsUserGroupsCount"
                                     class="col-12"
                                     style="min-height:500px;"></div>
                            </div>
                        </div>
                    </div>
                @endcan
            </div>
            <div class="row my-3">
                @can("控制台-称重统计")
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <el-date-picker size="small" class="col-6 date" @blur="loadWeightInfo()"
                                                type="daterange" align="right"
                                                v-model="searchOption.weightDate" unlink-panels range-separator="-"
                                                start-placeholder="开始日期" end-placeholder="结束日期"
                                                value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <label class="col-3 offset-3">
                                    <select class="form-control rounded" v-model="searchOption.weightSelect"
                                            @change="switchWeightDate()">
                                        <option v-for="(date,i) in dateOptions" :value="i">@{{ date.text }}</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="card-body row">
                            <div id="weight" class="col-12" style="min-height: 500px"></div>
                        </div>
                    </div>
                </div>
                @endcan
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="flex-column">
                                <el-date-picker size="small" class="col-6 date" @blur="loadExceptionTypeInfo()"
                                                type="daterange" align="right"
                                                v-model="searchOption.exceptionTypeDate" unlink-panels range-separator="-"
                                                start-placeholder="开始日期" end-placeholder="结束日期"
                                                value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <el-select class="col-3"  placeholder="请选择对应货主" multiple v-model="selectExceptionTypeOwners" size="small" style="width: 20%"  @change="loadExceptionTypeInfo()">
                                    <el-option label="选择所有" value="all"></el-option>
                                    <el-option v-for="item in owners" :label="item.name" :value="item.id" :key="item.id"></el-option>
                                </el-select>
                                <label class="col-3 ">
                                    <select class="form-control rounded" v-model="searchOption.exceptionTypeSelect"
                                            @change="switchExceptionTypeDate()">
                                        <option v-for="(date,i) in dateOptions" :value="i">@{{ date.text }}</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="card-body row">
                            <div id="exceptionType" class="col-12" style="min-height: 500px"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('lastScript')
    <script src="{{ mix('js/echarts.js') }}"></script>
    <script src="{{ mix('js/element-ui.js') }}"></script>
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                myChart: null,
                menus:{!! $menus !!},
                owners:{!! $owners !!},
                selectOrderOwners: [],
                selectLogisticsOwners: [],
                selectExceptionTypeOwners: [],
                warehousesOrders:{!! $warehousesOrders !!},
                orderCountingRecords:{},
                logisticsCountingRecords:{},
                warehouseCountingRecords:{},
                laborReportsCountingRecords:{},
                laborReportsUserGroupsCount:{},
                warehouses: {
                    "WH01": '松江一仓',
                    "WH02": '松江二仓',
                    "WH03": '嘉定一仓',},
                totalOrders: {
                    total: null,
                    createOrder: null,
                    assignedComplete: null,
                    partialAllocation: null,
                    partPacking: null,
                    sowComplete: null,
                },
                orderCountingRecordsDateTarget: [],
                orderCountingRecordsData: [],
                laborReportsCountingRecordsDateTarget: [],
                laborReportsCountingRecordsData: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                dateOptions:[{text:'当天',start:moment().format('yyyy-MM-DD'),end:moment().format('yyyy-MM-DD')},
                    {text:"昨天",start:moment().subtract("1","day").format('yyyy-MM-DD'),end:moment().subtract("1","day").format('yyyy-MM-DD')},
                    {text:"本周",start:moment().weekday(1).format('yyyy-MM-DD'),end:moment().weekday(7).format('yyyy-MM-DD')},
                    {text:"上周",start:moment().weekday(-6).format('yyyy-MM-DD'),end:moment().weekday(0).format('yyyy-MM-DD')},
                    {text:"本月",start:moment().startOf("month").format('yyyy-MM-DD'),end:moment().endOf("month").format('yyyy-MM-DD')},
                    {text:"上月",start:moment().month(moment().month() - 1).startOf('month').format('yyyy-MM-DD'),end:moment().month(moment().month() - 1).endOf('month').format('yyyy-MM-DD')},
                    {text:"本季度",start:moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('yyyy-MM-DD'),end:moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('yyyy-MM-DD')},
                    {text:"上季度",start:moment(moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf()).format('yyyy-MM-DD'),end:moment(moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()).format('yyyy-MM-DD')},
                    {text:"本年",start:moment(moment().year(moment().year()).startOf('year').valueOf()).format('yyyy-MM-DD'),end:moment(moment().year(moment().year()).endOf('year').valueOf()).format('yyyy-MM-DD')},
                    {text:"去年",start:moment(moment().year(moment().year() - 1).startOf('year').valueOf()).format('yyyy-MM-DD'),end:moment(moment().year(moment().year() - 1).endOf('year').valueOf()).format('yyyy-MM-DD')}],
                logisticsCountingRecordsData: [moment().subtract('1', 'month').format('yyyy-MM-DD'),
                    moment(new Date()).format('yyyy-MM-DD')],
                warehouseCountingRecordsData: [moment().subtract('1', 'month').format('yyyy-MM-DD'),
                    moment(new Date()).format('yyyy-MM-DD')],
                laborReportsCountingRecordsDate: [moment().subtract('1', 'month').format('yyyy-MM-DD'),
                    moment(new Date()).format('yyyy-MM-DD')],
                laborReportsUserGroupsCountDate: [moment().subtract('1', 'month').format('yyyy-MM-DD'),
                    moment(new Date()).format('yyyy-MM-DD')],
                orderCountingRecordsUnit: '日',
                laborReportsCountingRecordUnit: '日',
                orderCountingRecordsDayShow: true,
                orderCountingRecordsMonthShow: false,
                orderCountingRecordsYearShow: false,
                orderCountingRecordsStart: moment().subtract('1', 'month').format('yyyy-MM-DD'),
                orderCountingRecordsEnd: moment(new Date()).format('yyyy-MM-DD'),
                orderCountingUnit: '日',
                orderUnitsData: {
                    start_day: moment().subtract('1', 'month').format('yyyy-MM-DD'),
                    end_day: moment(new Date()).format('yyyy-MM-DD'),
                    start_month: moment().subtract('12', 'month').format('yyyy-MM-DD'),
                    end_month: moment(new Date()).format('yyyy-MM-DD'),
                    start_year: moment().subtract('12', 'month').format('yyyy-MM-DD'),
                    end_year: moment(new Date()).format('yyyy-MM-DD'),
                },
                laborReportsUnit: '日',
                laborReportsData: {
                    start_day: moment().subtract('1', 'month').format('yyyy-MM-DD'),
                    end_day: moment(new Date()).format('yyyy-MM-DD'),
                    start_month: moment().subtract('12', 'month').format('yyyy-MM-DD'),
                    end_month: moment(new Date()).format('yyyy-MM-DD'),
                    start_year: moment().subtract('12', 'month').format('yyyy-MM-DD'),
                    end_year: moment(new Date()).format('yyyy-MM-DD'),
                },

                laborReportsCountingRecordsDayShow: true,
                laborReportsCountingRecordsMonthShow: false,
                laborReportsCountingRecordsYearShow: false,
                laborReportsCountingRecordsStart: moment().subtract('1', 'month').format('yyyy-MM-DD'),
                laborReportsCountingRecordsEnd: moment(new Date()).format('yyyy-MM-DD'),
                cardPool:{},
                searchOption:{
                    weightDate:[],
                    exceptionTypeDate: [],
                    weightSelect:"",
                    exceptionTypeSelect:"",
                },
            },
            watch:{
                selectOrderOwners:function(val,oldval){
                    let newindex =  val.indexOf('all');
                    let   oldindex =  oldval.indexOf('all');
                    if(newindex!=-1 && oldindex==-1 && val.length>1)
                        this.selectOrderOwners=['all'];
                    else if(newindex!=-1 && oldindex!=-1 && val.length>1)
                        this.selectOrderOwners.splice(val.indexOf('all'),1)
                },
                selectLogisticsOwners:function(val,oldval){
                    let newindex =  val.indexOf('all');
                    let   oldindex =  oldval.indexOf('all');
                    if(newindex!=-1 && oldindex==-1 && val.length>1)
                        this.selectLogisticsOwners=['all'];
                    else if(newindex!=-1 && oldindex!=-1 && val.length>1)
                        this.selectLogisticsOwners.splice(val.indexOf('all'),1)
                }
            },
            mounted() {
                $('#list').removeClass('d-none');
                let index = 4;
                this.searchOption.weightSelect = index;
                this.searchOption.exceptionTypeSelect = index;
                this.searchOption.weightDate = [this.dateOptions[index].start, this.dateOptions[index].end];
                this.searchOption.exceptionTypeDate = [this.dateOptions[index].start, this.dateOptions[index].end];
                let _this = this;
                this.warehousesOrders.forEach(function (item) {
                    _this.totalOrders.total += parseInt(item.total);
                    _this.totalOrders.createOrder += item.createOrder;
                    _this.totalOrders.assignedComplete += item.assignedComplete;
                    _this.totalOrders.partialAllocation += item.partialAllocation;
                    _this.totalOrders.partPacking += item.partPacking;
                    _this.totalOrders.sowComplete += item.sowComplete;
                });
                //订单量趋势
                this.orderCountingRecordsChart = echarts.init(document.getElementById('orderCountingRecords'));
                this.initOrderCountingRecordsChart();
                this.orderCountingRecordApi('日');
                //订单快递分布
                this.logisticsCountingRecordsChart = echarts.init(document.getElementById('logisticsCountingRecords'));
                this.initLogisticsCountingRecordsChart();
                this.logisticsCountingRecordsApi();
                //订单仓库分布
                this.warehouseCountingRecordsChart = echarts.init(document.getElementById('warehouseCountingRecords'));
                this.initWarehouseCountingRecordsChart();
                this.warehouseCountingRecordsApi();

                @can('人事管理-临时工报表-可见全部组')
                this.laborReportsCountingRecordsChart = echarts.init(document.getElementById('laborReportsCountingRecords'));
                this.initLaborReportsCountingRecordsChart();
                this.laborReportsCountingRecordApi('日');

                this.laborReportsUserGroupsCountChart = echarts.init(document.getElementById('laborReportsUserGroupsCount'));
                this.initLaborReportsUserGroupsCountChart();
                this.laborReportsUserGroupsCountApi();
                @endcan

                @can("控制台-称重统计")
                this.cardPool.weight = echarts.init(document.getElementById("weight"));
                this.loadWeightInfo();
                @endcan
                this.cardPool.exceptionType = echarts.init(document.getElementById("exceptionType"));
                this.loadExceptionTypeInfo();
            },
            methods: {
                switchDataPanel_forOrderCountingRecords(fromUnit, toUnit) {
                    switch (fromUnit) {
                        case '日':
                            this.orderUnitsData.start_day = this.orderCountingRecordsStart;
                            this.orderUnitsData.end_day = this.orderCountingRecordsEnd;
                            break;
                        case '月':
                            this.orderUnitsData.start_month = this.orderCountingRecordsStart;
                            this.orderUnitsData.end_month = this.orderCountingRecordsEnd;
                            break;
                        case '年':
                            this.orderUnitsData.start_year = this.orderCountingRecordsStart;
                            this.orderUnitsData.end_year = this.orderCountingRecordsEnd;
                            break;
                    }
                    switch (toUnit) {
                        case '日':
                            this.orderCountingRecordsStart = this.orderUnitsData.start_day;
                            this.orderCountingRecordsEnd = this.orderUnitsData.end_day;
                            break;
                        case '月':
                            this.orderCountingRecordsStart = this.orderUnitsData.start_month;
                            this.orderCountingRecordsEnd = this.orderUnitsData.end_month;
                            break;
                        case '年':
                            this.orderCountingRecordsStart = this.orderUnitsData.start_year;
                            this.orderCountingRecordsEnd = this.orderUnitsData.end_year;
                            break;
                    }
                },
                switchDataPanel_forLaborReports(fromUnit, toUnit) {
                    switch (fromUnit) {
                        case '日':
                            this.laborReportsData.start_day = this.laborReportsCountingRecordsStart;
                            this.laborReportsData.end_day = this.laborReportsCountingRecordsEnd;
                            break;
                        case '月':
                            this.laborReportsData.start_month = this.laborReportsCountingRecordsStart;
                            this.laborReportsData.end_month = this.laborReportsCountingRecordsEnd;
                            break;
                        case '年':
                            this.laborReportsData.start_year = this.laborReportsCountingRecordsStart;
                            this.laborReportsData.end_year = this.laborReportsCountingRecordsEnd;
                            break;
                    }
                    switch (toUnit) {
                        case '日':
                            this.laborReportsCountingRecordsStart = this.laborReportsData.start_day;
                            this.laborReportsCountingRecordsEnd = this.laborReportsData.end_day;
                            break;
                        case '月':
                            this.laborReportsCountingRecordsStart = this.laborReportsData.start_month;
                            this.laborReportsCountingRecordsEnd = this.laborReportsData.end_month;
                            break;
                        case '年':
                            this.laborReportsCountingRecordsStart = this.laborReportsData.start_year;
                            this.laborReportsCountingRecordsEnd = this.laborReportsData.end_year;
                            break;
                    }
                },
                getWareHouse: function (code) {
                    return this.warehouses[code];
                },
                initOrderCountingRecords() {
                    for (let key in this.orderCountingRecords) {
                        this.orderCountingRecordsDateTarget.push(this.orderCountingRecords[key].date_target);
                        this.orderCountingRecordsData.push(this.orderCountingRecords[key].counter);
                    }
                },
                initOrderCountingRecordsChart(text) {
                    this.orderCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    if (text == null || text == '' || text == undefined) text = '默认显示权限下所有货主订单数量';
                    this.orderCountingRecordsChart.setOption({
                        title: {text: '订单量趋势', subtext: text,},
                        tooltip: {},
                        legend: {data: ['订单数']},
                        xAxis: {
                            type: 'category',
                            data: this.orderCountingRecordsDateTarget
                        },
                        yAxis: {type: 'value'},
                        series: [{
                            data: this.orderCountingRecordsData,
                            type: 'line',
                            smooth: true
                        }]
                    });
                },
                initLaborReportsCountingRecordsChart() {
                    this.laborReportsCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    this.laborReportsCountingRecordsChart.setOption({
                        title: {text: '临时用工趋势'},
                        tooltip: {},
                        legend: {data: ['临时用工数']},
                        xAxis: {
                            type: 'category',
                            data: this.laborReportsCountingRecordsDateTarget
                        },
                        yAxis: {type: 'value'},
                        series: [{
                            data: this.laborReportsCountingRecordsData,
                            type: 'line',
                            smooth: true
                        }]
                    });
                },
                initLogisticsCountingRecordsChart(text) {
                    this.logisticsCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    if (text == null || text == '' || text == undefined) text = '默认显示权限下所有货主快递分布';
                    this.logisticsCountingRecordsChart.setOption({
                        title: {
                            text: '快递分布',
                            subtext: text,
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                name: '快递分布',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: this.logisticsCountingRecords,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                },
                initWarehouseCountingRecordsChart() {
                    this.warehouseCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    this.warehouseCountingRecordsChart.setOption({
                        title: {
                            text: '仓库分布',
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                name: '仓库分布',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: this.warehouseCountingRecords,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                },
                initLaborReportsUserGroupsCountChart() {
                    this.laborReportsUserGroupsCountChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    this.laborReportsUserGroupsCountChart.setOption({
                        title: {
                            text: '小组临时工分布',
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                name: '小组临时工分布',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: this.laborReportsUserGroupsCount,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                },
                initLaborReportsCountingRecords() {
                    let _this = this;
                    this.laborReportsCountingRecords.forEach(function (item) {
                        _this.laborReportsCountingRecordsDateTarget.push(item.date_target);
                        _this.laborReportsCountingRecordsData.push(item.counter);
                    });
                },

                orderCountingRecordApi(orderCountingRecordsUnit) {
                    this.orderCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    if (orderCountingRecordsUnit === '') {
                        orderCountingRecordsUnit = this.orderCountingRecordsUnit;
                    }
                    this.switchDataPanel_forOrderCountingRecords(this.orderCountingUnit, orderCountingRecordsUnit);
                    this.orderCountingUnit = orderCountingRecordsUnit;
                    switch (orderCountingRecordsUnit) {
                        case '日':
                            this.orderCountingRecordsDayShow = true;
                            this.orderCountingRecordsMonthShow = false;
                            this.orderCountingRecordsYearShow = false;
                            break;
                        case '月':
                            this.orderCountingRecordsDayShow = false;
                            this.orderCountingRecordsMonthShow = true;
                            this.orderCountingRecordsYearShow = false;
                            break;
                        case '年':
                            this.orderCountingRecordsDayShow = false;
                            this.orderCountingRecordsMonthShow = false;
                            this.orderCountingRecordsYearShow = true;
                            break;
                    }
                    this.orderCountingRecordsUnit = orderCountingRecordsUnit;
                    let _this = this;
                    let text = null;
                    axios.post('{{url('apiLocal/control/panel/menu/orderCountingRecordApi')}}', {
                        'start': this.orderCountingRecordsStart, 'end': this.orderCountingRecordsEnd,
                        'unit': orderCountingRecordsUnit, 'owner_ids': this.selectOrderOwners
                    }).then(function (res) {
                        if (res.status === 200) {
                            _this.orderCountingRecords = res.data.orderCountingRecords;
                            _this.orderCountingRecordsDateTarget = [];
                            _this.orderCountingRecordsData = [];
                            _this.initOrderCountingRecords();
                            if (_this.selectOrderOwners.length > 0) text = '当前选中货主订单数量';
                            _this.initOrderCountingRecordsChart(text);
                            _this.orderCountingRecordsChart.hideLoading();
                        }
                    });
                },
                logisticsCountingRecordsApi() {
                    this.logisticsCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    let text = null;
                    let _this = this;
                    axios.post('{{url('apiLocal/control/panel/menu/logisticsCountingRecordsApi')}}', {
                        'start': this.logisticsCountingRecordsData[0],
                        'end': this.logisticsCountingRecordsData[1],
                        'owner_ids': this.selectLogisticsOwners
                    }).then(function (res) {
                        if (res.status === 200) {
                            _this.logisticsCountingRecords = res.data.logisticsCountingRecords;
                            if (_this.selectLogisticsOwners.length > 0) text = '当前选中货主快递分布';
                            _this.initLogisticsCountingRecordsChart(text);
                            _this.logisticsCountingRecordsChart.hideLoading();
                        }
                    });
                },

                warehouseCountingRecordsApi() {
                    this.warehouseCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    let formData = new FormData();
                    formData.append('start', this.warehouseCountingRecordsData[0]);
                    formData.append('end', this.warehouseCountingRecordsData[1]);
                    let _this = this;
                    axios.post('{{url('apiLocal/control/panel/menu/warehouseCountingRecordsApi')}}', formData).then(function (res) {
                        if (res.status === 200) {
                            _this.warehouseCountingRecords = res.data.warehouseCountingRecords;
                            _this.initWarehouseCountingRecordsChart();
                            _this.warehouseCountingRecordsChart.hideLoading();

                        }
                    });
                },

                laborReportsCountingRecordApi(laborReportsCountingRecordUnit) {
                    this.laborReportsCountingRecordsChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    if (laborReportsCountingRecordUnit === '') {
                        laborReportsCountingRecordUnit = this.laborReportsCountingRecordUnit;
                    }
                    this.switchDataPanel_forLaborReports(this.laborReportsUnit, laborReportsCountingRecordUnit);
                    this.laborReportsUnit = laborReportsCountingRecordUnit;
                    this.laborReportsCountingRecordUnit = laborReportsCountingRecordUnit;
                    switch (laborReportsCountingRecordUnit) {
                        case '日':
                            this.laborReportsCountingRecordsDayShow = true;
                            this.laborReportsCountingRecordsMonthShow = false;
                            this.laborReportsCountingRecordsYearShow = false;
                            break;
                        case '月':
                            this.laborReportsCountingRecordsDayShow = false;
                            this.laborReportsCountingRecordsMonthShow = true;
                            this.laborReportsCountingRecordsYearShow = false;
                            break;
                        case '年':
                            this.laborReportsCountingRecordsDayShow = false;
                            this.laborReportsCountingRecordsMonthShow = false;
                            this.laborReportsCountingRecordsYearShow = true;
                            break;
                    }

                    let formData = new FormData();
                    formData.append('start', this.laborReportsCountingRecordsStart);
                    formData.append('end', this.laborReportsCountingRecordsEnd);
                    formData.append('unit', laborReportsCountingRecordUnit);
                    let _this = this;
                    axios.post('{{url('apiLocal/control/panel/menu/laborReportsCountingRecordApi')}}', formData).then(function (res) {
                        if (res.status === 200) {
                            _this.laborReportsCountingRecords = res.data.laborReportsCountingRecords;
                            _this.laborReportsCountingRecordsDateTarget = [];
                            _this.laborReportsCountingRecordsData = [];
                            _this.initLaborReportsCountingRecords();
                            _this.initLaborReportsCountingRecordsChart();
                            _this.laborReportsCountingRecordsChart.hideLoading();
                        }
                    });
                },
                laborReportsUserGroupsCountApi() {
                    this.laborReportsUserGroupsCountChart.showLoading('default', {text: "加 载 中", color: '#C0C0C0'});
                    let formData = new FormData();
                    formData.append('start', this.laborReportsUserGroupsCountDate[0]);
                    formData.append('end', this.laborReportsUserGroupsCountDate[1]);
                    let _this = this;
                    axios.post('{{url('apiLocal/control/panel/menu/laborReportsUserGroupsCountApi')}}', formData).then(function (res) {
                        if (res.status === 200) {
                            _this.laborReportsUserGroupsCount = res.data.laborReportsUserGroupsCount;
                            _this.initLaborReportsUserGroupsCountChart();
                            _this.laborReportsUserGroupsCountChart.hideLoading();
                        }
                    });
                },
                loadWeightInfo(){
                    window.tempTip.setDuration(3000);
                    if (!this.searchOption.weightDate[0]){
                        window.tempTip.show("开始时间未选择");
                        return;
                    }
                    if (!this.searchOption.weightDate[1]){
                        window.tempTip.show("结束时间未选择");
                        return;
                    }
                    this.cardPool.weight.showLoading('default',{text:"加 载 中",color:'#C0C0C0'});
                    let url = "{{url('apiLocal/control/panel/menu/weightApi')}}";
                    let params = {start:this.searchOption.weightDate[0],end:this.searchOption.weightDate[1]};
                    window.tempTip.postBasicRequest(url,params,res=>{
                        this.cardPool.weight.hideLoading();
                        this.cardPool.weight.setOption(this._setWeightData(res.title,res.data));
                    });
                },
                loadExceptionTypeInfo() {
                    window.tempTip.setDuration(3000);
                    if (!this.searchOption.exceptionTypeDate[0]){
                        window.tempTip.show("开始时间未选择");
                        return;
                    }
                    if (!this.searchOption.exceptionTypeDate[1]){
                        window.tempTip.show("结束时间未选择");
                        return;
                    }
                    this.cardPool.exceptionType.showLoading('default',{text:"加 载 中",color:'#C0C0C0'});
                    let url = "{{url('apiLocal/control/panel/menu/exceptionTypeApi')}}";
                    let params = {start:this.searchOption.exceptionTypeDate[0],end:this.searchOption.exceptionTypeDate[1],owner_ids:this.selectExceptionTypeOwners};
                    window.tempTip.postBasicRequest(url,params,res=>{
                        this.cardPool.exceptionType.hideLoading();
                        this.cardPool.exceptionType.setOption(this._setExceptionTypeData(res.data));
                    });
                },
                switchWeightDate(){
                    let obj = this.dateOptions[this.searchOption.weightSelect];
                    this.searchOption.weightDate = [obj.start,obj.end];
                    this.loadWeightInfo();
                },
                switchExceptionTypeDate(){
                    let obj = this.dateOptions[this.searchOption.exceptionTypeSelect];
                    this.searchOption.exceptionTypeDate = [obj.start,obj.end];
                    this.loadExceptionTypeInfo();
                },
                _setWeightData(title, data){
                    return {
                        title: {
                            text: '已称重包裹占比',
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                return params.data.date + "<br>" + "总量：<span class='text-success font-weight-bold'>" + params.data.total + "</span><br>" + "已称：<span class='text-info font-weight-bold'>" + params.data.count + "</span>";
                            }
                        }, xAxis: {
                            data: title
                        }, yAxis: {
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value} %'
                            },
                            max: 100
                        }, label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%',
                            color: "red"
                        }, series: [{
                            type: "bar",
                            data: data,
                            itemStyle: {
                                color: "RGB(62,157,231)",
                            }
                        }]
                    };
                },
                _setExceptionTypeData(data) {
                    let resData = [];
                    data.forEach(item => {
                        resData.push({
                            value:item.count,
                            name:item.exception_type
                        })
                    })
                    return {
                        title: {
                            text: '异常分布',
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                name: '异常分布',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: resData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    }
                }
            }
        });
    </script>
@endsection