#872 ping详情页调整-表格字段顺序,title名称,图标更换 #2
Showing
5 changed files
with
60 additions
and
48 deletions
@@ -3211,7 +3211,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -3211,7 +3211,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
3211 | title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont"></i></a>`; | 3211 | title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont"></i></a>`; |
3212 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; | 3212 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; |
3213 | //lsq 2022-04-25 增加ping详情提交按钮 | 3213 | //lsq 2022-04-25 增加ping详情提交按钮 |
3214 | - title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${resName} data-ip=${ip} data-restypename=${resTypeName} data-adminname=${adminName} lay-tips="原始数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; | 3214 | + title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${resName} data-ip=${ip} data-restypename=${resTypeName} data-adminname=${adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; |
3215 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { | 3215 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { |
3216 | /* | 3216 | /* |
3217 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; | 3217 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; |
@@ -3236,7 +3236,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -3236,7 +3236,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
3236 | title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont"></i></a>`; | 3236 | title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont"></i></a>`; |
3237 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; | 3237 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; |
3238 | //lsq 2022-04-25 增加ping详情提交按钮 | 3238 | //lsq 2022-04-25 增加ping详情提交按钮 |
3239 | - title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="查看资源ping详情" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; | 3239 | + title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; |
3240 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { | 3240 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { |
3241 | /* | 3241 | /* |
3242 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; | 3242 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; |
@@ -3513,7 +3513,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -3513,7 +3513,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
3513 | let paramStr='?resId='+$(this).data('id')+'&resName='+$(this).data('resname')+'&resTypeName='+$(this).data('restypename')+'&adminName='+$(this).data('adminname')+'&ip='+$(this).data('ip') | 3513 | let paramStr='?resId='+$(this).data('id')+'&resName='+$(this).data('resname')+'&resTypeName='+$(this).data('restypename')+'&adminName='+$(this).data('adminname')+'&ip='+$(this).data('ip') |
3514 | 3514 | ||
3515 | layer.open({ | 3515 | layer.open({ |
3516 | - title: ['ping详情', 'font-size:18px;'], | 3516 | + title: ['历史数据', 'font-size:18px;'], |
3517 | type: 2, | 3517 | type: 2, |
3518 | area: ['80%', '90%'], | 3518 | area: ['80%', '90%'], |
3519 | shadeClose: true,//开启遮罩层 | 3519 | shadeClose: true,//开启遮罩层 |

1.4 KB
@@ -38,14 +38,14 @@ | @@ -38,14 +38,14 @@ | ||
38 | 责任人 | 38 | 责任人 |
39 | </div> | 39 | </div> |
40 | </template> | 40 | </template> |
41 | - {{detail.adminName}} | 41 | + {{detail.adminName?detail.adminName:''}} |
42 | </el-descriptions-item> | 42 | </el-descriptions-item> |
43 | </el-descriptions> | 43 | </el-descriptions> |
44 | </div> | 44 | </div> |
45 | <div class="search"> | 45 | <div class="search"> |
46 | <div class="condition"> | 46 | <div class="condition"> |
47 | <el-form-item > | 47 | <el-form-item > |
48 | - <el-input v-model="search.keyword" placeholder="=资源名称、日志内容="></el-input> | 48 | + <el-input v-model="search.keyword" placeholder="=关键字="></el-input> |
49 | </el-form-item> | 49 | </el-form-item> |
50 | <el-form-item > | 50 | <el-form-item > |
51 | <el-select v-model="search.kpiId" class="m-2" placeholder="指标" clearable @change="kpiChange"> | 51 | <el-select v-model="search.kpiId" class="m-2" placeholder="指标" clearable @change="kpiChange"> |
@@ -72,10 +72,10 @@ | @@ -72,10 +72,10 @@ | ||
72 | <el-form-item> | 72 | <el-form-item> |
73 | <el-date-picker | 73 | <el-date-picker |
74 | v-model="search.dateTime" | 74 | v-model="search.dateTime" |
75 | - type="date" | 75 | + type="datetime" |
76 | placeholder="日期" | 76 | placeholder="日期" |
77 | end-placeholder="结束时间" | 77 | end-placeholder="结束时间" |
78 | - value-format="YYYY-MM-DD" | 78 | + value-format="YYYY-MM-DD HH:mm:ss" |
79 | /> | 79 | /> |
80 | 80 | ||
81 | </el-form-item> | 81 | </el-form-item> |
@@ -16,7 +16,7 @@ export default { | @@ -16,7 +16,7 @@ export default { | ||
16 | let search = Vue.ref({ | 16 | let search = Vue.ref({ |
17 | kpiId:'', | 17 | kpiId:'', |
18 | sortBy:'dbTime', | 18 | sortBy:'dbTime', |
19 | - scopeBy:'dbTimeStr.keyword', | 19 | + scopeBy:'collTime.keyword', |
20 | keyword: '', | 20 | keyword: '', |
21 | pageNum: 1, | 21 | pageNum: 1, |
22 | pageSize: 20, | 22 | pageSize: 20, |
@@ -41,7 +41,7 @@ export default { | @@ -41,7 +41,7 @@ export default { | ||
41 | width: '150', | 41 | width: '150', |
42 | }, | 42 | }, |
43 | { | 43 | { |
44 | - prop: 'dbTimeStr', | 44 | + prop: 'dbTime', |
45 | label: '入库时间', | 45 | label: '入库时间', |
46 | sortable: true, | 46 | sortable: true, |
47 | align: 'center', | 47 | align: 'center', |
@@ -54,6 +54,26 @@ export default { | @@ -54,6 +54,26 @@ export default { | ||
54 | align: 'center', | 54 | align: 'center', |
55 | width: '100' | 55 | width: '100' |
56 | }, | 56 | }, |
57 | + { | ||
58 | + prop: 'ext', | ||
59 | + label: '扩展信息', | ||
60 | + sortable: true, | ||
61 | + align: 'center', | ||
62 | + width: '260', | ||
63 | + render:function (row){ | ||
64 | + return `<pre>${row.ext}</pre>` | ||
65 | + } | ||
66 | + }, { | ||
67 | + prop: 'message', | ||
68 | + label: '备注', | ||
69 | + sortable: true, | ||
70 | + align: 'center', | ||
71 | + width:'500', | ||
72 | + render:function (row){ | ||
73 | + let str=JSON.stringify(JSON.parse(row.message)) | ||
74 | + return `<pre>${str}</pre>` | ||
75 | + } | ||
76 | + }, | ||
57 | { | 77 | { |
58 | prop: 'taskName', | 78 | prop: 'taskName', |
59 | label: '采集任务', | 79 | label: '采集任务', |
@@ -74,27 +94,7 @@ export default { | @@ -74,27 +94,7 @@ export default { | ||
74 | sortable: true, | 94 | sortable: true, |
75 | align: 'center', | 95 | align: 'center', |
76 | width: '200' | 96 | width: '200' |
77 | - }, { | ||
78 | - prop: 'ext', | ||
79 | - label: '扩展信息', | ||
80 | - sortable: true, | ||
81 | - align: 'center', | ||
82 | - width: '260', | ||
83 | - render:function (row){ | ||
84 | - return `<pre>${row.ext}</pre>` | ||
85 | - } | ||
86 | - }, { | ||
87 | - prop: 'message', | ||
88 | - label: '异常信息', | ||
89 | - sortable: true, | ||
90 | - align: 'center', | ||
91 | - width:'500', | ||
92 | - render:function (row){ | ||
93 | - let str=JSON.stringify(JSON.parse(row.message)) | ||
94 | - return `<pre>${str}</pre>` | ||
95 | - } | ||
96 | - | ||
97 | - } | 97 | + }, |
98 | ] | 98 | ] |
99 | }) | 99 | }) |
100 | let resTypeArr = Vue.ref([]); | 100 | let resTypeArr = Vue.ref([]); |
@@ -107,7 +107,7 @@ export default { | @@ -107,7 +107,7 @@ export default { | ||
107 | // getDataList(); | 107 | // getDataList(); |
108 | } | 108 | } |
109 | //获取时间点 转年月日的方法 | 109 | //获取时间点 转年月日的方法 |
110 | - const getDateTime=(newDate)=>{ | 110 | + const getDateTime=(newDate,flag)=>{ |
111 | let dateTime=''; | 111 | let dateTime=''; |
112 | let year=newDate.getFullYear();//获取当前年 | 112 | let year=newDate.getFullYear();//获取当前年 |
113 | let month1=(newDate.getMonth()+1)+''; | 113 | let month1=(newDate.getMonth()+1)+''; |
@@ -116,7 +116,11 @@ export default { | @@ -116,7 +116,11 @@ export default { | ||
116 | let hours=timeFormat(newDate.getHours()+'');//获取当前时 | 116 | let hours=timeFormat(newDate.getHours()+'');//获取当前时 |
117 | let minutes=timeFormat(newDate.getMinutes()+'');//获取当前分 | 117 | let minutes=timeFormat(newDate.getMinutes()+'');//获取当前分 |
118 | let seconds=timeFormat(newDate.getSeconds()+'');//获取当前秒 | 118 | let seconds=timeFormat(newDate.getSeconds()+'');//获取当前秒 |
119 | - dateTime= year+'-'+month+'-'+day;//' '+hours+':'+minutes+':'+seconds; | 119 | + if(flag){ |
120 | + dateTime= year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds; | ||
121 | + }else{ | ||
122 | + dateTime= year+'-'+month+'-'+day; | ||
123 | + } | ||
120 | return dateTime; | 124 | return dateTime; |
121 | } | 125 | } |
122 | //转换个位数为 00 | 126 | //转换个位数为 00 |
@@ -126,17 +130,18 @@ export default { | @@ -126,17 +130,18 @@ export default { | ||
126 | // 获取列表 | 130 | // 获取列表 |
127 | let getDataList = () => { | 131 | let getDataList = () => { |
128 | let nowDate=getDateTime(new Date()); | 132 | let nowDate=getDateTime(new Date()); |
129 | - let dateStr=''; | 133 | + let dateStr='monitor-collector_'; |
130 | let type='collector'; | 134 | let type='collector'; |
131 | if(kpiIdent.value==1){ | 135 | if(kpiIdent.value==1){ |
132 | - dateStr='monitor-performance_'; | ||
133 | - type='performance'; | 136 | + // dateStr='monitor-performance_'; |
137 | + // type='performance'; | ||
134 | }else{ | 138 | }else{ |
135 | - dateStr='monitor-collector_'; | ||
136 | - type='collector'; | 139 | + // dateStr='monitor-collector_'; |
140 | + // type='collector'; | ||
137 | } | 141 | } |
142 | + let date=search.value.dateTime?search.value.dateTime.split(" ")[0]:''; | ||
138 | if(search.value.dateTime){ | 143 | if(search.value.dateTime){ |
139 | - dateStr+=search.value.dateTime; | 144 | + dateStr+=date; |
140 | }else { | 145 | }else { |
141 | dateStr+=nowDate; | 146 | dateStr+=nowDate; |
142 | } | 147 | } |
@@ -148,23 +153,29 @@ export default { | @@ -148,23 +153,29 @@ export default { | ||
148 | type:type, | 153 | type:type, |
149 | sortBy:search.value.sortBy, | 154 | sortBy:search.value.sortBy, |
150 | scopeBy:search.value.scopeBy, | 155 | scopeBy:search.value.scopeBy, |
151 | - param:{} | 156 | + param:{ |
157 | + keyword:{}, | ||
158 | + condition:{} | ||
159 | + } | ||
160 | + } | ||
161 | + if(search.value.dateTime){ | ||
162 | + params.startTime=search.value.dateTime | ||
152 | } | 163 | } |
153 | if(search.value.keyword){ | 164 | if(search.value.keyword){ |
154 | - params.param={ | ||
155 | - 'resName.keyword': search.value.keyword, | ||
156 | - 'host.keyword':search.value.keyword, | 165 | + params.param.keyword={ |
166 | + 'ext.keyword': search.value.keyword, | ||
167 | + 'kpiValue.keyword':search.value.keyword, | ||
157 | 'message.keyword':search.value.keyword, | 168 | 'message.keyword':search.value.keyword, |
158 | } | 169 | } |
159 | } | 170 | } |
160 | if(resId.value){ | 171 | if(resId.value){ |
161 | - params['param']['resId.keyword']=resId.value; | 172 | + params['param']['condition']['resId.keyword']=resId.value; |
162 | } | 173 | } |
163 | if(search.value.kpiId){ | 174 | if(search.value.kpiId){ |
164 | - params['param']['kpiId.keyword']=search.value.kpiId; | 175 | + params['param']['condition']['kpiId.keyword']=search.value.kpiId; |
165 | } | 176 | } |
166 | if(search.value.flag){ | 177 | if(search.value.flag){ |
167 | - params['param']['flag.keyword']=search.value.flag; | 178 | + params['param']['condition']['flag.keyword']=search.value.flag; |
168 | } | 179 | } |
169 | proxy.$http.post(`/api-web/esData/list`, params, function (res) { | 180 | proxy.$http.post(`/api-web/esData/list`, params, function (res) { |
170 | if (res && res.object) { | 181 | if (res && res.object) { |
@@ -173,15 +184,15 @@ export default { | @@ -173,15 +184,15 @@ export default { | ||
173 | dataList.map(item=>{ | 184 | dataList.map(item=>{ |
174 | arr.push(item[0]) | 185 | arr.push(item[0]) |
175 | }) | 186 | }) |
187 | + arr.map(item=>{ | ||
188 | + item.dbTime=getDateTime(new Date(item.dbTime),1) | ||
189 | + }) | ||
176 | tableData.value.dataList = arr; | 190 | tableData.value.dataList = arr; |
177 | tableData.value.count = parseInt(res.object.total); | 191 | tableData.value.count = parseInt(res.object.total); |
178 | } else { | 192 | } else { |
179 | tableData.value.dataList = []; | 193 | tableData.value.dataList = []; |
180 | tableData.value.count = 0; | 194 | tableData.value.count = 0; |
181 | } | 195 | } |
182 | - /* tableData.value.dataList=[{ | ||
183 | - message:dataJSON('{"resId":"4044b7e0f1344aefb80c89018b2a52a5","kpiId":"","indexName":"monitor-collector_2022-04-19","pageNum":1,"pageSize":20,"type":"syslog","sortBy":"dbTime","scopeBy":"dbTimeStr.keyword","resType":"","param":{"resId":"4044b7e0f1344aefb80c89018b2a52a5","kpiId":""}}') | ||
184 | - }]*/ | ||
185 | }); | 196 | }); |
186 | } | 197 | } |
187 | 198 | ||
@@ -242,6 +253,7 @@ export default { | @@ -242,6 +253,7 @@ export default { | ||
242 | kpiIdent.value=item.kpiIdent; | 253 | kpiIdent.value=item.kpiIdent; |
243 | } | 254 | } |
244 | }) | 255 | }) |
256 | + search.value.flag=''; | ||
245 | getFlagData(); | 257 | getFlagData(); |
246 | } | 258 | } |
247 | let detail=Vue.ref({}) | 259 | let detail=Vue.ref({}) |
-
Please register or login to post a comment