能源bug
This commit is contained in:
		@@ -1,138 +1,139 @@
 | 
			
		||||
<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,
 | 
			
		||||
					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">
 | 
			
		||||
									<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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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(() => {});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
		Посилання в новій задачі
	
	Block a user