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

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

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

@@ -74,12 +74,29 @@ export default {
 		},
 		// 导出excel
 		exportExl(params) {
-			exportTrend({ ...params })
+			exportTrend({ ...params }).then((res) => {
-				.then((response) => {
+				// let fileName = '';
-					this.$download.excel(response, '走势分析.xls');
+				// 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);
 					this.$message.success('导出成功');
-				})
+				};
-				.catch(() => {});
+			});
 		},
 	},
 };