Browse Source

echarts导出图片+表格

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

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

@ -7,9 +7,9 @@
统计
</ButtonGradient>
</div>
<div class="box" :style="menu.isRecentOpen?'height:calc(100vh - 700px)':'height:calc(100vh - 740px)'">
<div class="box" :style="menu.isRecentOpen?'height:calc(100vh - 700px)':'height:calc(100vh - 740px)'">
<div class="content">
<div
class="content-item"
@ -123,7 +123,7 @@ export default {
.title-button {
width: 50px;
border-radius: 65px;
font-size: 12px;
}

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

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

@ -1,17 +1,17 @@
<template>
<div class="chartsDays" id="chartsDays"></div>
</template>
<script>
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',
components: {
},
data() {
return {
@ -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() {
@ -57,11 +62,11 @@ export default {
this.$nextTick(()=>{
this.getEventTrend();
})
},
}
</script>
<style lang='scss' scoped>
@ -70,4 +75,3 @@ export default {
width: 100%;
}
</style>

17
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
});
@ -51,7 +56,7 @@ export default {
method: 'post',
data: this.data
}).then(res=>{
let aryXAxis = []
let arySeries0 = []
let arySeries1 = []
@ -66,7 +71,7 @@ export default {
} else if (type === '2'){ //
//
const daysInMonth = moment().daysInMonth();
for(let i = 1; i <= daysInMonth; i++){
let c = _.find(res.data.currentlyMap, function(o){
{ return Number(o.day.substring(8)) === i; }

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

13
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>
@ -76,7 +76,7 @@
</Dialog>
</div>
</template>
<script>
import TopComponent from './components/topComponent/index.vue'
import Search from './search/index.vue'
@ -120,7 +120,7 @@ export default {
this.$refs.refTimer.myChart.resize();
this.$refs.refETime.myChart.resize();
this.$refs.refDays.myChart.resize();
});
},
methods: {
@ -137,7 +137,7 @@ export default {
this.searchQuery = new FormData();
this.searchQuery.append("direction", search.direction);
this.searchQuery.append("type", search.type);
this.searchQuery.append("startTime", search.startTime);
this.searchQuery.append("startTime", search.startTime);
this.onChangeTab({name:'EType'})
},
onChangeTab(e) {
@ -155,7 +155,7 @@ export default {
}
</script>
<style lang='scss' scoped>
::v-deep .el-tabs__item {
display: inline-flex;
@ -212,7 +212,7 @@ export default {
.chartPanel {
display: flex;
flex-direction: row;
width: 100%;
gap:10px;
}
@ -241,4 +241,3 @@ export default {
}
}
</style>

23
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 = {
@ -43,7 +54,7 @@ export default {
const {currentlyMap,lastYearMap,stateDuration} = result.data;
const xListSource = [...currentlyMap,...lastYearMap,...stateDuration]
let xList = Array.from(new Set(xListSource.map(x=>x.sectionName)));
const value0 = []; // warningState = 1
const value1 = []; // warningState = 2
const value2 = []; // warningState = 3
@ -77,7 +88,7 @@ export default {
chartsStatistics.series[4].data = value4;
chartsStatistics.series[5].data = value5;
if(!this.myChart){
this.myChart = echarts.init(document.getElementById("railwayDay"));
this.myChart = echarts.init(document.getElementById("railwayDay"));
}
this.myChart.setOption(chartsStatistics);
@ -88,7 +99,7 @@ export default {
this.$nextTick(()=>{
this.bind();
})
// getSectionPerceivedNumber().then((res) => {
// if (res.code == 200) {
// this.dataList = res.data;

15
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,
@ -59,7 +64,7 @@ export default {
}
this.myChart.setOption(chartsStatistics);
})
},
bindMock(){
getDailyCumulativeMonth().then((res) => {
@ -92,7 +97,7 @@ export default {
}
},
mounted() {
},
};
</script>

19
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 {
@ -26,14 +26,19 @@ export default {
}
},
data() {
return {
return {
};
},
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,
@ -50,8 +55,8 @@ export default {
data: data
}).then(result=>{
if (result.code != 200) return this.$message.error(result.msg);
// if(result.data.currentlyMap){
// chartsStatistics.series[0].data = result.data.currentlyMap.map(x=>x.number);
// }
@ -79,7 +84,7 @@ export default {
chartOption.series[1].data = values2;
this.myChart.setOption(chartOption);
})
},
bindMock(){
getSectionMarkNumber({

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

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

@ -1,6 +1,6 @@
<template>
<div class="congestiontType">
<div class="charts" id="ctypeAnalysis"></div>
<div class="legend-box">
<div v-if="dataList.length ===0" style="width:100%;height: 100%;text-align: center;line-height: 100px;">暂无数据</div>
@ -18,7 +18,7 @@
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
@ -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,
@ -86,7 +91,7 @@ export default {
});
});
}
this.dataList = _dataList;
const list = this.dataList.reduce((acc, curr, index) => {

21
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",
@ -22,7 +22,7 @@ export default {
data() {
return {};
},
mounted() {
this.$nextTick(()=>{
this.bind();
@ -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(){
@ -79,7 +84,7 @@ export default {
chartOptions.series[1].data = ckq
chartOptions.series[2].data = rk.data.map(x=>x.value)
chartOptions.series[3].data = rkq
this.myChart.setOption(chartOptions);
}
},
@ -95,11 +100,11 @@ export default {
.flowstate {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.tag1 {
position: absolute;
margin-top: -174px;

15
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,
@ -68,7 +73,7 @@ export default {
this.myChart.setOption(chartsStatistics);
echarts.getInstanceByDom(document.getElementById("anaFlow")).resize()
})
})
}
},
@ -77,7 +82,7 @@ export default {
// var myChart = echarts.init(document.getElementById("anaFlow"));
// myChart.setOption(chartsStatistics);
// })
// getSectionPerceivedNumber().then((res) => {
// if (res.code == 200) {
// this.dataList = res.data;

19
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(){
@ -68,7 +73,7 @@ export default {
// chartOptions.series[1].data = jn2.data.map(x=>x.totalFlow)
// chartOptions.series[2].data = hz.data.map(x=>x.totalFlow)
// chartOptions.series[3].data = hz2.data.map(x=>x.totalFlow)
request({
url: '/business/traffic-statistics/history/realTimeTrafficFlowHour',
method: 'get'
@ -84,7 +89,7 @@ export default {
this.myChart.setOption(chartOptions);
})
}
},
};
@ -97,7 +102,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
.chartsFs {
height: 100%;
width: 100%;

15
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,
@ -58,13 +63,13 @@ export default {
chartsOption.yAxis[0].data = res.data.map(x=>x.facilityName);
chartsOption.series[0].data = res.data.map(x=>x.trafficVolume);
this.myChart.setOption(chartsOption);
})
}
},
mounted() {
},
};
</script>

15
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,
@ -62,10 +67,10 @@ export default {
}).then(resLastYear=>{
chartOption.series[0].data = res.data.map(x=>x.trafficVolume);
chartOption.series[1].data = resLastYear.data.map(x=>x.trafficVolume);
this.myChart.setOption(chartOption);
})
})
}
},

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,

21
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,
@ -59,7 +64,7 @@ export default {
}).then(resLastYear => {
let perList = []
let _data = _.cloneDeep(res.data);
let _dataYes = _.cloneDeep(resLastYear.data);
let substr = 11;
@ -111,18 +116,18 @@ export default {
chartOption.series[3].data = v3;
chartOption.series[4].data = v4;
chartOption.series[5].data = v5;
this.myChart.setOption(chartOption);
})
})
// this.myChart = echarts.init(document.getElementById("divTimer"));
// this.myChart.setOption(options);
}
},
mounted() {
},
};
</script>

15
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
@ -37,14 +42,14 @@ export default {
}
dateTime = dateTime.format('YYYY-MM-DD HH:mm:ss')
this.data = {publishTime:dateTime}
request({
url: `/business/manage/eventTypePublishManageMonth`,
method: "post",
data: this.data
})
.then((result) => {
if (result.code != 200) return;
const totalData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

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

@ -1,12 +1,12 @@
<template>
<div class="charts" id="postTrendsDay"></div>
</template>
<script>
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(){
@ -51,14 +57,14 @@ export default {
e.data = sdata[i]
});
this.myChart.setOption(chartsStatistics);
})
})
},
},
mounted() {
this.$nextTick(() => {
this.bindTrendsPublishManage();
})
// setTimeout(() => {
// this.$nextTick(() => {
// var myChart = echarts.init(document.getElementById('postTrendsDay'));
@ -68,7 +74,7 @@ export default {
},
}
</script>
<style lang='scss' scoped>
@ -77,4 +83,3 @@ export default {
width: 100%;
}
</style>

23
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,
@ -60,9 +65,9 @@ export default {
for(let i = start; i <= end; i++){
_xAsix.push((i<10?'0'+i.toString():i.toString())+'')
}
let sdata = [[],[],[]]
_xAsix.forEach(x=>{
sdata.forEach(s=>{
s.push(0)
@ -76,20 +81,20 @@ export default {
e.data = sdata[i]
});
chartsStatistics.xAxis.data = _xAsix
this.myChart.setOption(chartsStatistics);
})
},
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
.charts {
height: 100%;
width: 100%;

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