63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<div class="app-container" id="contrastAnalysisBox">
|
|
<!-- 搜索工作栏 -->
|
|
<search-area :isFold="isFold" @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 { getCompare } 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: 'ContrastAnalysis',
|
|
components: { SearchArea, BarChart, LineChart },
|
|
data() {
|
|
return {
|
|
isFold: false,
|
|
activeName: 'bar',
|
|
chartData: []
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = this.tableHeight(260)
|
|
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1310)
|
|
// console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
|
|
})
|
|
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1310)
|
|
},
|
|
methods: {
|
|
getList(params) {
|
|
getCompare({ ...params }).then((res) => {
|
|
console.log(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> |