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 (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