状态指标散点图的参数更改，详情页告警表格添加状态指标下探 #1

鲁尚清
Commit 65b1ca259c1f51a7106fece319ad3d33cc246504 1 parent 1212f2e7
Showing 3 changed files with 115 additions and 54 deletions
hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html
hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js
--- a/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
View file @65b1ca2
+++ b/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
View file @65b1ca2
@@ -52,24 +52,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                         arr.map(item=>{
                             statusKpiList.push(item.kpiId)
                         })
-                        /*let idArr=[];
-                        let idStr='';
-                        if(id.indexOf(',')!=-1){
-                            idArr=id.split(',');
-                            idStr=idArr[0];
-                        }else{
-                            idStr=id;
-                        }
-                        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});
                     }
@@ -181,9 +163,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                         }
                         titleStr = valueStr;
                     }
-                  /*  var tips = '<a class="detail_row_menu hide">\n' +
-                        '<img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">\n' +
-                        '</a>'*/
                     var tips = '<a class="detail_row_menu hide" data-statusf='+statusF+' data-id='+v.id+' data-flag='+v.flag+
                         ' data-name='+v.name+' data-kpiname='+v.name+' data-iswarning=1 data-ident=1' +
                         ' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' +
@@ -295,9 +274,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                                 kpiIdList += ar.id + ",";
                             }
                             //start lsq 更改下探图标的属性值 2022-06-08
-                           /* var tips = '<a class="detail_row_menu hide">\n' +
-                                '<img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">\n' +
-                                '</a>'*/
                             var tips = '<a class="detail_row_menu hide" data-statusf='+statusF+' data-id='+v.id+' data-flag='+v.flag+
                                 ' data-name='+v.name+' data-kpiname='+v.name+' data-iswarning=1 data-ident=1' +
                                 ' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' +
@@ -1848,6 +1824,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
          */
         renderTable: function (tableId, page, resId, kpiId, title, flagPrifix, sortBy, order, size,colWidth) {
             var editFlag = localStorage.getItem("editFlag");//是否编辑状态
+            //start lsq 状态信息的状态也增加下探 202-06-08
+            let statusF=false;//是否为状态信息
+            //end lsq 2022-06-08
             if (!size) {
                 size = 5;
             }
@@ -1970,9 +1949,14 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                                         // }
                                         //
                                         // // End Wang 2021/11/18 15:03 查询字典编辑指标，判断编辑状态
-
+                                        //start lsq 判断当前kpiId是否在状态指标数据列表中 2022-06-08
+                                        let status=statusKpiList.indexOf(d[v.id].kpiId);
+                                        if(status!=-1){
+                                            statusF=true;
+                                        }
+                                        //end lsq 2022-06-08
                                         //拼接表空间名称、文件系统名称等等,如果是性能指标或者趋势指标，则可以下探  徐毫杰还原
-                                        if (value.kpiIdent == '1' || value.isWarning == '1') {
+                                        if (value.kpiIdent == '1' || value.isWarning == '1' || status!=-1) {
                                             var chbox = '';
                                             if (editFlag && editFlag == "true" && value.kpiIdent == '1') {
                                                 chbox = '<input lay-filter="kpicheckboxfilter" type="checkbox" lay-skin="primary" name="identKpiCheckbox" ' +
@@ -1980,7 +1964,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                                             }
                                             return chbox + '<a class="link showlinechart_' + tableId + '"  style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' +
                                                 'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' +
-                                                '<a  class="detail_row_menu hide"  data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' +
+                                                '<a  class="detail_row_menu hide"  data-statusf='+statusF+'  data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' +
                                                 'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '"' +
                                                 'data-canca="' + value.canCA + '" data-incaing="' + value.inCAing + '" data-restype="' + resType + '"' +
                                                 '>' +
@@ -2380,6 +2364,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
          * @param resId
          */
         renderActiveAlarms: function (tableId, resId) {
+            //start lsq 状态信息的状态也增加下探 202-06-08
+            let statusF=false;//是否为状态信息
+            //end lsq 2022-06-08
             $('#'+tableId).prev().text('实时告警Top5')
             var alarmlist = table.render({
                 elem: '#' + tableId
@@ -2418,11 +2405,25 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                     , {
                         field: 'kpiName', title: '指标名称', align: 'center', width: '20%',
                         templet: function (d) {
+                            //start lsq 判断当前kpiId是否在状态指标数据列表中 2022-06-08
+                            let status=statusKpiList.indexOf(d.kpiId);
+                            if(status!=-1){
+                                statusF=true;
+                            }
+                            //end lsq 2022-06-08
                             var kpiName = d.kpiName == 'TYPE'?'ERRPT':d.kpiName;
+                            let chbox='';
+                            if(status!=-1){
+                                chbox='<a  class="detail_row_menu hide" data-one="1" data-statusf='+statusF+'  data-isWarning="' + d.isWarning + '" data-ident="' + d.kpiIdent + '" data-trend="' + d.isTrend + '" ' +
+                                    'data-id="' + d.kpiId + '" data-kpiname="' + d.kpiName + '" data-name="' + d.name + '" data-flag="' + d.flag + '"' +
+                                    'data-canca="' + d.canCA + '" data-incaing="' + d.inCAing + '" data-restype="' + d.resType + '"' +
+                                    '>' +
+                                    '<img style="width: 20px;height: 20px;" src="/src/style/img/icon_row_menu.png"></a>';;
+                            }
                             if (d.kpiIdent != 1 && d.isWarning != 1) {
-                                return '<div>' + kpiName + '</div>';
+                                return '<div>' + kpiName + chbox+'</div>';
                             }
-                            return '<div><span data-ident="'+d.kpiIdent+'" data-warning="'+d.isWarning+'" data-resid="' + d.resId + '" data-flag="' + d.flag + '" data-kpi="' + d.kpiId + '"  data-name="' + kpiName + '" data-warn-zbmc="' + d.id + '" class="layui-table-link">' + kpiName + '</span></div>';
+                            return '<div><span data-ident="'+d.kpiIdent+'" data-warning="'+d.isWarning+'" data-resid="' + d.resId + '" data-flag="' + d.flag + '" data-kpi="' + d.kpiId + '"  data-name="' + kpiName + '" data-warn-zbmc="' + d.id + '" class="layui-table-link">' + kpiName +chbox+ '</span></div>';
                         }
                     }
                     , {field: 'updateTime', title: '告警时间', align: 'center', width: '15%'}
@@ -2474,6 +2475,17 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                             '<input type="radio" name="noticeFlag" value="true" title="是">&nbsp;是' +
                             '<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;">&nbsp;否</div> ');
                     });
+                    //start lsq 添加状态指标下探 2022-06-09
+                    $("[lay-id='"+tableId+"']").find(".layui-table-cell").hover(function () {
+                        var $that = $(this)
+                        var $btn = $that.find(".detail_row_menu");
+                        if ($btn.length > 0) {
+                            $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
+                            $btn.removeClass("hide");
+                        }
+                    })
+                    filterSuppressMonitor(resId);
+                    //end lsq 2022-06-09
                 }
             });
             if($('.layui-show').find(".detail-left-panel").length == 0){
@@ -3960,7 +3972,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
     }
     //end lsq 2022-05-19
     //监听过滤压制等事件
-    function filterSuppressMonitor(resId){
+    function filterSuppressMonitor(resId,isStatusMenubox){
         //菜单按钮点击事件
         $("a.detail_row_menu").off("click").on("click",function (e) {
             $("#detail_menubox_id").remove();
@@ -3971,7 +3983,12 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
             var nature = $menu.data('nature');
             //lsq 状态信息无其他下探 2022-06-08
             var statusF = $menu.data('statusf');
+            var one = $menu.data('one');
             var menubox = '<div class="detail_menubox" id="detail_menubox_id" style="color:#666;"><ul>';
+            //lsq 只有状态指标下探的标识
+            if(one==1){
+                menubox+='';
+            }else{
                 if (!nature) {
                     menubox +=
                         '<li type="w"><i class="layui-icon">&#xe667;</i>告警设置</li>' +
@@ -3993,6 +4010,8 @@ 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>';
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html
View file @65b1ca2
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html
View file @65b1ca2
@@ -3,33 +3,38 @@
   <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="dateType=='custom'" :keys="keys" @callbackinflux="getInfluxOption"  @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx>-->
-        </div>
+      <el-col :span="16" class="pie-flex-end" style="justify-content: flex-end;">
         <div class="line-filter pie-line-filter">
           <div class="linechartfrequency line-filter-content">
             <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>-->
+            <el-date-picker
+                    v-model="customDate"
+                    type="date"
+                    placeholder="请选择日期"
+                    size="small"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                    style="margin-left:6px;"
+            />
+            <el-time-picker
+                    v-model="customTime"
+                    is-range
+                    range-separator="-"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    size="small"
+                    format="HH:mm:ss"
+                    value-format="HH:mm:ss"
+                    style="margin-left:6px;"
+            />
+            <el-button style="margin-left:6px;" type="primary" size="small" @click="search"> 查询</el-button>
           </div>
         </div>
-
       </el-col>
-
     </el-row>
     <el-row class="detail-content">
       <el-col :span="24" class="detail_linechart" style="height:550px !important;">
         <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>
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js
View file @65b1ca2
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js
View file @65b1ca2
@@ -12,6 +12,8 @@ export default {
     setup(props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
         let dateType=Vue.ref('oneDay');
+        let customDate=Vue.ref('');//选择日期
+        let customTime=Vue.ref([]);//时间范围
         let optionData=Vue.ref('');
         //series接口无数据时默认数据
         let seriesData = Vue.ref([{
@@ -111,6 +113,8 @@ export default {
         ])
         const changeInterval=(val)=>{
+            customDate.value='';
+            customTime.value=[];
             dateType.value=val;
             if(val=='custom'){
             }else{
@@ -138,8 +142,15 @@ export default {
                 idStr=kpiId;
             }
             kpiName.value = params.name;//指标名称
+            let startTime='';
+            let endTime='';
+            if(customTime.value && customTime.value.length>0){
+                startTime=customTime.value[0];
+                endTime=customTime.value[1];
+            }
             let url = '/api-web/scatter/getByResId?dateType=' + dateType.value +
-                '&resId=' + resourceId + '&kpiId=' + idStr + '&resType=' + resType;
+                '&resId=' + resourceId + '&kpiId=' + idStr + '&resType=' + resType+'&customDate='+customDate.value+
+                '&startTime=' +startTime +'&endTime=' + endTime;
             proxy.$http.get(url, {},function (res){
                 kpiUnit.value = (!res.data || res.data.kpiUnit == null) ? "" : res.data.kpiUnit;
                 if (res.data && res.data.length == 0) {
@@ -251,7 +262,18 @@ export default {
                     boundaryGap: ['10%', '10%'],
                     axisLabel: {
                         interval:59,//label无间隔
-                        formatter: '{value} 时'
+                        // formatter: '{value} 时'
+                        formatter: function (param) {
+                            let newParamsName='';
+                            let arr=param?param.split(":"):[];
+                            if(arr[0]){
+                                let strFirst=arr[0].substring(0,1);
+                                let strSecond=arr[0].substring(1);
+                                strFirst=strFirst.replace('0', "");
+                                newParamsName=strFirst + strSecond+' 时';
+                            }
+                            return newParamsName
+                        }
                     },
                     axisLine: {
@@ -339,16 +361,16 @@ export default {
                 for(let j=0;j<60;j++){
                     if(i<10){
                         if(j<10){
-                            arr1.push('0'+i)//+':0'+j);
+                            arr1.push('0'+i+':0'+j);
                         }else{
-                            arr1.push('0'+i)//+':'+j);
+                            arr1.push('0'+i+':'+j);
                         }
                     }else{
                         if(j<10){
-                            arr1.push(i)//+':0'+j);
+                            arr1.push(i+':0'+j);
                         }else{
-                            arr1.push(i)//+':'+j);
+                            arr1.push(i+':'+j);
                         }
                     }
                 }
@@ -356,6 +378,18 @@ export default {
             }
             YAxisData.value=arr1;
         }
+        //查询自定义时间段的数据
+        let search=()=>{
+            if(!customDate.value){
+                proxy.$global.showMsg('请选择日期','warning');
+                return;
+            }
+            if(!customTime.value || customTime.value.length==0){
+                proxy.$global.showMsg('请选择时间范围','warning');
+                return;
+            }
+            getLineChart();
+        }
         // 挂载完
         Vue.onMounted(() => {
             getYAxisData();
@@ -376,7 +410,10 @@ export default {
             kpiName,
             optionDataInit,
             getLineChart,
-            changeInterval
+            changeInterval,
+            customDate,
+            customTime,
+            search
         }
     }
 }