新增项目结算统计分析

oa-ui/src/views/flowable/form/finance/borrowForm.vue

@@ -243,7 +243,7 @@
           </div>
           <el-divider></el-divider>
           <el-form-item label="支付凭证" prop="lendDocument">
-            <FileUpload v-if="taskName == '财务处理'" :disabled="taskName != '财务处理'" :limit="1" :filePathName="'借款/支付凭证'"
+            <FileUpload v-if="taskName == '财务处理'" :disabled="taskName != '财务处理'" :limit="1" :filePathName="'借款/支付凭证'" :isShowTip="false"
               :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip']" @input="getLendPath">
             </FileUpload>
             <div v-if="form.lendDocument && taskName != '财务处理'">
@@ -257,9 +257,9 @@
               </el-link>
             </div>
           </el-form-item>
-          <el-form-item label="财务部支付备注" prop="cwComment">
+          <el-form-item label="财务部支付备注" prop="cwComment" label-width="120px">
             <el-input type="textarea" v-model="form.cwComment" placeholder="请输入财务部支付备注" :disabled="taskName != '财务处理'"
-              :autosize="{ minRows: 4 }" />
+              :autosize="{ minRows: 2 }" />
           </el-form-item>
           <el-row>
             <el-col :span="6" :xs="24" :offset="12">
@@ -747,6 +747,8 @@ export default {
         this.$set(this.taskForm.variables, "approval", userId);
         this.handleComplete(this.taskForm);
       } else if (this.deptId == 102) { //如果是经营管理层申请，走总经理审批
+        this.form.managerAmount = this.form.applyAmount;
+        updateBorrow(this.form);
         getUserByPost({ postName: '总经理' }).then(res => {
           this.$set(this.taskForm.variables, "dept", this.deptId);
           this.$set(this.taskForm.variables, "approval", res.data[0].userId);

oa-ui/src/views/flowable/form/projectContractInfo.vue

@@ -2,12 +2,12 @@
  * @Author: ysh
  * @Date: 2024-10-10 10:03:14
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-10 14:37:00
+ * @LastEditTime: 2024-10-24 16:45:48
 -->
 <template>
   <div>
     <el-form-item label="主合同信息" label-width="120px">
-      <div v-if="hasContract">
+      <div v-if="hasContract" v-loading="contractLoading">
         <el-descriptions border style="margin-top: 10px" :column="2" v-for="item in contractObjList">
           <el-descriptions-item label="合同名称">
             {{ item.contractName }}
@@ -26,13 +26,11 @@
           </el-descriptions-item>
           <el-descriptions-item label="合同文件">
             <div v-if="item.contractDocument" class="upload-list">
-              <el-link type="primary"
-                @click="reviewWord(`${baseUrl}${'/profile/upload' + item.contractDocument}`)">
+              <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + item.contractDocument}`)">
                 {{ getFileName(item.contractDocument) }}
               </el-link>
-              <el-link class="ml20" type="warning"
-                :href="`${baseUrl}${'/profile/upload' + item.contractDocument}`" :underline="false"
-                target="_blank">
+              <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + item.contractDocument}`"
+                :underline="false" target="_blank">
                 <span class="el-icon-download">下载文件</span>
               </el-link>
             </div>
@@ -50,7 +48,7 @@
       </div>
     </el-form-item>
     <el-form-item label="分包合同信息" label-width="120px">
-      <div v-if="hasSubContract">
+      <div v-if="hasSubContract" v-loading="subContractLoading">
         <el-descriptions border style="margin-top: 10px" :column="2" v-for="item in subContractObjList">
           <el-descriptions-item label="分包合同名称">
             {{ item.subContractName }}
@@ -63,13 +61,11 @@
           </el-descriptions-item>
           <el-descriptions-item label="分包合同文件">
             <div v-if="item.contractDocument" class="upload-list">
-              <el-link type="primary"
-                @click="reviewWord(`${baseUrl}${'/profile/upload' + item.contractDocument}`)">
+              <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + item.contractDocument}`)">
                 {{ getFileName(item.contractDocument) }}
               </el-link>
-              <el-link class="ml20" type="warning"
-                :href="`${baseUrl}${'/profile/upload' + item.contractDocument}`" :underline="false"
-                target="_blank">
+              <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + item.contractDocument}`"
+                :underline="false" target="_blank">
                 <span class="el-icon-download">下载文件</span>
               </el-link>
             </div>
@@ -115,25 +111,30 @@ export default {
       contractObjList: [],
       subContractObjList: [],
       hasContract: true,
-      hasSubContract: true
+      hasSubContract: true,
+      contractLoading: true,
+      subContractLoading: true,
     }
   },
   methods: {
     init() {
       const projectId = this.projectId;
-      Promise.all([listProjectContract({ projectId }), listProjectSubcontract({ projectId })]).then(response => {
+      console.log(projectId);
+      this.contractLoading = true;
+      this.subContractLoading = true;
+      Promise.all([listProjectContract({ projectId }), listProjectSubcontract({ projectId })]).then(async response => {
         let [contractData = null, subContractData = null] = response
         // 主合同
         if (contractData.total >= 1) {
           let list = contractData.rows;
           this.contractObjList = []
           for (let l of list) {
-            getContract(l.contractId).then(res => {
-              if (res.data) {
-                this.contractObjList.push(res.data)
-              }
-            })
+            let res = await getContract(l.contractId)
+            if (res.data) {
+              this.contractObjList.push(res.data)
+            }
           }
+          this.hasContract = true;
         } else if (contractData.total == 0) {
           this.hasContract = false;
         }
@@ -143,15 +144,17 @@ export default {
           let list = subContractData.rows;
           this.subContractObjList = []
           for (let l of list) {
-            getSubContract(l.subContractId).then(res => {
-              if (res.data) {
-                this.subContractObjList.push(res.data)
-              }
-            })
+            let res = await getSubContract(l.subContractId)
+            if (res.data) {
+              this.subContractObjList.push(res.data)
+            }
           }
+          this.hasSubContract = true;
         } else if (subContractData.total == 0) {
           this.hasSubContract = false;
         }
+        this.contractLoading = false;
+        this.subContractLoading = false;
       })
     }
   },

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: ysh
  * @Date: 2024-10-18 11:17:48
- * @LastEditors: wrh
- * @LastEditTime: 2024-10-24 14:54:45
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-24 15:53:13
 -->
 <template>
   <div style="width:100%;" v-loading="loading">
@@ -16,10 +16,6 @@
         <div class="middle-top" id="borrowLine"></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>
   </div>
 </template>
@@ -27,17 +23,13 @@
 <script>
 import { ehcartsInit } from '@/utils/echarts'
 import { getBorrowStatistic } from '@/api/oa/borrow/borrow';
-let borrowYearChart, borrowAmountChart, borrowUsageChart, borrowProjectChart, settleYearChart, settleAmountChart
+let borrowYearChart, borrowAmountChart, borrowUsageChart, borrowProjectChart
 export default {
   props: {
     borrowData: {
       type: Object,
       require: true,
     },
-    settleData: {
-      type: Object,
-      require: true,
-    },
   },
   watch: {
     borrowUsage() {
@@ -54,12 +46,9 @@ export default {
       borrowUsage: {},
       borrowUsageAmount: {},
       borrowYear: {},
-      settleYear: {},
-      settleAmount: {},
       yearProjectAmount: {},
       yearProjectCount: {},
       sumBorrowAmount: 0,
-      sumSettleAmount: 0,
       dataLoading: false,
       activeYear: ''
     }
@@ -75,8 +64,6 @@ export default {
     this.initBorrowUsagePie('');
     // this.initBorrowUsageAmountPie('');
     this.initBorrowProjectLineBar();
-    this.initSettleYearBar();
-    this.initSettleAmountLine();
   },
   methods: {
     initDatas() {
@@ -90,12 +77,6 @@ export default {
         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;
@@ -365,120 +346,6 @@ export default {
       };
       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);
-    }
   },
 }
 </script>
@@ -518,7 +385,7 @@ export default {
   }
 
   .right {
-    flex: 1;
+    // flex: 1;
 
     .right-top {
       width: 100%;

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

@@ -626,7 +626,7 @@ export default {
   }
 
   .right {
-    flex: 1;
+    // flex: 1;
   }
 }
 </style>

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

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2024-10-11 16:41:17
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-15 17:15:47
+ * @LastEditTime: 2024-10-24 16:16:05
 -->
 <template>
   <div style="width:100%;" v-loading="loading">
@@ -377,7 +377,7 @@ export default {
           data: Object.keys(this.type),
           axisLabel: {
             fontSize: 12,
-            width: 50,
+            width: 130,
             overflow: 'truncate',
           }
         },
@@ -449,8 +449,8 @@ export default {
   }
 
   .right {
-    flex: 1;
-    display: flex;
+    // flex: 1;
+    // display: flex;
   }
 }
 </style>

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

@@ -0,0 +1,456 @@
+<!--
+ * @Author: ysh
+ * @Date: 2024-10-18 11:17:48
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-24 16:00:44
+-->
+<template>
+  <div style="width:100%;" v-loading="loading">
+    <div class="titles">结算和结算统计</div>
+    <div class="warpper">
+      <div class="left">
+        <div class="left-top" id="settleBar"></div>
+        <div class="left-top" id="settleTypePie" v-loading="dataLoading"></div>
+      </div>
+      <div class="middle">
+        <div class="middle-top" id="settleLine"></div>
+        <div class="middle-top" id="settleProject"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ehcartsInit } from '@/utils/echarts'
+import { getSettleStatistic } from '@/api/oa/settle/settle';
+let settleYearChart, settleAmountChart, settleTypeChart, settleProjectChart
+export default {
+  props: {
+    settleData: {
+      type: Object,
+      require: true,
+    },
+  },
+  watch: {
+    settleType() {
+      this.initSettleTypePie(this.activeYear)
+    },
+    settleData() {
+      this.initDatas();
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      settleAmount: {},
+      settleType: {},
+      settleTypeAmount: {},
+      settleYear: {},
+      settleYear: {},
+      settleAmount: {},
+      yearProjectAmount: {},
+      yearProjectCount: {},
+      sumSettleAmount: 0,
+      sumSettleAmount: 0,
+      dataLoading: false,
+      activeYear: ''
+    }
+  },
+  created() {
+    this.loading = true;
+    this.initDatas();
+  },
+  mounted() {
+    this.initSettleYearBar();
+    this.initSettleAmountLine();
+    this.initSettleTypePie('');
+    // this.initSettleTypeAmountPie('');
+    this.initSettleProjectLineBar();
+    this.initSettleAmountLine();
+  },
+  methods: {
+    initDatas() {
+      if (Object.keys(this.settleData).length !== 0) {
+        this.settleAmount = this.settleData.amount[0];
+        this.settleType = this.settleData.type[0];
+        this.settleTypeAmount = this.settleData.typeAmount[0];
+        this.settleYear = this.settleData.year[0];
+        this.yearProjectAmount = this.settleData.yearProjectAmount[0];
+        this.yearProjectCount = this.settleData.yearProjectCount[0];
+        let sum = Object.values(this.settleAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+        this.sumSettleAmount = (sum / 10000).toFixed(1)
+        this.loading = false;
+      } else {
+        this.loading = true;
+      }
+    },
+    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
+          getSettleStatistic({ gmTime: year }).then(res => {
+            that.settleType = res.data.type[0];
+            that.settleTypeAmount = res.data.typeAmount[0];
+            that.dataLoading = false
+          })
+        }
+      })
+    },
+    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: '#3498DB'
+            }
+          }
+        ]
+      };
+      let charts = ehcartsInit(settleYearChart, 'settleBar', option);
+      this.clickYear(charts)
+    },
+    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);
+    },
+    initSettleTypePie(year) {
+      let option = {
+        title: {
+          text: year + '结算类型占比',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          top: 'bottom'
+        },
+        series: [
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '30%',
+            center: ['25%', '50%'],
+            avoidLabelOverlap: false,
+            data: Object.entries(this.settleType).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'
+                }
+              }
+            },
+          },
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '30%',
+            center: ['65%', '50%'],
+            avoidLabelOverlap: false,
+            data: Object.entries(this.settleTypeAmount).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(settleTypeChart, 'settleTypePie', option);
+    },
+    initSettleProjectLineBar(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),
+            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(settleProjectChart, 'settleProject', 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);
+    }
+  },
+}
+</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;
+
+    .right-top {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+}
+</style>

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

@@ -18,7 +18,7 @@
       </div>
       <div class="two item-box" @click="$emit('handleClick', 'contract')">
         <div class="data-left">
-          <div class="data-title">{{ thisYear }}年承接合同总数</div>
+          <div class="data-title">{{ thisYear }}年承接合同数</div>
           <div class="number">{{ contractNum.toLocaleString('en-US') }}</div>
           <div>
             <span class="text-1">较去年</span>
@@ -33,7 +33,7 @@
       </div>
       <div class="three item-box" @click="$emit('handleClick', 'device')">
         <div class="data-left">
-          <div class="data-title">{{ thisYear }}年设备申领记录</div>
+          <div class="data-title">{{ thisYear }}年设备申领</div>
           <div class="number">{{ deviceNum.toLocaleString('en-US') }}</div>
           <div>
             <span class="text-1">较去年</span>
@@ -59,6 +59,21 @@
           <div id="thisBorrow"></div>
         </div>
       </div>
+
+      <div class="five item-box" @click="$emit('handleClick', 'settle')">
+        <div class="data-left">
+          <div class="data-title">{{ thisYear }}结算申请次数</div>
+          <div class="number">{{ settleNum.toLocaleString('en-US') }}</div>
+          <div>
+            <span class="text-1">较去年</span>
+            <span class="text-2" :class="{ upColor: isSettleUp, dowColor: !isSettleUp }">{{ settleSubYear }}</span>
+            <img :src="isSettleUp ? upImg : downImg" alt="">
+          </div>
+        </div>
+        <div class="chart-box">
+          <div id="thisSettle"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -68,7 +83,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,borrowYearChart
+let thisYearChart, contractYearChart, deviceYearChart, borrowYearChart, settleYearChart
 export default {
   props: {
     pDatas: {
@@ -86,6 +101,10 @@ export default {
     bDatas: {
       type: Object,
       require: true,
+    },
+    sDatas: {
+      type: Object,
+      require: true,
     }
   },
   data() {
@@ -94,12 +113,14 @@ export default {
       contractNum: 0,
       deviceNum: 0,
       borrowNum: 0,
+      settleNum: 0,
       upImg: upSrc,
       downImg: downSrc,
       isProjectUp: false,
       isContractUp: false,
       isDeviceUp: false,
       isBorrowUp: false,
+      isSettleUp: false,
       thisYear: new Date().getFullYear(),
       year: {},
       type: {},
@@ -116,10 +137,15 @@ export default {
       borrowUsage: {},
       borrowUsageAmount: {},
       borrowYear: {},
+      settleAmount: {},
+      settleType: {},
+      settleTypeAmount: {},
+      settleYear: {},
       subYear: 0,
       contractSubYear: 0,
       deviceSubYear: 0,
       borrowSubYear: 0,
+      settleSubYear: 0,
       loading: true
     }
   },
@@ -133,9 +159,12 @@ export default {
     deviceYear() {
       this.initChartThree();
     },
-    borrowYear(){
+    borrowYear() {
       this.initChartFour();
     },
+    settleYear(){
+      this.initChartFive();
+    },
     pDatas: {
       handler(newVal) {
         if (newVal) {
@@ -172,6 +201,15 @@ export default {
       immediate: true,  // 在绑定时立即执行一次  
       deep: true       // 深度监听对象的变化  
     },
+    sDatas: {
+      handler(newVal) {
+        if (newVal) {
+          this.initDatas();
+        }
+      },
+      immediate: true,  // 在绑定时立即执行一次  
+      deep: true       // 深度监听对象的变化  
+    }
   },
   created() {
   },
@@ -207,6 +245,13 @@ export default {
         this.borrowYear = this.bDatas.year[0];
         this.getBorrowYearSub(this.borrowYear);
       }
+      if (Object.keys(this.sDatas).length !== 0) {
+        this.settleAmount = this.sDatas.amount[0];
+        this.settleType = this.sDatas.type[0];
+        this.settleTypeAmount = this.sDatas.typeAmount[0];
+        this.settleYear = this.sDatas.year[0];
+        this.getSettleYearSub(this.settleYear);
+      }
 
       this.loading = false
     },
@@ -375,6 +420,48 @@ export default {
       };
       ehcartsInit(borrowYearChart, 'thisBorrow', option);
     },
+    initChartFive() {
+      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.settleYear).slice(-6),
+          show: false
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { show: false },
+          splitLine: { show: false }
+        },
+        series: [
+          {
+            min: 0,
+            data: Object.values(this.settleYear).slice(-6),
+            type: 'line',
+            smooth: true,
+            itemStyle: {
+              color: '#E74C3C'
+            }
+          }
+        ]
+      };
+      ehcartsInit(settleYearChart, 'thisSettle', option);
+    },
     getProjectYearSub(year) {
       let arr = Object.values(year).slice(-2);
       this.subYear = Number(arr[1]) - Number(arr[0]);
@@ -418,6 +505,17 @@ export default {
       } else {
         this.isBorrowUp = true
       }
+    },
+    getSettleYearSub(year) {
+      let arr = Object.values(year).slice(-2);
+      this.settleSubYear = Number(arr[1]) - Number(arr[0]);
+      this.settleNum = Number(arr[1])
+      if (this.settleSubYear < 0) {
+        this.settleSubYear = - this.settleSubYear;
+        this.isSettleUp = false
+      } else {
+        this.isSettleUp = true
+      }
     }
   },
 }
@@ -505,6 +603,10 @@ export default {
   background-color: #F6F6FF;
 }
 
+.five {
+  background-color: #FFF0F5;
+}
+
 .upColor {
   color: #F44C4C;
 }

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

@@ -2,20 +2,21 @@
  * @Author: ysh
  * @Date: 2024-10-11 09:23:15
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-23 15:12:55
+ * @LastEditTime: 2024-10-24 16:01:43
 -->
 <template>
   <div class="app-container bg">
     <div class="head" v-loading="dataLoading">
       <top-head @handleClick="changeClick" :pDatas="projectInfo" :cDatas="contractInfo" :dDatas="deviceInfo"
-        :bDatas="borrowInfo"></top-head>
+        :bDatas="borrowInfo" :sDatas="settleInfo"></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>
-      <borrow-statistics v-else-if="isActive == 'borrow'" :borrowData="borrowInfo" :settleData="settleInfo"></borrow-statistics>
+      <borrow-statistics v-else-if="isActive == 'borrow'" :borrowData="borrowInfo"></borrow-statistics>
+      <settle-statistics v-else-if="isActive == 'settle'" :settleData="settleInfo"></settle-statistics>
     </div>
   </div>
 </template>
@@ -32,8 +33,9 @@ import contractStatistics from './components/contractStatistics.vue';
 import topHead from './components/topHead.vue';
 import CarDeviceStatistics from './components/carDeviceStatistics.vue';
 import BorrowStatistics from './components/borrowStatistics.vue';
+import SettleStatistics from './components/settleStatistics.vue';
 export default {
-  components: { topHead, ProjectStatistics, contractStatistics, CarDeviceStatistics, BorrowStatistics },
+  components: { topHead, ProjectStatistics, contractStatistics, CarDeviceStatistics, BorrowStatistics, SettleStatistics },
   data() {
     return {
       isActive: 'project',
@@ -88,9 +90,7 @@ export default {
     async getSettleInfo(){
       let res = await getSettleStatistic();
       this.settleInfo = res.data;
-      
     },
-    
     changeClick(val) {
       this.isActive = val
     }