64 lines
1.7 KiB
Vue
64 lines
1.7 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 = []
|
|
}
|
|
})
|
|
// getEnergyTrend({
|
|
// energyTypeId: "1681183397517406210",
|
|
// objId: "1679031282510532610",
|
|
// timeDim: "2",
|
|
// startTime: "1690732800000",
|
|
// endTime: "1690992000000"
|
|
// }).then((res) => {
|
|
// console.log(res)
|
|
// this.chartData = res.data
|
|
// })
|
|
},
|
|
switchChart() {
|
|
if (this.activeName === 'bar') {
|
|
this.$nextTick((res) => {
|
|
this.$refs.analysisBarChart.getChart()
|
|
})
|
|
} else {
|
|
this.$nextTick((res) => {
|
|
this.$refs.analysisLineChart.getChart()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |