修改借款，新增统计分析

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

@@ -1,8 +1,8 @@
 /*
  * @Author: wrh
  * @Date: 2024-01-30 16:37:46
- * @LastEditors: wrh
- * @LastEditTime: 2024-09-20 17:09:29
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-11 15:26:43
  */
 import request from '@/utils/request'
 
@@ -66,3 +66,12 @@ export function delProject(projectId) {
     method: 'delete'
   })
 }
+
+// 项目统计信息
+export function getProjectStatistic(query) {
+  return request({
+    url: '/oa/project/statistic',
+    method: 'get',
+    params: query
+  })
+}

oa-ui/src/assets/styles/index.scss

@@ -202,6 +202,18 @@ aside {
   font-family:'auditor'; // 根据自己用的去重命名字体名 
   src: url('~@/assets/font/kaishu/auditor.ttf');
 }
+@font-face{
+  font-family:'puhuiti'; // 根据自己用的去重命名字体名 
+  src: url('~@/assets/font/kaishu/puhuiti.ttf');
+}
+@font-face{
+  font-family:'puhuiti45'; // 根据自己用的去重命名字体名 
+  src: url('~@/assets/font/kaishu/puhuiti45.ttf');
+}
+@font-face{
+  font-family:'dingding'; // 根据自己用的去重命名字体名 
+  src: url('~@/assets/font/kaishu/dingding.ttf');
+}
 .vertical-text{
   writing-mode: vertical-rl;
   transform: rotate(360deg);

oa-ui/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2024-01-03 09:23:11
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-09 15:45:22
+ * @LastEditTime: 2024-10-11 09:26:01
  */
 import Vue from 'vue'
 import Router from 'vue-router'
@@ -312,20 +312,6 @@ export const constantRoutes = [
       }
     ]
   },
-  // {
-  //   path: '/project/info',
-  //   component: Layout,
-  //   hidden: true,
-  //   children: [
-  //     {
-  //       path: '',
-  //       component: () => import('@/views/oa/project/info'),
-  //       name: 'projectInfo',
-  //       meta: { title: '项目详情', icon: '' }
-
-  //     }
-  //   ]
-  // },
   {
     path: '',
     component: Layout,

oa-ui/src/utils/echarts.js

@@ -0,0 +1,27 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: ysh
+ * @Date: 2022-04-12 01:47:01
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-11 14:23:57
+ */
+import * as echarts from 'echarts'
+export  function disposeCharts(name) {
+  if (name != null && name != "" && name != undefined) {
+    name.dispose(); //销毁
+  }
+};
+export  function echartsSetoption(chart, option) {
+  chart.setOption(option);
+  window.addEventListener("resize", function () {
+    chart.resize();
+  });
+}
+export function ehcartsInit(myCharts,id,options){
+  disposeCharts(myCharts);
+  let chartDom = document.getElementById(id);
+  myCharts = echarts.init(chartDom);
+  let option = options;
+  echartsSetoption(myCharts, option);
+}

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

@@ -2,25 +2,25 @@
   <div class="app-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
     <el-button type="success" @click="printOpen = true">打印</el-button>
     <el-row :gutter="20">
-      <el-col :span="flowDisabled ? 18 : 24" :xs="24">
+      <el-col :span="24" :md="flowDisabled ? 18 : 24">
         <h2 class="text-center">借款申请</h2>
         <el-divider></el-divider>
-        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
           <el-row :gutter="20">
-            <el-col :span="6" :xs="24">
+            <el-col :md="6" :span="24">
               <el-form-item label="申请人" prop="user.nickName">
                 {{ form.applierUser ? form.applierUser.nickName : form.user.nickName }}
               </el-form-item>
             </el-col>
-            <el-col :span="6" :xs="24">
+            <el-col :md="6" :span="24">
               <el-form-item label="申请部门" prop="dept.deptName">
                 {{ form.dept.deptName }}
               </el-form-item>
             </el-col>
-            <el-col :span="6" :xs="24">
+            <el-col :md="6" :span="24">
               <el-form-item label="申请时间" prop="date">
                 <el-date-picker style="width:140px;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
-                  placeholder="选择日期" :disabled="taskName != '借款申请'">
+                  placeholder="选择日期" disabled>
                 </el-date-picker>
               </el-form-item>
             </el-col>
@@ -45,7 +45,7 @@
               <el-descriptions-item label="项目名称" label-class-name="my-label">{{ chooseProject.projectName
                 }}</el-descriptions-item>
               <el-descriptions-item label="项目负责人" label-class-name="my-label">{{ chooseProject.projectLeaderUser ?
-    chooseProject.projectLeaderUser.nickName : ''
+                chooseProject.projectLeaderUser.nickName : ''
                 }}</el-descriptions-item>
               <el-descriptions-item label="承担部门" label-class-name="my-label">
                 <el-tag size="small">{{ chooseProject.undertakingDeptName }}</el-tag>
@@ -54,57 +54,60 @@
                 }}</el-descriptions-item>
             </el-descriptions>
           </el-form-item>
-          <el-form-item label="借款明细">
-            <table border="1" class="table">
-              <tr>
-                <td style="width:50px;">序号</td>
-                <td style="width:200px">开支项目</td>
-                <td>单位</td>
-                <td>单价</td>
-                <td>数量</td>
-                <td>申请金额</td>
-                <!-- <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">项目管理部校核金额</td> -->
-                <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">分管领导审核金额</td>
-                <td>操作</td>
-              </tr>
-              <tr v-for="(detail, index) in detailList" :key="index">
-                <td>
-                  {{ index + 1 }}
-                </td>
-                <td>
-                  <el-input v-model="detail.borrowItem" type="textarea" :disabled="taskName != '借款申请'"></el-input>
-                </td>
-                <td>
-                  <el-input v-model="detail.unit" :disabled="taskName != '借款申请'"></el-input>
-                </td>
-                <td>
-                  <el-input-number :controls="false" style="width:100%" v-model="detail.price"
-                    @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
-                </td>
-                <td>
-                  <el-input-number :controls="false" style="width:100%" v-model="detail.quantity"
-                    @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
-                </td>
-                <td>
-                  <el-input v-model="detail.applyAmount" :disabled="taskName != '借款申请'"></el-input>
-                </td>
-                <!-- <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
+          <!-- <el-form-item label="借款明细"> -->
+          <table border="1" class="table">
+            <tr style="height:30px;font-weight:bold;font-family:'puhuiti'">
+              <td :colspan="8">借款明细</td>
+            </tr>
+            <tr>
+              <td style="width:50px;">序号</td>
+              <td style="min-width:150px">开支项目</td>
+              <td>单位</td>
+              <td>单价</td>
+              <td>数量</td>
+              <td>申请金额</td>
+              <!-- <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">项目管理部校核金额</td> -->
+              <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">分管领导审核金额</td>
+              <td>操作</td>
+            </tr>
+            <tr v-for="(detail, index) in detailList" :key="index">
+              <td>
+                {{ index + 1 }}
+              </td>
+              <td>
+                <el-input v-model="detail.borrowItem" type="textarea" :disabled="taskName != '借款申请'"></el-input>
+              </td>
+              <td>
+                <el-input v-model="detail.unit" :disabled="taskName != '借款申请'"></el-input>
+              </td>
+              <td>
+                <el-input-number :controls="false" style="width:100%" v-model="detail.price"
+                  @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
+              </td>
+              <td>
+                <el-input-number :controls="false" style="width:100%" v-model="detail.quantity"
+                  @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
+              </td>
+              <td>
+                <el-input v-model="detail.applyAmount" :disabled="taskName != '借款申请'"></el-input>
+              </td>
+              <!-- <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
                   <el-input v-model="detail.xmAmount" :disabled="taskName != '项目部审核'"
                     @change="calculateXmAmount(detail)"></el-input>
                 </td> -->
-                <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
-                  <el-input v-model="detail.managerAmount" :disabled="taskName != '分管审核'"
-                    @blur="calculateManagerAmount(detail)"></el-input>
-                </td>
-                <td>
-                  <el-button type="text" style="color:#F56C6C" icon="el-icon-delete" size="mini" circle
-                    :disabled="taskName != '借款申请'" @click="deleDetailItem(index)">删除行</el-button>
-                </td>
-              </tr>
-            </table>
-            <el-button icon="el-icon-plus" size="mini" @click="addDetailList()" type="primary" plain
-              :disabled="taskName != '借款申请'"></el-button>
-          </el-form-item>
+              <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
+                <el-input v-model="detail.managerAmount" :disabled="taskName != '分管审核'"
+                  @blur="calculateManagerAmount(detail)"></el-input>
+              </td>
+              <td>
+                <el-button type="text" style="color:#F56C6C" icon="el-icon-delete" size="mini" circle
+                  :disabled="taskName != '借款申请'" @click="deleDetailItem(index)">删除行</el-button>
+              </td>
+            </tr>
+          </table>
+          <el-button icon="el-icon-plus" size="mini" @click="addDetailList()" type="primary" plain
+            :disabled="taskName != '借款申请'"></el-button>
+          <!-- </el-form-item> -->
           <el-form-item label="最大借款金额" v-if="isSelect">
             <el-tag>{{ totalBudget.toFixed(2) }}（大写：{{ formatNumberWithWan(totalBudget) }}）</el-tag>
           </el-form-item>
@@ -113,22 +116,22 @@
           </el-form-item>
           <el-form-item label="可用借款" v-if="isSelect">
             <el-tag type="success">{{ (totalBudget - hasBorrow).toFixed(2) }}（大写：{{ formatNumberWithWan((totalBudget -
-    hasBorrow)) }}）</el-tag>
+              hasBorrow)) }}）</el-tag>
           </el-form-item>
           <el-row :gutter="20">
-            <el-col :span="8" :xs="24">
+            <el-col :span="12" :xs="24">
               <el-form-item label="申请金额" prop="applyAmount">
                 <el-input v-model="form.applyAmount" placeholder="请输入申请金额" :disabled="taskName != '借款申请'" />
                 <span style="color:#E74C3C" v-if="exceed && form.borrowUsage == 0">超过预算金额：{{ getMoreAmount('0')
                   }}</span>
               </el-form-item>
             </el-col>
-            <el-col :span="8" :xs="24">
+            <el-col :span="12" :xs="24">
               <el-form-item label="核准金额" prop="managerAmount">
                 <el-input v-model="form.managerAmount" placeholder="请输入核准金额"
                   :disabled="taskName != '分管审核' && taskName != '党工团审核'" />
                 <span style="color:#E74C3C" v-if="exceed && form.managerAmount && form.borrowUsage == 0">超过预算金额：{{
-    getMoreAmount('1') }}</span>
+                  getMoreAmount('1') }}</span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -154,7 +157,7 @@
           <el-divider></el-divider>
           <!-- 非党工团审核 -->
           <div v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
-            <el-form-item label="部门负责人意见" prop="deptComment">
+            <el-form-item label="部门负责人意见" prop="deptComment" label-width="150px">
               <el-input type="textarea" v-model="form.deptComment" placeholder="请输入部门负责人意见"
                 :disabled="taskName != '部门审核'" :autosize="{ minRows: 4 }" />
             </el-form-item>
@@ -170,7 +173,7 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-form-item label="分管领导审核意见" prop="managerComment">
+            <el-form-item label="分管领导审核意见" prop="managerComment" label-width="150px">
               <el-input type="textarea" v-model="form.managerComment" placeholder="请输入分管领导审核意见"
                 :disabled="taskName != '分管审核'" :autosize="{ minRows: 4 }" />
             </el-form-item>
@@ -186,7 +189,7 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-form-item label="总经理审批意见" prop="zjlComment">
+            <el-form-item label="总经理审批意见" prop="zjlComment" label-width="150px">
               <el-input type="textarea" v-model="form.zjlComment" placeholder="请输入总经理审批意见"
                 :disabled="taskName != '总经理审核'" :autosize="{ minRows: 4 }" />
             </el-form-item>
@@ -202,7 +205,7 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-form-item label="董事长批准意见" prop="dszComment">
+            <el-form-item label="董事长批准意见" prop="dszComment" label-width="150px">
               <el-input type="textarea" v-model="form.dszComment" placeholder="请输入董事长批准意见"
                 :disabled="taskName != '董事长批准'" :autosize="{ minRows: 4 }" />
             </el-form-item>
@@ -278,7 +281,7 @@
           <el-button type="primary" @click="submitForm">提 交</el-button>
         </div>
       </el-col>
-      <el-col :span="6" :xs="24" v-if="flowDisabled">
+      <el-col :span="24" :md="6" v-if="flowDisabled">
         <el-card>
           <h2 style="text-align: center;">流程进度</h2>
           <div>
@@ -451,13 +454,13 @@ export default {
   },
   methods: {
     initRules() {
-      if(this.taskName == '借款申请'){
+      if (this.taskName == '借款申请') {
         this.rules = {
           remark: [
             { required: true, message: '请输入说明', trigger: 'blur' },
           ],
         }
-      }else if (this.taskName == '部门审核') {
+      } else if (this.taskName == '部门审核') {
         this.rules = {
           deptComment: [
             { required: true, message: '请输入部门负责人意见', trigger: 'blur' },
@@ -713,6 +716,8 @@ export default {
 
             })
           }
+        } else {
+          this.$message.error('请完善必填项')
         }
       });
 
@@ -798,7 +803,7 @@ export default {
       } else if (val.length == 1) {
         this.chooseProject = val[0]
         this.isSelect = true
-        this.form.projectId = val[0].projectId
+        this.$set(this.form, 'projectId', val[0].projectId)
       }
       this.openProject = false
       this.getBudgetSettle();
@@ -896,6 +901,7 @@ export default {
 table {
   text-align: center;
   border-collapse: collapse;
+  border: 1px solid #ccc;
 
   td {
     padding: .0625rem;

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

@@ -0,0 +1,21 @@
+<!--
+ * @Author: ysh
+ * @Date: 2024-10-11 16:41:17
+ * @LastEditors: 
+ * @LastEditTime: 2024-10-11 16:41:28
+-->
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <div class="titles">整体统计</div>
+    <div class="item-wapper">
+      <div class="one item-box">
+        <div class="data-left">
+          <div class="data-title">{{ thisYear }}年项目总数</div>
+          <div class="number">{{ projectNum.toLocaleString('en-US') }}</div>
+          <div>
+            <span class="text-1">较去年</span>
+            <span class="text-2" :class="{ upColor: isProjectUp, dowColor: !isProjectUp }">{{ subYear }}</span>
+            <img :src="isProjectUp ? upImg : downImg" alt="">
+          </div>
+        </div>
+        <div class="chart-box">
+          <div id="thisYear"></div>
+        </div>
+      </div>
+      <div class="two item-box">
+        <div class="data-left">
+          <div class="data-title">2024项目总数</div>
+          <div class="number">{{ projectNum.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="">
+          </div>
+        </div>
+        <div class="chart-box">
+          <div id=""></div>
+        </div>
+      </div>
+      <div class="three item-box">
+        <div class="data-left">
+          <div class="data-title">2024项目总数</div>
+          <div class="number">{{ projectNum.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="">
+          </div>
+        </div>
+        <div class="chart-box">
+          <div id=""></div>
+        </div>
+      </div>
+      <div class="four item-box">
+        <div class="data-left">
+          <div class="data-title">2024项目总数</div>
+          <div class="number">{{ projectNum.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="">
+          </div>
+        </div>
+        <div class="chart-box">
+          <div id=""></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import upSrc from '@/assets/icons/up.png'
+import downSrc from '@/assets/icons/down.png'
+import * as echarts from 'echarts'
+import { disposeCharts, echartsSetoption, ehcartsInit } from '@/utils/echarts'
+import { getProjectStatistic } from '@/api/oa/project/project'
+let thisYearChart
+export default {
+  data() {
+    return {
+      projectNum: 12345,
+      upImg: upSrc,
+      downImg: downSrc,
+      isProjectUp: false,
+      thisYear: new Date().getFullYear(),
+      year: {},
+      type: {},
+      source: {},
+      dept: {},
+      subYear: 0
+    }
+  },
+  watch: {
+    year() {
+      this.initChartOne();
+    }
+  },
+  created() {
+    this.initDatas();
+  },
+  mounted() {
+    // this.initChartOne();
+  },
+  methods: {
+    async initDatas() {
+      let res = await getProjectStatistic();
+      console.log(res);
+      if (res.data) {
+        this.year = res.data.year[0];
+        this.type = res.data.type[0];
+        this.source = res.data.source[0];
+        this.dept = res.data.dept[0];
+        // this.initChartOne();
+        this.getProjectYearSub(this.year);
+      }
+    },
+    initChartOne() {
+      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.year).slice(-6),
+          show: false
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { show: false },
+          splitLine: { show: false }
+        },
+        series: [
+          {
+            min: 0,
+            data: Object.values(this.year).slice(-6),
+            type: 'line',
+            smooth: true,
+          }
+        ]
+      };
+      ehcartsInit(thisYearChart, 'thisYear', option);
+    },
+    getProjectYearSub(year) {
+      let arr = Object.values(year).slice(-2);
+      this.subYear = Number(arr[1]) - Number(arr[0]);
+      this.projectNum = Number(arr[1])
+      if (this.subYear < 0) {
+        this.subYear = - this.subYear;
+        this.isProjectUp = false
+      } else {
+        this.isProjectUp = true
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.item-wapper {
+  height: 134px;
+  width: 100%;
+  display: flex;
+}
+.titles {
+  font-family: 'puhuiti';
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+.item-box:hover{
+  box-shadow: 0 0 15px #e7e5e5;
+}
+.item-box {
+  flex: 1;
+  margin: 0 10px;
+  height: 100%;
+  padding: 13px;
+  display: flex;
+  cursor: pointer;
+
+  .data-left {
+    flex: 1;
+
+    .data-title {
+      font-family: 'puhuiti45';
+      font-weight: 500;
+      margin-bottom: 24px;
+      font-size: 16px;
+    }
+
+    .number {
+      font-size: 24px;
+      font-family: 'puhuiti45';
+      font-weight: 700;
+    }
+
+    .text-1 {
+      color: #4E5969;
+      font-size: 12px;
+      margin-right: 10px;
+    }
+
+    .text-2 {
+      font-size: 14px;
+      font-family: 'puhuiti45';
+      font-weight: 700;
+      margin-right: 5px;
+    }
+  }
+
+  .chart-box {
+    flex: 2;
+  }
+
+}
+
+
+#thisYear {
+  width: 100%;
+  height: 100%;
+}
+
+.one {
+  background-color: #F2F9FE;
+}
+
+.two {
+  background-color: #F5FEF2;
+}
+
+.three {
+  background-color: #F2F9FE;
+}
+
+.four {
+  background-color: #F6F6FF;
+}
+
+.upColor {
+  color: #F44C4C;
+}
+
+.dowColor {
+  color: #00B42A
+}
+</style>

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

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ysh
+ * @Date: 2024-10-11 09:23:15
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-11 16:30:17
+-->
+<template>
+  <div class="app-container bg">
+    <div class="head">
+      <top-head></top-head>
+    </div>
+    <div class="content">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+import topHead from './components/topHead.vue'
+export default {
+  components: { topHead },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  background-color: #f0f4f7;
+}
+
+.head {
+  background-color: #fff;
+  height: 210px;
+  border-radius: 4px;
+  padding: 20px;
+}
+</style>