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 col-lg-2 col-xl-2 col-md-2">
                    <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 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-sm col-lg-5  col-xl-5 col-md-5">
                    <div class="card">
                        <div class="card-header">
                            <span class="demonstration"></span>
                            <el-date-picker @blur="orderCountingRecordApi('')"
                                            v-model="orderCountingRecordsDate"
                                            type="daterange"
                                            align="right"
                                            unlink-panels
                                            range-separator="-"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="yyyy-MM-dd"
                                            :picker-options="pickerOptions">
                            </el-date-picker>
                            <el-button type="primary" value="日" @click="orderCountingRecordApi('日')"
                                       v-model="orderCountingRecordsUnit">日
                            </el-button>
                            <el-button type="primary" value="月" @click="orderCountingRecordApi('月')"
                                       v-model="orderCountingRecordsUnit">月
                            </el-button>
                            <el-button type="primary" value="年" @click="orderCountingRecordApi('年')"
                                       v-model="orderCountingRecordsUnit">年
                            </el-button>
                        </div>
                        <div class="card-body row">
                            <div v-show="orderCountingRecordsShow" id="orderCountingRecords" class="col"
                                 style="width:600px;height:600px;"></div>
                        </div>
                        <div v-show="!orderCountingRecordsShow" class="text-center">
                            <h3>正在加载...</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm col-lg-7  col-xl-7 col-md-7">
                    <div class="row">
                        <div class="col-sm col-lg-5  col-xl-5 col-md-5">
                            <div class="card">
                                <div class="card-header">
                                    <div class="col-5 row">
                                        <div class="block">
                                            <span class="demonstration"></span>
                                            <el-date-picker @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>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body row">
                                    <div v-show="logisticsCountingRecordsShow" id="logisticsCountingRecords" class="col"
                                         style="width: 600px;height:600px;"></div>
                                    <div v-show="!logisticsCountingRecordsShow" class="text-center">
                                        <h3>正在加载...</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm col-lg-5  col-xl-5 col-md-5">
                            <div class="card">
                                <div class="card-header">
                                    <div class="col-5 row">
                                        <div class="block">
                                            <span class="demonstration"></span>
                                            <el-date-picker @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>
                                <div class="card-body row">
                                    <div v-show="warehouseCountingRecordsShow" id="warehouseCountingRecords" class="col"
                                         style="width: 600px;height:600px;"></div>
                                    <div v-show="!warehouseCountingRecordsShow">
                                        正在加载
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @can('人事管理-临时工报表-可见全部组')
                    <div class="col-sm col-lg-5  col-xl-5 col-md-5">
                        <div class="card">
                            <div class="card-header">
                                <span class="demonstration"></span>
                                <el-date-picker @blur="laborReportsCountingRecordApi('')"
                                                v-model="laborReportsCountingRecordsDate"
                                                type="daterange"
                                                align="right"
                                                unlink-panels
                                                range-separator="-"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                value-format="yyyy-MM-dd"
                                                :picker-options="pickerOptions">
                                </el-date-picker>
                                <el-button type="primary" value="日" @click="laborReportsCountingRecordApi('日')"
                                           v-model="laborReportsCountingRecordUnit">日
                                </el-button>
                                <el-button type="primary" value="月" @click="laborReportsCountingRecordApi('月')"
                                           v-model="laborReportsCountingRecordUnit">月
                                </el-button>
                            </div>
                            <div class="card-body row">
                                <div v-show="laborReportsCountingRecordsShow" id="laborReportsCountingRecords"
                                     class="col"
                                     style="width:600px;height:600px;"></div>
                                <div v-show="!laborReportsCountingRecordsShow">
                                    正在加载
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm col-lg-7  col-xl-5 col-md-5">
                        <div class="card">
                            <div class="card-header">
                                <span class="demonstration"></span>
                                <el-date-picker @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 v-show="laborReportsUserGroupsCountShow" id="laborReportsUserGroupsCount"
                                     class="col"
                                     style="width:600px;height:600px;"></div>
                                <div v-show="!laborReportsUserGroupsCountShow">
                                    正在加载
                                </div>
                            </div>
                        </div>
                    </div>
                @endcan
            </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 !!},
                warehousesOrders:{!! $warehousesOrders !!},
                orderCountingRecords:{!! $orderCountingRecords !!},
                logisticsCountingRecords:{!! $logisticsCountingRecords !!},
                warehouseCountingRecords:{!! $warehouseCountingRecords !!},
                laborReportsCountingRecords:{!! $laborReportsCountingRecords !!},
                laborReportsUserGroupsCount:{!! $laborReportsUserGroupsCount !!},
                warehouses: {},
                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]);
                        }
                    }]
                },
                orderCountingRecordsDate: [moment().subtract('1', 'month').format('yyyy-MM-DD'),
                    moment(new Date()).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: '日',
                orderCountingRecordsShow: true,
                logisticsCountingRecordsShow: true,
                warehouseCountingRecordsShow: true,
                laborReportsCountingRecordsShow: true,
                laborReportsUserGroupsCountShow: true,
            },
            mounted: function () {
                $('#list').removeClass('d-none');
                let _this = this;
                this.warehouses = {
                    "WH01": '松江一仓',
                    "WH02": '松江二仓',
                    "WH03": '嘉定一仓',
                }
                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.initOrderCountingRecords();
                this.orderCountingRecordsChart = echarts.init(document.getElementById('orderCountingRecords'));
                this.initOrderCountingRecordsChart();

                this.logisticsCountingRecordsChart = echarts.init(document.getElementById('logisticsCountingRecords'));
                this.initLogisticsCountingRecordsChart();

                this.warehouseCountingRecordsChart = echarts.init(document.getElementById('warehouseCountingRecords'));
                this.initWarehouseCountingRecordsChart();

                this.initLaborReportsCountingRecords();
                this.laborReportsCountingRecordsChart = echarts.init(document.getElementById('laborReportsCountingRecords'));
                this.initLaborReportsCountingRecordsChart();

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

            },
            methods: {
                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() {
                    this.orderCountingRecordsChart.setOption({
                        title: {text: '订单量趋势'},
                        tooltip: {},
                        legend: {data: ['订单数']},
                        xAxis: {
                            type: 'category',
                            data: this.orderCountingRecordsDateTarget
                        },
                        yAxis: {type: 'value'},
                        series: [{
                            data: this.orderCountingRecordsData,
                            type: 'line',
                            smooth: true
                        }]
                    });
                },
                initLaborReportsCountingRecordsChart() {
                    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() {
                    this.logisticsCountingRecordsChart.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.logisticsCountingRecords,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                },
                initWarehouseCountingRecordsChart() {
                    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.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) {
                    if (orderCountingRecordsUnit === '') {
                        orderCountingRecordsUnit = this.orderCountingRecordsUnit;
                    }
                    this.orderCountingRecordsUnit = orderCountingRecordsUnit;
                    let formData = new FormData();
                    formData.append('start', this.orderCountingRecordsDate[0]);
                    formData.append('end', this.orderCountingRecordsDate[1]);
                    formData.append('unit', orderCountingRecordsUnit);
                    this.orderCountingRecordsShow = false;
                    let _this = this;
                    axios.post('{{url('apiLocal/control/panel/menu/orderCountingRecordApi')}}', formData).then(function (res) {
                        if (res.status === 200) {
                            _this.orderCountingRecords = res.data.orderCountingRecords;
                            _this.orderCountingRecordsDateTarget = [];
                            _this.orderCountingRecordsData = [];
                            _this.initOrderCountingRecords();
                            _this.initOrderCountingRecordsChart();
                            _this.orderCountingRecordsShow = true;
                        }
                    });
                },
                logisticsCountingRecordsApi() {
                    this.logisticsCountingRecordsShow = false;
                    let formData = new FormData();
                    formData.append('start', this.logisticsCountingRecordsData[0]);
                    formData.append('end', this.logisticsCountingRecordsData[1]);
                    let _this = this;
                    axios.post('{{url('apiLocal/control/panel/menu/logisticsCountingRecordsApi')}}', formData).then(function (res) {
                        if (res.status === 200) {
                            _this.logisticsCountingRecords = res.data.logisticsCountingRecords;
                            _this.initLogisticsCountingRecordsChart();
                            _this.logisticsCountingRecordsShow = true;
                        }
                    });
                },

                warehouseCountingRecordsApi() {
                    this.warehouseCountingRecordsShow = false;
                    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.warehouseCountingRecordsShow = true;

                        }
                    });
                },

                laborReportsCountingRecordApi(laborReportsCountingRecordUnit) {
                    this.laborReportsCountingRecordsShow = false;
                    if (laborReportsCountingRecordUnit === '') {
                        laborReportsCountingRecordUnit = this.laborReportsCountingRecordUnit;
                    }
                    this.laborReportsCountingRecordUnit = laborReportsCountingRecordUnit;
                    let formData = new FormData();
                    formData.append('start', this.laborReportsCountingRecordsDate[0]);
                    formData.append('end', this.laborReportsCountingRecordsDate[1]);
                    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.laborReportsCountingRecordsShow = true;
                        }
                    });
                },
                laborReportsUserGroupsCountApi() {
                    this.laborReportsUserGroupsCountShow = false;
                    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.laborReportsUserGroupsCountShow = true;
                        }
                    });
                },
            }
        });
    </script>
@endsection