Authored by 鲁尚清

告警设置、过滤单多指标、压制次数及纳入容量预测接口调用

... ... @@ -4,6 +4,7 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:9095"'
BASE_API: '"http://127.0.0.1:9095"',
BASE_API_other: '"https://192.168.0.69:8080"'
// BASE_API: '"http://10.108.26.197:9095"'
})
... ...
import request from '@/utils/request'
import request from '@/utils/request1'
import { getShareToken, getToken } from "@/utils/auth";
import axios from 'axios';
//自监控平台接口数据联调 // Start LSQ 2022/1/13 10:52 TODO
export function getData(data) {
// export function getData(data) {
// return request({
// url: 'reportDashboard/getData',
// method: 'post',
// headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
// data,
// })
// }
//性能趋势图路径
export function getTrendBaseUrl() {
return process.env.BASE_API_other
}
//获取告警策略列表数据
export function getAlarmPolicy(params) {
return request({
url: '/api-web/alarmPolicy/list?policyType=0&kpiId=' +params.kpiId+'&access_token='+params.token,
headers: { 'Authorization': "Bearer "+params.token },
method: 'get',
})
}
//获取告警订阅列表数据
export function getAlarmSubscribe(params) {
return request({
url: '/api-web/alarmsubscribe/list?access_token='+params.token,
headers: { 'Authorization': "Bearer "+params.token },
method: 'get',
})
}
//保存告警设置
export function saveKpiPolicy(params,urlObj) {
return request({
url: '/api-web/alarmPolicy/save/kpipolicy?access_token='+urlObj.token,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'post',
data:params
})
}
//保存过滤单指标
export function saveSetKpiFilter(params,urlObj) {
let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag+'&isOne='+params.isOne;
return request({
url: '/api-web/filterkpi/kpi/filter?access_token='+urlObj.token+paramsStr,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
// data:params
})
}
//获取压制次数
export function getKpiPressTimes(params,urlObj) {
let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag;
return request({
url: '/api-web/manage/resource/res/kpi/findIgnore?access_token='+urlObj.token+paramsStr,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
})
}
//保存压制次数
export function saveSetKpiPressTimes(params,urlObj) {
return request({
url: 'reportDashboard/getData',
url: '/api-web/manage/resource/res/kpi/ignore?access_token='+urlObj.token,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'post',
headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
data,
data:params
})
}
//纳入容量预测
export function saveCaAdd(params,urlObj) {
let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&resType='+params.resType;
return request({
url: '/api-web/caUnit/add?access_token='+urlObj.token+paramsStr,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
})
}
//获取资源类型
export function getResType(params,urlObj) {
return request({
url: 'api-web/manage/resource/findById?resId='+params.resId+'&access_token='+urlObj.token,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
})
}
export function getHealth(data) {
... ...
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API_other, // api 的 base_url
timeout: 20000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
config.headers['Authorization'] = (getToken() == null || getToken() == undefined) ? '' : getToken()
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code == '50008' || res.code == '50012' || res.code == '50014') {
MessageBox.confirm(
'你已被登出,可以取消继续留在该页面,或者重新登录',
'重新登录',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
sessionStorage.clear()
localStorage.clear()
window.location.href = "/";
})
}
else if (res.code !== '200' && res.code !== 0) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
return response.data
} else {
return response.data
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
... ...
... ... @@ -6,7 +6,7 @@
<img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
</template>
<div class="info-ul" style="width:140px;" >
<div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox">
<div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg)" v-for="itemMenu in detailMenubox">
<i class="el-icon-link icon-div"></i>{{itemMenu.name}}
</div>
</div>
... ... @@ -20,24 +20,24 @@
<!-- 告警设置{{pressingValue}}-->
<div class="alarm-li flex-center">
<div class="alarm-li-label">告警策略</div>
<el-select v-model="strategyValue" filterable class="m-2 alarm-li-select" placeholder="选择告警策略">
<el-select v-model="strategyValue" filterable clearable class="m-2 alarm-li-select" placeholder="选择告警策略">
<el-option
v-for="item in strategyData"
:key="item.value"
:label="item.label"
:value="item.value"
:key="item.alarmPolicyId"
:label="item.alarmPolicyName"
:value="item.alarmPolicyId"
>
</el-option>
</el-select>
</div>
<div class="alarm-li flex-center">
<div class="alarm-li-label">告警列表</div>
<el-select v-model="alarmListValue" multiple filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
<el-select v-model="alarmListValue" multiple clearable filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
<el-option
v-for="item in alarmListData"
:key="item.value"
:label="item.label"
:value="item.value"
:key="item.subId"
:label="item.subName"
:value="item.subId"
>
</el-option>
</el-select>
... ... @@ -53,13 +53,13 @@
您确定要对当前指标进行过滤处理?
</div>
<div v-if="dialogName=='performance_trends'" class="txtScroll-top">
<div>性能趋势{{pressingValue}}</div>
<div>性能趋势{{pressingValue.kpiValue}}</div>
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
<div v-if="dialogName=='pressing_times'" class="txtScroll-top">
<!-- 压制次数{{pressingValue}}-->
<el-input
v-model="pressingNum"
v-model="ignoreCnt"
:rows="2"
type="textarea"
placeholder="压制次数(必填,建议100以内)"
... ... @@ -77,6 +77,7 @@
<script>
import customDialog from "./customDialog";
import {Message} from "_element-ui@2.15.6@element-ui";
import {getAlarmPolicy,getAlarmSubscribe,saveKpiPolicy,saveSetKpiFilter,getKpiPressTimes,saveSetKpiPressTimes,saveCaAdd,getTrendBaseUrl} from "@/api/platform";
export default {
name: "customMenuBox",
... ... @@ -86,9 +87,9 @@ export default {
props: {
heightStyle: String,
marginStyle: String,
trendSrc:{
type:String,
default:'',
tableDataValueHead:{
type:Object,
default: {},
},
tableName:{
type:String,
... ... @@ -130,13 +131,18 @@ export default {
]
},//表格下探数据
tableDataValue: {
type: String,
default: ''
type: Object,
default: {}
},//单元格内容
flg: {
type: String,
default: ''
},//标志
urlObj:{},//url地址参数对象
resType:{
type: String,
default: ''
},//资源类型
},
data() {
return {
... ... @@ -146,31 +152,15 @@ export default {
// trendSrc:'',//性能走势图地址
// pressingVisible:'',
pressingValue:'',//压制次数
pressingNum:'',
strategyData: [{
label:'策略一',
value:'001'
}],//告警策略数据
ignoreCnt:'',
strategyData: [],//告警策略数据
strategyValue:'',//告警策略值
alarmListData:[{
label:'告警列表一',
value:'001'
},{
label:'告警列表二',
value:'002'
},],//告警列表数据
alarmListData:[],//告警列表数据
alarmListValue:[],//告警列表值
trendSrc:'',//性能趋势图地址
}
},
watch: {
trendSrc: {
handler(val) {
console.log("trendSrc",val)
},
deep: true
},
tableName:{
handler(val){
console.log("titlename",val)
... ... @@ -178,8 +168,20 @@ export default {
deep:true
}
},
computed: {
//获取url地址中的token
getUrlToken(){
let locationUrl=this.$route.query;
let resId=locationUrl.resId;
let token=locationUrl.access_token;
let urlObj={
resId:resId,
token:token
}
return urlObj;
}
},
mounted() {
},
methods: {
//表格下探关闭
... ... @@ -191,19 +193,33 @@ export default {
this.dialogVisible=false;
},
okFunc(){
this.dialogVisible=false;
if(this.dialogName=='filter_sheet_indicator'){
//保存设置单指标过滤
this.setKpiFilter(true);
this.dialogVisible=false;
}else if(this.dialogName=='filter_multiple_indicators'){
//保存设置多指标过滤
this.setKpiFilter(false);
this.dialogVisible=false;
}else if(this.dialogName=='alarm_setting'){
//保存告警设置
this.alarmSetSave();
}else if(this.dialogName=='pressing_times'){
//保存压制次数
this.setKpiPressTimes();
}
// this.dialogVisible=false;
},
//表格下探
pressingDialog(itemMenu,value,flg){
this.pressingValue=value;
pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg){
this.pressingValue=tableDataValue;
let kpiId=tableDataValue.kpiId;
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
let isDialog=true;
if(itemMenu.type=='alarm_setting'){
this.widthStyle='width:70%;';
this.getAlarmPolicyData(kpiId)
}else if(itemMenu.type=='filter_sheet_indicator'){
this.widthStyle=styleStr;
... ... @@ -213,16 +229,23 @@ export default {
}else if(itemMenu.type=='performance_trends'){
this.widthStyle='';
this.setTrend(tableDataValueHead);
}else if(itemMenu.type=='pressing_times'){
this.widthStyle='width:400px;height: 200px;min-height: 200px;overflow: hidden;';
//获取压制次数
this.getKpiPressTimesData(tableDataValue);
}else if(itemMenu.type=='include_capacity_forecast'){
this.widthStyle=styleStr;
isDialog=false;
this.caAdd();
}
this.setDialog(itemMenu.type,flg);
if(isDialog){
this.setDialog(itemMenu.type,flg);
}
this.closePopoverMenu();
... ... @@ -248,18 +271,161 @@ export default {
this.dialogName=name;
},
//设置指标过滤,isOne true单指标过滤,false多指标过滤
setKpiFilter(isOne){
async setKpiFilter(isOne){
let params={
resId: '',kpiId: '',flag:'',subFlag: '',
resId:this.getUrlToken.resId,
kpiId:this.pressingValue.kpiId,
flag:this.pressingValue.flag,
subFlag:this.pressingValue.kpiName,
isOne:isOne===true?'s':'m'
}
let datas={resId:params.resId,kpiId:params.kpiId,flag:params.flag,isOne:isOne===true?'s':'m',subFlag:params.subFlag}
console.log("过滤指标",isOne,'/api-web/filterkpi/kpi/filter')
Message({
message: '过滤指标失败',
type: 'error',
duration: 3 * 1000
})
}
const { success } = await saveSetKpiFilter(params,this.getUrlToken);
if (success) {
Message({
message: '过滤设置成功',
type: 'success',
duration: 3 * 1000
})
}else{
Message({
message: '过滤设置失败',
type: 'error',
duration: 3 * 1000
})
}
},
//设置性能趋势图
setTrend(tableDataValueHead){
let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.iswarning
+'&ident='+this.pressingValue.kpiIdent
+'&trend='+this.pressingValue.isTrend
+'&unit='+tableDataValueHead.unit
+'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
let baseUrl=getTrendBaseUrl();
this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams;
},
//获取告警策略列表数据
async getAlarmPolicyData(kpiId){
let obj=this.getUrlToken;
let params={
kpiId:kpiId,
token:obj.token
}
const { code, data } = await getAlarmPolicy(params);
if (code != 200 && code!=0) return;
this.strategyData=data;
this.getAlarmSubscribeData(params);
},
//获取告警订阅列表数据
async getAlarmSubscribeData(params){
const { code, data } = await getAlarmSubscribe(params);
if (code != 200 && code!=0) return;
this.alarmListData=data;
},
//保存告警设置
async alarmSetSave(){
let kpiSubscribe=this.alarmListValue.join(',');
if(!this.strategyValue || !kpiSubscribe){
Message({
message: '告警策略或者告警订阅不能为空',
type: 'warning',
duration: 3 * 1000
});
return;
}
let params={
resId:this.getUrlToken.resId,
kpiId:this.pressingValue.kpiId,
flag:this.pressingValue.flag,
policyId:this.strategyValue,
subId:kpiSubscribe
}
const { success } = await saveKpiPolicy(params,this.getUrlToken);
if (success){
Message({
message: '设置成功',
type: 'success',
duration: 3 * 1000
});
}else{
Message({
message: '设置失败',
type: 'error',
duration: 3 * 1000
});
}
this.dialogVisible=false;
},
//获取压制次数
async getKpiPressTimesData(obj){
let params= {
resId: this.getUrlToken.resId,
kpiId: obj.kpiId,
flag: obj.flag,
subFlag: obj.kpiName
}
const { code, object } = await getKpiPressTimes(params,this.getUrlToken);
if (code != 200 && code!=0) return;
this.ignoreCnt = object?object.ignoreCnt:"";
},
//保存设置压制次数
async setKpiPressTimes(){
let params= {
access_token:this.getUrlToken.token,
resId: this.getUrlToken.resId,
kpiId: this.pressingValue.kpiId,
flag: this.pressingValue.flag,
subFlag: this.pressingValue.kpiName,
ignoreCnt:this.ignoreCnt
}
const { success } = await saveSetKpiPressTimes(params,this.getUrlToken);
if(success){
Message({
message: '设置成功',
type: 'success',
duration: 3 * 1000
});
}else{
Message({
message: '设置失败,请与管理员联系!',
type: 'error',
duration: 3 * 1000
});
}
this.dialogVisible=false;
},
//纳入容量预测
async caAdd(){
let params= {
resId: this.getUrlToken.resId,
kpiId: this.pressingValue.kpiId,
flag: this.pressingValue.flag,
resType: this.resType,
}
const { success } = await saveCaAdd(params,this.getUrlToken);
if(success){
Message({
message: '纳入容量预测成功',
type: 'success',
duration: 3 * 1000
});
}else{
Message({
message: '纳入容量预测失败!',
type: 'error',
duration: 3 * 1000
});
}
this.dialogVisible=false;
},
}
}
</script>
... ...
... ... @@ -50,9 +50,10 @@
<customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
:tableDataValue="item[itemChild.key]" :flg="''"
:tableDataValueHead="itemChild"
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
:resType="resType"
></customMenuBox>
</div>
</li>
... ... @@ -114,9 +115,10 @@
{{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>-->
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
:tableDataValue="item[itemChild.key]" :flg="''"
:tableDataValueHead="itemChild"
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
:resType="resType"
></customMenuBox>
</div>
</li>
... ... @@ -150,44 +152,13 @@
</div>
</template>
</customDialog>
<!-- <div class="dialog-div" v-if="tableVisible" :style="heightStyle">
<div class="dialog-div-content" :style="marginStyle" >
<div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>
</div>
</div>-->
<!-- <customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
<div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
告警设置{{pressingValue}}
</div>
<div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
过滤单指标{{pressingValue}}
</div>
<div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
过滤多指标{{pressingValue}}
</div>
<div v-if="dialogName=='performance_trends'" class="txtScroll-top">
性能趋势{{pressingValue}}
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
<div v-if="dialogName=='pressing_times'" class="txtScroll-top">
压制次数{{pressingValue}}
</div>
<div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
纳入容量预测{{pressingValue}}
</div>
</template>
</customDialog>-->
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
import {getDetailTableData,getDetailTableDataNoPage,getResType} from "@/api/platform";
import customDialog from "../../designerComponents/customDialog";
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
import textToImage from "../../designerComponents/textToImage";//文字转图片
... ... @@ -232,38 +203,6 @@ export default {
optionsData: {},
pressingVisible:'',
isHover:false,
/*detailMenubox:[
{
name:'告警设置',
type:'alarm_setting',
isDisplay:true
},
{
name:'过滤单指标',
type:'filter_sheet_indicator',
isDisplay:true
},
{
name:'过滤多指标',
type:'filter_multiple_indicators',
isDisplay:true
},
{
name:'性能趋势',
type:'performance_trends',
isDisplay:true
},
{
name:'压制次数',
type:'pressing_times',
isDisplay:true
},
{
name:'纳入容量预测',
type:'include_capacity_forecast',
isDisplay:true
}
],*/
dialogName:'',//表格名称
pressingValue:'',//表格下探值
trendSrc:'',//性能走势图地址
... ... @@ -276,6 +215,7 @@ export default {
isEllipsis:[],//是否文字超出
isEllipsisMore:[],//是否文字超出
componentName:'',//组件名称
resType:'',//资源类型
};
},
computed: {
... ... @@ -381,6 +321,17 @@ export default {
})
}
return detailMenuBox;
},
//获取url地址中的token
getUrlToken(){
let locationUrl=this.$route.query;
let resId=locationUrl.resId;
let token=locationUrl.access_token;
let urlObj={
resId:resId,
token:token
}
return urlObj;
}
},
watch: {
... ... @@ -390,15 +341,18 @@ export default {
this.optionsPosition = val.position;
this.optionsData = val.data;
this.initData();
this.getResTypeData();
},
deep: true
}
},
mounted() {
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.initData();
this.getResTypeData();
},
methods: {
initData() {
... ... @@ -571,13 +525,6 @@ export default {
// this.setDialog('table');
this.tableVisible=true;
},
/*//打开弹框
setDialog(name,flg){
this.dialogVisible=true;
this.dialogName=name;
},*/
//点击表格内容名称事件
clickListName(obj){
if(obj.kpiIdent==1 || obj.isWarning==1){
... ... @@ -724,41 +671,7 @@ export default {
return value1 - value2;
}
},
/* //表格下探
pressingDialog(itemMenu,value,flg){
this.pressingValue=value;
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
if(itemMenu.type=='alarm_setting'){
this.widthStyle='width:70%;';
}else if(itemMenu.type=='filter_sheet_indicator'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='filter_multiple_indicators'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='performance_trends'){
this.widthStyle='';
}else if(itemMenu.type=='pressing_times'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='include_capacity_forecast'){
this.widthStyle=styleStr;
}
this.setDialog(itemMenu.type,flg);
let key=this.$refs.popoverMenu;
if(key && key.length>0){
key.map(item=>{
item.showPopper=false
})
}
// this.$refs.popoverMenu.showPopper = false;
},*/
pressingTimes(index,idx){
this.pressingVisible=index+'-'+idx;
},
... ... @@ -836,7 +749,7 @@ export default {
dialogName = tableStyleSetup.tableName + kpiName;
} else {
let nameResType = tableStyleSetup.nameResType ? obj.resType ? obj.resType + '|' : '' : '';
let nameResType = tableStyleSetup.nameResType ? this.resType ? this.resType + '|' : '' : '';
let nameIPAddress = tableStyleSetup.nameIPAddress ? obj.ipAddr ? obj.ipAddr + '|' : '' : '';
let nameResName = tableStyleSetup.nameResName ? obj.resName ? obj.resName + '|' : '' : '';
let nameKpiName = tableStyleSetup.nameKpiName ? obj.kpiName ? obj.kpiName + '|' : '' : '';
... ... @@ -858,8 +771,19 @@ export default {
kpiIdArr.push(item.key)
}
})
console.log("kpiIdArr",kpiIdArr)
}
},
//获取资源类型
async getResTypeData(){
let params= {
resId: this.getUrlToken.resId,
}
const { success,obj } = await getResType(params,this.getUrlToken);
if (success && obj && obj.bean && obj.bean.resType){
this.resType=obj.bean.resType;
}
},
}
};
</script>
... ...