能源需求修改

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

@@ -1,94 +1,113 @@
 <template>
-  <div class="app-container trendAnalysisBox" id="trendAnalysisBox">
-    <!-- 搜索工作栏 -->
-    <search-area :isFold="isFold" @submit="getList"/>
-    <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
-      <el-tab-pane label="柱状图" name="bar">
-        <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim"/>
-      </el-tab-pane>
-      <el-tab-pane label="折线图" name="line">
-        <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
-      </el-tab-pane>
-    </el-tabs>
-    <!-- 没有数据 -->
-    <div class="no-data-bg" v-show='!chartData.length'></div>
-  </div>
+	<div
+		class="app-container trendAnalysisBox"
+		id="trendAnalysisBox">
+		<!-- 搜索工作栏 -->
+		<search-area
+			:isFold="isFold"
+			@submit="getList"
+			@export="exportExl" />
+		<div v-show="chartData.length">
+			<base-table
+				:table-props="tableProps"
+				:table-data="list"
+				class="trend-out-table" />
+			<line-chart
+				ref="analysisLineChart"
+				:chartData="chartData"
+				:timeDim="timeDim" />
+		</div>
+		<!-- 没有数据 -->
+		<div
+			class="no-data-bg"
+			v-show="!chartData.length"></div>
+	</div>
 </template>
 <script>
-import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
-import SearchArea from "./components/searchArea"
-import BarChart from "./components/barChart"
-import LineChart from "./components/lineChart"
+import { getEnergyTrend, exportTrend } from '@/api/analysis/energyAnalysis';
+import SearchArea from './components/searchArea';
+import LineChart from './components/lineChart';
 // import moment from 'moment'
 export default {
-  name: 'TrendAnalysis',
-  components: { SearchArea, BarChart, LineChart },
-  data() {
-    return {
-      isFold: false,
-      activeName: 'bar',
-      chartData: [],
-      timeDim: ''
-    }
-  },
-  mounted() {
-    window.addEventListener('resize', () => {
-      this.tableH = this.tableHeight(260)
-      this.isFold = this.searchBarWidth('trendAnalysisBox', 1263)
-    })
-    this.isFold = this.searchBarWidth('trendAnalysisBox', 1263)
-  },
-  methods: {
-    getList(params) {
-      this.timeDim = params.timeDim
-      getEnergyTrend({ ...params }).then((res) => {
-        if (res.code === 0) {
-          this.chartData = res.data
-        } else {
-          this.chartData = []
-        }
-      })
-    },
-    switchChart() {
-      if (this.activeName === 'bar') {
-        this.$nextTick((res) => {
-          this.$refs.analysisBarChart.getChart()
-        })
-      } else {
-        this.$nextTick((res) => {
-          this.$refs.analysisLineChart.getChart()
-        })
-      }
-    }
-  }
-}
+	name: 'TrendAnalysis',
+	components: { SearchArea, LineChart },
+	data() {
+		return {
+			isFold: false,
+			chartData: [],
+			timeDim: '',
+			tableProps: [],
+			list: [],
+		};
+	},
+	mounted() {
+		window.addEventListener('resize', () => {
+			this.tableH = this.tableHeight(260);
+			this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
+		});
+		this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
+	},
+	methods: {
+		getList(params) {
+			this.timeDim = params.timeDim;
+			getEnergyTrend({ ...params }).then((res) => {
+				if (res.code === 0) {
+					this.getTableList(res.data || []);
+					this.chartData = res.data || [];
+				} else {
+					this.chartData = [];
+				}
+			});
+		},
+		getTableList(arr) {
+			this.tableProps = [];
+			this.list = [];
+			let tempX = [];
+			let listObj = { useNum: '消耗量' }; // 数据
+			for (let i = 0; i < arr.length; i++) {
+				let obj = {};
+				obj.prop = arr[i].time;
+				obj.label = arr[i].time;
+				obj.minWidth = 100;
+				tempX.push(obj);
+				listObj[arr[i].time] = arr[i].useNum || null;
+			}
+			this.tableProps = [{ prop: 'useNum', label: '时间' }].concat(tempX);
+			this.list.push(listObj);
+		},
+		// 导出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);
+					this.$message.success('导出成功');
+				};
+			});
+		},
+	},
+};
 </script>
 <style lang='scss'>
 .trendAnalysisBox {
-  .el-tabs__nav::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    background-color: #e4e7ed;
-    /* z-index: 1; */
-  }
-  .el-tabs__nav-wrap::after {
-    width: 0;
-  }
-  .el-tabs__item {
-    padding: 0 10px;
-  }
-  .el-tabs__item:hover {
-    color: rgba(0, 0, 0, 0.85);
-  }
-  .el-tabs__item.is-active {
-    color: rgba(0, 0, 0, 0.85);
-  }
-  .el-tabs__item {
-    color: rgba(0, 0, 0, 0.45);
-  }
+	.trend-out-table {
+		margin-bottom: 15px;
+	}
 }
 </style>