monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit c03ead0fe85979c11a6702fbdcc758563fcf0818 1 parent e56fc1ee

【#1163】 连接失败该指标能有图表的展示，可按照天、周、月、年等不同粒度查看不同时间段该指标的状态变化【接口调用完成】

Inline Side-by-side
Showing 2 changed files with 154 additions and 205 deletions
@@ -5,16 +5,16 @@ @@ -5,16 +5,16 @@
5 <el-col :span="8"></el-col> 5 <el-col :span="8"></el-col>
6 <el-col :span="16" class="pie-flex-end"> 6 <el-col :span="16" class="pie-flex-end">
7 <div class="pie-date-range"> 7 <div class="pie-date-range">
8 - <cm-date-range-influx v-if="interval=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx> 8 +<!-- <cm-date-range-influx v-if="dateType=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx>-->
9 </div> 9 </div>
10 <div class="line-filter pie-line-filter"> 10 <div class="line-filter pie-line-filter">
11 <div class="linechartfrequency line-filter-content"> 11 <div class="linechartfrequency line-filter-content">
12 - <div v-if="interval!='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='DAY'}]" data-value="DAY" >一天</div>  
13 - <div v-if="interval!='custom'" @click="changeInterval('WEEK')" :class="['line-filter-item', {'active':interval=='WEEK'}]" data-value="WEEK">一周</div>  
14 - <div v-if="interval!='custom'" @click="changeInterval('MONTH')" :class="['line-filter-item', {'active':interval=='MONTH'}]" data-value="MONTH">一月</div>  
15 - <div v-if="interval!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':interval=='YEAR'}]" data-value="YEAR">一年</div>  
16 - <div v-if="interval!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">自定义</div>  
17 - <div v-if="interval=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">返 回</div> 12 + <div v-if="dateType!='custom'" @click="changeInterval('oneDay')" :class="['line-filter-item', {'active':dateType=='oneDay'}]" data-value="oneDay" >近24小时</div>
  13 + <div v-if="dateType!='custom'" @click="changeInterval('week')" :class="['line-filter-item', {'active':dateType=='week'}]" data-value="week">一周</div>
  14 + <div v-if="dateType!='custom'" @click="changeInterval('month')" :class="['line-filter-item', {'active':dateType=='month'}]" data-value="month">一月</div>
  15 +<!-- <div v-if="dateType!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':dateType=='YEAR'}]" data-value="YEAR">一年</div>-->
  16 +<!-- <div v-if="dateType!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">自定义</div>-->
  17 +<!-- <div v-if="dateType=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">返 回</div>-->
18 </div> 18 </div>
19 </div> 19 </div>
20 20
@@ -11,154 +11,98 @@ export default { @@ -11,154 +11,98 @@ export default {
11 }, 11 },
12 setup(props, {attrs, slots, emit}) { 12 setup(props, {attrs, slots, emit}) {
13 const {proxy} = Vue.getCurrentInstance(); 13 const {proxy} = Vue.getCurrentInstance();
14 - let interval=Vue.ref('DAY'); 14 + let dateType=Vue.ref('oneDay');
15 let optionData=Vue.ref(''); 15 let optionData=Vue.ref('');
16 - let names = Vue.ref(['1', '2', '3', '4', '5', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']); 16 + let names = Vue.ref(['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']);
17 let series = Vue.ref([]); 17 let series = Vue.ref([]);
18 let rateData = Vue.ref([]); 18 let rateData = Vue.ref([]);
19 let kpiUnit = Vue.ref(''); 19 let kpiUnit = Vue.ref('');
20 let kpiName = Vue.ref('');//指标名称 20 let kpiName = Vue.ref('');//指标名称
21 - let startTime=Vue.ref('');  
22 - let endTime=Vue.ref('');  
23 let colorsArr=Vue.ref([ 21 let colorsArr=Vue.ref([
24 - {  
25 - start: '#46d6d8',  
26 - end: '#2883d0'  
27 - },  
28 - {  
29 - start: '#facf5b',  
30 - end: '#f77623'  
31 - },  
32 - {  
33 - start: '#C04DD8',  
34 - end: '#D81F72'  
35 - },  
36 -  
37 - ])  
38 - let keys=Vue.ref('');  
39 - let getOptionData=(res)=>{  
40 - let nameArr=[];  
41 - let dataArr=[];  
42 - if(res && res.success){  
43 - if(res.map){  
44 - let resData=res.map;  
45 - kpiUnit.value = resData.kpiUnit == null ? "" : resData.kpiUnit;  
46 - Object.keys(resData).forEach(function(key){  
47 - Object.keys(resData[key]).sort(function (a, b) {  
48 - return a<b?1:-1;  
49 - }).forEach(function(time){  
50 - nameArr.unshift(time);  
51 - dataArr.unshift(resData[key][time])  
52 - })  
53 - })  
54 - rateData.value = {  
55 - names: nameArr,  
56 - series: [{  
57 - "data": dataArr,  
58 - "name": '平均值'  
59 - }],  
60 - kpiUnit: kpiUnit.value  
61 - }  
62 -  
63 - }  
64 -  
65 - }else{  
66 - proxy.$global.showMsg(res.msg,'warning'); 22 + {
  23 + start: '#46d6d8',
  24 + end: '#2883d0'
  25 + },
  26 + {
  27 + start: '#facf5b',
  28 + end: '#f77623'
  29 + },
  30 + {
  31 + start: '#C04DD8',
  32 + end: '#D81F72'
  33 + },
  34 + {
  35 + start: '#F5A1EB',
  36 + end: '#A04DE2'
  37 + },
  38 + {
  39 + start: '#F36093',
  40 + end: '#FF465C'
  41 + },
  42 + {
  43 + start: '#C2E74D',
  44 + end: '#00AE8B'
  45 + },
  46 + {
  47 + start: '#3DC3FF',
  48 + end: '#01FFFF'
  49 + },
  50 + {
  51 + start: '#B850ED',
  52 + end: '#9062EF'
  53 + },
  54 + {
  55 + start: '#305be6',
  56 + end: '#36a7d3'
  57 + },
  58 + {
  59 + start: '#FFA500',
  60 + end: '#FFEE00'
  61 + },
  62 + {
  63 + start: '#C4E64C',
  64 + end: '#2de078'
  65 + },
  66 + {
  67 + start: '#30ffb3',
  68 + end: '#01FFFF'
  69 + },
  70 + {
  71 + start: '#FF4488',
  72 + end: '#F13EFF'
  73 + },
  74 + {
  75 + start: '#A64CE2',
  76 + end: '#625AE7'
  77 + },
  78 + {
  79 + start: '#5AEBC7',
  80 + end: '#5FC9F8'
  81 + },
  82 + {
  83 + start: '#FFA500',
  84 + end: '#FFEE00'
  85 + },
  86 + {
  87 + start: '#00AAD6',
  88 + end: '#625AE7'
  89 + },
  90 + {
  91 + start: '#E48BDE',
  92 + end: '#FF9262'
  93 + },
  94 + {
  95 + start: '#B2797B',
  96 + end: '#FF4B51'
  97 + },
  98 + {
  99 + start: '#ffe393',
  100 + end: '#feff5b'
67 } 101 }
68 - setSeries();  
69 - }  
70 -  
71 - const getInfluxOption = (res) => {  
72 - let str = res.str;  
73 - if (res.map && Object.keys(res.map).length == 0) {  
74 - let defData = [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']];  
75 - let seriesDefArr = [];  
76 - if(str == 'performance'){  
77 - seriesDefArr = [{  
78 - "data": defData,  
79 - "name": kpiName.value  
80 - }];  
81 - } else {  
82 - seriesDefArr = [{  
83 - "data": defData,  
84 - "name": "最大"  
85 - },{  
86 - "data": defData,  
87 - "name": "最小"  
88 - },{  
89 - "data": defData,  
90 - "name": "平均"  
91 - }];  
92 - }  
93 - rateData.value = {  
94 - names: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],  
95 - series: seriesDefArr,  
96 - kpiUnit: kpiUnit.value  
97 - }  
98 - } else {  
99 - let names = [];  
100 - let max = [];  
101 - let min = [];  
102 - let avg = [];  
103 - let kpiValueArr = [];  
104 - let seriesArr = [];  
105 - let kpiName = '';  
106 - let kpiUnitVal = '';  
107 - let kpiList = res.data;  
108 -  
109 - Object.keys(res.map).forEach(function(key){  
110 - res.map[key].forEach(function(item){  
111 - names.push(item.dbTimeStr);  
112 - if(str == 'performance'){  
113 - kpiValueArr.push(item.kpiValue);  
114 - } else {  
115 - max.push(item.maxValue);  
116 - min.push(item.minValue);  
117 - avg.push(item.avgValue);  
118 - }  
119 - if(kpiName == '' && kpiUnitVal == ''){  
120 - kpiList.filter(function (v){  
121 - if(v.kpiId == item.kpiId){  
122 - kpiName = v.kpiName;  
123 - kpiUnitVal = v.unit;  
124 - }  
125 - })  
126 - }  
127 - })  
128 - })  
129 -  
130 - if(str == 'performance'){  
131 - seriesArr = [{  
132 - "data": kpiValueArr,  
133 - "name": kpiName  
134 - }];  
135 - } else {  
136 - seriesArr = [{  
137 - "data": max,  
138 - "name": "最大"  
139 - },{  
140 - "data": min,  
141 - "name": "最小"  
142 - },{  
143 - "data": avg,  
144 - "name": "平均"  
145 - }];  
146 - }  
147 -  
148 -  
149 - kpiUnit.value = kpiUnitVal;  
150 - rateData.value = {  
151 - names: names,  
152 - series: seriesArr,  
153 - kpiUnit: kpiUnit.value  
154 - };  
155 - }  
156 - setSeries();  
157 - }  
158 - 102 + ])
159 103
160 const changeInterval=(val)=>{ 104 const changeInterval=(val)=>{
161 - interval.value=val; 105 + dateType.value=val;
162 if(val=='custom'){ 106 if(val=='custom'){
163 }else{ 107 }else{
164 getLineChart(); 108 getLineChart();
@@ -170,24 +114,21 @@ export default { @@ -170,24 +114,21 @@ export default {
170 let params=proxy.$route.query 114 let params=proxy.$route.query
171 let resourceId=params.resId;//资源ID 115 let resourceId=params.resId;//资源ID
172 let kpiId =params.kpiId; //指标ID 116 let kpiId =params.kpiId; //指标ID
173 - let flag =params.flag;//二级资源标识  
174 - let warning =params.warning;//预警指标标识  
175 - let ident =params.ident;//性能指标标识  
176 - let trend =params.trend;//趋势指标标识  
177 - keys.value=resourceId+":"+kpiId+":"+flag; 117 + let resType=params.resType;//资源类型
  118 +
178 kpiName.value = params.name;//指标名称 119 kpiName.value = params.name;//指标名称
179 - let url = '/api-web/detail/performance/line/chart?interval=' + interval.value + '&startTime='  
180 - + startTime.value + '&endTime=' + endTime.value + '&resId=' + resourceId + '&kpiIds=' + kpiId + '&subResId=' + flag; 120 + let url = '/api-web/scatter/getByResId?dateType=' + dateType.value +
  121 + '&resId=' + resourceId + '&kpiId=' + kpiId + '&resType=' + resType;
181 proxy.$http.get(url, {},function (res){ 122 proxy.$http.get(url, {},function (res){
182 kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit; 123 kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
183 - if (res.data && res.data.names.length == 0) { 124 + if (res.data && res.data.length == 0) {
184 rateData.value = { 125 rateData.value = {
185 series: [{ 126 series: [{
186 - "data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']], 127 + "data": [['2022-05-03','02:00'],['2022-05-05','03:00'],['2022-05-07','04:00']],
187 // "name": kpiName.value 128 // "name": kpiName.value
188 "name": '成功' 129 "name": '成功'
189 },{ 130 },{
190 - "data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']], 131 + "data": [['2022-05-04','08:00'],['2022-05-06','09:00'],['2022-05-07','10:00']],
191 // "name": kpiName.value 132 // "name": kpiName.value
192 "name": '失败' 133 "name": '失败'
193 }], 134 }],
@@ -200,11 +141,11 @@ export default { @@ -200,11 +141,11 @@ export default {
200 },function (error){ 141 },function (error){
201 rateData.value = { 142 rateData.value = {
202 series: [{ 143 series: [{
203 - "data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']], 144 + "data": [['2022-05-03','02:00'],['2022-05-05','03:00'],['2022-05-07','04:00']],
204 // "name": kpiName.value 145 // "name": kpiName.value
205 "name": '成功' 146 "name": '成功'
206 },{ 147 },{
207 - "data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']], 148 + "data": [['2022-05-04','08:00'],['2022-05-06','09:00'],['2022-05-07','10:00']],
208 // "name": kpiName.value 149 // "name": kpiName.value
209 "name": '失败' 150 "name": '失败'
210 }], 151 }],
@@ -216,54 +157,42 @@ export default { @@ -216,54 +157,42 @@ export default {
216 } 157 }
217 const setSeries=()=>{ 158 const setSeries=()=>{
218 series.value=[]; 159 series.value=[];
219 - $.each(rateData.value.series,function (i,v) { 160 + $.each(rateData.value,function (i,v) {
  161 + if(v.x && v.x.length>0){
  162 + xAxisData.value=v.x;
  163 + }
220 series.value.push({ 164 series.value.push({
221 name: v.name, 165 name: v.name,
222 type: 'scatter', 166 type: 'scatter',
223 - data: v.data, 167 + data: v.date,
224 /* symbolSize: 12, 168 /* symbolSize: 12,
225 symbol: 'circle',*/ 169 symbol: 'circle',*/
226 itemStyle: { 170 itemStyle: {
227 normal: { 171 normal: {
228 - color: colorsArr.value[i].start //图标颜色 172 + color: colorsArr.value[i]?colorsArr.value[i].start:colorsArr.value[0].start //图标颜色
229 } 173 }
230 }, 174 },
231 lineStyle: { 175 lineStyle: {
232 normal: { 176 normal: {
233 width: 3, //连线粗细 177 width: 3, //连线粗细
234 - color: colorsArr.value[i].end //连线颜色 178 + color: colorsArr.value[i]?colorsArr.value[i].end:colorsArr.value[0].end //连线颜色
235 } 179 }
236 } 180 }
237 }) 181 })
238 }); 182 });
239 - console.log("****",series.value)  
240 -  
241 optionDataInit(); 183 optionDataInit();
242 } 184 }
243 const optionDataInit=()=>{ 185 const optionDataInit=()=>{
244 - let COLOR_ALL = [  
245 - '#37A2DA',  
246 - '#e06343',  
247 - ];  
248 - let pieces = [];  
249 - let CLUSTER_COUNT = 2;  
250 - let DIENSIION_CLUSTER_INDEX = 1;  
251 - for (let i = 0; i < 2; i++) {  
252 - pieces.push({  
253 - value: i,  
254 - label: 'cluster ' + i,  
255 - color: COLOR_ALL[i]  
256 - });  
257 - }  
258 optionData.value = { 186 optionData.value = {
259 tooltip: { 187 tooltip: {
260 trigger: 'axis', 188 trigger: 'axis',
261 formatter:function (param) { 189 formatter:function (param) {
262 // var tips = kpiName.value+" "+param[0].name +"<br/>"; 190 // var tips = kpiName.value+" "+param[0].name +"<br/>";
263 - var tips =param[0].name +"<br/>"; 191 + var tips =kpiName.value +"<br/>";
264 $.each(param,function (i,v) { 192 $.each(param,function (i,v) {
265 // tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>" 193 // tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
266 - tips += v.marker+" "+v.seriesName + ":"+v.value +"</br>" 194 + tips += "<div style='display: flex;align-content: flex-start;'><span>"+v.marker+"</span> <span>"+
  195 + v.seriesName + ":"+v.value +"</span></div>"
267 }); 196 });
268 return tips; 197 return tips;
269 } 198 }
@@ -307,11 +236,12 @@ export default { @@ -307,11 +236,12 @@ export default {
307 } 236 }
308 }, 237 },
309 yAxis: { 238 yAxis: {
310 - data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'], 239 + // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
  240 + data:YAxisData.value,
311 scale: true, 241 scale: true,
312 boundaryGap: ['10%', '10%'], 242 boundaryGap: ['10%', '10%'],
313 axisLabel: { 243 axisLabel: {
314 - // interval:0,//label无间隔 244 + interval:59,//label无间隔
315 formatter: '{value} 时' 245 formatter: '{value} 时'
316 246
317 }, 247 },
@@ -330,15 +260,6 @@ export default { @@ -330,15 +260,6 @@ export default {
330 } 260 }
331 } 261 }
332 }, 262 },
333 - /* visualMap: {  
334 - type: 'piecewise',  
335 - top: 'middle',  
336 - left: 10,  
337 - show:false,  
338 - splitNumber: CLUSTER_COUNT,  
339 - dimension: DIENSIION_CLUSTER_INDEX,  
340 - pieces: pieces  
341 - },*/  
342 // x轴拖动 263 // x轴拖动
343 dataZoom: [ 264 dataZoom: [
344 { 265 {
@@ -352,26 +273,30 @@ export default { @@ -352,26 +273,30 @@ export default {
352 series:series.value 273 series:series.value
353 }; 274 };
354 } 275 }
355 - //时间范围组件回调函数--时间范围  
356 - const callbacktime=(val)=>{  
357 276
358 - }  
359 - //时间范围组件回调函数--聚合频率  
360 - const callbackrate=(val)=>{  
361 -  
362 - }  
363 //获取近30天 277 //获取近30天
364 let xAxisData=Vue.ref([]); 278 let xAxisData=Vue.ref([]);
365 const getMonthDay=()=>{ 279 const getMonthDay=()=>{
  280 + let m=24;
  281 + if(dateType=='oneDay'){
  282 + m=24;
  283 + }else if(dateType=='week'){
  284 + m=7;
  285 + }else if(dateType=='month'){
  286 + m=30;
  287 + }
366 let dateArr=[]; 288 let dateArr=[];
367 - for(let i=0;i<=30;i++){ 289 + for(let i=0;i<=m;i++){
368 let myDate=new Date(); 290 let myDate=new Date();
369 - myDate.setDate(myDate.getDate() - i); 291 + if(dateType=='oneDay'){
  292 + myDate.setHours(myDate.getHours()-m)
  293 + }else if(dateType=='week' || dateType=='month'){
  294 + myDate.setDate(myDate.getDate() - i);
  295 + }
370 let lowData =getDateTime(myDate); //用了上面转年月日的方法 296 let lowData =getDateTime(myDate); //用了上面转年月日的方法
371 dateArr.unshift(lowData) 297 dateArr.unshift(lowData)
372 } 298 }
373 xAxisData.value=dateArr; 299 xAxisData.value=dateArr;
374 - console.log("2121212",dateArr)  
375 } 300 }
376 //获取时间点 转年月日的方法 301 //获取时间点 转年月日的方法
377 const getDateTime=(newDate)=>{ 302 const getDateTime=(newDate)=>{
@@ -393,26 +318,50 @@ export default { @@ -393,26 +318,50 @@ export default {
393 let timeFormat =(number)=> { 318 let timeFormat =(number)=> {
394 return number.length == 1 ? ('0' + number) : number 319 return number.length == 1 ? ('0' + number) : number
395 } 320 }
  321 + //00:00-23:59数据
  322 + let YAxisData=Vue.ref([]);
  323 + let getYAxisData=()=>{
  324 + let arr1=[];
  325 + for(let i=0;i<24;i++){
  326 + for(let j=0;j<60;j++){
  327 + if(i<10){
  328 + if(j<10){
  329 + arr1.push('0'+i+':0'+j);
  330 + }else{
  331 + arr1.push('0'+i+':'+j);
  332 + }
  333 +
  334 + }else{
  335 + if(j<10){
  336 + arr1.push(i+':0'+j);
  337 + }else{
  338 + arr1.push(i+':'+j);
  339 + }
  340 + }
  341 + }
  342 +
  343 + }
  344 + YAxisData.value=arr1;
  345 + }
396 // 挂载完 346 // 挂载完
397 Vue.onMounted(() => { 347 Vue.onMounted(() => {
  348 + getYAxisData();
398 getMonthDay(); 349 getMonthDay();
399 getLineChart(); 350 getLineChart();
400 }) 351 })
401 return { 352 return {
402 xAxisData, 353 xAxisData,
  354 + YAxisData,
403 getMonthDay, 355 getMonthDay,
404 timeFormat, 356 timeFormat,
405 - interval, 357 + dateType,
406 optionData, 358 optionData,
407 names, 359 names,
408 series, 360 series,
409 rateData, 361 rateData,
410 kpiUnit, 362 kpiUnit,
411 kpiName, 363 kpiName,
412 - keys,  
413 optionDataInit, 364 optionDataInit,
414 - getOptionData,  
415 - getInfluxOption,  
416 getLineChart, 365 getLineChart,
417 changeInterval 366 changeInterval
418 } 367 }