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柱状图链接

https://www.cnblogs.com/lemperor/p/15119127.html