新增借款统计

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

@@ -48,3 +48,12 @@ export function delBorrow(borrowId) {
     method: 'delete'
   })
 }
+
+// 查询借款统计
+export function getBorrowStatistic(query) {
+  return request({
+    url: '/oa/borrow/statistic',
+    method: 'get',
+    params: query
+  })
+}

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

@@ -2,7 +2,7 @@
  * @Author: wrh
  * @Date: 2024-02-27 13:47:55
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-16 11:30:58
+ * @LastEditTime: 2024-10-18 10:04:13
  */
 import request from '@/utils/request'
 
@@ -50,9 +50,10 @@ export function delCar(carId) {
 }
 
 // 查询cmc车辆信息列表
-export function getCarStatistic() {
+export function getCarStatistic(query) {
   return request({
     url: '/oa/car/statistic',
     method: 'get',
+    params: query
   })
 }

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

@@ -0,0 +1,339 @@
+<template>
+  <div style="width:100%;" v-loading="loading">
+    <div class="titles">借款统计</div>
+    <div class="warpper">
+      <div class="left">
+        <div class="left-top" id="borrowBar"></div>
+        <div class="left-top" id="borrowUsagePie" v-loading="dataLoading"></div>
+      </div>
+      <div class="middle">
+        <div class="middle-top" id="borrowLine"></div>
+        <div class="middle-top" id="borrowUsageAmountPie" v-loading="dataLoading"></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
+export default {
+  props: {
+    borrowData: {
+      type: Object,
+      require: true,
+    }
+  },
+  watch: {
+    borrowUsage() {
+      this.initBorrowUsagePie(this.activeYear)
+    },
+    borrowUsageAmount() {
+      this.initBorrowUsageAmountPie(this.activeYear)
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      borrowAmount: {},
+      borrowUsage: {},
+      borrowUsageAmount: {},
+      borrowYear: {},
+      sumBorrowAmount: 0,
+      dataLoading: false,
+      activeYear: ''
+    }
+  },
+  created() {
+    this.loading = true;
+    this.initDatas();
+    this.loading = false;
+  },
+  mounted() {
+    this.initBorrowYearBar();
+    this.initBorrowAmountLine();
+    this.initBorrowUsagePie('');
+    this.initBorrowUsageAmountPie('');
+  },
+  methods: {
+    initDatas() {
+      console.log(this.borrowData);
+      if (Object.keys(this.borrowData).length !== 0) {
+        this.borrowAmount = this.borrowData.amount[0];
+        this.borrowUsage = this.borrowData.usage[0];
+        this.borrowUsageAmount = this.borrowData.usageAmount[0];
+        this.borrowYear = this.borrowData.year[0];
+        let sum = Object.values(this.borrowAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+        this.sumBorrowAmount = (sum / 10000).toFixed(1)
+      }
+    },
+    clickYear(charts) {
+      let that = this;
+      charts.on('click', function (event) {
+        if (event) {
+          that.activeYear = event.name;
+          let year = event.name + '-01-01'
+          if (event.name == "") {
+            year = ''
+          }
+          that.dataLoading = true
+          getBorrowStatistic({ applyDate: year }).then(res => {
+            that.borrowUsage = res.data.usage[0];
+            that.borrowUsageAmount = res.data.usageAmount[0];
+            that.dataLoading = false
+          })
+        }
+      })
+    },
+    initBorrowYearBar() {
+      let option = {
+        title: {
+          text: '各年借款申请次数',
+          subtext: '共计借款次数：' + Object.values(this.borrowYear).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.borrowYear),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：次'
+        },
+        series: [
+          {
+            data: Object.values(this.borrowYear),
+            type: 'bar',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle: {
+              color: '#3498DB'
+            }
+          }
+        ]
+      };
+      let charts = ehcartsInit(borrowYearChart, 'borrowBar', option);
+      this.clickYear(charts)
+    },
+    initBorrowAmountLine() {
+      let option = {
+        title: {
+          text: '各年借款金额',
+          subtext: '借款总额：' + Object.values(this.borrowAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '元' +
+            '（约' + this.sumBorrowAmount + '万元）'
+        },
+        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.borrowAmount),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：元'
+        },
+        series: [
+          {
+            min: 0,
+            data: Object.values(this.borrowAmount),
+            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(borrowAmountChart, 'borrowLine', option);
+    },
+    initBorrowUsagePie(year) {
+      let option = {
+        title: {
+          text: year + '借款类型',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          top: 'bottom'
+        },
+        series: [
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '40%',
+            avoidLabelOverlap: false,
+            data: Object.entries(this.borrowUsage).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'none',
+              formatter: '{name|{b}}\n{value|{c}个}',
+              minMargin: 5,
+              edgeDistance: 8,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          },
+        ]
+      };
+      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%',
+            avoidLabelOverlap: false,
+            data: Object.entries(this.borrowUsageAmount).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'none',
+              formatter: '{name|{b}}\n{value|{c}元}',
+              minMargin: 5,
+              edgeDistance: 8,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          },
+        ]
+      };
+      ehcartsInit(borrowUsageAmountChart, 'borrowUsageAmountPie', option);
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.titles {
+  font-family: 'puhuiti';
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.warpper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .left {
+    flex: 1;
+
+    .left-top {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+
+  .middle {
+    flex: 1;
+
+    .middle-top {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+
+  .right {
+    flex: 1;
+  }
+}
+</style>

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

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2024-10-17 10:40:13
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-17 17:21:13
+ * @LastEditTime: 2024-10-18 14:55:46
 -->
 <template>
   <div style="width:100%;" v-loading="loading">
@@ -17,9 +17,9 @@
       </div>
       <div class="right">
         <div class="right-top" id="carYearBar"></div>
-        <div class="right-top" id="carStatusPie"></div>
+        <div class="right-top" id="carStatusPie" v-loading="dataLoading"></div>
       </div>
-      <div class="right">
+      <div class="right" v-loading="dataLoading">
         <div class="right-top" id="carApprovalBar"></div>
         <div class="right-top" id="carDayBar"></div>
       </div>
@@ -29,6 +29,8 @@
 
 <script>
 import { ehcartsInit } from '@/utils/echarts'
+import { getCarStatistic } from '@/api/oa/car/car';
+import { getDeviceStatistic } from '@/api/oa/device/device';
 let deviceYearChart, deviceStatusChart, deviceApprovalChart, carYearChart, carStatusChart, carApprovalChart, carDayChart
 export default {
   props: {
@@ -41,6 +43,17 @@ export default {
       require: true,
     }
   },
+  watch: {
+    carUsage(){
+      this.initCarUsagePie()
+    },
+    carApproval(){
+      this.initCarApprovalBar()
+    },
+    carDay(){
+      this.initCarDayBar()
+    }
+  },
   data() {
     return {
       loading: true,
@@ -52,6 +65,7 @@ export default {
       carYear: {},
       carUsage: {},
       carDay: {},
+      dataLoading:false,
     }
   },
   created() {
@@ -65,7 +79,7 @@ export default {
     this.initDeviceStatusPie();
     this.initDeviceApprovalBar();
     this.initCarYearBar();
-    this.initCarStatusPie();
+    this.initCarUsagePie();
     this.initCarApprovalBar();
     this.initCarDayBar();
   },
@@ -86,6 +100,25 @@ export default {
         this.carDay = this.carData.day;
       }
     },
+    clickYear(charts) {
+      let that = this;
+      charts.on('click', function (event) {
+        if (event) {
+          that.activeYear = event.name;
+          let year = event.name + '-01-01'
+          if (event.name == "") {
+            year = ''
+          }
+          that.dataLoading = true
+          getCarStatistic({ applyDate: year }).then(res => {
+            that.carApproval = res.data.approval;
+            that.carUsage = res.data.usage[0];
+            that.carDay = res.data.day;
+            that.dataLoading = false
+          })
+        }
+      })
+    },
     initDeviceYearBar() {
       let option = {
         title: {
@@ -99,21 +132,6 @@ export default {
           height: '60%',
           containLabel: true
         },
-        // legend: {},
-        graphic: [
-          {
-            type: 'text',
-            name: '',
-            right: '0',
-            top: '20%',
-            style: {
-              text: '全部年份',
-              fill: '#000', // 文本颜色  
-              fontSize: 12, // 文本大小  
-              fontWeight: '' // 文本粗细  
-            }
-          }
-        ],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -359,11 +377,12 @@ export default {
         ]
       };
       let charts = ehcartsInit(carYearChart, 'carYearBar', option);
+      this.clickYear(charts)
     },
-    initCarStatusPie(){
+    initCarUsagePie(){
       let option = {
         title: {
-          text: '车辆状态和申请类型情况',
+          text: '车辆申请类型',
         },
         tooltip: {
           trigger: 'item',

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

@@ -45,18 +45,18 @@
           <div id="thisDevice"></div>
         </div>
       </div>
-      <div class="four item-box">
+      <div class="four item-box" @click="$emit('handleClick', 'borrow')">
         <div class="data-left">
-          <div class="data-title">2024项目总数</div>
-          <div class="number">{{ projectNum.toLocaleString('en-US') }}</div>
+          <div class="data-title">{{ thisYear }}借款申请次数</div>
+          <div class="number">{{ borrowNum.toLocaleString('en-US') }}</div>
           <div>
             <span class="text-1">较去年</span>
-            <span class="text-2" :class="{ upColor: isProjectUp, dowColor: !isProjectUp }">206</span>
-            <img :src="isProjectUp ? upImg : downImg" alt="">
+            <span class="text-2" :class="{ upColor: isBorrowUp, dowColor: !isBorrowUp }">{{ borrowSubYear }}</span>
+            <img :src="isBorrowUp ? upImg : downImg" alt="">
           </div>
         </div>
         <div class="chart-box">
-          <div id=""></div>
+          <div id="thisBorrow"></div>
         </div>
       </div>
     </div>
@@ -68,7 +68,7 @@ import upSrc from '@/assets/icons/up.png'
 import downSrc from '@/assets/icons/down.png'
 import * as echarts from 'echarts'
 import { ehcartsInit } from '@/utils/echarts'
-let thisYearChart, contractYearChart, deviceYearChart
+let thisYearChart, contractYearChart, deviceYearChart,borrowYearChart
 export default {
   props: {
     pDatas: {
@@ -82,6 +82,10 @@ export default {
     dDatas: {
       type: Object,
       require: true,
+    },
+    bDatas: {
+      type: Object,
+      require: true,
     }
   },
   data() {
@@ -89,11 +93,13 @@ export default {
       projectNum: 0,
       contractNum: 0,
       deviceNum: 0,
+      borrowNum: 0,
       upImg: upSrc,
       downImg: downSrc,
       isProjectUp: false,
       isContractUp: false,
       isDeviceUp: false,
+      isBorrowUp: false,
       thisYear: new Date().getFullYear(),
       year: {},
       type: {},
@@ -106,9 +112,14 @@ export default {
       deviceApproval: {},
       deviceStatus: {},
       deviceYear: {},
+      borrowAmount: {},
+      borrowUsage: {},
+      borrowUsageAmount: {},
+      borrowYear: {},
       subYear: 0,
       contractSubYear: 0,
-      deviceSubYear:0,
+      deviceSubYear: 0,
+      borrowSubYear: 0,
       loading: true
     }
   },
@@ -119,9 +130,12 @@ export default {
     contractYear() {
       this.initChartTwo();
     },
-    deviceYear(){
+    deviceYear() {
       this.initChartThree();
     },
+    borrowYear(){
+      this.initChartFour();
+    },
     pDatas: {
       handler(newVal) {
         if (newVal) {
@@ -139,7 +153,25 @@ export default {
       },
       immediate: true,  // 在绑定时立即执行一次  
       deep: true       // 深度监听对象的变化  
-    }
+    },
+    dDatas: {
+      handler(newVal) {
+        if (newVal) {
+          this.initDatas();
+        }
+      },
+      immediate: true,  // 在绑定时立即执行一次  
+      deep: true       // 深度监听对象的变化  
+    },
+    bDatas: {
+      handler(newVal) {
+        if (newVal) {
+          this.initDatas();
+        }
+      },
+      immediate: true,  // 在绑定时立即执行一次  
+      deep: true       // 深度监听对象的变化  
+    },
   },
   created() {
   },
@@ -157,17 +189,25 @@ export default {
       }
       if (Object.keys(this.cDatas).length !== 0) {
         this.contractAmount = this.cDatas.amount[0];
-        this.contractCwAmount = this.cDatas.cwAmount[0]
-        this.contractSource = this.cDatas.source[0]
-        this.contractYear = this.cDatas.year[0]
-        this.getContractYearSub(this.contractYear)
+        this.contractCwAmount = this.cDatas.cwAmount[0];
+        this.contractSource = this.cDatas.source[0];
+        this.contractYear = this.cDatas.year[0];
+        this.getContractYearSub(this.contractYear);
       }
       if (Object.keys(this.dDatas).length !== 0) {
         this.deviceApproval = this.dDatas.approval[0];
         this.deviceStatus = this.dDatas.status[0];
         this.deviceYear = this.dDatas.year[0];
-        this.getDeviceYearSub(this.deviceYear)
+        this.getDeviceYearSub(this.deviceYear);
+      }
+      if (Object.keys(this.bDatas).length !== 0) {
+        this.borrowAmount = this.bDatas.amount[0];
+        this.borrowUsage = this.bDatas.usage[0];
+        this.borrowUsageAmount = this.bDatas.usageAmount[0];
+        this.borrowYear = this.bDatas.year[0];
+        this.getBorrowYearSub(this.borrowYear);
       }
+
       this.loading = false
     },
     initChartOne() {
@@ -293,6 +333,48 @@ export default {
       };
       ehcartsInit(deviceYearChart, 'thisDevice', option);
     },
+    initChartFour() {
+      let option = {
+        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.borrowYear).slice(-6),
+          show: false
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { show: false },
+          splitLine: { show: false }
+        },
+        series: [
+          {
+            min: 0,
+            data: Object.values(this.borrowYear).slice(-6),
+            type: 'line',
+            smooth: true,
+            itemStyle: {
+              color: '#7B68EE'
+            }
+          }
+        ]
+      };
+      ehcartsInit(borrowYearChart, 'thisBorrow', option);
+    },
     getProjectYearSub(year) {
       let arr = Object.values(year).slice(-2);
       this.subYear = Number(arr[1]) - Number(arr[0]);
@@ -326,6 +408,17 @@ export default {
         this.isDeviceUp = true
       }
     },
+    getBorrowYearSub(year) {
+      let arr = Object.values(year).slice(-2);
+      this.borrowSubYear = Number(arr[1]) - Number(arr[0]);
+      this.borrowNum = Number(arr[1])
+      if (this.borrowSubYear < 0) {
+        this.borrowSubYear = - this.borrowSubYear;
+        this.isBorrowUp = false
+      } else {
+        this.isBorrowUp = true
+      }
+    }
   },
 }
 </script>

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

@@ -2,32 +2,37 @@
  * @Author: ysh
  * @Date: 2024-10-11 09:23:15
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-17 16:59:56
+ * @LastEditTime: 2024-10-18 11:35:36
 -->
 <template>
   <div class="app-container bg">
-    <div class="head">
-      <top-head @handleClick="changeClick" :pDatas="projectInfo" :cDatas="contractInfo" :dDatas="deviceInfo"></top-head>
+    <div class="head" v-loading="dataLoading">
+      <top-head @handleClick="changeClick" :pDatas="projectInfo" :cDatas="contractInfo" :dDatas="deviceInfo"
+        :bDatas="borrowInfo"></top-head>
     </div>
     <div class="content">
       <project-statistics v-if="isActive == 'project'" :datas="projectInfo"></project-statistics>
       <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>
+      <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>
     </div>
   </div>
 </template>
 
 <script>
-import { getProjectStatistic } from '@/api/oa/project/project'
+import { getProjectStatistic } from '@/api/oa/project/project';
 import { getContractStatistic } from '@/api/oa/contract/contract';
 import { getCarStatistic } from '@/api/oa/car/car';
 import { getDeviceStatistic } from '@/api/oa/device/device';
+import { getBorrowStatistic } from '@/api/oa/borrow/borrow';
 import ProjectStatistics from './components/projectStatistics.vue';
 import contractStatistics from './components/contractStatistics.vue';
 import topHead from './components/topHead.vue';
 import CarDeviceStatistics from './components/carDeviceStatistics.vue';
+import BorrowStatistics from './components/borrowStatistics.vue';
 export default {
-  components: { topHead, ProjectStatistics, contractStatistics, CarDeviceStatistics },
+  components: { topHead, ProjectStatistics, contractStatistics, CarDeviceStatistics, BorrowStatistics },
   data() {
     return {
       isActive: 'project',
@@ -35,13 +40,17 @@ export default {
       projectInfo: {},
       carInfo: {},
       deviceInfo: {},
+      borrowInfo: {},
+      dataLoading: true,
     }
   },
   created() {
+    this.dataLoading = true;
     this.getProjectInfo();
     this.getContractInfo();
     this.getCarInfo();
     this.getDeviceInfo();
+    this.getBorrowInfo();
   },
   mounted() {
 
@@ -62,12 +71,15 @@ export default {
     async getCarInfo() {
       let res = await getCarStatistic();
       this.carInfo = res.data;
-      console.log(res.data);
     },
     async getDeviceInfo() {
       let res = await getDeviceStatistic();
       this.deviceInfo = res.data;
-      console.log(res.data);
+      this.dataLoading = false;
+    },
+    async getBorrowInfo() {
+      let res = await getBorrowStatistic();
+      this.borrowInfo = res.data;
     },
     changeClick(val) {
       this.isActive = val