Merge branch 'master-v32-lushangqing' into 'master'

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



See merge request !589

@@ -3861,7 +3861,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                 }
             }
             //lsq 增加连接状态指标 2022-05-19
-            menubox += '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>';
+            // menubox += '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>';
 
             menubox += '</ul></div>';
             var cX = e.clientX + 10;
@@ -3882,63 +3882,106 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
             if (flag) {
                 flag = flag.replace(/^\s+|\s+$/g, "");
             }
-
-            //菜单点击事件
-            $("#detail_menubox_id ul>li").unbind("click").on("click",function (){
-                var type = $(this).attr("type");
-                var params = {
-                    resId: resId,
-                    kpiId: id,
-                    flag: flag,
-                    warning:isWarning,
-                    ident:ident,
-                    trend:trend,
-                    unit:unit,
-                    // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
-                    // name:kpiName + " " + name,
-                    name:kpiName,
-                    // End Wang 2022/2/8 14:29
-                    subFlag: subFlag,
-                    resType: resType
-                };
-                switch (type){
-                    case 'w':
-                        setKPIAlarmConfig(params);
-                        break;
-                    case 's':
-                        setKpiFilter(params,true);
-                        break;
-                    case 'm':
-                        setKpiFilter(params,false);
-                        break;
-                    case 't':
-                        //性能趋势
-                        if ($.inArray('back:details:trend', checkList) == -1) {
-                            layer.msg('暂无权限!', {icon: 7, time: 3000});
+            //start lsq 根据kpiid获取是否是指标状态 2022-05-23
+            admin.req({
+                url: common.domainName + '/api-web/manage/kpi/page?' +
+                    'isWarning=&isTrend=&kpiLevel=&ignoreCnt=&startTime=&endTime=&kpiPower=',
+                data: {
+                    page:1,limit:99999,
+                    kpiName: '',resType: '',kpiIdent: 2,kpiCategory: '',
+                    kpiDataType:'',kpiUnit:'',isWarning:'',isTrend:'',
+                    kpiLevel:'',ignoreCnt:'',startTime:'',endTime:'',kpiPower:''
+                },
+                success(response) {
+                    let arr=[];
+                    if (response && response.success) {
+                        arr=response.data;
+                        let idArr=[];
+                        let idStr='';
+                        if(id.indexOf(',')!=-1){
+                            idArr=id.split(',');
+                            idStr=idArr[0];
                         }else{
-                            // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
-                            // common.openLineChart(kpiName + " " + name, params);
-                            common.openLineChart(kpiName, params);
-                            // End Wang 2022/2/8 14:29
+                            idStr=id;
                         }
-                        break;
-                    case 'n':
-                        setKpiPressTimes(params);
-                        break;
-                    case 'ca-cancel':
-                        caCancel(params, $menu);
-                        break;
-                    case 'ca-add':
-                        caAdd(params, $menu);
-                        break;
-                    //lsq 连接状态指标事件2022-05-19
-                    case 'link-status-kpi':
-                        connectStatus(params);
-                        break;
-
+                        let isKpi=false;
+                        arr.map(item=>{
+                            if(idStr==item.kpiId){
+                                isKpi=true;
+                            }
+                        })
+                        if(isKpi){
+                            let menuboxStr = '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>';
+                            $("#detail_menubox_id ul").append(menuboxStr)
+                        }
+                    } else {
+                        // layer.msg('状态指标获取失败!', {icon: 2});
+                    }
+                },
+                error(){
+                    // layer.msg('状态指标获取失败!', {icon: 2});
                 }
-
             });
+            setTimeout(function (){
+            //end lsq 2022-05-23
+                //菜单点击事件
+                $("#detail_menubox_id ul>li").unbind("click").on("click",function (){
+                    var type = $(this).attr("type");
+                    var params = {
+                        resId: resId,
+                        kpiId: id,
+                        flag: flag,
+                        warning:isWarning,
+                        ident:ident,
+                        trend:trend,
+                        unit:unit,
+                        // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
+                        // name:kpiName + " " + name,
+                        name:kpiName,
+                        // End Wang 2022/2/8 14:29
+                        subFlag: subFlag,
+                        resType: resType
+                    };
+                    switch (type){
+                        case 'w':
+                            setKPIAlarmConfig(params);
+                            break;
+                        case 's':
+                            setKpiFilter(params,true);
+                            break;
+                        case 'm':
+                            setKpiFilter(params,false);
+                            break;
+                        case 't':
+                            //性能趋势
+                            if ($.inArray('back:details:trend', checkList) == -1) {
+                                layer.msg('暂无权限!', {icon: 7, time: 3000});
+                            }else{
+                                // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
+                                // common.openLineChart(kpiName + " " + name, params);
+                                common.openLineChart(kpiName, params);
+                                // End Wang 2022/2/8 14:29
+                            }
+                            break;
+                        case 'n':
+                            setKpiPressTimes(params);
+                            break;
+                        case 'ca-cancel':
+                            caCancel(params, $menu);
+                            break;
+                        case 'ca-add':
+                            caAdd(params, $menu);
+                            break;
+                        //lsq 连接状态指标事件2022-05-19
+                        case 'link-status-kpi':
+                            connectStatus(params);
+                            break;
+
+                    }
+
+                });
+            },300)
+
         });
         //点击空白处隐藏弹出菜单
         $(document).click(function(event){

@@ -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>
 

@@ -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,32 @@ 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;//资源类型
+            let idArr=[];
+            let idStr='';
+            if(kpiId.indexOf(',')!=-1){
+                idArr=kpiId.split(',');
+                if(idArr.length<=2){
+                    idStr=idArr[0];
+                }else{
+                    idStr=kpiId;
+                }
+            }else{
+                idStr=kpiId;
+            }
             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=' + idStr + '&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 +152,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 +168,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 +247,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 +271,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 +284,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 +329,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
         }