monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 65b1ca259c1f51a7106fece319ad3d33cc246504 1 parent 1212f2e7

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

Inline Side-by-side
Showing 3 changed files with 133 additions and 72 deletions
@@ -52,24 +52,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -52,24 +52,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
52 arr.map(item=>{ 52 arr.map(item=>{
53 statusKpiList.push(item.kpiId) 53 statusKpiList.push(item.kpiId)
54 }) 54 })
55 - /*let idArr=[];  
56 - let idStr='';  
57 - if(id.indexOf(',')!=-1){  
58 - idArr=id.split(',');  
59 - idStr=idArr[0];  
60 - }else{  
61 - idStr=id;  
62 - }  
63 - let isKpi=false;  
64 - arr.map(item=>{  
65 - if(idStr==item.kpiId){  
66 - isKpi=true;  
67 - }  
68 - })  
69 - if(isKpi){  
70 - let menuboxStr = '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>';  
71 - $("#detail_menubox_id ul").append(menuboxStr)  
72 - }*/  
73 } else { 55 } else {
74 // layer.msg('状态指标获取失败!', {icon: 2}); 56 // layer.msg('状态指标获取失败!', {icon: 2});
75 } 57 }
@@ -181,9 +163,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -181,9 +163,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
181 } 163 }
182 titleStr = valueStr; 164 titleStr = valueStr;
183 } 165 }
184 - /* var tips = '<a class="detail_row_menu hide">\n' +  
185 - '<img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">\n' +  
186 - '</a>'*/  
187 var tips = '<a class="detail_row_menu hide" data-statusf='+statusF+' data-id='+v.id+' data-flag='+v.flag+ 166 var tips = '<a class="detail_row_menu hide" data-statusf='+statusF+' data-id='+v.id+' data-flag='+v.flag+
188 ' data-name='+v.name+' data-kpiname='+v.name+' data-iswarning=1 data-ident=1' + 167 ' data-name='+v.name+' data-kpiname='+v.name+' data-iswarning=1 data-ident=1' +
189 ' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' + 168 ' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' +
@@ -295,9 +274,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -295,9 +274,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
295 kpiIdList += ar.id + ","; 274 kpiIdList += ar.id + ",";
296 } 275 }
297 //start lsq 更改下探图标的属性值 2022-06-08 276 //start lsq 更改下探图标的属性值 2022-06-08
298 - /* var tips = '<a class="detail_row_menu hide">\n' +  
299 - '<img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">\n' +  
300 - '</a>'*/  
301 var tips = '<a class="detail_row_menu hide" data-statusf='+statusF+' data-id='+v.id+' data-flag='+v.flag+ 277 var tips = '<a class="detail_row_menu hide" data-statusf='+statusF+' data-id='+v.id+' data-flag='+v.flag+
302 ' data-name='+v.name+' data-kpiname='+v.name+' data-iswarning=1 data-ident=1' + 278 ' data-name='+v.name+' data-kpiname='+v.name+' data-iswarning=1 data-ident=1' +
303 ' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' + 279 ' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' +
@@ -1848,6 +1824,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -1848,6 +1824,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
1848 */ 1824 */
1849 renderTable: function (tableId, page, resId, kpiId, title, flagPrifix, sortBy, order, size,colWidth) { 1825 renderTable: function (tableId, page, resId, kpiId, title, flagPrifix, sortBy, order, size,colWidth) {
1850 var editFlag = localStorage.getItem("editFlag");//是否编辑状态 1826 var editFlag = localStorage.getItem("editFlag");//是否编辑状态
  1827 + //start lsq 状态信息的状态也增加下探 202-06-08
  1828 + let statusF=false;//是否为状态信息
  1829 + //end lsq 2022-06-08
1851 if (!size) { 1830 if (!size) {
1852 size = 5; 1831 size = 5;
1853 } 1832 }
@@ -1970,9 +1949,14 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -1970,9 +1949,14 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
1970 // } 1949 // }
1971 // 1950 //
1972 // // End Wang 2021/11/18 15:03 查询字典编辑指标，判断编辑状态 1951 // // End Wang 2021/11/18 15:03 查询字典编辑指标，判断编辑状态
1973 - 1952 + //start lsq 判断当前kpiId是否在状态指标数据列表中 2022-06-08
  1953 + let status=statusKpiList.indexOf(d[v.id].kpiId);
  1954 + if(status!=-1){
  1955 + statusF=true;
  1956 + }
  1957 + //end lsq 2022-06-08
1974 //拼接表空间名称、文件系统名称等等,如果是性能指标或者趋势指标，则可以下探 徐毫杰还原 1958 //拼接表空间名称、文件系统名称等等,如果是性能指标或者趋势指标，则可以下探 徐毫杰还原
1975 - if (value.kpiIdent == '1' || value.isWarning == '1') { 1959 + if (value.kpiIdent == '1' || value.isWarning == '1' || status!=-1) {
1976 var chbox = ''; 1960 var chbox = '';
1977 if (editFlag && editFlag == "true" && value.kpiIdent == '1') { 1961 if (editFlag && editFlag == "true" && value.kpiIdent == '1') {
1978 chbox = '<input lay-filter="kpicheckboxfilter" type="checkbox" lay-skin="primary" name="identKpiCheckbox" ' + 1962 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 @@ -1980,7 +1964,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
1980 } 1964 }
1981 return chbox + '<a class="link showlinechart_' + tableId + '" style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' + 1965 return chbox + '<a class="link showlinechart_' + tableId + '" style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' +
1982 'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' + 1966 'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' +
1983 - '<a class="detail_row_menu hide" data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' + 1967 + '<a class="detail_row_menu hide" data-statusf='+statusF+' data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' +
1984 'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '"' + 1968 'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '"' +
1985 'data-canca="' + value.canCA + '" data-incaing="' + value.inCAing + '" data-restype="' + resType + '"' + 1969 'data-canca="' + value.canCA + '" data-incaing="' + value.inCAing + '" data-restype="' + resType + '"' +
1986 '>' + 1970 '>' +
@@ -2380,6 +2364,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -2380,6 +2364,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
2380 * @param resId 2364 * @param resId
2381 */ 2365 */
2382 renderActiveAlarms: function (tableId, resId) { 2366 renderActiveAlarms: function (tableId, resId) {
  2367 + //start lsq 状态信息的状态也增加下探 202-06-08
  2368 + let statusF=false;//是否为状态信息
  2369 + //end lsq 2022-06-08
2383 $('#'+tableId).prev().text('实时告警Top5') 2370 $('#'+tableId).prev().text('实时告警Top5')
2384 var alarmlist = table.render({ 2371 var alarmlist = table.render({
2385 elem: '#' + tableId 2372 elem: '#' + tableId
@@ -2418,11 +2405,25 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -2418,11 +2405,25 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
2418 , { 2405 , {
2419 field: 'kpiName', title: '指标名称', align: 'center', width: '20%', 2406 field: 'kpiName', title: '指标名称', align: 'center', width: '20%',
2420 templet: function (d) { 2407 templet: function (d) {
  2408 + //start lsq 判断当前kpiId是否在状态指标数据列表中 2022-06-08
  2409 + let status=statusKpiList.indexOf(d.kpiId);
  2410 + if(status!=-1){
  2411 + statusF=true;
  2412 + }
  2413 + //end lsq 2022-06-08
2421 var kpiName = d.kpiName == 'TYPE'?'ERRPT':d.kpiName; 2414 var kpiName = d.kpiName == 'TYPE'?'ERRPT':d.kpiName;
  2415 + let chbox='';
  2416 + if(status!=-1){
  2417 + 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 + '" ' +
  2418 + 'data-id="' + d.kpiId + '" data-kpiname="' + d.kpiName + '" data-name="' + d.name + '" data-flag="' + d.flag + '"' +
  2419 + 'data-canca="' + d.canCA + '" data-incaing="' + d.inCAing + '" data-restype="' + d.resType + '"' +
  2420 + '>' +
  2421 + '<img style="width: 20px;height: 20px;" src="/src/style/img/icon_row_menu.png"></a>';;
  2422 + }
2422 if (d.kpiIdent != 1 && d.isWarning != 1) { 2423 if (d.kpiIdent != 1 && d.isWarning != 1) {
2423 - return '<div>' + kpiName + '</div>'; 2424 + return '<div>' + kpiName + chbox+'</div>';
2424 } 2425 }
2425 - 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>'; 2426 + 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>';
2426 } 2427 }
2427 } 2428 }
2428 , {field: 'updateTime', title: '告警时间', align: 'center', width: '15%'} 2429 , {field: 'updateTime', title: '告警时间', align: 'center', width: '15%'}
@@ -2474,6 +2475,17 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -2474,6 +2475,17 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
2474 '<input type="radio" name="noticeFlag" value="true" title="是">&nbsp;是' + 2475 '<input type="radio" name="noticeFlag" value="true" title="是">&nbsp;是' +
2475 '<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;">&nbsp;否</div> '); 2476 '<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;">&nbsp;否</div> ');
2476 }); 2477 });
  2478 + //start lsq 添加状态指标下探 2022-06-09
  2479 + $("[lay-id='"+tableId+"']").find(".layui-table-cell").hover(function () {
  2480 + var $that = $(this)
  2481 + var $btn = $that.find(".detail_row_menu");
  2482 + if ($btn.length > 0) {
  2483 + $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
  2484 + $btn.removeClass("hide");
  2485 + }
  2486 + })
  2487 + filterSuppressMonitor(resId);
  2488 + //end lsq 2022-06-09
2477 } 2489 }
2478 }); 2490 });
2479 if($('.layui-show').find(".detail-left-panel").length == 0){ 2491 if($('.layui-show').find(".detail-left-panel").length == 0){
@@ -3960,7 +3972,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -3960,7 +3972,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
3960 } 3972 }
3961 //end lsq 2022-05-19 3973 //end lsq 2022-05-19
3962 //监听过滤压制等事件 3974 //监听过滤压制等事件
3963 - function filterSuppressMonitor(resId){ 3975 + function filterSuppressMonitor(resId,isStatusMenubox){
3964 //菜单按钮点击事件 3976 //菜单按钮点击事件
3965 $("a.detail_row_menu").off("click").on("click",function (e) { 3977 $("a.detail_row_menu").off("click").on("click",function (e) {
3966 $("#detail_menubox_id").remove(); 3978 $("#detail_menubox_id").remove();
@@ -3971,28 +3983,35 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -3971,28 +3983,35 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
3971 var nature = $menu.data('nature'); 3983 var nature = $menu.data('nature');
3972 //lsq 状态信息无其他下探 2022-06-08 3984 //lsq 状态信息无其他下探 2022-06-08
3973 var statusF = $menu.data('statusf'); 3985 var statusF = $menu.data('statusf');
  3986 + var one = $menu.data('one');
3974 var menubox = '<div class="detail_menubox" id="detail_menubox_id" style="color:#666;"><ul>'; 3987 var menubox = '<div class="detail_menubox" id="detail_menubox_id" style="color:#666;"><ul>';
3975 - if (!nature) {  
3976 - menubox +=  
3977 - '<li type="w"><i class="layui-icon">&#xe667;</i>告警设置</li>' +  
3978 - '<li type="s"><i class="layui-icon">&#xe64d;</i>过滤单指标</li>';  
3979 - }  
3980 - if (!hideM) {  
3981 - menubox += '<li type="m"><i class="layui-icon">&#xe64d;</i>过滤多指标</li>';  
3982 - }  
3983 - if (!nature) {  
3984 - menubox += '<li type="t"><i class="layui-icon">&#xe62c;</i>性能趋势</li>';  
3985 - }  
3986 - // if(!statusF){ 3988 + //lsq 只有状态指标下探的标识
  3989 + if(one==1){
  3990 + menubox+='';
  3991 + }else{
  3992 + if (!nature) {
  3993 + menubox +=
  3994 + '<li type="w"><i class="layui-icon">&#xe667;</i>告警设置</li>' +
  3995 + '<li type="s"><i class="layui-icon">&#xe64d;</i>过滤单指标</li>';
  3996 + }
  3997 + if (!hideM) {
  3998 + menubox += '<li type="m"><i class="layui-icon">&#xe64d;</i>过滤多指标</li>';
  3999 + }
  4000 + if (!nature) {
  4001 + menubox += '<li type="t"><i class="layui-icon">&#xe62c;</i>性能趋势</li>';
  4002 + }
  4003 + // if(!statusF){
3987 menubox += '<li type="n"><i class="layui-icon">&#xe758;</i>压制次数</li>'; 4004 menubox += '<li type="n"><i class="layui-icon">&#xe758;</i>压制次数</li>';
3988 - // }  
3989 - if (canCA) {  
3990 - if (inCAing) {  
3991 - menubox += '<li type="ca-cancel"><i class="layui-icon">&#xe64d;</i>取消容量预测</li>';  
3992 - } else {  
3993 - menubox += '<li type="ca-add"><i class="layui-icon">&#xe64c;</i>纳入容量预测</li>'; 4005 + // }
  4006 + if (canCA) {
  4007 + if (inCAing) {
  4008 + menubox += '<li type="ca-cancel"><i class="layui-icon">&#xe64d;</i>取消容量预测</li>';
  4009 + } else {
  4010 + menubox += '<li type="ca-add"><i class="layui-icon">&#xe64c;</i>纳入容量预测</li>';
  4011 + }
3994 } 4012 }
3995 } 4013 }
  4014 +
3996 //lsq 增加连接状态指标 2022-05-19 4015 //lsq 增加连接状态指标 2022-05-19
3997 // menubox += '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>'; 4016 // menubox += '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>';
3998 4017
@@ -3,33 +3,38 @@ @@ -3,33 +3,38 @@
3 <div class="pie-detail-content"> 3 <div class="pie-detail-content">
4 <el-row class="detail-content-title"> 4 <el-row class="detail-content-title">
5 <el-col :span="8"></el-col> 5 <el-col :span="8"></el-col>
6 - <el-col :span="16" class="pie-flex-end">  
7 - <div class="pie-date-range">  
8 -<!-- <cm-date-range-influx v-if="dateType=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx>-->  
9 - </div> 6 + <el-col :span="16" class="pie-flex-end" style="justify-content: flex-end;">
10 <div class="line-filter pie-line-filter"> 7 <div class="line-filter pie-line-filter">
11 <div class="linechartfrequency line-filter-content"> 8 <div class="linechartfrequency line-filter-content">
12 <div v-if="dateType!='custom'" @click="changeInterval('oneDay')" :class="['line-filter-item', {'active':dateType=='oneDay'}]" data-value="oneDay" >近24小时</div> 9 <div v-if="dateType!='custom'" @click="changeInterval('oneDay')" :class="['line-filter-item', {'active':dateType=='oneDay'}]" data-value="oneDay" >近24小时</div>
13 - <div v-if="dateType!='custom'" @click="changeInterval('week')" :class="['line-filter-item', {'active':dateType=='week'}]" data-value="week">一周</div>  
14 - <div v-if="dateType!='custom'" @click="changeInterval('month')" :class="['line-filter-item', {'active':dateType=='month'}]" data-value="month">一月</div>  
15 -<!-- <div v-if="dateType!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':dateType=='YEAR'}]" data-value="YEAR">一年</div>-->  
16 -<!-- <div v-if="dateType!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">自定义</div>-->  
17 -<!-- <div v-if="dateType=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">返 回</div>--> 10 + <el-date-picker
  11 + v-model="customDate"
  12 + type="date"
  13 + placeholder="请选择日期"
  14 + size="small"
  15 + format="YYYY-MM-DD"
  16 + value-format="YYYY-MM-DD"
  17 + style="margin-left:6px;"
  18 + />
  19 + <el-time-picker
  20 + v-model="customTime"
  21 + is-range
  22 + range-separator="-"
  23 + start-placeholder="开始时间"
  24 + end-placeholder="结束时间"
  25 + size="small"
  26 + format="HH:mm:ss"
  27 + value-format="HH:mm:ss"
  28 + style="margin-left:6px;"
  29 + />
  30 + <el-button style="margin-left:6px;" type="primary" size="small" @click="search"> 查询</el-button>
18 </div> 31 </div>
19 </div> 32 </div>
20 -  
21 </el-col> 33 </el-col>
22 -  
23 </el-row> 34 </el-row>
24 <el-row class="detail-content"> 35 <el-row class="detail-content">
25 <el-col :span="24" class="detail_linechart" style="height:550px !important;"> 36 <el-col :span="24" class="detail_linechart" style="height:550px !important;">
26 <LineChart :optionData="optionData" v-if="optionData"></LineChart> 37 <LineChart :optionData="optionData" v-if="optionData"></LineChart>
27 -  
28 -<!-- <div class="detail_linechart" id="indentKpiLineChart"></div>-->  
29 - <!-- <div class="detail_linechart" id="warningKpiLineChart" style="margin-top:35px;"></div>-->  
30 - <!-- <div class="detail_linechart" id="line-tingyun-trendKpiLineChart" style="margin-top:35px;"></div>-->  
31 -  
32 -  
33 </el-col> 38 </el-col>
34 </el-row> 39 </el-row>
35 </div> 40 </div>
@@ -12,6 +12,8 @@ export default { @@ -12,6 +12,8 @@ export default {
12 setup(props, {attrs, slots, emit}) { 12 setup(props, {attrs, slots, emit}) {
13 const {proxy} = Vue.getCurrentInstance(); 13 const {proxy} = Vue.getCurrentInstance();
14 let dateType=Vue.ref('oneDay'); 14 let dateType=Vue.ref('oneDay');
  15 + let customDate=Vue.ref('');//选择日期
  16 + let customTime=Vue.ref([]);//时间范围
15 let optionData=Vue.ref(''); 17 let optionData=Vue.ref('');
16 //series接口无数据时默认数据 18 //series接口无数据时默认数据
17 let seriesData = Vue.ref([{ 19 let seriesData = Vue.ref([{
@@ -111,6 +113,8 @@ export default { @@ -111,6 +113,8 @@ export default {
111 ]) 113 ])
112 114
113 const changeInterval=(val)=>{ 115 const changeInterval=(val)=>{
  116 + customDate.value='';
  117 + customTime.value=[];
114 dateType.value=val; 118 dateType.value=val;
115 if(val=='custom'){ 119 if(val=='custom'){
116 }else{ 120 }else{
@@ -138,8 +142,15 @@ export default { @@ -138,8 +142,15 @@ export default {
138 idStr=kpiId; 142 idStr=kpiId;
139 } 143 }
140 kpiName.value = params.name;//指标名称 144 kpiName.value = params.name;//指标名称
  145 + let startTime='';
  146 + let endTime='';
  147 + if(customTime.value && customTime.value.length>0){
  148 + startTime=customTime.value[0];
  149 + endTime=customTime.value[1];
  150 + }
141 let url = '/api-web/scatter/getByResId?dateType=' + dateType.value + 151 let url = '/api-web/scatter/getByResId?dateType=' + dateType.value +
142 - '&resId=' + resourceId + '&kpiId=' + idStr + '&resType=' + resType; 152 + '&resId=' + resourceId + '&kpiId=' + idStr + '&resType=' + resType+'&customDate='+customDate.value+
  153 + '&startTime=' +startTime +'&endTime=' + endTime;
143 proxy.$http.get(url, {},function (res){ 154 proxy.$http.get(url, {},function (res){
144 kpiUnit.value = (!res.data || res.data.kpiUnit == null) ? "" : res.data.kpiUnit; 155 kpiUnit.value = (!res.data || res.data.kpiUnit == null) ? "" : res.data.kpiUnit;
145 if (res.data && res.data.length == 0) { 156 if (res.data && res.data.length == 0) {
@@ -251,7 +262,18 @@ export default { @@ -251,7 +262,18 @@ export default {
251 boundaryGap: ['10%', '10%'], 262 boundaryGap: ['10%', '10%'],
252 axisLabel: { 263 axisLabel: {
253 interval:59,//label无间隔 264 interval:59,//label无间隔
254 - formatter: '{value} 时' 265 + // formatter: '{value} 时'
  266 + formatter: function (param) {
  267 + let newParamsName='';
  268 + let arr=param?param.split(":"):[];
  269 + if(arr[0]){
  270 + let strFirst=arr[0].substring(0,1);
  271 + let strSecond=arr[0].substring(1);
  272 + strFirst=strFirst.replace('0', "");
  273 + newParamsName=strFirst + strSecond+' 时';
  274 + }
  275 + return newParamsName
  276 + }
255 277
256 }, 278 },
257 axisLine: { 279 axisLine: {
@@ -339,16 +361,16 @@ export default { @@ -339,16 +361,16 @@ export default {
339 for(let j=0;j<60;j++){ 361 for(let j=0;j<60;j++){
340 if(i<10){ 362 if(i<10){
341 if(j<10){ 363 if(j<10){
342 - arr1.push('0'+i)//+':0'+j); 364 + arr1.push('0'+i+':0'+j);
343 }else{ 365 }else{
344 - arr1.push('0'+i)//+':'+j); 366 + arr1.push('0'+i+':'+j);
345 } 367 }
346 368
347 }else{ 369 }else{
348 if(j<10){ 370 if(j<10){
349 - arr1.push(i)//+':0'+j); 371 + arr1.push(i+':0'+j);
350 }else{ 372 }else{
351 - arr1.push(i)//+':'+j); 373 + arr1.push(i+':'+j);
352 } 374 }
353 } 375 }
354 } 376 }
@@ -356,6 +378,18 @@ export default { @@ -356,6 +378,18 @@ export default {
356 } 378 }
357 YAxisData.value=arr1; 379 YAxisData.value=arr1;
358 } 380 }
  381 + //查询自定义时间段的数据
  382 + let search=()=>{
  383 + if(!customDate.value){
  384 + proxy.$global.showMsg('请选择日期','warning');
  385 + return;
  386 + }
  387 + if(!customTime.value || customTime.value.length==0){
  388 + proxy.$global.showMsg('请选择时间范围','warning');
  389 + return;
  390 + }
  391 + getLineChart();
  392 + }
359 // 挂载完 393 // 挂载完
360 Vue.onMounted(() => { 394 Vue.onMounted(() => {
361 getYAxisData(); 395 getYAxisData();
@@ -376,7 +410,10 @@ export default { @@ -376,7 +410,10 @@ export default {
376 kpiName, 410 kpiName,
377 optionDataInit, 411 optionDataInit,
378 getLineChart, 412 getLineChart,
379 - changeInterval 413 + changeInterval,
  414 + customDate,
  415 + customTime,
  416 + search
380 } 417 }
381 } 418 }
382 } 419 }