fix ： 解决console爆粗 以及删除没传ids的问题
This commit is contained in:
zhangyu
@@ -374,13 +374,14 @@ export default {
|
||||
});
|
||||
this.deleteBox.ids = ids.join(",");
|
||||
},
|
||||
deleteMessage(deleltebox) {
|
||||
deleteMessage(deleltebox,cb) {
|
||||
this.$put("alert/message", deleltebox).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||
this.deleteBox.show = false;
|
||||
this.deleteBox.ids="";
|
||||
this.getAlertList();
|
||||
cb();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
@@ -564,7 +565,7 @@ export default {
|
||||
}
|
||||
this.requestIndex+=1;
|
||||
item.current=current;
|
||||
if(this.requestIndex===this.tableData.length){
|
||||
if(this.requestIndex===this.storedTableData.length){
|
||||
this.$set(item, "current", current);
|
||||
this.requestIndex=0;
|
||||
}
|
||||
|
||||
@@ -405,95 +405,97 @@
|
||||
}else{
|
||||
step='30m';
|
||||
}
|
||||
this.$refs.messageChart.startLoading();
|
||||
let axiosArr=[];
|
||||
let paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg));
|
||||
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step));
|
||||
this.legend = [];
|
||||
this.chartDatas = [];
|
||||
axios.all(axiosArr).then(res =>{
|
||||
try {
|
||||
res.forEach((response, promIndex) => {
|
||||
if (response.status == 200) {
|
||||
if (response.data.status == 'success') {
|
||||
let queryData = response.data.data.result[0];
|
||||
if (queryData) {
|
||||
let chartData = {
|
||||
type: "line",
|
||||
symbol: 'none', //去掉点
|
||||
smooth: 0.2, //曲线变平滑
|
||||
name: '',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: ['circle', 'circle'],
|
||||
label: {
|
||||
distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
|
||||
formatter: function (params) {
|
||||
return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color:'#d64f40',
|
||||
width:2,
|
||||
type:'dotted'
|
||||
},
|
||||
data: [{
|
||||
yAxis: Number(this.currentMsg.alertRule.threshold)
|
||||
}, ]
|
||||
},
|
||||
markArea:{
|
||||
itemStyle:{
|
||||
color:'#d64f40',
|
||||
opacity:0.1
|
||||
},
|
||||
data:[this.returnMarkArea()]
|
||||
}
|
||||
};
|
||||
if(this.currentMsg.alertRule.operator=='=='||this.currentMsg.alertRule.operator=='!='){
|
||||
delete chartData.markArea;
|
||||
}
|
||||
chartData.name += "{";
|
||||
alias += "{";
|
||||
Object.keys(queryData.metric).forEach((item, index) => {
|
||||
let label = item;
|
||||
let value = queryData.metric[label];
|
||||
chartData.name += label + "='" + value + "',";
|
||||
});
|
||||
chartData.name = chartData.name.charAt(chartData.name.length - 1) == "," ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name;
|
||||
chartData.name += "}";
|
||||
let alias = chartData.name;
|
||||
let legend = {
|
||||
name: chartData.name,
|
||||
alias: alias,
|
||||
isGray: false
|
||||
}
|
||||
this.legend.push(legend);
|
||||
chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
|
||||
return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)];
|
||||
});
|
||||
this.chartDatas.push(chartData);
|
||||
}
|
||||
} else {
|
||||
this.$message.error(response.data.error)
|
||||
console.error(response.data)
|
||||
}
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.$refs.messageChart.setRandomColors(this.chartDatas.length);
|
||||
this.$refs.messageChart.setLegend(this.legend);
|
||||
this.$refs.messageChart.setSeries(this.chartDatas);
|
||||
this.$refs.messageChart.endLoading();
|
||||
});
|
||||
} catch(err) {
|
||||
this.$message.error(err);
|
||||
this.$refs.messageChart.endLoading();
|
||||
}
|
||||
})
|
||||
if(this.$refs.messageChart){
|
||||
this.$refs.messageChart.startLoading();
|
||||
let axiosArr=[];
|
||||
let paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg));
|
||||
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step));
|
||||
this.legend = [];
|
||||
this.chartDatas = [];
|
||||
axios.all(axiosArr).then(res =>{
|
||||
try {
|
||||
res.forEach((response, promIndex) => {
|
||||
if (response.status == 200) {
|
||||
if (response.data.status == 'success') {
|
||||
let queryData = response.data.data.result[0];
|
||||
if (queryData) {
|
||||
let chartData = {
|
||||
type: "line",
|
||||
symbol: 'none', //去掉点
|
||||
smooth: 0.2, //曲线变平滑
|
||||
name: '',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: ['circle', 'circle'],
|
||||
label: {
|
||||
distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
|
||||
formatter: function (params) {
|
||||
return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color:'#d64f40',
|
||||
width:2,
|
||||
type:'dotted'
|
||||
},
|
||||
data: [{
|
||||
yAxis: Number(this.currentMsg.alertRule.threshold)
|
||||
}, ]
|
||||
},
|
||||
markArea:{
|
||||
itemStyle:{
|
||||
color:'#d64f40',
|
||||
opacity:0.1
|
||||
},
|
||||
data:[this.returnMarkArea()]
|
||||
}
|
||||
};
|
||||
if(this.currentMsg.alertRule.operator=='=='||this.currentMsg.alertRule.operator=='!='){
|
||||
delete chartData.markArea;
|
||||
}
|
||||
chartData.name += "{";
|
||||
alias += "{";
|
||||
Object.keys(queryData.metric).forEach((item, index) => {
|
||||
let label = item;
|
||||
let value = queryData.metric[label];
|
||||
chartData.name += label + "='" + value + "',";
|
||||
});
|
||||
chartData.name = chartData.name.charAt(chartData.name.length - 1) == "," ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name;
|
||||
chartData.name += "}";
|
||||
let alias = chartData.name;
|
||||
let legend = {
|
||||
name: chartData.name,
|
||||
alias: alias,
|
||||
isGray: false
|
||||
}
|
||||
this.legend.push(legend);
|
||||
chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
|
||||
return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)];
|
||||
});
|
||||
this.chartDatas.push(chartData);
|
||||
}
|
||||
} else {
|
||||
this.$message.error(response.data.error)
|
||||
console.error(response.data)
|
||||
}
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.$refs.messageChart.setRandomColors(this.chartDatas.length);
|
||||
this.$refs.messageChart.setLegend(this.legend);
|
||||
this.$refs.messageChart.setSeries(this.chartDatas);
|
||||
this.$refs.messageChart.endLoading();
|
||||
});
|
||||
} catch(err) {
|
||||
this.$message.error(err);
|
||||
this.$refs.messageChart.endLoading();
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computeDistance:function(str){
|
||||
var width = 0;
|
||||
@@ -572,10 +574,11 @@
|
||||
this.deleteBox.show = true;
|
||||
},
|
||||
deleteMessage() {
|
||||
this.$emit('deleteMessage',this.deleteBox);
|
||||
this.$emit('deleteMessage',this.deleteBox,()=>{
|
||||
this.deleteBox.ids=[];
|
||||
});
|
||||
//console.log(this.deleteBox);
|
||||
this.deleteBox.show = false;
|
||||
this.deleteBox.ids=[];
|
||||
},
|
||||
selectChange(s) {
|
||||
let ids = [];
|
||||
@@ -920,7 +923,7 @@
|
||||
display: inline-block;
|
||||
}
|
||||
/deep/.alert-clean-pop.el-popover{
|
||||
top: -30px;
|
||||
top: -30px !important;
|
||||
}
|
||||
.pointer{
|
||||
cursor: pointer;
|
||||
|
||||
@@ -59,20 +59,20 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
|
||||
:title="$t('overall.detail')"
|
||||
:visible.sync="graphShow"
|
||||
width="90%"
|
||||
id="viewGraphDialog"
|
||||
@close="dialogClose">
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="messageChart" :unit="chartUnit"></chart>
|
||||
</el-dialog>
|
||||
<!--<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
|
||||
<!--:title="$t('overall.detail')"-->
|
||||
<!--:visible.sync="graphShow"-->
|
||||
<!--width="90%"-->
|
||||
<!--id="viewGraphDialog"-->
|
||||
<!--@close="dialogClose">-->
|
||||
<!--<div slot="title">-->
|
||||
<!--{{$t("project.endpoint.dialogTitle")}}-->
|
||||
<!--<div class="float-right panel-calendar dialog-tool" style="display: flex">-->
|
||||
<!--<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<chart ref="messageChart" :unit="chartUnit"></chart>-->
|
||||
<!--</el-dialog>-->
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -291,11 +291,13 @@
|
||||
changeTab(tab) {
|
||||
this.$emit('changeTab', tab);
|
||||
},
|
||||
deleteMessage(deleteBox) {
|
||||
deleteMessage(deleteBox,cb) {
|
||||
console.log(deleteBox)
|
||||
this.$put("alert/message", deleteBox).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||
this.getAlertList();
|
||||
cb();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
@@ -59,35 +59,35 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
<!--export-->
|
||||
<div class="export-xlsx">
|
||||
<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
|
||||
<div class="upload-body">
|
||||
<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
|
||||
<div style="text-align: right; margin-top: 10px;">
|
||||
<button @click="closeDialog" class="el-button el-button--default el-button--small">
|
||||
<span>{{$t('tip.no')}}</span>
|
||||
</button>
|
||||
<button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
|
||||
<span>{{$t('tip.yes')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
|
||||
:title="$t('overall.detail')"
|
||||
:visible.sync="graphShow"
|
||||
width="90%"
|
||||
id="viewGraphDialog"
|
||||
@close="dialogClose">
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
|
||||
</el-dialog>
|
||||
<!--<div class="export-xlsx">-->
|
||||
<!--<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">-->
|
||||
<!--<div class="upload-body">-->
|
||||
<!--<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>-->
|
||||
<!--<div style="text-align: right; margin-top: 10px;">-->
|
||||
<!--<button @click="closeDialog" class="el-button el-button--default el-button--small">-->
|
||||
<!--<span>{{$t('tip.no')}}</span>-->
|
||||
<!--</button>-->
|
||||
<!--<button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">-->
|
||||
<!--<span>{{$t('tip.yes')}}</span>-->
|
||||
<!--</button>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</el-dialog>-->
|
||||
<!--</div>-->
|
||||
<!--<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
|
||||
<!--:title="$t('overall.detail')"-->
|
||||
<!--:visible.sync="graphShow"-->
|
||||
<!--width="90%"-->
|
||||
<!--id="viewGraphDialog"-->
|
||||
<!--@close="dialogClose">-->
|
||||
<!--<div slot="title">-->
|
||||
<!--{{$t("project.endpoint.dialogTitle")}}-->
|
||||
<!--<div class="float-right panel-calendar dialog-tool" style="display: flex">-->
|
||||
<!--<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>-->
|
||||
<!--</el-dialog>-->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -554,11 +554,12 @@
|
||||
}
|
||||
this.deleteBox.show = true;
|
||||
},
|
||||
deleteMessage(deleteBox) {
|
||||
deleteMessage(deleteBox,cb) {
|
||||
this.$put("alert/message", deleteBox).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||
this.getAlertList();
|
||||
cb();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
@@ -833,25 +834,25 @@
|
||||
}
|
||||
|
||||
this.getAlertList();
|
||||
this.$nextTick(() => {
|
||||
//绑定滚动条事件，控制top按钮
|
||||
let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
|
||||
if (el._ps_) {
|
||||
el.addEventListener("ps-scroll-y", () => {
|
||||
if (el._ps_.scrollbarYTop > 50) {
|
||||
this.tools.showTopBtn = true;
|
||||
} else {
|
||||
this.tools.showTopBtn = false;
|
||||
}
|
||||
});
|
||||
el.addEventListener("mouseenter", () => {
|
||||
this.tools.tableHover = true;
|
||||
});
|
||||
el.addEventListener("mouseleave", () => {
|
||||
this.tools.tableHover = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
// this.$nextTick(() => {
|
||||
// //绑定滚动条事件，控制top按钮
|
||||
// let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
|
||||
// if (el._ps_) {
|
||||
// el.addEventListener("ps-scroll-y", () => {
|
||||
// if (el._ps_.scrollbarYTop > 50) {
|
||||
// this.tools.showTopBtn = true;
|
||||
// } else {
|
||||
// this.tools.showTopBtn = false;
|
||||
// }
|
||||
// });
|
||||
// el.addEventListener("mouseenter", () => {
|
||||
// this.tools.tableHover = true;
|
||||
// });
|
||||
// el.addEventListener("mouseleave", () => {
|
||||
// this.tools.tableHover = false;
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user