scd_tools_go/service/static/module/log/report.html

<style type="text/css">
    .queryform_item{float:left;width: 20%}
    .queryform_label{float:left;width: 7rem;text-align: right;}
    .queryform_inputblock{float:left;margin:1rem !important;width:13.5rem;}
</style>
<script type="text/javascript" src="/static/js/log.js"></script>
<div class="children-content">
    <blockquote class="layui-elem-quote" style="padding:10px;line-height:25px;">
        系统管理 / 日志报表
    </blockquote>
    <div style="position:relative;width:100%;">
            <div class="layui-panel" id="log_query_panel" style="height:15rem;line-height: 4.5rem;">
                <form class="layui-form layui-form-pane" action="">
                    <div class="queryform_item">
                        <span class="queryform_label">操作结果：</span>
                        <div class="layui-input-block queryform_inputblock">
                            <select id="combox_success">
                                <option value="">全部</option>
                                <option value="1">成功</option>
                                <option value="0">失败</option>
                            </select>
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">审计分类：</span>
                        <div class="layui-input-block queryform_inputblock">
                            <select id="combox_audittype">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">操作分类：</span>
                        <div class="layui-input-block queryform_inputblock">
                            <select id="combox_opttype">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">事件类型：</span>
                        <div class="layui-input-block queryform_inputblock">
                            <select id="combox_eventtype">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">事件等级：</span>
                        <div class="layui-input-block queryform_inputblock">
                            <select id="combox_eventlevel">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">开始日期：</span>
                        <div class="layui-input-inline queryform_inputblock">
                            <input type="text" readonly="" id="text_startdate" style="text-align:center;padding:0;" autocomplete="off" class="layui-input"/>
                        </div>
                    </div>
                    <div style="float:left;width: 20%">
                        <span class="queryform_label">结束日期：</span>
                        <div class="layui-input-inline queryform_inputblock">
                            <input type="text" readonly="" id="text_enddate" style="text-align:center;padding:0;" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">操作人：</span>
                        <div class="layui-input-inline queryform_inputblock">
                            <input type="text" maxlength="10" id="text_staff" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">操作IP：</span>
                        <div class="layui-input-inline queryform_inputblock">
                            <input type="text" maxlength="10" id="text_ip" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="queryform_item">
                        <span class="queryform_label">日志内容：</span>
                        <div class="layui-input-inline queryform_inputblock">
                            <input type="text" maxlength="50" id="text_description" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div style="float:left;width: 100%">
                        <button id="btnSearch" type="button" class="layui-btn layui-btn-normal" style="margin-left:40px;height:32px;line-height:32px;" onclick="QueryData();">查询</button>
                        <button id="btnSearch" type="button" class="layui-btn layui-btn-normal" style="margin-left:40px;height:32px;line-height:32px;" onclick="QueryReset();">重置</button>
                    </div>
                </form>
            </div>
    </div>
    <div id="echarts_pie" style="width: 38%;height: 40rem;float: left;margin-top: 2%;padding:1%"></div>
    <div id="echarts_line" style="width: 57%; height: 40rem; float: left; user-select: none;margin-top: 2%;padding: 1%;background-color: #f4f0f0;"></div>
</div>

<script type="text/html" id="options_tpl">
    <option value="">请选择</option>
    {{each data}}
        <option value="{{$value.code}}">{{$value.name}}</option>
    {{/each}}
</script>

<script type="text/javascript">
    var TypeColor = "#134BEA";
    $(document).ready(function () {        
        $.getJSON("/api/getGlobalCode",{"pcode":"log_opttype","pagesize":1000},function(jsondata){
            if(jsondata.code!=0){
                layui.msg(jsondata.msg);
                return;
            }
            var optionslst=template('options_tpl',jsondata);
            $("#combox_opttype").html(optionslst);
            layui.form.render("select");
        })
        $.getJSON("/api/getGlobalCode",{"pcode":"log_audittype","pagesize":1000},function(jsondata){
            if(jsondata.code!=0){
                layui.msg(jsondata.msg);
                return;
            }
            var optionslst=template('options_tpl',jsondata);
            $("#combox_audittype").html(optionslst);
            layui.form.render("select");
        })
        $.getJSON("/api/getGlobalCode",{"pcode":"log_optresult","pagesize":1000},function(jsondata){
            if(jsondata.code!=0){
                layui.msg(jsondata.msg);
                return;
            }
            var optionslst=template('options_tpl',jsondata);
            $("#combox_success").html(optionslst);
            layui.form.render("select");
        })
        $.getJSON("/api/getGlobalCode",{"pcode":"log_eventtype","pagesize":1000},function(jsondata){
            if(jsondata.code!=0){
                layui.msg(jsondata.msg);
                return;
            }
            var optionslst=template('options_tpl',jsondata);
            $("#combox_eventtype").html(optionslst);
            layui.form.render("select");
        })
        $.getJSON("/api/getGlobalCode",{"pcode":"log_eventlevel","pagesize":1000},function(jsondata){
            if(jsondata.code!=0){
                layui.msg(jsondata.msg);
                return;
            }
            var optionslst=template('options_tpl',jsondata);
            $("#combox_eventlevel").html(optionslst);
            layui.form.render("select");
        })        
        $('#text_startdate,#text_enddate').val(Global.GetCurrentDate());
        layui.use(['form', 'layedit', 'laydate'], function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#text_startdate,#text_enddate'
            });
        });
        QueryData();
    });

    function QueryReset(){
       $("#log_query_panel").find("input,select").each(function() {
            $(this).val("");            
        }); 
       QueryData();
    }

    function QueryData(){
        var parameter = {"stattype":"logtype"};
        $("#log_query_panel").find("input,select").each(function() {
            var id = $.trim($(this).attr("id")),
                v = $(this).val();
            if (id != "") {
                id = id.replace("text_", "").replace("combox_", "");
                parameter[id] = v;
            }
        });
        $.getJSON(Global.AccessUrl + "/api/log/datastat",parameter,function(jsondata){
            if(jsondata.code!=0){
                layer.msg(jsondata.msg);
                return;
            }
            ShowLine(jsondata.data);
            ShowPie(jsondata.data);
        });
    }

    function ShowPie(piedata){
        var chartDom = document.getElementById("echarts_pie");
        echarts.init(chartDom).dispose();
        if(piedata==null){
            return;
        }
        for (var i = 0; i < piedata.length; i++) {
            piedata[i]["name"] = piedata[i].logtypename;
            piedata[i]["value"]=piedata[i].num;
        }        
        var myChart = echarts.init(chartDom);
        var option={
            tooltip: {
              trigger: "item",
              formatter: "{b}:{d}%",
            },
            grid: {
              bottom: "bottom",
              left:"5%"
            },
            legend: {
              orient: "vertical",
              left: "left",
              top: "4%",
              textStyle: {
                color: "#48C3FF",
                fontSize: 12,
              },
              itemGap: 7,
              itemWidth: 10,
              itemHeight: 5,
              height: 300,
            },
            color: [
              "#1389FF",
              "#48C3FF",
              "#68F0D6",
              "#FFDA73",
              "#F39A33",
              "#FF7373",
              "#DA30EE",
              "#827DFF",
            ],
            series: [
              {
                name: "",
                type: "pie",
                radius: ["40%", "70%"],
                center: ["60%", "50%"],
                data: piedata,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
                label: {
                  show: true,
                },
              },
            ],
        }
        myChart.setOption(option);
    }

    function ShowLine(linedata){
        var chartDom = document.getElementById("echarts_line");
        echarts.init(chartDom).dispose();
        if(linedata==null){
            return;
        }
                var XData=[],YData=[];
                for (var i = 0; i < linedata.length; i++) {
                   XData.push(linedata[i]["logtypename"]);
                   YData.push(linedata[i]["num"]);
                }
                
                var myChart = echarts.init(chartDom);
                var option = {
                    grid: {
                        top: '5%',
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                    },
                    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>