monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 5affc063a6bc73da50cbfcc3bb40a1f50d4dbccf 1 parent e9b1244d

状态指标散点图功能迁移 #3

Inline Side-by-side
Showing 3 changed files with 134 additions and 56 deletions
... ... @@ -162,9 +162,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" ' +
... ... @@ -277,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" ' +
... ... @@ -1906,6 +1900,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
* @param colWidth 各个列宽度设置，可以只设置前边的，设置百分比
*/
renderTable: function (tableId, page, resId, kpiId, title, flagPrifix, sortBy, order, size,colWidth) {
//start lsq 状态信息的状态也增加下探 202-06-08
let statusF=false;//是否为状态信息
//end lsq 2022-06-08
var editFlag = localStorage.getItem("editFlag");//是否编辑状态
if (!size) {
size = 5;
... ... @@ -2029,9 +2026,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" ' +
... ... @@ -2039,7 +2041,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 + '"' +
'>' +
... ... @@ -2439,6 +2441,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('实时告警')
var alarmlist = table.render({
elem: '#' + tableId
... ... @@ -2477,11 +2482,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%'}
... ... @@ -2595,6 +2614,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
}
})
});
... ... @@ -4213,32 +4243,39 @@ 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>';
if (!nature) {
menubox +=
'<li type="w"><i class="layui-icon">&#xe667;</i>告警设置</li>' +
'<li type="s"><i class="layui-icon">&#xe64d;</i>过滤单指标</li>';
}
if (!hideM) {
menubox += '<li type="m"><i class="layui-icon">&#xe64d;</i>过滤多指标</li>';
}
if (!nature) {
menubox += '<li type="t"><i class="layui-icon">&#xe62c;</i>性能趋势</li>';
//lsq 只有状态指标下探的标识
if(one==1){
menubox+='';
}else{
if (!nature) {
menubox +=
'<li type="w"><i class="layui-icon">&#xe667;</i>告警设置</li>' +
'<li type="s"><i class="layui-icon">&#xe64d;</i>过滤单指标</li>';
}
if (!hideM) {
menubox += '<li type="m"><i class="layui-icon">&#xe64d;</i>过滤多指标</li>';
}
if (!nature) {
menubox += '<li type="t"><i class="layui-icon">&#xe62c;</i>性能趋势</li>';
}
// if(!statusF){
menubox += '<li type="n"><i class="layui-icon">&#xe758;</i>压制次数</li>';
// }
// Start Wang 2022/3/28 14:06 833:屏蔽纳入容量预测按钮 https://hgkj.zentaopm.com/task-view-833.html
// 后面计划将功能作为配置项
// if (canCA) {
// if (inCAing) {
// menubox += '<li type="ca-cancel"><i class="layui-icon">&#xe64d;</i>取消容量预测</li>';
// } else {
// menubox += '<li type="ca-add"><i class="layui-icon">&#xe64c;</i>纳入容量预测</li>';
// }
// }
// End Wang 2022/3/28 14:06
}
// if(!statusF){
menubox += '<li type="n"><i class="layui-icon">&#xe758;</i>压制次数</li>';
// }
// Start Wang 2022/3/28 14:06 833:屏蔽纳入容量预测按钮 https://hgkj.zentaopm.com/task-view-833.html
// 后面计划将功能作为配置项
// if (canCA) {
// if (inCAing) {
// menubox += '<li type="ca-cancel"><i class="layui-icon">&#xe64d;</i>取消容量预测</li>';
// } else {
// menubox += '<li type="ca-add"><i class="layui-icon">&#xe64c;</i>纳入容量预测</li>';
// }
// }
// End Wang 2022/3/28 14:06
menubox += '</ul></div>';
var cX = e.clientX + 10;
var cY = e.clientY - 10;
... ... @@ -4259,7 +4296,6 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
flag = flag.replace(/^\s+|\s+$/g, "");
}
//start lsq 根据kpiid获取是否是指标状态 2022-05-23
//start lsq 根据kpiid获取是否是指标状态 2022-05-23
let idArr=[];
let idStr='';
if(id.indexOf(',')!=-1){
... ...
... ... @@ -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">
<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>
... ...
... ... @@ -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: {
... ... @@ -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
}
}
}
... ...