src/views/energy/analysis/qoqAnalysis/components/lineChart.vue

@@ -1,138 +1,131 @@
 <template>
-  <div 
-    id="analysischartLine"
-    style="width: 100%"
-    :style="{ height: chartHeight + 'px' }"
-  ></div>
+	<div
+		id="analysischartLine"
+		style="width: 100%"
+		:style="{ height: chartHeight + 'px' }"></div>
 </template>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/utils/chartMixins/resize'
+import * as echarts from 'echarts';
+import resize from '@/utils/chartMixins/resize';
 export default {
-  name: "LineChart",
-  mixins: [resize],
-  data() {
-    return {
-      chartDom: '',
-      chart: '',
-      chartHeight: this.tableHeight(370)
-    }
-  },
-  props: {
-    chartData: {
-      type: Array,
-      required: true,
-      default: () => {
-        return []
-      }
-    }
-  },
-  watch: {
-    chartData: function () {
-      this.getChart()
-    }
-  },
-  mounted() {
-    window.addEventListener('resize', () => {
-      this.chartHeight = this.tableHeight(370)
-    })
-  },
-  methods: {
-    getChart() {
-      if (
-        this.chart !== null &&
-        this.chart !== '' &&
-        this.chart !== undefined
-      ) {
-        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
-      }
-      this.chartDom = document.getElementById('analysischartLine')
-      this.chart = echarts.init(this.chartDom)
-      if (this.chartData.length === 0) {
-        return false
-      }
-      let arr = this.chartData[0].type // [水，电，煤]
-      let keys = Object.keys(this.chartData[0])
-      let yData = [
-        {
-          name: '本期',
-          type: 'bar',
-          data: [],
-          barWidth: 20,
-          label: {
-            show: true,
-            position: 'top'
-          }
-        },
-        {
-          name: '上期',
-          type: 'bar',
-          data: [],
-          barWidth: 20,
-          label: {
-            show: true,
-            position: 'top'
-          }
-        }
-      ]
-      for (let j = 0; j < arr.length; j++) {
-        for (let k = 0; k < keys.length; k++) {
-          if (keys[k].indexOf(arr[j]+'_上期') > -1) {
-            yData[1].data.push(this.chartData[0][keys[k]])
-          }
-          if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
-            yData[0].data.push(this.chartData[0][keys[k]])
-          }
-        }
-      }
-      var option = {
-        color:['#288AFF','#8EF0AB'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          formatter: function(params) {
-            return (
-              params[0].axisValue + 
-              `<br>` +
-              params.map((item) => {
-                let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
-                let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
-						let value = item.value ? item.value : '-'
-						let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
-						return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
+	name: 'LineChart',
+	mixins: [resize],
+	data() {
+		return {
+			chartDom: '',
+			chart: '',
+			chartHeight: this.tableHeight(370),
+		};
+	},
+	props: {
+		chartData: {
+			type: Array,
+			required: true,
+			default: () => {
+				return [];
+			},
+		},
+	},
+	watch: {
+		chartData: function () {
+			this.getChart();
+		},
+	},
+	mounted() {
+		window.addEventListener('resize', () => {
+			this.chartHeight = this.tableHeight(370);
+		});
+	},
+	methods: {
+		getChart() {
+			if (
+				this.chart !== null &&
+				this.chart !== '' &&
+				this.chart !== undefined
+			) {
+				this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+			}
+			this.chartDom = document.getElementById('analysischartLine');
+			this.chart = echarts.init(this.chartDom);
+			if (this.chartData.length === 0) {
+				return false;
+			}
+			let arr = this.chartData[0].type; // [水，电，煤]
+			let keys = Object.keys(this.chartData[0]);
+			let yData = [
+				{
+					name: '本期',
+					type: 'bar',
+					data: [],
+					barWidth: 20,
+				},
+				{
+					name: '上期',
+					type: 'bar',
+					data: [],
+					barWidth: 20,
+				},
+			];
+			for (let j = 0; j < arr.length; j++) {
+				for (let k = 0; k < keys.length; k++) {
+					if (keys[k].indexOf(arr[j] + '_上期') > -1) {
+						yData[1].data.push(this.chartData[0][keys[k]]);
+					}
+					if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
+						yData[0].data.push(this.chartData[0][keys[k]]);
+					}
+				}
+			}
+			var option = {
+				color: ['#288AFF', '#8EF0AB'],
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+					formatter: function (params) {
+						return (
+							params[0].axisValue +
+							`<br>` +
+							params
+								.map((item) => {
+									let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
+									let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
+									let value = item.value ? item.value : '-';
+									let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
+									return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
 									<span>${str}${seriesNameStr}</span>
 									<span>${valueStr}</span>
-								</span>`
-              }).join(``)
-            )
-          }
-        },
-        legend: {
-          right: '1%',
-          icon: 'rect',
-          itemHeight: 8,
-          itemWidth: 8
-        },
-        grid: {
-          left: '1%',
-          right: '1%',
-          bottom: '3%',
-          containLabel: true
-        },
-        yAxis: {
-          type: 'value',
-          boundaryGap: [0, 0.01]
-        },
-        xAxis: {
-          type: 'category',
-          data: arr
-        },
-        series: yData
-      }
-      option && this.chart.setOption(option);
-    }
-  }
-}
-</script>
+								</span>`;
+								})
+								.join(``)
+						);
+					},
+				},
+				legend: {
+					right: '1%',
+					icon: 'rect',
+					itemHeight: 8,
+					itemWidth: 8,
+				},
+				grid: {
+					left: '1%',
+					right: '1%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				yAxis: {
+					type: 'value',
+					boundaryGap: [0, 0.01],
+				},
+				xAxis: {
+					type: 'category',
+					data: arr,
+				},
+				series: yData,
+			};
+			option && this.chart.setOption(option);
+		},
+	},
+};
+</script>

src/views/energy/analysis/trendAnalysis/index.vue

@@ -74,29 +74,12 @@ export default {
 		},
 		// 导出excel
 		exportExl(params) {
-			exportTrend({ ...params }).then((res) => {
-				// let fileName = '';
-				// const contentDisposition = res.headers['content-disposition'];
-				// if (contentDisposition) {
-				// 	fileName = decodeURIComponent(
-				// 		contentDisposition.slice(
-				// 			contentDisposition.indexOf('filename=') + 9
-				// 		)
-				// 	);
-				// }
-				const blob = new Blob([res.data]);
-				const reader = new FileReader();
-				reader.readAsDataURL(blob);
-				reader.onload = (e) => {
-					const a = document.createElement('a');
-					a.download = '走势分析';
-					a.href = e.target.result;
-					document.body.appendChild(a);
-					a.click();
-					document.body.removeChild(a);
+			exportTrend({ ...params })
+				.then((response) => {
+					this.$download.excel(response, '走势分析.xls');
 					this.$message.success('导出成功');
-				};
-			});
+				})
+				.catch(() => {});
 		},
 	},
 };