tianyunperfect
/
layer_ui_admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-日志挖掘系统 1.0</title>
    <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="../static/css/font.css">
    <link rel="stylesheet" href="../static/css/weadmin.css">
    <script src="../static/js/axios.min.js"></script>
    <script src="../static/js/vue.min.js"></script>
    <script src="../config/app.js"></script>

</head>

<body>
<div class="weadmin-body" id="app">
    <div class="layui-fluid" style="overflow: hidden;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">快捷统计</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel weadmin-shortcut" lay-filter="shortcut" lay-indicator="inside"
                             lay-arrow="none" style="width: 100%; height: 280px;">
                            <div carousel-item="">
                                <ul class="layui-row layui-col-space10 layui-this">
                                    <li class="layui-col-xs3">
                                        <a href="javascript:void(0);">
                                            <i class="layui-icon">{{ yesterdayUserCount }}</i>
                                            <cite>昨日活跃用户数</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:void(0);">
                                            <i class="layui-icon">{{ yesterdayRequest }}</i>
                                            <cite>昨日请求数</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:void(0);">
                                            <i class="layui-icon">{{ lastMonthUserCount }}</i>
                                            <cite>当月活跃用户数</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:void(0);">
                                            <i class="layui-icon">{{ lastMonthRequest }}</i>
                                            <cite>当月请求数</cite>
                                        </a>
                                    </li>


                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-lg12 layui-collapse" style="border: none;">
        <div id="dayCount" style="width: 100%;height:400px;"></div>


    </div>

</div>
</body>
<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="//cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<script type="text/javascript">
    layui.extend({
        admin: '{/}../static/js/admin',
    });
    layui.use(['jquery', 'element', 'util', 'admin', 'carousel'], function () {
        var element = layui.element,
            $ = layui.jquery,
            carousel = layui.carousel,
            util = layui.util,
            admin = layui.admin;
        //建造实例
        carousel.render({
            elem: '.weadmin-shortcut'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , trigger: 'hover'
            , autoplay: false
        });


        $(function () {

        });

    });
</script>


<script>
    new Vue({
        el: "#app",
        data: {
            yesterdayRequest: 0,
            yesterdayUserCount: 0,
            lastMonthRequest: 0,
            lastMonthUserCount: 0,
            questCountParams: {
                dateBegin: "2019-08-01",
                dateEnd: "2019-11-01"
            },
            questCountData: {
                dom:{},
                option: {},
                x: [],
                y_user: [],
                y_request:[]
            }
        },
        methods: {
            /**
             * 获取昨天访问量和活跃用户
             */
            getYesterdayCount: function () {
                let _this = this;
                axios.post(app.baseUrl + "/api/log/queryYesterdayCount")
                    .then(function (res) {
                        if (res.flag) {
                            _this.yesterdayRequest = data.requestCount;
                            _this.yesterdayUserCount = data.userCount;
                        }
                    })
            },

            /**
             * 获取当月访问量和活跃用户数
             */
            getLastMonthCount: function () {
                let _this = this;
                axios.post(app.baseUrl + "/api/log/queryLastMonthCount")
                    .then(function (res) {
                        res = res.data;
                        if (res.flag) {
                            _this.lastMonthRequest = data.request_count;
                            _this.lastMonthUserCount = data.user_count;
                        }
                    })
            },
            initAppKeyDayCount: function () {
                let _this = this;
                axios.post(app.baseUrl + "/api/log/queryDayCount", this.questCountParams)
                    .then(function (res) {
                        res = res.data;
                        if (res.flag) {
                            _this.questCountData.dom = echarts.init(document.getElementById('dayCount'));
                            for (let i = 0; i < data.length; i++) {
                                _this.questCountData.x.push(new Date(data[i].logDate).format('yyyy-MM-dd'));
                                _this.questCountData.y_request.push(data[i].requestCount);
                                _this.questCountData.y_user.push(data[i].userCount);
                            }

                            let option = {
                                title: {
                                    text: '活跃用户/访问量'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['活跃用户','访问量']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: _this.questCountData.x
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name:'活跃用户',
                                        type:'line',
                                        stack: '数量',
                                        data:_this.questCountData.y_user
                                    },
                                    {
                                        name:'访问量',
                                        type:'line',
                                        stack: '总量',
                                        data:_this.questCountData.y_request
                                    }
                                ]
                            };
                            _this.questCountData.option = option;
                            _this.questCountData.dom.setOption(_this.questCountData.option);

                        }
                    })

            }
        },
        mounted: function () {
            this.getYesterdayCount();
            this.getLastMonthCount();
            this.initAppKeyDayCount();
        },
        updated: function () {
        }
    });
</script>
</html>