diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 8d4411dde..0a8c33f86 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -89,6 +89,7 @@ :ref="'editChart'+item.id" @on-refresh-data="refreshChart" @on-remove-chart-block="removeChart" + @on-duplicate-chart-block="duplicateChart" @on-drag-chart="editChartForDrag" @on-edit-chart-block="editData" :panel-id="filter.panelId" @@ -99,6 +100,7 @@ @on-refresh-data="refreshChart" @on-search-data="searchData" @on-remove-chart-block="removeChart" + @on-duplicate-chart-block="duplicateChart" @on-drag-chart="editChartForDrag" @on-edit-chart-block="editData" :panel-id="filter.panelId" @@ -109,6 +111,7 @@ @on-refresh-data="refreshChart" @on-search-data="searchData" @on-remove-chart-block="removeChart" + @on-duplicate-chart-block="duplicateChart" @on-drag-chart="editChartForDrag" @on-edit-chart-block="editData" :panel-id="filter.panelId" @@ -119,6 +122,7 @@ @on-refresh-data="refreshChart" @on-search-data="searchData" @on-remove-chart-block="removeChart" + @on-duplicate-chart-block="duplicateChart" @on-drag-chart="editChartForDrag" @on-edit-chart-block="editData" :panel-id="filter.panelId" @@ -1062,6 +1066,67 @@ export default { this.$emit('on-remove-chart', chart); } }, + //复制图表 + duplicateChart(chartId,duplicateChartBack){ + let duplicateChartId = duplicateChartBack.id; + let chart; + let chartIndex = -1; + this.dataList.forEach((item,index)=>{ + if(item.id===chartId){ + chartIndex = index; + chart = item; + } + }); + let chartNext; + let chartNextIndex = chartIndex+1; + if(chartNextIndex<=(this.dataList.length-1)){ + chartNext = this.dataList[chartNextIndex]; + } + + if (chart) { + chart.next = duplicateChartId; + let duplicateChart = JSON.parse(JSON.stringify(chart)); + duplicateChart.id = duplicateChartId; + duplicateChart.prev = duplicateChartBack.prev; + duplicateChart.next = duplicateChartBack.next; + duplicateChart.title = duplicateChartBack.title; + if(chartNext){ + chartNext.prev = duplicateChartId; + } + + this.dataList.splice(chartNextIndex,0,duplicateChart); + + let indexInTotal = this.dataTotalList.indexOf(chart); + this.dataTotalList.splice(indexInTotal+1,0,duplicateChart); + let chartInTotal = this.dataTotalList.find(item => item.id === chartId); + chartInTotal.next = duplicateChartId; + let chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id); + chartNextInTotal.prev = chartNext.prev; + + let indexInTotalBak = this.dataTotalListBak.indexOf(chart); + this.dataTotalListBak.splice(indexInTotalBak+1,0,duplicateChart); + let chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId); + chartInTotalBak.next = duplicateChartId; + let chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id); + chartNextInTotalBak.prev = chartNext.prev; + + this.currentRecordNum = this.currentRecordNum+1; + let chartData = this.chartDataCacheGroup.get(chart.id); + this.chartDataCacheGroup.set(duplicateChartId,chartData); + this.$nextTick(() => { + if (this.$refs['editChart'+duplicateChartId][0]) { + this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现 + } + + let chartType = duplicateChart.type; + if(chartType!=='url'){ + this.getChartDataForSearch(duplicateChart,chartNextIndex); + }else { + this.setSize(duplicateChart.span, chartNextIndex); // 设置该图表宽度 + } + }); + } + }, // 编辑图表 editData(chartId) { // 获取该id下chart的相关信息 diff --git a/nezha-fronted/src/components/charts/chart-single-stat.scss b/nezha-fronted/src/components/charts/chart-single-stat.scss index b72d03028..4df08fc1d 100644 --- a/nezha-fronted/src/components/charts/chart-single-stat.scss +++ b/nezha-fronted/src/components/charts/chart-single-stat.scss @@ -20,7 +20,7 @@ visibility: visible; } .nz-chart-dropdown { - height: 147px; + height: 180px; li { /*padding: 0 20px !important;*/ padding-left:15px !important; diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue index ef3f1a6db..6322c9bea 100644 --- a/nezha-fronted/src/components/charts/chart-single-stat.vue +++ b/nezha-fronted/src/components/charts/chart-single-stat.vue @@ -37,6 +37,8 @@ {{$t('dashboard.delete')}}
  • {{$t('dashboard.screen')}}
    • +
  • + {{$t('dashboard.duplicate')}}
    • @@ -344,6 +346,28 @@ export default { }, clearChart(){ this.data = {}; + }, + duplicate(){ + this.dropdownMenuShow=false; + const param = {id:this.data.id}; + this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => { + if (response.code === 200) { + this.$message({ + duration: 2000, + type: 'success', + message: this.$t("tip.duplicateSuccess") + }); + this.$emit('on-duplicate-chart-block', this.data.id,response.data); + }else { + if(response.msg){ + this.$message.error(response.msg); + }else if(response.error){ + this.$message.error(response.error); + }else { + this.$message.error(response); + } + } + }); }, // 全屏查看 showAllScreen() { diff --git a/nezha-fronted/src/components/charts/chart-table.scss b/nezha-fronted/src/components/charts/chart-table.scss index f1a726462..30c59fef7 100644 --- a/nezha-fronted/src/components/charts/chart-table.scss +++ b/nezha-fronted/src/components/charts/chart-table.scss @@ -20,7 +20,7 @@ visibility: visible; } .nz-chart-dropdown { - height: 147px; + height: 180px; li { /*padding: 0 20px !important;*/ padding-left:15px !important; diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index 1ad83d980..b4d5750c6 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -45,6 +45,8 @@ {{$t('dashboard.delete')}}
  • {{$t('dashboard.screen')}}
    • +
  • + {{$t('dashboard.duplicate')}}
    • @@ -569,6 +571,28 @@ export default { }, clearChart(){ this.data = {}; + }, + duplicate(){ + this.dropdownMenuShow=false; + const param = {id:this.data.id}; + this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => { + if (response.code === 200) { + this.$message({ + duration: 2000, + type: 'success', + message: this.$t("tip.duplicateSuccess") + }); + this.$emit('on-duplicate-chart-block', this.data.id,response.data); + }else { + if(response.msg){ + this.$message.error(response.msg); + }else if(response.error){ + this.$message.error(response.error); + }else { + this.$message.error(response); + } + } + }); }, // 全屏查看 showAllScreen() { diff --git a/nezha-fronted/src/components/charts/chart-url.scss b/nezha-fronted/src/components/charts/chart-url.scss index 4b3ea93ba..af570eeec 100644 --- a/nezha-fronted/src/components/charts/chart-url.scss +++ b/nezha-fronted/src/components/charts/chart-url.scss @@ -20,7 +20,7 @@ visibility: visible; } .nz-chart-dropdown { - height: 147px; + height: 180px; li { /*padding: 0 20px !important;*/ padding-left:15px !important; diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue index 509ae9065..335d27ebe 100644 --- a/nezha-fronted/src/components/charts/chart-url.vue +++ b/nezha-fronted/src/components/charts/chart-url.vue @@ -27,6 +27,8 @@ {{$t('dashboard.delete')}}
  • {{$t('dashboard.screen')}}
    • +
  • + {{$t('dashboard.duplicate')}}
    • @@ -340,6 +342,28 @@ export default { this.dropdownMenuShow=false; this.screenModal = true; }, + duplicate(){ + this.dropdownMenuShow=false; + const param = {id:this.data.id}; + this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => { + if (response.code === 200) { + this.$message({ + duration: 2000, + type: 'success', + message: this.$t("tip.duplicateSuccess") + }); + this.$emit('on-duplicate-chart-block', this.data.id,response.data); + }else { + if(response.msg){ + this.$message.error(response.msg); + }else if(response.error){ + this.$message.error(response.error); + }else { + this.$message.error(response); + } + } + }); + }, setLoadFrameFull(){ let that = this; this.$nextTick(() => { diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss index 96c3399ea..9ad843023 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.scss +++ b/nezha-fronted/src/components/charts/line-chart-block.scss @@ -52,7 +52,7 @@ line-height: 20px; } .nz-chart-dropdown { - height: 147px; + height: 180px; li { /*padding: 0 20px !important;*/ padding-left:15px !important; diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 2bb4b6ccb..cc9486eb7 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -59,6 +59,8 @@ {{$t('dashboard.delete')}}
  • {{$t('dashboard.screen')}}
    • +
  • + {{$t('dashboard.duplicate')}}