report.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <style type="text/css">
  2. .queryform_item{float:left;width: 20%}
  3. .queryform_label{float:left;width: 7rem;text-align: right;}
  4. .queryform_inputblock{float:left;margin:1rem !important;width:13.5rem;}
  5. </style>
  6. <script type="text/javascript" src="/static/js/log.js"></script>
  7. <div class="children-content">
  8. <blockquote class="layui-elem-quote" style="padding:10px;line-height:25px;">
  9. 系统管理 / 日志报表
  10. </blockquote>
  11. <div style="position:relative;width:100%;">
  12. <div class="layui-panel" id="log_query_panel" style="height:15rem;line-height: 4.5rem;">
  13. <form class="layui-form layui-form-pane" action="">
  14. <div class="queryform_item">
  15. <span class="queryform_label">操作结果:</span>
  16. <div class="layui-input-block queryform_inputblock">
  17. <select id="combox_success">
  18. <option value="">全部</option>
  19. <option value="1">成功</option>
  20. <option value="0">失败</option>
  21. </select>
  22. </div>
  23. </div>
  24. <div class="queryform_item">
  25. <span class="queryform_label">审计分类:</span>
  26. <div class="layui-input-block queryform_inputblock">
  27. <select id="combox_audittype">
  28. <option value="">全部</option>
  29. </select>
  30. </div>
  31. </div>
  32. <div class="queryform_item">
  33. <span class="queryform_label">操作分类:</span>
  34. <div class="layui-input-block queryform_inputblock">
  35. <select id="combox_opttype">
  36. <option value="">全部</option>
  37. </select>
  38. </div>
  39. </div>
  40. <div class="queryform_item">
  41. <span class="queryform_label">事件类型:</span>
  42. <div class="layui-input-block queryform_inputblock">
  43. <select id="combox_eventtype">
  44. <option value="">全部</option>
  45. </select>
  46. </div>
  47. </div>
  48. <div class="queryform_item">
  49. <span class="queryform_label">事件等级:</span>
  50. <div class="layui-input-block queryform_inputblock">
  51. <select id="combox_eventlevel">
  52. <option value="">全部</option>
  53. </select>
  54. </div>
  55. </div>
  56. <div class="queryform_item">
  57. <span class="queryform_label">开始日期:</span>
  58. <div class="layui-input-inline queryform_inputblock">
  59. <input type="text" readonly="" id="text_startdate" style="text-align:center;padding:0;" autocomplete="off" class="layui-input"/>
  60. </div>
  61. </div>
  62. <div style="float:left;width: 20%">
  63. <span class="queryform_label">结束日期:</span>
  64. <div class="layui-input-inline queryform_inputblock">
  65. <input type="text" readonly="" id="text_enddate" style="text-align:center;padding:0;" autocomplete="off" class="layui-input">
  66. </div>
  67. </div>
  68. <div class="queryform_item">
  69. <span class="queryform_label">操作人:</span>
  70. <div class="layui-input-inline queryform_inputblock">
  71. <input type="text" maxlength="10" id="text_staff" autocomplete="off" class="layui-input">
  72. </div>
  73. </div>
  74. <div class="queryform_item">
  75. <span class="queryform_label">操作IP:</span>
  76. <div class="layui-input-inline queryform_inputblock">
  77. <input type="text" maxlength="10" id="text_ip" autocomplete="off" class="layui-input">
  78. </div>
  79. </div>
  80. <div class="queryform_item">
  81. <span class="queryform_label">日志内容:</span>
  82. <div class="layui-input-inline queryform_inputblock">
  83. <input type="text" maxlength="50" id="text_description" autocomplete="off" class="layui-input">
  84. </div>
  85. </div>
  86. <div style="float:left;width: 100%">
  87. <button id="btnSearch" type="button" class="layui-btn layui-btn-normal" style="margin-left:40px;height:32px;line-height:32px;" onclick="QueryData();">查询</button>
  88. <button id="btnSearch" type="button" class="layui-btn layui-btn-normal" style="margin-left:40px;height:32px;line-height:32px;" onclick="QueryReset();">重置</button>
  89. </div>
  90. </form>
  91. </div>
  92. </div>
  93. <div id="echarts_pie" style="width: 38%;height: 40rem;float: left;margin-top: 2%;padding:1%"></div>
  94. <div id="echarts_line" style="width: 57%; height: 40rem; float: left; user-select: none;margin-top: 2%;padding: 1%;background-color: #f4f0f0;"></div>
  95. </div>
  96. <script type="text/html" id="options_tpl">
  97. <option value="">请选择</option>
  98. {{each data}}
  99. <option value="{{$value.code}}">{{$value.name}}</option>
  100. {{/each}}
  101. </script>
  102. <script type="text/javascript">
  103. var TypeColor = "#134BEA";
  104. $(document).ready(function () {
  105. $.getJSON("/api/getGlobalCode",{"pcode":"log_opttype","pagesize":1000},function(jsondata){
  106. if(jsondata.code!=0){
  107. layui.msg(jsondata.msg);
  108. return;
  109. }
  110. var optionslst=template('options_tpl',jsondata);
  111. $("#combox_opttype").html(optionslst);
  112. layui.form.render("select");
  113. })
  114. $.getJSON("/api/getGlobalCode",{"pcode":"log_audittype","pagesize":1000},function(jsondata){
  115. if(jsondata.code!=0){
  116. layui.msg(jsondata.msg);
  117. return;
  118. }
  119. var optionslst=template('options_tpl',jsondata);
  120. $("#combox_audittype").html(optionslst);
  121. layui.form.render("select");
  122. })
  123. $.getJSON("/api/getGlobalCode",{"pcode":"log_optresult","pagesize":1000},function(jsondata){
  124. if(jsondata.code!=0){
  125. layui.msg(jsondata.msg);
  126. return;
  127. }
  128. var optionslst=template('options_tpl',jsondata);
  129. $("#combox_success").html(optionslst);
  130. layui.form.render("select");
  131. })
  132. $.getJSON("/api/getGlobalCode",{"pcode":"log_eventtype","pagesize":1000},function(jsondata){
  133. if(jsondata.code!=0){
  134. layui.msg(jsondata.msg);
  135. return;
  136. }
  137. var optionslst=template('options_tpl',jsondata);
  138. $("#combox_eventtype").html(optionslst);
  139. layui.form.render("select");
  140. })
  141. $.getJSON("/api/getGlobalCode",{"pcode":"log_eventlevel","pagesize":1000},function(jsondata){
  142. if(jsondata.code!=0){
  143. layui.msg(jsondata.msg);
  144. return;
  145. }
  146. var optionslst=template('options_tpl',jsondata);
  147. $("#combox_eventlevel").html(optionslst);
  148. layui.form.render("select");
  149. })
  150. $('#text_startdate,#text_enddate').val(Global.GetCurrentDate());
  151. layui.use(['form', 'layedit', 'laydate'], function () {
  152. var laydate = layui.laydate;
  153. laydate.render({
  154. elem: '#text_startdate,#text_enddate'
  155. });
  156. });
  157. QueryData();
  158. });
  159. function QueryReset(){
  160. $("#log_query_panel").find("input,select").each(function() {
  161. $(this).val("");
  162. });
  163. QueryData();
  164. }
  165. function QueryData(){
  166. var parameter = {"stattype":"logtype"};
  167. $("#log_query_panel").find("input,select").each(function() {
  168. var id = $.trim($(this).attr("id")),
  169. v = $(this).val();
  170. if (id != "") {
  171. id = id.replace("text_", "").replace("combox_", "");
  172. parameter[id] = v;
  173. }
  174. });
  175. $.getJSON(Global.AccessUrl + "/api/log/datastat",parameter,function(jsondata){
  176. if(jsondata.code!=0){
  177. layer.msg(jsondata.msg);
  178. return;
  179. }
  180. ShowLine(jsondata.data);
  181. ShowPie(jsondata.data);
  182. });
  183. }
  184. function ShowPie(piedata){
  185. var chartDom = document.getElementById("echarts_pie");
  186. echarts.init(chartDom).dispose();
  187. if(piedata==null){
  188. return;
  189. }
  190. for (var i = 0; i < piedata.length; i++) {
  191. piedata[i]["name"] = piedata[i].logtypename;
  192. piedata[i]["value"]=piedata[i].num;
  193. }
  194. var myChart = echarts.init(chartDom);
  195. var option={
  196. tooltip: {
  197. trigger: "item",
  198. formatter: "{b}:{d}%",
  199. },
  200. grid: {
  201. bottom: "bottom",
  202. left:"5%"
  203. },
  204. legend: {
  205. orient: "vertical",
  206. left: "left",
  207. top: "4%",
  208. textStyle: {
  209. color: "#48C3FF",
  210. fontSize: 12,
  211. },
  212. itemGap: 7,
  213. itemWidth: 10,
  214. itemHeight: 5,
  215. height: 300,
  216. },
  217. color: [
  218. "#1389FF",
  219. "#48C3FF",
  220. "#68F0D6",
  221. "#FFDA73",
  222. "#F39A33",
  223. "#FF7373",
  224. "#DA30EE",
  225. "#827DFF",
  226. ],
  227. series: [
  228. {
  229. name: "",
  230. type: "pie",
  231. radius: ["40%", "70%"],
  232. center: ["60%", "50%"],
  233. data: piedata,
  234. emphasis: {
  235. itemStyle: {
  236. shadowBlur: 10,
  237. shadowOffsetX: 0,
  238. shadowColor: "rgba(0, 0, 0, 0.5)",
  239. },
  240. },
  241. label: {
  242. show: true,
  243. },
  244. },
  245. ],
  246. }
  247. myChart.setOption(option);
  248. }
  249. function ShowLine(linedata){
  250. var chartDom = document.getElementById("echarts_line");
  251. echarts.init(chartDom).dispose();
  252. if(linedata==null){
  253. return;
  254. }
  255. var XData=[],YData=[];
  256. for (var i = 0; i < linedata.length; i++) {
  257. XData.push(linedata[i]["logtypename"]);
  258. YData.push(linedata[i]["num"]);
  259. }
  260. var myChart = echarts.init(chartDom);
  261. var option = {
  262. grid: {
  263. top: '5%',
  264. left: '5%',
  265. right: '5%',
  266. bottom: '10%',
  267. },
  268. xAxis: [{
  269. type: 'category',
  270. boundaryGap: true, //柱子是否不从0开始
  271. axisLine: { //坐标轴轴线相关设置。数学上的x轴
  272. show: true,
  273. lineStyle: {
  274. color: '#000'
  275. },
  276. },
  277. axisLabel: { //坐标轴刻度标签的相关设置
  278. interval: 0, //显示全部标签
  279. rotate: -30,
  280. textStyle: {
  281. color: '#000',
  282. padding: 0,
  283. fontSize: 12
  284. }
  285. },
  286. splitLine: {
  287. show: false
  288. },
  289. axisTick: {
  290. show: false,
  291. },
  292. data: XData
  293. }],
  294. yAxis: [{
  295. name: "条",
  296. nameTextStyle: {
  297. color: "#000",
  298. fontSize: 10 ,
  299. padding: 0
  300. },
  301. min: 0,
  302. splitLine: {
  303. show: true,
  304. lineStyle: {
  305. type: "dashed",
  306. color: '#000'
  307. }
  308. },
  309. axisLine: {
  310. show: false,
  311. lineStyle: {
  312. color: "#F3F5FA"
  313. }
  314. },
  315. axisLabel: {
  316. show: true,
  317. textStyle: {
  318. color: '#000',
  319. fontSize: 10 ,
  320. padding: 0
  321. }
  322. },
  323. axisTick: {
  324. show: false,
  325. },
  326. }],
  327. series: [{
  328. type: 'line',
  329. label: {
  330. show: true,
  331. position: 'top',
  332. textStyle: {
  333. color: TypeColor,
  334. }
  335. },
  336. itemStyle: {
  337. color: TypeColor,
  338. //borderColor: TypeColor,
  339. //borderWidth: 2,
  340. barBorderRadius: [10, 10, 0, 0]
  341. },
  342. tooltip: {
  343. show: false
  344. },
  345. data: YData
  346. }]
  347. };
  348. option && myChart.setOption(option);
  349. }
  350. </script>