...
|
...
|
@@ -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>
|
...
|
...
|
|