Authored by 鲁尚清

#872 ping详情页调整-表格字段顺序,title名称,图标更换 #2

@@ -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">&#XE516;</i></a>`; 3211 title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont">&#XE516;</i></a>`;
3212 title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`; 3212 title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</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">&#XE517;</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">&#XE517;</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">&#XE516;</i></a>`; 3236 title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont">&#XE516;</i></a>`;
3237 title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`; 3237 title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</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">&#XE517;</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">&#XE517;</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,//开启遮罩层
@@ -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({})