新增项目借款统计

oa-ui/src/api/oa/settle/settle.js

     method: 'delete'
   })
 }
+
+// 结算统计
+export function getSettleStatistic(query) {
+  return request({
+    url: '/oa/settle/statistic',
+    method: 'get',
+    params: query
+  })
+}

oa-ui/src/views/flowable/form/projectProcess/planTab.vue

  * @Author: ysh
  * @Date: 2024-04-19 15:32:00
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-09-19 10:27:58
+ * @LastEditTime: 2024-10-23 14:39:45
 -->
 <template>
   <div class="app-container">
           </div>
         </el-form-item>
         <el-form-item label="方案说明" prop="designDescription">
-          <el-input type="textarea" v-model="form.designDescription" placeholder="请输入方案说明" />
+          <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="form.designDescription" placeholder="请输入方案说明" />
         </el-form-item>
         <el-row>
           <el-col :span="6" :xs="24" :offset="12">

oa-ui/src/views/statistics/components/borrowStatistics.vue

+<!--
+ * @Author: ysh
+ * @Date: 2024-10-18 11:17:48
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-23 17:00:10
+-->
 <template>
   <div style="width:100%;" v-loading="loading">
-    <div class="titles">借款统计</div>
+    <div class="titles">借款和结算统计</div>
     <div class="warpper">
       <div class="left">
         <div class="left-top" id="borrowBar"></div>
       </div>
       <div class="middle">
         <div class="middle-top" id="borrowLine"></div>
-        <div class="middle-top" id="borrowUsageAmountPie" v-loading="dataLoading"></div>
+        <div class="middle-top" id="borrowProject"></div>
+      </div>
+      <div class="right">
+        <div class="right-top" id="settleBar"></div>
+        <div class="right-top" id="settleLine"></div>
       </div>
-      <div class="right"></div>
     </div>
   </div>
 </template>
 <script>
 import { ehcartsInit } from '@/utils/echarts'
 import { getBorrowStatistic } from '@/api/oa/borrow/borrow';
-let borrowYearChart, borrowAmountChart, borrowUsageChart, borrowUsageAmountChart
+let borrowYearChart, borrowAmountChart, borrowUsageChart, borrowProjectChart, settleYearChart, settleAmountChart
 export default {
   props: {
     borrowData: {
       type: Object,
       require: true,
-    }
+    },
+    settleData: {
+      type: Object,
+      require: true,
+    },
   },
   watch: {
     borrowUsage() {
       this.initBorrowUsagePie(this.activeYear)
     },
     borrowUsageAmount() {
-      this.initBorrowUsageAmountPie(this.activeYear)
+      // this.initBorrowUsageAmountPie(this.activeYear)
     }
   },
   data() {
       borrowUsage: {},
       borrowUsageAmount: {},
       borrowYear: {},
+      settleYear: {},
+      settleAmount: {},
+      yearProjectAmount: {},
+      yearProjectCount: {},
       sumBorrowAmount: 0,
+      sumSettleAmount: 0,
       dataLoading: false,
       activeYear: ''
     }
     this.initBorrowYearBar();
     this.initBorrowAmountLine();
     this.initBorrowUsagePie('');
-    this.initBorrowUsageAmountPie('');
+    // this.initBorrowUsageAmountPie('');
+    this.initBorrowProjectLineBar();
+    this.initSettleYearBar();
+    this.initSettleAmountLine();
   },
   methods: {
     initDatas() {
         this.borrowUsage = this.borrowData.usage[0];
         this.borrowUsageAmount = this.borrowData.usageAmount[0];
         this.borrowYear = this.borrowData.year[0];
+        this.yearProjectAmount = this.borrowData.yearProjectAmount[0];
+        this.yearProjectCount = this.borrowData.yearProjectCount[0];
         let sum = Object.values(this.borrowAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
         this.sumBorrowAmount = (sum / 10000).toFixed(1)
       }
+      if (Object.keys(this.settleData).length !== 0) {
+        this.settleYear = this.settleData.year[0];
+        this.settleAmount = this.settleData.amount[0];
+        let sum = Object.values(this.settleAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+        this.sumSettleAmount = (sum / 10000).toFixed(1)
+      }
     },
     clickYear(charts) {
       let that = this;
     initBorrowUsagePie(year) {
       let option = {
         title: {
-          text: year + '借款类型',
+          text: year + '借款类型占比',
         },
         tooltip: {
           trigger: 'item',
           {
             name: '占比',
             type: 'pie',
-            radius: '40%',
+            radius: '30%',
+            center: ['25%', '50%'],
             avoidLabelOverlap: false,
             data: Object.entries(this.borrowUsage).map(([key, value]) => {
               return { name: key, value: value }
               }
             },
           },
-        ]
-      };
-      ehcartsInit(borrowUsageChart, 'borrowUsagePie', option);
-    },
-    initBorrowUsageAmountPie(year) {
-      let option = {
-        title: {
-          text: year + '各类型借款金额',
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          top: 'bottom'
-        },
-        series: [
           {
             name: '占比',
             type: 'pie',
-            radius: '40%',
+            radius: '30%',
+            center: ['65%', '50%'],
             avoidLabelOverlap: false,
             data: Object.entries(this.borrowUsageAmount).map(([key, value]) => {
               return { name: key, value: value }
           },
         ]
       };
-      ehcartsInit(borrowUsageAmountChart, 'borrowUsageAmountPie', option);
+      ehcartsInit(borrowUsageChart, 'borrowUsagePie', option);
+    },
+    initBorrowProjectLineBar(year) {
+      let option = {
+        title: {
+          text: '项目借款金额',
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          containLabel: true
+        },
+        legend: {
+          right: '0%',
+          orient: 'vertical'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: Object.keys(this.yearProjectAmount).map(item => item + '项目'),
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '金额',
+          }
+        ],
+        series: [
+          {
+            type: 'line',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' 元';
+              }
+            },
+            smooth: true,
+            data: Object.values(this.yearProjectAmount),
+            label: {
+              show: true,
+              position: 'top',
+              formatter: function (params) {
+                let value = params.value;
+                if (value >= 10000) {
+                  return '约' + (value / 10000).toFixed(1) + '万元'
+                }
+              }
+            }
+          },
+        ]
+      };
+      ehcartsInit(borrowProjectChart, 'borrowProject', option);
+    },
+    initSettleYearBar() {
+      let option = {
+        title: {
+          text: '各年结算申请次数',
+          subtext: '共计结算次数：' + Object.values(this.settleYear).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '次'
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        graphic: [
+          {
+            type: 'text',
+            name: '',
+            right: '0',
+            top: '20%',
+            style: {
+              text: '全部年份',
+              fill: '#000', // 文本颜色  
+              fontSize: 12, // 文本大小  
+              fontWeight: '' // 文本粗细  
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          name: '年',
+          type: 'category',
+          data: Object.keys(this.settleYear),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：次'
+        },
+        series: [
+          {
+            data: Object.values(this.settleYear),
+            type: 'bar',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle: {
+              color: '#00788C'
+            }
+          }
+        ]
+      };
+      let charts = ehcartsInit(settleYearChart, 'settleBar', option);
+    },
+    initSettleAmountLine() {
+      let option = {
+        title: {
+          text: '各年结算金额',
+          subtext: '结算总额：' + Object.values(this.settleAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '元' +
+            '（约' + this.sumSettleAmount + '万元）'
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: Object.keys(this.settleAmount),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：元'
+        },
+        series: [
+          {
+            min: 0,
+            data: Object.values(this.settleAmount),
+            type: 'line',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+              formatter: function (params) {
+                let value = params.value;
+                if (value >= 10000) {
+                  return '约' + (value / 10000).toFixed(1) + '万元'
+                }
+              }
+            }
+          }
+        ]
+      };
+      ehcartsInit(settleAmountChart, 'settleLine', option);
     }
   },
 }
 
   .right {
     flex: 1;
+
+    .right-top {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
   }
 }
 </style>

oa-ui/src/views/statistics/index.vue

  * @Author: ysh
  * @Date: 2024-10-11 09:23:15
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-18 11:35:36
+ * @LastEditTime: 2024-10-23 15:12:55
 -->
 <template>
   <div class="app-container bg">
       <contract-statistics v-else-if="isActive == 'contract'" :datas="contractInfo"></contract-statistics>
       <car-device-statistics v-else-if="isActive == 'device'" :deviceData="deviceInfo"
         :carData="carInfo"></car-device-statistics>
-      <borrow-statistics v-else-if="isActive == 'borrow'" :borrowData="borrowInfo"></borrow-statistics>
+      <borrow-statistics v-else-if="isActive == 'borrow'" :borrowData="borrowInfo" :settleData="settleInfo"></borrow-statistics>
     </div>
   </div>
 </template>
 import { getCarStatistic } from '@/api/oa/car/car';
 import { getDeviceStatistic } from '@/api/oa/device/device';
 import { getBorrowStatistic } from '@/api/oa/borrow/borrow';
+import { getSettleStatistic } from '@/api/oa/settle/settle';
 import ProjectStatistics from './components/projectStatistics.vue';
 import contractStatistics from './components/contractStatistics.vue';
 import topHead from './components/topHead.vue';
       carInfo: {},
       deviceInfo: {},
       borrowInfo: {},
+      settleInfo:{},
       dataLoading: true,
     }
   },
     this.getCarInfo();
     this.getDeviceInfo();
     this.getBorrowInfo();
+    this.getSettleInfo();
   },
   mounted() {
 
     async getBorrowInfo() {
       let res = await getBorrowStatistic();
       this.borrowInfo = res.data;
+      console.log(res.data);
     },
+    async getSettleInfo(){
+      let res = await getSettleStatistic();
+      this.settleInfo = res.data;
+      
+    },
+    
     changeClick(val) {
       this.isActive = val
     }