echarts导出图片+表格

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({
+      this.myChart = echarts.init(document.getElementById("chartsTimer"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
         url: "/business/trafficIncidents/exportSelectRoadSectionAnalysis",
         filename: name,
         data: this.data

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({
+      this.myChart = echarts.init(document.getElementById("chartsDays"));
-        method:'get',
+      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>
-  

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({
+      this.myChart = echarts.init(document.getElementById("chartsETime"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
-        url: "/business/trafficIncidents/exportSelectEventTypeAnalysis",
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
+        url: "/business/trafficIncidents/exportSelectEventTimeProportion",
         filename: name,
         data: this.data
       });

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({
+      this.myChart = echarts.init(document.getElementById("chartsEType"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
         url: "/business/trafficIncidents/exportSelectEventTypeAnalysis",
         filename: name,
         data: this.data

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

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({
+      this.myChart = echarts.init(document.getElementById("railwayDay"));
-        method:'get',
+      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 = {

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({
+      this.myChart = echarts.init(document.getElementById("chartsMuliple"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
         url: "/perceivedEvents/warning/exportManyTimesInterval",
         filename: name,
         data:this.data,

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({
+      this.myChart = echarts.init(document.getElementById("chartPile"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
         url: "/perceivedEvents/warning/exportSelectSection",
         filename: name,
         data:this.data,

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({
+      this.myChart = echarts.init(document.getElementById("situationEchartBox"));
-        method:'get',
+      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() {

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({
+      this.myChart = echarts.init(document.getElementById("ctypeAnalysis"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
         url: "/perceivedEvents/warning/exportSelectWarningType",
         filename: name,
         data:this.data,

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({
+      this.myChart = echarts.init(document.getElementById("feeChart"));
-        method:'get',
+      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(){

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({
+      this.myChart = echarts.init(document.getElementById("anaFlow"));
-        method:'get',
+      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,

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({
+      this.myChart = echarts.init(document.getElementById("flowStateEchartBox"));
-        method:'get',
+      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(){

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({
+      this.myChart = echarts.init(document.getElementById("anaSituation"));
-        method:'get',
+      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,

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({
+      this.myChart = echarts.init(document.getElementById("chartsTimer"));
-        method:'get',
+      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,

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({
+      this.myChart = echarts.init(document.getElementById("chtSection"));
-        method:'get',
+      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,

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({
+      this.myChart = echarts.init(document.getElementById("divTimer"));
-        method:'get',
+      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,

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({
+      this.myChart = echarts.init(document.getElementById("nucleusThrough"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
         url: `/business/manage/exportEventTypePublishManageMonth`,
         filename: name,
         data: this.data

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({
+      this.myChart = echarts.init(document.getElementById("postTrendsDay"));
-        method:'get',
+      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>
-  

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({
+      this.myChart = echarts.init(document.getElementById("postTrendsMonth"));
-        method:'get',
+      this.data.fileUrl = this.myChart.getDataURL({
+        type: 'png',  // 可以选择 'png' 或 'jpeg'
+        backgroundColor: '#132d38'  // 指定背景色，确保与图表一致
+      })
+      exportImgFile({
+        method:'post',
         url: `/business/manage/exportMonthTrendsPublishManage`,
         filename: name,
         data:this.data,

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