更新

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

@@ -1,34 +1,43 @@
+<!--
+ * @Author: zwq
+ * @Date: 2024-03-27 15:49:55
+ * @LastEditors: zwq
+ * @LastEditTime: 2024-04-15 15:47:17
+ * @Description:
+-->
 <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>
+    <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 { getEnergyTrend, exportTrend } from "@/api/analysis/energyAnalysis"
 import SearchArea from "./components/searchArea"
-import BarChart from "./components/barChart"
 import LineChart from "./components/lineChart"
 // import moment from 'moment'
 export default {
   name: 'TrendAnalysis',
-  components: { SearchArea, BarChart, LineChart },
+  components: { SearchArea, LineChart },
   data() {
     return {
       isFold: false,
-      activeName: 'bar',
       chartData: [],
-      timeDim: ''
+			timeDim: '',
+			tableProps: [],
+			list: [],
     }
   },
   mounted() {
@@ -43,52 +52,51 @@ export default {
       this.timeDim = params.timeDim
       getEnergyTrend({ ...params }).then((res) => {
         if (res.code === 0) {
-          this.chartData = res.data
+					this.getTableList(res.data || []);
+					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()
-        })
-      }
-    }
+		getTableList(arr) {
+			this.tableProps = [];
+			this.list = [];
+			let tempX = [];
+			let listObj = { useNum: '消耗量' }; // 数据
+			for (let i = 0; i < arr.length; i++) {
+				let obj = {};
+				if (this.timeDim === '3') {
+					let fName = arr[i].time.slice(0, 4);
+					let lName = arr[i].time.slice(4, 6);
+					obj.label = fName + ' 第 ' + lName + ' 周';
+				} else {
+					obj.label = arr[i].time;
+				}
+				obj.prop = 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((response) => {
+					this.$download.excel(response, '走势分析.xls');
+					this.$message.success('导出成功');
+				})
+				.catch(() => {});
+		},
   }
 }
 </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>
+</style>