新增连接状态按钮及散点图静态页面

@@ -3793,7 +3793,42 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
             }
         });
     }
+    //start 连接状态 2022-05-19
+    function connectStatus(param,title){
+        var obj = {
+            resId: param.resId,
+            kpiId: param.kpiId,
+            flag: param.flag,
+            subFlag: param.subFlag
+        }
+
 
+        let urlParams='';
+        for(let key in param){
+            if(param[key]){
+                urlParams+=key+'='+param[key]+'&'
+            }
+        }
+        urlParams=urlParams.substr(0,urlParams.length-1)
+        //End LSQ 2022/1/17
+        if (!title) {
+            title = "状态指标";
+        }
+        view('commonViewModel').render("template/detail/line").then(function (res) {
+            layer.open({
+                title: [title, 'font-size:18px;'],
+                type: 2,
+                area: ['80%', '90%'],
+                shadeClose: true,//开启遮罩层
+                id: 'kpi_line_chart_div',
+                content: ['/vue3/index.html#/vue3/connectScatter?'+urlParams, 'no'],
+                cancel: function () {
+                    clearTimeout(obj.lineTimer);
+                }
+            });
+        });
+    }
+    //end lsq 2022-05-19
     //监听过滤压制等事件
     function filterSuppressMonitor(resId){
         //菜单按钮点击事件
@@ -3825,6 +3860,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                     menubox += '<li type="ca-add"><i class="layui-icon">&#xe64c;</i>纳入容量预测</li>';
                 }
             }
+            //lsq 增加连接状态指标 2022-05-19
+            menubox += '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>';
+
             menubox += '</ul></div>';
             var cX = e.clientX + 10;
             var cY = e.clientY - 10;
@@ -3893,6 +3931,11 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                     case 'ca-add':
                         caAdd(params, $menu);
                         break;
+                    //lsq 连接状态指标事件2022-05-19
+                    case 'link-status-kpi':
+                        connectStatus(params);
+                        break;
+
                 }
 
             });

@@ -78,6 +78,11 @@ const routes = [{
 		name: 'ajConfigView',
 		component: () => myImport('views/ajConfig/view/index')
 	},
+	{
+		path: '/vue3/connectScatter',
+		name: 'connectScatter',
+		component: () => myImport('views/connectScatter/index')
+	},
 ];
 
 // hash模式： createWebHashHistory

+<div class="pie-detail-line-container" >
+
+  <div class="pie-detail-content">
+    <el-row class="detail-content-title">
+      <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>
+        </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>
+        </div>
+
+      </el-col>
+
+    </el-row>
+    <el-row class="detail-content">
+      <el-col :span="24" class="detail_linechart">
+        <LineChart :optionData="optionData" v-if="optionData"></LineChart>
+
+<!--        <div class="detail_linechart" id="indentKpiLineChart"></div>-->
+        <!--      <div class="detail_linechart" id="warningKpiLineChart" style="margin-top:35px;"></div>-->
+        <!--      <div class="detail_linechart" id="line-tingyun-trendKpiLineChart" style="margin-top:35px;"></div>-->
+
+
+      </el-col>
+    </el-row>
+  </div>
+
+</div>
+

+export default {
+    name: 'pieDetailLine',
+    template: '',
+    components:{
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/page/components/lineChart/index')
+        )
+    },
+    data() {
+        return{}
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        let interval=Vue.ref('DAY');
+        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 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');
+            }
+            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;
+            if(val=='custom'){
+            }else{
+                getLineChart();
+
+            }
+        }
+
+        const getLineChart=()=>{
+            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;
+            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;
+            proxy.$http.get(url, {},function (res){
+                kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
+                if (res.data && res.data.names.length == 0) {
+                    rateData.value = {
+                        series: [{
+                            "data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']],
+                            // "name": kpiName.value
+                            "name": '成功'
+                        },{
+                            "data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']],
+                            // "name": kpiName.value
+                            "name": '失败'
+                        }],
+                        kpiUnit: kpiUnit.value
+                    }
+                } else {
+                    rateData.value = res.data;
+                }
+                setSeries();
+            },function (error){
+                rateData.value = {
+                    series: [{
+                        "data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']],
+                        // "name": kpiName.value
+                        "name": '成功'
+                    },{
+                        "data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']],
+                        // "name": kpiName.value
+                        "name": '失败'
+                    }],
+                    kpiUnit: kpiUnit.value
+                }
+                setSeries();
+            })
+
+        }
+        const setSeries=()=>{
+            series.value=[];
+            $.each(rateData.value.series,function (i,v) {
+                series.value.push({
+                    name: v.name,
+                    type: 'scatter',
+                    data: v.data,
+                   /* symbolSize: 12,
+                    symbol: 'circle',*/
+                    itemStyle: {
+                        normal: {
+                            color:  colorsArr.value[i].start //图标颜色
+                        }
+                    },
+                    lineStyle: {
+                        normal: {
+                            width: 3,  //连线粗细
+                            color: colorsArr.value[i].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/>";
+                        $.each(param,function (i,v) {
+                            // tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
+                            tips += v.marker+" "+v.seriesName + ":"+v.value +"</br>"
+                        });
+                        return tips;
+                    }
+                },
+                legend: {
+                    show: true
+                },
+                grid: {
+                    top: '10%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '15%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {
+                            show: false
+                        }
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    // data: rateData.value.names,
+                    data: xAxisData.value,
+                    axisLine: {
+                        lineStyle: {
+                            color: '#c9c9c9'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#232425',
+                        showMaxLabel: true
+                    },
+                    splitArea: {
+                        show: true,
+                        areaStyle: {
+                            color: ['rgba(200,200,200,0.1)', 'transparent'
+                            ]
+                        }
+                    }
+                },
+                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'],
+                    scale: true,
+                    boundaryGap: ['10%', '10%'],
+                    axisLabel: {
+                        // interval:0,//label无间隔
+                        formatter: '{value} 时'
+
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#232425'
+                        },
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: ['#ccc']
+                        }
+                    }
+                },
+            /*    visualMap: {
+                    type: 'piecewise',
+                    top: 'middle',
+                    left: 10,
+                    show:false,
+                    splitNumber: CLUSTER_COUNT,
+                    dimension: DIENSIION_CLUSTER_INDEX,
+                    pieces: pieces
+                },*/
+                // x轴拖动
+                dataZoom: [
+                    {
+                        type: "slider",
+                        realtime: true, //拖动滚动条时是否动态的更新图表数据
+                        height: 25, //滚动条高度
+                        start: 40, //滚动条开始位置（共100等份）
+                        end: 65 //结束位置（共100等份）
+                    }
+                ],
+                series:series.value
+            };
+        }
+        //时间范围组件回调函数--时间范围
+        const callbacktime=(val)=>{
+
+        }
+        //时间范围组件回调函数--聚合频率
+        const callbackrate=(val)=>{
+
+        }
+        //获取近30天
+        let xAxisData=Vue.ref([]);
+        const getMonthDay=()=>{
+            let dateArr=[];
+            for(let i=0;i<=30;i++){
+                let myDate=new Date();
+                myDate.setDate(myDate.getDate() - i);
+                let lowData =getDateTime(myDate);   //用了上面转年月日的方法
+                dateArr.unshift(lowData)
+            }
+            xAxisData.value=dateArr;
+            console.log("2121212",dateArr)
+        }
+        //获取时间点 转年月日的方法
+        const getDateTime=(newDate)=>{
+            let dateTime='';
+            let year=newDate.getFullYear();//获取当前年
+            let month1=(newDate.getMonth()+1)+'';
+            let month=timeFormat(month1);//获取当前月
+            let day=timeFormat(newDate.getDate());//获取当前日
+            let hours=timeFormat(newDate.getHours()+'');//获取当前时
+            let minutes=timeFormat(newDate.getMinutes()+'');//获取当前分
+            let seconds=timeFormat(newDate.getSeconds()+'');//获取当前秒
+            if(day < 10){
+                day = '0'+day;
+            }
+            dateTime= year+'-'+month+'-'+day;//+' '+hours+':'+minutes+':'+seconds;
+            return dateTime;
+        }
+        //转换个位数为 00
+        let timeFormat =(number)=> {
+            return number.length == 1 ? ('0' + number) : number
+        }
+        // 挂载完
+        Vue.onMounted(() => {
+            getMonthDay();
+            getLineChart();
+        })
+        return {
+            xAxisData,
+            getMonthDay,
+            timeFormat,
+            interval,
+            optionData,
+            names,
+            series,
+            rateData,
+            kpiUnit,
+            kpiName,
+            keys,
+            optionDataInit,
+            getOptionData,
+            getInfluxOption,
+            getLineChart,
+            changeInterval
+        }
+    }
+}