后台首页

app/Http/Controllers/Admin/Base/IndexController.php

@@ -10,8 +10,11 @@ namespace App\Http\Controllers\Admin\Base;
 
 use App\Http\Controllers\Admin\Controller;
 use App\Models\InnerDevice;
+use App\Models\Option;
 use App\Models\Order;
 use App\Models\Project;
+use App\Models\User;
+use App\Models\UserAuth;
 use App\Services\Base\Tree;
 use App\Services\Base\BaseArea;
 use App\Services\Admin\Menus;
@@ -41,8 +44,21 @@ class IndexController extends Controller
 //        return redirect('/admin/AdminUser/index');
         $total_device = InnerDevice::count();
         $total_project = Project::count();
-        $total_order = Order::count();
-        return view('admin.base.index.welcome', compact('total_device', 'total_project', 'total_order'));
+        $total_money = Order::sum('money') / 100;
+        $users_total = User::count();
+        $users_not_auth_total = UserAuth::where('active', 2)->count();
+        $users_auth_total = UserAuth::count();
+
+        $items = InnerDevice::get();
+        $types = ['free', 'using', 'repair', 'scrap'];
+        $device_stat = [];
+        foreach ($types as $type) {
+            $id = Option::get('inner_devices', 'status', $type);
+            $num = $items->where('status', $id)->count();
+            $device_stat[$type] = $num;
+        }
+        $user_auths = UserAuth::where('active', 2)->limit(8)->get();
+        return view('admin.base.index.welcome', compact('total_device', 'total_project', 'total_money', 'users_total', 'users_auth_total', 'users_not_auth_total', 'device_stat', 'user_auths'));
     }
     
     function createAreaDate(){

app/Http/Controllers/Admin/ProjectController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Admin;
 use App\Models\AdminRoleModel;
 use App\Models\Department;
 use App\Models\Notification;
+use App\Models\Order;
 use App\Models\Project;
 use App\Models\Road;
 use App\Models\Role;
@@ -138,4 +139,21 @@ class ProjectController extends BaseController
         $this->model->where('id', $request->input('id'))->update(['active' => 1]);
         return response()->json(['status' => 'success', 'info' => '操作成功']);
     }
+
+    public function getStat(Request $request)
+    {
+        $projects = $this->model->get();
+        $names = $projects->pluck('name');
+        $data = [[], []];
+        $max = [0, 0];
+        foreach($projects as $project) {
+            $total = Order::where('project_id', $project->id)->count();
+            $total_money = Order::where('project_id', $project->id)->sum('money') / 100;
+            array_push($data[0], $total);
+            array_push($data[1], $total_money);
+            $max[0] = max($max[0], $total);
+            $max[1] = max($max[1], $total_money);
+        }
+        return response()->json(['status' => 'success', 'data' => compact('data', 'names', 'max')]);
+    }
 }

mini/utils/env.js

@@ -1,3 +1,3 @@
 const isTest = false;
-export const baseUrl = isTest ? 'http://app.rt/api/mini/' : 'http://t18.9026.com/api/mini/';
-export const imgHost = isTest ? 'http://app.rt/images/' : 'http://t18.9026.com/images/'
+export const baseUrl = isTest ? 'http://app.rt/api/mini/' : 'https://t18.9026.com/api/mini/';
+export const imgHost = isTest ? 'http://app.rt/images/' : 'https://t18.9026.com/images/'

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

@@ -1,89 +1,392 @@
 @extends('admin.layout-content')
 
 @section('header')
+    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
     <style>
-        .sg-stat-box {
+        .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-stat-list {
+        .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-stat-box .sg-left {
+        .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-stat-list .sg-item {
+        .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;
-            justify-content: 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;
-            padding: 0 30px;
+            margin: 20px;
+            padding: 20px;
+            width: calc(50% - 40px);
+            box-sizing: border-box;
+            color: white;
+            border-radius: 20px;
         }
-        .sg-stat-list .sg-item:not(:last-child) {
-            border-right: 1px solid #ddd;
+        .sg-project-2-list .sg-item div:first-child {
+            margin-bottom: 20px;
         }
-        .sg-stat-list .sg-item .sg-label {
-            margin-top: 15px;
-            color: grey;
+        .sg-gray-bg {
+            background: grey;
         }
-        .sg-stat-list .sg-item .sg-number {
-            font-weight: bold;
-            font-size: 1.3rem;
+        .sg-font-lg {
+            font-size: 2rem;
         }
     </style>
 @endsection
 
 @section('content')
-    <div class="sg-container layui-container" style="background: #F3F3F4">
-        <div class="layui-row">
-            <div class="layui-card" style="margin-top: 30px;">
-                <div class="layui-card-body">
-                    <div class="sg-stat-box">
-                        <div class="sg-left">
-                            <img src="/images/avatar.png" class="sg-avatar">
-                            {{--<div class="sg-name">{{ $_user->name }}</div>--}}
+    <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 class="sg-stat-list">
-                            <div class="sg-item">
-                                <div class="sg-number">{{ $total_device }}</div>
-                                <div class="sg-label">内部设备数目</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-item">
-                                <div class="sg-number">{{ $total_device }}</div>
-                                <div class="sg-label">项目数</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 class="sg-item">
-                                <div class="sg-number">{{ $total_device }}</div>
-                                <div class="sg-label">订单数</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 class="layui-row">--}}
-            {{--<div class="layui-card" style="margin-top: 30px;">--}}
-                {{--<div class="layui-card-body">--}}
-                    {{--<div class="sg-action-list">--}}
-                        {{--<a class="sg-action" href="">--}}
-                            {{--<i></i>--}}
-                            {{--<div>设备管理</div>--}}
-                        {{--</a>--}}
-                    {{--</div>--}}
-                {{--</div>--}}
-            {{--</div>--}}
-        {{--</div>--}}
     </div>
 @endsection
 
 @section('footer')
     <script>
-        $(function () {
+        $(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>