btss/php/view/admin/friendship/statistics.html

{include file="common/header"/}

<style>
    .center {
        text-align: center;
        background-color: #F9F9F9 !important;
    }

    .boder {
        border: 1px solid #D2D2D2 !important;
    }

    .p-size {
        font-weight: 700;
        font-size: 20px;
    }
  .border-left{
      border-left-width: 5px;
      border-left-style: solid;
  }
</style>
<div class="LM-container">
    <div class="LM-main">
        <fieldset class="layui-elem-field layui-field-title">

        </fieldset>


        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4 ">
                <div class="layui-card boder">
                    <div class="layui-card-header center">浏览量(PV)</div>
                    <div class="layui-card-body center">
                        <p class="p-size">{$info.liull}</p>
                        <p>日 <i class="fa fa-line-chart"></i>{$info.liull_zt}%</p>
                        <!--<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17" height="17" style="fill: rgba(255,0,0,1);"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>-->
                    </div>
                </div>
            </div>
            <div class="layui-col-md4 ">
                <div class="layui-card boder">
                    <div class="layui-card-header center">独立用户(UV)</div>
                    <div class="layui-card-body center">
                        <p class="p-size">{$info.user}</p>
                        <p>日 <i class="fa fa-line-chart" aria-hidden="true"></i>0%</p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4 ">
                <div class="layui-card boder">
                    <div class="layui-card-header center">最终咨询数</div>
                    <div class="layui-card-body center">
                        <p class="p-size">{$info.zhixing}</p>
                        <p>日 <i class="fa fa-area-chart" aria-hidden="true"></i>0%</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-card" lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this">日指标</li>
                <li>浏览量</li>
                <li>独立用户</li>
                <li>最终咨询</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <!--日指标-->
                <div class="layui-tab-item layui-show">

                </div>
                <!--浏览量-->
                <div class="layui-tab-item">
                    <div class="layui-card">
                        <div class="layui-card-header border-left">柱形图
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm xianzhon layui-btn-disabled "   id="qitian">7天</button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm xianzhon" id="bangeyue">14天</button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm xianzhon" id="sanday">30天</button>
                            <input type="text" class="test1" >
                        </div>
                    </div>
                </div>
                <!--独立用户-->
                <div class="layui-tab-item">

                </div>
                <!--最终咨询-->
                <div class="layui-tab-item">

                </div>

                <div class="layui-card-body">
                    <div id="mainss" style="width: 100%;height: 500px;"></div>
                </div>

            </div>
        </div>

    </div>
</div>
<script src="/static/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<script src="/static/plugins/layui/extend/echarts/echarts.min.js"></script>
{include file="common/footer"/}
<script>
        let index=0
    layui.use(['element',"laydate","jquery","layer"], function(){
        var $ = layui.jquery, layer = layui.layer;
        var element = layui.element;
        var laydate = layui.laydate;

        element.on('tab(demo)', function(data){
            index=data.index
            let push={
                type:index,
                day:7,
            }

            getdata(push,function (res) {
                hello(res.data)
                // console.log("选中时间",res)
            })
            console.log("tab(demo)",data.index);
        });
        $(".xianzhon").click(function () {
            // console.log("选中", $(this))
            $(this).addClass("layui-btn-disabled") // 添加不能选中事件
           $(this).siblings().removeClass("layui-btn-disabled") // 移除日期的选中事件
        })
        // 时间选择器
        laydate.render({
            elem: '.test1' //指定元素
            ,range: true
            ,value: '2020-05-07 - 2020-06-17'
            ,done: function(value, date){
               let data =value.split(" - ")
                $(".xianzhon").prevAll().removeClass("layui-btn-disabled")// 移除日期的选中事件

                let push={
                    type:index,
                    start_time:data[0],
                    end_time:data[1],
                }

                getdata(push,function (res) {
                    console.log("选中时间",res)
                })

            }

        });

        window.hello = function(obj){
            var dom = document.getElementById("mainss"),
                myChart = echarts.init(dom), option = null;
            option={
                tooltip: {
                    show: true
                },
                xAxis: {
                    type: 'category',
                    data: obj.day
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: obj.data,
                    type: 'bar',
                    showBackground: true,

                    backgroundStyle: {
                        // color: 'rgba(220, 220, 220, 0.8)'
                        color: 'yellow'
                    },
                    animation:true,
                    animationEasing:"cubicOut",
                    animationEasingUpdate :"cubicOut",
                    animationDuration:function (idx) {
                        return idx*100
                    },
                    animationDelay: function (idx) {
                        // 越往后的数据延迟越大
                        return idx * 100;
                    },
                    animationDurationUpdate: function (idx) {
                        // 越往后的数据时长越大
                        return idx * 100;
                    },
                    animationDelayUpdate: function (idx) {
                        // 越往后的数据延迟越大
                        return idx * 100;
                    },
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                position:"top",
                                textStyle:{
                                    color:"black",
                                    fontSize: 16
                                }
                            }
                        }
                    }
                }]
            }
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        };
        // 七天
        $("#qitian").click(function () {
            // let data={
            //     day:['5.25', '5.26'],
            //     data:[120, 500]
            // }
            // hello(data);
            // console.log(getDay(-7));//7天前日期
            let push={
                type:index,
                day:7
            }
            getdata(push,function (res) {
                console.log("回调数据",res)
                hello(res.data);
            })
        });
        // 14天
        $("#bangeyue").click(function () {
            let push={
                type:index,
                day:14
            }
            getdata(push,function (res) {
                console.log("回调数据",res)
                hello(res.data);
            })
        });
        // 30天
        $("#sanday").click(function () {
            let push={
                type:index,
                day:30
            }
            getdata(push,function (res) {
                console.log("回调数据",res)
                hello(res.data);
            })
        });

    });
    (function(){
        var dom = document.getElementById("mainss"),
            myChart = echarts.init(dom), option = null;

        let push={
            type:index,
            // start_time:getDay(),
            // end_time:getDay(-7),
        }

        getdata(push,function (res) {
            hellos(res.data)
            console.log("初始化",res.data)
        })
        option={
            xAxis: {
                type: 'category',
                data: ['5.25', '5.26', '5.27', '5.28', '5.29', '5.30', '5.25']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 500, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        }
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    })();
    // 请求后台数据
    /**
     * 请求服务器
     * @param type 0 日指标 1 浏览量 2 独立用户 3 最终咨询
     * @param data 提交数据
     * @param callback 回调数据
     */
    function getdata(data,callback) {
        $.post("{:url('statistics')}",data,function(res){
            callback(res)
        },"json")
    }

    function hellos(obj){
        var dom = document.getElementById("mainss"),
            myChart = echarts.init(dom), option = null;
        option={
            xAxis: {
                type: 'category',
                data: obj.day
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: obj.data,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        }
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    };
    function getDay(day){
        var today = new Date();
        var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
        today.setTime(targetday_milliseconds); //注意，这行是关键代码
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);
        return tYear+"-"+tMonth+"-"+tDate;
    }
    function doHandleMonth(month){
        var m = month;
        if(month.toString().length == 1){
            m = "0" + month;
        }
        return m;
    }
</script>