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

@extends('layouts.app')
@section('title')控制台@endsection
@section('content')
    <div class="container-fluid" id="list">
        <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-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-2" v-for="(warehousesOrder,index) in warehousesOrders">
                <div class="card">
                    <div class="card-header text-success h5">
                        <p>@{{ getWareHouse(warehousesOrder.name) }}:@{{ 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-5">
                <div class="card">
                    <div class="card-header">
                        <div class="col-5 row">
                            <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>
                            <div class="row">
                                <el-button type="primary" value="日" @click="orderCountingRecordApi('日')" v-model="unit">日</el-button>
                                <el-button type="primary" value="周" @click="orderCountingRecordApi('周')" v-model="unit">周</el-button>
                                <el-button type="primary" value="月" @click="orderCountingRecordApi('月')" v-model="unit">月</el-button>
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row">
                        <div id="orderCountingRecords" class="col" style="width:600px;height:600px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-7">
                <div class="row">
                    <div class="col-6">
                        <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 id="logisticsCountingRecords" class="col"
                                     style="width: 600px;height:600px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <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 id="warehouseCountingRecords" class="col"
                                     style="width: 600px;height:600px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script src="{{ mix('js/echarts.js') }}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                myChart: null,
                menus:{!! $menus !!},
                warehousesOrders:{!! $warehousesOrders !!},
                orderCountingRecords:{!! $orderCountingRecords !!},
                logisticsCountingRecords:{!! $logisticsCountingRecords !!},
                warehouseCountingRecords:{!! $warehouseCountingRecords !!},
                warehouses: {},
                totalOrders: {
                    total: null,
                    createOrder: null,
                    assignedComplete: null,
                    partialAllocation: null,
                    partPacking: null,
                    sowComplete: null,
                },
                orderCountingRecordsDateTarget: [],
                orderCountingRecordsData: [],
                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(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-DD'),
                    moment(new Date()).format('yyyy-MM-DD')],
                logisticsCountingRecordsData: [moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-DD'),
                    moment(new Date()).format('yyyy-MM-DD')],
                warehouseCountingRecordsData: [moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-DD'),
                    moment(new Date()).format('yyyy-MM-DD')],
                unit: '日'
            },
            mounted: function () {
                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();

            },
            methods: {
                getWareHouse: function (code) {
                    return this.warehouses[code];
                },
                initOrderCountingRecords() {
                    let _this = this;
                    this.orderCountingRecords.forEach(function (item) {
                        _this.orderCountingRecordsDateTarget.push(item.date_target);
                        _this.orderCountingRecordsData.push(item.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
                        }]
                    });
                },
                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)'
                                    }
                                }
                            }
                        ]
                    });
                },
                orderCountingRecordApi(unit) {
                    this.unit = unit;
                    let formData = new FormData();
                    formData.append('start', this.orderCountingRecordsDate[0]);
                    formData.append('end', this.orderCountingRecordsDate[1]);
                    formData.append('unit', unit);
                    console.log(formData.get('unit'));
                    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();
                        }
                    });
                },
                logisticsCountingRecordsApi() {
                    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();
                        }
                    });
                },

                warehouseCountingRecordsApi() {
                    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();
                        }
                    });
                },

            }
        });
    </script>
@endsection