From c03ead0fe85979c11a6702fbdcc758563fcf0818 Mon Sep 17 00:00:00 2001 From: lushangqing <lushangqing@honggroup.com.cn> Date: Fri, 20 May 2022 18:06:34 +0800 Subject: [PATCH] 【#1163】 连接失败该指标能有图表的展示,可按照天、周、月、年等不同粒度查看不同时间段该指标的状态变化【接口调用完成】 --- hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html | 14 +++++++------- hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js | 345 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 2 files changed, 154 insertions(+), 205 deletions(-) diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html index 7ae0b11..a6c2c16 100644 --- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html +++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html @@ -5,16 +5,16 @@ <el-col :span="8"></el-col> <el-col :span="16" class="pie-flex-end"> <div class="pie-date-range"> - <cm-date-range-influx v-if="interval=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx> +<!-- <cm-date-range-influx v-if="dateType=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx>--> </div> <div class="line-filter pie-line-filter"> <div class="linechartfrequency line-filter-content"> - <div v-if="interval!='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='DAY'}]" data-value="DAY" >一天</div> - <div v-if="interval!='custom'" @click="changeInterval('WEEK')" :class="['line-filter-item', {'active':interval=='WEEK'}]" data-value="WEEK">一周</div> - <div v-if="interval!='custom'" @click="changeInterval('MONTH')" :class="['line-filter-item', {'active':interval=='MONTH'}]" data-value="MONTH">一月</div> - <div v-if="interval!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':interval=='YEAR'}]" data-value="YEAR">一年</div> - <div v-if="interval!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">自定义</div> - <div v-if="interval=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">返 回</div> + <div v-if="dateType!='custom'" @click="changeInterval('oneDay')" :class="['line-filter-item', {'active':dateType=='oneDay'}]" data-value="oneDay" >近24小时</div> + <div v-if="dateType!='custom'" @click="changeInterval('week')" :class="['line-filter-item', {'active':dateType=='week'}]" data-value="week">一周</div> + <div v-if="dateType!='custom'" @click="changeInterval('month')" :class="['line-filter-item', {'active':dateType=='month'}]" data-value="month">一月</div> +<!-- <div v-if="dateType!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':dateType=='YEAR'}]" data-value="YEAR">一年</div>--> +<!-- <div v-if="dateType!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">自定义</div>--> +<!-- <div v-if="dateType=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">返 回</div>--> </div> </div> diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js index 42b8ab4..ad5f6fb 100644 --- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js +++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js @@ -11,154 +11,98 @@ export default { }, setup(props, {attrs, slots, emit}) { const {proxy} = Vue.getCurrentInstance(); - let interval=Vue.ref('DAY'); + let dateType=Vue.ref('oneDay'); let optionData=Vue.ref(''); - 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']); + 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']); let series = Vue.ref([]); let rateData = Vue.ref([]); let kpiUnit = Vue.ref(''); let kpiName = Vue.ref('');//指标名称 - let startTime=Vue.ref(''); - let endTime=Vue.ref(''); let colorsArr=Vue.ref([ - { - start: '#46d6d8', - end: '#2883d0' - }, - { - start: '#facf5b', - end: '#f77623' - }, - { - start: '#C04DD8', - end: '#D81F72' - }, - - ]) - let keys=Vue.ref(''); - let getOptionData=(res)=>{ - let nameArr=[]; - let dataArr=[]; - if(res && res.success){ - if(res.map){ - let resData=res.map; - kpiUnit.value = resData.kpiUnit == null ? "" : resData.kpiUnit; - Object.keys(resData).forEach(function(key){ - Object.keys(resData[key]).sort(function (a, b) { - return a<b?1:-1; - }).forEach(function(time){ - nameArr.unshift(time); - dataArr.unshift(resData[key][time]) - }) - }) - rateData.value = { - names: nameArr, - series: [{ - "data": dataArr, - "name": '平均值' - }], - kpiUnit: kpiUnit.value - } - - } - - }else{ - proxy.$global.showMsg(res.msg,'warning'); + { + start: '#46d6d8', + end: '#2883d0' + }, + { + start: '#facf5b', + end: '#f77623' + }, + { + start: '#C04DD8', + end: '#D81F72' + }, + { + start: '#F5A1EB', + end: '#A04DE2' + }, + { + start: '#F36093', + end: '#FF465C' + }, + { + start: '#C2E74D', + end: '#00AE8B' + }, + { + start: '#3DC3FF', + end: '#01FFFF' + }, + { + start: '#B850ED', + end: '#9062EF' + }, + { + start: '#305be6', + end: '#36a7d3' + }, + { + start: '#FFA500', + end: '#FFEE00' + }, + { + start: '#C4E64C', + end: '#2de078' + }, + { + start: '#30ffb3', + end: '#01FFFF' + }, + { + start: '#FF4488', + end: '#F13EFF' + }, + { + start: '#A64CE2', + end: '#625AE7' + }, + { + start: '#5AEBC7', + end: '#5FC9F8' + }, + { + start: '#FFA500', + end: '#FFEE00' + }, + { + start: '#00AAD6', + end: '#625AE7' + }, + { + start: '#E48BDE', + end: '#FF9262' + }, + { + start: '#B2797B', + end: '#FF4B51' + }, + { + start: '#ffe393', + end: '#feff5b' } - setSeries(); - } - - const getInfluxOption = (res) => { - let str = res.str; - if (res.map && Object.keys(res.map).length == 0) { - let defData = [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']]; - let seriesDefArr = []; - if(str == 'performance'){ - seriesDefArr = [{ - "data": defData, - "name": kpiName.value - }]; - } else { - seriesDefArr = [{ - "data": defData, - "name": "最大" - },{ - "data": defData, - "name": "最小" - },{ - "data": defData, - "name": "平均" - }]; - } - rateData.value = { - 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'], - series: seriesDefArr, - kpiUnit: kpiUnit.value - } - } else { - let names = []; - let max = []; - let min = []; - let avg = []; - let kpiValueArr = []; - let seriesArr = []; - let kpiName = ''; - let kpiUnitVal = ''; - let kpiList = res.data; - - Object.keys(res.map).forEach(function(key){ - res.map[key].forEach(function(item){ - names.push(item.dbTimeStr); - if(str == 'performance'){ - kpiValueArr.push(item.kpiValue); - } else { - max.push(item.maxValue); - min.push(item.minValue); - avg.push(item.avgValue); - } - if(kpiName == '' && kpiUnitVal == ''){ - kpiList.filter(function (v){ - if(v.kpiId == item.kpiId){ - kpiName = v.kpiName; - kpiUnitVal = v.unit; - } - }) - } - }) - }) - - if(str == 'performance'){ - seriesArr = [{ - "data": kpiValueArr, - "name": kpiName - }]; - } else { - seriesArr = [{ - "data": max, - "name": "最大" - },{ - "data": min, - "name": "最小" - },{ - "data": avg, - "name": "平均" - }]; - } - - - kpiUnit.value = kpiUnitVal; - rateData.value = { - names: names, - series: seriesArr, - kpiUnit: kpiUnit.value - }; - } - setSeries(); - } - + ]) const changeInterval=(val)=>{ - interval.value=val; + dateType.value=val; if(val=='custom'){ }else{ getLineChart(); @@ -170,24 +114,21 @@ export default { let params=proxy.$route.query let resourceId=params.resId;//资源ID let kpiId =params.kpiId; //指标ID - let flag =params.flag;//二级资源标识 - let warning =params.warning;//预警指标标识 - let ident =params.ident;//性能指标标识 - let trend =params.trend;//趋势指标标识 - keys.value=resourceId+":"+kpiId+":"+flag; + let resType=params.resType;//资源类型 + kpiName.value = params.name;//指标名称 - let url = '/api-web/detail/performance/line/chart?interval=' + interval.value + '&startTime=' - + startTime.value + '&endTime=' + endTime.value + '&resId=' + resourceId + '&kpiIds=' + kpiId + '&subResId=' + flag; + let url = '/api-web/scatter/getByResId?dateType=' + dateType.value + + '&resId=' + resourceId + '&kpiId=' + kpiId + '&resType=' + resType; proxy.$http.get(url, {},function (res){ kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit; - if (res.data && res.data.names.length == 0) { + if (res.data && res.data.length == 0) { rateData.value = { series: [{ - "data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']], + "data": [['2022-05-03','02:00'],['2022-05-05','03:00'],['2022-05-07','04:00']], // "name": kpiName.value "name": '成功' },{ - "data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']], + "data": [['2022-05-04','08:00'],['2022-05-06','09:00'],['2022-05-07','10:00']], // "name": kpiName.value "name": '失败' }], @@ -200,11 +141,11 @@ export default { },function (error){ rateData.value = { series: [{ - "data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']], + "data": [['2022-05-03','02:00'],['2022-05-05','03:00'],['2022-05-07','04:00']], // "name": kpiName.value "name": '成功' },{ - "data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']], + "data": [['2022-05-04','08:00'],['2022-05-06','09:00'],['2022-05-07','10:00']], // "name": kpiName.value "name": '失败' }], @@ -216,54 +157,42 @@ export default { } const setSeries=()=>{ series.value=[]; - $.each(rateData.value.series,function (i,v) { + $.each(rateData.value,function (i,v) { + if(v.x && v.x.length>0){ + xAxisData.value=v.x; + } series.value.push({ name: v.name, type: 'scatter', - data: v.data, + data: v.date, /* symbolSize: 12, symbol: 'circle',*/ itemStyle: { normal: { - color: colorsArr.value[i].start //图标颜色 + color: colorsArr.value[i]?colorsArr.value[i].start:colorsArr.value[0].start //图标颜色 } }, lineStyle: { normal: { width: 3, //连线粗细 - color: colorsArr.value[i].end //连线颜色 + color: colorsArr.value[i]?colorsArr.value[i].end:colorsArr.value[0].end //连线颜色 } } }) }); - console.log("****",series.value) - optionDataInit(); } const optionDataInit=()=>{ - let COLOR_ALL = [ - '#37A2DA', - '#e06343', - ]; - let pieces = []; - let CLUSTER_COUNT = 2; - let DIENSIION_CLUSTER_INDEX = 1; - for (let i = 0; i < 2; i++) { - pieces.push({ - value: i, - label: 'cluster ' + i, - color: COLOR_ALL[i] - }); - } optionData.value = { tooltip: { trigger: 'axis', formatter:function (param) { // var tips = kpiName.value+" "+param[0].name +"<br/>"; - var tips =param[0].name +"<br/>"; + var tips =kpiName.value +"<br/>"; $.each(param,function (i,v) { // tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>" - tips += v.marker+" "+v.seriesName + ":"+v.value +"</br>" + tips += "<div style='display: flex;align-content: flex-start;'><span>"+v.marker+"</span> <span>"+ + v.seriesName + ":"+v.value +"</span></div>" }); return tips; } @@ -307,11 +236,12 @@ export default { } }, yAxis: { - 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'], + // 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'], + data:YAxisData.value, scale: true, boundaryGap: ['10%', '10%'], axisLabel: { - // interval:0,//label无间隔 + interval:59,//label无间隔 formatter: '{value} 时' }, @@ -330,15 +260,6 @@ export default { } } }, - /* visualMap: { - type: 'piecewise', - top: 'middle', - left: 10, - show:false, - splitNumber: CLUSTER_COUNT, - dimension: DIENSIION_CLUSTER_INDEX, - pieces: pieces - },*/ // x轴拖动 dataZoom: [ { @@ -352,26 +273,30 @@ export default { series:series.value }; } - //时间范围组件回调函数--时间范围 - const callbacktime=(val)=>{ - } - //时间范围组件回调函数--聚合频率 - const callbackrate=(val)=>{ - - } //获取近30天 let xAxisData=Vue.ref([]); const getMonthDay=()=>{ + let m=24; + if(dateType=='oneDay'){ + m=24; + }else if(dateType=='week'){ + m=7; + }else if(dateType=='month'){ + m=30; + } let dateArr=[]; - for(let i=0;i<=30;i++){ + for(let i=0;i<=m;i++){ let myDate=new Date(); - myDate.setDate(myDate.getDate() - i); + if(dateType=='oneDay'){ + myDate.setHours(myDate.getHours()-m) + }else if(dateType=='week' || dateType=='month'){ + myDate.setDate(myDate.getDate() - i); + } let lowData =getDateTime(myDate); //用了上面转年月日的方法 dateArr.unshift(lowData) } xAxisData.value=dateArr; - console.log("2121212",dateArr) } //获取时间点 转年月日的方法 const getDateTime=(newDate)=>{ @@ -393,26 +318,50 @@ export default { let timeFormat =(number)=> { return number.length == 1 ? ('0' + number) : number } + //00:00-23:59数据 + let YAxisData=Vue.ref([]); + let getYAxisData=()=>{ + let arr1=[]; + for(let i=0;i<24;i++){ + for(let j=0;j<60;j++){ + if(i<10){ + if(j<10){ + arr1.push('0'+i+':0'+j); + }else{ + arr1.push('0'+i+':'+j); + } + + }else{ + if(j<10){ + arr1.push(i+':0'+j); + }else{ + arr1.push(i+':'+j); + } + } + } + + } + YAxisData.value=arr1; + } // 挂载完 Vue.onMounted(() => { + getYAxisData(); getMonthDay(); getLineChart(); }) return { xAxisData, + YAxisData, getMonthDay, timeFormat, - interval, + dateType, optionData, names, series, rateData, kpiUnit, kpiName, - keys, optionDataInit, - getOptionData, - getInfluxOption, getLineChart, changeInterval } -- libgit2 0.24.0