monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit 0f798448b060a52a49cbe22b76295f42bf822153 1 parent 9744ab8b

操作日志

Inline Side-by-side
Showing 28 changed files with 1274 additions and 710 deletions
@@ -734,7 +734,6 @@ layui.extend({ @@ -734,7 +734,6 @@ layui.extend({
734 tryFunc(); 734 tryFunc();
735 }) 735 })
736 736
737 - layui.pageTips.ajaxSetupInit();  
738 737
739 //对外输出 738 //对外输出
740 exports('index', { 739 exports('index', {
@@ -83,8 +83,6 @@ layui.define(['laytpl', 'layer'], function (exports) { @@ -83,8 +83,6 @@ layui.define(['laytpl', 'layer'], function (exports) {
83 options.data = options.data || {}; 83 options.data = options.data || {};
84 options.headers = options.headers || {}; 84 options.headers = options.headers || {};
85 85
86 - layui.pageTips.viewReqHeader(options);  
87 - //  
88 if (request.tokenName) { 86 if (request.tokenName) {
89 var sendData = typeof options.data === 'string' 87 var sendData = typeof options.data === 'string'
90 ? JSON.parse(options.data) 88 ? JSON.parse(options.data)
@@ -26,113 +26,113 @@ layui.define(['element', 'admin', 'view'], function (exports) { @@ -26,113 +26,113 @@ layui.define(['element', 'admin', 'view'], function (exports) {
26 hashChane: function () { 26 hashChane: function () {
27 27
28 var that = this; 28 var that = this;
  29 + // window.onload = function () {
  30 + // // 绑定事件
  31 + // that.bindElemClickEvent();
  32 + // }
29 33
30 - window.onload = function (){  
31 - // 绑定事件  
32 - that.bindElemClickEvent();  
33 - }  
34 -  
35 - // debugger  
36 var hash = window.top.location.hash; 34 var hash = window.top.location.hash;
37 - sessionStorage.setItem("pagePath", hash);  
38 - sessionStorage.setItem("batchNo", that.getOperateUUID()); 35 + // sessionStorage.setItem("pagePath", hash);
  36 + // sessionStorage.setItem("batchNo", that.getOperateUUID());
39 37
40 if (hash == '#/') { 38 if (hash == '#/') {
41 - sessionStorage.setItem("pageName", "首页");  
42 - sessionStorage.setItem("menuName", "首页");  
43 - sessionStorage.setItem("menuPath", "");  
44 - sessionStorage.setItem("groupId",that.getOperateUUID()); 39 + // sessionStorage.setItem("pageName", "首页");
  40 + // sessionStorage.setItem("menuName", "首页");
  41 + // sessionStorage.setItem("menuPath", "");
  42 + // sessionStorage.setItem("groupId", that.getOperateUUID());
  43 + that.saveMenuLog("首页", "/")
  44 +
45 return; 45 return;
46 } else if (hash == '#/user/login/redirect=%2F') { 46 } else if (hash == '#/user/login/redirect=%2F') {
47 sessionStorage.setItem("pageName", "登录"); 47 sessionStorage.setItem("pageName", "登录");
48 return; 48 return;
49 } 49 }
  50 + //
  51 + //
  52 + // var url = [];
  53 + // window.top.location.hash.split('/').map(function (v) {
  54 + // if (v.indexOf('=') == -1 && v != '#' && v != '') {
  55 + // url.push(v);
  56 + // return v;
  57 + // }
  58 + // return '';
  59 + // })
  60 + //
  61 + // if (url.length > 0) {
  62 + // $.ajax({
  63 + // url: setter.views + url.join('/') + setter.engine,
  64 + // async: false,
  65 + // success(res) {
  66 + // var html = '<div>' + res + '</div>';
  67 + // var elemTitle = $(html).find('title')
  68 + // , title = elemTitle.text() || (html.match(/\<title\>([\s\S]*)\<\/title>/) || [])[1];
  69 + // sessionStorage.setItem("pageName", title);
  70 + // }
  71 + // });
  72 + // }
50 73
  74 + },
51 75
52 - var url = [];  
53 - window.top.location.hash.split('/').map(function (v) {  
54 - if (v.indexOf('=') == -1 && v != '#' && v != '') {  
55 - url.push(v);  
56 - return v;  
57 - }  
58 - return '';  
59 - }) 76 + // /**
  77 + // * hash变更
  78 + // */
  79 + // viewReqHeader: function (options) {
  80 + // options.headers['batchNo'] = this.getPath("batchNo");
  81 + // options.headers['groupId'] = this.getPath("groupId");
  82 + // options.headers['intervalFunc'] = this.getPath("intervalFunc");
  83 + // options.headers['pagePath'] = this.getPath("pagePath");
  84 + // options.headers['pageName'] = this.getEncodeName('pageName'); //encodeURIComponent(sessionStorage.getItem("pageName"))
  85 + //
  86 + // options.headers['menuPath'] = this.getPath("menuPath")
  87 + // options.headers['menuName'] = this.getEncodeName('menuName'); //encodeURIComponent(sessionStorage.getItem("menuName"))
  88 + //
  89 + // options.headers['buttonPath'] = this.getPath("buttonPath")
  90 + // options.headers['buttonName'] = this.getEncodeName('buttonName'); //encodeURIComponent(sessionStorage.getItem("buttonName"))
  91 + // },
60 92
61 - if (url.length > 0) {  
62 - $.ajax({  
63 - url: setter.views + url.join('/') + setter.engine,  
64 - async: false,  
65 - success(res) {  
66 - var html = '<div>' + res + '</div>';  
67 - var elemTitle = $(html).find('title')  
68 - , title = elemTitle.text() || (html.match(/\<title\>([\s\S]*)\<\/title>/) || [])[1];  
69 - sessionStorage.setItem("pageName", title);  
70 - }  
71 - });  
72 - } 93 + // ajaxSetupInit: function () {
  94 + //
  95 + // // 清空按钮名称
  96 + // sessionStorage.setItem("buttonPath", "");
  97 + // sessionStorage.setItem("buttonName", "");
  98 + //
  99 + // $.ajaxSetup({
  100 + // headers: {
  101 + // batchNo: this.getPath("batchNo"),
  102 + // groupId: this.getPath("groupId"),
  103 + // intervalFunc: this.getPath("IntervalFunc"),
  104 + // pagePath: this.getPath("pagePath"),
  105 + // pageName: this.getEncodeName('pageName'),// encodeURIComponent(sessionStorage.getItem(sessionStorage.getItem("pageName"))),
  106 + //
  107 + // menuPath: this.getPath("menuPath"),
  108 + // menuName: this.getEncodeName('menuName'),//encodeURIComponent(sessionStorage.getItem("menuName")),
  109 + //
  110 + // buttonPath: this.getPath("buttonPath"),
  111 + // buttonName: this.getEncodeName('buttonName'),//encodeURIComponent(sessionStorage.getItem("buttonName"))
  112 + // }
  113 + // });
  114 + // },
73 115
74 - },  
75 116
76 /** 117 /**
77 - * hash变更 118 + * 定时刷新任务
  119 + * @constructor
78 */ 120 */
79 - viewReqHeader: function (options) {  
80 - options.headers['batchNo'] = this.getPath("batchNo");  
81 - options.headers['groupId'] = this.getPath("groupId");  
82 -  
83 - options.headers['pagePath'] = this.getPath("pagePath");  
84 - options.headers['pageName'] = this.getEncodeName('pageName'); //encodeURIComponent(sessionStorage.getItem("pageName"))  
85 -  
86 - options.headers['menuPath'] = this.getPath("menuPath")  
87 - options.headers['menuName'] = this.getEncodeName('menuName'); //encodeURIComponent(sessionStorage.getItem("menuName"))  
88 -  
89 - options.headers['buttonPath'] = this.getPath("buttonPath")  
90 - options.headers['buttonName'] = this.getEncodeName('buttonName'); //encodeURIComponent(sessionStorage.getItem("buttonName"))  
91 - },  
92 -  
93 - ajaxSetupInit: function () {  
94 -  
95 - // sessionStorage.setItem("batchNo", "");  
96 - // sessionStorage.setItem("groupId", "");  
97 - //  
98 - // // 清空按钮名称  
99 - // sessionStorage.setItem("pagePath", "");  
100 - // sessionStorage.setItem("pageName", "");  
101 - // // 清空按钮名称  
102 - // sessionStorage.setItem("menuPath", "");  
103 - // sessionStorage.setItem("pageName", "");  
104 - // 清空按钮名称  
105 - sessionStorage.setItem("buttonPath", "");  
106 - sessionStorage.setItem("buttonName", "");  
107 -  
108 -  
109 - $.ajaxSetup({  
110 - headers: {  
111 - batchNo: this.getPath("batchNo"),  
112 - groupId: this.getPath("groupId"),  
113 - pagePath: this.getPath("pagePath"),  
114 - pageName: this.getEncodeName('pageName'),// encodeURIComponent(sessionStorage.getItem(sessionStorage.getItem("pageName"))),  
115 -  
116 - menuPath: this.getPath("menuPath"),  
117 - menuName: this.getEncodeName('menuName'),//encodeURIComponent(sessionStorage.getItem("menuName")),  
118 -  
119 - buttonPath: this.getPath("buttonPath"),  
120 - buttonName: this.getEncodeName('buttonName'),//encodeURIComponent(sessionStorage.getItem("buttonName"))  
121 - }  
122 - }); 121 + IntervalFunc: (isAuto) => {
  122 + sessionStorage.setItem("IntervalFunc", isAuto);
123 }, 123 },
124 124
125 - getPath:(key)=>{ 125 + getPath: (key) => {
126 var val = sessionStorage.getItem(key); 126 var val = sessionStorage.getItem(key);
127 - if(val){ 127 + if (val) {
128 return val; 128 return val;
129 } 129 }
130 return ''; 130 return '';
131 }, 131 },
132 132
133 - getEncodeName:(key)=>{ 133 + getEncodeName: (key) => {
134 var val = sessionStorage.getItem(key); 134 var val = sessionStorage.getItem(key);
135 - if(val){ 135 + if (val) {
136 return encodeURIComponent(val); 136 return encodeURIComponent(val);
137 } 137 }
138 return ''; 138 return '';
@@ -141,7 +141,7 @@ layui.define(['element', 'admin', 'view'], function (exports) { @@ -141,7 +141,7 @@ layui.define(['element', 'admin', 'view'], function (exports) {
141 /** 141 /**
142 * 获取操作 142 * 获取操作
143 */ 143 */
144 - getOperateUUID:() => { 144 + getOperateUUID: () => {
145 return window.generateUUID().replace(/-/g, "") + (new Date()).getTime(); 145 return window.generateUUID().replace(/-/g, "") + (new Date()).getTime();
146 }, 146 },
147 147
@@ -157,7 +157,7 @@ layui.define(['element', 'admin', 'view'], function (exports) { @@ -157,7 +157,7 @@ layui.define(['element', 'admin', 'view'], function (exports) {
157 // 绑定菜单点击事件 157 // 绑定菜单点击事件
158 that.bindMenuClickEvent(); 158 that.bindMenuClickEvent();
159 // 绑定元素点击事件 159 // 绑定元素点击事件
160 - that.bindElemClickEvent(); 160 + // that.bindElemClickEvent();
161 // console.log("日志事件注册完成！") 161 // console.log("日志事件注册完成！")
162 }, 500) 162 }, 500)
163 163
@@ -224,22 +224,7 @@ layui.define(['element', 'admin', 'view'], function (exports) { @@ -224,22 +224,7 @@ layui.define(['element', 'admin', 'view'], function (exports) {
224 } 224 }
225 }) 225 })
226 }, 226 },
227 - // /**  
228 - // * ajax掉接口之前传参  
229 - // * @author lsq  
230 - // * @date 2022-08-18  
231 - // * */  
232 - // sendAjaxData(menuPath, elementName) {  
233 - // let name = encodeURIComponent(elementName);  
234 - //  
235 - // $.ajaxSetup({  
236 - // headers: {  
237 - // menuPath: obj.getCurrentHash(),  
238 - // elementName: name  
239 - // }  
240 - //  
241 - // });  
242 - // }, 227 +
243 /** 228 /**
244 * 左侧菜单，鼠标点击事件 229 * 左侧菜单，鼠标点击事件
245 */ 230 */
@@ -299,13 +284,17 @@ layui.define(['element', 'admin', 'view'], function (exports) { @@ -299,13 +284,17 @@ layui.define(['element', 'admin', 'view'], function (exports) {
299 //菜单点击传入属性lay-href的值，普通元素传入当前页面路由 284 //菜单点击传入属性lay-href的值，普通元素传入当前页面路由
300 if (flg) { 285 if (flg) {
301 // 清空按钮名称 286 // 清空按钮名称
302 - sessionStorage.setItem("buttonPath", "");  
303 - sessionStorage.setItem("buttonName", ""); 287 + // sessionStorage.setItem("buttonPath", "");
  288 + // sessionStorage.setItem("buttonName", "");
  289 + //
  290 + // sessionStorage.setItem("groupId", that.getOperateUUID());
  291 + // //that.sendAjaxData(layHref, text)
  292 + // sessionStorage.setItem("menuName", text);
  293 + // sessionStorage.setItem("menuPath", layHref);
  294 +
  295 + that.saveMenuLog(text, layHref)
  296 +
304 297
305 - sessionStorage.setItem("groupId",that.getOperateUUID());  
306 - //that.sendAjaxData(layHref, text)  
307 - sessionStorage.setItem("menuName", text);  
308 - sessionStorage.setItem("menuPath", layHref);  
309 } else { 298 } else {
310 let locationPath = location.hash; 299 let locationPath = location.hash;
311 let pathArr = locationPath.split("#/"); 300 let pathArr = locationPath.split("#/");
@@ -314,68 +303,58 @@ layui.define(['element', 'admin', 'view'], function (exports) { @@ -314,68 +303,58 @@ layui.define(['element', 'admin', 'view'], function (exports) {
314 path = pathArr[1] 303 path = pathArr[1]
315 } 304 }
316 // that.sendAjaxData(path, text) 305 // that.sendAjaxData(path, text)
317 - sessionStorage.setItem("buttonName", text);  
318 - sessionStorage.setItem("buttonPath", layHref); 306 + // sessionStorage.setItem("buttonName", text);
  307 + // sessionStorage.setItem("buttonPath", layHref);
319 } 308 }
320 }, 309 },
321 - /**  
322 - * 页面其他元素绑定事件  
323 - * @author lsq  
324 - * @date 2022-08-11  
325 - */  
326 - clickEventHandle(thisObj, key) {  
327 - let that = this;  
328 - sessionStorage.setItem("groupId",that.getOperateUUID());  
329 -  
330 - let layHref = thisObj.attr('lay-href') ? thisObj.attr('lay-href') : '';  
331 - sessionStorage.setItem("buttonName", thisObj.text());  
332 - sessionStorage.setItem("buttonPath", layHref);  
333 -  
334 - //绑定事件时增加一个class防止多次绑定事件  
335 - // thisObj.addClass("on_fn");  
336 - // that.pushArrNoRepeat(thisObj);  
337 - // // 把点击的元素按顺序展示  
338 - // let handleStr = '';  
339 - // let menuStrArr = [];  
340 - // let menuStrArrSecond = [];  
341 - // that.data.handleLog.map(item => {  
342 - // if (item.menuType) {  
343 - // menuStrArr.push(item.text)  
344 - // } else {  
345 - // menuStrArrSecond.push(item.text)  
346 - // }  
347 - // })  
348 - // if (menuStrArr.length > 0) {  
349 - // handleStr = menuStrArr.join('->');  
350 - // }  
351 - // if (menuStrArrSecond.length > 0) {  
352 - // handleStr += '->' + menuStrArrSecond.join(',');  
353 - // } 310 + saveMenuLog(name, href) {
  311 + if (href && href != '') {
  312 + // 菜单请求日志
  313 + admin.req({
  314 + url: domainName + `/api-web/setGroupName?name=${name}&url=${href}`
  315 + , method: 'GET'
  316 + , async: true
  317 + , success: function (res) {
  318 + }
  319 + })
  320 + }
354 }, 321 },
  322 +
  323 +
  324 + // /**
  325 + // * 页面其他元素绑定事件
  326 + // * @author lsq
  327 + // * @date 2022-08-11
  328 + // */
  329 + // clickEventHandle(thisObj, key) {
  330 + // let that = this;
  331 + // sessionStorage.setItem("groupId", that.getOperateUUID());
  332 + // sessionStorage.setItem("IntervalFunc", '0');
  333 + //
  334 + // let layHref = thisObj.attr('lay-href') ? thisObj.attr('lay-href') : '';
  335 + // let title = thisObj.attr('title') == '点击鼠标右键查看功能点描述信息' ? '' : thisObj.attr('title');
  336 + //
  337 + // let btnName = thisObj.text() ? thisObj.text() : title;
  338 + // sessionStorage.setItem("buttonName", btnName);
  339 + // sessionStorage.setItem("buttonPath", layHref);
  340 + // },
355 /** 341 /**
356 * 页面其他元素绑定事件 342 * 页面其他元素绑定事件
357 * @author lsq 343 * @author lsq
358 * @date 2022-08-11 344 * @date 2022-08-11
359 */ 345 */
360 bindElemClickEvent() { 346 bindElemClickEvent() {
361 - let that = this;  
362 - var eventKeys = ['button', '[data-bizid]', '.layui-table-link', '[data-zymc]', '[data-busid]','.layui-tree-txt','.layui-cols-items'];  
363 - eventKeys.map(item => {  
364 - // if (!$(item).hasClass("on_fn")) {  
365 - // console.log(`${item}元素点击事件绑定完成！`)  
366 - // $(item).unbind('click.handle').on('click.handle', (function (e) {  
367 - // e.preventDefault();  
368 - // that.clickEventHandle($(this), item)  
369 - // }))  
370 - // }  
371 - setTimeout(function (){  
372 - // console.log(`${item}元素点击事件绑定完成！`)  
373 - $(item).unbind('click.handle').on('click.handle', (function (e) {  
374 - e.preventDefault();  
375 - that.clickEventHandle($(this), item)  
376 - }))  
377 - },500)  
378 - }) 347 + // let that = this;
  348 + // var eventKeys = ['button', '[data-bizid]', '.layui-table-link', '[data-zymc]', '[data-busid]', '.layui-tree-txt', '.layui-cols-items'];
  349 + // eventKeys.map(item => {
  350 + // setTimeout(function () {
  351 + // // console.log(`${item}元素点击事件绑定完成！`)
  352 + // $(item).unbind('click.handle').on('click.handle', (function (e) {
  353 + // e.preventDefault();
  354 + // that.clickEventHandle($(this), item)
  355 + // }))
  356 + // }, 500)
  357 + // })
379 }, 358 },
380 /** 359 /**
381 * 绑定鼠标右键事件 360 * 绑定鼠标右键事件
1 -<title>操作日志</title> 1 +<title>操作日志统计</title>
2 <iframe class="layadmin-iframe" src="/vue3/index.html#/vue3/operationLog" style="height: 99.5%!important;"/> 2 <iframe class="layadmin-iframe" src="/vue3/index.html#/vue3/operationLog" style="height: 99.5%!important;"/>
  1 +<title>我的操作日志</title>
  2 +<iframe class="layadmin-iframe" src="/vue3/index.html#/vue3/operationLog/userList" style="height: 99.5%!important;"/>
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 <link href="public/shui.png" rel="icon"/> 5 <link href="public/shui.png" rel="icon"/>
6 <meta content="width=device-width, initial-scale=1.0" name="viewport"> 6 <meta content="width=device-width, initial-scale=1.0" name="viewport">
7 <title>智能综合监控平台</title> 7 <title>智能综合监控平台</title>
  8 + <script src="public/lib/polyfill/polyfill.min.js"></script>
8 <script src="public/lib/vue/vue.global.prod.js"></script> 9 <script src="public/lib/vue/vue.global.prod.js"></script>
9 <script src="public/lib/vue/vue-router.global.prod.js"></script> 10 <script src="public/lib/vue/vue-router.global.prod.js"></script>
10 <script src="public/lib/vue/vuex.global.prod.js"></script> 11 <script src="public/lib/vue/vuex.global.prod.js"></script>
@@ -16,7 +17,7 @@ @@ -16,7 +17,7 @@
16 <link href="public/lib/vant/index.css" rel="stylesheet"> 17 <link href="public/lib/vant/index.css" rel="stylesheet">
17 <script src="public/lib/vant/vant.min.js"></script> 18 <script src="public/lib/vant/vant.min.js"></script>
18 <script src="public/lib/axios/axios.min.js"></script> 19 <script src="public/lib/axios/axios.min.js"></script>
19 - <!-- <script src="public/lib/dayjs/dayjs.min.js"></script> --> 20 + <script src="public/lib/dayjs/dayjs.min.js"></script>
20 <script src="public/lib/jquery/jquery.min.js"></script> 21 <script src="public/lib/jquery/jquery.min.js"></script>
21 22
22 <script src="public/lib/echarts/echarts.min.js"></script> 23 <script src="public/lib/echarts/echarts.min.js"></script>
@@ -11,8 +11,6 @@ @@ -11,8 +11,6 @@
11 @import "../css/cmdbdatasync.css"; 11 @import "../css/cmdbdatasync.css";
12 /*登录logo配置*/ 12 /*登录logo配置*/
13 @import "../css/logoConfig.css"; 13 @import "../css/logoConfig.css";
14 -/*lsq 操作记录日志样式 2022-09-26*/  
15 -@import "../css/operationLog.css";  
16 14
17 .d-flex { 15 .d-flex {
18 display: flex; 16 display: flex;
@@ -33,14 +31,14 @@ @@ -33,14 +31,14 @@
33 /*最外层样式*/ 31 /*最外层样式*/
34 .container { 32 .container {
35 background-color: #CCCCCC; 33 background-color: #CCCCCC;
36 - padding: 3px 3px;  
37 - width: calc(100% - 10px); 34 + padding: 0px 0px;
  35 + width: calc(100% - 6px);
38 } 36 }
39 37
40 .container .cm-card { 38 .container .cm-card {
41 overflow-y: auto; 39 overflow-y: auto;
42 background: white; 40 background: white;
43 - border-radius: 3px 41 + border-radius: 3px;
44 } 42 }
45 43
46 .container .cm-card .search { 44 .container .cm-card .search {
@@ -63,13 +61,16 @@ @@ -63,13 +61,16 @@
63 margin-bottom: 3px !important; 61 margin-bottom: 3px !important;
64 /*width: 250px !important;*/ 62 /*width: 250px !important;*/
65 } 63 }
  64 +
66 /*lsq esData下的搜索条件栏样式调整 2022-06-27*/ 65 /*lsq esData下的搜索条件栏样式调整 2022-06-27*/
67 .container .cm-card .search .condition.esData-conditon div { 66 .container .cm-card .search .condition.esData-conditon div {
68 margin-bottom: 0px !important; 67 margin-bottom: 0px !important;
69 } 68 }
70 -.container .cm-card .search .condition.esData-conditon{ 69 +
  70 +.container .cm-card .search .condition.esData-conditon {
71 margin-bottom: 3px; 71 margin-bottom: 3px;
72 } 72 }
  73 +
73 .container .cm-card .search .btns { 74 .container .cm-card .search .btns {
74 width: 200px; 75 width: 200px;
75 display: flex; 76 display: flex;
@@ -82,6 +83,74 @@ @@ -82,6 +83,74 @@
82 padding: 0px 6px; 83 padding: 0px 6px;
83 } 84 }
84 85
  86 +/* 盒子样式 */
  87 +.m-6 {
  88 + margin: 6px;
  89 +}
  90 +
  91 +.m-l-6 {
  92 + margin-left: 6px;
  93 +}
  94 +
  95 +.m-r-6 {
  96 + margin-right: 6px;
  97 +}
  98 +
  99 +.m-t-6 {
  100 + margin-top: 6px;
  101 +}
  102 +
  103 +.m-b-6 {
  104 + margin-top: 6px;
  105 +}
  106 +
  107 +.p-6 {
  108 + padding: 6px;
  109 +}
  110 +
  111 +.p-l-6 {
  112 + padding-left: 6px;
  113 +}
  114 +
  115 +.p-r-6 {
  116 + padding-right: 6px;
  117 +}
  118 +
  119 +.p-t-6 {
  120 + padding-top: 6px;
  121 +}
  122 +
  123 +.p-b-6 {
  124 + padding-top: 6px;
  125 +}
  126 +
  127 +.p-l-3 {
  128 + padding-left: 3px;
  129 +}
  130 +
  131 +.p-r-3 {
  132 + padding-right: 3px;
  133 +}
  134 +.page-item{
  135 + padding: 0px 10px
  136 +}
  137 +
  138 +.page-item-title-h3 {
  139 + text-align: left;
  140 + color: #2b9eef;
  141 + padding-left: 6px;
  142 +}
  143 +
  144 +.page-item-content {
  145 + position: relative;
  146 + cursor: default;
  147 + border: 1px solid rgb(228, 228, 228);
  148 + -webkit-tap-highlight-color: transparent;
  149 + user-select: none;
  150 + margin: 6px;
  151 + padding: 6px;
  152 +}
  153 +
85 /* 154 /*
86 共通弹框配置样式 155 共通弹框配置样式
87 custom-class="config-dialog" 156 custom-class="config-dialog"
@@ -161,30 +230,37 @@ custom-class="config-dialog" @@ -161,30 +230,37 @@ custom-class="config-dialog"
161 .tree-table .el-table .el-table__cell.is-center div { 230 .tree-table .el-table .el-table__cell.is-center div {
162 justify-content: center; 231 justify-content: center;
163 } 232 }
  233 +
164 /*lsq 资产视图下搜索栏样式调整 2022-06-27*/ 234 /*lsq 资产视图下搜索栏样式调整 2022-06-27*/
165 -.resList-form.el-form--inline .el-form-item{ 235 +.resList-form.el-form--inline .el-form-item {
166 align-items: center; 236 align-items: center;
167 - margin-right:6px; 237 + margin-right: 6px;
168 } 238 }
  239 +
169 /*lsq ping详情页面中搜索栏的样式调整 2022-06-28*/ 240 /*lsq ping详情页面中搜索栏的样式调整 2022-06-28*/
170 -.container .cm-card .search .condition.ping div{ 241 +.container .cm-card .search .condition.ping div {
171 margin-bottom: 0px !important; 242 margin-bottom: 0px !important;
172 } 243 }
173 -.container .cm-card .search .condition.ping{ 244 +
  245 +.container .cm-card .search .condition.ping {
174 margin-bottom: 6px; 246 margin-bottom: 6px;
175 } 247 }
  248 +
176 /*lsq elementUI的滚动条样式修改 2022-06-28*/ 249 /*lsq elementUI的滚动条样式修改 2022-06-28*/
177 .el-scrollbar__bar.is-vertical { 250 .el-scrollbar__bar.is-vertical {
178 - width:15px;  
179 - top:0px; 251 + width: 15px;
  252 + top: 0px;
180 } 253 }
  254 +
181 .el-scrollbar__bar.is-horizontal { 255 .el-scrollbar__bar.is-horizontal {
182 height: 15px; 256 height: 15px;
183 - left:0px; 257 + left: 0px;
184 } 258 }
185 -.el-scrollbar__thumb,.el-scrollbar__thumb:hover { 259 +
  260 +.el-scrollbar__thumb, .el-scrollbar__thumb:hover {
186 border-radius: 0px; 261 border-radius: 0px;
187 background-color: #CCCCCC; 262 background-color: #CCCCCC;
188 opacity: 1; 263 opacity: 1;
189 - width:10px;.el-scrollbar__bar.is-horizontal>div  
190 -}  
  264 + width: 10px;
  265 +. el-scrollbar__bar . is-horizontal > div
  266 +}
1 -.operation-log-search{  
2 - display: flex;  
3 - align-items: center;  
4 - justify-content: center;  
5 - margin-top:6px;  
6 -}  
7 -.container-none{  
8 - width:100%;  
9 - height: 20px;  
10 - background:#fafafa;  
11 -}  
12 -.operation-log-container.container .cm-card .search-table{padding:15px;}  
13 -.echart-con{  
14 - padding:10px;  
15 -}  
16 -.echart-con .echart-title{  
17 - font-size: 16px;  
18 - color:#1e9fff;  
19 - text-align: left;  
20 - margin-bottom: 6px;  
21 - padding:10px;  
22 -}  
23 -.echart-left,.echart-right{  
24 - border:1px solid #eee;  
25 -}  
26 -.echart-chart{  
27 - height: 300px;  
28 -  
29 -}  
1 -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.dayjs=e()}(this,function(){"use strict";const t=60,e=60*t,s=24*e,r=7*s,n=(t,e,s)=>!t||t.length>=e?t:`${Array(e+1-t.length).join(s)}${t}`;class i{constructor(t){this.utc=!1;const e=this.parseConfig(t);this.date=new Date(e),this.timeZone=this.date.getTimezoneOffset()/60,this.timeZoneString=n(String(-1*this.timeZone).replace(/^(.)?(\d)/,"$10$200"),5,"+"),this.mYear=this.date.getFullYear(),this.mMonth=this.date.getMonth(),this.mDay=this.date.getDate(),this.mWeek=this.date.getDay(),this.mHour=this.date.getHours(),this.mMinute=this.date.getMinutes(),this.mSecond=this.date.getSeconds()}parseConfig(t){if(!t)return new Date;if(t instanceof Date)return t;if(/^(\d){8}$/.test(t)){return this.utc=!0,`${t.substr(0,4)}-${t.substr(4,2)}-${t.substr(6,2)}`}return t}year(){return this.mYear}month(){return this.mMonth}unix(){const t=this.utc?60*this.timeZone*60*1e3:0;return Math.floor((this.date.getTime()+t)/1e3)}toString(){return this.date.toUTCString()}startOf(t){switch(t){case"year":return new i(new Date(this.year(),0,1));case"month":return new i(new Date(this.year(),this.month(),1));default:return this}}add(n,a){let h;switch(a){case"m":case"minutes":h=t;break;case"h":case"hours":h=e;break;case"d":case"days":h=s;break;case"w":case"weeks":h=r;break;default:h=1}const u=this.unix()+n*h;return new i(1e3*u)}subtract(t,e){return this.add(-1*t,e)}format(t="YYYY-MM-DDTHH:mm:ssZ"){const e=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];return t.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}|Z{1,2}/g,t=>{switch(t){case"YY":return String(this.mYear).slice(-2);case"YYYY":return String(this.mYear);case"M":return String(this.mMonth+1);case"MM":return n(String(this.mMonth+1),2,"0");case"D":return String(this.mDay);case"DD":return n(String(this.mDay),2,"0");case"d":return String(this.mWeek);case"dddd":return e[this.mWeek];case"H":return String(this.mHour);case"HH":return n(String(this.mHour),2,"0");case"m":return String(this.mMinute);case"mm":return n(String(this.mMinute),2,"0");case"s":return String(this.mSecond);case"ss":return n(String(this.mSecond),2,"0");case"Z":return`${this.timeZoneString.slice(0,-2)}:00`;case"ZZ":return this.timeZoneString;default:return t}})}}return t=>new i(t)}); 1 +!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.dayjs=n()}(this,function(){"use strict";var t="millisecond",n="second",e="minute",r="hour",i="day",s="week",u="month",o="quarter",a="year",h=/^(\d{4})-?(\d{1,2})-?(\d{0,2})[^0-9]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?.?(\d{1,3})?$/,f=/\[([^\]]+)]|Y{2,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,c=function(t,n,e){var r=String(t);return!r||r.length>=n?t:""+Array(n+1-r.length).join(e)+t},d={s:c,z:function(t){var n=-t.utcOffset(),e=Math.abs(n),r=Math.floor(e/60),i=e%60;return(n<=0?"+":"-")+c(r,2,"0")+":"+c(i,2,"0")},m:function(t,n){var e=12*(n.year()-t.year())+(n.month()-t.month()),r=t.clone().add(e,u),i=n-r<0,s=t.clone().add(e+(i?-1:1),u);return Number(-(e+(n-r)/(i?r-s:s-r))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(h){return{M:u,y:a,w:s,d:i,D:"date",h:r,m:e,s:n,ms:t,Q:o}[h]||String(h||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},$={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},l="en",m={};m[l]=$;var y=function(t){return t instanceof v},M=function(t,n,e){var r;if(!t)return l;if("string"==typeof t)m[t]&&(r=t),n&&(m[t]=n,r=t);else{var i=t.name;m[i]=t,r=i}return e||(l=r),r},g=function(t,n,e){if(y(t))return t.clone();var r=n?"string"==typeof n?{format:n,pl:e}:n:{};return r.date=t,new v(r)},D=d;D.l=M,D.i=y,D.w=function(t,n){return g(t,{locale:n.$L,utc:n.$u,$offset:n.$offset})};var v=function(){function c(t){this.$L=this.$L||M(t.locale,null,!0),this.parse(t)}var d=c.prototype;return d.parse=function(t){this.$d=function(t){var n=t.date,e=t.utc;if(null===n)return new Date(NaN);if(D.u(n))return new Date;if(n instanceof Date)return new Date(n);if("string"==typeof n&&!/Z$/i.test(n)){var r=n.match(h);if(r)return e?new Date(Date.UTC(r[1],r[2]-1,r[3]||1,r[4]||0,r[5]||0,r[6]||0,r[7]||0)):new Date(r[1],r[2]-1,r[3]||1,r[4]||0,r[5]||0,r[6]||0,r[7]||0)}return new Date(n)}(t),this.init()},d.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},d.$utils=function(){return D},d.isValid=function(){return!("Invalid Date"===this.$d.toString())},d.isSame=function(t,n){var e=g(t);return this.startOf(n)<=e&&e<=this.endOf(n)},d.isAfter=function(t,n){return g(t)<this.startOf(n)},d.isBefore=function(t,n){return this.endOf(n)<g(t)},d.$g=function(t,n,e){return D.u(t)?this[n]:this.set(e,t)},d.year=function(t){return this.$g(t,"$y",a)},d.month=function(t){return this.$g(t,"$M",u)},d.day=function(t){return this.$g(t,"$W",i)},d.date=function(t){return this.$g(t,"$D","date")},d.hour=function(t){return this.$g(t,"$H",r)},d.minute=function(t){return this.$g(t,"$m",e)},d.second=function(t){return this.$g(t,"$s",n)},d.millisecond=function(n){return this.$g(n,"$ms",t)},d.unix=function(){return Math.floor(this.valueOf()/1e3)},d.valueOf=function(){return this.$d.getTime()},d.startOf=function(t,o){var h=this,f=!!D.u(o)||o,c=D.p(t),d=function(t,n){var e=D.w(h.$u?Date.UTC(h.$y,n,t):new Date(h.$y,n,t),h);return f?e:e.endOf(i)},$=function(t,n){return D.w(h.toDate()[t].apply(h.toDate(),(f?[0,0,0,0]:[23,59,59,999]).slice(n)),h)},l=this.$W,m=this.$M,y=this.$D,M="set"+(this.$u?"UTC":"");switch(c){case a:return f?d(1,0):d(31,11);case u:return f?d(1,m):d(0,m+1);case s:var g=this.$locale().weekStart||0,v=(l<g?l+7:l)-g;return d(f?y-v:y+(6-v),m);case i:case"date":return $(M+"Hours",0);case r:return $(M+"Minutes",1);case e:return $(M+"Seconds",2);case n:return $(M+"Milliseconds",3);default:return this.clone()}},d.endOf=function(t){return this.startOf(t,!1)},d.$set=function(s,o){var h,f=D.p(s),c="set"+(this.$u?"UTC":""),d=(h={},h[i]=c+"Date",h.date=c+"Date",h[u]=c+"Month",h[a]=c+"FullYear",h[r]=c+"Hours",h[e]=c+"Minutes",h[n]=c+"Seconds",h[t]=c+"Milliseconds",h)[f],$=f===i?this.$D+(o-this.$W):o;if(f===u||f===a){var l=this.clone().set("date",1);l.$d[d]($),l.init(),this.$d=l.set("date",Math.min(this.$D,l.daysInMonth())).toDate()}else d&&this.$d[d]($);return this.init(),this},d.set=function(t,n){return this.clone().$set(t,n)},d.get=function(t){return this[D.p(t)]()},d.add=function(t,o){var h,f=this;t=Number(t);var c=D.p(o),d=function(n){var e=g(f);return D.w(e.date(e.date()+Math.round(n*t)),f)};if(c===u)return this.set(u,this.$M+t);if(c===a)return this.set(a,this.$y+t);if(c===i)return d(1);if(c===s)return d(7);var $=(h={},h[e]=6e4,h[r]=36e5,h[n]=1e3,h)[c]||1,l=this.$d.getTime()+t*$;return D.w(l,this)},d.subtract=function(t,n){return this.add(-1*t,n)},d.format=function(t){var n=this;if(!this.isValid())return"Invalid Date";var e=t||"YYYY-MM-DDTHH:mm:ssZ",r=D.z(this),i=this.$locale(),s=this.$H,u=this.$m,o=this.$M,a=i.weekdays,h=i.months,c=function(t,r,i,s){return t&&(t[r]||t(n,e))||i[r].substr(0,s)},d=function(t){return D.s(s%12||12,t,"0")},$=i.meridiem||function(t,n,e){var r=t<12?"AM":"PM";return e?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:o+1,MM:D.s(o+1,2,"0"),MMM:c(i.monthsShort,o,h,3),MMMM:h[o]||h(this,e),D:this.$D,DD:D.s(this.$D,2,"0"),d:String(this.$W),dd:c(i.weekdaysMin,this.$W,a,2),ddd:c(i.weekdaysShort,this.$W,a,3),dddd:a[this.$W],H:String(s),HH:D.s(s,2,"0"),h:d(1),hh:d(2),a:$(s,u,!0),A:$(s,u,!1),m:String(u),mm:D.s(u,2,"0"),s:String(this.$s),ss:D.s(this.$s,2,"0"),SSS:D.s(this.$ms,3,"0"),Z:r};return e.replace(f,function(t,n){return n||l[t]||r.replace(":","")})},d.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},d.diff=function(t,h,f){var c,d=D.p(h),$=g(t),l=6e4*($.utcOffset()-this.utcOffset()),m=this-$,y=D.m(this,$);return y=(c={},c[a]=y/12,c[u]=y,c[o]=y/3,c[s]=(m-l)/6048e5,c[i]=(m-l)/864e5,c[r]=m/36e5,c[e]=m/6e4,c[n]=m/1e3,c)[d]||m,f?y:D.a(y)},d.daysInMonth=function(){return this.endOf(u).$D},d.$locale=function(){return m[this.$L]},d.locale=function(t,n){if(!t)return this.$L;var e=this.clone(),r=M(t,n,!0);return r&&(e.$L=r),e},d.clone=function(){return D.w(this.$d,this)},d.toDate=function(){return new Date(this.valueOf())},d.toJSON=function(){return this.isValid()?this.toISOString():null},d.toISOString=function(){return this.$d.toISOString()},d.toString=function(){return this.$d.toUTCString()},c}();return g.prototype=v.prototype,g.extend=function(t,n){return t(n,v,g),g},g.locale=M,g.isDayjs=y,g.unix=function(t){return g(1e3*t)},g.en=m[l],g.Ls=m,g});
  1 +/* Disable minification (remove `.min` from URL path) for more info */
  2 +
  3 +(function(undefined) {var _mutation=function(){function e(e){return"function"==typeof Node?e instanceof Node:e&&"object"==typeof e&&e.nodeName&&e.nodeType>=1&&e.nodeType<=12}return function(n){if(1===n.length)return e(n[0])?n[0]:document.createTextNode(n[0]+"");for(var t=document.createDocumentFragment(),o=0;o<n.length;o++)t.appendChild(e(n[o])?n[o]:document.createTextNode(n[o]+""));return t}}();DocumentFragment.prototype.append=function(){this.appendChild(_mutation(arguments))};DocumentFragment.prototype.prepend=function(){this.insertBefore(_mutation(arguments),this.firstChild)};Document.prototype.after=Element.prototype.after=function(){if(this.parentNode){for(var t=Array.prototype.slice.call(arguments),e=this.nextSibling,o=e?t.indexOf(e):-1;-1!==o&&(e=e.nextSibling);)o=t.indexOf(e);this.parentNode.insertBefore(_mutation(arguments),e)}},"Text"in this&&(Text.prototype.after=Element.prototype.after);Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};Document.prototype.before=Element.prototype.before=function(){if(this.parentNode){for(var e=Array.prototype.slice.call(arguments),t=this.previousSibling,o=t?e.indexOf(t):-1;-1!==o&&(t=t.previousSibling);)o=e.indexOf(t);this.parentNode.insertBefore(_mutation(arguments),t?t.nextSibling:this.parentNode.firstChild)}},"Text"in this&&(Text.prototype.before=Element.prototype.before);Element.prototype.matches=Element.prototype.webkitMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.mozMatchesSelector||function(e){for(var t=this,o=(t.document||t.ownerDocument).querySelectorAll(e),r=0;o[r]&&o[r]!==t;)++r;return!!o[r]};Element.prototype.closest=function(e){for(var n=this;n;){if(n.matches(e))return n;n="SVGElement"in window&&n instanceof SVGElement?n.parentNode:n.parentElement}return null};Document.prototype.prepend=Element.prototype.prepend=function(){this.insertBefore(_mutation(arguments),this.firstChild)};Document.prototype.replaceWith=Element.prototype.replaceWith=function(){this.parentNode&&this.parentNode.replaceChild(_mutation(arguments),this)},"Text"in this&&(Text.prototype.replaceWith=Element.prototype.replaceWith);!function(e){"use strict";function t(t){return!!t&&("Symbol"in e&&"iterator"in e.Symbol&&"function"==typeof t[Symbol.iterator]||!!Array.isArray(t))}function n(e){return"from"in Array?Array.from(e):Array.prototype.slice.call(e)}!function(){function r(e){var t="",n=!0;return e.forEach(function(e){var r=encodeURIComponent(e.name),a=encodeURIComponent(e.value);n||(t+="&"),t+=r+"="+a,n=!1}),t.replace(/%20/g,"+")}function a(e,t){var n=e.split("&");t&&-1===n[0].indexOf("=")&&(n[0]="="+n[0]);var r=[];n.forEach(function(e){if(0!==e.length){var t=e.indexOf("=");if(-1!==t)var n=e.substring(0,t),a=e.substring(t+1);else n=e,a="";n=n.replace(/\+/g," "),a=a.replace(/\+/g," "),r.push({name:n,value:a})}});var a=[];return r.forEach(function(e){a.push({name:decodeURIComponent(e.name),value:decodeURIComponent(e.value)})}),a}function i(e){if(c)return new s(e);var t=document.createElement("a");return t.href=e,t}function o(e){var i=this;this._list=[],e===undefined||null===e||(e instanceof o?this._list=a(String(e)):"object"==typeof e&&t(e)?n(e).forEach(function(e){if(!t(e))throw TypeError();var r=n(e);if(2!==r.length)throw TypeError();i._list.push({name:String(r[0]),value:String(r[1])})}):"object"==typeof e&&e?Object.keys(e).forEach(function(t){i._list.push({name:String(t),value:String(e[t])})}):(e=String(e),"?"===e.substring(0,1)&&(e=e.substring(1)),this._list=a(e))),this._url_object=null,this._setList=function(e){u||(i._list=e)};var u=!1;this._update_steps=function(){u||(u=!0,i._url_object&&("about:"===i._url_object.protocol&&-1!==i._url_object.pathname.indexOf("?")&&(i._url_object.pathname=i._url_object.pathname.split("?")[0]),i._url_object.search=r(i._list),u=!1))}}function u(e,t){var n=0;this.next=function(){if(n>=e.length)return{done:!0,value:undefined};var r=e[n++];return{done:!1,value:"key"===t?r.name:"value"===t?r.value:[r.name,r.value]}}}function l(t,n){function r(){var e=l.href.replace(/#$|\?$|\?(?=#)/g,"");l.href!==e&&(l.href=e)}function u(){m._setList(l.search?a(l.search.substring(1)):[]),m._update_steps()}if(!(this instanceof e.URL))throw new TypeError("Failed to construct 'URL': Please use the 'new' operator.");n&&(t=function(){if(c)return new s(t,n).href;var e;try{var r;if("[object OperaMini]"===Object.prototype.toString.call(window.operamini)?(e=document.createElement("iframe"),e.style.display="none",document.documentElement.appendChild(e),r=e.contentWindow.document):document.implementation&&document.implementation.createHTMLDocument?r=document.implementation.createHTMLDocument(""):document.implementation&&document.implementation.createDocument?(r=document.implementation.createDocument("http://www.w3.org/1999/xhtml","html",null),r.documentElement.appendChild(r.createElement("head")),r.documentElement.appendChild(r.createElement("body"))):window.ActiveXObject&&(r=new window.ActiveXObject("htmlfile"),r.write("<head></head><body></body>"),r.close()),!r)throw Error("base not supported");var a=r.createElement("base");a.href=n,r.getElementsByTagName("head")[0].appendChild(a);var i=r.createElement("a");return i.href=t,i.href}finally{e&&e.parentNode.removeChild(e)}}());var l=i(t||""),f=function(){if(!("defineProperties"in Object))return!1;try{var e={};return Object.defineProperties(e,{prop:{get:function(){return!0}}}),e.prop}catch(t){return!1}}(),h=f?this:document.createElement("a"),m=new o(l.search?l.search.substring(1):null);return m._url_object=h,Object.defineProperties(h,{href:{get:function(){return l.href},set:function(e){l.href=e,r(),u()},enumerable:!0,configurable:!0},origin:{get:function(){return"origin"in l?l.origin:this.protocol+"//"+this.host},enumerable:!0,configurable:!0},protocol:{get:function(){return l.protocol},set:function(e){l.protocol=e},enumerable:!0,configurable:!0},username:{get:function(){return l.username},set:function(e){l.username=e},enumerable:!0,configurable:!0},password:{get:function(){return l.password},set:function(e){l.password=e},enumerable:!0,configurable:!0},host:{get:function(){var e={"http:":/:80$/,"https:":/:443$/,"ftp:":/:21$/}[l.protocol];return e?l.host.replace(e,""):l.host},set:function(e){l.host=e},enumerable:!0,configurable:!0},hostname:{get:function(){return l.hostname},set:function(e){l.hostname=e},enumerable:!0,configurable:!0},port:{get:function(){return l.port},set:function(e){l.port=e},enumerable:!0,configurable:!0},pathname:{get:function(){return"/"!==l.pathname.charAt(0)?"/"+l.pathname:l.pathname},set:function(e){l.pathname=e},enumerable:!0,configurable:!0},search:{get:function(){return l.search},set:function(e){l.search!==e&&(l.search=e,r(),u())},enumerable:!0,configurable:!0},searchParams:{get:function(){return m},enumerable:!0,configurable:!0},hash:{get:function(){return l.hash},set:function(e){l.hash=e,r()},enumerable:!0,configurable:!0},toString:{value:function(){return l.toString()},enumerable:!1,configurable:!0},valueOf:{value:function(){return l.valueOf()},enumerable:!1,configurable:!0}}),h}var c,s=e.URL;try{if(s){if("searchParams"in(c=new e.URL("http://example.com")))return;"href"in c||(c=undefined)}}catch(h){}if(Object.defineProperties(o.prototype,{append:{value:function(e,t){this._list.push({name:e,value:t}),this._update_steps()},writable:!0,enumerable:!0,configurable:!0},"delete":{value:function(e){for(var t=0;t<this._list.length;)this._list[t].name===e?this._list.splice(t,1):++t;this._update_steps()},writable:!0,enumerable:!0,configurable:!0},get:{value:function(e){for(var t=0;t<this._list.length;++t)if(this._list[t].name===e)return this._list[t].value;return null},writable:!0,enumerable:!0,configurable:!0},getAll:{value:function(e){for(var t=[],n=0;n<this._list.length;++n)this._list[n].name===e&&t.push(this._list[n].value);return t},writable:!0,enumerable:!0,configurable:!0},has:{value:function(e){for(var t=0;t<this._list.length;++t)if(this._list[t].name===e)return!0;return!1},writable:!0,enumerable:!0,configurable:!0},set:{value:function(e,t){for(var n=!1,r=0;r<this._list.length;)this._list[r].name===e?n?this._list.splice(r,1):(this._list[r].value=t,n=!0,++r):++r;n||this._list.push({name:e,value:t}),this._update_steps()},writable:!0,enumerable:!0,configurable:!0},entries:{value:function(){return new u(this._list,"key+value")},writable:!0,enumerable:!0,configurable:!0},keys:{value:function(){return new u(this._list,"key")},writable:!0,enumerable:!0,configurable:!0},values:{value:function(){return new u(this._list,"value")},writable:!0,enumerable:!0,configurable:!0},forEach:{value:function(e){var t=arguments.length>1?arguments[1]:undefined;this._list.forEach(function(n,r){e.call(t,n.value,n.name)})},writable:!0,enumerable:!0,configurable:!0},toString:{value:function(){return r(this._list)},writable:!0,enumerable:!1,configurable:!0}}),"Symbol"in e&&"iterator"in e.Symbol&&(Object.defineProperty(o.prototype,e.Symbol.iterator,{value:o.prototype.entries,writable:!0,enumerable:!0,configurable:!0}),Object.defineProperty(u.prototype,e.Symbol.iterator,{value:function(){return this},writable:!0,enumerable:!0,configurable:!0})),s)for(var f in s)s.hasOwnProperty(f)&&"function"==typeof s[f]&&(l[f]=s[f]);e.URL=l,e.URLSearchParams=o}(),function(){if("1"!==new e.URLSearchParams([["a",1]]).get("a")||"1"!==new e.URLSearchParams({a:1}).get("a")){var r=e.URLSearchParams;e.URLSearchParams=function(e){if(e&&"object"==typeof e&&t(e)){var a=new r;return n(e).forEach(function(e){if(!t(e))throw TypeError();var r=n(e);if(2!==r.length)throw TypeError();a.append(r[0],r[1])}),a}return e&&"object"==typeof e?(a=new r,Object.keys(e).forEach(function(t){a.set(t,e[t])}),a):new r(e)}}}()}(self);}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
  1 +import http from "../script/http.js";
  2 +
  3 +/**
  4 + * 获取配置信息
  5 + * <p>
  6 + * 作者： Wang
  7 + * 时间：2022/7/26 11:18
  8 + */
  9 +const getOptions = (opt) => {
  10 + if (!opt) {
  11 + opt = {};
  12 + }
  13 + return Object.assign({
  14 + showLoadding: true,// 展示加载库，默认展示
  15 + needToken: true,// 是否需要token，默认true
  16 + asSync: true // 是否同步请求，
  17 + }, opt);
  18 +}
  19 +
  20 +
  21 +/**
  22 + * 发送get请求
  23 + * @param url 请求地址
  24 + * @param params 请求参数
  25 + * @param options 配置参数
  26 + * {
  27 + * showLoadding : true ,// 展示加载库，默认展示
  28 + * needToken:true,// 是否需要token，默认true
  29 + * asSync:true // 是否同步请求，
  30 + * }
  31 + * @returns {Promise<unknown>}
  32 + */
  33 +export const get = (url, params, options) => {
  34 + params = params || {};
  35 +
  36 + var option = getOptions(options);
  37 + return new Promise((resolve, reject) => {
  38 + // 发送请求
  39 + http.get(url, params,function (res){
  40 + resolve(res);
  41 + },function (res){
  42 + reject(res);
  43 + },option.showLoadding,option.needToken,option.asSync);
  44 +
  45 + })
  46 +}
  47 +
  48 +
  49 +/**
  50 + * 发送get请求
  51 + * @param url 请求地址
  52 + * @param params 请求参数
  53 + * @param options 配置参数
  54 + * {
  55 + * showLoadding : true ,// 展示加载库，默认展示
  56 + * needToken:true,// 是否需要token，默认true
  57 + * asSync:true // 是否同步请求，
  58 + * }
  59 + * @returns {Promise<unknown>}
  60 + */
  61 +export const post = (url, params, options) => {
  62 + params = params || {};
  63 +
  64 + var option = getOptions(options);
  65 + return new Promise((resolve, reject) => {
  66 + // 发送请求
  67 + http.post(url, params,function (res){
  68 + resolve(res);
  69 + },function (res){
  70 + reject(res);
  71 + },option.showLoadding,option.needToken,option.asSync);
  72 + })
  73 +}
  74 +
  75 +
  1 +import {get, post} from './BaseApi.js'
  2 +
  3 +/**
  4 + * 获取巡检组以及组下的用户
  5 + * @returns {Promise<*>}
  6 + */
  7 +const getGroupAndGroupUser = () => {
  8 + return get('/api-log/log/groupUser', {});
  9 +}
  10 +
  11 +/**
  12 + * 组统计
  13 + * @param params /api-log/user/log?userName=&id=&startTime=&endTime=&timeType=
  14 + * @returns {Promise<*>}
  15 + */
  16 +const stackedGraphGroup = (params) => {
  17 + return get('/api-log/log/group', params);
  18 +}
  19 +
  20 +
  21 +/**
  22 + * 用户统计
  23 + * @param params /api-log/log/user?userName=&id=1&startTime=&endTime=&timeType=
  24 + * @returns {Promise<*>}
  25 + */
  26 +const stackedGraphUser = (params) => {
  27 + return get('/api-log/log/user', params);
  28 +}
  29 +/**
  30 + * 获取操作日志列表
  31 + * @param params /api-log/log/groupList?userName=&id=1&startTime=&endTime=&timeType=&access_token=0f7119f9-9b86-4c9e-a122-ba651c9eea7a
  32 + * @returns {Promise<*>}
  33 + */
  34 +const getOperationLogList = (params) => {
  35 + return get('/api-log/log/groupList', params);
  36 +}
  37 +
  38 +
  39 +export default {
  40 + getGroupAndGroupUser,
  41 + stackedGraphGroup,
  42 + stackedGraphUser,
  43 + getOperationLogList
  44 +}
  1 +<el-breadcrumb>
  2 + <el-breadcrumb-item v-for="item in linkInfo">
  3 + <el-tooltip placement="top">
  4 + <template #content>{{item.flag ? '已存在操作记录' : '未查询到操作记录'}}</template>
  5 + <div :style="{color:(item.flag ? '#67C23A' : '#F56C6C')}">{{item.name}}</div>
  6 + </el-tooltip>
  7 + </el-breadcrumb-item>
  8 +</el-breadcrumb>
  1 +export default {
  2 + name: "operationLogLink",
  3 + template: '',
  4 + props: {
  5 + opLink: {
  6 + type: String,
  7 + default: '',
  8 + },
  9 + opLinkSource: {
  10 + type: String,
  11 + default: '',
  12 + },
  13 + },
  14 + setup(props) {
  15 +
  16 + const linkInfo = Vue.ref([]);
  17 +
  18 + const getLinkInfo = () => {
  19 + let l = props.opLink.split(' => ');
  20 + let ls = props.opLinkSource.split(' => ')
  21 +
  22 + for (let i = 0; i < ls.length; i++) {
  23 + let itemName = ls[i];
  24 + let linkDetail = {
  25 + name: itemName,
  26 + flag: l.includes(itemName)
  27 + }
  28 + linkInfo.value.push(linkDetail);
  29 + }
  30 + }
  31 +
  32 +
  33 + Vue.onMounted(() => {
  34 + getLinkInfo();
  35 + });
  36 +
  37 +
  38 + return {
  39 + linkInfo
  40 + }
  41 + }
  42 +}
  1 +import store from '/vue3/src/store/index.js'
  2 +
  3 +
  4 +/**
  5 + * 获取接口数据
  6 + * @param storeApiName store中apide
  7 + * @param params
  8 + */
  9 +export function useGetData(storeApiName, params) {
  10 + const data = Vue.ref({})
  11 + const error = Vue.ref('')
  12 + const flag = Vue.ref(false);
  13 +
  14 + let api = store.dispatch(storeApiName, params);
  15 +
  16 + if (!api) {
  17 + let msg = "无效的请求";
  18 + console.log(`${msg},API:${storeApiName} params:${params}`)
  19 + error.value = msg
  20 + return {data, error}
  21 + }
  22 +
  23 + api.then((json) => {
  24 + data.value = json;
  25 + flag.value = true;
  26 + }).catch((err) => {
  27 + data.value.success = false;
  28 + error.value = err
  29 + flag.value = true;
  30 + });
  31 +
  32 + return {data, error, flag}
  33 +}
  1 +“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
  2 +
  3 +命名#
  4 +组合式函数约定用驼峰命名法命名，并以“use”作为开头。
  5 +
  6 +文档：
  7 +https://cn.vuejs.org/guide/reusability/composables.html#mouse-tracker-example
@@ -54,48 +54,25 @@ Promise.all([ @@ -54,48 +54,25 @@ Promise.all([
54 .component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index'))) 54 .component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index')))
55 //菜单下拉树 55 //菜单下拉树
56 .component('cm-tree-select-menu', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectMenu/index'))); 56 .component('cm-tree-select-menu', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectMenu/index')));
57 -// // 自定义指令  
58 -// app.directive('permissions', {  
59 -// // 当被绑定的元素插入到 DOM 中时……  
60 -// mounted(el, binding, vnode) {  
61 -// debugger  
62 -// let p = sessionStorage.getItem('permissions')  
63 -// let val = binding.value;  
64 -// if (p && val) {  
65 -// let arr = p.split(',');  
66 -//  
67 -// if (arr.indexOf(val) == -1) {  
68 -// // 删除元素  
69 -// el.parentNode && el.parentNode.removeChild(el)  
70 -// }  
71 -// }  
72 -// }  
73 -// })  
74 - //start lsq 设置ajax请求增加headers参数 2022-09-20  
75 - let setAjaxData=(val)=>{  
76 - let p = window.top.location.hash;  
77 - if (p) {  
78 - let arr = p.split('#/');  
79 - if(arr && arr.length>1){  
80 - let menuPath=arr[1];  
81 - //title的值  
82 - let nameText=$(window.top.document).find("[lay-id='/"+menuPath+"'] span").text();  
83 - if(val){  
84 - nameText=val; 57 +
  58 + // 自定义指令 授权按钮
  59 + app.directive('permissions', {
  60 + // 当被绑定的元素插入到 DOM 中时……
  61 + mounted(el, binding, vnode) {
  62 + let p = sessionStorage.getItem('permissions')
  63 + let val = binding.value;
  64 + if (p && val) {
  65 + let arr = p.split(',');
  66 +
  67 + if (arr.indexOf(val) == -1) {
  68 + // 删除元素
  69 + el.parentNode && el.parentNode.removeChild(el)
85 } 70 }
86 - let name=encodeURIComponent(nameText)  
87 - $.ajaxSetup({  
88 - headers:{  
89 - menuPath:menuPath,  
90 - elementName:name  
91 - }  
92 - });  
93 } 71 }
94 } 72 }
95 - }  
96 - setAjaxData();  
97 - //end lsq 2022-09-20 73 + })
  74 +
98 app.config.globalProperties.$global = res[3].default 75 app.config.globalProperties.$global = res[3].default
99 app.config.globalProperties.$http = res[4].default 76 app.config.globalProperties.$http = res[4].default
100 app.mount('#app'); // 挂载Vue的app实例 77 app.mount('#app'); // 挂载Vue的app实例
101 -})  
  78 +})
@@ -183,6 +183,12 @@ const routes = [{ @@ -183,6 +183,12 @@ const routes = [{
183 path: '/vue3/operationLog', 183 path: '/vue3/operationLog',
184 name: 'operationLog', 184 name: 'operationLog',
185 component: () => myImport('views/operationLog/index') 185 component: () => myImport('views/operationLog/index')
  186 + },
  187 + //操作日志 - 用户列表
  188 + {
  189 + path: '/vue3/operationLog/userList',
  190 + name: 'operationLogUserList',
  191 + component: () => myImport('views/operationLog/userList')
186 } 192 }
187 ]; 193 ];
188 194
  1 +import operationLog from './modules/operationLog.js'
  2 +
1 export default Vuex.createStore({ 3 export default Vuex.createStore({
2 state: {}, 4 state: {},
3 getters: {}, 5 getters: {},
4 mutations: {}, 6 mutations: {},
5 actions: {}, 7 actions: {},
6 - modules: {} 8 + modules: {
  9 + operationLog
  10 + }
7 }) 11 })
  1 +import operationLog from '../../api/operationLog.js';
  2 +
  3 +export default {
  4 + state: {},
  5 + mutations: {},
  6 + getters: {},
  7 + actions: {
  8 + stackedGraphGroup(context, params) {
  9 + return operationLog.stackedGraphGroup(params);
  10 + },
  11 + stackedGraphUser(context, params) {
  12 + return operationLog.stackedGraphUser(params);
  13 + },
  14 + getGroupAndGroupUser(context, params) {
  15 + return operationLog.getGroupAndGroupUser(params);
  16 + },
  17 + getOperationLogList(context, params) {
  18 + return operationLog.getOperationLogList(params);
  19 + },
  20 + }
  21 +};
1 -<div :style="{'height':height+'px','max-height':height+'px'}" class="container operation-log-container"> 1 +<div :style="{'height':height+'px','max-height':height+'px'}" class="container">
2 <div :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}" class="cm-card"> 2 <div :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}" class="cm-card">
  3 + <!-- 搜索区域 -->
3 <el-row> 4 <el-row>
4 - <el-col :span="14" class="search-item">  
5 - <div class="search">  
6 - <div class="operation-log-search">  
7 - <el-button-group class="ml-4">  
8 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 1 ? 'primary' : ''"  
9 - @click="getDataList(1)">用户名  
10 - </el-button>  
11 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 2 ? 'primary' : ''"  
12 - @click="getDataList(2)">巡检组  
13 - </el-button>  
14 - </el-button-group>  
15 - </div>  
16 - </div>  
17 - <div class="echart-con">  
18 - <div class="echart-left">  
19 - <div class="echart-title">巡检点击完成统计</div>  
20 - <div class="echart-chart">  
21 - <LineChart :optionData="optionData" v-if="optionData"></LineChart>  
22 - </div>  
23 - </div> 5 + <el-col :span="14" class="search">
  6 + <div>
  7 + <el-select v-model="search.groupId" clearable v-if="groupList && groupList.length > 0" :size="$global.elementConfig.size.input" placeholder="请选择巡检组" @change="getGroupUser">
  8 + <el-option
  9 + v-for="item in groupList"
  10 + :key="item.groupId"
  11 + :label="item.groupName"
  12 + :value="item.groupId"/>
  13 + </el-select>
  14 +
  15 + <el-select v-model="search.userId" clearable class="m-l-6" :size="$global.elementConfig.size.input" placeholder="请选择用户" >
  16 + <el-option
  17 + v-for="item in userList"
  18 + :key="item.username"
  19 + :label="item.nickName"
  20 + :value="item.username"/>
  21 + </el-select>
24 </div> 22 </div>
  23 + </el-col>
  24 + <el-col :span="10" class="search">
  25 + <el-button-group class="ml-4">
  26 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'yesterday' ? 'primary' : ''"
  27 + @click="loadPage('yesterday')">昨天
  28 + </el-button>
  29 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'today' ? 'primary' : ''"
  30 + @click="loadPage('today')">今天
  31 + </el-button>
  32 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'lastWeek' ? 'primary' : ''"
  33 + @click="loadPage('lastWeek')">上周
  34 + </el-button>
  35 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'thisWeek' ? 'primary' : ''"
  36 + @click="loadPage('thisWeek')">本周
  37 + </el-button>
  38 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'thisMonth' ? 'primary' : ''"
  39 + @click="loadPage('thisMonth')">本月
  40 + </el-button>
  41 + <el-button style="border-radius: 0;" :size="$global.elementConfig.size.button" :type="search.dateType == 'all' ? 'primary' : ''"
  42 + @click="loadPage('all')">全部
  43 + </el-button>
  44 + </el-button-group>
  45 + <el-date-picker
  46 + :size="$global.elementConfig.size.input"
  47 + style="width:150px;border-radius: 0 4px 4px 0;"
  48 + end-placeholder="结束日期"
  49 + format="YYYY-MM-DD"
  50 + range-separator="-"
  51 + start-placeholder="开始日期"
  52 + type="daterange"
  53 + v-model="search.dateTime"
  54 + value-format="YYYY-MM-DD"
  55 + :prefix-icon="'none'"
  56 + @focus="dateFocus"
  57 + @change="dateChange"/>
25 58
  59 + <el-button :size="$global.elementConfig.size.button" class="m-l-6" type="primary" @click="loadPage('')">
  60 + 查询
  61 + </el-button>
26 </el-col> 62 </el-col>
27 - <el-col :span="10">  
28 - <div class="search">  
29 - <div class="operation-log-search">  
30 - <el-button-group class="ml-4">  
31 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 'yesterday' ? 'primary' : ''"  
32 - @click="getDataList('yesterday')">昨天  
33 - </el-button>  
34 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 'today' ? 'primary' : ''"  
35 - @click="getDataList('today')">今天  
36 - </el-button>  
37 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 'lastWeek' ? 'primary' : ''"  
38 - @click="getDataList('lastWeek')">上周  
39 - </el-button>  
40 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 'thisWeek' ? 'primary' : ''"  
41 - @click="getDataList('thisWeek')">本周  
42 - </el-button>  
43 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 'thisMonth' ? 'primary' : ''"  
44 - @click="getDataList('thisMonth')">本月  
45 - </el-button>  
46 - <el-button style="border-radius: 0;" :size="$global.elementConfig.size.button" :type="search.status == 'all' ? 'primary' : ''"  
47 - @click="getDataList('all')">全部  
48 - </el-button>  
49 - </el-button-group>  
50 - <el-date-picker  
51 - :size="$global.elementConfig.size.input"  
52 - style="width:150px;border-radius: 0 4px 4px 0;"  
53 - end-placeholder="结束日期"  
54 - format="YYYY-MM-DD"  
55 - range-separator="-"  
56 - start-placeholder="开始日期"  
57 - type="daterange"  
58 - v-model="search.dateTime"  
59 - value-format="YYYY-MM-DD"  
60 - :prefix-icon="'none'"  
61 - @focus="dateFocus"  
62 - @change="dateChange"  
63 - />  
64 - </div> 63 + </el-row>
  64 +
  65 + <!--统计区区域-->
  66 + <el-row>
  67 + <el-col :span="12" class="p-r-3">
  68 + <h3 class="page-item-title-h3">巡检点击完成统计</h3>
  69 + <div class="page-item-content" style="height: 300px">
  70 + <LineChart :optionData="stackedGraphGroupData" v-if="stackedGraphGroupData"></LineChart>
65 </div> 71 </div>
66 - <div class="echart-con">  
67 - <div class="echart-right">  
68 - <div class="echart-title">人员功能点击量</div>  
69 - <div class="echart-chart">  
70 - <LineChart :optionData="optionDataR" v-if="optionDataR"></LineChart>  
71 - </div>  
72 - </div> 72 + </el-col>
  73 + <el-col :span="12" class="p-l-3">
  74 + <h3 class="page-item-title-h3">人员功能点击量</h3>
  75 + <div class="page-item-content" style="height: 300px">
  76 + <LineChart :optionData="stackedGraphUserData" v-if="stackedGraphUserData"></LineChart>
73 </div> 77 </div>
74 -  
75 </el-col> 78 </el-col>
76 </el-row> 79 </el-row>
77 80
78 - <div class="container-none"></div>  
79 - <div class="search-table"> 81 + <!--表格区域-->
  82 + <div class="p-6">
80 <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" 83 <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
81 - :height="height - 110" 84 + :height="height - 480"
  85 + :pageSizes = '[10,20,50,100, 200, 300, 400]'
82 :loading="false" 86 :loading="false"
83 :pageSize="pageSize" 87 :pageSize="pageSize"
84 :showBorder="true" 88 :showBorder="true"
@@ -89,16 +93,12 @@ @@ -89,16 +93,12 @@
89 :total="tableData.count" 93 :total="tableData.count"
90 @loaddata="loaddata"> 94 @loaddata="loaddata">
91 <template #default="{row,prop,column}"> 95 <template #default="{row,prop,column}">
92 - 96 + <div v-if="prop == 'link'">
  97 + <operationLogLink :opLink="row.link" :opLinkSource="row.linkSource"></operationLogLink>
  98 + </div>
93 </template> 99 </template>
94 </cm-table-page> 100 </cm-table-page>
95 </div> 101 </div>
96 </div> 102 </div>
97 </div> 103 </div>
98 104
99 -<!--新增编辑弹框-->  
100 -<cm-dialog :showDialogVisible="dialog.show" :showFooter="false" :title="dialog.title" @hidedialog="hideDialog">  
101 - <template v-slot>  
102 - </template>  
103 -</cm-dialog>  
104 -  
  1 +import operationLogService from "./operationLogService.js";
  2 +
1 export default { 3 export default {
2 name: 'operationLog', 4 name: 'operationLog',
3 template: '', 5 template: '',
4 components: { 6 components: {
5 'LineChart': Vue.defineAsyncComponent( 7 'LineChart': Vue.defineAsyncComponent(
6 () => myImport('views/page/components/lineChart/index') 8 () => myImport('views/page/components/lineChart/index')
  9 + ),
  10 + 'operationLogLink': Vue.defineAsyncComponent(
  11 + () => myImport('components/page/operationLog/operationLogLink')
7 ) 12 )
8 }, 13 },
9 props: [], 14 props: [],
10 setup(props, {attrs, slots, emit}) { 15 setup(props, {attrs, slots, emit}) {
11 const {proxy} = Vue.getCurrentInstance(); 16 const {proxy} = Vue.getCurrentInstance();
12 - let isView = Vue.ref(false);  
13 - let height = Vue.ref(window.innerHeight);  
14 - let optionData = Vue.ref('');  
15 - let optionDataR = Vue.ref('');  
16 - let series = Vue.ref([]);  
17 - let seriesR = Vue.ref([]);  
18 - let names = Vue.ref(['智能综合巡检系统', '数据中心虚拟化', '备份系统']);  
19 - let namesR = Vue.ref(['吴斌斌','袁晋鹏'])  
20 - let kpiName=Vue.ref('');  
21 - let kpiNameR = Vue.ref('');  
22 - let kpiUnit=Vue.ref('');  
23 - let kpiUnitR=Vue.ref('');  
24 - let colorsArr = Vue.ref([  
25 - {  
26 - start: '#468ced',  
27 - end: '#68a5fa'  
28 - },  
29 - {  
30 - start: '#79dda1',  
31 - end: '#9bddb5' 17 + let height = Vue.ref(window.innerHeight - 10);
  18 +
  19 + let groupList = Vue.ref([]);
  20 + let userList = Vue.ref([]);
  21 + let stackedGraphGroupData = Vue.ref({});
  22 + let stackedGraphUserData = Vue.ref({});
  23 +
  24 + // 搜索
  25 + let search = Vue.ref({
  26 + groupId: '',
  27 + userId: '',
  28 + dateType: 'today',
  29 + dateTime: '',
  30 + page: 1,
  31 + limit: 20,
  32 + });
  33 +
  34 + /**
  35 + * 初始化报表
  36 + */
  37 + const loadPage = (dateType) => {
  38 +
  39 + // 加载表格内容
  40 + if (dateType && dateType != '') {
  41 + // 设置最新的类型
  42 + search.value.dateType = dateType;
  43 + } else {
  44 + // 获取当前点击的配置
  45 + dateType = search.value.dateType;
32 } 46 }
33 - ])  
34 - const optionDataInit = () => {  
35 47
36 - optionData.value = {  
37 - tooltip: {  
38 - trigger: 'axis',  
39 - formatter: function (param) {  
40 - var tips = kpiName.value + " " + param[0].name + "<br/>";  
41 - $.each(param, function (i, v) {  
42 - tips += v.marker + " " + v.seriesName + ":" + v.value + kpiUnit.value + "</br>"  
43 - });  
44 - return tips;  
45 - }  
46 - },  
47 - legend: {  
48 - show: true  
49 - },  
50 - grid: {  
51 - top: '10%',  
52 - left: '3%',  
53 - right: '4%',  
54 - bottom: '5%',  
55 - containLabel: true  
56 - },  
57 - toolbox: {  
58 - feature: {  
59 - saveAsImage: {  
60 - show: false  
61 - }  
62 - }  
63 - },  
64 - xAxis: {  
65 - type: 'category',  
66 - data: names.value,  
67 - axisLine: {  
68 - lineStyle: {  
69 - color: '#c9c9c9'  
70 - }  
71 - },  
72 - axisLabel: {  
73 - color: '#232425',  
74 - showMaxLabel: true,  
75 - lineHeight:18,  
76 - formatter: function (params) {  
77 - var newParamsName = '';  
78 - let paramsNameNumber = params.length;  
79 - let provideNumber = 4;  
80 - let rowNumber = Math.ceil(paramsNameNumber / provideNumber);  
81 - if (paramsNameNumber > provideNumber) {  
82 - for (let i = 0; i < rowNumber; i++) {  
83 - let tempStr = '';  
84 - let start = i * provideNumber;  
85 - let end = start + provideNumber;  
86 - if (i == rowNumber - 1) {  
87 - tempStr = params.substring(start, paramsNameNumber);  
88 - } else {  
89 - tempStr = params.substring(start, end) + "\n";  
90 - }  
91 - newParamsName += tempStr;  
92 - }  
93 - } else {  
94 - newParamsName = params;  
95 - }  
96 - return newParamsName;  
97 - }  
98 - },  
99 - splitArea: {  
100 - show: true,  
101 - areaStyle: {  
102 - color: ['rgba(200,200,200,0.1)', 'transparent'  
103 - ]  
104 - }  
105 - }  
106 - },  
107 - yAxis: {  
108 - type: 'value',  
109 - scale: true,  
110 - min:0,  
111 - boundaryGap: ['10%', '10%'],  
112 - axisLine: {  
113 - lineStyle: {  
114 - color: '#232425'  
115 - },  
116 - show: false  
117 - },  
118 - axisTick: {  
119 - show: false  
120 - },  
121 - splitLine: {  
122 - lineStyle: {  
123 - color: ['#ddd'],  
124 - type: 'dotted', 48 + if (dateType != 'dateRange') {
  49 + search.value.dateTime = [];
  50 + } else {
  51 + if (search.value.dateTime && search.value.dateTime.length == 0) {
  52 + // 时间范围
  53 + proxy.$global.showMsg("请选择开始结束时间！", "warning");
  54 + return;
  55 + }
  56 + }
125 57
126 - }  
127 - }  
128 - },  
129 - series: series.value  
130 - };  
131 - optionDataR.value= {  
132 - tooltip: {  
133 - trigger: 'axis',  
134 - formatter: function (param) {  
135 - var tips = kpiName.value + " " + param[0].name + "<br/>";  
136 - $.each(param, function (i, v) {  
137 - tips += v.marker + " " + v.seriesName + ":" + v.value + kpiUnit.value + "</br>"  
138 - });  
139 - return tips;  
140 - }  
141 - },  
142 - legend: {  
143 - show: true  
144 - },  
145 - grid: {  
146 - top: '10%',  
147 - left: '3%',  
148 - right: '4%',  
149 - bottom: '5%',  
150 - containLabel: true  
151 - },  
152 - toolbox: {  
153 - feature: {  
154 - saveAsImage: {  
155 - show: false  
156 - }  
157 - }  
158 - },  
159 - xAxis: {  
160 - type: 'category',  
161 - data: namesR.value,  
162 - axisLine: {  
163 - lineStyle: {  
164 - color: '#c9c9c9'  
165 - }  
166 - },  
167 - axisLabel: {  
168 - color: '#232425',  
169 - showMaxLabel: true,  
170 - lineHeight:18,  
171 - formatter: function (params) {  
172 - var newParamsName = '';  
173 - let paramsNameNumber = params.length;  
174 - let provideNumber = 4;  
175 - let rowNumber = Math.ceil(paramsNameNumber / provideNumber);  
176 - if (paramsNameNumber > provideNumber) {  
177 - for (let i = 0; i < rowNumber; i++) {  
178 - let tempStr = '';  
179 - let start = i * provideNumber;  
180 - let end = start + provideNumber;  
181 - if (i == rowNumber - 1) {  
182 - tempStr = params.substring(start, paramsNameNumber);  
183 - } else {  
184 - tempStr = params.substring(start, end) + "\n";  
185 - }  
186 - newParamsName += tempStr;  
187 - }  
188 - } else {  
189 - newParamsName = params;  
190 - }  
191 - return newParamsName;  
192 - }  
193 - },  
194 - splitArea: {  
195 - show: true,  
196 - areaStyle: {  
197 - color: ['rgba(200,200,200,0.1)', 'transparent'  
198 - ]  
199 - }  
200 - }  
201 - },  
202 - yAxis: {  
203 - type: 'value',  
204 - scale: true,  
205 - boundaryGap: ['10%', '10%'],  
206 - axisLine: {  
207 - lineStyle: {  
208 - color: '#232425'  
209 - },  
210 - show: false  
211 - },  
212 - axisTick: {  
213 - show: false  
214 - },  
215 - splitLine: {  
216 - lineStyle: {  
217 - color: ['#ddd'],  
218 - type: 'dotted', 58 + let startTime = '';
  59 + let endTime = ''
  60 + if (search.value.dateTime && search.value.dateTime.length > 0) {
  61 + startTime = search.value.dateTime[0];
  62 + endTime = search.value.dateTime[1];
  63 + }
  64 + let params = {
  65 + page: search.value.page,
  66 + limit: search.value.limit,
  67 + id: search.value.groupId,
  68 + userName: search.value.userId,
  69 + timeType: search.value.dateType,
  70 + startTime: startTime,
  71 + endTime: endTime
  72 + }
219 73
220 - }  
221 - }  
222 - },  
223 - series: seriesR.value  
224 - }; 74 + // 组统计
  75 + operationLogService.stackedGraphGroupInit(params, stackedGraphGroupData);
  76 + // 用户统计
  77 + operationLogService.stackedGraphUserInit(params, stackedGraphUserData);
  78 + // 下拉列表选项
  79 + operationLogService.getOperationLogGroupAndUserList(groupList);
  80 +
  81 + // 查询列表
  82 + operationLogService.pageList(params,tableData);
225 } 83 }
226 - let rateData=Vue.ref([  
227 - {name:'应点击量',data:[1,34,12]},  
228 - {name:'实际点击量',data:[15,24,10]}  
229 - ])  
230 - let rateDataR=Vue.ref([  
231 - {name:'',data:[1,6,8,9,10]},  
232 - ])  
233 - const setSeries = () => {  
234 - series.value = [];  
235 - $.each(rateData.value, function (i, v) {  
236 - series.value.push({  
237 - name: v.name,  
238 - type: 'bar',  
239 - barWidth: 16,//设置柱状图大小  
240 - data: v.data,  
241 - stack:'total',  
242 - symbolSize: 12,  
243 - symbol: 'circle',  
244 - itemStyle: {  
245 - normal: {  
246 - // color: colorsArr.value[i].start //图标颜色  
247 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变  
248 - offset: 0,  
249 - color: colorsArr.value[i].start //这里是我设置的渐变的颜色从线条颜色变为透明  
250 - }, {  
251 - offset: 1,  
252 - color: colorsArr.value[i].end  
253 - }])  
254 - }  
255 - }  
256 - })  
257 - });  
258 84
259 - seriesR.value = [];  
260 - $.each(rateDataR.value, function (i, v) {  
261 - seriesR.value.push({  
262 - name: v.name,  
263 - type: 'bar',  
264 - barWidth: 16,//设置柱状图大小  
265 - data: v.data,  
266 - stack:'noStack',  
267 - symbolSize: 12,  
268 - symbol: 'circle',  
269 - itemStyle: {  
270 - normal: {  
271 - // color: colorsArr.value[i].start //图标颜色  
272 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变  
273 - offset: 0,  
274 - color: colorsArr.value[i].start //这里是我设置的渐变的颜色从线条颜色变为透明  
275 - }, {  
276 - offset: 1,  
277 - color: colorsArr.value[i].end  
278 - }])  
279 - },  
280 - borderRadius:[3,3,0,0]  
281 - }  
282 - }) 85 + /**
  86 + * 变更巡检组，获取用户列表
  87 + * @param val
  88 + */
  89 + const getGroupUser = (val) => {
  90 + let group = groupList.value.filter(item => {
  91 + if (item.groupId === val) {
  92 + return item;
  93 + }
283 }); 94 });
  95 + if(group && group.length > 0){
  96 + userList.value = group[0].groupUser;
  97 + }
  98 + }
  99 +
  100 + /**
  101 + * 分页事件，加载数据
  102 + * @param page
  103 + * @param limit
  104 + */
  105 + const loaddata = ({page, limit}) => {
  106 + search.value.page = page;
  107 + search.value.limit = limit;
284 108
285 - optionDataInit(); 109 + loadPage('');
286 } 110 }
287 - let search = Vue.ref({  
288 - status: 'today',  
289 - dateTime:'',  
290 - keyword: '',  
291 - page: 1,  
292 - limit: 10,  
293 - });  
294 - let dialog = Vue.ref({  
295 - title: "处理审批",  
296 - show: false,  
297 - amId: '',  
298 - amStatus: 0,  
299 - alarmId: '',  
300 - }); 111 +
301 112
302 //表格字段 113 //表格字段
303 let tableData = Vue.ref({ 114 let tableData = Vue.ref({
@@ -305,32 +116,39 @@ export default { @@ -305,32 +116,39 @@ export default {
305 dataList: [], 116 dataList: [],
306 columns: [ 117 columns: [
307 { 118 {
308 - prop: 'alarmNo', 119 + prop: 'groupName',
  120 + label: '组名称',
  121 + sortable: true,
  122 + align: 'center',
  123 + width: '180'
  124 + },
  125 + {
  126 + prop: 'nickName',
309 label: '用户名', 127 label: '用户名',
310 sortable: true, 128 sortable: true,
311 align: 'center', 129 align: 'center',
312 width: '150' 130 width: '150'
313 }, 131 },
314 { 132 {
315 - prop: 'resName', 133 + prop: 'createTime',
316 label: '时间', 134 label: '时间',
317 sortable: true, 135 sortable: true,
318 align: 'center', 136 align: 'center',
319 - width: '250', 137 + width: '170',
320 }, 138 },
321 { 139 {
322 - prop: 'resTypeName', 140 + prop: 'ip',
323 label: 'IP地址', 141 label: 'IP地址',
324 sortable: true, 142 sortable: true,
325 align: 'center', 143 align: 'center',
326 width: '150' 144 width: '150'
327 }, { 145 }, {
328 - prop: 'managenameName', 146 + prop: 'link',
329 label: '访问位置', 147 label: '访问位置',
330 sortable: true, 148 sortable: true,
331 align: 'center', 149 align: 'center',
332 }, { 150 }, {
333 - prop: 'reason', 151 + prop: 'dwellTime',
334 label: '停留总时长', 152 label: '停留总时长',
335 sortable: true, 153 sortable: true,
336 align: 'center', 154 align: 'center',
@@ -339,109 +157,81 @@ export default { @@ -339,109 +157,81 @@ export default {
339 ] 157 ]
340 }) 158 })
341 //点击时间选择时，其他按钮不高亮 159 //点击时间选择时，其他按钮不高亮
342 - let dateFocus=()=>{  
343 - search.value.status = 'dateRange'; 160 + let dateFocus = () => {
  161 + search.value.dateType = 'dateRange';
344 } 162 }
345 //时间更改事件 163 //时间更改事件
346 - let dateChange=(val)=>{  
347 - console.log(val,search.value.dateTime)  
348 - getDataList('dateRange')  
349 - }  
350 -  
351 - //获取aj配置信息  
352 - let statusVal = Vue.ref('today');  
353 - let getDataList = (status) => {  
354 - if (status == undefined) {  
355 - status = 'today'  
356 - }  
357 - if(status != 'dateRange'){  
358 - search.value.dateTime=[];  
359 - }  
360 - statusVal.value = status;  
361 - search.value.status = status;  
362 - let startTime='';  
363 - let endTime=''  
364 - if(search.value.dateTime && search.value.dateTime.length>0){  
365 - startTime=search.value.dateTime[0];  
366 - endTime=search.value.dateTime[1];  
367 - }  
368 - let params={  
369 - page: search.value.page,  
370 - limit: search.value.limit,  
371 - keyword: search.value.keyword,  
372 - status: search.value.status,  
373 - startTime:startTime,  
374 - endTime:endTime  
375 - }  
376 - proxy.$http.get(`/api-web/bAlarmManage/page`, params, function (res) {  
377 - if (res && res.data) {  
378 - tableData.value.dataList = res.data;  
379 - tableData.value.count = res.count;  
380 - } else {  
381 - tableData.value.dataList = [];  
382 - tableData.value.count = 0;  
383 - }  
384 - });  
385 - }  
386 -  
387 - let loaddata = ({page, limit}) => {  
388 - search.value.page = page;  
389 - search.value.limit = limit; 164 + let dateChange = (val) => {
  165 + loadPage('dateRange')
390 } 166 }
391 167
392 168
393 - let hideDialog = (flg) => {  
394 - dialog.value.show = flg;  
395 - if (!flg) {  
396 - getDataList(dialog.value.amStatus)  
397 - }  
398 - } 169 + // let getDataList = (dateType) => {
  170 + // if (dateType) {
  171 + // // 设置最新的类型
  172 + // search.value.dateType = dateType;
  173 + // } else {
  174 + // // 获取当前点击的配置
  175 + // dateType = search.value.dateType;
  176 + // }
  177 + //
  178 + // if (dateType != 'dateRange') {
  179 + // search.value.dateTime = [];
  180 + // } else {
  181 + // if (search.value.dateTime && search.value.dateTime.length == 0) {
  182 + // // 时间范围
  183 + // proxy.$global.showMsg("请选择开始结束时间！", "warning");
  184 + // return;
  185 + // }
  186 + // }
  187 + //
  188 + // let startTime = '';
  189 + // let endTime = ''
  190 + // if (search.value.dateTime && search.value.dateTime.length > 0) {
  191 + // startTime = search.value.dateTime[0];
  192 + // endTime = search.value.dateTime[1];
  193 + // }
  194 + // let params = {
  195 + // page: search.value.page,
  196 + // limit: search.value.limit,
  197 + // id: search.value.groupId,
  198 + // userName: search.value.userId,
  199 + // timeType: search.value.dateType,
  200 + // startTime: startTime,
  201 + // endTime: endTime
  202 + // }
  203 + // // // 查询列表
  204 + // operationLogService.pageList(params,tableData);
  205 + //
  206 + // }
399 207
400 - // 处理弹框  
401 - let handle = (row, flag) => {  
402 - isView.value = flag;  
403 - hideDialog(true);  
404 - dialog.value.amId = row.id;  
405 - dialog.value.amStatus = row.status;  
406 - dialog.value.alarmId = row.alarmId;  
407 - }  
408 - //审核保存后关闭弹框  
409 - let saveback = (val) => {  
410 - hideDialog(val)  
411 - }  
412 - let loginName = Vue.ref(localStorage.getItem('lgn'));  
413 208
414 // 挂载完 209 // 挂载完
415 Vue.onMounted(() => { 210 Vue.onMounted(() => {
416 - getDataList();  
417 - setSeries(); 211 + // 默认加载搜索条件、统计图、表格
  212 + loadPage();
  213 +
418 }) 214 })
419 215
420 return { 216 return {
421 - loginName,  
422 height, 217 height,
423 - optionData,  
424 - optionDataInit,  
425 - series,  
426 - names,  
427 - rateData,  
428 - optionDataR,  
429 - seriesR,  
430 - namesR,  
431 - rateDataR,  
432 - setSeries, 218 + groupList,
  219 + userList,
  220 + // 搜索条件
  221 + search,
  222 + getGroupUser,
433 dateFocus, 223 dateFocus,
434 dateChange, 224 dateChange,
435 - dialog,  
436 - hideDialog,  
437 - search,  
438 - tableData, 225 +
  226 + stackedGraphGroupData,
  227 + stackedGraphUserData,
  228 +
  229 + // 搜索数据
  230 + loadPage,
439 loaddata, 231 loaddata,
440 - getDataList,  
441 - handle,  
442 - saveback,  
443 - statusVal,  
444 - isView 232 +
  233 + // 表格数据
  234 + tableData
445 } 235 }
446 } 236 }
447 237
  1 +import {useGetData} from '/vue3/src/composables/usePageCurd.js'
  2 +
  3 +const getSeriesData = (resData) => {
  4 + let series = [];
  5 + let colorsArr = [
  6 + {
  7 + start: '#468ced',
  8 + end: '#68a5fa'
  9 + },
  10 + {
  11 + start: '#79dda1',
  12 + end: '#9bddb5'
  13 + }
  14 + ];
  15 + $.each(resData, function (i, v) {
  16 + series.push({
  17 + name: v.name,
  18 + type: 'bar',
  19 + barWidth: 16,//设置柱状图大小
  20 + data: v.data,
  21 + stack: 'total',
  22 + symbolSize: 12,
  23 + symbol: 'circle',
  24 + itemStyle: {
  25 + normal: {
  26 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
  27 + offset: 0,
  28 + color: colorsArr[i].start //这里是我设置的渐变的颜色从线条颜色变为透明
  29 + }, {
  30 + offset: 1,
  31 + color: colorsArr[i].end
  32 + }])
  33 + }
  34 + }
  35 + })
  36 + });
  37 +
  38 + return series;
  39 +}
  40 +
  41 +
  42 +const getOptionData = (rateData, barNames) => {
  43 + let seriesData = getSeriesData(rateData);
  44 + return {
  45 + tooltip: {
  46 + trigger: 'axis',
  47 + formatter: function (param) {
  48 + var tips = param[0].name + "<br/>";
  49 + $.each(param, function (i, v) {
  50 + tips += v.marker + " " + v.seriesName + ":" + v.value + "</br>"
  51 + });
  52 + return tips;
  53 + }
  54 + },
  55 + legend: {
  56 + show: true
  57 + },
  58 + grid: {
  59 + top: '10%',
  60 + left: '3%',
  61 + right: '4%',
  62 + bottom: '5%',
  63 + containLabel: true
  64 + },
  65 + toolbox: {
  66 + feature: {
  67 + saveAsImage: {
  68 + show: false
  69 + }
  70 + }
  71 + },
  72 + xAxis: {
  73 + type: 'category',
  74 + data: barNames,
  75 + axisLine: {
  76 + lineStyle: {
  77 + color: '#c9c9c9'
  78 + }
  79 + },
  80 + axisLabel: {
  81 + color: '#232425',
  82 + showMaxLabel: true,
  83 + lineHeight: 18,
  84 + formatter: function (params) {
  85 + var newParamsName = '';
  86 + let paramsNameNumber = params.length;
  87 + let provideNumber = 4;
  88 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
  89 + if (paramsNameNumber > provideNumber) {
  90 + for (let i = 0; i < rowNumber; i++) {
  91 + let tempStr = '';
  92 + let start = i * provideNumber;
  93 + let end = start + provideNumber;
  94 + if (i == rowNumber - 1) {
  95 + tempStr = params.substring(start, paramsNameNumber);
  96 + } else {
  97 + tempStr = params.substring(start, end) + "\n";
  98 + }
  99 + newParamsName += tempStr;
  100 + }
  101 + } else {
  102 + newParamsName = params;
  103 + }
  104 + return newParamsName;
  105 + }
  106 + },
  107 + splitArea: {
  108 + show: true,
  109 + areaStyle: {
  110 + color: ['rgba(200,200,200,0.1)', 'transparent'
  111 + ]
  112 + }
  113 + }
  114 + },
  115 + yAxis: {
  116 + type: 'value',
  117 + scale: true,
  118 + min: 0,
  119 + boundaryGap: ['10%', '10%'],
  120 + axisLine: {
  121 + lineStyle: {
  122 + color: '#232425'
  123 + },
  124 + show: false
  125 + },
  126 + axisTick: {
  127 + show: false
  128 + },
  129 + splitLine: {
  130 + lineStyle: {
  131 + color: ['#ddd'],
  132 + type: 'dotted',
  133 +
  134 + }
  135 + }
  136 + },
  137 + series: seriesData
  138 + };
  139 +}
  140 +
  141 +
  142 +const operationLogService = {
  143 +
  144 + /**
  145 + * 获取操作日志分组用户列表
  146 + * @param type group 组 user 用户
  147 + * @param groupId 组id
  148 + * @param outData1 输出数据
  149 + * @returns [{
  150 + * groupName: '组1',
  151 + * groupId: '1',
  152 + * groupUser: [{username: 'admin', nickName: '管理员ad'},
  153 + * {username: 'root', nickName: '管理员ad1'},
  154 + * {username: 'admin1', nickName: '管理员ad1'}]
  155 + * }]
  156 + */
  157 + getOperationLogGroupAndUserList: (outGroupData) => {
  158 +
  159 + const {data, error} = useGetData('getGroupAndGroupUser', {});
  160 +
  161 + Vue.watchEffect(() => {
  162 + if (data.value && data.value.data) {
  163 + outGroupData.value = data.value.data;
  164 + }
  165 + })
  166 + },
  167 +
  168 + /**
  169 + * 堆叠图-按照巡检组统计
  170 + * 样例数据：
  171 + * let data = {
  172 + * nameList: ['智能综合巡检系统', '数据中心虚拟化', '备份系统'],
  173 + * dataList: [
  174 + * {name: '应点击量', data: [1, 34, 12]},
  175 + * {name: '实际点击量', data: [15, 24, 10]}
  176 + * ]
  177 + * }
  178 + */
  179 + stackedGraphGroupInit: (params, outData) => {
  180 +
  181 + const {data, error} = useGetData('stackedGraphGroup', params);
  182 +
  183 + Vue.watchEffect(() => {
  184 + if (data.value.object) {
  185 + outData.value = getOptionData(data.value.object.dataList, data.value.object.nameList)
  186 + }
  187 + })
  188 + },
  189 +
  190 +
  191 + /**
  192 + * 堆叠图-按照人员统计
  193 + * 样例数据
  194 + * let data = {
  195 + * nameList: ['吴斌斌', '袁晋鹏'],
  196 + * dataList: [
  197 + * {name: '应点击量', data: [1, 34, 12]},
  198 + * {name: '实际点击量', data: [15, 24, 10]}
  199 + * ]
  200 + * }
  201 + */
  202 + stackedGraphUserInit: (params, outData) => {
  203 +
  204 + const {data, error} = useGetData('stackedGraphUser', params);
  205 +
  206 + Vue.watchEffect(() => {
  207 + if (data.value.object) {
  208 + outData.value = getOptionData(data.value.object.dataList, data.value.object.nameList)
  209 + }
  210 + });
  211 + },
  212 +
  213 + pageList: (params, outData) => {
  214 + const {data, error} = useGetData('getOperationLogList', params);
  215 +
  216 + Vue.watchEffect(() => {
  217 + if (data.value) {
  218 + outData.value.count = data.value.count;
  219 + outData.value.dataList = data.value.data;
  220 + }
  221 + });
  222 + }
  223 +}
  224 +
  225 +
  226 +export default operationLogService
  1 +<div :style="{'height':height+'px','max-height':height+'px'}" class="container">
  2 + <div :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}" class="cm-card">
  3 + <!-- 搜索区域 -->
  4 + <el-row>
  5 + <el-col :span="10" class="search">
  6 + <el-button-group class="ml-4">
  7 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'yesterday' ? 'primary' : ''"
  8 + @click="loadPage('yesterday')">昨天
  9 + </el-button>
  10 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'today' ? 'primary' : ''"
  11 + @click="loadPage('today')">今天
  12 + </el-button>
  13 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'lastWeek' ? 'primary' : ''"
  14 + @click="loadPage('lastWeek')">上周
  15 + </el-button>
  16 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'thisWeek' ? 'primary' : ''"
  17 + @click="loadPage('thisWeek')">本周
  18 + </el-button>
  19 + <el-button :size="$global.elementConfig.size.button" :type="search.dateType == 'thisMonth' ? 'primary' : ''"
  20 + @click="loadPage('thisMonth')">本月
  21 + </el-button>
  22 + <el-button style="border-radius: 0;" :size="$global.elementConfig.size.button" :type="search.dateType == 'all' ? 'primary' : ''"
  23 + @click="loadPage('all')">全部
  24 + </el-button>
  25 + </el-button-group>
  26 + <el-date-picker
  27 + :size="$global.elementConfig.size.input"
  28 + style="width:150px;border-radius: 0 4px 4px 0;"
  29 + end-placeholder="结束日期"
  30 + format="YYYY-MM-DD"
  31 + range-separator="-"
  32 + start-placeholder="开始日期"
  33 + type="daterange"
  34 + v-model="search.dateTime"
  35 + value-format="YYYY-MM-DD"
  36 + :prefix-icon="'none'"
  37 + @focus="dateFocus"
  38 + @change="dateChange"/>
  39 +
  40 + <el-button :size="$global.elementConfig.size.button" class="m-l-6" type="primary" @click="loadPage('')">
  41 + 查询
  42 + </el-button>
  43 + </el-col>
  44 + </el-row>
  45 +
  46 + <!--表格区域-->
  47 + <div class="p-6">
  48 + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
  49 + :height="height - 95"
  50 + :pageSizes = '[10,20,50,100, 200, 300, 400]'
  51 + :loading="false"
  52 + :pageSize="pageSize"
  53 + :showBorder="true"
  54 + :showIndex="true"
  55 + :showPage="true"
  56 + :showSelection="false"
  57 + :showTools="false"
  58 + :total="tableData.count"
  59 + @loaddata="loaddata">
  60 + <template #default="{row,prop,column}">
  61 + <div v-if="prop == 'link'">
  62 + <operationLogLink :opLink="row.link" :opLinkSource="row.linkSource"></operationLogLink>
  63 + </div>
  64 + </template>
  65 + </cm-table-page>
  66 + </div>
  67 + </div>
  68 +</div>
  69 +
  1 +import operationLogService from "./operationLogService.js";
  2 +
  3 +export default {
  4 + name: 'operationLog',
  5 + template: '',
  6 + components: {
  7 + 'LineChart': Vue.defineAsyncComponent(
  8 + () => myImport('views/page/components/lineChart/index')
  9 + ),
  10 + 'operationLogLink': Vue.defineAsyncComponent(
  11 + () => myImport('components/page/operationLog/operationLogLink')
  12 + )
  13 + },
  14 + props: [],
  15 + setup(props, {attrs, slots, emit}) {
  16 + const {proxy} = Vue.getCurrentInstance();
  17 + let height = Vue.ref(window.innerHeight - 10);
  18 +
  19 + let groupList = Vue.ref([]);
  20 + let userList = Vue.ref([]);
  21 + let stackedGraphGroupData = Vue.ref({});
  22 + let stackedGraphUserData = Vue.ref({});
  23 +
  24 + // 搜索
  25 + let search = Vue.ref({
  26 + groupId: '',
  27 + userId: '',
  28 + dateType: 'today',
  29 + dateTime: '',
  30 + page: 1,
  31 + limit: 20,
  32 + });
  33 +
  34 + /**
  35 + * 初始化报表
  36 + */
  37 + const loadPage = (dateType) => {
  38 +
  39 + // 加载表格内容
  40 + if (dateType && dateType != '') {
  41 + // 设置最新的类型
  42 + search.value.dateType = dateType;
  43 + } else {
  44 + // 获取当前点击的配置
  45 + dateType = search.value.dateType;
  46 + }
  47 +
  48 + if (dateType != 'dateRange') {
  49 + search.value.dateTime = [];
  50 + } else {
  51 + if (search.value.dateTime && search.value.dateTime.length == 0) {
  52 + // 时间范围
  53 + proxy.$global.showMsg("请选择开始结束时间！", "warning");
  54 + return;
  55 + }
  56 + }
  57 +
  58 + let startTime = '';
  59 + let endTime = ''
  60 + if (search.value.dateTime && search.value.dateTime.length > 0) {
  61 + startTime = search.value.dateTime[0];
  62 + endTime = search.value.dateTime[1];
  63 + }
  64 + let params = {
  65 + page: search.value.page,
  66 + limit: search.value.limit,
  67 + id: search.value.groupId,
  68 + userName: localStorage.getItem('lgn'),
  69 + timeType: search.value.dateType,
  70 + startTime: startTime,
  71 + endTime: endTime
  72 + }
  73 +
  74 + // 下拉列表选项
  75 + operationLogService.getOperationLogGroupAndUserList(groupList);
  76 +
  77 + // 查询列表
  78 + operationLogService.pageList(params,tableData);
  79 + }
  80 +
  81 + /**
  82 + * 变更巡检组，获取用户列表
  83 + * @param val
  84 + */
  85 + const getGroupUser = (val) => {
  86 + let group = groupList.value.filter(item => {
  87 + if (item.groupId === val) {
  88 + return item;
  89 + }
  90 + });
  91 + if(group && group.length > 0){
  92 + userList.value = group[0].groupUser;
  93 + }
  94 + }
  95 +
  96 + /**
  97 + * 分页事件，加载数据
  98 + * @param page
  99 + * @param limit
  100 + */
  101 + const loaddata = ({page, limit}) => {
  102 + search.value.page = page;
  103 + search.value.limit = limit;
  104 +
  105 + loadPage('');
  106 + }
  107 +
  108 +
  109 + //表格字段
  110 + let tableData = Vue.ref({
  111 + count: 0,
  112 + dataList: [],
  113 + columns: [
  114 + {
  115 + prop: 'groupName',
  116 + label: '组名称',
  117 + sortable: true,
  118 + align: 'center',
  119 + width: '180'
  120 + },
  121 + {
  122 + prop: 'nickName',
  123 + label: '用户名',
  124 + sortable: true,
  125 + align: 'center',
  126 + width: '150'
  127 + },
  128 + {
  129 + prop: 'createTime',
  130 + label: '时间',
  131 + sortable: true,
  132 + align: 'center',
  133 + width: '170',
  134 + },
  135 + {
  136 + prop: 'ip',
  137 + label: 'IP地址',
  138 + sortable: true,
  139 + align: 'center',
  140 + width: '150'
  141 + }, {
  142 + prop: 'link',
  143 + label: '访问位置',
  144 + sortable: true,
  145 + align: 'center',
  146 + }, {
  147 + prop: 'dwellTime',
  148 + label: '停留总时长',
  149 + sortable: true,
  150 + align: 'center',
  151 + width: '120'
  152 + }
  153 + ]
  154 + })
  155 + //点击时间选择时，其他按钮不高亮
  156 + let dateFocus = () => {
  157 + search.value.dateType = 'dateRange';
  158 + }
  159 + //时间更改事件
  160 + let dateChange = (val) => {
  161 + loadPage('dateRange')
  162 + }
  163 +
  164 +
  165 + // let getDataList = (dateType) => {
  166 + // if (dateType) {
  167 + // // 设置最新的类型
  168 + // search.value.dateType = dateType;
  169 + // } else {
  170 + // // 获取当前点击的配置
  171 + // dateType = search.value.dateType;
  172 + // }
  173 + //
  174 + // if (dateType != 'dateRange') {
  175 + // search.value.dateTime = [];
  176 + // } else {
  177 + // if (search.value.dateTime && search.value.dateTime.length == 0) {
  178 + // // 时间范围
  179 + // proxy.$global.showMsg("请选择开始结束时间！", "warning");
  180 + // return;
  181 + // }
  182 + // }
  183 + //
  184 + // let startTime = '';
  185 + // let endTime = ''
  186 + // if (search.value.dateTime && search.value.dateTime.length > 0) {
  187 + // startTime = search.value.dateTime[0];
  188 + // endTime = search.value.dateTime[1];
  189 + // }
  190 + // let params = {
  191 + // page: search.value.page,
  192 + // limit: search.value.limit,
  193 + // id: search.value.groupId,
  194 + // userName: search.value.userId,
  195 + // timeType: search.value.dateType,
  196 + // startTime: startTime,
  197 + // endTime: endTime
  198 + // }
  199 + // // // 查询列表
  200 + // operationLogService.pageList(params,tableData);
  201 + //
  202 + // }
  203 +
  204 +
  205 + // 挂载完
  206 + Vue.onMounted(() => {
  207 + // 默认加载搜索条件、统计图、表格
  208 + loadPage();
  209 +
  210 + })
  211 +
  212 + return {
  213 + height,
  214 + groupList,
  215 + userList,
  216 + // 搜索条件
  217 + search,
  218 + getGroupUser,
  219 + dateFocus,
  220 + dateChange,
  221 +
  222 + stackedGraphGroupData,
  223 + stackedGraphUserData,
  224 +
  225 + // 搜索数据
  226 + loadPage,
  227 + loaddata,
  228 +
  229 + // 表格数据
  230 + tableData
  231 + }
  232 + }
  233 +
  234 +}
@@ -52,15 +52,15 @@ @@ -52,15 +52,15 @@
52 52
53 <el-row :gutter="20" style="padding: 3px 10px;"> 53 <el-row :gutter="20" style="padding: 3px 10px;">
54 <el-col :span="8"> 54 <el-col :span="8">
55 - <h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3> 55 + <h3 class="page-item-title-h3">资源类型快照量TOP5</h3>
56 <div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> 56 <div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
57 </el-col> 57 </el-col>
58 <el-col :span="8"> 58 <el-col :span="8">
59 - <h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3> 59 + <h3 class="page-item-title-h3">业务系统快照量TOP5</h3>
60 <div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> 60 <div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
61 </el-col> 61 </el-col>
62 <el-col :span="8"> 62 <el-col :span="8">
63 - <h3 style="text-align: left;color:#2b9eef;">快照量</h3> 63 + <h3 class="page-item-title-h3">快照量</h3>
64 <div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> 64 <div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
65 </el-col> 65 </el-col>
66 </el-row> 66 </el-row>
@@ -284,6 +284,12 @@ const routes = [{ @@ -284,6 +284,12 @@ const routes = [{
284 path: '/vue3/operationLog', 284 path: '/vue3/operationLog',
285 name: 'operationLog', 285 name: 'operationLog',
286 component: () => myImport('views/operationLog/index') 286 component: () => myImport('views/operationLog/index')
  287 + },
  288 + //操作日志 - 用户列表
  289 + {
  290 + path: '/vue3/operationLog/userList',
  291 + name: 'operationLogUserList',
  292 + component: () => myImport('views/operationLog/userList')
287 } 293 }
288 ]; 294 ];
289 295
1 -export default Vuex.createStore({  
2 - state: {},  
3 - getters: {},  
4 - mutations: {},  
5 - actions: {},  
6 - modules: {}  
7 -})