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