Browse Source

echarts导出图片+表格

develop
lau572 4 months ago
parent
commit
ae5d023e27
  1. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/ctimer/index.vue
  2. 14
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/days/index.vue
  3. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/etime/index.vue
  4. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/etype/index.vue
  5. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue
  6. 17
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/day/index.vue
  7. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/muliple/index.vue
  8. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/pile/index.vue
  9. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/railway/index.vue
  10. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/type/index.vue
  11. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/index.vue
  12. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/flow/index.vue
  13. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue
  14. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/section/index.vue
  15. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/timer/index.vue
  16. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/analysis/section/index.vue
  17. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/analysis/timer/index.vue
  18. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/nucleusThrough/index.vue
  19. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/postTrendsDay/index.vue
  20. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/postTrendsMonth/index.vue
  21. 41
      ruoyi-ui/src/views/JiHeExpressway/utils/common.js

11
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/ctimer/index.vue

@ -5,7 +5,7 @@
<script>
import * as echarts from "echarts";
import chartsOptions from "./charts";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
import {
selectRoadSection,
@ -22,8 +22,13 @@ export default {
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("chartsTimer"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/trafficIncidents/exportSelectRoadSectionAnalysis",
filename: name,
data: this.data

14
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/days/index.vue

@ -6,7 +6,7 @@
import * as echarts from "echarts";
import chartsStatistics from "./charts";
import { eventTrend } from "@/api/event/governanceAnalysis"
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: 'chartsDays',
@ -20,11 +20,16 @@ export default {
},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("chartsDays"));
let fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/trafficIncidents/exportGetEventTrend",
filename: name,
data: {},
data: {fileUrl:fileUrl},
});
},
getEventTrend() {
@ -70,4 +75,3 @@ export default {
width: 100%;
}
</style>

13
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/etime/index.vue

@ -5,7 +5,7 @@
<script>
import * as echarts from "echarts";
import chartsOptions from "./charts";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
import request from '@/utils/request'
export default {
name: "ChartsETime",
@ -19,9 +19,14 @@ export default {
methods: {
export(name){
exportFile({
method:'get',
url: "/business/trafficIncidents/exportSelectEventTypeAnalysis",
this.myChart = echarts.init(document.getElementById("chartsETime"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/trafficIncidents/exportSelectEventTimeProportion",
filename: name,
data: this.data
});

11
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/etype/index.vue

@ -8,7 +8,7 @@ import chartsOptions from "./charts";
import {
selectEventType,
} from "@/api/event/governanceAnalysis";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "ChartsEType",
@ -21,8 +21,13 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("chartsEType"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/trafficIncidents/exportSelectEventTypeAnalysis",
filename: name,
data: this.data

3
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue

@ -42,7 +42,7 @@
<section class="cright">
<div class="title">
<div class="icon"></div>事故时间分析
<ChartExport @export="$refs.refEType.export('事故时间分析')" />
<ChartExport @export="$refs.refETime.export('事故时间分析')" />
</div>
<ETime ref="refETime" />
</section>
@ -241,4 +241,3 @@ export default {
}
}
</style>

17
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/day/index.vue

@ -7,7 +7,7 @@ import * as echarts from "echarts";
import chartsStatistics from "./charts";
import request from '@/utils/request'
import moment from "moment";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "RailWayDay",
@ -22,12 +22,23 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("railwayDay"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/perceivedEvents/warning/exportSelectStateType",
filename: name,
data:this.data,
});
// exportFile({
// method:'get',
// url: "/perceivedEvents/warning/exportSelectStateType",
// filename: name,
// data:this.data,
// });
},
bind(){
this.data = {

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/muliple/index.vue

@ -7,7 +7,7 @@ import * as echarts from "echarts";
import chartsStatistics from "./charts";
import { getDailyCumulativeMonth } from "@/api/event/perceiveEvent";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "Muliple",
@ -33,8 +33,13 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("chartsMuliple"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/perceivedEvents/warning/exportManyTimesInterval",
filename: name,
data:this.data,

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/pile/index.vue

@ -7,7 +7,7 @@ import * as echarts from "echarts";
import chartOption from "./charts";
import { getSectionMarkNumber } from "@/api/event/perceiveEvent";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
@ -32,8 +32,13 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("chartPile"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/perceivedEvents/warning/exportSelectSection",
filename: name,
data:this.data,

13
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/railway/index.vue

@ -8,7 +8,7 @@
import * as echarts from "echarts";
import chartsStatistics from "./charts";
import request from "@/utils/request";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
@ -32,11 +32,16 @@ export default {
created() { },
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("situationEchartBox"));
this.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/perceivedEvents/warning/exportSectionPerceivedList",
filename: name,
data:{},
data:{fileUrl:this.fileUrl},
});
},
bind() {

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/analysis/type/index.vue

@ -28,7 +28,7 @@ import chartsStatistics from "./charts";
import { getWarningTypeDay } from "@/api/event/perceiveEvent";
import request from '@/utils/request'
import {WarnintType} from '@screen/utils/enum.js'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "TypeAnalysis",
@ -54,8 +54,13 @@ export default {
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("ctypeAnalysis"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/perceivedEvents/warning/exportSelectWarningType",
filename: name,
data:this.data,

13
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/index.vue

@ -10,7 +10,7 @@
import * as echarts from "echarts";
import chartOptions from "./charts";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "Flowstate",
@ -42,11 +42,16 @@ export default {
})
},
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("feeChart"));
let fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/traffic-statistics/history/exportTrafficFlowAtTollStationEntranceHour",
filename: name,
data:{},
data:{fileUrl:fileUrl},
});
},
async bind(){

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/flow/index.vue

@ -6,7 +6,7 @@
import * as echarts from "echarts";
import chartsStatistics from "./charts";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "AnaFlow",
@ -28,8 +28,13 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("anaFlow"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/traffic-statistics/history/exportRealTimeTrafficFlow",
filename: name,
data: this.data,

13
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue

@ -10,7 +10,7 @@
import * as echarts from "echarts";
import chartOptions from "./charts";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
@ -41,11 +41,16 @@ export default {
})
},
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("flowStateEchartBox"));
let fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/traffic-statistics/history/exportRealTimeTrafficFlowHour",
filename: name,
data:{},
data:{fileUrl:fileUrl},
});
},
async bind(){

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/section/index.vue

@ -8,7 +8,7 @@
import * as echarts from "echarts";
import chartsOption from "./charts";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "AnaSituation",
@ -30,8 +30,13 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("anaSituation"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/traffic-statistics/history/exportSectionTrafficRanking",
filename: name,
data: this.data,

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/timer/index.vue

@ -6,7 +6,7 @@
import * as echarts from "echarts";
import chartOption from "./charts";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "Timer",
@ -28,8 +28,13 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("chartsTimer"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/traffic-statistics/history/exportTrafficPeriodAnalysis",
filename: name,
data: this.data,

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/analysis/section/index.vue

@ -6,7 +6,7 @@
import * as echarts from "echarts";
import request from '@/utils/request'
import chartOption from "./charts";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
const enum_group = [
{name: '殷家林枢纽', id: 1},
@ -43,8 +43,13 @@ export default {
created() { },
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("chtSection"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/traffic-statistics/history/exportSectionTrafficIndexAnalysis",
filename: name,
data: this.data,

11
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/analysis/timer/index.vue

@ -6,7 +6,7 @@
import * as echarts from "echarts";
import chartOption from "./charts";
import request from '@/utils/request'
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
@ -26,8 +26,13 @@ export default {
created() {},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("divTimer"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/traffic-statistics/history/exportPassIndicatorTimeDistribution",
filename: name,
data: this.data,

11
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/nucleusThrough/index.vue

@ -5,7 +5,7 @@
<script>
import * as echarts from "echarts";
import request from "@/utils/request";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "nucleusThrough",
components: {
@ -24,8 +24,13 @@ export default {
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("nucleusThrough"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: `/business/manage/exportEventTypePublishManageMonth`,
filename: name,
data: this.data

13
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/postTrendsDay/index.vue

@ -6,7 +6,7 @@
import * as echarts from "echarts";
import chartsStatistics from "./charts";
import request from "@/utils/request";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: 'RailWayDay',
components: {
@ -26,10 +26,16 @@ export default {
},
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("postTrendsDay"));
let fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: "/business/manage/exportTrendsPublishManage",
filename: name,
data:{fileUrl:fileUrl}
});
},
bindTrendsPublishManage(){
@ -77,4 +83,3 @@ export default {
width: 100%;
}
</style>

11
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/postTrendsMonth/index.vue

@ -7,7 +7,7 @@ import * as echarts from "echarts";
import chartsStatistics from "./charts";
import request from "@/utils/request";
import moment from "moment";
import { exportFile } from "@screen/utils/common";
import { exportImgFile,exportFile } from "@screen/utils/common";
export default {
name: "postTrendsMonth",
components: {
@ -27,8 +27,13 @@ export default {
methods: {
export(name){
exportFile({
method:'get',
this.myChart = echarts.init(document.getElementById("postTrendsMonth"));
this.data.fileUrl = this.myChart.getDataURL({
type: 'png', // 'png' 'jpeg'
backgroundColor: '#132d38' //
})
exportImgFile({
method:'post',
url: `/business/manage/exportMonthTrendsPublishManage`,
filename: name,
data:this.data,

41
ruoyi-ui/src/views/JiHeExpressway/utils/common.js

@ -33,6 +33,47 @@ export function delay(ms = 240) {
return new Promise((resolve) => setTimeout(() => resolve(void 0), ms));
}
/**
*
* @param {{ method?: string; url: string; data?: string; type?: string; filename?: string; }} options
*/
export function exportImgFile({
url,
method = "post",
data,
type = "application/vnd.ms-excel",
filename = "download",
ext = "xlsx",
} = {}) {
if (!url) return;
const closeMessage = loadingMessage({ message: "文件下载中..." });
request({
url,
method,
responseType: "blob",
data: {
...data,
}
})
.then((result) => {
const blob = new Blob([result], { type });
const downloadElement = document.createElement("a");
const href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = result.filename || `${filename}.${ext}`;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
Message.success("文件下载成功");
})
.catch((err) => {
Message.error("文件下载失败");
})
.finally(() => closeMessage());
}
/**
*
* @param {{ method?: string; url: string; data?: string; type?: string; filename?: string; }} options

Loading…
Cancel
Save