yudao-dev/src/views/energy/analysis/trendAnalysis/index.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>