新增项目统计分析图表

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

@@ -42,3 +42,13 @@ export function delContract(contractId) {
     method: 'delete'
   })
 }
+
+
+// 合同统计
+export function getContractStatistic(query) {
+  return request({
+    url: '/oa/contract/statistic',
+    method: 'get',
+    params: query
+  })
+}

oa-ui/src/utils/echarts.js

@@ -24,4 +24,5 @@ export function ehcartsInit(myCharts,id,options){
   myCharts = echarts.init(chartDom);
   let option = options;
   echartsSetoption(myCharts, option);
+  return myCharts
 }

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

@@ -615,6 +615,8 @@ export default {
       if (this.formTotal == 0) {
         this.form.borrowId = this.taskForm.formId;
         await addBorrow(this.form)
+        // 更新借款明细项
+        await delBorrowDetail(this.taskForm.formId)
         for (let detail of this.detailList) {
           detail.borrowId = this.taskForm.formId;
           await addBorrowDetail(detail);
@@ -701,10 +703,12 @@ export default {
               }
             })
           } else {
-            for (let detail of this.detailList) {
-              detail.borrowId = this.taskForm.formId;
-              addBorrowDetail(detail);
-            }
+            delBorrowDetail(this.taskForm.formId).then(() => {
+              for (let detail of this.detailList) {
+                detail.borrowId = this.taskForm.formId;
+                addBorrowDetail(detail);
+              }
+            })
             this.form.borrowId = this.taskForm.formId;
             addBorrow(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");

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

@@ -1,21 +0,0 @@
-<!--
- * @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/projectStatistics.vue

@@ -0,0 +1,396 @@
+<!--
+ * @Author: ysh
+ * @Date: 2024-10-11 16:41:17
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-12 17:00:05
+-->
+<template>
+  <div style="width:100%;" v-loading="loading">
+    <div class="titles">项目统计</div>
+    <div class="warpper">
+      <div class="left">
+        <div class="bar" id="yearNumber"></div>
+        <div class="pie-box" v-loading="dataLoading">
+          <div class="sourcePie" id="sourceNumber"></div>
+          <div class="deptPie" id="deptNumber"></div>
+        </div>
+      </div>
+      <div class="middle" v-loading="dataLoading">
+        <div class="typeBar" id="typeNumber"></div>
+      </div>
+      <div class="right">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { disposeCharts, echartsSetoption, ehcartsInit } from '@/utils/echarts'
+import { getProjectStatistic } from '@/api/oa/project/project'
+let barYearChart, sourceChart, deptChart, typeChart
+export default {
+  data() {
+    return {
+      year: {},
+      type: {},
+      source: {},
+      dept: {},
+      loading: true,
+      activeYear: '',
+      dataLoading: false,
+    }
+  },
+  watch: {
+    year() {
+      this.initChartBar();
+    },
+    source() {
+      this.initChartSource(this.activeYear);
+    },
+    dept() {
+      this.initChartDept(this.activeYear);
+    },
+    type() {
+      this.initTypeBar(this.activeYear);
+    }
+  },
+  created() {
+    this.initDatas();
+  },
+  mounted() {
+
+  },
+  methods: {
+    async initDatas() {
+      this.loading = true;
+      let res = await getProjectStatistic();
+      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.loading = false;
+      }
+    },
+    initChartBar() {
+      let option = {
+        title: {
+          text: '每年项目个数统计',
+          subtext: '共计项目：' + Object.values(this.year).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.year),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：个'
+        },
+        series: [
+          {
+            data: Object.values(this.year),
+            type: 'bar',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle: {
+              color: '#1C3F95'
+            }
+          },
+          {
+            type: 'line',
+            data: Object.values(this.year),
+            smooth: true,
+            itemStyle: {
+              color: '#F89B30'
+            }
+          }
+        ]
+      };
+      let charts = ehcartsInit(barYearChart, 'yearNumber', option);
+      this.clickYear(charts)
+    },
+    clickYear(charts) {
+      let that = this;
+      charts.on('click', function (event) {
+        console.log(event);
+
+        if (event) {
+          that.activeYear = event.name;
+          let projectNumber = event.name
+          if (event.name == "") {
+            projectNumber = ''
+          }
+          that.dataLoading = true
+          getProjectStatistic({ projectNumber }).then(res => {
+            that.type = res.data.type[0];
+            that.source = res.data.source[0];
+            that.dept = res.data.dept[0];
+            that.dataLoading = false
+          })
+        }
+      })
+    },
+    initChartSource(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.source).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(sourceChart, 'sourceNumber', option);
+    },
+    initChartDept(year) {
+      let option = {
+        title: {
+          text: year + '各部门承担项目情况',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          bottom: '0',
+          textStyle: {
+            fontSize: 9
+          }
+        },
+        series: [
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '40%',
+            center: ['50%', '40%'],
+            data: Object.entries(this.dept).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'edge',
+              formatter: '{name|{b}}\n{value|{c}个}',
+              minMargin: 5,
+              edgeDistance: 3,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          }
+        ]
+      };
+      ehcartsInit(deptChart, 'deptNumber', option);
+    },
+    initTypeBar(year) {
+      let option = {
+        title: {
+          text: year + '项目类型统计'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        toolbox: {
+          feature: {
+            dataView: {
+              show: true,
+              optionToContent: function (opt) {
+                var axisData = opt.yAxis[0].data;
+                var series = opt.series;
+                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
+                  + '<td>项目类型</td>'
+                  + '<td>数量</td>'
+                  + '</tr>';
+                for (var i = 0, l = axisData.length; i < l; i++) {
+                  table += '<tr>'
+                    + '<td>' + axisData[i] + '</td>'
+                    + '<td>' + series[0].data[i] + '</td>'
+                    + '</tr>';
+                }
+                table += '</tbody></table>';
+                return table;
+              }
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            show: true,
+            yAxisIndex: 0,
+          }
+        ],
+        grid: {
+          left: '3%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: Object.keys(this.type),
+          axisLabel: {
+            fontSize: 9,
+            width: 50,
+            overflow: 'truncate',
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            data: Object.values(this.type)
+          }
+        ]
+      };
+      ehcartsInit(typeChart, 'typeNumber', 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.5;
+
+    .bar {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+
+    .pie-box {
+      width: 100%;
+      height: 300px;
+      display: flex;
+    }
+
+    .sourcePie {
+      flex: 1;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+
+    .deptPie {
+      flex: 2;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+
+  .middle {
+    flex: 1;
+
+    .typeBar {
+      width: 100%;
+      height: 600px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+
+  .right {
+    flex: 1;
+    display: flex;
+  }
+}
+</style>

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

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div v-loading="loading">
     <div class="titles">整体统计</div>
     <div class="item-wapper">
-      <div class="one item-box">
+      <div class="one item-box" @click="$emit('handleClick', 'project')">
         <div class="data-left">
           <div class="data-title">{{ thisYear }}年项目总数</div>
           <div class="number">{{ projectNum.toLocaleString('en-US') }}</div>
@@ -68,6 +68,7 @@ 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'
+import { getContractStatistic } from '@/api/oa/contract/contract'
 let thisYearChart
 export default {
   data() {
@@ -81,7 +82,8 @@ export default {
       type: {},
       source: {},
       dept: {},
-      subYear: 0
+      subYear: 0,
+      loading: true
     }
   },
   watch: {
@@ -97,16 +99,22 @@ export default {
   },
   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.loading = true
+      let res1 = await getProjectStatistic();
+      if (res1.data) {
+        this.year = res1.data.year[0];
+        this.type = res1.data.type[0];
+        this.source = res1.data.source[0];
+        this.dept = res1.data.dept[0];
         // this.initChartOne();
         this.getProjectYearSub(this.year);
       }
+      let res2 = await getContractStatistic();
+      if(res2.data){
+        console.log(res2.data);
+        
+      }
+      this.loading = false
     },
     initChartOne() {
       let option = {
@@ -168,14 +176,17 @@ export default {
   width: 100%;
   display: flex;
 }
+
 .titles {
   font-family: 'puhuiti';
   font-size: 16px;
   margin-bottom: 16px;
 }
-.item-box:hover{
+
+.item-box:hover {
   box-shadow: 0 0 15px #e7e5e5;
 }
+
 .item-box {
   flex: 1;
   margin: 0 10px;

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

@@ -2,31 +2,37 @@
  * @Author: ysh
  * @Date: 2024-10-11 09:23:15
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-11 16:30:17
+ * @LastEditTime: 2024-10-12 09:38:18
 -->
 <template>
   <div class="app-container bg">
     <div class="head">
-      <top-head></top-head>
+      <top-head @handleClick="changeClick"></top-head>
     </div>
     <div class="content">
-      
+      <project-statistics v-if="isActive = 'project'"></project-statistics>
     </div>
   </div>
 </template>
 
 <script>
+import ProjectStatistics from './components/projectStatistics.vue'
 import topHead from './components/topHead.vue'
 export default {
-  components: { topHead },
+  components: { topHead, ProjectStatistics },
   data() {
     return {
+      isActive: 'project'
     }
   },
   mounted() {
   },
   methods: {
+    changeClick(val) {
+      this.isActive = val
+      console.log(val);
 
+    }
   },
 }
 </script>
@@ -42,4 +48,13 @@ export default {
   border-radius: 4px;
   padding: 20px;
 }
+
+.content {
+  margin-top: 20px;
+  background-color: #fff;
+  min-height: 570px;
+  border-radius: 4px;
+  padding: 20px;
+}
+
 </style>