54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<!-- 搜索工作栏 -->
|
||
|
|
<search-area @submit="getList"/>
|
||
|
|
<el-tabs v-model="activeName" @tab-click="switchChart">
|
||
|
|
<el-tab-pane label="柱状图" name="bar">
|
||
|
|
<bar-chart ref="analysisBarChart" :chartData="chartData" />
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="折线图" name="line">
|
||
|
|
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</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 moment from 'moment'
|
||
|
|
export default {
|
||
|
|
name: 'TrendAnalysis',
|
||
|
|
components: { SearchArea, BarChart, LineChart },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeName: 'bar',
|
||
|
|
chartData: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {},
|
||
|
|
methods: {
|
||
|
|
getList(params) {
|
||
|
|
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()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|