houwenfeng
/
scd_tools_go


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<head>
<link rel="stylesheet" href="/static/css/common.css"/>
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<style type="text/css">

    .layout_dialog {
        background: linear-gradient(39deg, #081531 0%, #233d76 100%);
        overflow: hidden;
        outline: 0;
        border-radius: 2px;
        position: fixed !important;
        z-index: 10000;
        color: #B9E3FF;
        border: 1px solid #62A9FF;
        display: none;
        left: 50%;
        top: 50%;
    }


    .layout_close {
        background-image: url(/static/images/btn_close.png);
        width: 14px;
        height: 14px;
        float: right;
        background-repeat: no-repeat;
        margin: 12px 15px 0 0;
        cursor: pointer;
    }

    .person_info_title {
        float: left;
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        background-color: rgb(29, 38, 71);
        text-align: center;
        color: #fff;
        letter-spacing: 1px;
        font-size: 1rem;
    }
    .clearn {
        background: #000000 !important;
        opacity: 0.7;
        width: 100%;
        height: 100%;
        z-index: 102;
        position: absolute;
        left: 0;
        top: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
        display: none;
    }
    .layui-form-radio{
        padding:0 !important;
        margin: 0 !important;
    }
</style>
</head>
<div class="layui-form" lay-filter="example" style="margin:20px auto 0 auto;width:93%;" id="add_container">
    <div class="layui-row">
        <div class="layui-col-md12" id="cycletype" style="height: 2rem;line-height: 2rem;width: 100%;">
            <span>统计周期：</span>
            <span style="margin-right: 1.2rem;"><input lay-filter="cycletype" name="cycletype" type="radio" value="year">年</span>
            <span style="margin-right: 1.2rem;"><input lay-filter="cycletype" name="cycletype" type="radio" value="month">月</span>
            <span style="margin-right: 1.2rem;"><input lay-filter="cycletype" name="cycletype" type="radio" value="week">周</span>
            <span style="margin-right: 1.2rem;"><input lay-filter="cycletype" name="cycletype" type="radio" value="day">日</span>
            <span style="margin-right: 1.2rem;"><input lay-filter="cycletype" name="cycletype" type="radio" checked="" value="hour">时</span>
        </div>  
        <div class="layui-col-md12" id="echarts" style="height: 20rem;width: 100%;">
            
        </div>     
    </div>
    <div class="layui-row" id="otherdata" style="background-color: #f2f2f2;">
        <table style="width: 100%;text-align: center;line-height: 1.5rem;">
            <thead style="font-weight: bold;font-size: 1rem;color: #aa8989;border-bottom: 1px solid #e1d4d4;">
                <tr><td width="20%">系统事件量</td><td width="20%">业务事件量</td><td width="20%">操作类型统计</td><td width="20%">用户量</td><td width="20%">IP量</td></tr>
            </thead>
            <tbody>
                <tr>
                    <td><span id="systemevent_num">-</span></td><td><span id="busevent_num">-</span></td><td><span id="opttype_num">-</span></td><td><span id="staff_num">-</span></td><td><span id="ip_num">-</span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    var TypeColor = "#134BEA";
    $(document).ready(function () {
        layui.use(['layer', 'form'], function () {
            loadData("");
            layui.form.on('radio(cycletype)', function(data){
                //console.log(data.elem); //得到radio原始DOM对象
                //console.log(data.value); //被点击的radio的value值
                var v = data.value;//被点击的radio的value值
                loadData(v);
            });
            /*
            parent.$.getJSON("/api/log/datastat",{"startdate":startdate,"enddate":enddate},function(jsodnata){
                
            })*/
        });
    });

function loadData(cycletype){
            var startdate=parent.$("#text_startdate").val();
            var enddate=parent.$("#text_startdate").val();
            parent.$.getJSON("/api/log/chartstat",{"startdate":startdate,"enddate":enddate,"cycletype":cycletype},function(jsodnata){
                if(jsodnata.code!=0){
                    layer.msg(jsodnata.msg);
                    return;
                }
                for (var i = 0; i < jsodnata.data.eventstat.length; i++) {
                    var item=jsodnata.data.eventstat[i];
                    if(item.eventtype==0) $("#systemevent_num").html(item.num);
                    if(item.eventtype==1) $("#busevent_num").html(item.num);
                }
                $("#opttype_num").html(jsodnata.data.optypestat.length);
                $("#staff_num").html(jsodnata.data.staffstat.length);
                $("#ip_num").html(jsodnata.data.ipstat.length);
                var linedata=jsodnata.data["list"];
                var XData=[],YData=[];
                for (var i = 0; i < linedata.length; i++) {
                   XData.push(linedata[i]["dt"]);
                   YData.push(linedata[i]["num"]);
                }
                var chartDom = document.getElementById("echarts");
                echarts.init(chartDom).dispose();
                var myChart = echarts.init(chartDom);
                var option = {
                    grid: {
                        top: '15%',
                        left: '13%',
                        right: '10%',
                        bottom: '20%',
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: true, //柱子是否不从0开始
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#000'
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置
                            interval: 0, //显示全部标签
                            rotate: -30,
                            textStyle: {
                                color: '#000',
                                padding: 0,
                                fontSize: 12 
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false,
                        },
                        data: XData
                    }],
                    yAxis: [{
                        name: "条",
                        nameTextStyle: {
                            color: "#000",
                            fontSize: 10 ,
                            padding: 0
                        },
                        min: 0,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: '#000'
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#F3F5FA"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000',
                                fontSize: 10 ,
                                padding: 0
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [{
                        type: 'line',
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: TypeColor,
                            }
                        },
                        itemStyle: {
                            color: TypeColor,
                            //borderColor: TypeColor,
                            //borderWidth: 2,
                            barBorderRadius: [10, 10, 0, 0]
                        },
                        tooltip: {
                            show: false
                        },
                        data: YData
                    }]
                };
                option && myChart.setOption(option);                
            })    
}
</script>