diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 5844b0063..1bd3768af 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -146,7 +146,7 @@
-
+
@@ -205,11 +205,11 @@
lineNum:3,//每页加载的行数
pagePanelId:'',//当前分页的panelId
dragging: null,
- chartDataCacheGroup:new Map,//图表数据缓存,用于查询:id:{}
+ //chartDataCacheGroup:new Map,//图表数据缓存,用于查询:id:{}
stepHeight: 50,
tempDom: {height: "", width: ""},
- showShadow:false,
+ //showShadow:false,
};
},
methods: {
@@ -229,129 +229,19 @@
}
this.dataListDragTmp = [...this.dataList];
},
- end (event) {
- //console.info("end event:", event)
- if(this.dataList.length===1){return}//解决当元素只有一个移动会报错的问题
- let item = event.item;
- let oldIndex = event.oldIndex;
- let newIndex = event.newIndex;
- let newItem = this.dataList[newIndex];
- //移动前,移动元素前后元素next及prev修改;移动后,移动元素前后元素next及prev修改--start
- let len = this.dataListDragTmp.length;//移动之前的元素列表
- let endIndex = len-1;
- if(oldIndex===0){//挪动之前为第一个元素
- let oldNextItem = this.dataListDragTmp[oldIndex+1];
- let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
- nextItem.prev = 0;
- }else if(oldIndex===endIndex){//挪动之前为最后一个元素
- let oldPrevItem = this.dataListDragTmp[oldIndex-1];
- let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
- prevItem.next = -1;
- }else{//挪动之前为中间元素
- let oldPrevItem = this.dataListDragTmp[oldIndex-1];
- let oldNextItem = this.dataListDragTmp[oldIndex+1];
- let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
- let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
- prevItem.next = oldNextItem.id;
- nextItem.prev = oldPrevItem.id;
- }
-
- if(newIndex===0){//挪动之后为第一个元素
- let newNextItem = this.dataList[newIndex+1];
- newNextItem.prev = newItem.id;
- }else if(newIndex===endIndex){//挪动之后为最后一个元素
- let newPrevItem = this.dataList[newIndex-1];
- newPrevItem.next =newItem.id;
- }else{//挪动之后为中间元素
- let newPrevItem = this.dataList[newIndex-1];
- let newNextItem = this.dataList[newIndex+1];
- newPrevItem.next = newItem.id;
- newNextItem.prev = newItem.id;
- }
- //移动前,移动元素前后元素next及prev修改;移动后,移动元素前后元素next及prev修改--end
-
- //前台总列表中的顺序也得修改(dataTotalList及dataTotalListBak),后台接口也得调用
- if(newIndex{
- if(item.id===newNextItem.id){
- nextItemIndexInTotal = index;
- }
- })
- // console.log('从后往前移动:next元素在总列表中之前的元素的index='+nextItemIndexInTotal)
- if(nextItemIndexInTotal>0){//总列表中:移动之后的当前元素后面的元素之前有元素
- let prevItem = this.dataTotalListBak[nextItemIndexInTotal-1];
- newItem.prev = prevItem.id;
- }else{//之前无元素
- newItem.prev = 0;
- }
- }else if(newIndex>oldIndex){//从前往后移动
- //console.log('从前往后移动:oldIndex='+oldIndex+',newIndex='+newIndex)
- let newPrevItem = this.dataList[newIndex-1];
- newItem.prev = newPrevItem.id;
-
- let prevItemIndexInTotal = -1;
- this.dataTotalListBak.forEach((item,index)=>{
- if(item.id===newPrevItem.id){
- prevItemIndexInTotal = index;
- }
+ end(event) {
+ if (event.oldIndex !== event.newIndex) {
+ let newWeights = [];
+ this.dataList.forEach((item, index) => {
+ item.weight = index;
+ newWeights.push({id: item.id, weight: index});
});
- //console.log('从前往后移动:prev元素在总列表中之后的元素的index='+prevItemIndexInTotal)
- if(prevItemIndexInTotal {
+ if (response.code !== 200) {
- }
- //更新图表prev和next
- const modifyParams = {
- id:newItem.id,
- span:newItem.span,
- height:newItem.height,
- prev:newItem.prev,
- next:newItem.next,
- };
-
- if(this.dataList.length>1 && oldIndex !== newIndex){
- this.showShadow=true;
- this.$put('panel/'+ this.pagePanelId+'/charts/modify',modifyParams).then(response => {
- if (response.code === 200) {
- //修改前台列表中元素的顺序
- let curItem = this.dataTotalListBak.find((item,index)=>{return newItem.id===item.id});
- let curIndex = this.dataTotalListBak.indexOf(curItem);
- this.dataTotalListBak.splice(curIndex,1);
-
- let nextItemTmp = this.dataTotalListBak.find((item)=>{return item.id===newItem.next});
- if(nextItemTmp){
- let nextIndex = this.dataTotalListBak.indexOf(nextItemTmp);
- this.dataTotalListBak.splice(nextIndex,0,newItem);
- }else{//移动到最后一个元素
- this.dataTotalListBak.push(newItem);
- }
- this.dataList = this.dataTotalListBak;
- this.$nextTick(()=>{
- this.showShadow=false;
- })
- }else {
- if(response.msg){
- this.$message.error(response.msg);
- }else if(response.error){
- this.$message.error(response.error);
- }else {
- this.$message.error(response);
- }
}
});
}
- let chartTitle = item.querySelector('.chartTitle');
- chartTitle.style.background = '';
},
move(event, orgin) {
let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green fallback-class choose-class:purple
@@ -654,26 +544,27 @@
});
if(response.data.list){
- this.dataTotalList = response.data.list;
+ this.dataTotalListBak = response.data.list;
}else {
- this.dataTotalList = response.data;
+ this.dataTotalListBak = response.data;
}
- this.dataTotalListBak = [...this.dataTotalList];
+ let chartListTmp = [];
//查询条件带name
if(this.filter.searchName&&this.filter.searchName!=''){
- let chartListTmp = [];
let searchTitleStr = this.filter.searchName;
this.dataTotalListBak.forEach((item)=>{
if(item.title.indexOf(searchTitleStr)>-1){
chartListTmp.push(item);
}
});
- this.dataTotalList = chartListTmp;
+ } else {
+ chartListTmp = this.dataTotalListBak;
}
+ this.dataTotalList = [...chartListTmp];
this.dataList = [...this.dataTotalList];
- this.showShadow=false;
+ //this.showShadow=false;
this.$nextTick(() => {
if (this.dataList.length > 0 ) {
this.dataList.forEach((item,index) => {
@@ -791,6 +682,7 @@
}else {
this.getChartData(chartItem, realIndex);
}
+ chartData = null;
},
// 获取一个图表具体数据,图表信息,图表位置index
getChartData(chartInfo, pos, filterType) {
@@ -886,16 +778,16 @@
// 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => {
if (res.length > 0) {
- const series = [];
+ let series = [];
let singleStatRlt = '';
- const legend = [];
- const tableData = [];
- const sumData = {
+ let legend = [];
+ let tableData = [];
+ /*let sumData = {
name: 'sum',
data: [],
visible: true,
threshold: null,
- };
+ };*/
let errorMsg = "";
res.forEach((response, innerPos) => {
if (response.status === 'success') {
@@ -913,7 +805,7 @@
}
} else {
response.data.result.forEach((queryItem, resIndex) => {
- const seriesItem = {
+ let seriesItem = {
theData: {
name: '',
symbol: 'emptyCircle', //去掉点
@@ -1020,7 +912,7 @@
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
-
+ seriesItem = null;
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
@@ -1555,6 +1447,7 @@
},
//复制图表
duplicateChart(chartId,duplicateChartBack){
+ console.info(chartId, duplicateChartBack);
let duplicateChartId = duplicateChartBack.id;
let chart;
let chartIndex = -1;
@@ -1661,6 +1554,7 @@
}
});
},
+ //懒加载,判断网页区域,加载可见区的prom数据
handleElementInViewport(ele,scrollTop,item,index,isSearch) {
/*
网页被卷去的高:document.body.scrollTop
@@ -1705,6 +1599,9 @@
}, 100);
},
},
+ created() {
+ this.chartDataCacheGroup = new Map;
+ },
mounted() {
this.tempDomInit();
},
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 6e8c75af9..0f36998e0 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -379,8 +379,8 @@
}
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
- seriesItem=seriesItem.map(item=>{
- if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
+ seriesItem && (seriesItem = seriesItem.map(item=>{
+ if(chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type){
let type=chartItem.param.valueMapping.type;
let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
let value = item.value;
@@ -394,7 +394,7 @@
item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
}
return item;
- })
+ }));
if (area === 'showFullScreen') {//全屏按时间查询
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index b38f9821b..2d4569f8b 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -643,7 +643,7 @@
.chart-text-preview .ql-container.ql-snow {
border: unset !important;
}
-.page-shadow{
+/*.page-shadow{
position: absolute;
top: 0px;
left: 0px;
@@ -651,4 +651,4 @@
width: 100%;
background-color: rgba(0,0,0,.1);
z-index: 100;
-}
+}*/
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 7a1c05713..64893c591 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -222,9 +222,9 @@
return {
data: {}, // 该图表信息,chartItem
noData:false,
+ seriesLength:20,
/*seriesItem: [], // 保存信息
seriesItemArr:[],// 初次加载的数据
- seriesLength:20,
seriesItemScreen:[],
seriesItemArrScreen:[],*/
/*legendListMore:[],
@@ -1054,8 +1054,8 @@
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
- this.setColor(legend.length);
- legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
+ legend && this.setColor(legend.length);
+ legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
this.filter.from = filter.from;
if(errorMsg && errorMsg!==''){
this.isError = true;
@@ -1098,7 +1098,7 @@
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
- this.seriesItem=seriesItem;
+ //this.seriesItem=seriesItem;
let seriesItemArr=seriesItem;
if(seriesItem.length>this.seriesLength){
seriesItemArr=seriesItem.filter((item,index)=>index