RailwayTwo/resources/views/admin/base/index/welcome.blade.php

@extends('admin.layout-content')

@section('header')
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
    <style>
        .sg-top-card {
            color: #87888A;
        }
        .sg-top-card .layui-card-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sg-top-card .sg-top-left {
            display: flex;
            align-items: flex-end;
        }
        .sg-top-card .sg-top-left .sg-name {
            margin-left: 30px;
        }
        .sg-top-card .sg-top-left .sg-avatar {
            width: 50px;
            height: 50px;
        }
        .sg-top-right .sg-list {
            display: flex;
            align-items: center;
        }
        .sg-top-right .sg-list .sg-item {
            text-align: center;
        }
        .sg-divider {
            border-left: 1px solid rgba(233, 233, 233, 100);
            height: 30px;
        }
        .sg-top-right .sg-list .sg-item {
            margin: 15px;
        }
        .sg-top-right .sg-list .sg-item .sg-name {
            margin-top: 15px;
        }
        .sg-top-right .sg-list .sg-item .sg-name span {
            font-size: 2rem;
            font-weight: bold;
            color: rgba(38, 38, 38, 100);
        }
        .sg-project-list {
            display: flex;
            flex-wrap: wrap;
        }
        .sg-project-list .sg-item {
            width: 33%;
            border-top: 1px solid #e9e9e9;
            border-right: 1px solid #e9e9e9;
            padding: 15px;
            box-sizing: border-box;
        }
        .sg-project-list .sg-item:nth-child(3n) {
            border-right-width: 0;
        }
        .sg-project-list .sg-item .sg-header,
        .sg-project-list .sg-item .sg-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sg-project-list .sg-item .sg-desp {
            margin: 15px 0;
        }
        .sg-project-list .sg-item .sg-footer {
            color: #87888A;
        }
        .sg-project-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sg-project-header .sg-right {
            color: #1990FF;
        }
        .sg-quick-list {
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: #101010;
        }
        .sg-quick-list .sg-quick-item .sg-icon,
        .sg-quick-list .sg-quick-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .sg-quick-list .sg-quick-item .sg-icon {
            border-radius: 50%;
            height: 50px;
            width: 50px;
            line-height: 50px;
            color: white;
        }
        .sg-quick-list .sg-quick-item .sg-name {
            margin-top: 10px;
            font-size: 0.8rem;
        }
        .sg-icon.sg-create {
            background: #3894FF;
        }
        .sg-icon.sg-draft {
            background: #85888E;
        }
        .sg-icon.sg-point {
            background: #E29836;
        }
        .sg-icon.sg-revise {
            background: #4CA3AD;
        }
        .sg-zone-list .sg-zone-item {
            display: flex;
            align-items: center;
            width: 100%;
            color: #505559;
            margin: 15px 0;
        }
        .sg-zone-list .sg-zone-item .sg-process-bar {
            background: #0095D8;
            height: 16px;
            border-radius: 8px;
            margin: 0 15px;
        }
        .sg-zone-list .sg-zone-item .sg-process {
            display: flex;
            align-items: center;
        }
        .sg-zone-list .sg-zone-item .sg-zone-name {
            width: 100px;
        }
        .sg-project-2-list {
            display: flex;
            flex-wrap: wrap;
        }
        .sg-project-2-list .sg-item {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            margin: 20px;
            padding: 20px;
            width: calc(50% - 40px);
            box-sizing: border-box;
            color: white;
            border-radius: 20px;
        }
        .sg-project-2-list .sg-item div:first-child {
            margin-bottom: 20px;
        }
        .sg-gray-bg {
            background: grey;
        }
        .sg-font-lg {
            font-size: 2rem;
        }
    </style>
@endsection

@section('content')
    <div class="sg-index-container">
        <div class="layui-card sg-top-card">
            <div class="layui-card-body">
                <div class="sg-top-left">
                    <img src="/images/avatar.png" class="sg-avatar">
                    <div class="sg-name">{{ $_user->name }}|管理员</div>
                </div>
                <div class="sg-top-right">
                    <div class="sg-list">
                        <div class="sg-item">
                            <div class="sg-label">项目数</div>
                            <div class="sg-name">
                                <span>{{$total_project}}</span>
                            </div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-divider"></div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-label">内部设备总数</div>
                            <div class="sg-name">
                                <span>{{$total_device}}</span>
                            </div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-divider"></div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-label">累计花费总金额</div>
                            <div class="sg-name">
                                <span>{{$total_money}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">项目数据一览图</div>
                    <div class="layui-card-body">
                        <div id="my-chart" style="width: 100%;height:400px;"></div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="sg-project-header">
                            <div class="sg-left">待授权用户</div>
                            <a class="sg-right" href="/admin/UserAuth/index">全部待授权用户</a>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="sg-list sg-project-list">
                            @foreach($user_auths as $item)
                                <a class="sg-item" href="/admin/UserAuth/index">
                                    <div class="sg-header">
                                        <h3 class="sg-name">
                                            <b>{{ $item->name }}</b>
                                        </h3>
                                        <span class="layui-badge layui-bg-orange">待授权</span>
                                    </div>
                                    <div class="sg-desp">{{ $item->remark }}</div>
                                    <div class="sg-footer">
                                        <div class="sg-zone">{{ $item->project ? $item->project->name : ''  }}</div>
                                        <div class="sg-date">{{ substr($item->updated_at, 0, 10) }}</div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">快速开始  /  便捷导航</div>
                    <div class="layui-card-body">
                        <div class="sg-quick-list">
                            <a class="sg-quick-item" href="/admin/UserAuth/index">
                                <div class="sg-icon sg-create"><i class="iconfont iconbi"></i></div>
                                <div class="sg-name">用户授权</div>
                            </a>
                            <a class="sg-quick-item" href="/admin/InnerDevice/index">
                                <div class="sg-icon sg-draft"><i class="iconfont iconyouxiang"></i></div>
                                <div class="sg-name">设备管理</div>
                            </a>
                            <a class="sg-quick-item" href="/admin/Project/index">
                                <div class="sg-icon sg-point"><i class="iconfont iconxingxing"></i></div>
                                <div class="sg-name">项目管理</div>
                            </a>
                            <a class="sg-quick-item" href="#">
                                <div class="sg-icon sg-revise"><i class="iconfont iconduihao"></i></div>
                                <div class="sg-name">尽情期待</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">用户人数</div>
                    <div class="layui-card-body">
                        <div class="sg-zone-list">
                            <div class="sg-zone-item">
                                <div class="sg-zone-name">注册总人数</div>
                                <div class="sg-process">
                                    <div class="sg-process-bar" style="width: 100px"></div>
                                    <div class="sg-total">{{ $users_total }}个</div>
                                </div>
                            </div>
                            <div class="sg-zone-item">
                                <div class="sg-zone-name">待授权人数</div>
                                <div class="sg-process">
                                    <div class="sg-process-bar" style="width: {{ $users_not_auth_total / $users_total * 100 }}px"></div>
                                    <div class="sg-total">{{ $users_not_auth_total }}个</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">内部设备情况</div>
                    <div class="layui-card-body">
                        <div class="sg-project-2-list">
                            <div class="sg-item sg-device-card sg-green-bg">
                                <div>闲置</div>
                                <div class="sg-font-lg">{{ $device_stat['free'] }}</div>
                            </div>
                            <div class="sg-item sg-device-card sg-red-bg">
                                <div>在用</div>
                                <div class="sg-font-lg">{{ $device_stat['using'] }}</div>
                            </div>
                            <div class="sg-item sg-device-card sg-orange-bg">
                                <div>维修</div>
                                <div class="sg-font-lg">{{ $device_stat['repair'] }}</div>
                            </div>
                            <div class="sg-item sg-device-card sg-gray-bg">
                                <div>报废</div>
                                <div class="sg-font-lg">{{ $device_stat['scrap'] }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(function() {
            var myChart = echarts.init(document.getElementById('my-chart'));

            $.ajax({
                method: 'POST',
                url: '/admin/Project/getStat',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {},
                success: function (data) {
                    if(data.status === 'success') {
                        // console.log(data.data);
                        updateChart(data.data);
                    }
                },
                error: function () {

                }
            });

            function updateChart(data) {
                // 指定图表的配置项和数据
                var option = {
                    color: ['#71D4D4', '#C3B6E6'],
                    legend: {
                        data: ['订单数', '订单金额']
                    },
                    tooltip: {},
                    xAxis: [
                        {
                            type: 'category',
                            data: data['names']
                        }
                    ],
                    yAxis: [{
                        type: 'value',
                        name: '订单数',
                        splitLine: {
                            show: false
                        }
                    }, {
                        type: 'value',
                        name: '订单金额',
                        splitLine: {
                            show: false
                        }
                    }],
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {
                            name: '订单数',
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            data: data.data[0]
                        },
                        {
                            name: '订单金额',
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            yAxisIndex: 1,
                            data: data.data[1]
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        })
    </script>
@endsection