94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<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>
|
|
</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 {
|
|
isFold: false,
|
|
activeName: 'bar',
|
|
chartData: [],
|
|
timeDim: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = this.tableHeight(260)
|
|
this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
|
|
})
|
|
this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
|
|
},
|
|
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()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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);
|
|
}
|
|
}
|
|
</style> |