From 303d2889bf2b4fe66815a786bce6309e258cdb81 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Thu, 19 Jun 2025 13:12:13 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dashboard/notice.js                   |  17 ++
 .../dashboard/components/budgetStatic.vue     | 230 ++++++++++++++++
 .../dashboard/components/carryStatic.vue      | 256 ++++++++++++++++++
 src/views/dashboard/index.vue                 | 177 +++++++++---
 4 files changed, 635 insertions(+), 45 deletions(-)
 create mode 100644 src/views/dashboard/components/budgetStatic.vue
 create mode 100644 src/views/dashboard/components/carryStatic.vue

diff --git a/src/api/dashboard/notice.js b/src/api/dashboard/notice.js
index 4b7d3fb..543f765 100644
--- a/src/api/dashboard/notice.js
+++ b/src/api/dashboard/notice.js
@@ -25,6 +25,15 @@ export function statistic(params, noloading = false) {
   })
 }
 
+export function statisticDepartment(params,noLoading = false){
+  return request({
+    method:'get',
+    url:'/api/admin/notice/statistic-department',
+    params,
+    noLoading
+  })
+}
+
 export function departmentTotal(params) {
   return request({
     method: 'get',
@@ -40,3 +49,11 @@ export function nopayTotal(params) {
     params
   })
 }
+
+export function typeCarry(params) {
+  return request({
+    method: 'get',
+    url: '/api/admin/notice/type-carry',
+    params
+  })
+}
diff --git a/src/views/dashboard/components/budgetStatic.vue b/src/views/dashboard/components/budgetStatic.vue
new file mode 100644
index 0000000..3eae7d3
--- /dev/null
+++ b/src/views/dashboard/components/budgetStatic.vue
@@ -0,0 +1,230 @@
+<template>
+  <div>
+
+    <el-drawer
+      size="1050px"
+      title="预算统计"
+      :visible.sync="drawer"
+      direction="rtl">
+      <div style="padding: 0 10px;">
+        <xy-table style="width: 100%;"
+                  ref="xyTable"
+                  :objectSpanMethod="objectSpanMethod"
+                  :table-item="table"
+                  :list="list"
+                  :show-summary="true"
+                  :summary-method="summary"
+                  @select="selected"
+                  @select-all="selectAll">
+          <template v-slot:btns>
+            <div></div>
+          </template>
+        </xy-table>
+
+        <div style="display: flex;justify-content: flex-end;">
+          <Page :total="total"
+                show-elevator
+                @on-change="e => {
+                  select.page = e;
+                  getPlanProgress();
+                }" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { moneyFormatter } from '@/utils'
+import { getProgress } from '@/api/budget/budget'
+import { mergeTableRow } from '@/utils/mergeTableRow'
+
+export default {
+  data() {
+    return {
+      type: [],
+      drawer: false,
+      select: {
+        page_size: 10,
+        page: 1,
+        top_pid: 1
+      },
+      total: 0,
+      list: [],
+      selections: [],
+      table: [
+        {
+          prop: 'selection',
+          type: 'selection',
+          width: 50,
+          label: ' ',
+          reserveSelection: true,
+          fixed: 'left'
+        },
+        {
+        label: "隶属项目",
+        prop: 'pid_info_name',
+        width: 200,
+        align: 'left',
+        sortable: false,
+          fixed: this.$store.getters.device === 'mobile'?false:'left'
+      },
+        {
+          prop: 'name',
+          label: '项目名称',
+          width: 200,
+          align: 'left',
+          fixed: this.$store.getters.device === 'mobile'?false:'left'
+        },
+        {
+          prop: 'type_detail.value',
+          label: '预算类型',
+          width: 120,
+        },
+        {
+          prop: 'year',
+          label: '所属年份',
+          width: 160
+        },
+        {
+          prop: 'plan_department.name',
+          label: "相关科室",
+          width: 180
+        },
+        {
+          prop: 'content',
+          label: '描述',
+          align: 'left',
+          minWidth: 300
+        },
+        {
+          prop: 'money',
+          width: 180,
+          label: '年初预算金额(元)',
+          align: 'right'
+        },
+        {
+          prop: 'update_money',
+          width: 180,
+          label: '调整后预算金额(元)',
+          align: 'right'
+        },
+        {
+          prop: 'use_money_total',
+          label: '使用金额',
+          align: 'right',
+          width: 180
+        },
+        {
+          prop: 'rate',
+          label: '进展率',
+          width: 200,
+          customFn: (row) => {
+            let m2 = row.update_money;
+            let m1 = row.money;
+            let m3 = row.use_money_total;
+            let per = 0;
+
+            if (m2 != 0) {
+              per = ((m3 / m2) * 100).toFixed(2);
+            } else if (m1 != 0) {
+              per = ((m3 / m1) * 100).toFixed(2);
+            }
+            let perShow = Number(per)
+            return ( <div><el-progress percentage={perShow}> </el-progress></div>)
+          }
+        },
+      ]
+    }
+  },
+  methods: {
+    show () {
+      this.drawer = true
+    },
+    hide () {
+      this.drawer = false
+    },
+    objectSpanMethod({
+      row,
+      column,
+    }) {
+      const span = column['property'] + '-span'
+      if (row[span]) {
+        return row[span]
+      }
+    },
+
+    async getPlanProgress() {
+      const res = await getProgress(this.select)
+      for (let m of res.list.data) {
+        m.pid_info_name = m.pid_info?.name
+      }
+      this.list =
+        mergeTableRow({
+          data: res.list.data,
+          mergeColNames: ["pid_info_name",'selection','index'], // 需要合并的列，默认合并列相同的数据
+          firstMergeColNames: ["pid_info_name"], // 受影响的列，只合并以firstMerge为首的同类型数据
+          firstMerge: 'pid_info_name' // 以哪列为基础进行合并，一般为第一列
+        })
+      this.total = res.list.total
+
+    },
+
+    selected (selections, selected) {
+      if (selected['pid_info_name-span']?.rowspan > 1) {
+        if (this.selections.find(i => i.id === selected.id)) {
+          let len = selected['pid_info_name-span'].rowspan
+          let idx = this.selections.indexOf(selected)
+          this.selections.splice(idx,len)
+        } else {
+          let len = selected['pid_info_name-span'].rowspan
+          let idx = this.list.indexOf(selected)
+          this.selections.push(...this.list.slice(idx,idx+len))
+        }
+      } else {
+        if (this.selections.find(i => i.id === selected.id)) {
+          let idx = this.selections.indexOf(this.selections.find(i => i.id === selected.id))
+          this.selections.splice(idx,1)
+        } else {
+          this.selections.push(selected)
+        }
+      }
+
+    },
+    selectAll (selections) {
+      this.selections = selections
+    },
+    summary ({ columns,data }) {
+      return columns.map((column,index) => {
+        if (index === 0) return '总计';
+        if (column.property === 'money') {
+          return this.selections.reduce((pre,cur) => (pre + Number(cur['money'] || 0)),0).toFixed(2)
+        }
+        if (column.property === 'update_money') {
+          return this.selections.reduce((pre,cur) => (pre + Number(cur['update_money'] || 0)),0).toFixed(2)
+        }
+        if (column.property === 'use_money_total') {
+          return this.selections.reduce((pre,cur) => (pre + Number(cur['use_money_total'] || 0)),0).toFixed(2)
+        }
+        if (column.property === 'rate') {
+          let moneyTotal = this.selections.reduce((pre,cur) => (pre + Number(cur['money'] || 0)),0)
+          let useMoneyTotal = this.selections.reduce((pre,cur) => (pre + Number(cur['use_money_total'] || 0)),0)
+          let updateMoneyTotal = this.selections.reduce((pre,cur) => (pre + Number(cur['update_money'] || 0)),0)
+          if (updateMoneyTotal !== 0) return ((useMoneyTotal / updateMoneyTotal) * 100).toFixed(2) + '%';
+          if (moneyTotal !== 0) return ((useMoneyTotal / moneyTotal) * 100).toFixed(2) + '%';
+          return '0%';
+        }
+        return '';
+      })
+
+    }
+  },
+  computed: {},
+  created() {
+    this.getPlanProgress()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/dashboard/components/carryStatic.vue b/src/views/dashboard/components/carryStatic.vue
new file mode 100644
index 0000000..3c85614
--- /dev/null
+++ b/src/views/dashboard/components/carryStatic.vue
@@ -0,0 +1,256 @@
+<template>
+  <div>
+
+    <el-drawer
+      size="880px"
+      title="执行统计"
+      :visible.sync="drawer"
+      direction="rtl">
+      <div style="padding: 0 20px;">
+        <template v-if="type === 1">
+          <Card>
+            <el-checkbox :indeterminate="isIndeterminate"
+                         v-model="checkAll"
+                         @change="e => {
+                         departmentSelect = e ? departments.map(i => (i.plan_department_id)) : [];
+                         isIndeterminate = false;
+                       }">全选</el-checkbox>
+            <el-checkbox-group v-model="departmentSelect"
+                               size="small"
+                               @change="e => {
+                               let count = e.length;
+                               checkAll = count === departments.length;
+                               isIndeterminate = count > 0 && count < departments.length;
+                             }">
+              <el-checkbox v-for="item in departments" :label="item.plan_department_id" :key="item.plan_department_id">{{item.plan_department ? item.plan_department.name : item.plan_department_id}}</el-checkbox>
+            </el-checkbox-group>
+          </Card>
+
+          <Card style="margin-top: 20px;">
+            <div class="content">
+              <div class="item">
+                <p class="item__title">年初预算合计金额（元）</p>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal1)}}</div>
+              </div>
+              <div class="item">
+                <p class="item__title">调整后预算合计金额（元）</p>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal2)}}</div>
+              </div>
+              <div class="item">
+                <p class="item__title">已使用（元）</p>
+                <div class="item__value">{{moneyFormatter(totalUseMoneyTotal)}}</div>
+              </div>
+              <div class="item">
+                <p class="item__title">执行情况</p>
+                <el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
+              </div>
+            </div>
+          </Card>
+        </template>
+        <template v-else>
+          <Card>
+            <el-checkbox :indeterminate="isIndeterminate2"
+                         v-model="checkAll2"
+                         @change="e => {
+                         typeSelect = e ? types.map(i => (i.id)) : [];
+                         isIndeterminate = false;
+                       }">全选</el-checkbox>
+            <el-checkbox-group v-model="typeSelect"
+                               size="small"
+                               @change="e => {
+                               let count = e.length;
+                               checkAll2 = count === types.length;
+                               isIndeterminate2 = count > 0 && count < types.length;
+                             }">
+              <el-checkbox v-for="item in types" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
+            </el-checkbox-group>
+          </Card>
+
+          <Card style="margin-top: 20px;">
+            <div class="content">
+              <div class="item">
+                <p class="item__title">年初预算合计金额（元）</p>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal1Type)}}</div>
+              </div>
+              <div class="item">
+                <p class="item__title">调整后预算合计金额（元）</p>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal2Type)}}</div>
+              </div>
+              <div class="item">
+                <p class="item__title">已使用（元）</p>
+                <div class="item__value">{{moneyFormatter(totalUseMoneyTotalType)}}</div>
+              </div>
+              <div class="item">
+                <p class="item__title">执行情况</p>
+                <el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
+              </div>
+            </div>
+          </Card>
+        </template>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { moneyFormatter } from "@/utils"
+import { typeCarry } from "@/api/dashboard/notice"
+export default {
+  props: {
+    departments: Array,
+    year: [Number,String]
+  },
+  data() {
+    return {
+      type: 1,//1科室2类型
+      drawer: false,
+      isIndeterminate: false,
+      checkAll: false,
+
+      departmentSelect: [],
+
+
+      isIndeterminate2: false,
+      checkAll2: false,
+      types: [],
+      typeSelect: [],
+    }
+  },
+  methods: {
+    moneyFormatter,
+    show () {
+      this.drawer = true
+    },
+    hide () {
+      this.drawer = false
+    },
+    setType (type) {
+      this.type = type
+    }
+  },
+  computed: {
+    selectedDepartments () {
+      return this.departments?.filter(i => this.departmentSelect.find(j => j === i.plan_department_id)) || []
+    },
+    totalMoneyTotal1 () {
+     return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
+    },
+    totalMoneyTotal2 () {
+      return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
+    },
+    totalUseMoneyTotal () {
+      return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
+    },
+    totalPercent () {
+      if (this.type === 1) {
+        return (Number(this.totalMoneyTotal2 !== 0) ? (Math.round(Number(this.totalUseMoneyTotal) / Number(this.totalMoneyTotal2) * 10000)/100) : (Math.round(Number(this.totalUseMoneyTotal) / Number(this.totalMoneyTotal1) * 10000)/100)) || 0
+      } else {
+        return (Number(this.totalMoneyTotal2Type !== 0) ? (Math.round(Number(this.totalUseMoneyTotalType) / Number(this.totalMoneyTotal2Type) * 10000)/100) : (Math.round(Number(this.totalUseMoneyTotalType) / Number(this.totalMoneyTotal1Type) * 10000)/100)) || 0
+      }
+    },
+
+    selectedTypes () {
+      return this.types?.filter(i => this.typeSelect.find(j => j === i.id)) || []
+    },
+    totalMoneyTotal1Type () {
+      return this.selectedTypes?.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
+    },
+    totalMoneyTotal2Type () {
+      return this.selectedTypes?.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
+    },
+    totalUseMoneyTotalType () {
+      return this.selectedTypes?.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
+    },
+  },
+  watch: {
+    year: {
+      handler:function(val) {
+        typeCarry({
+          year: val
+        }).then(res => {
+          this.types = res
+          console.log(res)
+        })
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$color: linear-gradient(to top left, #ff6641, #ec3634),
+linear-gradient(to top left, #4bfbb2, #49f2ac),
+linear-gradient(to top left, #efd458, #ba840a),
+linear-gradient(to top left, #05e6ff, #0069fe),
+linear-gradient(to top left, #a5ffff, #8fccd9),
+linear-gradient(to top left, #fca7ff, #7a519a),
+linear-gradient(to top left, #a4e829, #06ac2e);
+
+@for $index from 1 through length($color) {
+  .card#{$index} {
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: nth($color, $index);
+    grid-area: card#{$index};
+    border-radius: 4px;
+    filter: drop-shadow(0 2px 8px #0004);
+
+    padding: 20px;
+
+    .item__title {
+      font-weight: 600;
+      text-align: center;
+
+      padding-bottom: 20px;
+      position: relative;
+
+      &::after {
+        content: '';
+        height: 2px;
+        background: linear-gradient(to right,#fff 40%,#0000);
+
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+      }
+    }
+    .item__value {
+      text-align: center;
+      flex: 1;
+      padding-top: 20px;
+    }
+  }
+}
+.content {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-gap: 20px;
+
+  padding: 20px 0;
+  .item__title {
+    text-align: center;
+  }
+  .item__value {
+    font-weight: 600;
+    font-size: 17px;
+    text-align: center;
+
+    padding-top: 20px;
+  }
+}
+
+::v-deep .el-checkbox {
+  display: block;
+  margin-bottom: 6px;
+}
+::v-deep .el-checkbox-group {
+  max-height: 300px;
+  overflow-y: scroll;
+
+  margin-left: 20px;
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7c07f52..df1abab 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -6,11 +6,22 @@
       <el-col :span="12">
         <el-card class="box-card">
           <div slot="header" class="box-card-header">
-            <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="notice" />
-            <span style="padding-left: 10px">待办事项</span>
-            <i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
+            <!-- <span style="padding-left: 10px">待办事项</span>
+            <i class="el-icon-more" style="margin-left: auto; font-size: 20px" /> -->
+            <el-tabs v-model="activeName">
+                <el-tab-pane label="待办事项" name="todo">
+                  <span slot="label">
+                    <SvgIcon style="color: #2D8cF0;width: 17px;height: 17px;" icon-class="notice" /> 待办事项
+                  </span>
+                </el-tab-pane>
+                <el-tab-pane v-if="isShowNoPay" label="合同到期待办清单" name="todolist">
+                  <span slot="label">
+                    <SvgIcon style="color: #2D8cF0;width: 14px;height: 14px;" icon-class="caidan" /> 合同到期待办清单
+                  </span>
+                </el-tab-pane>
+            </el-tabs>
           </div>
-          <div class="table-tree1">
+          <div class="table-tree1" v-if="activeName==='todo'">
             <el-table :data="list" border class="v-table" style="width: 100%; margin-bottom: 20px;height:220px">
               <el-table-column type="index" label="序号" align="center" />
               <el-table-column prop="type" width="100" label="类型" align="center" :formatter="typeFormatter" />
@@ -45,11 +56,16 @@
             <div style="display: flex; justify-content: flex-end">
               <Page :total="total" show-elevator @on-change="pageChange" />
             </div>
+          </div>
+          <div v-if="isShowNoPay && activeName==='todolist'">
+            <xy-table :cell-style="nopayCellStyle" :height="270" :list="nopay" :table-item="nopayTable">
+              <template v-slot:btns />
+            </xy-table>
           </div>
         </el-card>
 
       </el-col>
-      <el-col :span="12">
+      <el-col :span="11">
         <el-card class="box-card">
           <div slot="header" class="box-card-header">
             <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="calendar-check" />
@@ -99,41 +115,34 @@
           </router-link>
         </el-card>
       </el-col>
-      <el-col :span="24">
-        <el-card class="box-card">
-          <div slot="header" class="box-card-header">
-            <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="calendar-check" />
-            <span style="padding-left:10px;">合同签订统计表</span>
-            <i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
-          </div>
-          <div style="margin-top:10px">
-            <xy-table
-              ref="xyTable"
-              :height="300"
-              :list="departmentTotal"
-              :table-item="departmentTotalTable"
-              :show-summary="true"
-              :summary-method="summary"
-            >
-              <template v-slot:btns />
-            </xy-table>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col v-if="isShowNoPay" :span="24">
-        <el-card class="box-card">
-          <div slot="header" class="box-card-header">
-            <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" />
-            <span style="padding-left:10px;">合同到期待办清单</span>
-            <i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
-          </div>
-          <div style="margin-top:10px">
-            <xy-table :cell-style="nopayCellStyle" :height="300" :list="nopay" :table-item="nopayTable">
-              <template v-slot:btns />
-            </xy-table>
+      <el-col :span="1">
+          <div style="display: flex;flex-direction: column;height: 310px;padding-top: 20px;">
+            <div class="show-static-btn" @click="$refs['budgetStatic'].show()">
+              统计查看
+              <i class="el-icon-d-arrow-left"></i>
+            </div>
+            <div class="show-static-btn"
+                 @click="$confirm('选择统计的数据类型','提示',{
+                   confirmButtonText: '预算类型',
+                   cancelButtonText: '部门科室',
+                   showClose: false,
+                   callback:(action, instance) => {
+                     if (action === 'cancel') {
+                       $refs['carryStatic'].setType(1)
+                       $refs['carryStatic'].show()
+                     }
+                     if (action === 'confirm') {
+                       $refs['carryStatic'].setType(2)
+                       $refs['carryStatic'].show()
+                     }
+                   }
+                 })">
+              执行统计
+              <i class="el-icon-d-arrow-left"></i>
+            </div>
           </div>
-        </el-card>
-      </el-col>
+        </el-col>
+      </el-row>
       <div v-for="(sitem, index) in typeList">
         <template v-if="sitem[0]&&sitem[1]">
           <el-col v-if="sitem[0]" :span="12">
@@ -255,9 +264,49 @@
           </el-col>
         </template>
       </div>
+
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="box-card-header">
+            <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="calendar-check" />
+            <span style="padding-left:10px;">合同签订统计表</span>
+            <i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
+          </div>
+          <div style="margin-top:10px">
+            <xy-table
+              ref="xyTable"
+              :height="300"
+              :list="departmentTotal"
+              :table-item="departmentTotalTable"
+              :show-summary="true"
+              :summary-method="summary"
+            >
+              <template v-slot:btns />
+            </xy-table>
+          </div>
+        </el-card>
+      </el-col>
+      <!-- <el-col v-if="isShowNoPay" :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="box-card-header">
+            <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" />
+            <span style="padding-left:10px;">合同到期待办清单</span>
+            <i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
+          </div>
+          <div style="margin-top:10px">
+            <xy-table :cell-style="nopayCellStyle" :height="300" :list="nopay" :table-item="nopayTable">
+              <template v-slot:btns />
+            </xy-table>
+          </div>
+        </el-card>
+      </el-col> -->
 
     </el-row>
-    <detailContract ref="detailContract" />
+    <detailContract ref="detailContract" />
+
+    <budgetStatic ref="budgetStatic"></budgetStatic>
+
+    <carryStatic ref="carryStatic" :departments="statistic.departmentList" :year="select.year"></carryStatic>
   </div>
 </template>
 
@@ -266,7 +315,9 @@ import detailContract from '@/views/contract/components/detailContract'
 import LxHeader from '@/components/LxHeader/index.vue'
 import Pagination from '@/components/Pagination'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import MyProgress from '@/components/Progress/index.vue'
+import MyProgress from '@/components/Progress/index.vue'
+import budgetStatic from '@/views/dashboard/components/budgetStatic.vue'
+import carryStatic from '@/views/dashboard/components/carryStatic.vue'
 import {
   adminDepartmentList
 } from '@/api/system/department'
@@ -281,7 +332,8 @@ import {
 import {
   getNotice,
   readNotice,
-  statistic
+  statistic,
+  statisticDepartment
 } from '@/api/dashboard/notice'
 import {
   parseTime,
@@ -297,12 +349,15 @@ export default {
     Pagination,
     detailContract,
     SvgIcon,
-    MyProgress
+    MyProgress,
+    budgetStatic,
+    carryStatic
   },
   data() {
     return {
       isShowNoPay: true,
-      nopay: [],
+      nopay: [],
+      activeName:'todo',
       nopayTable: [{
         prop: 'name',
         label: '合同名称',
@@ -1277,6 +1332,10 @@ export default {
           arr.push([res.typeList[i], res.typeList[i + 1]])
         }
         this.typeList = arr
+      }
+      if(res.departmentList){
+        this.statistic.departmentList = res.departmentList?.sort((a, b) => a.plan_department.sortnumber - b.plan_department.sortnumber)
+
       }
       // this.split = Array.from({ length: Math.ceil(this.typeList/2) },() => 0.5)
     },
@@ -1427,7 +1486,35 @@ export default {
   }
 
 </style>
-<style scoped lang="scss">
+<style scoped lang="scss">
+  .show-static-btn {
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 600;
+    text-align: center;
+    color: #fff;
+    background: #4d8bdc;
+    border-radius: 4px;
+    border: 1px solid #EBEEF5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: all .2s;
+    flex: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+
+    & + & {
+      background: darkorange;
+      margin-top: 20px;
+    }
+    &:hover {
+      transform: scale(1.05,1.05);
+    }
+  }
   ::v-deep .el-dialog__body {
     padding: 8px 20px;
   }

From 2776d895c6c885c2da7e1e40bfa838267fb183eb Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Thu, 19 Jun 2025 13:18:02 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/components/budgetStatic.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/dashboard/components/budgetStatic.vue b/src/views/dashboard/components/budgetStatic.vue
index 3eae7d3..f18f819 100644
--- a/src/views/dashboard/components/budgetStatic.vue
+++ b/src/views/dashboard/components/budgetStatic.vue
@@ -16,6 +16,7 @@
                   :summary-method="summary"
                   @select="selected"
                   @select-all="selectAll">
+
           <template v-slot:btns>
             <div></div>
           </template>

From bb46171f837ed5aab10bfbc1110a88af1e2bbe62 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Mon, 23 Jun 2025 11:28:36 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=BB=9F=E8=AE=A1tuxing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Progress/index.vue             | 254 ++++++++++--------
 .../dashboard/components/budgetStatic.vue     |  23 +-
 src/views/dashboard/index.vue                 |   2 +-
 3 files changed, 154 insertions(+), 125 deletions(-)

diff --git a/src/components/Progress/index.vue b/src/components/Progress/index.vue
index 207497f..22a6abf 100644
--- a/src/components/Progress/index.vue
+++ b/src/components/Progress/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" ref="chartContainer" />
 </template>
 
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/resize'
+
 export default {
   mixins: [resize],
   props: {
@@ -15,159 +15,175 @@ export default {
     },
     height: {
       type: String,
-      default: '100px'
+      default: '350px' // 增加高度以容纳图例
     },
     width: {
       type: String,
-      default: '100px'
-    },
-    percent: {
-      type: [Number, String],
-      default: ''
+      default: '300px'
     },
     chartData: {
       type: Array,
-      default: () => []
+      required: true
     },
     title: {
       type: String,
-      default: '标题'
+      default: '数据统计'
     }
   },
   data() {
     return {
-      flag: true,
-      chart: null
+      chart: null,
+      showRemaining: false,
+      usedAmount: 0,
+      totalAmount: 0,
+      remainingAmount: 0,
+      usedPercent: 0
     }
   },
   computed: {
-    options() {
-      return {
-        legend: {
-          show: true,
-          bottom: 0,
-          left: 'center',
-          orient: 'horizontal',
-          itemWidth: 8,
-          itemHeight: 5
-        },
-        color: ['#446df6', '#ccc', '#f2a93f', '#56b7f9'],
-        series: [
-          {
-            type: 'pie',
-            radius: ['50%', '70%'],
-            center: ['50%', '36%'],
-            padAngle: 4,
-            itemStyle: {
-              borderRadius: 10,
-              padding: 10
-            },
-            label: {
-              show: true,
-              position: 'center',
-              formatter: '{b}\n{d}%'
-            },
-            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
-            emphasis: { // 高亮，即鼠标经过时的样式
-              scale: true // 表示不放大item
-            },
-            labelLine: {
-              show: false
-            },
-            data: (() => {
-              if (this.percent || this.percent === 0) {
-                return [
-                  { value: parseFloat(this.percent), name: `${this.title}率` },
-                  { value: 100 - parseFloat(this.percent), name: `未${this.title}率` }
-                ]
-              } else {
-                return this.chartData
-              }
-            })()
-          }
-        ],
-        graphic: {
-          elements: []
-        }
-      }
-    }
-  },
-  watch: {
-    chartData() {
-      this.setOptions()
+    formattedUsedAmount() {
+      return this.usedAmount.toFixed(2)
+    },
+    formattedRemainingAmount() {
+      return this.remainingAmount.toFixed(2)
+    },
+    formattedUsedPercent() {
+      return this.usedPercent.toFixed(2)
+    },
+    formattedRemainingPercent() {
+      return (100 - this.usedPercent).toFixed(2)
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
+      this.bindEvents()
     })
   },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  },
+  watch: {
+    chartData: {
+      handler() {
+        this.setOptions()
+      },
+      deep: true
+    }
+  },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$refs.chartContainer)
       this.setOptions()
     },
     setOptions() {
-      this.chart?.setOption(this.options)
-      // this.setGraphics()
-    },
-    setGraphics() {
-      const getPointOnCircle = (angle, radiusPercent) => {
-        const radian = (angle - 90 - 12) * Math.PI / 180
-        const radius = this.chart.getWidth() / 2 * radiusPercent / 100
-        const x = this.chart.getWidth() / 2 + Math.cos(radian) * radius
-        const y = this.chart.getHeight() / 2 + Math.sin(radian) * radius - this.chart.getHeight() * 0.1
-        return { x: x, y: y }
-      }
-      const graphicElements = []
-      let total = 0
-      if (!this.options?.series[0]?.data) return
-      this.options?.series[0]?.data.forEach(function(item) {
-        total += item.value
-      })
+      // 从chartData中提取已用金额和合计金额
+      const usedItem = this.chartData.find(item => item.name === '已用金额') || { value: 0 }
+      const totalItem = this.chartData.find(item => item.name === '合计金额') || { value: 0 }
 
-      let startAngle = 0
-      this.options?.series[0]?.data.forEach(function(item) {
-        const angle = (item.value / total) * 360
-        const endAngle = startAngle + angle
-        const middleAngle = (startAngle + endAngle) / 2
+      this.usedAmount = parseFloat(usedItem.value) || 0
+      this.totalAmount = parseFloat(totalItem.value) || 0
+      this.remainingAmount = Math.max(0, this.totalAmount - this.usedAmount)
+      this.usedPercent = this.totalAmount > 0
+        ? (this.usedAmount / this.totalAmount) * 100
+        : 0
 
-        // 计算开始和结束点的位置
-        const pointStart = getPointOnCircle(middleAngle - angle / 2, 60)
-        const pointEnd = getPointOnCircle(middleAngle + angle / 2, 60)
-
-        // 添加小圆的装饰
-        graphicElements.push({
-          type: 'circle',
-          shape: {
-            cx: pointStart.x,
-            cy: pointStart.y,
-            r: 3
+      const option = {
+        // 添加图例配置
+        legend: {
+          type: 'plain',
+          orient: 'horizontal', // 水平排列
+          bottom: 0,           // 位于底部
+          left: 'center',       // 居中对齐
+          itemWidth: 12,        // 图例标记宽度
+          itemHeight: 12,       // 图例标记高度
+          textStyle: {
+            fontSize: 10,
+            color: '#333'
           },
-          style: {
-            fill: '#fff'
+          data: [
+            { name: '已用金额', icon: 'circle' },
+            { name: '剩余金额', icon: 'circle' }
+          ]
+        },
+        series: [{
+          type: 'pie',
+          radius: ['50%', '70%'],
+          center: ['50%', '40%'], // 调整图表位置，为图例腾出空间
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 6,
+            borderColor: '#fff',
+            borderWidth: 2
           },
-          z: 100
-        })
-        graphicElements.push({
-          type: 'circle',
-          shape: {
-            cx: pointEnd.x,
-            cy: pointEnd.y,
-            r: 3
+          label: {
+            show: true,
+            position: 'center',
+            formatter: () => `已用\n{value|${this.formattedUsedAmount}}\n{percent|${this.formattedUsedPercent}%}`,
+            rich: {
+              value: {
+                fontSize: 14,
+                fontWeight: 'bold',
+                lineHeight: 30
+              },
+              percent: {
+                fontSize: 12,
+                color: '#666'
+              }
+            }
           },
-          style: {
-            fill: '#fff'
+          labelLine: {
+            show: false
           },
-          z: 100
-        })
+          data: [
+            {
+              value: this.usedAmount,
+              name: '已用金额',
+              itemStyle: {
+                color: '#446df6' // 已用金额颜色
+              }
+            },
+            {
+              value: this.remainingAmount,
+              name: '剩余金额',
+              itemStyle: {
+                color: '#ddd' // 剩余金额颜色
+              }
+            }
+          ]
+        }]
+      }
 
-        startAngle += angle
+      this.chart.setOption(option)
+    },
+    bindEvents() {
+      // 鼠标悬停在剩余金额区域时显示剩余金额
+      this.chart.on('mouseover', params => {
+        if (params.data.name === '剩余金额') {
+          this.showRemaining = true
+          this.chart.setOption({
+            series: [{
+              label: {
+                formatter: () => `剩余\n{value|${this.formattedRemainingAmount}}\n{percent|${this.formattedRemainingPercent}%}`
+              }
+            }]
+          })
+        }
       })
 
-      this.chart.setOption({
-        graphic: {
-          elements: graphicElements
+      // 鼠标移出时恢复显示已用金额
+      this.chart.on('mouseout', params => {
+        if (params.data.name === '剩余金额') {
+          this.showRemaining = false
+          this.chart.setOption({
+            series: [{
+              label: {
+                formatter: () => `已用\n{value|${this.formattedUsedAmount}}\n{percent|${this.formattedUsedPercent}%}`
+              }
+            }]
+          })
         }
       })
     }
@@ -175,5 +191,5 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 </style>
diff --git a/src/views/dashboard/components/budgetStatic.vue b/src/views/dashboard/components/budgetStatic.vue
index f18f819..8bd1ed4 100644
--- a/src/views/dashboard/components/budgetStatic.vue
+++ b/src/views/dashboard/components/budgetStatic.vue
@@ -41,6 +41,9 @@ import { getProgress } from '@/api/budget/budget'
 import { mergeTableRow } from '@/utils/mergeTableRow'
 
 export default {
+    props: {
+    year: [Number,String]
+  },
   data() {
     return {
       type: [],
@@ -48,7 +51,7 @@ export default {
       select: {
         page_size: 10,
         page: 1,
-        top_pid: 1
+        top_pid: 1,
       },
       total: 0,
       list: [],
@@ -154,9 +157,11 @@ export default {
         return row[span]
       }
     },
-
-    async getPlanProgress() {
-      const res = await getProgress(this.select)
+    async getPlanProgress(val) {
+      const res = await getProgress({
+        year:val,
+        ...this.select
+      })
       for (let m of res.list.data) {
         m.pid_info_name = m.pid_info?.name
       }
@@ -221,8 +226,16 @@ export default {
     }
   },
   computed: {},
+  watch: {
+    year: {
+      handler:function(val) {
+        this.getPlanProgress(val)
+      },
+      immediate: true
+    }
+  },
   created() {
-    this.getPlanProgress()
+    // this.getPlanProgress()
   }
 }
 </script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index df1abab..87ce0c4 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -304,7 +304,7 @@
     </el-row>
     <detailContract ref="detailContract" />
 
-    <budgetStatic ref="budgetStatic"></budgetStatic>
+    <budgetStatic ref="budgetStatic" :year="select.year"></budgetStatic>
 
     <carryStatic ref="carryStatic" :departments="statistic.departmentList" :year="select.year"></carryStatic>
   </div>