From 352f85d09984201cfe9e4ede0f84d30b6a516cab Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Mon, 7 Jul 2025 14:30:44 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Progress/index.vue             | 318 ++++++++----------
 .../dashboard/components/budgetStatic.vue     |  71 ++--
 src/views/dashboard/index.vue                 |  35 +-
 3 files changed, 200 insertions(+), 224 deletions(-)

diff --git a/src/components/Progress/index.vue b/src/components/Progress/index.vue
index 22a6abf..56de546 100644
--- a/src/components/Progress/index.vue
+++ b/src/components/Progress/index.vue
@@ -1,195 +1,167 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }" ref="chartContainer" />
-</template>
+    <div :class="className" :style="{ height: height, width: width }" ref="chartContainer" />
+  </template>
 
-<script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/resize'
+  <script>
+  import * as echarts from 'echarts'
+  import resize from '@/mixins/resize'
 
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: ''
-    },
-    height: {
-      type: String,
-      default: '350px' // 增加高度以容纳图例
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: ''
+      },
+      height: {
+        type: String,
+        default: '350px' // 增加高度以容纳图例
+      },
+      width: {
+        type: String,
+        default: '300px'
+      },
+      chartData: {
+        type: Array,
+        required: true
+      },
+      title: {
+        type: String,
+        default: '数据统计'
+      }
     },
-    width: {
-      type: String,
-      default: '300px'
+    data() {
+      return {
+        chart: null,
+        showRemaining: false,
+        usedAmount: 0,
+        totalAmount: 0,
+        remainingAmount: 0,
+        usedPercent: 0
+      }
     },
-    chartData: {
-      type: Array,
-      required: true
+    computed: {
+      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)
+      }
     },
-    title: {
-      type: String,
-      default: '数据统计'
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      showRemaining: false,
-      usedAmount: 0,
-      totalAmount: 0,
-      remainingAmount: 0,
-      usedPercent: 0
-    }
-  },
-  computed: {
-    formattedUsedAmount() {
-      return this.usedAmount.toFixed(2)
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+        this.bindEvents()
+      })
     },
-    formattedRemainingAmount() {
-      return this.remainingAmount.toFixed(2)
+    beforeDestroy() {
+      if (this.chart) {
+        this.chart.dispose()
+      }
     },
-    formattedUsedPercent() {
-      return this.usedPercent.toFixed(2)
+    watch: {
+      chartData: {
+        handler() {
+          this.setOptions()
+        },
+        deep: true
+      }
     },
-    formattedRemainingPercent() {
-      return (100 - this.usedPercent).toFixed(2)
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-      this.bindEvents()
-    })
-  },
-  beforeDestroy() {
-    if (this.chart) {
-      this.chart.dispose()
-    }
-  },
-  watch: {
-    chartData: {
-      handler() {
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$refs.chartContainer)
         this.setOptions()
       },
-      deep: true
-    }
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$refs.chartContainer)
-      this.setOptions()
-    },
-    setOptions() {
-      // 从chartData中提取已用金额和合计金额
-      const usedItem = this.chartData.find(item => item.name === '已用金额') || { value: 0 }
-      const totalItem = this.chartData.find(item => item.name === '合计金额') || { value: 0 }
+      setOptions() {
+        // 从chartData中提取已用金额和合计金额
+        const usedItem = this.chartData.find(item => item.name === '已用金额') || { value: 0 }
+        const totalItem = this.chartData.find(item => item.name === '合计金额') || { value: 0 }
 
-      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
+        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 option = {
-        // 添加图例配置
-        legend: {
-          type: 'plain',
-          orient: 'horizontal', // 水平排列
-          bottom: 0,           // 位于底部
-          left: 'center',       // 居中对齐
-          itemWidth: 12,        // 图例标记宽度
-          itemHeight: 12,       // 图例标记高度
-          textStyle: {
-            fontSize: 10,
-            color: '#333'
-          },
-          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
-          },
-          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'
-              }
-            }
-          },
-          labelLine: {
-            show: false
+        const option = {
+          // 添加图例配置
+          legend: {
+            type: 'plain',
+            orient: 'horizontal', // 水平排列
+            bottom: 0,           // 位于底部
+            left: 'center',       // 居中对齐
+            itemWidth: 12,        // 图例标记宽度
+            itemHeight: 12,       // 图例标记高度
+            textStyle: {
+              fontSize: 10,
+              color: '#333'
+            },
+            data: [
+              { name: '已用金额', icon: 'circle' },
+              { name: '剩余金额', icon: 'circle' }
+            ]
           },
-          data: [
-            {
-              value: this.usedAmount,
-              name: '已用金额',
-              itemStyle: {
-                color: '#446df6' // 已用金额颜色
-              }
+          series: [{
+            type: 'pie',
+            radius: ['40%', '65%'],
+            center: ['50%', '45%'],
+            avoidLabelOverlap: false,
+            minShowLabelAngle: 10,
+            itemStyle: {
+              borderRadius: 6,
+              borderColor: '#fff',
+              borderWidth: 2
             },
-            {
-              value: this.remainingAmount,
-              name: '剩余金额',
-              itemStyle: {
-                color: '#ddd' // 剩余金额颜色
+            label: {
+              show: true,
+              position: 'outside',
+              fontSize: 12,
+              color: '#333',
+              formatter: params => {
+                // 只显示有数值的部分
+                if (params.value === 0) return '';
+                const percent = this.totalAmount > 0 ? ((params.value / this.totalAmount) * 100).toFixed(2) : '0.00';
+                return `${params.name}\n${percent}%`;
               }
-            }
-          ]
-        }]
-      }
-
-      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}%}`
+            },
+            labelLine: {
+              show: true,
+              length: 8,
+              length2: 5,
+              smooth: true
+            },
+            data: [
+              {
+                value: this.usedAmount,
+                name: '已用金额',
+                itemStyle: {
+                  color: '#446df6' // 已用金额颜色
+                }
+              },
+              {
+                value: this.remainingAmount,
+                name: '剩余金额',
+                itemStyle: {
+                  color: '#ddd' // 剩余金额颜色
+                }
               }
-            }]
-          })
+            ]
+          }]
         }
-      })
 
-      // 鼠标移出时恢复显示已用金额
-      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}%}`
-              }
-            }]
-          })
-        }
-      })
+        this.chart.setOption(option)
+      },
+      // 移除bindEvents方法和相关调用
     }
   }
-}
-</script>
+  </script>
 
-<style scoped>
-</style>
+  <style scoped>
+  </style>
diff --git a/src/views/dashboard/components/budgetStatic.vue b/src/views/dashboard/components/budgetStatic.vue
index 8bd1ed4..4dd5948 100644
--- a/src/views/dashboard/components/budgetStatic.vue
+++ b/src/views/dashboard/components/budgetStatic.vue
@@ -2,7 +2,7 @@
   <div>
 
     <el-drawer
-      size="1050px"
+      size="1250px"
       title="预算统计"
       :visible.sync="drawer"
       direction="rtl">
@@ -80,27 +80,7 @@ export default {
           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,
@@ -138,6 +118,27 @@ export default {
             return ( <div><el-progress percentage={perShow}> </el-progress></div>)
           }
         },
+        {
+          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
+        },
       ]
     }
   },
@@ -168,7 +169,7 @@ export default {
       this.list =
         mergeTableRow({
           data: res.list.data,
-          mergeColNames: ["pid_info_name",'selection','index'], // 需要合并的列，默认合并列相同的数据
+          mergeColNames: ["pid_info_name",'index'], // 需要合并的列，默认合并列相同的数据
           firstMergeColNames: ["pid_info_name"], // 受影响的列，只合并以firstMerge为首的同类型数据
           firstMerge: 'pid_info_name' // 以哪列为基础进行合并，一般为第一列
         })
@@ -177,24 +178,24 @@ export default {
     },
 
     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 (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) {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 87ce0c4..1700f18 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -22,7 +22,7 @@
             </el-tabs>
           </div>
           <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 :data="list" border class="v-table" style="width: 100%; margin-bottom: 20px;height:260px">
               <el-table-column type="index" label="序号" align="center" />
               <el-table-column prop="type" width="100" label="类型" align="center" :formatter="typeFormatter" />
               <el-table-column prop="content" label="内容" align="left" show-overflow-tooltip />
@@ -58,7 +58,7 @@
             </div>
           </div>
           <div v-if="isShowNoPay && activeName==='todolist'">
-            <xy-table :cell-style="nopayCellStyle" :height="270" :list="nopay" :table-item="nopayTable">
+            <xy-table :cell-style="nopayCellStyle" :height="300" :list="nopay" :table-item="nopayTable">
               <template v-slot:btns />
             </xy-table>
           </div>
@@ -105,8 +105,8 @@
               <div class="progress-card-item">
                 <MyProgress
                   ref="MyProgress"
-                  width="145px"
-                  height="145px"
+                  width="300px"
+                  height="165px"
                   title="执行率"
                   :chart-data="[{value:statistic.progress.use_money_total,name:'已用金额'},{value:statistic.progress.money_total_2 ? statistic.progress.money_total_2 : statistic.progress.money_total_1,name:'合计金额'}]"
                 />
@@ -145,7 +145,7 @@
       </el-row>
       <div v-for="(sitem, index) in typeList">
         <template v-if="sitem[0]&&sitem[1]">
-          <el-col v-if="sitem[0]" :span="12">
+          <el-col v-if="sitem[0]" :span="12" style="padding-right:10px">
             <el-card class="box-card">
               <div slot="header" class="box-card-header">
                 <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" />
@@ -178,15 +178,15 @@
                   <div class="progress-card-item">
                     <MyProgress
                       ref="MyProgress1"
-                      width="145px"
-                      height="145px"
+                      width="300px"
+                      height="165px"
                       title="执行率"
                       :chart-data="[{value:parseFloat(sitem[0].use_money_total),name:'已用金额'},{value:parseFloat(sitem[0].money_total_2) ? parseFloat(sitem[0].money_total_2) : parseFloat(sitem[0].money_total_1),name:'合计金额'}]"
                     />
                   </div>
                 </div>
               </div>
-              <xy-table :height="380" :list="sitem[0].departments" :table-item="departmentTable">
+              <xy-table :height="560" :list="sitem[0].departments" :table-item="departmentTable">
                 <template v-slot:btns>
                   <el-table-column :width="80" fixed="right" label="操作" header-align="center" align="center">
                     <template slot-scope="scope">
@@ -201,7 +201,7 @@
             </el-card>
           </el-col>
 
-          <el-col v-if="sitem[1]" :span="12">
+          <el-col v-if="sitem[1]" :span="12" style="padding-left:10px">
             <el-card class="box-card">
               <div slot="header" class="box-card-header">
                 <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" />
@@ -234,15 +234,15 @@
                   <div class="progress-card-item">
                     <MyProgress
                       ref="MyProgress2"
-                      width="145px"
-                      height="145px"
+                      width="300px"
+                      height="165px"
                       title="执行率"
                       :chart-data="[{value:parseFloat(sitem[1].use_money_total),name:'已用金额'},{value:parseFloat(sitem[1].money_total_2) ? parseFloat(sitem[1].money_total_2) : parseFloat(sitem[1].money_total_1),name:'合计金额'}]"
                     />
                   </div>
                 </div>
               </div>
-              <xy-table :height="380" :list="sitem[1].departments" :table-item="departmentTable">
+              <xy-table :height="280" :list="sitem[1].departments" :table-item="departmentTable">
                 <template v-slot:btns>
                   <el-table-column
                     :width="80"
@@ -1336,7 +1336,8 @@ export default {
       if(res.departmentList){
         this.statistic.departmentList = res.departmentList?.sort((a, b) => a.plan_department.sortnumber - b.plan_department.sortnumber)
 
-      }
+      }
+      console.log("this.statistic.typeList",this.typeList)
       // this.split = Array.from({ length: Math.ceil(this.typeList/2) },() => 0.5)
     },
     getPer(row) {
@@ -1532,15 +1533,17 @@ export default {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    height:280px;
+    height:310px;
     margin-top:10px;
     &-item {
       min-width: 120px;
-      margin: 10px;
+      // margin: 10px;
+      margin-bottom: 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
+      flex-basis: 50%;
 
       &__label {
         font-size: 15px;
@@ -1626,7 +1629,7 @@ export default {
 
   .table-tree1 {
     margin-top: 10px;
-    height:280px;
+    height:310px;
   }
 
   .v-text {