tianyunperfect
/
layer_ui_admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用户统计</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/config.js"></script>

</head>

<body>

<div class="weadmin-nav">
			<span class="layui-breadcrumb">
				<a href="javascript:;">首页</a> <a href="javascript:;">用户分析</a>
				<a href="javascript:;"> <cite>用户统计</cite></a>
			</span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
       href="javascript:location.replace(location.href);"
       title="刷新">
        <i class="layui-icon layui-icon-refresh"></i>
        <!-- <i class="layui-icon" style="line-height:30px">&#x1002;</i> -->
    </a>
</div>

<div class="weadmin-body" id="app">
    <div class="layui-fluid" style="overflow: hidden;">
        <!--顶部查询框-->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 we-search">
                用户ID：
                <div class="layui-inline">
                    <input class="layui-input" placeholder="请输入用户ID" name="start" v-model="questCountParams.userId"/>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn" @click="query"><i class="layui-icon"></i>查询</a>
                    </div>
                </div>

            </form>
        </div>

        <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">{{ yesterdayRequest }}</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: {
                beginDate: "2019-08-01",
                endDate: "2019-11-01",
                userId: "",
            },
            questCountData: {
                dom: {},
                option: {},
                x: [],
                y_user: [],
                y_request: []
            },
        },
        methods: {
            /**
             * 获取昨天访问量
             */
            getYesterdayCount: function () {
                let _this = this;
                axios.post(app.baseUrl + "/api/log/queryUserYesterdayCount",{userId:_this.questCountParams.userId})
                    .then(function (res) {
                        res = res.data;
                        if (res.flag) {
                            let data = res.data;
                            _this.yesterdayRequest = data.requestCount;
                        }
                    });
            },

            /**
             * 获取当月访问量和活跃用户数
             */
            getLastMonthCount: function () {
                let _this = this;
                axios.post(app.baseUrl + "/api/log/queryUserLastMonthCount",{userId:_this.questCountParams.userId})
                    .then(function (res) {
                        res = res.data;
                        if (res.flag) {
                            let data = res.data;
                            _this.lastMonthRequest = data.request_count;
                        }
                    })
            },
            initAppKeyDayCount: function () {
                let _this = this;
                axios.post(app.baseUrl + "/api/log/queryUserDayCountList", this.questCountParams)
                    .then(function (res) {
                        res = res.data;
                        if (res.flag) {
                            _this.questCountData.dom = echarts.init(document.getElementById('dayCount'));
                            let data = res.data;
                            _this.questCountData.x = [];
                            _this.questCountData.y_request = [];
                            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);
                            }

                            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_request
                                    }
                                ]
                            };
                            _this.questCountData.option = option;
                            _this.questCountData.dom.setOption(_this.questCountData.option);

                        }
                    })

            },

            query:function () {
                this.getYesterdayCount();
                this.getLastMonthCount();
                this.initAppKeyDayCount();
            }
        },
        mounted: function () {

        },
        updated: function () {
        }
    });
</script>
</html>