vue动态页签

效果图

 前端

<template>
  <!-- 总体情况 - 总览echarts -->

  <div v-loading="loading" class="list-table" style="height: 350px;">
    <el-tabs v-model="counterpartyAccountName" type="card" @tab-click="choiceYearMethod">
      <el-tab-pane
        v-for="item in counterpartyAccountNameOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :name="item.label"
      />
    </el-tabs>
    <!-- 年份选择 -->
    <div class="choiceYear">
      <el-select v-model="choiceYear" :placeholder="$t('请选择')" size="mini" style=" 80px;" @change="choiceYearMethod">
        <el-option
          v-for="item in yearOptions"
          :key="item.value + new Date().getTime()"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

    </div>

    <UpAndDownColumnar
      v-if="showColumnar"
      ref="UpAndDownColumnar"
      :row-data="rowData"
      :up-data-arr="upDataArr"
      :down-data-arr="downDataArr"
      :subtext="subtext"
      :title="$t('单个关联方')"
    />
  </div>
</template>
<script>

import { oneRelatedPartiesView, getRecordYear
  , getCounterpartyAccountNames
} from '@/api/company/bankFlowWaterAnalysis/WaterAnalysis.js'
import UpAndDownColumnar from '@/views/company/bankFlowWaterAnalysis/columnar/UpAndDownColumnar.vue'
export default {
  components: {
    UpAndDownColumnar
  },
  props: {
  },
  data() {
    return {
      activeName: 'first',
      loading: false,
      // 上面数据
      upDataArr: [],
      // 下面数据
      downDataArr: [],
      // 月份
      rowData: [],
      showColumnar: false,
      yearOptions: [],
      counterpartyAccountNameOptions: [],
      choiceYear: '',
      counterpartyAccountName: '',
      // 当前页面的宽度
      thisPageWidth: (document.documentElement.clientWidth - 270) + 'px',
      formData: {},
      subtext: ''
    }
  },
  created() {
    this.initData()
  },
  mounted() {
  },
  methods: {
    initData() {
      // 获取年份
      getRecordYear({}).then(response => {
        this.yearOptions = response.data
        this.choiceYear = response.data[0].value
        this.choiceYearMethod()
      })
      // 获取交易对手
      getCounterpartyAccountNames({ companyId: this.$route.query.companyId }).then(response => {
        this.counterpartyAccountNameOptions = response.data
        this.counterpartyAccountName = response.data[0].value
        this.choiceYearMethod()
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    choiceYearMethod() {
      this.loading = true
      this.showColumnar = false
      oneRelatedPartiesView({ companyId: this.$route.query.companyId, years: this.choiceYear, counterpartyAccountName: this.counterpartyAccountName
      }).then(response => {
        if (response.data.code === 200) {
          if (response.data.inflow) {
            this.formData = response.data
            this.subtext = this.choiceYear + this.$t('年') + this.$t('总流入') + ': ' + this.formData.totalInflow + this.$t('元') + ', ' + this.$t('总流出') + ': ' + this.formData.totalOutflow + this.$t('元') + ', ' + this.$t('差额') + ': ' + this.formData.difference + this.$t('元')
            this.rowData = []
            this.upDataArr = []
            this.downDataArr = []
            response.data.inflow.forEach(item => {
              this.rowData.push(this.$t(item.years))
              this.upDataArr.push(item.totalInflow)
            })
          }
          if (response.data.outflow) {
            response.data.outflow.forEach(item => {
              this.downDataArr.push(item.totalOutflow)
            })
          }
          this.showColumnar = true
          this.loading = false
        } else {
          this.msgError(this.$t(response.data.msg))
          this.loading = false
        }
      })
    }
  }
}
</script>
<!--<script src="//unpkg.com/vue/dist/vue.js"></script>-->
<!--<script src="//unpkg.com/element-ui@2.15.5/lib/index.js"></script>-->

<style scoped>
.choiceYear {
  z-index: 2001;
  position: absolute;
  right: 0;
  border-radius: 6px;
  padding: 10px;
}
.overview-information {
  z-index: 2001;
  position: absolute;
  height: 30px;
  width: 100%;
  text-align: center;
  line-height: 1.8;
  color: white;
  margin-top: -35px;
  font-size: 14px;
}
</style>

后台

controller
    /**
     * 单个关联方
     */
    @ApiOperation(value="获取关联方交易对手名称" ,notes="作者:lgw")
    @GetMapping("/getCounterpartyAccountNames")
    @Log(title = "获取关联方交易对手名称", businessType = BusinessType.LIST)
    public AjaxResult getCounterpartyAccountNames(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
        return AjaxResult.success(bankFlowWaterAnalysisService.getCounterpartyAccountNames(bankFlowWaterAnalysis));
    }

service
    /**
     * 获取关联方交易对手名称
     * @param bankFlowWaterAnalysis
     * @return
     */
    public List<Map<String, String>> getCounterpartyAccountNames(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
        List<Map<String, String>> result = new ArrayList<>();
        if (bankFlowWaterAnalysis.getCompanyId() !=null){
            List<BankFlowWaterAnalysis> counterpartyAccountNames = bankFlowWaterAnalysisDao.getCounterpartyAccountNames(bankFlowWaterAnalysis);
            for (int i = 0; i <counterpartyAccountNames.size() ; i++) {
                Map<String, String> mapCounterpartyAccountName = new HashMap<>();
                mapCounterpartyAccountName.put("label", String.valueOf(counterpartyAccountNames.get(i).getCounterpartyAccountName()));
                mapCounterpartyAccountName.put("value", String.valueOf(counterpartyAccountNames.get(i).getCounterpartyAccountName()));
                result.add(mapCounterpartyAccountName);
            }
        }
        return result;
    }

柱状图详情可查看vue柱状图