<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-badge {height: auto;}
        .layui-card-header {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
        .count-second-row {padding-bottom: 0px;}
    </style>
</head>
<body>

<div id="LAY-app" class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            系统登录用户量
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">天</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p id="loginCount" class="layuiadmin-big-font">0</p>
                            <p>
                                增长率
                                <span class="layuiadmin-span-color">
                                    <span id="loginPercentage">0</span>% <i class="layui-inline fa fa-arrow-up"></i>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            新增用户量
                            <span class="layui-badge layui-bg-orange layuiadmin-badge">周</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p id="newUserWeekCount" class="layuiadmin-big-font">0</p>
                            <p>
                                占比
                                <span class="layuiadmin-span-color">
                                    <span id="newUserWeekPercentage">0</span>% <i class="layui-inline fa fa-users"></i></i>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            总用户量
                            <span class="layui-badge layui-bg-cyan layuiadmin-badge">月</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p id="userCount" class="layuiadmin-big-font">0</p>
                            <p>
                                增长人数
                                <span class="layuiadmin-span-color">
                                    <span id="userMonthNewCount">0</span> <i class="layui-inline fa fa-arrow-up"></i>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            机构数量
                            <span class="layui-badge layui-bg-black layuiadmin-badge"><i class="layui-inline fa fa-bank"></i></span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p id="departmentCount" class="layuiadmin-big-font">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            角色数量
                            <span class="layui-badge layui-bg-red layuiadmin-badge"><i class="layui-inline fa fa-user-o"></i></span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p id="roleCount" class="layuiadmin-big-font">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            职位数量
                            <span class="layui-badge layui-bg-green layuiadmin-badge"><i class="layui-inline fa fa-briefcase"></i></span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p id="positionCount" class="layuiadmin-big-font">0</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-col-sm12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="loginEChart" style="width: 100%; height: 267px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户状态占比</div>
                <div class="layui-card-body">
                    <div id="userTypeEChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户类型占比</div>
                <div class="layui-card-body">
                    <div id="userStateEChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    系统登录日志（最新10条）
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="height: 200px; overflow: auto;">
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col>
                            <col>
                            <col width="180">
                        </colgroup>
                        <tbody v-cloak>
                        <tr v-for="loginLogger in loginLoggerList">
                            <td>
                                <span class="layui-badge layui-bg-blue"><i class="fa fa-user-circle-o"></i> {{loginLogger.creatorName}}</span> 登录了系统
                            </td>
                            <td>{{loginLogger.loginAddress}}</td>
                            <td><i class="fa fa-clock-o"></i> {{loginLogger.gmtCreate}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    用户调整日志（最新10条）
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="height: 200px; overflow: auto;">
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col>
                            <col width="180">
                        </colgroup>
                        <tbody v-cloak>
                        <tr v-for="userAdjustment in userAdjustmentList">
                            <td v-if="userAdjustment.updateType == 'username'">
                                <span class="layui-badge layui-bg-blue"><i class="fa fa-user-circle-o"></i> {{userAdjustment.userName}}</span> 变更了用户名为 <span class="layui-badge layui-bg-cyan" :title="'原用户名：'+ userAdjustment.oldValue" style="cursor:pointer;">{{userAdjustment.newValue}}</span>
                            </td>
                            <td v-if="userAdjustment.updateType == 'password'">
                                <span class="layui-badge layui-bg-blue"><i class="fa fa-user-circle-o"></i> {{userAdjustment.userName}}</span> 修改了密码
                            </td>
                            <td v-if="userAdjustment.updateType == 'restPassword'">
                                <span class="layui-badge layui-bg-blue"><i class="fa fa-user-circle-o"></i> {{userAdjustment.userName}}</span> 重置了密码为 <span class="layui-badge layui-bg-cyan">{{userAdjustment.newValue}}</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> {{userAdjustment.gmtCreate}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    机构变更日志（最新6条）
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="height: 200px; overflow: auto;">
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col>
                            <col width="180">
                        </colgroup>
                        <tbody v-cloak>
                        <tr v-for="departmentAdjustment in departmentAdjustmentList">
                            <td>
                                <span class="layui-badge layui-bg-gray">
                                    <i class="fa fa-bank"></i> {{departmentAdjustment.oldDepartmentName}}
                                </span>
                                <span class="layui-badge" v-if="departmentAdjustment.adjustmentType == 'split'">拆分为</span>
                                <span class="layui-badge layui-bg-green" v-if="departmentAdjustment.adjustmentType == 'merge'">合并到</span>
                                <span class="layui-badge layui-bg-gray">
                                    <i class="fa fa-bank"></i> {{departmentAdjustment.newDepartmentName}}
                                </span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> {{departmentAdjustment.gmtCreate}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    机构用户调整日志（最新20条）
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="height: 200px; overflow: auto;">
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col>
                            <col width="180">
                        </colgroup>
                        <tbody v-cloak>
                        <tr v-for="userDepartmentAdjustment in userDepartmentAdjustmentList">
                            <td>
                                <span class="layui-badge layui-bg-blue">
                                    <i class="fa fa-user-circle-o"></i> {{userDepartmentAdjustment.userName}}
                                </span>
                                <span class="layui-badge" v-if="userDepartmentAdjustment.adjustmentType == 'leave'">离开</span>
                                <span class="layui-badge layui-bg-green" v-if="userDepartmentAdjustment.adjustmentType == 'join'">加入</span>
                                <span class="layui-badge layui-bg-gray">
                                    <i class="fa fa-bank"></i> {{userDepartmentAdjustment.departmentName}}
                                </span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> {{userDepartmentAdjustment.gmtCreate}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/echarts/echarts.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'animate-numbers'], function() {
        var $ = layui.$;
        var $win = $(window);
        new Vue({
            el: '#LAY-app',
            data: {
                newUserWeekCount: 0,
                newUserWeekPercentage: 0,
                loginCount: 0,
                loginPercentage: 0,
                userCount: 0,
                userMonthNewCount: 0,
                departmentCount: 0,
                roleCount: 0,
                positionCount: 0,
                loginLoggerList: [],
                userAdjustmentList: [],
                departmentAdjustmentList: [],
                userDepartmentAdjustmentList: [],
                resizeTimeout: null,
                loginEChart: null,
                userTypeEChart: null
            },
            methods: {
                countUserWeek: function() {
                    var self = this;
                    top.restAjax.get('api/count/count-new-user-by-week', {}, null, function(code, data) {
                        self.newUserWeekCount = data.data.count;
                        self.userWeekPercentage = data.data.percentage;
                        self.$nextTick(function() {
                            $('#newUserWeekCount').animateNumbers(self.newUserWeekCount);
                            $('#newUserWeekPercentage').animateNumbers(self.userWeekPercentage);
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                countLogin: function() {
                    var self = this;
                    top.restAjax.get('api/count/count-login', {}, null, function(code, data) {
                        self.loginCount = data.data.count;
                        self.loginPercentage = data.data.percentage
                        self.$nextTick(function() {
                            $('#loginCount').animateNumbers(self.loginCount);
                            $('#loginPercentage').animateNumbers(self.loginPercentage);
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                countUser: function() {
                    var self = this;
                    top.restAjax.get('api/count/count-user', {}, null, function(code, data) {
                        self.userCount = data.data.count;
                        self.userMonthNewCount = data.data.newCount;
                        self.$nextTick(function() {
                            $('#userCount').animateNumbers(self.userCount);
                            $('#userMonthNewCount').animateNumbers(self.userMonthNewCount);
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                countDepartment: function() {
                    var self = this;
                    top.restAjax.get('api/count/count-department', {}, null, function(code, data) {
                        self.departmentCount = data.data;
                        self.$nextTick(function() {
                            $('#departmentCount').animateNumbers(self.departmentCount);
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                countRole: function() {
                    var self = this;
                    top.restAjax.get('api/count/count-role', {}, null, function(code, data) {
                        self.roleCount = data.data;
                        self.$nextTick(function() {
                            $('#roleCount').animateNumbers(self.roleCount);
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                countPosition: function() {
                    var self = this;
                    top.restAjax.get('api/count/count-position', {}, null, function(code, data) {
                        self.positionCount = data.data;
                        self.$nextTick(function() {
                            $('#positionCount').animateNumbers(self.positionCount);
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                initLoginEChart: function() {
                    var self = this;
                    if(self.loginEChart) {
                        self.loginEChart.resize();
                        return;
                    }
                    top.restAjax.get('api/count/count-login-for-days/10', {}, null, function(code, data) {
                        self.loginEChart = echarts.init(document.getElementById('loginEChart'));
                        self.loginEChart.setOption({
                            title: {
                                text: '近期系统登录情况'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true,
                                show: true,
                            },
                            legend: {
                                data: ['登录人数']
                            },
                            xAxis: {
                                type: 'category',
                                data: data.data.dateArray,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '登录人数',
                                data: data.data.loginCountArray,
                                type: 'line',
                                smooth: true,
                                stack: '总数',
                                areaStyle: {},
                            }]
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                initUserTypeEChart: function() {
                    var self = this;
                    if(self.userTypeEChart) {
                        self.userTypeEChart.resize();
                        return;
                    }
                    top.restAjax.get('api/count/count-user-type-proportion', {}, null, function(code, data) {
                        self.userTypeEChart = echarts.init(document.getElementById('userTypeEChart'));
                        var legendData = [];
                        var seriesData = [];
                        for(var i = 0, item; item = data.data[i++];) {
                            legendData.push(item.name);
                            seriesData.push({
                                name: item.name,
                                value: item.value,
                                itemStyle: {
                                    color: item.color
                                }
                            })
                        }
                        self.userTypeEChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 10,
                                data: legendData
                            },
                            series: [
                                {
                                    name: '用户类型占比',
                                    type: 'pie',
                                    radius: '66%',
                                    avoidLabelOverlap: false,
                                    label: {
                                        formatter: '{b|{b}}\n{hr|}\n  {c|{c}}  {per|{d}%}  ',
                                        backgroundColor: '#eee',
                                        borderColor: '#aaa',
                                        borderWidth: 0.5,
                                        borderRadius: 4,
                                        rich: {
                                            b: {
                                                fontSize: 14,
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.5,
                                                height: 0
                                            },
                                            per: {
                                                color: '#eee',
                                                backgroundColor: '#334455',
                                                padding: [2, 4],
                                                borderRadius: 2
                                            },
                                            c: {
                                                fontSize: 14,
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                        }
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '14',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    data: seriesData
                                }
                            ]
                        });
                    }, function(code, data) {
                       top.dialog.msg(data.msg);
                    });
                },
                initUserStateEChart: function() {
                    var self = this;
                    if(self.userStateEChart) {
                        self.userStateEChart.resize();
                        return;
                    }
                    top.restAjax.get('api/count/count-user-state-proportion', {}, null, function(code, data) {
                        self.userStateEChart = echarts.init(document.getElementById('userStateEChart'));
                        var legendData = [];
                        var seriesData = [];
                        for(var i = 0, item; item = data.data[i++];) {
                            legendData.push(item.name);
                            seriesData.push({
                                name: item.name,
                                value: item.value,
                                itemStyle: {
                                    color: item.color
                                }
                            })
                        }
                        self.userStateEChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 10,
                                data: legendData
                            },
                            series: [
                                {
                                    name: '用户状态占比',
                                    type: 'pie',
                                    radius: '66%',
                                    avoidLabelOverlap: false,
                                    label: {
                                        formatter: '{b|{b}}\n{hr|}\n  {c|{c}}  {per|{d}%}  ',
                                        backgroundColor: '#eee',
                                        borderColor: '#aaa',
                                        borderWidth: 0.5,
                                        borderRadius: 4,
                                        rich: {
                                            b: {
                                                fontSize: 14,
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.5,
                                                height: 0
                                            },
                                            per: {
                                                color: '#eee',
                                                backgroundColor: '#334455',
                                                padding: [2, 4],
                                                borderRadius: 2
                                            },
                                            c: {
                                                fontSize: 14,
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                        }
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '14',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    data: seriesData
                                }
                            ]
                        });
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                initLoginLogger: function() {
                    var self = this;
                    top.restAjax.get(top.restAjax.path('api/log/listpage/login-log', []), {
                        page: 1,
                        rows: 10
                    }, null, function(code, data) {
                        self.loginLoggerList = data.rows;
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                initUserAdjustment: function() {
                    var self = this;
                    top.restAjax.get(top.restAjax.path('api/log/listpage/user-adjustment', []), {
                        page: 1,
                        rows: 10
                    }, null, function(code, data) {
                        self.userAdjustmentList = data.rows;
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                initDepartmentAdjustment: function() {
                    var self = this;
                    top.restAjax.get(top.restAjax.path('api/log/listpage/department-adjustment', []), {
                        page: 1,
                        rows: 10
                    }, null, function(code, data) {
                        self.departmentAdjustmentList = data.rows;
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                initDepartmentUserAdjustment: function() {
                    var self = this;
                    top.restAjax.get(top.restAjax.path('api/log/listpage/department-user-adjustment', []), {
                        page: 1,
                        rows: 20
                    }, null, function(code, data) {
                        self.userDepartmentAdjustmentList = data.rows;
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                }
            },
            mounted: function() {
                var self = this;
                self.countUserWeek();
                self.countLogin();
                self.countUser();
                self.countDepartment();
                self.countRole();
                self.countPosition();
                self.initLoginEChart();
                self.initUserTypeEChart();
                self.initUserStateEChart();
                self.initLoginLogger();
                self.initUserAdjustment();
                self.initDepartmentAdjustment();
                self.initDepartmentUserAdjustment();
                // 事件 - 页面变化
                $win.on('resize', function() {
                    if(self.resizeTimeout) {
                        return;
                    }
                    self.resizeTimeout = setTimeout(function() {
                        self.initLoginEChart();
                        self.initUserTypeEChart();
                        self.initUserStateEChart();
                        self.resizeTimeout = null;
                    }, 500);
                });
            }
        })
    });
</script>
</body>
</html>