vue柱状图

原型

  1 <template>
  2   <!-- 上下柱状图 -->
  3   <div ref="overallSituation" :style="{ height: height, width: width }" />
  4 </template>
  5 <script>
  6 import echarts from 'echarts'
  7 require('echarts/theme/macarons')
  8 import resize from '@/views/chart/mixins/resize.js'
  9 export default {
 10   mixins: [resize],
 11   props: {
 12     width: {
 13       type: String,
 14       default: '100%'
 15     },
 16     height: {
 17       type: String,
 18       default: '350px'
 19     },
 20     // 上面数据
 21     upDataArr: {
 22       type: Array,
 23       default: () => []
 24     },
 25     upName: {
 26       type: String,
 27       default: () => this.$t('收入')
 28     },
 29     // 下面数据
 30     downDataArr: {
 31       type: Array,
 32       default: () => []
 33     },
 34     downName: {
 35       type: String,
 36       default: () => this.$t('支出')
 37     },
 38     // 月份
 39     rowData: {
 40       type: Array,
 41       default: () => []
 42     }
 43   },
 44   data() {
 45     return {
 46       chart: null,
 47       loading: false
 48     }
 49   },
 50   beforeDestroy() {
 51     if (!this.chart) {
 52       return
 53     }
 54     this.chart.dispose()
 55     this.chart = null
 56   },
 57   mounted() {
 58     this.initChart()
 59   },
 60   methods: {
 61     initChart() {
 62       this.chart = echarts.init(this.$refs.overallSituation)
 63       this.chart.clear()
 64       this.chart.setOption({
 65         backgroundColor: '#0f375f',
 66         tooltip: {
 67           trigger: 'axis',
 68           axisPointer: {
 69             type: 'shadow',
 70             textStyle: {
 71               color: '#fff'
 72             }
 73           }
 74         },
 75         grid: {
 76           borderWidth: 0,
 77           top: 110,
 78           bottom: 95,
 79           textStyle: {
 80             color: '#fff'
 81           }
 82         },
 83         calculable: true,
 84         xAxis: [
 85           {
 86             type: 'category',
 87             axisLine: {
 88               lineStyle: {
 89                 color: 'rgba(255,255,255,.5)'
 90               }
 91             },
 92             splitLine: {
 93               show: false
 94             },
 95             axisTick: {
 96               show: false
 97             },
 98             splitArea: {
 99               show: false
100             },
101             axisLabel: {
102               interval: 0,
103               color: 'rgba(255,255,255,1)',
104               fontSize: 14
105             },
106             data: this.rowData
107           }
108         ],
109         yAxis: [
110           {
111             type: 'value',
112             splitLine: {
113               show: false
114             },
115             axisLine: {
116               show: false
117             },
118             axisTick: {
119               show: false
120             },
121             axisLabel: {
122               interval: 0,
123               color: 'rgba(255,255,255,1)',
124               fontSize: 14,
125               formatter: (m) => {
126                 return Math.abs(m)
127               }
128             },
129             splitArea: {
130               show: false
131             }
132           }
133         ],
134         series: [
135           {
136             name: this.downName,
137             type: 'bar',
138             barWidth: 20,
139             gridIndex: 0,
140             yAxisIndex: 0,
141             label: {
142               show: true,
143               position: 'top'
144             },
145             itemStyle: {
146               normal: {
147                 color: {
148                   type: 'linear',
149                   x: 0,
150                   y: 0,
151                   x2: 0,
152                   y2: 1,
153                   colorStops: [
154                     {
155                       offset: 0,
156                       // 0% 处的颜色
157                       color: 'rgb(17,69,238,1)'
158                     },
159                     {
160                       offset: 1,
161                       // 100% 处的颜色
162                       color: 'rgba(17,69,238,0.2)'
163                     }
164                   ],
165                   // 缺省为 false
166                   global: false
167                 }
168               }
169             },
170             data: this.upDataArr
171           },
172           {
173             name: this.upName,
174             type: 'bar',
175             barWidth: 20,
176             barGap: '-100%',
177             gridIndex: 0,
178             yAxisIndex: 0,
179             label: {
180               show: true,
181               position: 'bottom',
182               formatter: (m) => {
183                 return Math.abs(m.value)
184               }
185             },
186             itemStyle: {
187               normal: {
188                 color: {
189                   type: 'linear',
190                   x: 0,
191                   y: 0,
192                   x2: 0,
193                   y2: 1,
194                   colorStops: [
195                     {
196                       offset: 1,
197                       // 0% 处的颜色
198                       color: 'rgb(255,153,0, 1)'
199                     },
200                     {
201                       offset: 0,
202                       // 100% 处的颜色
203                       color: 'rgba(255,153,0,0.2)'
204                     }
205                   ],
206                   global: false
207                 },
208                 barBorderRadius: 0
209               }
210             },
211             data: this.downDataArr
212           }
213         ]
214       })
215       this.loading = false
216     }
217   }
218 }
219 </script>
220 
221 <style scoped>
222 </style>

 

修改

  1 <template>
  2   <div>
  3     <!-- 总体情况 - 总览echarts -->
  4     <div v-loading="loading" :style="{ height: '350px', 'z-index': '2002' }">
  5       <!-- 图标-->
  6       <div style="z-index: 2000">
  7         <!-- 年份选择 -->
  8         <div class="choiceYear">
  9           <el-select v-model="choiceYear" :placeholder="$t('请选择')" style="width: 80px;" @change="choiceYearMethod">
 10             <el-option
 11               v-for="item in yearOptions"
 12               :key="item.value + new Date().getTime()"
 13               :label="item.label"
 14               :value="item.value"
 15             />
 16           </el-select>
 17         </div>
 18         <UpAndDownColumnar
 19           v-if="showColumnar"
 20           ref="UpAndDownColumnar"
 21           :up-name="$t('收入')"
 22           :down-name="$t('支出')"
 23           :row-data="rowData"
 24           :up-data-arr="upDataArr"
 25           :down-data-arr="downDataArr"
 26           height="350px"
 27         />
 28         <!-- 下方信息 -->
 29         <div class="overview-information">
 30           {{ choiceYear }}{{ $t('年') }}
 31           {{ $t('总流入') }}: {{ formData.totalInflow }}{{ $t('元') }},
 32           {{ $t('总流出') }}: {{ formData.totalOutflow }}{{ $t('元') }},
 33           {{ $t('净流入') }}: {{ formData.netInflow }}{{ $t('元') }},
 34           {{ $t('期末余额') }}: {{ formData.endingBalance }}{{ $t('元') }}
 35         </div>
 36       </div>
 37     </div>
 38   </div>
 39 </template>
 40 <script>
 41 import { homePageOverview, getRecordYear } from '@/api/company/bankFlowWaterAnalysis/WaterAnalysis.js'
 42 import UpAndDownColumnar from '@/views/company/bankFlowWaterAnalysis/columnar/UpAndDownColumnar.vue'
 43 export default {
 44   components: {
 45     UpAndDownColumnar
 46   },
 47   props: {
 48   },
 49   data() {
 50     return {
 51       loading: false,
 52       // 上面数据
 53       upDataArr: [],
 54       // 下面数据
 55       downDataArr: [],
 56       // 月份
 57       rowData: [],
 58       showColumnar: false,
 59       yearOptions: [],
 60       choiceYear: '',
 61       // 当前页面的宽度
 62       thisPageWidth: (document.documentElement.clientWidth - 270) + 'px',
 63       formData: {}
 64     }
 65   },
 66   created() {
 67     this.initData()
 68   },
 69   mounted() {
 70   },
 71   methods: {
 72     initData() {
 73       getRecordYear({}).then(response => {
 74         this.yearOptions = response.data
 75         this.choiceYear = response.data[0].value
 76         this.choiceYearMethod()
 77       })
 78     },
 79     choiceYearMethod() {
 80       this.loading = true
 81       this.showColumnar = false
 82       homePageOverview({ companyId: this.$route.query.companyId, years: this.choiceYear }).then(response => {
 83         if (response.data.code === 200) {
 84           if (response.data.inflow) {
 85             this.formData = response.data
 86             this.rowData = []
 87             this.upDataArr = []
 88             this.downDataArr = []
 89             response.data.inflow.forEach(item => {
 90               this.rowData.push(this.$t(item.years))
 91               this.upDataArr.push(item.totalInflow)
 92             })
 93           }
 94           if (response.data.outflow) {
 95             response.data.outflow.forEach(item => {
 96               this.downDataArr.push(item.totalOutflow)
 97             })
 98           }
 99           this.showColumnar = true
100           this.loading = false
101         } else {
102           this.msgError(this.$t(response.data.msg))
103           this.loading = false
104         }
105       })
106     }
107   }
108 }
109 </script>
110 
111 <style scoped>
112 .choiceYear {
113   z-index: 2001;
114   position: absolute;
115   right: 0;
116   border-radius: 6px;
117   padding: 10px;
118 }
119 .overview-information {
120   z-index: 2001;
121   position: absolute;
122   height: 30px;
123   width: 100%;
124   text-align: center;
125   line-height: 1.8;
126   color: white;
127   margin-top: -35px;
128   font-size: 14px;
129 }
130 </style>

 

 

引用

 1 <template>
 2   <div>
 3     <div class="area-header" style="margin-top: 20px;">
 4       <span class="area-header-title">{{ $t('总览') }}</span>
 5     </div>
 6     <OverallSituation ref="OverallSituation" />
 7 
 8 </template>
 9 
10 <script>
11 import OverallSituation from '@/views/company/bankFlowWaterAnalysis/home/OverallSituation.vue'
12 
13 export default {
14   components: {
15     OverallSituation
16   }
17 }
18 </script>
19 
20 <style scoped>
21 
22 </style>

 

 

js

 1 import request from '@/utils/request'
 2 
 3 // 查询银行流水-记录列表
 4 export function allRelatedPartiesView(query) {
 5   return request({
 6     url: '/company/allRelatedParties/allRelatedPartiesView',
 7     method: 'get',
 8     params: query
 9   })
10 }
11 
12 // 查询所有年份
13 export function getRecordYear(query) {
14   return request({
15     url: '/company/allRelatedParties/getRecordYear',
16     method: 'get',
17     params: query
18   })
19 }

 

 

controller

 1     /**
 2      * 首页总览
 3      */
 4     @ApiOperation(value="首页总览" ,notes="作者:xsx")
 5     @PreAuthorize("@ss.hasPermi('company:bankFlowMain:view')")
 6         @GetMapping("/homePageOverview")
 7     @Log(title = "查询银行流水-记录列表", businessType = BusinessType.LIST)
 8     public AjaxResult homePageOverview(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
 9         return AjaxResult.success(bankFlowWaterAnalysisService.homePageOverview(bankFlowWaterAnalysis));
10     }
11 
12     @ApiOperation(value = "所有年份", notes="xsx")
13     @GetMapping("/getRecordYear")
14     @Log(title = "查询银行流水-所有年份", businessType = BusinessType.LIST)
15     public AjaxResult getRecordYear(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
16         return AjaxResult.success(bankFlowWaterAnalysisService.getRecordYear(bankFlowWaterAnalysis));
17     }

 

 

service

  1 package com.anxin.company.allRelatedParties.service;
  2 
  3 import com.anxin.common.utils.StringUtils;
  4 import com.anxin.company.allRelatedParties.dao.AllRelatedPartiesDao;
  5 import com.anxin.company.bankFlowMain.utils.BankFlowUtils;
  6 import com.anxin.company.bankFlowMainRecord.entity.BankFlowMainRecord;
  7 import com.anxin.company.bankFlowMainRecord.service.BankFlowMainRecordService;
  8 import com.anxin.company.bankFlowWaterAnalysis.entity.BankFlowWaterAnalysis;
  9 import com.anxin.framework.web.service.BaseService;
 10 import org.springframework.beans.factory.annotation.Autowired;
 11 import org.springframework.stereotype.Service;
 12 
 13 import java.math.BigDecimal;
 14 import java.util.*;
 15 
 16 @Service
 17 public class AllRelatedPartiesService extends BaseService<AllRelatedPartiesDao, BankFlowWaterAnalysis> {
 18 
 19     @Autowired
 20     private BankFlowUtils bankFlowUtils;
 21     @Autowired
 22     private AllRelatedPartiesDao allRelatedPartiesDao;
 23 
 24     /**
 25      * 查询 所有关联方的银行流水分析
 26      * @param bankFlowWaterAnalysis
 27      */
 28     public Map<String, Object> allRelatedPartiesView(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
 29         Map<String, Object> result = new HashMap<>();
 30         result.put("code", 200);
 31         result.put("msg", "操作成功!");
 32 
 33         if (StringUtils.isBlank(bankFlowWaterAnalysis.getCompanyId())) {
 34             result.put("code", 500);
 35             result.put("msg", "为获取当前公司");
 36             return result;
 37         }
 38         if(StringUtils.isBlank(bankFlowWaterAnalysis.getYears())){
 39             int year = Calendar.getInstance().get(Calendar.YEAR);
 40             bankFlowWaterAnalysis.setYears(String.valueOf(year));
 41         }
 42 
 43         List<BankFlowWaterAnalysis> inflow = allRelatedPartiesDao.allRelatedPartiesInflow(bankFlowWaterAnalysis);
 44         List<BankFlowWaterAnalysis> outflow = allRelatedPartiesDao.allRelatedPartiesOutflow(bankFlowWaterAnalysis);
 45 
 46         List<BankFlowWaterAnalysis> inflowAll = this.setYearsInOrOutflow(inflow, bankFlowWaterAnalysis.getYears());
 47         List<BankFlowWaterAnalysis> outflowAll = this.setYearsInOrOutflow(outflow, bankFlowWaterAnalysis.getYears());
 48 
 49         result.put("inflow", inflowAll);
 50         result.put("outflow", outflowAll);
 51 
 52         // 总流入
 53         BigDecimal totalInflow = new BigDecimal("0");
 54         for(BankFlowWaterAnalysis in : inflow) {
 55             totalInflow = totalInflow.add(in.getTotalInflow());
 56         }
 57         result.put("totalInflow", totalInflow);
 58 
 59         // 总流出
 60         BigDecimal totalOutflow = new BigDecimal("0");
 61         for(BankFlowWaterAnalysis out : outflow) {
 62             totalOutflow = totalOutflow.add(out.getTotalOutflow());
 63         }
 64         result.put("totalOutflow", totalOutflow);
 65 
 66         // 差值
 67         result.put("difference", totalInflow.add(totalOutflow));
 68         return result;
 69     }
 70 
 71     /**
 72      * 给结果填充月份和金额
 73      * @param inOutFlow     流入或流出查出的结果结合
 74      * @param years         查询的年份
 75      */
 76     private List<BankFlowWaterAnalysis> setYearsInOrOutflow(List<BankFlowWaterAnalysis> inOutFlow, String years) {
 77         List<BankFlowWaterAnalysis> result = new ArrayList<>();
 78 
 79         if (StringUtils.isNotEmpty(inOutFlow)) {
 80             Set<String> yearSet = new HashSet<>();
 81             for(BankFlowWaterAnalysis analysis : inOutFlow) {
 82                 yearSet.add(analysis.getYears());
 83             }
 84 
 85             for(int i = 0; i < 12; i++) {
 86                 String tempYear = "";
 87                 if (i < 9) {
 88                     tempYear = years + "-0" + (i + 1);
 89                 } else {
 90                     tempYear = years + "-" + (i + 1);
 91                 }
 92                 BankFlowWaterAnalysis setEntity = new BankFlowWaterAnalysis();
 93                 setEntity.setTotalInflow(new BigDecimal("0"));
 94                 setEntity.setTotalOutflow(new BigDecimal("0"));
 95                 if (!yearSet.contains(tempYear)) {
 96                     setEntity.setYears(tempYear.replaceAll(years + "-", "") + "月");
 97                     result.add(setEntity);
 98                 } else {
 99                     List<BankFlowWaterAnalysis> byList = bankFlowUtils.findObjectByList(inOutFlow, "years", tempYear);
100                     if (StringUtils.isNotEmpty(byList)) {
101                         BankFlowWaterAnalysis temp = byList.get(0);
102                         temp.setYears(tempYear.replaceAll(years + "-", "") + "月");
103                         result.add(temp);
104                     }
105                 }
106             }
107         } else {
108             for(int i = 0; i < 12; i++) {
109                 BankFlowWaterAnalysis setEntity = new BankFlowWaterAnalysis();
110                 setEntity.setTotalInflow(new BigDecimal("0"));
111                 setEntity.setTotalOutflow(new BigDecimal("0"));
112                 String tempYear = "";
113                 if (i < 10) {
114                     tempYear = "0" + (i + 1) + "月";
115                 } else {
116                     tempYear = (i + 1) + "月";
117                 }
118                 setEntity.setYears(tempYear);
119                 result.add(setEntity);
120             }
121         }
122         return result;
123     }
124 
125 
126     /**
127      * 获取所有的年份
128      * @param bankFlowWaterAnalysis
129      * @return
130      */
131     public List<Map<String, String>> getRecordYear(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
132         List<BankFlowWaterAnalysis> recordYear = allRelatedPartiesDao.getRecordYear(bankFlowWaterAnalysis);
133         Set<Integer> years = new HashSet<>();
134         List<Map<String, String>> result = new ArrayList<>();
135         if (StringUtils.isNotEmpty(recordYear)) {
136             for(BankFlowWaterAnalysis year : recordYear) {
137                 years.add(Integer.valueOf(year.getYears()));
138             }
139 
140             Integer max = Collections.max(years);
141             Integer min = Collections.min(years);
142 
143             for (var i = 0; i <= max - min; i++) {
144                 Map<String, String> mapYear = new HashMap<>();
145                 mapYear.put("label", String.valueOf(min + i));
146                 mapYear.put("value", String.valueOf(min + i));
147                 result.add(mapYear);
148             }
149 
150         }
151 
152         return result;
153     }
154 
155 
156 }

 

entity

 1 package com.anxin.company.bankFlowWaterAnalysis.entity;
 2 
 3 import com.anxin.framework.web.entity.BaseEntity;
 4 
 5 import java.math.BigDecimal;
 6 
 7 public class BankFlowWaterAnalysis extends BaseEntity<BankFlowWaterAnalysis> {
 8 
 9     // 公司id
10     private String companyId;
11 
12     // 总流入
13     private BigDecimal totalInflow;
14 
15     // 总流出
16     private BigDecimal totalOutflow;
17 
18     // 净流入
19     private BigDecimal netInflow;
20 
21     // 期末余额
22     private BigDecimal endingBalance;
23 
24     // 年月
25     private String years;
26 
27 
28     public String getCompanyId() {
29         return companyId;
30     }
31 
32     public void setCompanyId(String companyId) {
33         this.companyId = companyId;
34     }
35 
36     public BigDecimal getTotalInflow() {
37         return totalInflow;
38     }
39 
40     public void setTotalInflow(BigDecimal totalInflow) {
41         this.totalInflow = totalInflow;
42     }
43 
44     public BigDecimal getTotalOutflow() {
45         return totalOutflow;
46     }
47 
48     public void setTotalOutflow(BigDecimal totalOutflow) {
49         this.totalOutflow = totalOutflow;
50     }
51 
52     public BigDecimal getNetInflow() {
53         return netInflow;
54     }
55 
56     public void setNetInflow(BigDecimal netInflow) {
57         this.netInflow = netInflow;
58     }
59 
60     public BigDecimal getEndingBalance() {
61         return endingBalance;
62     }
63 
64     public void setEndingBalance(BigDecimal endingBalance) {
65         this.endingBalance = endingBalance;
66     }
67 
68     public String getYears() {
69         return years;
70     }
71 
72     public void setYears(String years) {
73         this.years = years;
74     }
75 }

 

dao

 1 <?xml version="1.0" encoding="UTF-8" ?>
 2 <!DOCTYPE mapper
 3         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 4         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 5 <mapper namespace="com.anxin.company.bankFlowWaterAnalysis.dao.BankFlowWaterAnalysisDao">
 6 
 7     <select id="homePageOverviewInflow" parameterType="String" resultType="BankFlowWaterAnalysis">
 8         SELECT
 9             substring(a.transaction_hour, 1, 7) AS 'years',
10             sum(a.transaction_amount) AS 'totalInflow'
11         FROM
12             bank_flow_main_record a
13         WHERE
14             a.transaction_amount <![CDATA[ >= ]]> 0
15             and a.company_id =#{companyId}
16             <if test="years != null and years != ''">
17                 and substring(a.transaction_hour, 1, 4) = #{years}
18             </if>
19         GROUP BY
20             substring(a.transaction_hour, 1, 7)
21     </select>
22 
23     <select id="homePageOverviewOutflow" parameterType="String" resultType="BankFlowWaterAnalysis">
24         SELECT
25             substring(a.transaction_hour, 1, 7) AS 'years',
26             sum(a.transaction_amount) AS 'totalOutflow'
27         FROM
28             bank_flow_main_record a
29         WHERE
30             a.transaction_amount <![CDATA[ < ]]> 0
31             and a.company_id =#{companyId}
32             <if test="years != null and years != ''">
33                 and substring(a.transaction_hour, 1, 4) = #{years}
34             </if>
35         GROUP BY
36             substring(a.transaction_hour, 1, 7)
37     </select>
38 
39 
40     <select id="getRecordYear" parameterType="BankFlowWaterAnalysis" resultType="BankFlowWaterAnalysis">
41         select
42             substring(a.transaction_hour, 1, 4) AS 'years'
43         from bank_flow_main_record a
44         <where>
45             and a.del_flag = 0
46             <if test="companyId != null and companyId != ''">
47                 and company_id =#{companyId}
48             </if>
49         </where>
50         group by
51             substring(a.transaction_hour, 1, 4)
52     </select>
53 
54     <select id="topTenInflows" parameterType="String" resultType="java.util.HashMap">
55         SELECT
56             a.account_name as 'accountName',
57             a.counterparty_account_name as 'counterpartyAccountName',
58             sum(a.transaction_amount) as 'transactionAmountSum'
59         FROM
60             bank_flow_main_record a
61         WHERE
62             a.del_flag = '0'
63             AND a.transaction_amount > 0
64             AND a.counterparty_account_name != ''
65             AND a.counterparty_account_name IS NOT NULL
66             and a.company_id = #{companyId}
67             <if test="years != null and years != ''">
68                 and substring(a.transaction_hour, 1, 4) = #{years}
69             </if>
70         GROUP BY
71             a.counterparty_account_name
72         ORDER BY
73             sum(a.transaction_amount) desc
74         LIMIT 10
75     </select>
76 
77     <select id="topTenOutflows" parameterType="String" resultType="java.util.HashMap">
78         SELECT
79             a.account_name as 'accountName',
80             a.counterparty_account_name as 'counterpartyAccountName',
81             abs(sum(transaction_amount)) AS 'transactionAmountSum'
82         FROM
83             bank_flow_main_record a
84         WHERE
85             a.del_flag = '0'
86             AND a.transaction_amount &lt; 0
87             AND a.counterparty_account_name != ''
88             AND a.counterparty_account_name IS NOT NULL
89             and a.company_id = #{companyId}
90             <if test="years != null and years != ''">
91                 and substring(a.transaction_hour, 1, 4) = #{years}
92             </if>
93         GROUP BY
94             a.counterparty_account_name
95         ORDER BY
96             abs(sum(a.transaction_amount)) desc
97         LIMIT 10
98     </select>
99 </mapper>

 

posted @ 2021-08-09 16:04  翘中之楚  阅读(461)  评论(0)  编辑  收藏  举报