vue动态页签
效果图
前端
1 <template> 2 <!-- 总体情况 - 总览echarts --> 3 4 <div v-loading="loading" class="list-table" style="height: 350px;"> 5 <el-tabs v-model="counterpartyAccountName" type="card" @tab-click="choiceYearMethod"> 6 <el-tab-pane 7 v-for="item in counterpartyAccountNameOptions" 8 :key="item.value" 9 :label="item.label" 10 :value="item.value" 11 :name="item.label" 12 /> 13 </el-tabs> 14 <!-- 年份选择 --> 15 <div class="choiceYear"> 16 <el-select v-model="choiceYear" :placeholder="$t('请选择')" size="mini" style="width: 80px;" @change="choiceYearMethod"> 17 <el-option 18 v-for="item in yearOptions" 19 :key="item.value + new Date().getTime()" 20 :label="item.label" 21 :value="item.value" 22 /> 23 </el-select> 24 25 </div> 26 27 <UpAndDownColumnar 28 v-if="showColumnar" 29 ref="UpAndDownColumnar" 30 :row-data="rowData" 31 :up-data-arr="upDataArr" 32 :down-data-arr="downDataArr" 33 :subtext="subtext" 34 :title="$t('单个关联方')" 35 /> 36 </div> 37 </template> 38 <script> 39 40 import { oneRelatedPartiesView, getRecordYear 41 , getCounterpartyAccountNames 42 } from '@/api/company/bankFlowWaterAnalysis/WaterAnalysis.js' 43 import UpAndDownColumnar from '@/views/company/bankFlowWaterAnalysis/columnar/UpAndDownColumnar.vue' 44 export default { 45 components: { 46 UpAndDownColumnar 47 }, 48 props: { 49 }, 50 data() { 51 return { 52 activeName: 'first', 53 loading: false, 54 // 上面数据 55 upDataArr: [], 56 // 下面数据 57 downDataArr: [], 58 // 月份 59 rowData: [], 60 showColumnar: false, 61 yearOptions: [], 62 counterpartyAccountNameOptions: [], 63 choiceYear: '', 64 counterpartyAccountName: '', 65 // 当前页面的宽度 66 thisPageWidth: (document.documentElement.clientWidth - 270) + 'px', 67 formData: {}, 68 subtext: '' 69 } 70 }, 71 created() { 72 this.initData() 73 }, 74 mounted() { 75 }, 76 methods: { 77 initData() { 78 // 获取年份 79 getRecordYear({}).then(response => { 80 this.yearOptions = response.data 81 this.choiceYear = response.data[0].value 82 this.choiceYearMethod() 83 }) 84 // 获取交易对手 85 getCounterpartyAccountNames({ companyId: this.$route.query.companyId }).then(response => { 86 this.counterpartyAccountNameOptions = response.data 87 this.counterpartyAccountName = response.data[0].value 88 this.choiceYearMethod() 89 }) 90 }, 91 handleClick(tab, event) { 92 console.log(tab, event) 93 }, 94 choiceYearMethod() { 95 this.loading = true 96 this.showColumnar = false 97 oneRelatedPartiesView({ companyId: this.$route.query.companyId, years: this.choiceYear, counterpartyAccountName: this.counterpartyAccountName 98 }).then(response => { 99 if (response.data.code === 200) { 100 if (response.data.inflow) { 101 this.formData = response.data 102 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('元') 103 this.rowData = [] 104 this.upDataArr = [] 105 this.downDataArr = [] 106 response.data.inflow.forEach(item => { 107 this.rowData.push(this.$t(item.years)) 108 this.upDataArr.push(item.totalInflow) 109 }) 110 } 111 if (response.data.outflow) { 112 response.data.outflow.forEach(item => { 113 this.downDataArr.push(item.totalOutflow) 114 }) 115 } 116 this.showColumnar = true 117 this.loading = false 118 } else { 119 this.msgError(this.$t(response.data.msg)) 120 this.loading = false 121 } 122 }) 123 } 124 } 125 } 126 </script> 127 <!--<script src="//unpkg.com/vue/dist/vue.js"></script>--> 128 <!--<script src="//unpkg.com/element-ui@2.15.5/lib/index.js"></script>--> 129 130 <style scoped> 131 .choiceYear { 132 z-index: 2001; 133 position: absolute; 134 right: 0; 135 border-radius: 6px; 136 padding: 10px; 137 } 138 .overview-information { 139 z-index: 2001; 140 position: absolute; 141 height: 30px; 142 width: 100%; 143 text-align: center; 144 line-height: 1.8; 145 color: white; 146 margin-top: -35px; 147 font-size: 14px; 148 } 149 </style>
后台
1 controller 2 /** 3 * 单个关联方 4 */ 5 @ApiOperation(value="获取关联方交易对手名称" ,notes="作者:lgw") 6 @GetMapping("/getCounterpartyAccountNames") 7 @Log(title = "获取关联方交易对手名称", businessType = BusinessType.LIST) 8 public AjaxResult getCounterpartyAccountNames(BankFlowWaterAnalysis bankFlowWaterAnalysis) { 9 return AjaxResult.success(bankFlowWaterAnalysisService.getCounterpartyAccountNames(bankFlowWaterAnalysis)); 10 } 11 12 service 13 /** 14 * 获取关联方交易对手名称 15 * @param bankFlowWaterAnalysis 16 * @return 17 */ 18 public List<Map<String, String>> getCounterpartyAccountNames(BankFlowWaterAnalysis bankFlowWaterAnalysis) { 19 List<Map<String, String>> result = new ArrayList<>(); 20 if (bankFlowWaterAnalysis.getCompanyId() !=null){ 21 List<BankFlowWaterAnalysis> counterpartyAccountNames = bankFlowWaterAnalysisDao.getCounterpartyAccountNames(bankFlowWaterAnalysis); 22 for (int i = 0; i <counterpartyAccountNames.size() ; i++) { 23 Map<String, String> mapCounterpartyAccountName = new HashMap<>(); 24 mapCounterpartyAccountName.put("label", String.valueOf(counterpartyAccountNames.get(i).getCounterpartyAccountName())); 25 mapCounterpartyAccountName.put("value", String.valueOf(counterpartyAccountNames.get(i).getCounterpartyAccountName())); 26 result.add(mapCounterpartyAccountName); 27 } 28 } 29 return result; 30 }
柱状图详情可查看vue柱状图
vue柱状图链接 👇 👇 👇
