fix: 修复model静态数据失效的问题
This commit is contained in:
@@ -83,7 +83,7 @@
|
||||
animation:150,
|
||||
handle:'.chartTitle',
|
||||
}" >
|
||||
<div class="chartBox" v-for="(item, index) in dataList" :key="'chartBox'+item.id" :id="item.title+'_'+item.id"
|
||||
<div class="chartBox" v-for="(item, index) in dataList" :key="index" :id="item.title+'_'+item.id"
|
||||
>
|
||||
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
|
||||
:ref="'editChart'+item.id"
|
||||
@@ -831,275 +831,406 @@ export default {
|
||||
this.getAssetInfoChartData(chartItem);
|
||||
return;
|
||||
}
|
||||
// 没有数据的设置提示信息暂无数据-针对每一个图
|
||||
const len = chartItem.elements.length;
|
||||
if (len === 0) {
|
||||
this.$nextTick(() => {
|
||||
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0){
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据??
|
||||
}
|
||||
});
|
||||
if (this.isModel) {
|
||||
this.modelStaticData(chartInfo, filterType);
|
||||
} else {
|
||||
let startTime = '';
|
||||
let endTime = '';
|
||||
if (filterType === 'refresh') {//刷新
|
||||
const now = new Date();
|
||||
const origin = new Date(this.filter.end_time);
|
||||
const numInterval = now.getTime() - origin.getTime();
|
||||
if (numInterval >= 60000) {//大于1分钟,则start、end均往后移numInterval,否则时间不变
|
||||
startTime = this.getNewTime(this.filter.start_time, numInterval);
|
||||
endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
|
||||
// 没有数据的设置提示信息暂无数据-针对每一个图
|
||||
const len = chartItem.elements.length;
|
||||
if (len === 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据??
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let startTime = '';
|
||||
let endTime = '';
|
||||
if (filterType === 'refresh') {//刷新
|
||||
const now = new Date();
|
||||
const origin = new Date(this.filter.end_time);
|
||||
const numInterval = now.getTime() - origin.getTime();
|
||||
if (numInterval >= 60000) {//大于1分钟,则start、end均往后移numInterval,否则时间不变
|
||||
startTime = this.getNewTime(this.filter.start_time, numInterval);
|
||||
endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
|
||||
} else {
|
||||
startTime = this.filter.start_time;
|
||||
endTime = this.filter.end_time;
|
||||
}
|
||||
} else if (filterType === 'showFullScreen') {//全屏时间查询
|
||||
startTime = this.filter.start_time;
|
||||
endTime = this.filter.end_time;
|
||||
//this.$parent.refreshTime(startTime,endTime);全屏查询,不更新panel列表的时间条件
|
||||
} else {
|
||||
startTime = this.filter.start_time;
|
||||
endTime = this.filter.end_time;
|
||||
}
|
||||
} else if(filterType==='showFullScreen'){//全屏时间查询
|
||||
startTime = this.filter.start_time;
|
||||
endTime = this.filter.end_time;
|
||||
//this.$parent.refreshTime(startTime,endTime);全屏查询,不更新panel列表的时间条件
|
||||
}else {
|
||||
startTime = this.filter.start_time;
|
||||
endTime = this.filter.end_time;
|
||||
}
|
||||
let step = bus.getStep(startTime,endTime);
|
||||
this.$nextTick(() => {
|
||||
const axiosArr = chartItem.elements.map((ele) => {
|
||||
const filterItem = ele;
|
||||
let query = encodeURIComponent(filterItem.expression);
|
||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
|
||||
});
|
||||
// 一个图表的所有element单独获取数据
|
||||
axios.all(axiosArr).then((res) => {
|
||||
if (res.length > 0) {
|
||||
const series = [];
|
||||
let singleStatRlt = '';
|
||||
const legend = [];
|
||||
const tableData = [];
|
||||
const sumData = {
|
||||
name: 'sum',
|
||||
data: [],
|
||||
visible: true,
|
||||
threshold: null,
|
||||
};
|
||||
let errorMsg = "";
|
||||
res.forEach((response, innerPos) => {
|
||||
if (response.status === 'success') {
|
||||
errorMsg = "";
|
||||
if (response.data.result) {
|
||||
// 循环处理每个elements下获取的数据列
|
||||
if(chartItem.type==='singleStat'){
|
||||
if (this.isModel) {
|
||||
singleStatRlt = 999;
|
||||
} else {
|
||||
if(response.data.result.length===1){
|
||||
let step = bus.getStep(startTime, endTime);
|
||||
this.$nextTick(() => {
|
||||
const axiosArr = chartItem.elements.map((ele) => {
|
||||
const filterItem = ele;
|
||||
let query = encodeURIComponent(filterItem.expression);
|
||||
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
});
|
||||
// 一个图表的所有element单独获取数据
|
||||
axios.all(axiosArr).then((res) => {
|
||||
if (res.length > 0) {
|
||||
const series = [];
|
||||
let singleStatRlt = '';
|
||||
const legend = [];
|
||||
const tableData = [];
|
||||
const sumData = {
|
||||
name: 'sum',
|
||||
data: [],
|
||||
visible: true,
|
||||
threshold: null,
|
||||
};
|
||||
let errorMsg = "";
|
||||
res.forEach((response, innerPos) => {
|
||||
if (response.status === 'success') {
|
||||
errorMsg = "";
|
||||
if (response.data.result) {
|
||||
// 循环处理每个elements下获取的数据列
|
||||
if (chartItem.type === 'singleStat') {
|
||||
if (response.data.result.length === 1) {
|
||||
let statistics = chartItem.param.statistics;
|
||||
if(response.data.result[0].values){
|
||||
singleStatRlt = bus.getSingleStatRlt(statistics,response.data.result[0].values);
|
||||
if (response.data.result[0].values) {
|
||||
singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
|
||||
}
|
||||
}else if(response.data.result.length > 1){
|
||||
} else if (response.data.result.length > 1) {
|
||||
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
|
||||
}
|
||||
}
|
||||
}else {
|
||||
response.data.result.forEach((queryItem,resIndex) => {
|
||||
const seriesItem = {
|
||||
theData: {
|
||||
name: '',
|
||||
symbol:'emptyCircle', //去掉点
|
||||
symbolSize:[2,2],
|
||||
smooth:0.2, //曲线变平滑
|
||||
showSymbol:false,
|
||||
data: [],
|
||||
type:chartInfo.type,
|
||||
},
|
||||
//visible: true,
|
||||
//threshold: null,
|
||||
metric_name: '',
|
||||
};
|
||||
} else {
|
||||
response.data.result.forEach((queryItem, resIndex) => {
|
||||
const seriesItem = {
|
||||
theData: {
|
||||
name: '',
|
||||
symbol: 'emptyCircle', //去掉点
|
||||
symbolSize: [2, 2],
|
||||
smooth: 0.2, //曲线变平滑
|
||||
showSymbol: false,
|
||||
data: [],
|
||||
type: chartInfo.type,
|
||||
},
|
||||
//visible: true,
|
||||
//threshold: null,
|
||||
metric_name: '',
|
||||
};
|
||||
|
||||
if(chartInfo.type === 'stackArea'){
|
||||
seriesItem.theData.type='line';
|
||||
seriesItem.theData.stack=chartInfo.title;
|
||||
seriesItem.theData.areaStyle={"opacity": 0.3};
|
||||
}
|
||||
// 图表中每条线的名字,后半部分
|
||||
let host = '';//up,
|
||||
if(queryItem.metric.__name__){
|
||||
host = `${queryItem.metric.__name__}{`;//up,
|
||||
}
|
||||
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
|
||||
// 设置时间-数据格式对
|
||||
let tempArr = [];
|
||||
let dpsArr = [];
|
||||
if (this.isModel) {
|
||||
let timeStamp = Math.floor(new Date().getTime()/1000);
|
||||
for (let i = 0; i < 20; i++) {
|
||||
tempArr.push([timeStamp - (20-i)*15, Math.floor(Math.random()*10) + ""]);
|
||||
dpsArr.push([i+"", tempArr[i]]);
|
||||
if (chartInfo.type === 'stackArea') {
|
||||
seriesItem.theData.type = 'line';
|
||||
seriesItem.theData.stack = chartInfo.title;
|
||||
seriesItem.theData.areaStyle = {"opacity": 0.3};
|
||||
}
|
||||
} else {
|
||||
// 图表中每条线的名字,后半部分
|
||||
let host = '';//up,
|
||||
if (queryItem.metric.__name__) {
|
||||
host = `${queryItem.metric.__name__}{`;//up,
|
||||
}
|
||||
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
|
||||
// 设置时间-数据格式对
|
||||
let tempArr = [];
|
||||
let dpsArr = [];
|
||||
tempArr = queryItem.values;
|
||||
dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
|
||||
dpsArr = dpsArr.map(item => {
|
||||
return [item[0], [item[1][0], Number(item[1][1])]]
|
||||
})
|
||||
}
|
||||
// 判断是否有数据, && tagsArr.length > 0
|
||||
if (dpsArr.length > 0 && this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
|
||||
tagsArr.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${queryItem.metric[tag]}",`;
|
||||
}
|
||||
});
|
||||
if(host.endsWith(',')){host = host.substr(0,host.length-1);}
|
||||
if(queryItem.metric.__name__){
|
||||
host +="}";
|
||||
}
|
||||
if(!host || host===''){
|
||||
host = chartItem.elements[innerPos].expression;
|
||||
}
|
||||
//处理legend别名
|
||||
let alias=this.$refs['editChart'+chartItem.id][0].dealLegendAlias(host,chartItem.elements[innerPos].legend);
|
||||
if(!alias || alias===''){
|
||||
alias = host;
|
||||
}
|
||||
legend.push({name:host+resIndex,alias:alias});
|
||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
||||
seriesItem.theData.name = host+resIndex;
|
||||
//alert(seriesItem.theData.name);
|
||||
seriesItem.metric_name = seriesItem.theData.name;
|
||||
// 将秒改为毫秒
|
||||
//alert('table=='+JSON.stringify(queryItem))
|
||||
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
|
||||
/*曲线汇总暂不需要
|
||||
if (sumData.data[dpsIndex]) {
|
||||
const sumNum = sumData.data[dpsIndex][1] || 0;
|
||||
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
|
||||
} else {
|
||||
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
|
||||
}
|
||||
*/
|
||||
let t_date = new Date(dpsItem[0] * 1000);
|
||||
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
|
||||
tableData.push({//表格数据
|
||||
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
|
||||
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
|
||||
element:{element:host,alias:alias},
|
||||
time: timeTmp,//采集时间
|
||||
value: dpsItem[1],//数值
|
||||
// 判断是否有数据, && tagsArr.length > 0
|
||||
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
||||
tagsArr.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${queryItem.metric[tag]}",`;
|
||||
}
|
||||
});
|
||||
return [dpsItem[0] * 1000, dpsItem[1]];
|
||||
});
|
||||
series.push(seriesItem.theData);
|
||||
if (host.endsWith(',')) {
|
||||
host = host.substr(0, host.length - 1);
|
||||
}
|
||||
if (queryItem.metric.__name__) {
|
||||
host += "}";
|
||||
}
|
||||
if (!host || host === '') {
|
||||
host = chartItem.elements[innerPos].expression;
|
||||
}
|
||||
//处理legend别名
|
||||
let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
|
||||
if (!alias || alias === '') {
|
||||
alias = host;
|
||||
}
|
||||
legend.push({name: host + resIndex, alias: alias});
|
||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
||||
seriesItem.theData.name = host + resIndex;
|
||||
//alert(seriesItem.theData.name);
|
||||
seriesItem.metric_name = seriesItem.theData.name;
|
||||
// 将秒改为毫秒
|
||||
//alert('table=='+JSON.stringify(queryItem))
|
||||
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
|
||||
/*曲线汇总暂不需要
|
||||
if (sumData.data[dpsIndex]) {
|
||||
const sumNum = sumData.data[dpsIndex][1] || 0;
|
||||
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
|
||||
} else {
|
||||
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
|
||||
}
|
||||
*/
|
||||
let t_date = new Date(dpsItem[0] * 1000);
|
||||
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
|
||||
tableData.push({//表格数据
|
||||
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
|
||||
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
|
||||
element: {element: host, alias: alias},
|
||||
time: timeTmp,//采集时间
|
||||
value: dpsItem[1],//数值
|
||||
});
|
||||
return [dpsItem[0] * 1000, dpsItem[1]];
|
||||
});
|
||||
series.push(seriesItem.theData);
|
||||
|
||||
} else if (chartItem.elements && chartItem.elements[innerPos]) {
|
||||
// 无数据提示
|
||||
/*
|
||||
const currentInfo = chartItem.elements[innerPos];
|
||||
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
|
||||
this.$message.warning({
|
||||
duration: 15,
|
||||
content: errorMsg,
|
||||
closable: true,
|
||||
});
|
||||
*/
|
||||
}
|
||||
});
|
||||
} else if (chartItem.elements && chartItem.elements[innerPos]) {
|
||||
// 无数据提示
|
||||
/*
|
||||
const currentInfo = chartItem.elements[innerPos];
|
||||
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
|
||||
this.$message.warning({
|
||||
duration: 15,
|
||||
content: errorMsg,
|
||||
closable: true,
|
||||
});
|
||||
*/
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (response.msg) {
|
||||
//this.$message.error(response.msg);
|
||||
errorMsg = response.msg;
|
||||
} else if (response.error) {
|
||||
//this.$message.error(response.error);
|
||||
errorMsg = response.error;
|
||||
} else {
|
||||
//this.$message.error(response);
|
||||
errorMsg = response;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(response.msg){
|
||||
//this.$message.error(response.msg);
|
||||
errorMsg = response.msg;
|
||||
}else if(response.error){
|
||||
//this.$message.error(response.error);
|
||||
errorMsg = response.error;
|
||||
}else {
|
||||
//this.$message.error(response);
|
||||
errorMsg = response;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
|
||||
let chartData = {
|
||||
chartItem:chartItem,
|
||||
series:series,
|
||||
singleStatRlt:singleStatRlt,
|
||||
legend:legend,
|
||||
tableData:tableData,
|
||||
panelId:this.filter.panelId,
|
||||
filter:this.filter,
|
||||
filterType:filterType,
|
||||
errorMsg:errorMsg,
|
||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
||||
let chartData = {
|
||||
chartItem: chartItem,
|
||||
series: series,
|
||||
singleStatRlt: singleStatRlt,
|
||||
legend: legend,
|
||||
tableData: tableData,
|
||||
panelId: this.filter.panelId,
|
||||
filter: this.filter,
|
||||
filterType: filterType,
|
||||
errorMsg: errorMsg,
|
||||
}
|
||||
this.chartDataCacheGroup.set(chartInfo.id, chartData);
|
||||
if (chartItem.type === 'table') {//表格
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
|
||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
|
||||
this.filter.panelId, this.filter, '', errorMsg);
|
||||
}
|
||||
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
|
||||
if (series.length && chartItem.type === 4) {//曲线汇总
|
||||
//series.push(sumData);//后续需要
|
||||
}
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
||||
}
|
||||
} else if (chartItem.type === 'singleStat') {
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
|
||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
|
||||
this.filter.panelId, this.filter, '', errorMsg);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.chartDataCacheGroup.set(chartInfo.id,chartData);
|
||||
if (chartItem.type === 'table') {//表格
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
|
||||
this.filter.panelId, this.filter, filterType,errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
|
||||
this.filter.panelId, this.filter,'',errorMsg);
|
||||
}
|
||||
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
|
||||
if (series.length && chartItem.type === 4) {//曲线汇总
|
||||
//series.push(sumData);//后续需要
|
||||
}
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, filterType,errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend,'',errorMsg);
|
||||
}
|
||||
} else if(chartItem.type ==='singleStat'){
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
|
||||
this.filter.panelId, this.filter, filterType,errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
|
||||
this.filter.panelId, this.filter,'',errorMsg);
|
||||
} else {
|
||||
const type = chartItem.type;
|
||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
||||
if (type === 'table') {
|
||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter);
|
||||
}
|
||||
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
|
||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter);
|
||||
}
|
||||
} else if (chartItem.type === 'singleStat') {
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
|
||||
this.filter.panelId, this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
|
||||
this.filter.panelId, this.filter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const type = chartItem.type;
|
||||
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
|
||||
if (type === 'table') {
|
||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter);
|
||||
}
|
||||
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
|
||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter);
|
||||
}
|
||||
}else if(chartItem.type ==='singleStat'){
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, '',
|
||||
this.filter.panelId, this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, '',
|
||||
this.filter.panelId, this.filter);
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
this.$message.error(error.toString());
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
this.$message.error(error.toString());
|
||||
console.error(error)
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
modelStaticData(chartInfo, filterType) {
|
||||
let series = [];
|
||||
let seriesItem = {
|
||||
theData: {
|
||||
name: '',
|
||||
symbol:'emptyCircle', //去掉点
|
||||
symbolSize:[2,2],
|
||||
smooth:0.2, //曲线变平滑
|
||||
showSymbol:false,
|
||||
data: [],
|
||||
type:chartInfo.type,
|
||||
},
|
||||
//visible: true,
|
||||
//threshold: null,
|
||||
metric_name: '',
|
||||
};
|
||||
let legend = [];
|
||||
let tableData = [];
|
||||
if(chartInfo.type === 'stackArea'){
|
||||
seriesItem.theData.type='line';
|
||||
seriesItem.theData.stack=chartInfo.title;
|
||||
seriesItem.theData.areaStyle={"opacity": 0.3};
|
||||
}
|
||||
// 图表中每条线的名字,后半部分
|
||||
let host = 'host';//up,
|
||||
let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
|
||||
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
|
||||
// 设置时间-数据格式对
|
||||
let tempArr = [];
|
||||
let dpsArr = [];
|
||||
let timeStamp = Math.floor(new Date().getTime()/1000);
|
||||
for (let i = 0; i < 20; i++) {
|
||||
tempArr.push([timeStamp - (20-i)*15, Math.floor(Math.random()*10) + ""]);
|
||||
queryItem.values.push(tempArr[i])
|
||||
dpsArr.push([i+"", tempArr[i]]);
|
||||
}
|
||||
// 判断是否有数据, && tagsArr.length > 0
|
||||
if (dpsArr.length > 0 && this.$refs['editChart'+chartInfo.id] && this.$refs['editChart'+chartInfo.id].length>0) {
|
||||
tagsArr.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${queryItem.metric[tag]}",`;
|
||||
}
|
||||
});
|
||||
if(queryItem.metric.__name__){
|
||||
host +="}";
|
||||
}
|
||||
//处理legend别名
|
||||
let alias=this.$refs['editChart'+chartInfo.id][0].dealLegendAlias(host,chartInfo.elements[0].legend);
|
||||
if(!alias || alias===''){
|
||||
alias = host;
|
||||
}
|
||||
legend.push({name:host, alias:alias});
|
||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
||||
seriesItem.theData.name = host;
|
||||
//alert(seriesItem.theData.name);
|
||||
seriesItem.metric_name = seriesItem.theData.name;
|
||||
// 将秒改为毫秒
|
||||
//alert('table=='+JSON.stringify(queryItem))
|
||||
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
|
||||
/*曲线汇总暂不需要
|
||||
if (sumData.data[dpsIndex]) {
|
||||
const sumNum = sumData.data[dpsIndex][1] || 0;
|
||||
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
|
||||
} else {
|
||||
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
|
||||
}
|
||||
*/
|
||||
let t_date = new Date(dpsItem[0] * 1000);
|
||||
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
|
||||
tableData.push({//表格数据
|
||||
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
|
||||
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
|
||||
element:{element:host,alias:alias},
|
||||
time: timeTmp,//采集时间
|
||||
value: dpsItem[1],//数值
|
||||
});
|
||||
return [dpsItem[0] * 1000, dpsItem[1]];
|
||||
});
|
||||
series.push(seriesItem.theData);
|
||||
|
||||
} else if (chartInfo.elements && chartInfo.elements[0]) {
|
||||
// 无数据提示
|
||||
/*
|
||||
const currentInfo = chartItem.elements[innerPos];
|
||||
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
|
||||
this.$message.warning({
|
||||
duration: 15,
|
||||
content: errorMsg,
|
||||
closable: true,
|
||||
});
|
||||
*/
|
||||
}
|
||||
let singleStatRlt = 999;
|
||||
if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
|
||||
let errorMsg = '';
|
||||
let chartData = {
|
||||
chartItem: chartInfo,
|
||||
series: series,
|
||||
singleStatRlt: singleStatRlt,
|
||||
legend: legend,
|
||||
tableData: tableData,
|
||||
panelId: this.filter.panelId,
|
||||
filter: this.filter,
|
||||
filterType: filterType,
|
||||
errorMsg: errorMsg
|
||||
}
|
||||
this.chartDataCacheGroup.set(chartInfo.id, chartData);
|
||||
if (chartInfo.type === 'table') {//表格
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
|
||||
this.filter.panelId, this.filter, filterType, '');
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id][0].setData(chartInfo, tableData,
|
||||
this.filter.panelId, this.filter, '', '');
|
||||
}
|
||||
} else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
|
||||
if (series.length && chartInfo.type === 4) {//曲线汇总
|
||||
//series.push(sumData);//后续需要
|
||||
}
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
|
||||
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
|
||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
||||
}
|
||||
} else if (chartInfo.type === 'singleStat') {
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
|
||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
|
||||
this.filter.panelId, this.filter, '', errorMsg);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getAssetInfoChartData(chartInfo){
|
||||
@@ -1135,11 +1266,30 @@ export default {
|
||||
let data=response.data;
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
}else{
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.$refs['editChart'+chartInfo.id][0].endLoading();
|
||||
}else {
|
||||
let data = {Basic: {
|
||||
alert:0,
|
||||
assetType: "xxx",
|
||||
cabinet: "xxx",
|
||||
dataCenter: "xxx",
|
||||
endpoint: 1,
|
||||
host: "xxx.xxx.xxx.xxx",
|
||||
id: -1,
|
||||
model: "xxx",
|
||||
pingLastReply: new Date(),
|
||||
pingRtt: 0,
|
||||
pingStatus: 1,
|
||||
principal: "admin",
|
||||
purchaseDate: null,
|
||||
sn: "xxx",
|
||||
state: 1,
|
||||
tel: "xxxxxxxxxxx",
|
||||
vendor: "xxx"
|
||||
}};
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
}
|
||||
},
|
||||
// 设置图表的宽度
|
||||
|
||||
Reference in New Issue
Block a user