monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit ba04f067ee20e883c67300fff83729a63e6cdecf 1 parent 6552508f

搜索

Inline Side-by-side
Showing 3 changed files with 85 additions and 20 deletions
@@ -38,7 +38,7 @@ @@ -38,7 +38,7 @@
38 </cm-dialog> 38 </cm-dialog>
39 39
40 <!-- 资源明细 --> 40 <!-- 资源明细 -->
41 - <cm-dialog top="3vh" title="资源明细" width="900px" :showDialogVisible="resListDialog" 41 + <cm-dialog top="3vh" title="资源明细" width="80%" :showDialogVisible="resListDialog"
42 @hidedialog="showResListDialog" :showFooter="false"> 42 @hidedialog="showResListDialog" :showFooter="false">
43 <template v-slot> 43 <template v-slot>
44 <div> 44 <div>
@@ -33,16 +33,6 @@ const lineDetail = (props) => { @@ -33,16 +33,6 @@ const lineDetail = (props) => {
33 33
34 res.data.forEach(function (v){ 34 res.data.forEach(function (v){
35 let time = v.collTime; 35 let time = v.collTime;
36 - // if(time && time.indexOf(' ') != -1){  
37 - // let timeArr = time.split(" ")  
38 - // if(timeArr && timeArr.length > 1 && timeArr[1].indexOf(':')){  
39 - // let ttArr = timeArr[1].split(':')  
40 - // if(ttArr && ttArr.length > 1){  
41 - // delete ttArr[0];  
42 - // time = ttArr.join(':');  
43 - // }  
44 - // }  
45 - // }  
46 let val = v.kpiValue; 36 let val = v.kpiValue;
47 arr.push([time,val ]); 37 arr.push([time,val ]);
48 }) 38 })
@@ -155,8 +145,54 @@ const alarmDialog = () => { @@ -155,8 +145,54 @@ const alarmDialog = () => {
155 */ 145 */
156 const colTypes = (props, list,openLine,openAlarmDialog) => { 146 const colTypes = (props, list,openLine,openAlarmDialog) => {
157 147
158 - // 指标  
159 - let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate'] 148 + // 展示折线图指标
  149 + let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate'];
  150 +
  151 + /**
  152 + * 拨测
  153 + * @param row
  154 + * @returns {`<span style="${string}">${string}</span>`}
  155 + */
  156 + let point_succ = (val) =>{
  157 + let css = "text-decoration: underline;";
  158 + if(val && val == 0){
  159 + css += "color: red;";
  160 + } else {
  161 + css += "color: blue;";
  162 + }
  163 + return `<span style="${css}">${val}</span>`;
  164 + }
  165 +
  166 + /**
  167 + * NPM 成功率
  168 + * @param row
  169 + * @returns {`<span style="${string}">${string}</span>`}
  170 + */
  171 + let success_rate = (val) =>{
  172 + let css = "text-decoration: underline;";
  173 + if(val && val != 100){
  174 + css += "color: red;";
  175 + } else {
  176 + css += "color: blue;";
  177 + }
  178 + return `<span style="${css}">${val}</span>`;
  179 + }
  180 +
  181 + /**
  182 + * NPM 响应率
  183 + * @param row
  184 + * @returns {`<span style="${string}">${string}</span>`}
  185 + */
  186 + let response_rate = (val) =>{
  187 + let css = "text-decoration: underline;";
  188 + if(val && val != 100){
  189 + css += "color: red;";
  190 + } else {
  191 + css += "color: blue;";
  192 + }
  193 + return `<span style="${css}">${val}</span>`;
  194 + }
  195 +
160 196
161 let getItem = (v) => { 197 let getItem = (v) => {
162 let item = {}; 198 let item = {};
@@ -191,19 +227,33 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -191,19 +227,33 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
191 item[v.kpiId] = v.kpiValue; 227 item[v.kpiId] = v.kpiValue;
192 item.kpiName = v.kpiName; 228 item.kpiName = v.kpiName;
193 if (index == 0) { 229 if (index == 0) {
  230 + let prop = v.kpiId;
194 let colInfo = { 231 let colInfo = {
195 - prop: v.kpiId, 232 + prop: prop,
196 label: v.kpiName, 233 label: v.kpiName,
197 width: 50 234 width: 50
198 }; 235 };
199 236
200 - if (lineKpiIds.indexOf(v.kpiId) != -1) { 237 + if (lineKpiIds.indexOf(prop) != -1) {
201 colInfo['click'] = function (row) { 238 colInfo['click'] = function (row) {
  239 + row.kpiId = prop;
  240 + row.flag = v.flag;
  241 + debugger
202 openLine(row); 242 openLine(row);
203 } 243 }
  244 +
204 colInfo['render'] = function (row) { 245 colInfo['render'] = function (row) {
205 - return `<span style="text-decoration: underline;color: blue;">${row[v.kpiId]}</span>` 246 + try {
  247 + let html = eval(prop + '(' + row[prop] + ')');
  248 + if(html){
  249 + return html;
  250 + }
  251 + }catch (e){
  252 +
  253 + }
  254 + return `<span style="text-decoration: underline;color: blue;">${row[v.kpiId]}</span>`;;
206 } 255 }
  256 +
207 } 257 }
208 258
209 col.push(colInfo) 259 col.push(colInfo)
@@ -226,20 +276,32 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -226,20 +276,32 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
226 let dataTypeByFlag = (data) => { 276 let dataTypeByFlag = (data) => {
227 let flags = [{ 277 let flags = [{
228 prop: "count", 278 prop: "count",
  279 + width:80,
229 label: "检测项目数", 280 label: "检测项目数",
230 }, { 281 }, {
231 prop: "normal", 282 prop: "normal",
  283 + width:80,
232 label: "正常数" 284 label: "正常数"
233 }, { 285 }, {
234 prop: "abnormal", 286 prop: "abnormal",
  287 + width:80,
235 label: "异常出", 288 label: "异常出",
236 }, { 289 }, {
237 prop: "alarm", 290 prop: "alarm",
  291 + width:80,
238 label: "告警", 292 label: "告警",
239 click: function (row) { 293 click: function (row) {
240 openAlarmDialog(row); 294 openAlarmDialog(row);
241 }, 295 },
242 render: function (row) { 296 render: function (row) {
  297 + try {
  298 + let html = eval(prop + '(' + row[prop] + ')');
  299 + if(html){
  300 + return html;
  301 + }
  302 + }catch (e){
  303 +
  304 + }
243 return `<span style="text-decoration: underline;color: blue;">${row.alarm}</span>` 305 return `<span style="text-decoration: underline;color: blue;">${row.alarm}</span>`
244 } 306 }
245 }]; 307 }];
@@ -248,7 +310,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -248,7 +310,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
248 let col = [{ 310 let col = [{
249 prop: 'kpiName', 311 prop: 'kpiName',
250 label: props.itemName, 312 label: props.itemName,
251 - width: 100 313 + width: 150
252 }]; 314 }];
253 315
254 flags.forEach(function (item) { 316 flags.forEach(function (item) {
@@ -272,7 +334,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -272,7 +334,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
272 return {dataTypeByKpi, dataTypeByFlag} 334 return {dataTypeByKpi, dataTypeByFlag}
273 } 335 }
274 336
275 -const resDetail = (props) => { 337 +const resDetail = (props,openLine) => {
276 const {proxy} = Vue.getCurrentInstance(); 338 const {proxy} = Vue.getCurrentInstance();
277 let resListDialog = Vue.ref(false); 339 let resListDialog = Vue.ref(false);
278 let resList = Vue.ref({ 340 let resList = Vue.ref({
@@ -288,6 +350,9 @@ const resDetail = (props) => { @@ -288,6 +350,9 @@ const resDetail = (props) => {
288 }, { 350 }, {
289 prop: "kpiValue", 351 prop: "kpiValue",
290 label: "指标值", 352 label: "指标值",
  353 + click:function (row){
  354 + openLine(row);
  355 + }
291 }, { 356 }, {
292 prop: "collTime", 357 prop: "collTime",
293 label: "采集时间", 358 label: "采集时间",
@@ -404,7 +469,7 @@ export default { @@ -404,7 +469,7 @@ export default {
404 getResListPage, 469 getResListPage,
405 loadPage, 470 loadPage,
406 handleClick 471 handleClick
407 - } = resDetail(props); 472 + } = resDetail(props,openLine);
408 473
409 const { 474 const {
410 showAlarmDialog, 475 showAlarmDialog,
@@ -69,7 +69,7 @@ const faultDetail = () => { @@ -69,7 +69,7 @@ const faultDetail = () => {
69 // 设置标题 69 // 设置标题
70 faultDetailDialogTitle.value = `${row.faultBody}诊断报告`; 70 faultDetailDialogTitle.value = `${row.faultBody}诊断报告`;
71 // 当前故障编号 71 // 当前故障编号
72 - faultDetailDetailInfo.value.faultNo = row.faultNo; 72 + faultDetailDetailInfo.value.faultNo = 'GZ202112160007';//row.faultNo;
73 } 73 }
74 74
75 75