From da1982cb2e1a3e1377d8e60a17c7599af22d31b5 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Tue, 2 Dec 2025 13:19:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.staging                                  |   26 +-
 src/api/contract/contractDetail.js            |   43 +
 src/api/dashboard/notice.js                   |    8 +
 src/api/departmentPlanMoney/index.js          |   35 +
 src/views/contractDetails/index.vue           |  765 ++++++
 src/views/dashboard/index.vue                 | 2393 ++++++++++-------
 src/views/dashboard/index2.vue                | 1163 ++++++++
 src/views/departmentPlanMoney/index.vue       |  324 +++
 .../system/workerComponents/department.vue    |  331 ++-
 src/views/system/workerComponents/toDo.vue    |   12 +-
 src/views/system/workerComponents/total.vue   |  148 +-
 11 files changed, 4153 insertions(+), 1095 deletions(-)
 create mode 100644 src/api/contract/contractDetail.js
 create mode 100644 src/api/departmentPlanMoney/index.js
 create mode 100644 src/views/contractDetails/index.vue
 create mode 100644 src/views/dashboard/index2.vue
 create mode 100644 src/views/departmentPlanMoney/index.vue

diff --git a/.env.staging b/.env.staging
index 07780ea..8e30887 100644
--- a/.env.staging
+++ b/.env.staging
@@ -4,14 +4,22 @@ NODE_ENV = production
 ENV = 'staging'
 
 # base api
-VUE_APP_DOMIAN = http://hjjc-hdcontract-test.ali251.langye.net
-VUE_APP_UPLOAD_API = http://hjjc-hdcontract-test.ali251.langye.net/api/admin/upload-file
-VUE_APP_BASE_API =
-VUE_APP_OUT_Book = http://hjjc-book-service-test.ali251.langye.net
-VUE_APP_OUT_GDZC = http://hjjc-szemcgdzc.ali251.langye.net/admin
-VUE_APP_OUT_OLD = http://hjjc-szemcold-test.ali251.langye.net
+VUE_APP_DOMIAN=http://192.168.0.66:9001/
+VUE_APP_UPLOAD_API = http://192.168.00.66:9001/api/admin/upload-file
+VUE_APP_BASE_API = ''
+VUE_APP_OUT_Book = http://192.168.0.66:9002/
+VUE_APP_OUT_GDZC = http://192.168.0.66:17777/admin
+VUE_APP_OUT_OLD = http://192.168.0.66
 VUE_APP_OUT_URL = http://192.168.60.18:2021
+VUE_APP_OLD_OA = http://192.168.0.66:16667
 VUE_APP_OUT_GOODS = http://hjjc-szemc_goods-test.ali251.langye.net
-VUE_APP_OUT_GPS=http://hjjc-gps.ali251.langye.net
-#VUE_APP_OLD_OA = http://192.168.0.66:16667
-VUE_APP_OLD_OA = http://hjjc-szemcold-test.ali251.langye.net
+VUE_APP_OUT_GPS=http://192.168.0.66:9003/admin/#/
+
+#
+#VUE_APP_DOMIAN = http://hjjc-hdcontract-test.ali251.langye.net
+#VUE_APP_UPLOAD_API = http://hjjc-hdcontract-test.ali251.langye.net/api/admin/upload-file
+#VUE_APP_BASE_API =
+#VUE_APP_OUT_Book = http://hjjc-book-service-test.ali251.langye.net
+#VUE_APP_OUT_GDZC = http://hjjc-szemcgdzc.ali251.langye.net
+#VUE_APP_OUT_OLD = http://hjjc-szemcold-test.ali251.langye.net
+#VUE_APP_OUT_GOODS = http://hjjc-szemc_goods-test.ali251.langye.net
diff --git a/src/api/contract/contractDetail.js b/src/api/contract/contractDetail.js
new file mode 100644
index 0000000..af484f7
--- /dev/null
+++ b/src/api/contract/contractDetail.js
@@ -0,0 +1,43 @@
+import request from "@/utils/request";
+
+export function getcontractdetail(params,noloading = false){
+  return request({
+    method:'get',
+    url:'/api/admin/contract-detail/index',
+    params,
+    noloading
+  })
+}
+export function detailcontractdetail(params,noloading=false){
+  return request({
+    method:'get',
+    url:'/api/admin/contract-detail/show',
+    params,
+    noloading
+  })
+}
+
+export function delcontractdetail(params){
+  return request({
+    method:'get',
+    url:'/api/admin/contract-detail/destroy',
+    params
+  })
+}
+
+export function editorcontractdetail(data){
+  return request({
+    method:'post',
+    url:'/api/admin/contract-detail/save',
+    data
+  })
+}
+
+export function checkcontractdetailName(params){
+  return request({
+    method:'get',
+    url:'/api/admin/contract-detail/check-name',
+    params,
+    noloading: true
+  })
+}
diff --git a/src/api/dashboard/notice.js b/src/api/dashboard/notice.js
index 5d56ec4..babfe43 100644
--- a/src/api/dashboard/notice.js
+++ b/src/api/dashboard/notice.js
@@ -51,3 +51,11 @@ export function typeCarry (params) {
     params
   })
 }
+
+export function contractDetailDepartment(params) {
+  return request({
+    method: 'get',
+    url: '/api/admin/notice/contract-detail-department',
+    params
+  })
+}
diff --git a/src/api/departmentPlanMoney/index.js b/src/api/departmentPlanMoney/index.js
new file mode 100644
index 0000000..87c95b1
--- /dev/null
+++ b/src/api/departmentPlanMoney/index.js
@@ -0,0 +1,35 @@
+import request from "@/utils/request";
+
+export function getdepartmentplanmoney(params,noloading = false){
+  return request({
+    method:'get',
+    url:'/api/admin/department-plan-money/index',
+    params,
+    noloading
+  })
+}
+export function detaildepartmentplanmoney(params,noloading=false){
+  return request({
+    method:'get',
+    url:'/api/admin/department-plan-money/show',
+    params,
+    noloading
+  })
+}
+
+export function deldepartmentplanmoney(params){
+  return request({
+    method:'get',
+    url:'/api/admin/department-plan-money/destroy',
+    params
+  })
+}
+
+export function editordepartmentplanmoney(data){
+  return request({
+    method:'post',
+    url:'/api/admin/department-plan-money/save',
+    data
+  })
+}
+
diff --git a/src/views/contractDetails/index.vue b/src/views/contractDetails/index.vue
new file mode 100644
index 0000000..d83d6cc
--- /dev/null
+++ b/src/views/contractDetails/index.vue
@@ -0,0 +1,765 @@
+<template>
+  <div class="contract-detail-page">
+    <el-card class="filter-card">
+      <el-form :model="searchForm" inline label-width="90px" size="small">
+        <el-form-item label="合同名称">
+          <el-input
+            v-model="searchForm.name"
+            placeholder="请输入合同名称"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="合同类型">
+          <el-select
+            v-model="searchForm.contract_type"
+            placeholder="全部"
+            clearable
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in contractTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="执行状态">
+          <el-select
+            v-model="searchForm.status"
+            placeholder="全部"
+            clearable
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select
+            v-model="searchForm.type"
+            placeholder="全部"
+            clearable
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <div class="filter-actions">
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </div>
+      </el-form>
+    </el-card>
+
+    <el-card class="table-card">
+      <div slot="header" class="table-card__header">
+        <div class="table-card__title">合同台账详情</div>
+        <el-button type="primary" size="small" icon="el-icon-plus" @click="openDialog('add')">
+          新增明细
+        </el-button>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="number" label="合同编号" width="160" show-overflow-tooltip />
+        <el-table-column prop="name" label="合同名称" min-width="200" show-overflow-tooltip />
+        <el-table-column label="合同类型" width="120">
+          <template slot-scope="{ row }">
+            {{ formatContractType(row.contract_type) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="100">
+          <template slot-scope="{ row }">
+            {{ formatType(row.type) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="supply" label="供应商" min-width="160" show-overflow-tooltip />
+        <el-table-column label="合同金额(元)" width="150" align="right">
+          <template slot-scope="{ row }">
+            {{ row.money ? moneyFormatter(row.money) : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="date" label="签订日期" width="120" />
+        <el-table-column label="执行部门" min-width="140" show-overflow-tooltip>
+          <template slot-scope="{ row }">
+            {{ formatDepartment(row.carry_department) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="110">
+          <template slot-scope="{ row }">
+            <el-tag :type="row.status === 2 ? 'success' : 'warning'">
+              {{ formatStatus(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" fixed="right" align="center">
+          <template slot-scope="{ row }">
+            <el-button type="text" size="mini" @click="openDialog('view', row)">查看</el-button>
+            <el-button type="text" size="mini" @click="openDialog('edit', row)">编辑</el-button>
+            <el-popconfirm title="确认删除该明细？" @confirm="handleDelete(row)">
+              <el-button slot="reference" type="text" size="mini">删除</el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page.sync="pagination.page"
+          :page-size.sync="pagination.page_size"
+          :page-sizes="[10, 20, 30, 50]"
+          :total="pagination.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="820px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="detailFormRef"
+        :model="detailForm"
+        :rules="formRules"
+        :disabled="dialogMode === 'view'"
+        label-width="130px"
+        size="small"
+        class="detail-form"
+      >
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="支出" prop="contract_id">
+              <el-select
+                v-model="detailForm.contract_id"
+                placeholder="输入关键词搜索合同"
+                filterable
+                remote
+                clearable
+                reserve-keyword
+                :remote-method="searchContractOptions"
+                :loading="contractOptionsLoading"
+                @change="handleContractSelect"
+              >
+                <el-option
+                  v-for="item in contractOptions"
+                  :key="item.id"
+                  :label="formatContractOption(item)"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="合同编号" prop="number">
+              <el-input v-model="detailForm.number" placeholder="请输入合同编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="合同名称" prop="name">
+              <el-input v-model="detailForm.name" placeholder="请输入合同名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="合同类型" prop="contract_type">
+              <el-select v-model="detailForm.contract_type" placeholder="请选择合同类型">
+                <el-option
+                  v-for="item in contractTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="类型" prop="type">
+              <el-select v-model="detailForm.type" placeholder="请选择类型">
+                <el-option
+                  v-for="item in typeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="合同金额(元)" prop="money">
+              <el-input-number
+                v-model="detailForm.money"
+                :min="0"
+                :step="1000"
+                :precision="2"
+                controls-position="right"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="供应商" prop="supply">
+              <el-input v-model="detailForm.supply" placeholder="请输入供应商" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="执行部门" prop="carry_department">
+              <el-select
+                v-model="detailForm.carry_department"
+                placeholder="请选择执行部门"
+                filterable
+              >
+                <el-option
+                  v-for="item in departments"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资金渠道" prop="money_way_id">
+              <el-select v-model="detailForm.money_way_id" placeholder="请选择资金渠道">
+                <el-option
+                  v-for="item in moneyWay"
+                  :key="item.id"
+                  :label="item.value"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="采购形式" prop="purchase_type_id">
+              <el-select v-model="detailForm.purchase_type_id" placeholder="请选择采购形式">
+                <el-option
+                  v-for="item in purchaseType"
+                  :key="item.id"
+                  :label="item.value"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="采购方式" prop="purchase_way_id">
+              <el-select v-model="detailForm.purchase_way_id" placeholder="请选择采购方式">
+                <el-option
+                  v-for="item in purchaseWay"
+                  :key="item.id"
+                  :label="item.value"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="是否预算" prop="is_plan">
+              <el-radio-group v-model="detailForm.is_plan">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-select v-model="detailForm.status" placeholder="请选择状态">
+                <el-option
+                  v-for="item in statusOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="签订日期" prop="date">
+              <el-date-picker
+                v-model="detailForm.date"
+                type="date"
+                placeholder="请选择签订日期"
+                value-format="yyyy-MM-dd"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="起止日期">
+              <el-date-picker
+                v-model="termRange"
+                type="daterange"
+                value-format="yyyy-MM-dd"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="附件">
+          <el-upload
+            class="upload-block"
+            :action="uploadAction"
+            :file-list="fileList"
+            :on-success="handleUploadSuccess"
+            :on-remove="handleUploadRemove"
+            :before-upload="beforeUpload"
+            :disabled="dialogMode === 'view'"
+          >
+            <el-button
+              v-if="dialogMode !== 'view'"
+              type="primary"
+              size="mini"
+            >
+              上传附件
+            </el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            v-model="detailForm.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注"
+          />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button
+          v-if="dialogMode !== 'view'"
+          type="primary"
+          :loading="submitLoading"
+          @click="submitForm"
+        >
+          保 存
+        </el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getcontractdetail,
+  detailcontractdetail,
+  delcontractdetail,
+  editorcontractdetail
+} from '@/api/contract/contractDetail'
+import { getContract } from '@/api/contract/contract'
+import { getparameter } from '@/api/system/dictionary'
+import { listdeptNoAuth } from '@/api/system/department'
+import { moneyFormatter } from '@/utils/index'
+
+export default {
+  name: 'ContractDetails',
+  data() {
+    return {
+      loading: false,
+      submitLoading: false,
+      tableData: [],
+      pagination: {
+        page: 1,
+        page_size: 10,
+        total: 0
+      },
+      searchForm: {
+        name: '',
+        contract_type: '',
+        status: '',
+        type: ''
+      },
+      dialogVisible: false,
+      dialogMode: 'add',
+      detailForm: {
+        id: '',
+        contract_id: '',
+        number: '',
+        name: '',
+        contract_type: '',
+        supply: '',
+        money: null,
+        start_date: '',
+        end_date: '',
+        date: '',
+        files: [],
+        remark: '',
+        supply_id: '',
+        carry_department: '',
+        money_way_id: '',
+        is_plan: 1,
+        status: 1,
+        type: '',
+        purchase_type_id: '',
+        purchase_way_id: ''
+      },
+      termRange: [],
+      fileList: [],
+      uploadAction: process.env.VUE_APP_UPLOAD_API,
+      contractTypeOptions: [
+        { label: '收入类', value: 1 },
+        { label: '支出类', value: 2 },
+        { label: '技术协议', value: 3 },
+        { label: '其他', value: 4 }
+      ],
+      typeOptions: [
+        { label: '服务', value: 1 },
+        { label: '货品', value: 2 },
+        { label: '工程', value: 3 }
+      ],
+      statusOptions: [
+        { label: '待签订', value: 1 },
+        { label: '已签订', value: 2 }
+      ],
+      departments: [],
+      moneyWay: [],
+      purchaseType: [],
+      purchaseWay: [],
+      contractOptions: [],
+      contractOptionsLoading: false,
+      formRules: {
+        contract_id: [{ required: true, message: '请输入合同ID', trigger: 'blur' }],
+        number: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
+        contract_type: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
+        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
+        money: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
+        supply: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
+        carry_department: [{ required: true, message: '请选择执行部门', trigger: 'change' }],
+        money_way_id: [{ required: true, message: '请选择资金渠道', trigger: 'change' }],
+        purchase_type_id: [{ required: true, message: '请选择采购形式', trigger: 'change' }],
+        purchase_way_id: [{ required: true, message: '请选择采购方式', trigger: 'change' }],
+        date: [{ required: true, message: '请选择签订日期', trigger: 'change' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      }
+    }
+  },
+  computed: {
+    dialogTitle() {
+      if (this.dialogMode === 'add') return '新增合同明细'
+      if (this.dialogMode === 'edit') return '编辑合同明细'
+      return '查看合同明细'
+    }
+  },
+  created() {
+    this.detailForm = this.getEmptyForm()
+    this.fetchDictionaries()
+    this.getList()
+  },
+  methods: {
+    moneyFormatter,
+    getEmptyForm() {
+      return {
+        id: '',
+        contract_id: this.$route.query.contractId || '',
+        number: '',
+        name: '',
+        contract_type: '',
+        supply: '',
+        money: null,
+        start_date: '',
+        end_date: '',
+        date: '',
+        files: [],
+        remark: '',
+        supply_id: '',
+        carry_department: '',
+        money_way_id: '',
+        is_plan: 1,
+        status: 1,
+        type: '',
+        purchase_type_id: '',
+        purchase_way_id: ''
+      }
+    },
+    async fetchDictionaries() {
+      await Promise.all([
+        this.getDepartments(),
+        this.getMoneyWay(),
+        this.getPurchaseType(),
+        this.getPurchaseWay()
+      ])
+    },
+    async getDepartments() {
+      const res = await listdeptNoAuth()
+      this.departments = res || []
+    },
+    async getMoneyWay() {
+      const res = await getparameter({ number: 'money_way' })
+      this.moneyWay = res?.detail || []
+    },
+    async getPurchaseType() {
+      const res = await getparameter({ number: 'purchase_type' })
+      this.purchaseType = res?.detail || []
+    },
+    async getPurchaseWay() {
+      const res = await getparameter({ number: 'purchase_way' })
+      this.purchaseWay = res?.detail || []
+    },
+    async getList() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+          ...this.searchForm
+        }
+        const res = await getcontractdetail(params, true)
+        const list = res?.list?.data || res?.data || []
+        this.tableData = list
+        this.pagination.total = res?.list?.total || res?.total || list.length
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.page = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        name: '',
+        contract_type: '',
+        status: '',
+        type: ''
+      }
+      this.pagination.page = 1
+      this.getList()
+    },
+    handleSizeChange(size) {
+      this.pagination.page_size = size
+      this.pagination.page = 1
+      this.getList()
+    },
+    handleCurrentChange(page) {
+      this.pagination.page = page
+      this.getList()
+    },
+    formatContractType(value) {
+      return this.contractTypeOptions.find((item) => item.value === Number(value))?.label || '-'
+    },
+    formatType(value) {
+      return this.typeOptions.find((item) => item.value === Number(value))?.label || '-'
+    },
+    formatStatus(value) {
+      return this.statusOptions.find((item) => item.value === Number(value))?.label || '-'
+    },
+    formatDepartment(id) {
+      return this.departments.find((item) => Number(item.id) === Number(id))?.name || '-'
+    },
+    openDialog(mode, row) {
+      this.dialogMode = mode
+      if (mode === 'add') {
+        this.detailForm = this.getEmptyForm()
+        this.termRange = []
+        this.fileList = []
+        this.dialogVisible = true
+        return
+      }
+      this.loadDetail(row.id)
+    },
+    async loadDetail(id) {
+      this.loading = true
+      try {
+        const res = await detailcontractdetail({ id })
+        this.detailForm = {
+          ...this.getEmptyForm(),
+          ...res
+        }
+        this.detailForm.id = res.id
+        if (res.contract_id && !this.contractOptions.find((item) => item.id === res.contract_id)) {
+          this.contractOptions = [{ id: res.contract_id, name: res.name, number: res.number, ...res }, ...this.contractOptions]
+        }
+        this.termRange = res.start_date && res.end_date ? [res.start_date, res.end_date] : []
+        this.fileList = (res.files_detail || []).map((file) => ({
+          name: file.original_name,
+          url: file.url,
+          response: file
+        }))
+        this.dialogVisible = true
+      } finally {
+        this.loading = false
+      }
+    },
+    beforeUpload(file) {
+      const maxSize = 20 * 1024 * 1024
+      if (file.size > maxSize) {
+        this.$message.warning('上传文件大小不能超过20MB')
+        return false
+      }
+      return true
+    },
+    handleUploadSuccess(response, file, fileList) {
+      this.fileList = fileList
+    },
+    handleUploadRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    async searchContractOptions(keyword) {
+      if (!keyword) {
+        this.contractOptions = []
+        return
+      }
+      this.contractOptionsLoading = true
+      try {
+        const res = await getContract(
+          {
+            keyword,
+            page: 1,
+            page_size: 999,
+            is_auth: 1
+          },
+          true
+        )
+        this.contractOptions = res?.list?.data || []
+      } finally {
+        this.contractOptionsLoading = false
+      }
+    },
+    handleContractSelect(contractId) {
+      if (!contractId) {
+        return
+      }
+      const selected = this.contractOptions.find((item) => item.id === contractId)
+      if (selected) {
+        this.syncContractFields(selected)
+      }
+    },
+    syncContractFields(contract) {
+      const fields = [
+        'number',
+        'name',
+        'contract_type',
+        'supply',
+        'money',
+        'start_date',
+        'end_date',
+        'date',
+        'remark',
+        'supply_id',
+        'carry_department',
+        'money_way_id',
+        'is_plan',
+        'status',
+        'type',
+        'purchase_type_id',
+        'purchase_way_id'
+      ]
+      fields.forEach((field) => {
+        if (contract[field] !== undefined && contract[field] !== null) {
+          this.$set(this.detailForm, field, contract[field])
+        }
+      })
+    },
+    formatContractOption(contract) {
+      const number = contract.number || ''
+      const name = contract.name || ''
+      return number ? `${number} - ${name}` : name
+    },
+    submitForm() {
+      this.$refs.detailFormRef.validate(async(valid) => {
+        if (!valid) return
+        this.submitLoading = true
+        const payload = {
+          ...this.detailForm
+        }
+        payload.start_date = this.termRange?.[0] || ''
+        payload.end_date = this.termRange?.[1] || ''
+        payload.files = this.fileList.map((item) => item.response?.id).filter(Boolean)
+        try {
+          if (this.dialogMode === 'add') {
+            delete payload.id
+          }
+          await editorcontractdetail(payload)
+          this.$message.success(this.dialogMode === 'add' ? '新增成功' : '编辑成功')
+          this.dialogVisible = false
+          this.getList()
+        } finally {
+          this.submitLoading = false
+        }
+      })
+    },
+    async handleDelete(row) {
+      await delcontractdetail({ id: row.id })
+      this.$message.success('删除成功')
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-detail-page {
+  padding: 20px;
+  .filter-card {
+    margin-bottom: 16px;
+    .filter-actions {
+      display: inline-flex;
+      gap: 8px;
+      margin-left: 16px;
+      vertical-align: middle;
+    }
+  }
+  .table-card__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .table-card__title {
+    font-weight: 600;
+  }
+  .pagination {
+    margin-top: 16px;
+    text-align: right;
+  }
+  .detail-form {
+    .el-input,
+    .el-select,
+    .el-date-editor,
+    .el-input-number {
+      width: 100%;
+    }
+  }
+  .upload-block {
+    width: 100%;
+  }
+}
+</style>
+
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index e1b56a1..ad22c29 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,1163 +1,1580 @@
 <template>
   <div class="app-container">
-    <div
-      style="display: flex; justify-content: space-between; align-items: center"
-    >
-      <span>当前登录人：{{ user.name }} </span>
+    <!-- 顶部用户信息 -->
+    <el-row :gutter="20">
+      <!-- 左侧待办事项 -->
+      <el-col :span="12">
+        <el-card class="box-card top-card">
+          <div slot="header" class="card-header">
+            <div class="header-left">
+              <i
+                class="el-icon-bell"
+                style="color: #409eff; margin-right: 5px"
+              ></i>
+              <span>待办事项</span>
+          </div>
+            <div class="header-right">
+              <i class="el-icon-more"></i>
+            </div>
+          </div>
 
-    </div>
+          <div class="todo-content">
+            <!-- 表格头部 -->
+            <div class="todo-header">
+              <div class="header-col" style="width: 80px">类型</div>
+              <div class="header-col" style="flex: 1">内容</div>
+              <div class="header-col" style="width: 120px">下发时间</div>
+              <div class="header-col" style="width: 60px">状态</div>
+              <div class="header-col" style="width: 60px">操作</div>
+            </div>
 
-    <el-row :gutter="20">
-      <el-col :span="allowAuth ? 16 : 24">
-        <el-card v-if="allowAuth" class="box-card" style="margin: 20px 0">
-          <div slot="header" class="clearfix">
-            <span>预算总体执行情况</span>
-            <DatePicker
-              :value="select.year"
-              placeholder="选择所属年份"
-              placement="bottom"
-              style="width: 130px; float: right"
+            <!-- 表格内容 -->
+            <div class="todo-body">
+              <div v-for="item in todoList" :key="item.id" class="todo-row">
+                <div class="todo-col" style="width: 80px">
+                  <el-tag size="mini" type="info">{{
+                    typeFormatter(null, null, item.type)
+                  }}</el-tag>
+                </div>
+                <div class="todo-col" style="flex: 1" :title="item.content">
+                  {{ item.content }}
+                </div>
+                <div class="todo-col" style="width: 120px">
+                  {{ timeFormatter(null, null, item.created_at) }}
+                </div>
+                <div class="todo-col" style="width: 60px">
+                  <el-tag v-if="item.read_count" type="success" size="mini"
+                    >已读</el-tag
+                  >
+                  <el-button
+                    v-else
+                    type="danger"
+                    size="mini"
+                    @click="readIt(item)"
+                    >未读</el-button
+                  >
+                </div>
+                <div class="todo-col" style="width: 60px">
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    @click="handleTodoClick(item)"
+                    >查看</el-button
+                  >
+            </div>
+          </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 右侧预算执行情况 -->
+      <el-col :span="12">
+        <el-card class="box-card top-card">
+          <div slot="header" class="card-header">
+            <div class="header-left">
+              <i
+                class="el-icon-data-analysis"
+                style="color: #409eff; margin-right: 5px"
+              ></i>
+              <span>预算总体执行情况</span>
+            </div>
+            <div class="header-right">
+              <el-date-picker
+                v-model="currentYear"
               type="year"
-              @on-change="changeYear"
-            ></DatePicker>
+                placeholder="2025年"
+                format="yyyy年"
+                value-format="yyyy"
+                size="mini"
+                style="width: 100px"
+                @change="changeYear"
+            />
           </div>
-          <router-link :to="`/statisticalReport/budgetProgress`">
-            <div class="progress-card">
-              <div class="progress-card-item">
-                <div class="progress-card-item__num">
-                  {{
-                    moneyFormat(
-                      statistic.progress ? statistic.progress.money_total_1 : 0
-                    )
-                  }}
                 </div>
-                <div class="progress-card-item__label">年初预算合计金额</div>
+
+          <div class="budget-overview">
+            <div class="budget-stats-horizontal">
+              <div class="budget-item">
+                <div class="budget-item-content">
+                  <div class="budget-icon blue">
+                    <i class="el-icon-coin"></i>
               </div>
-              <div class="progress-card-item">
-                <div class="progress-card-item__num">
-                  {{
-                    moneyFormat(
-                      statistic.progress ? statistic.progress.money_total_2 : 0
-                    )
-                  }}
+                  <div class="budget-content">
+                    <div class="budget-number">
+                      {{
+                        formatMoney(
+                          statistic.progress
+                            ? statistic.progress.money_total_1
+                            : 0
+                        )
+                      }}
                 </div>
-                <div class="progress-card-item__label">调整后预算合计金额</div>
+                    <div class="budget-label">年初预算合计金额</div>
               </div>
-              <div class="progress-card-item">
-                <div class="progress-card-item__num">
-                  {{
-                    moneyFormat(
-                      statistic.progress
-                        ? statistic.progress.use_money_total
-                        : 0
-                    )
-                  }}
                 </div>
-                <div class="progress-card-item__label">已支付金额</div>
               </div>
-              <div class="progress-card-item">
-                <div class="progress-card-item__num">
-                  {{
-                    toper(
-                      statistic.progress ? statistic.progress.money_total_1 : 0,
-                      statistic.progress ? statistic.progress.money_total_2 : 0,
-                      statistic.progress
-                        ? statistic.progress.use_money_total
-                        : 0
-                    )
-                  }}%
+
+              <div class="budget-item">
+                <div class="budget-item-content">
+                  <div class="budget-icon green">
+                    <i class="el-icon-wallet"></i>
+              </div>
+                  <div class="budget-content">
+                    <div class="budget-number">
+                      {{
+                        formatMoney(
+                          statistic.progress
+                            ? statistic.progress.money_total_2
+                            : 0
+                        )
+                      }}
+            </div>
+                    <div class="budget-label">调整后预算合计金额</div>
+            </div>
+            </div>
+          </div>
+
+              <div class="budget-item">
+                <div class="budget-item-content">
+                  <div class="budget-icon orange">
+                    <i class="el-icon-money"></i>
+              </div>
+                  <div class="budget-content">
+                    <div class="budget-number">
+                      {{
+                        formatMoney(
+                          statistic.progress
+                            ? statistic.progress.use_money_total
+                            : 0
+                        )
+                      }}
+                    </div>
+                    <div class="budget-label">已支付金额</div>
+                  </div>
+                    </div>
+                  </div>
+
+              <div class="budget-item execution-item">
+                <div class="execution-rate-horizontal">
+                  <div class="rate-circle-container">
+                    <el-progress
+                      type="circle"
+                      :percentage="
+                        Number(
+                          toper(
+                            statistic.progress
+                              ? statistic.progress.money_total_1
+                              : 0,
+                            statistic.progress
+                              ? statistic.progress.money_total_2
+                              : 0,
+                            statistic.progress
+                              ? statistic.progress.use_money_total
+                              : 0
+                          )
+                        )
+                      "
+                      :width="100"
+                      :stroke-width="8"
+                      color="#409EFF"
+                    >
+                      <div class="rate-content">
+                        <div class="rate-number">
+                          {{
+                            toper(
+                              statistic.progress
+                                ? statistic.progress.money_total_1
+                                : 0,
+                              statistic.progress
+                                ? statistic.progress.money_total_2
+                                : 0,
+                              statistic.progress
+                                ? statistic.progress.use_money_total
+                                : 0
+                            )
+                          }}%
+                    </div>
+                  </div>
+                    </el-progress>
+                  </div>
+                  <div class="budget-label">执行率</div>
                 </div>
-                <div class="progress-card-item__label">执行率</div>
               </div>
             </div>
-          </router-link>
+          </div>
         </el-card>
+        </el-col>
+      </el-row>
+
+    <!-- 合同签订统计表 -->
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="24">
+            <el-card class="box-card">
+          <div slot="header" class="card-header">
+            <div class="header-left">
+              <i
+                class="el-icon-document"
+                style="color: #e6a23c; margin-right: 5px"
+              ></i>
+              <span>合同签订统计表</span>
+              </div>
+                    </div>
 
-        <div ref="lxHeader">
-          <LxHeader
-            icon="iconfont/icon--kucunguanli"
-            text="待办事项"
-            :custom="true"
-            style="margin-bottom: 10px; border: 0px; margin-top: 15px"
-          >
-            <div slot="content" />
-            <slot>
-              <div></div>
-            </slot>
-          </LxHeader>
-        </div>
-        <div class="table-tree">
           <el-table
-            :data="list"
+            :data="contractStats"
             border
-            class="v-table"
-            style="width: 100%; margin-bottom: 20px"
+            style="width: 100%"
+            show-summary
+            :summary-method="getSummaries"
+            :max-height="300"
+            :header-cell-style="{
+              background: '#fafafa',
+              color: '#606266',
+              fontWeight: '600',
+            }"
           >
-            <el-table-column type="index" label="序号" align="center" />
             <el-table-column
-              prop="type"
-              width="100"
-              label="类型"
+              label="序号"
+              type="index"
+              width="60"
               align="center"
-              :formatter="typeFormatter"
             />
-            <el-table-column prop="content" label="内容" align="left" />
             <el-table-column
-              prop="created_at"
-              width="200"
-              label="下发时间"
+              prop="department"
+              label="科室"
+              width="120"
               align="center"
-              :formatter="timeFormatter"
             />
+            <el-table-column label="政府采购" align="center">
+              <el-table-column prop="gov_goods" label="货物" align="center" />
+              <el-table-column prop="gov_service" label="服务" align="center" />
+              <el-table-column prop="gov_project" label="工程" align="center" />
+            </el-table-column>
+            <el-table-column label="小型项目" align="center">
+              <el-table-column prop="small_goods" label="货物" align="center" />
+              <el-table-column
+                prop="small_service"
+                label="服务"
+                align="center"
+              />
+              <el-table-column
+                prop="small_project"
+                label="工程"
+                align="center"
+              />
+            </el-table-column>
             <el-table-column
-              width="100"
-              label="状态"
+              prop="month_total"
+              label="本月累计签订合同数"
+              width="160"
               align="center"
-              prop="read_count"
-            >
-              <template slot-scope="{ row, $index }">
-                <el-link v-if="row.read_count" type="success" :underline="false"
-                  >已读</el-link
-                >
-                <Button
-                  v-else
-                  type="error"
-                  size="small"
-                  style="margin-left: 10px"
-                  ghost
-                  @click="readIt(row, $index)"
-                  >未读</Button
-                >
-              </template>
-            </el-table-column>
+            />
             <el-table-column
-              width="90"
-              header-align="center"
-              label="操作"
+              prop="year_total"
+              label="本年累计签订合同数"
+              width="160"
               align="center"
-            >
-              <template slot-scope="{ row, $index }">
-                <Button
-                  type="primary"
-                  size="small"
-                  style="margin-left: 10px"
-                  ghost
-                  @click="toContract(row)"
-                  >查看</Button
-                >
-              </template>
-            </el-table-column>
+            />
           </el-table>
-
-          <div style="display: flex; justify-content: flex-end">
-            <Page :total="total" show-elevator @on-change="pageChange" />
-          </div>
-        </div>
-      </el-col>
-      <el-col v-if="allowAuth" :span="authShowStatic ? 7 : 8">
-        <el-card class="box-card" style="margin: 20px 0">
-          <div class="text item">
-            <pie-chart :chartData="rptChartData"></pie-chart>
-          </div>
         </el-card>
       </el-col>
+    </el-row>
 
-      <el-col :span="1" v-if="authShowStatic">
-        <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-row :gutter="20" style="margin-top: 20px">
+      <!-- 科室执行情况 -->
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="card-header">
+            <div class="header-left">
+              <i
+                class="el-icon-data-analysis"
+                style="color: #409eff; margin-right: 5px"
+              ></i>
+              <span>科室执行情况</span>
+                  </div>
+            <div class="header-right">
+              <i class="el-icon-more"></i>
+                </div>
+              </div>
+          
+          <el-table 
+            :data="statistic.departmentList" 
+            border 
+            style="width: 100%;"
+            :height="680"
+            :header-cell-style="{
+              background: '#fafafa',
+              color: '#606266',
+              fontWeight: '600',
+            }"
+          >
+            <el-table-column prop="plan_department.name" label="科室" width="180" align="left" fixed="left" />
+            <el-table-column label="执行情况" width="220" align="left">
+              <template slot-scope="{ row }">
+                <el-progress :percentage="calculateExecutionRate(row)" />
+                    </template>
+                  </el-table-column>
+            <el-table-column prop="money_total_1" label="年初预算合计金额(元)" width="200" align="right" :formatter="moneyFormatter" />
+            <el-table-column prop="money_total_2" label="调整后预算合计金额(元)" width="220" align="right" :formatter="moneyFormatter" />
+            <el-table-column prop="middle_fund_total" label="年中专项资金(元)" width="180" align="right" :formatter="moneyFormatter" />
+            <el-table-column prop="use_money_total" label="已使用(元)" width="120" align="right" :formatter="moneyFormatter" />
+            <el-table-column label="操作" width="80" align="center" fixed="right">
+              <template slot-scope="{ row }">
+                <el-button type="text" size="mini" @click="viewDepartmentDetail(row)">查看</el-button>
+                </template>
+            </el-table-column>
+          </el-table>
+            </el-card>
+          </el-col>
+
+      <!-- 预算类型执行情况 -->
+      <el-col :span="12">
+            <el-card class="box-card">
+          <div slot="header" class="card-header">
+            <div class="header-left">
+              <i
+                class="el-icon-data-analysis"
+                style="color: #67c23a; margin-right: 5px"
+              ></i>
+              <span>预算类型执行情况</span>
+              </div>
+            <div class="header-right">
+              <i class="el-icon-more"></i>
+                    </div>
+                  </div>
+
+          <el-table 
+            :data="statistic.typeList" 
+            border 
+            style="width: 100%;"
+            :height="680"
+            :header-cell-style="{
+              background: '#fafafa',
+              color: '#606266',
+              fontWeight: '600',
+            }"
+          >
+            <el-table-column prop="type_text" label="预算类别" width="100" align="left" fixed="left" />
+            <el-table-column label="执行情况" width="220" align="left" >
+              <template slot-scope="{ row }">
+                <el-progress :percentage="calculateTypeExecutionRate(row)" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="money_total_1" label="年初预算合计金额(元)" width="200" align="right" :formatter="moneyFormatter" />
+            <el-table-column prop="money_total_2" label="调整后预算合计金额(元)" width="220" align="right" :formatter="moneyFormatter" />
+            <el-table-column prop="use_money_total" label="已使用(元)" width="140" align="right" :formatter="moneyFormatter" />
+            <el-table-column label="操作" width="80" align="center" fixed="right">
+              <template slot-scope="{ row }">
+                <el-button type="text" size="mini" @click="viewTypeDetail(row)">查看</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
       </el-col>
     </el-row>
 
-    <div class="demo-split" v-if="allowAuth">
-      <Split v-model="split" style="height: 570px">
-        <template #left>
-          <div class="demo-split-pane" style="padding-right: 5px">
-            <div ref="lxHeader" v-if="statistic.departmentList">
-              <LxHeader
-                icon="iconfont/icon--kucunguanli"
-                text="科室执行情况"
-                :custom="true"
-                style="margin-bottom: 10px; border: 0px; margin-top: 15px"
-              >
-                <div slot="content" />
-                <slot>
-                  <div style="width: 100%">
-                    <xy-table
-                      :height="488"
-                      :list="statistic.departmentList"
-                      :table-item="departmentTable"
-                    >
-                      <template v-slot:btns>
-                        <el-table-column
-                          :width="80"
-                          fixed="right"
-                          label="操作"
-                          header-align="center"
-                          align="center"
-                        >
-                          <template slot-scope="scope">
-                            <router-link
-                              :to="`/contract/statisticalReport/budgetProgress?departmentId=${scope.row.plan_department_id}`"
-                              >查看
-                            </router-link>
-                          </template>
-                        </el-table-column>
-                      </template>
-                    </xy-table>
-                  </div>
-                </slot>
-              </LxHeader>
-            </div>
+    <!-- 各科室预算计划完成对比图 -->
+    <el-row style="margin-top: 20px">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="card-header">
+            <div class="header-left">
+              <i
+                class="el-icon-data-analysis"
+                style="color: #409eff; margin-right: 5px"
+              ></i>
+              <span>各科室预算计划完成对比图</span>
           </div>
-        </template>
-        <template #right>
-          <div class="demo-split-pane" style="padding-left: 10px">
-            <div ref="lxHeader" v-if="statistic.typeList">
-              <LxHeader
-                icon="iconfont/icon--kucunguanli"
-                text="预算类型执行情况"
-                :custom="true"
-                style="margin-bottom: 10px; border: 0px; margin-top: 15px"
-              >
-                <div slot="content" />
-                <slot>
-                  <div style="width: 100%">
-                    <xy-table
-                      :height="488"
-                      :list="statistic.typeList"
-                      :table-item="typeTable"
-                    >
-                      <template v-slot:btns>
-                        <el-table-column
-                          :width="80"
-                          fixed="right"
-                          label="操作"
-                          header-align="center"
-                          align="center"
-                        >
-                          <template slot-scope="scope">
-                            <router-link
-                              :to="`/contract/statisticalReport/budgetProgress?typeId=${scope.row.type}`"
-                              >查看
-                            </router-link>
-                          </template>
-                        </el-table-column>
-                      </template>
-                    </xy-table>
-                  </div>
-                </slot>
-              </LxHeader>
+            <div class="header-right">
+              <el-date-picker 
+                v-model="carrySelect.month"
+                format="yyyy-MM"
+                :clearable="false"
+                style="width: 140px;"
+                placeholder="月份"
+                type="month"
+                size="small"
+                @change="handleMonthChange"
+              />
             </div>
           </div>
-        </template>
-      </Split>
-    </div>
-
-    <Card v-if="allowAuth">
-      <template #title>
-        <div style="display: flex;justify-content: space-between;align-items: center;">
-          <p>各科室预算计划完成对比图</p>
-          <el-date-picker v-model="carrySelect.month"
-                          format="yyyy-MM"
-                          :clearable="false"
-                          style="width: 140px;"
-                          placeholder="月份"
-                          type="month"
-                          size="small"
-                          @change="e => {
-                            carrySelect.month = $moment(e).format('YYYY-MM');
-                            getCarry();
-                          }"></el-date-picker>
-        </div>
-      </template>
-      <lineChart height="500px" :chart-data="lineChartData"></lineChart>
-    </Card>
-
-    <detailContract ref="detailContract"></detailContract>
 
-    <budgetStatic ref="budgetStatic"></budgetStatic>
+          <lineChart height="500px" :chart-data="lineChartData"></lineChart>
+        </el-card>
+      </el-col>
+    </el-row>
 
-    <carryStatic ref="carryStatic" :departments="statistic.departmentList" :year="select.year"></carryStatic>
+    <!-- 合同详情弹窗 -->
+    <detailContract ref="detailContract"></detailContract>
   </div>
 </template>
 
 <script>
-import echarts from 'echarts'
-import detailContract from "@/views/contract/components/detailContract";
-import LxHeader from "@/components/LxHeader/index.vue";
-import Pagination from "@/components/Pagination";
-import PieChart from "./components/PieChart.vue";
-import { adminDepartmentList } from '@/api/system/department';
-import { adminUserList, getInfo } from '@/api/user';
-import { getNotice, readNotice, statistic, carry } from "@/api/dashboard/notice";
-import { parseTime, moneyFormatter } from '@/utils';
+import { parseTime, moneyFormatter } from "@/utils/index";
 import { Message } from "element-ui";
-import budgetStatic from '@/views/dashboard/components/budgetStatic.vue'
-import lineChart from '@/views/dashboard/components/LineChart.vue'
-import carryStatic from '@/views/dashboard/components/carryStatic.vue'
+import * as echarts from "echarts";
+import { getNotice, readNotice, statistic, carry,contractDetailDepartment } from "@/api/dashboard/notice";
+import detailContract from "@/views/contract/components/detailContract";
+import lineChart from '@/views/dashboard/components/LineChart.vue';
+
 export default {
-  name: "Manage",
+  name: "Dashboard",
   components: {
-    LxHeader,
-    Pagination,
     detailContract,
-    PieChart,
-    budgetStatic,
-    lineChart,
-    carryStatic
+    lineChart
   },
   data() {
     return {
-      value2: 12,
-      split: 0.5,
-      rptChartData: [],
-      select: {
-        year: "",
-      },
-      carrySelect: {
-        month: this.$moment().format('YYYY-MM')
+      user: {
+        name: "张工程",
       },
-      lineChartData: {},
+      searchKeyword: "",
+      currentYear: "2025",
+
+      // 待办事项
+      todoList: [],
+      todoTotal: 0,
+      todoPageIndex: 1,
+
+      // 预算统计数据
       statistic: {
-        departmentList: []
-      },
-      department_id: [],
-      userIds: [],
-      list: [],
-      total: 0,
-      pageIndex: 1,
-      // listQuery: {
-      //   page: 1,
-      //   page_size: 10,
-      //   show_self: 1,
-      // },
-      form: {
-        id: undefined,
+        progress: {},
       },
-      dialogFormVisible: false,
-      departmentTree: [],
-      userList: [],
-      formLabelWidth: "200px",
-      user: {},
-
-      departmentProgress: [],
-      departmentTable: [
+
+      // 合同统计
+      contractStats: [
         {
-          label: "科室",
-          minWidth: 180,
-          prop: "plan_department.name",
-          sortable: false,
-          align: "left",
-          fixed: "left",
+          department: "行政科室",
+          gov_goods: 1,
+          gov_service: 1,
+          gov_project: 1,
+          small_goods: 1,
+          small_service: 1,
+          small_project: 1,
+          month_total: 1,
+          year_total: 1,
         },
         {
-          label: "执行情况",
-          sortable: false,
-          minWidth: 220,
-          align: "left",
-          fixed: "right",
-          customFn: (row) => {
-            let m2 = row?.money_total_2;
-            let m1 = row?.money_total_1;
-            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);
-            }
-            return (
-              <div>
-                <el-progress percentage={Number(per)}> </el-progress>{" "}
-              </div>
-            );
-          },
+          department: "质量保证科室",
+          gov_goods: 5,
+          gov_service: 5,
+          gov_project: 5,
+          small_goods: 5,
+          small_service: 5,
+          small_project: 5,
+          month_total: 5,
+          year_total: 5,
         },
         {
-          label: "年初预算合计金额(元)",
-          width: 260,
-          align: "right",
-          sortable: false,
-          prop: "money_total_1",
-          formatter: (cell, data, value) => {
-            return moneyFormatter(value);
-          },
+          department: "水环境监测科",
+          gov_goods: 1,
+          gov_service: 1,
+          gov_project: 1,
+          small_goods: 1,
+          small_service: 1,
+          small_project: 1,
+          month_total: 1,
+          year_total: 1,
         },
         {
-          label: "调整后预算合计金额(元)",
-          width: 260,
-          align: "right",
-          sortable: false,
-          prop: "money_total_2",
-          formatter: (cell, data, value) => {
-            return moneyFormatter(value);
-          },
+          department: "大气环境监测科",
+          gov_goods: 3,
+          gov_service: 3,
+          gov_project: 3,
+          small_goods: 3,
+          small_service: 3,
+          small_project: 3,
+          month_total: 3,
+          year_total: 3,
         },
+      ],
+
+      // 项目支出
+
+
+      // 科研项目
+      researchProject: {
+        totalBudget: 21467192.36,
+        adjustedBudget: 21467192.36,
+        usedBudget: 3021926.71,
+        executionRate: 14,
+      },
+      researchProjectDetails: [
         {
-          label: "年中专项资金(元)",
-          width: 260,
-          align: "right",
-          sortable: false,
-          prop: "middle_fund_total",
-          formatter: (cell, data, value) => {
-            return moneyFormatter(value);
-          },
+          department: "办公室（党办）",
+          budgetAmount: 50681411.0,
+          adjustedAmount: 50681411.0,
+          usedAmount: 50681411.0,
+          progress: 30,
         },
         {
-          label: "已使用(元)",
-          width: 120,
-          align: "right",
-          sortable: false,
-          prop: "use_money_total",
-          formatter: (cell, data, value) => {
-            return moneyFormatter(value);
-          },
+          department: "行政科室",
+          budgetAmount: 1476800.0,
+          adjustedAmount: 1476800.0,
+          usedAmount: 1476800.0,
+          progress: 30,
         },
-      ],
-      typeTable: [
         {
-          label: "预算类别",
-          width: 100,
-          prop: "type_text",
-          sortable: false,
-          fixed: "left",
+          department: "行政科室",
+          budgetAmount: 393541.69,
+          adjustedAmount: 393541.69,
+          usedAmount: 393541.69,
+          progress: 30,
         },
         {
-          label: "执行情况",
-          sortable: false,
-          minWidth: 220,
-          align: "left",
-          fixed: "right",
-          customFn: (row) => {
-            let m2 = row.money_total_2;
-            let m1 = row.money_total_1;
-            let m3 = row.use_money_total;
-            let per = 0;
+          department: "质量保证科室",
+          budgetAmount: 1476800.0,
+          adjustedAmount: 1476800.0,
+          usedAmount: 1476800.0,
+          progress: 30,
+        },
+      ],
 
-            if (m2 != 0) {
-              per = ((m3 / m2) * 100).toFixed(2);
-            } else if (m1 != 0) {
-              per = ((m3 / m1) * 100).toFixed(2);
-            }
-            return (
-              <div>
-                <el-progress percentage={Number(per)}> </el-progress>{" "}
-              </div>
-            );
-          },
+      // 共建实验室数据
+      labProject: {
+        totalBudget: 21467192.36,
+        adjustedBudget: 0.0,
+        usedBudget: 3021926.71,
+        executionRate: 13,
+      },
+      labProjectDetails: [
+        {
+          department: "办公室（党办）",
+          budgetAmount: 50681411.0,
+          adjustedAmount: 50681411.0,
+          usedAmount: 50681411.0,
+          progress: 30,
         },
         {
-          label: "年初预算合计金额(元)",
-          width: 260,
-          align: "right",
-          sortable: false,
-          prop: "money_total_1",
-          formatter: (cell, data, value) => {
-            return moneyFormatter(value);
-          },
+          department: "综合科室",
+          budgetAmount: 1476800.0,
+          adjustedAmount: 1476800.0,
+          usedAmount: 1476800.0,
+          progress: 30,
         },
         {
-          label: "调整后预算合计金额(元)",
-          width: 260,
-          align: "right",
-          sortable: false,
-          prop: "money_total_2",
-          formatter: (cell, data, value) => {
-            return moneyFormatter(value);
-          },
+          department: "行政科室",
+          budgetAmount: 393541.69,
+          adjustedAmount: 393541.69,
+          usedAmount: 393541.69,
+          progress: 30,
         },
         {
-          label: "已使用(元)",
-          width: 140,
-          align: "right",
-          sortable: false,
-          prop: "use_money_total",
-          formatter: (cell, data, value) => {
-            return moneyFormatter(value);
-          },
+          department: "水环境监测科室",
+          budgetAmount: 1476800.0,
+          adjustedAmount: 1476800.0,
+          usedAmount: 1476800.0,
+          progress: 30,
+        },
+        {
+          department: "水环境监测科室",
+          budgetAmount: 393541.69,
+          adjustedAmount: 393541.69,
+          usedAmount: 393541.69,
+          progress: 30,
+        },
+        {
+          department: "大气环境监测科室",
+          budgetAmount: 393541.69,
+          adjustedAmount: 393541.69,
+          usedAmount: 393541.69,
+          progress: 30,
+        },
+        {
+          department: "生态监测科室",
+          budgetAmount: 1476800.0,
+          adjustedAmount: 1476800.0,
+          usedAmount: 1476800.0,
+          progress: 30,
+        },
+        {
+          department: "现场监测科室",
+          budgetAmount: 393541.69,
+          adjustedAmount: 393541.69,
+          usedAmount: 393541.69,
+          progress: 30,
         },
       ],
+
+      // 科室执行情况图表数据
+      // 各科室预算计划完成对比图数据
+      carrySelect: {
+        month: new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0')
+      },
+      lineChartData: {},
     };
   },
+
+  computed: {},
+
   created() {
-    this.select.year = this.$moment().format("YYYY");
+    this.currentYear = new Date().getFullYear().toString();
     this.getNotices();
-
     this.getStatistic();
     this.getCarry();
+    this.getContractDetailDepartment()
+  },
 
-    getInfo()
-      .then((response) => {
-        console.log(response);
-        this.user = response;
-      })
-      .catch((error) => {});
+  mounted() {
+    // 移除原有的图表初始化
   },
+
   methods: {
-    formatResult(originalNum) {
-      // 1. 先处理浮点数精度问题（乘以100后四舍五入到整数，再除以100保留两位小数）
-      if(!originalNum){
-        return 0
+    // 格式化金额
+    formatMoney(amount) {
+      if (!amount) return "0.00";
+      return moneyFormatter(amount);
+    },
+
+    // 金额格式化器
+    moneyFormatter(row, column, cellValue) {
+      return this.formatMoney(cellValue);
+    },
+
+    // 时间格式化
+    timeFormatter(row, column, cellValue) {
+      return parseTime(new Date(cellValue), "{y}-{m}-{d}");
+    },
+
+    // 类型格式化
+    typeFormatter(row, column, cellValue) {
+      return cellValue === 1 ? "合同流程" : "付款计划";
+    },
+
+    // 搜索处理
+    handleSearch() {
+      Message.info(`搜索合同编号: ${this.searchKeyword}`);
+    },
+
+    // 年份变更
+    changeYear(year) {
+      this.currentYear = year;
+      this.getStatistic();
+    },
+
+    // 获取预算统计数据
+    async getStatistic() {
+      try {
+        const res = await statistic({
+          year: this.currentYear,
+        });
+        this.statistic = res;
+      } catch (error) {
+        console.error("获取预算统计数据失败:", error);
+        Message.error("获取预算统计数据失败");
+      }
+    },
+
+    // 执行率计算
+    toper(m1, m2, m3) {
+      if (m2 != 0) {
+        return ((m3 / m2) * 100).toFixed(2);
+      } else if (m1 != 0) {
+        return ((m3 / m1) * 100).toFixed(2);
+      } else {
+        return 0;
+      }
+    },
+
+    // 获取待办事项
+    async getNotices() {
+      try {
+        const res = await getNotice({
+          page_size: 999,
+          page: this.todoPageIndex,
+        });
+        this.todoList = res.data;
+        this.todoTotal = res.total;
+      } catch (error) {
+        console.error("获取待办事项失败:", error);
+        Message.error("获取待办事项失败");
       }
-      const multiplied =  originalNum* 100; // 0.28 * 100 = 28 → 处理后为28
+    },
+
+    // 待办事项点击处理
+    handleTodoClick(row) {
+      this.toContract(row);
+    },
+
+    // 合同详情处理
+    toContract(row) {
+      this.$refs["detailContract"].getDetail(row.contract_id);
+      this.$refs["detailContract"].isShowDetail = true;
+    },
+
+    // 标记已读
+    async readIt(row, index) {
+      try {
+        await readNotice({
+          id: row.id,
+        });
+        Message.success("已读");
+        this.getNotices(); // 重新获取数据
+      } catch (error) {
+        console.error("标记已读失败:", error);
+        Message.error("标记已读失败");
+      }
+    },
+    // 合同签订
+    async getContractDetailDepartment(row) {
+      try {
+        const res = await contractDetailDepartment();
+        console.log(res);
+      } catch (error) {
+        console.error("获取合同签订失败:", error);
+      }
+    },
+    // 表格合计
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "总计";
+          return;
+        }
+        if (index === 1) {
+          sums[index] = "";
+          return;
+        }
 
-        // 2. 判断是否为整数（乘以100后是否无小数）
-        if (multiplied % 1 === 0) {
-          // 是整数，直接显示整数（如28）
-          return multiplied;
+        const values = data.map((item) => Number(item[column.property]));
+        if (!values.every((value) => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
         } else {
-          // 不是整数，保留两位小数（如56.50）
-          return (multiplied).toFixed(2);
+          sums[index] = "";
         }
+      });
+      return sums;
+    },
+
+    // 月份变更处理
+    handleMonthChange(value) {
+      this.carrySelect.month = value.getFullYear() + '-' + String(value.getMonth() + 1).padStart(2, '0');
+      this.getCarry();
+    },
+
+    // 格式化结果
+    formatResult(originalNum) {
+      if (!originalNum) {
+        return 0;
+      }
+      const multiplied = originalNum * 100;
+      if (multiplied % 1 === 0) {
+        return multiplied;
+      } else {
+        return multiplied.toFixed(2);
+      }
+    },
+
+    // 计算执行率
+    calculateExecutionRate(row) {
+      let m2 = row?.money_total_2;
+      let m1 = row?.money_total_1;
+      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);
+            }
+      return Number(per);
+    },
+
+    // 查看科室详情
+    viewDepartmentDetail(row) {
+      this.$router.push(`/contract/statisticalReport/budgetProgress?departmentId=${row.plan_department_id}`);
+    },
+
+    // 计算预算类型执行率
+    calculateTypeExecutionRate(row) {
+      let m2 = row.money_total_2;
+      let m1 = row.money_total_1;
+      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);
+            }
+      return Number(per);
+    },
+
+    // 查看预算类型详情
+    viewTypeDetail(row) {
+      this.$router.push(`/contract/statisticalReport/budgetProgress?typeId=${row.type}`);
     },
-    async getCarry () {
-      const res = await carry(this.carrySelect);
 
-      //组织数据
-      let setData = function(data, constData, showData) {
-        data.forEach(function(item) {
+    // 获取各科室预算计划完成对比数据
+    async getCarry() {
+      try {
+        const res = await carry(this.carrySelect);
+
+        // 组织数据
+        let setData = function(data, constData, showData) {
+          data.forEach(function(item) {
             if (item && Number(item.value) !== 0) {
-                  constData.push(1);
-                  showData.push(item);
-                } else {
-                  constData.push(1);   // 让底部 diamond 始终有
-                  showData.push(null); // 顶部 diamond 不显示
-                }
+              constData.push(1);
+              showData.push(item);
+            } else {
+              constData.push(1);
+              showData.push(null);
+            }
           });
-      }
-      //组织颜色
-      let setColor = function(colorArr) {
-        let color = {
-          type: "linear",
-          x: 0,
-          x2: 1,
-          y: 0,
-          y2: 0,
-          /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
+        };
+
+        // 组织颜色
+        let setColor = function(colorArr) {
+          let color = {
+            type: "linear",
             x: 0,
-            x2: 0,
+            x2: 1,
             y: 0,
-            y2: 1, */
-          colorStops: [{
-            offset: 0,
-            color: colorArr[0],
-          },
-            {
-              offset: 0.5,
-              color: colorArr[0],
-            },
-            {
-              offset: 0.5,
-              color: colorArr[1],
-            },
-            {
-              offset: 1,
-              color: colorArr[1],
-            },
-          ],
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: colorArr[0] },
+              { offset: 0.5, color: colorArr[0] },
+              { offset: 0.5, color: colorArr[1] },
+              { offset: 1, color: colorArr[1] }
+            ]
+          };
+          return color;
         };
-        return color
-      }
 
-      // let curPlan = res?.map(i => {
-      //   const { use_money_total,paid_plan_total,money_total_2 } = i
-      //   return paid_plan_total ? (Math.round((Number(paid_plan_total||0) / Number(money_total_2 ||0)) * 10000) / 100) :
-      //   0;
-      // });
-      // let curAct = res?.map(i => {
-      //   const { use_money_total,money_total_2 } = i
-      //   return Number(money_total_2) ? (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100) :
-      //    0;
-      // });
-      // let nextPlan = res?.map(i => {
-      //   const { use_money_total_next,paid_plan_total_next,money_total_2 } = i
-      //   return paid_plan_total_next ? (Math.round((Number(paid_plan_total_next||0) / Number(money_total_2||0)) * 10000) / 100) :
-      //    0;
-      // });
-      let curPlan = res?.map(i => {
-        const { use_money_total,paid_plan_total,money_total_2,money_total_1,plan_rate } = i
-        let curPlan_total = Number(paid_plan_total||0) + Number(use_money_total||0)
-        return {
-
-          value:this.formatResult(plan_rate),
-        //   value:Number(money_total_2) ? ((( curPlan_total / Number(money_total_2 ||0)) * 10000) / 100).toFixed(2) :
-        // ((( curPlan_total / Number(money_total_1 ||0)) * 10000) / 100).toFixed(2),
-          money:parseFloat(curPlan_total).toFixed(2)
-        }
-      });
+        let curPlan = res?.map(i => {
+          const { use_money_total, paid_plan_total, plan_rate } = i;
+          let curPlan_total = Number(paid_plan_total || 0) + Number(use_money_total || 0);
+          return {
+            value: this.formatResult(plan_rate),
+            money: parseFloat(curPlan_total).toFixed(2)
+          };
+        });
 
-      let curAct = res?.map(i => {
-        const { use_money_total,money_total_2,money_total_1,act_rate } = i
-        return {
-          value:this.formatResult(act_rate),
-         //  value:Number(money_total_2) ?
-         //  (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100).toFixed(2) :
-         // (Math.round((Number(use_money_total||0) / Number(money_total_1||0)) * 10000) / 100).toFixed(2),
-         money:parseFloat(use_money_total).toFixed(2)
-        }
-      });
+        let curAct = res?.map(i => {
+          const { use_money_total, act_rate } = i;
+          return {
+            value: this.formatResult(act_rate),
+            money: parseFloat(use_money_total).toFixed(2)
+          };
+        });
 
-      let nextPlan = res?.map(i => {
+        let nextPlan = res?.map(i => {
+          const { plan_rate_next, use_money_total, paid_plan_total_next } = i;
+          let nextPlan_total = Number(paid_plan_total_next || 0) + Number(use_money_total || 0);
+          return {
+            value: this.formatResult(plan_rate_next),
+            money: parseFloat(nextPlan_total).toFixed(2)
+          };
+        });
 
-        const { plan_rate_next,use_money_total,use_money_total_next,paid_plan_total_next,money_total_2,money_total_1 } = i
-        // if(Number(paid_plan_total_next)===0){
-        //   return 0
-        // }
-        let nextPlan_total = Number(paid_plan_total_next||0) + Number(use_money_total||0)
-        return {
+        let barWidth = 23;
+        let constData1 = [];
+        let showData1 = [];
+        let constData2 = [];
+        let showData2 = [];
+        let constData3 = [];
+        let showData3 = [];
 
-          value:this.formatResult(plan_rate_next),
-         //  value:Number(money_total_2) ? (((nextPlan_total / Number(money_total_2||0)) * 10000) / 100).toFixed(2) :
-         // (((nextPlan_total / Number(money_total_1||0)) * 10000) / 100).toFixed(2),
-         money:parseFloat(nextPlan_total).toFixed(2)
-        }
-      });
+        setData(curPlan, constData1, showData1);
+        setData(curAct, constData2, showData2);
+        setData(nextPlan, constData3, showData3);
 
-      let barWidth = 23;
-      let constData1 = [];
-      let showData1 = [];
-      let constData2 = [];
-      let showData2 = [];
-      let constData3 = [];
-      let showData3 = [];
-
-      setData(curPlan, constData1, showData1)
-      setData(curAct, constData2, showData2)
-      setData(nextPlan, constData3, showData3)
-
-      let colorArr1 = ["#345A8B", "#387ABD", "#398ac4"];
-      let colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
-      let colorArr3 = ['#559372','#7ab798','#9edebc']
-      let spanColor = ["#345A8B","#51C0DB",'#559372']
-
-      let color1 = setColor(colorArr1)
-      let color2 = setColor(colorArr2)
-      let color3 = setColor(colorArr3)
-
-      this.lineChartData = {
-        rotate: 54,
-        xArr: res?.map(i => i.plan_department?.name),
-        tooltip: {
-            show:true,
-            trigger: 'axis', // 触发方式为鼠标悬浮在图形上
+        let colorArr1 = ["#345A8B", "#387ABD", "#398ac4"];
+        let colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
+        let colorArr3 = ['#559372', '#7ab798', '#9edebc'];
+        let spanColor = ["#345A8B", "#51C0DB", '#559372'];
+
+        let color1 = setColor(colorArr1);
+        let color2 = setColor(colorArr2);
+        let color3 = setColor(colorArr3);
+
+        // 计算下个月
+        const currentDate = new Date(this.carrySelect.month + '-01');
+        const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1);
+        const nextMonthStr = nextMonth.getFullYear() + '-' + String(nextMonth.getMonth() + 1).padStart(2, '0');
+
+        this.lineChartData = {
+          rotate: 54,
+          xArr: res?.map(i => i.plan_department?.name),
+          tooltip: {
+            show: true,
+            trigger: 'axis',
             formatter: function (params) {
-                // 自定义悬浮窗的内容和样式
-                 let result = `<div style=" padding: 10px;">`;
-                  // 获取当前悬浮的部门名称
-                  const departmentName = params[0].name;
-                  result += `<div style="font-weight: bold; margin-bottom: 5px;">${departmentName}</div>`;
-
-                  // 遍历所有参数，找到三个主要柱状图的数据
-                  params.forEach((param,index) => {
-                      // 只处理主要的柱状图数据（z值为1、4、7的系列）
-                    result += `<div style="margin: 3px 0;">
-                        <span style="display: inline-block; width: 10px; height: 10px; background-color: ${spanColor[index]}; margin-right: 5px;"></span>
-                        <span>${param.seriesName}: ${param.value}%-${param.data.money?param.data.money+'元':0+'元'}</span>
-                    </div>`;
-                  });
-                  result += `</div>`;
-                  return result
+              let result = `<div style=" padding: 10px;">`;
+              const departmentName = params[0].name;
+              result += `<div style="font-weight: bold; margin-bottom: 5px;">${departmentName}</div>`;
+
+              params.forEach((param, index) => {
+                result += `<div style="margin: 3px 0;">
+                  <span style="display: inline-block; width: 10px; height: 10px; background-color: ${spanColor[index]}; margin-right: 5px;"></span>
+                  <span>${param.seriesName}: ${param.value}%-${param.data.money ? param.data.money + '元' : 0 + '元'}</span>
+                </div>`;
+              });
+              result += `</div>`;
+              return result;
             }
-        },
-        series: [
-          {
-            z: 1,
-            type: 'bar',
-            barWidth: barWidth,
-            name: `${this.carrySelect.month}计划`,
-            barGap: "54%", //相邻柱子间距
-            itemStyle: {
-              borderRadius: [0, 0, 0, 0],//柱子四周圆角
-              color: color1//柱子左右颜色（深，浅）
-            },
-            data: curPlan, //Y轴上的高度
-            label: {
-              show: true,
-              position: 'top',
-              textStyle: {//数值样式
-                fontSize: 12,
-                color: '#4d8bdc',
-              },
-              formatter: params => `${params.value}%`
-            },
           },
-          {
-            z: 2,
-            name: `${this.carrySelect.month}计划`,
-            type: "pictorialBar",
-            data: constData1,//此数据对应底部组件
-            symbol: "diamond",//底部组件形状，不写默认为椭圆
-            symbolOffset: ["-154%", "50%"],//与柱子的偏移角度
-            symbolSize: [barWidth, 10],//底面[宽，高]
-            itemStyle: {
-              normal: {
-                color: color1//底面左右颜色（深，浅）
+          series: [
+            {
+              z: 1,
+              type: 'bar',
+              barWidth: barWidth,
+              name: `${this.carrySelect.month}计划`,
+              barGap: "54%",
+              itemStyle: {
+                borderRadius: [0, 0, 0, 0],
+                color: color1
               },
+              data: curPlan,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  fontSize: 12,
+                  color: '#4d8bdc',
+                },
+                formatter: params => `${params.value}%`
+              }
             },
-            tooltip: {
-              show: false,
-            },
-          },
-          {
-            z: 3,
-            name: `${this.carrySelect.month}计划`,
-            type: "pictorialBar",
-            symbolPosition: "end",
-            data: showData1,//此数据对应顶部组件
-            symbol: "diamond",
-            symbolOffset: ["-184%", "-50%"],
-            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
-            itemStyle: {
-              normal: {
-                borderColor: colorArr1[2],
-                borderWidth: 2,
-                color: colorArr1[2],
+            {
+              z: 2,
+              name: `${this.carrySelect.month}计划`,
+              type: "pictorialBar",
+              data: constData1,
+              symbol: "diamond",
+              symbolOffset: ["-154%", "50%"],
+              symbolSize: [barWidth, 10],
+              itemStyle: {
+                normal: { color: color1 }
               },
+              tooltip: { show: false }
             },
-            tooltip: {
-              show: false,
-            },
-          },
-          {
-            z: 4,
-            type: 'bar',
-            barWidth: barWidth,
-            name: `${this.carrySelect.month}实际`,
-            itemStyle: {
-              borderRadius: [0, 0, 0, 0],
-              color: color2
-            },
-            data: curAct,
-            label: {
-              offset:[0,-15],
-              show: true,
-              position: 'top',
-              textStyle: {//数值样式
-                fontSize: 12,
-                // color: 'red',
+            {
+              z: 3,
+              name: `${this.carrySelect.month}计划`,
+              type: "pictorialBar",
+              symbolPosition: "end",
+              data: showData1,
+              symbol: "diamond",
+              symbolOffset: ["-184%", "-50%"],
+              symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+              itemStyle: {
+                normal: {
+                  borderColor: colorArr1[2],
+                  borderWidth: 2,
+                  color: colorArr1[2]
+                }
               },
-              formatter: params => `${params.value}%`
-            }
-          },
-          {
-            z: 5,
-            name: `${this.carrySelect.month}实际`,
-            type: "pictorialBar",
-            data: constData2,
-            symbol: "diamond",
-            symbolOffset: ["0%", "50%"],
-            symbolSize: [barWidth, 10], //=========================
-            itemStyle: {
-              normal: {
+              tooltip: { show: false }
+            },
+            {
+              z: 4,
+              type: 'bar',
+              barWidth: barWidth,
+              name: `${this.carrySelect.month}实际`,
+              itemStyle: {
+                borderRadius: [0, 0, 0, 0],
                 color: color2
               },
+              data: curAct,
+              label: {
+                offset: [0, -15],
+                show: true,
+                position: 'top',
+                textStyle: { fontSize: 12 },
+                formatter: params => `${params.value}%`
+              }
             },
-            tooltip: {
-              show: false,
-            },
-          },
-          {
-            z: 6,
-            name: `${this.carrySelect.month}实际`,
-            type: "pictorialBar",
-            symbolPosition: "end",
-            data: showData2,
-            symbol: "diamond",
-            symbolOffset: ["0%", "-50%"],
-            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
-            itemStyle: {
-              normal: {
-                borderColor: colorArr2[2],
-                borderWidth: 2,
-                color: colorArr2[2]
+            {
+              z: 5,
+              name: `${this.carrySelect.month}实际`,
+              type: "pictorialBar",
+              data: constData2,
+              symbol: "diamond",
+              symbolOffset: ["0%", "50%"],
+              symbolSize: [barWidth, 10],
+              itemStyle: {
+                normal: { color: color2 }
               },
+              tooltip: { show: false }
             },
-            tooltip: {
-              show: false,
-            },
-          },
-          {
-            z: 7,
-            type: 'bar',
-            barWidth: barWidth,
-            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
-            itemStyle: {
-              borderRadius: [0, 0, 0, 0],
-              color: color3
-            },
-            data: nextPlan,
-            label: {
-              show: true,
-              position: 'top',
-              textStyle: {//数值样式
-                fontSize: 12,
-                color: '#4d8bdc',
+            {
+              z: 6,
+              name: `${this.carrySelect.month}实际`,
+              type: "pictorialBar",
+              symbolPosition: "end",
+              data: showData2,
+              symbol: "diamond",
+              symbolOffset: ["0%", "-50%"],
+              symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+              itemStyle: {
+                normal: {
+                  borderColor: colorArr2[2],
+                  borderWidth: 2,
+                  color: colorArr2[2]
+                }
               },
-              formatter: params => `${params.value}%`
-            }
-          },
-          {
-            z: 8,
-            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
-            type: "pictorialBar",
-            data: constData3,
-            symbol: "diamond",
-            symbolOffset: ["154%", "50%"],
-            symbolSize: [barWidth, 10],
-            itemStyle: {
-              normal: {
+              tooltip: { show: false }
+            },
+            {
+              z: 7,
+              type: 'bar',
+              barWidth: barWidth,
+              name: `${nextMonthStr}计划`,
+              itemStyle: {
+                borderRadius: [0, 0, 0, 0],
                 color: color3
               },
+              data: nextPlan,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  fontSize: 12,
+                  color: '#4d8bdc',
+                },
+                formatter: params => `${params.value}%`
+              }
             },
-            tooltip: {
-              show: false,
-            },
-          },
-          {
-            z: 9,
-            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
-            type: "pictorialBar",
-            symbolPosition: "end",
-            data: showData3,
-            symbol: "diamond",
-            symbolOffset: ["191%", "-50%"],
-            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
-            itemStyle: {
-              normal: {
-                borderColor: colorArr3[2],
-                borderWidth: 2,
-                color: colorArr3[2]
+            {
+              z: 8,
+              name: `${nextMonthStr}计划`,
+              type: "pictorialBar",
+              data: constData3,
+              symbol: "diamond",
+              symbolOffset: ["154%", "50%"],
+              symbolSize: [barWidth, 10],
+              itemStyle: {
+                normal: { color: color3 }
               },
+              tooltip: { show: false }
             },
-            tooltip: {
-              show: false,
-            },
-          }
-        ]
-      };
-    },
-
-    changeYear(e) {
-      this.select.year = e;
-      this.getStatistic();
-    },
-    async getStatistic() {
-            const res = await statistic(this.select);
-            console.log(res);
-            this.statistic = res;
-            let m2 = res.progress.money_total_2;
-            let m1 = res.progress.money_total_1;
-            var user_m = res.progress.use_money_total;
-            var m3=m1-user_m
-            if (m2 != 0) {
-              m3=m2-user_m;
-            } else if (m1 != 0) {
-              m3=m1-user_m;
-            }
-      this.rptChartData = {
-        xArr: ["预算未执行金额", "预算已执行金额"],
-        radiusArr: "50%",
-        yArr: [
-          {
-            value: m3,
-            name: "预算未执行金额",
-            label: {
-              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
-            },
-            emphasis: {
-              label: {
-                show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
+            {
+              z: 9,
+              name: `${nextMonthStr}计划`,
+              type: "pictorialBar",
+              symbolPosition: "end",
+              data: showData3,
+              symbol: "diamond",
+              symbolOffset: ["191%", "-50%"],
+              symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+              itemStyle: {
+                normal: {
+                  borderColor: colorArr3[2],
+                  borderWidth: 2,
+                  color: colorArr3[2]
+                }
               },
-            },
-          },
-          { value: user_m, name: "预算已执行金额" },
-        ],
-      };
-    },
-
-    toContract(row) {
-      this.$refs["detailContract"].getDetail(row.contract_id);
-      this.$refs["detailContract"].isShowDetail = true;
-    },
-
-    pageChange(e) {
-      this.pageIndex = e;
-      this.getNotices();
-    },
-
-    timeFormatter(cell, data, value) {
-      return parseTime(new Date(value));
-    },
-    typeFormatter(cell, data, value) {
-      return value === 1 ? "合同流程" : "付款计划";
-    },
-    toper(m1, m2, m3) {
-      if (m2 != 0) {
-        return ((m3 / m2) * 100).toFixed(2);
-      } else if (m1 != 0) {
-        return ((m3 / m1) * 100).toFixed(2);
-      } else return 0;
-    },
-    async getNotices() {
-      const res = await getNotice({
-        page_size: 10,
-        page: this.pageIndex,
-      });
-      this.list = res.data;
-      this.total = res.total;
-    },
-
-    filterChildren(data) {
-      data.forEach((i) => {
-        if (i.children && i.children.length > 0) {
-          this.filterChildren(i.children);
-        } else {
-          delete i.children;
-        }
-      });
-    },
-    getList() {
-      index(this.listQuery)
-        .then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        })
-        .catch((error) => {});
-    },
-    handleFilter() {
-      this.listQuery.page = 1;
-      this.getList();
-    },
-    readIt(row) {
-      readNotice({
-        id: row.id,
-      }).then((res) => {
-        Message({
-          type: "success",
-          message: "已读",
-        });
-        this.getNotices();
-      });
-      // show({id: row.id}).then(r => { this.form = r }).catch(error => {})
-      // this.list[index].is_read = 1
-    },
-    save() {
-      this.$refs["dataForm"].validate((valid) => {
-        if (valid) {
-          const tempData = Object.assign({}, this.form);
-          tempData.admin_id_list = tempData.ids.map((i) => {
-            return {
-              admin_id: i,
-            };
-          });
-          if (tempData.id) {
-            save(tempData)
-              .then((r) => {
-                this.saved();
-              })
-              .catch((error) => {});
-          } else {
-            store(tempData)
-              .then((r) => {
-                this.saved();
-              })
-              .catch((error) => {});
-          }
-        }
-      });
-    },
-    saved() {
-      this.handleFilter();
-      this.dialogFormVisible = false;
-      this.$message.success("保存成功");
-    },
-    handleDelete(row, index) {
-      this.$confirm("确定要删除吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          destroy({
-            id: row.id,
-          })
-            .then((response) => {
-              this.$message.success("删除成功");
-              this.getList();
-            })
-            .catch((error) => {});
-        })
-        .catch(() => {});
-    },
-  },
-  computed: {
-    moneyFormat () {
-      return function (price) {
-        return moneyFormatter(price);
-      };
-    },
-    allowAuth () {
-      return this.$store.state.user.min_allow_level !== 2
+              tooltip: { show: false }
+            }
+          ]
+        };
+      } catch (error) {
+        console.error('获取各科室预算计划完成对比数据失败:', error);
+        Message.error('获取各科室预算计划完成对比数据失败');
+      }
     },
-    authShowStatic () {
-      return this.$store.state.user.myroles.find(i => i.name === "首页统计")
-    }
   },
 };
 </script>
+
 <style scoped lang="scss">
-::v-deep .el-progress--line {
-  display: flex;
-  align-items: center;
-}
-::v-deep .el-progress__text {
-  word-break: keep-all;
+.app-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
 }
-.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%;
+
+.header-info {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  padding: 0 20px;
-  box-sizing: border-box;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-  & + & {
-    background: darkorange;
-    margin-top: 20px;
-  }
-  &:hover {
-    transform: scale(1.05,1.05);
+  .search-area {
+    display: flex;
+    align-items: center;
   }
 }
-::v-deep .el-dialog__body {
-  padding: 8px 20px;
+
+.box-card {
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
 }
 
-::v-deep .el-col-5 {
-  width: 20%;
+.todo-content {
+  .pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
 }
 
-::v-deep .el-card__body {
-  padding: 4px 10px !important;
+.top-card {
+  height: 280px;
+
+  ::v-deep .el-card__body {
+    height: calc(100% - 60px);
+    padding: 20px;
+  }
 }
 
-.progress-card {
+.todo-content {
+  height: 100%;
   display: flex;
+  flex-direction: column;
 
-  &-item {
-    text-align: center;
-    flex: 1;
+  .todo-header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #fafafa;
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+    font-size: 12px;
+    font-weight: 600;
+    color: #606266;
+    position: sticky;
+    top: 0;
+    z-index: 10;
 
-    &__label {
-      font-size: 14px;
+    .header-col {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
     }
+  }
 
-    &__num {
-      font-size: 20px;
-      font-weight: 600;
+  .todo-body {
+    flex: 1;
+    border: 1px solid #ebeef5;
+    border-top: none;
+    overflow-y: auto;
+    max-height: 180px;
+
+    .todo-row {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border-bottom: 1px solid #ebeef5;
+      font-size: 12px;
+      min-height: 40px;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
+
+      .todo-col {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
 
-      padding: 6px 0;
+        &:nth-child(2) {
+          justify-content: flex-start;
+          text-align: left;
+          padding-left: 8px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
     }
   }
 }
-</style>
-<style lang="scss" scoped>
-.ivu-btn {
-  margin-right: 10px;
-}
 
-.table-tree {
-  margin-top: 10px;
-}
+.budget-overview {
+  height: 100%;
 
-.v-text {
-  padding: 8px 0;
-  border-bottom: 1px solid #eee;
-  margin-bottom: 20px;
+  .budget-stats-horizontal {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    height: 100%;
+    gap: 15px;
+
+    .budget-item {
+      flex: 0.8;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      &.execution-item {
+        flex: 1.4;
+        flex-direction: column;
+      }
+
+      .budget-item-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      }
+
+      .budget-icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 10px;
+
+        i {
+          font-size: 20px;
+          color: white;
+        }
+
+        &.blue {
+          background: #409eff;
+        }
+
+        &.green {
+          background: #67c23a;
+        }
+
+        &.orange {
+          background: #e6a23c;
+        }
+
+        &.gray {
+          background: #909399;
+        }
+      }
+
+      .budget-content {
+    display: flex;
+        flex-direction: column;
+    align-items: center;
+
+        .budget-number {
+          font-size: 16px;
+  font-weight: 600;
+          color: #303133;
+          margin-bottom: 5px;
+          line-height: 1.2;
+        }
 
-  .title {
-    color: #338de3;
+        .budget-label {
+          font-size: 12px;
+          color: #909399;
+          line-height: 1.3;
+  text-align: center;
+        }
+      }
+    }
+
+    .execution-rate-horizontal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+      height: 100%;
+
+      .rate-circle-container {
+        margin-bottom: 15px;
+
+        ::v-deep .el-progress-circle {
+          .el-progress__text {
+            font-size: 12px !important;
+
+            .rate-content {
+              .rate-number {
+                font-size: 16px;
+                font-weight: 600;
+                color: #409eff;
+                line-height: 1;
+              }
+
+              .rate-label {
+                font-size: 10px;
+                color: #909399;
+                margin-top: 2px;
+              }
+            }
+          }
+        }
+      }
+
+      .rate-chart {
+        .chart-legend {
+    display: flex;
+    flex-direction: column;
+          gap: 6px;
+
+          .legend-item {
+            display: flex;
+    align-items: center;
+            font-size: 10px;
+
+            .legend-color {
+              width: 10px;
+              height: 10px;
+              border-radius: 2px;
+              margin-right: 4px;
+
+              &.blue-legend {
+                background: #409eff;
+              }
+
+              &.orange-legend {
+                background: #e6a23c;
+              }
+            }
+
+            .legend-text {
+              color: #666;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
-.dataGroup {
-  padding: 10px 0;
-}
+.expense-overview {
+  .expense-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    margin-bottom: 20px;
 
-.grid-content {
-  border-radius: 5px;
-  text-align: center;
-  background: #ffffff;
-  padding: 15px 0;
+    .expense-item {
+      display: flex;
+      align-items: center;
+      padding: 15px;
+      background: #f8f9fa;
+      border-radius: 8px;
+
+      .expense-icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+        margin-right: 12px;
 
-  p {
-    line-height: 1.8;
+        i {
+          font-size: 20px;
+          color: white;
+        }
+
+        &.blue {
+          background: #409eff;
+        }
+
+        &.green {
+          background: #67c23a;
+        }
+
+        &.orange {
+          background: #e6a23c;
+        }
+      }
+
+      .expense-content {
+        flex: 1;
+
+        .expense-number {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 3px;
+        }
+
+        .expense-label {
+          font-size: 12px;
+          color: #909399;
+        }
+      }
+    }
+
+    .expense-rate {
+      grid-column: span 2;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px;
+      background: #f8f9fa;
+      border-radius: 8px;
+
+      .rate-text-small {
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .expense-label {
+        margin-top: 10px;
+        font-size: 12px;
+        color: #909399;
+      }
+    }
   }
+}
 
-  p:first-child {
-    font-weight: 700;
-    font-size: 16px;
+.chart-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .chart-placeholder {
+    text-align: center;
   }
 }
 
-.bg-org {
-  border: 2px solid #ef6c24;
-  color: #ef6c24;
+// 表格样式优化
+::v-deep .el-table {
+  .el-table__header {
+    th {
+      background-color: #fafafa;
+      color: #606266;
+      font-weight: 600;
+    }
+  }
+
+  .el-table__body {
+    tr:hover > td {
+      background-color: #f5f7fa;
+    }
+  }
 }
 
-.bg-blue {
-  border: 2px solid #0800ff;
-  color: #0800ff;
+// 进度条样式
+::v-deep .el-progress-bar__outer {
+  background-color: #ebeef5;
 }
 
-.bg-green {
-  border: 2px solid #0f9700;
-  color: #0f9700;
+::v-deep .el-progress-bar__inner {
+  background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
 }
 
-.bg-black {
-  border: 2px solid #333;
-  color: #333;
+// 标签样式
+::v-deep .el-tag {
+  border: none;
+
+  &.el-tag--success {
+    background-color: #f0f9ff;
+    color: #67c23a;
+  }
+
+  &.el-tag--danger {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
 }
 
-.bg-pink {
-  border: 2px solid #ff0000;
-  color: #ff0000;
+// 支出统计样式
+.expense-card {
+  .expense-stats-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .expense-stat-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1;
+
+      .expense-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+
+        i {
+          font-size: 18px;
+          color: white;
+        }
+
+        &.blue {
+          background: linear-gradient(135deg, #409eff, #66b1ff);
+        }
+
+        &.green {
+          background: linear-gradient(135deg, #67c23a, #85ce61);
+        }
+
+        &.orange {
+          background: linear-gradient(135deg, #e6a23c, #eebe77);
+        }
+      }
+
+      .expense-content {
+        text-align: center;
+
+        .expense-number {
+          font-size: 14px;
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 4px;
+        }
+
+        .expense-label {
+          font-size: 11px;
+          color: #909399;
+          line-height: 1.2;
+        }
+      }
+    }
+
+    .expense-rate {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .rate-text-small {
+        font-size: 12px;
+        font-weight: 600;
+        color: #409eff;
+      }
+
+      .expense-label {
+        font-size: 11px;
+        color: #909399;
+        margin-top: 8px;
+        line-height: 1.2;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/dashboard/index2.vue b/src/views/dashboard/index2.vue
new file mode 100644
index 0000000..e1b56a1
--- /dev/null
+++ b/src/views/dashboard/index2.vue
@@ -0,0 +1,1163 @@
+<template>
+  <div class="app-container">
+    <div
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <span>当前登录人：{{ user.name }} </span>
+
+    </div>
+
+    <el-row :gutter="20">
+      <el-col :span="allowAuth ? 16 : 24">
+        <el-card v-if="allowAuth" class="box-card" style="margin: 20px 0">
+          <div slot="header" class="clearfix">
+            <span>预算总体执行情况</span>
+            <DatePicker
+              :value="select.year"
+              placeholder="选择所属年份"
+              placement="bottom"
+              style="width: 130px; float: right"
+              type="year"
+              @on-change="changeYear"
+            ></DatePicker>
+          </div>
+          <router-link :to="`/statisticalReport/budgetProgress`">
+            <div class="progress-card">
+              <div class="progress-card-item">
+                <div class="progress-card-item__num">
+                  {{
+                    moneyFormat(
+                      statistic.progress ? statistic.progress.money_total_1 : 0
+                    )
+                  }}
+                </div>
+                <div class="progress-card-item__label">年初预算合计金额</div>
+              </div>
+              <div class="progress-card-item">
+                <div class="progress-card-item__num">
+                  {{
+                    moneyFormat(
+                      statistic.progress ? statistic.progress.money_total_2 : 0
+                    )
+                  }}
+                </div>
+                <div class="progress-card-item__label">调整后预算合计金额</div>
+              </div>
+              <div class="progress-card-item">
+                <div class="progress-card-item__num">
+                  {{
+                    moneyFormat(
+                      statistic.progress
+                        ? statistic.progress.use_money_total
+                        : 0
+                    )
+                  }}
+                </div>
+                <div class="progress-card-item__label">已支付金额</div>
+              </div>
+              <div class="progress-card-item">
+                <div class="progress-card-item__num">
+                  {{
+                    toper(
+                      statistic.progress ? statistic.progress.money_total_1 : 0,
+                      statistic.progress ? statistic.progress.money_total_2 : 0,
+                      statistic.progress
+                        ? statistic.progress.use_money_total
+                        : 0
+                    )
+                  }}%
+                </div>
+                <div class="progress-card-item__label">执行率</div>
+              </div>
+            </div>
+          </router-link>
+        </el-card>
+
+        <div ref="lxHeader">
+          <LxHeader
+            icon="iconfont/icon--kucunguanli"
+            text="待办事项"
+            :custom="true"
+            style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+          >
+            <div slot="content" />
+            <slot>
+              <div></div>
+            </slot>
+          </LxHeader>
+        </div>
+        <div class="table-tree">
+          <el-table
+            :data="list"
+            border
+            class="v-table"
+            style="width: 100%; margin-bottom: 20px"
+          >
+            <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" />
+            <el-table-column
+              prop="created_at"
+              width="200"
+              label="下发时间"
+              align="center"
+              :formatter="timeFormatter"
+            />
+            <el-table-column
+              width="100"
+              label="状态"
+              align="center"
+              prop="read_count"
+            >
+              <template slot-scope="{ row, $index }">
+                <el-link v-if="row.read_count" type="success" :underline="false"
+                  >已读</el-link
+                >
+                <Button
+                  v-else
+                  type="error"
+                  size="small"
+                  style="margin-left: 10px"
+                  ghost
+                  @click="readIt(row, $index)"
+                  >未读</Button
+                >
+              </template>
+            </el-table-column>
+            <el-table-column
+              width="90"
+              header-align="center"
+              label="操作"
+              align="center"
+            >
+              <template slot-scope="{ row, $index }">
+                <Button
+                  type="primary"
+                  size="small"
+                  style="margin-left: 10px"
+                  ghost
+                  @click="toContract(row)"
+                  >查看</Button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div style="display: flex; justify-content: flex-end">
+            <Page :total="total" show-elevator @on-change="pageChange" />
+          </div>
+        </div>
+      </el-col>
+      <el-col v-if="allowAuth" :span="authShowStatic ? 7 : 8">
+        <el-card class="box-card" style="margin: 20px 0">
+          <div class="text item">
+            <pie-chart :chartData="rptChartData"></pie-chart>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="1" v-if="authShowStatic">
+        <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-col>
+    </el-row>
+
+    <div class="demo-split" v-if="allowAuth">
+      <Split v-model="split" style="height: 570px">
+        <template #left>
+          <div class="demo-split-pane" style="padding-right: 5px">
+            <div ref="lxHeader" v-if="statistic.departmentList">
+              <LxHeader
+                icon="iconfont/icon--kucunguanli"
+                text="科室执行情况"
+                :custom="true"
+                style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+              >
+                <div slot="content" />
+                <slot>
+                  <div style="width: 100%">
+                    <xy-table
+                      :height="488"
+                      :list="statistic.departmentList"
+                      :table-item="departmentTable"
+                    >
+                      <template v-slot:btns>
+                        <el-table-column
+                          :width="80"
+                          fixed="right"
+                          label="操作"
+                          header-align="center"
+                          align="center"
+                        >
+                          <template slot-scope="scope">
+                            <router-link
+                              :to="`/contract/statisticalReport/budgetProgress?departmentId=${scope.row.plan_department_id}`"
+                              >查看
+                            </router-link>
+                          </template>
+                        </el-table-column>
+                      </template>
+                    </xy-table>
+                  </div>
+                </slot>
+              </LxHeader>
+            </div>
+          </div>
+        </template>
+        <template #right>
+          <div class="demo-split-pane" style="padding-left: 10px">
+            <div ref="lxHeader" v-if="statistic.typeList">
+              <LxHeader
+                icon="iconfont/icon--kucunguanli"
+                text="预算类型执行情况"
+                :custom="true"
+                style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+              >
+                <div slot="content" />
+                <slot>
+                  <div style="width: 100%">
+                    <xy-table
+                      :height="488"
+                      :list="statistic.typeList"
+                      :table-item="typeTable"
+                    >
+                      <template v-slot:btns>
+                        <el-table-column
+                          :width="80"
+                          fixed="right"
+                          label="操作"
+                          header-align="center"
+                          align="center"
+                        >
+                          <template slot-scope="scope">
+                            <router-link
+                              :to="`/contract/statisticalReport/budgetProgress?typeId=${scope.row.type}`"
+                              >查看
+                            </router-link>
+                          </template>
+                        </el-table-column>
+                      </template>
+                    </xy-table>
+                  </div>
+                </slot>
+              </LxHeader>
+            </div>
+          </div>
+        </template>
+      </Split>
+    </div>
+
+    <Card v-if="allowAuth">
+      <template #title>
+        <div style="display: flex;justify-content: space-between;align-items: center;">
+          <p>各科室预算计划完成对比图</p>
+          <el-date-picker v-model="carrySelect.month"
+                          format="yyyy-MM"
+                          :clearable="false"
+                          style="width: 140px;"
+                          placeholder="月份"
+                          type="month"
+                          size="small"
+                          @change="e => {
+                            carrySelect.month = $moment(e).format('YYYY-MM');
+                            getCarry();
+                          }"></el-date-picker>
+        </div>
+      </template>
+      <lineChart height="500px" :chart-data="lineChartData"></lineChart>
+    </Card>
+
+    <detailContract ref="detailContract"></detailContract>
+
+    <budgetStatic ref="budgetStatic"></budgetStatic>
+
+    <carryStatic ref="carryStatic" :departments="statistic.departmentList" :year="select.year"></carryStatic>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import detailContract from "@/views/contract/components/detailContract";
+import LxHeader from "@/components/LxHeader/index.vue";
+import Pagination from "@/components/Pagination";
+import PieChart from "./components/PieChart.vue";
+import { adminDepartmentList } from '@/api/system/department';
+import { adminUserList, getInfo } from '@/api/user';
+import { getNotice, readNotice, statistic, carry } from "@/api/dashboard/notice";
+import { parseTime, moneyFormatter } from '@/utils';
+import { Message } from "element-ui";
+import budgetStatic from '@/views/dashboard/components/budgetStatic.vue'
+import lineChart from '@/views/dashboard/components/LineChart.vue'
+import carryStatic from '@/views/dashboard/components/carryStatic.vue'
+export default {
+  name: "Manage",
+  components: {
+    LxHeader,
+    Pagination,
+    detailContract,
+    PieChart,
+    budgetStatic,
+    lineChart,
+    carryStatic
+  },
+  data() {
+    return {
+      value2: 12,
+      split: 0.5,
+      rptChartData: [],
+      select: {
+        year: "",
+      },
+      carrySelect: {
+        month: this.$moment().format('YYYY-MM')
+      },
+      lineChartData: {},
+      statistic: {
+        departmentList: []
+      },
+      department_id: [],
+      userIds: [],
+      list: [],
+      total: 0,
+      pageIndex: 1,
+      // listQuery: {
+      //   page: 1,
+      //   page_size: 10,
+      //   show_self: 1,
+      // },
+      form: {
+        id: undefined,
+      },
+      dialogFormVisible: false,
+      departmentTree: [],
+      userList: [],
+      formLabelWidth: "200px",
+      user: {},
+
+      departmentProgress: [],
+      departmentTable: [
+        {
+          label: "科室",
+          minWidth: 180,
+          prop: "plan_department.name",
+          sortable: false,
+          align: "left",
+          fixed: "left",
+        },
+        {
+          label: "执行情况",
+          sortable: false,
+          minWidth: 220,
+          align: "left",
+          fixed: "right",
+          customFn: (row) => {
+            let m2 = row?.money_total_2;
+            let m1 = row?.money_total_1;
+            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);
+            }
+            return (
+              <div>
+                <el-progress percentage={Number(per)}> </el-progress>{" "}
+              </div>
+            );
+          },
+        },
+        {
+          label: "年初预算合计金额(元)",
+          width: 260,
+          align: "right",
+          sortable: false,
+          prop: "money_total_1",
+          formatter: (cell, data, value) => {
+            return moneyFormatter(value);
+          },
+        },
+        {
+          label: "调整后预算合计金额(元)",
+          width: 260,
+          align: "right",
+          sortable: false,
+          prop: "money_total_2",
+          formatter: (cell, data, value) => {
+            return moneyFormatter(value);
+          },
+        },
+        {
+          label: "年中专项资金(元)",
+          width: 260,
+          align: "right",
+          sortable: false,
+          prop: "middle_fund_total",
+          formatter: (cell, data, value) => {
+            return moneyFormatter(value);
+          },
+        },
+        {
+          label: "已使用(元)",
+          width: 120,
+          align: "right",
+          sortable: false,
+          prop: "use_money_total",
+          formatter: (cell, data, value) => {
+            return moneyFormatter(value);
+          },
+        },
+      ],
+      typeTable: [
+        {
+          label: "预算类别",
+          width: 100,
+          prop: "type_text",
+          sortable: false,
+          fixed: "left",
+        },
+        {
+          label: "执行情况",
+          sortable: false,
+          minWidth: 220,
+          align: "left",
+          fixed: "right",
+          customFn: (row) => {
+            let m2 = row.money_total_2;
+            let m1 = row.money_total_1;
+            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);
+            }
+            return (
+              <div>
+                <el-progress percentage={Number(per)}> </el-progress>{" "}
+              </div>
+            );
+          },
+        },
+        {
+          label: "年初预算合计金额(元)",
+          width: 260,
+          align: "right",
+          sortable: false,
+          prop: "money_total_1",
+          formatter: (cell, data, value) => {
+            return moneyFormatter(value);
+          },
+        },
+        {
+          label: "调整后预算合计金额(元)",
+          width: 260,
+          align: "right",
+          sortable: false,
+          prop: "money_total_2",
+          formatter: (cell, data, value) => {
+            return moneyFormatter(value);
+          },
+        },
+        {
+          label: "已使用(元)",
+          width: 140,
+          align: "right",
+          sortable: false,
+          prop: "use_money_total",
+          formatter: (cell, data, value) => {
+            return moneyFormatter(value);
+          },
+        },
+      ],
+    };
+  },
+  created() {
+    this.select.year = this.$moment().format("YYYY");
+    this.getNotices();
+
+    this.getStatistic();
+    this.getCarry();
+
+    getInfo()
+      .then((response) => {
+        console.log(response);
+        this.user = response;
+      })
+      .catch((error) => {});
+  },
+  methods: {
+    formatResult(originalNum) {
+      // 1. 先处理浮点数精度问题（乘以100后四舍五入到整数，再除以100保留两位小数）
+      if(!originalNum){
+        return 0
+      }
+      const multiplied =  originalNum* 100; // 0.28 * 100 = 28 → 处理后为28
+
+        // 2. 判断是否为整数（乘以100后是否无小数）
+        if (multiplied % 1 === 0) {
+          // 是整数，直接显示整数（如28）
+          return multiplied;
+        } else {
+          // 不是整数，保留两位小数（如56.50）
+          return (multiplied).toFixed(2);
+        }
+    },
+    async getCarry () {
+      const res = await carry(this.carrySelect);
+
+      //组织数据
+      let setData = function(data, constData, showData) {
+        data.forEach(function(item) {
+            if (item && Number(item.value) !== 0) {
+                  constData.push(1);
+                  showData.push(item);
+                } else {
+                  constData.push(1);   // 让底部 diamond 始终有
+                  showData.push(null); // 顶部 diamond 不显示
+                }
+          });
+      }
+      //组织颜色
+      let setColor = function(colorArr) {
+        let color = {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1, */
+          colorStops: [{
+            offset: 0,
+            color: colorArr[0],
+          },
+            {
+              offset: 0.5,
+              color: colorArr[0],
+            },
+            {
+              offset: 0.5,
+              color: colorArr[1],
+            },
+            {
+              offset: 1,
+              color: colorArr[1],
+            },
+          ],
+        };
+        return color
+      }
+
+      // let curPlan = res?.map(i => {
+      //   const { use_money_total,paid_plan_total,money_total_2 } = i
+      //   return paid_plan_total ? (Math.round((Number(paid_plan_total||0) / Number(money_total_2 ||0)) * 10000) / 100) :
+      //   0;
+      // });
+      // let curAct = res?.map(i => {
+      //   const { use_money_total,money_total_2 } = i
+      //   return Number(money_total_2) ? (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100) :
+      //    0;
+      // });
+      // let nextPlan = res?.map(i => {
+      //   const { use_money_total_next,paid_plan_total_next,money_total_2 } = i
+      //   return paid_plan_total_next ? (Math.round((Number(paid_plan_total_next||0) / Number(money_total_2||0)) * 10000) / 100) :
+      //    0;
+      // });
+      let curPlan = res?.map(i => {
+        const { use_money_total,paid_plan_total,money_total_2,money_total_1,plan_rate } = i
+        let curPlan_total = Number(paid_plan_total||0) + Number(use_money_total||0)
+        return {
+
+          value:this.formatResult(plan_rate),
+        //   value:Number(money_total_2) ? ((( curPlan_total / Number(money_total_2 ||0)) * 10000) / 100).toFixed(2) :
+        // ((( curPlan_total / Number(money_total_1 ||0)) * 10000) / 100).toFixed(2),
+          money:parseFloat(curPlan_total).toFixed(2)
+        }
+      });
+
+      let curAct = res?.map(i => {
+        const { use_money_total,money_total_2,money_total_1,act_rate } = i
+        return {
+          value:this.formatResult(act_rate),
+         //  value:Number(money_total_2) ?
+         //  (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100).toFixed(2) :
+         // (Math.round((Number(use_money_total||0) / Number(money_total_1||0)) * 10000) / 100).toFixed(2),
+         money:parseFloat(use_money_total).toFixed(2)
+        }
+      });
+
+      let nextPlan = res?.map(i => {
+
+        const { plan_rate_next,use_money_total,use_money_total_next,paid_plan_total_next,money_total_2,money_total_1 } = i
+        // if(Number(paid_plan_total_next)===0){
+        //   return 0
+        // }
+        let nextPlan_total = Number(paid_plan_total_next||0) + Number(use_money_total||0)
+        return {
+
+          value:this.formatResult(plan_rate_next),
+         //  value:Number(money_total_2) ? (((nextPlan_total / Number(money_total_2||0)) * 10000) / 100).toFixed(2) :
+         // (((nextPlan_total / Number(money_total_1||0)) * 10000) / 100).toFixed(2),
+         money:parseFloat(nextPlan_total).toFixed(2)
+        }
+      });
+
+      let barWidth = 23;
+      let constData1 = [];
+      let showData1 = [];
+      let constData2 = [];
+      let showData2 = [];
+      let constData3 = [];
+      let showData3 = [];
+
+      setData(curPlan, constData1, showData1)
+      setData(curAct, constData2, showData2)
+      setData(nextPlan, constData3, showData3)
+
+      let colorArr1 = ["#345A8B", "#387ABD", "#398ac4"];
+      let colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
+      let colorArr3 = ['#559372','#7ab798','#9edebc']
+      let spanColor = ["#345A8B","#51C0DB",'#559372']
+
+      let color1 = setColor(colorArr1)
+      let color2 = setColor(colorArr2)
+      let color3 = setColor(colorArr3)
+
+      this.lineChartData = {
+        rotate: 54,
+        xArr: res?.map(i => i.plan_department?.name),
+        tooltip: {
+            show:true,
+            trigger: 'axis', // 触发方式为鼠标悬浮在图形上
+            formatter: function (params) {
+                // 自定义悬浮窗的内容和样式
+                 let result = `<div style=" padding: 10px;">`;
+                  // 获取当前悬浮的部门名称
+                  const departmentName = params[0].name;
+                  result += `<div style="font-weight: bold; margin-bottom: 5px;">${departmentName}</div>`;
+
+                  // 遍历所有参数，找到三个主要柱状图的数据
+                  params.forEach((param,index) => {
+                      // 只处理主要的柱状图数据（z值为1、4、7的系列）
+                    result += `<div style="margin: 3px 0;">
+                        <span style="display: inline-block; width: 10px; height: 10px; background-color: ${spanColor[index]}; margin-right: 5px;"></span>
+                        <span>${param.seriesName}: ${param.value}%-${param.data.money?param.data.money+'元':0+'元'}</span>
+                    </div>`;
+                  });
+                  result += `</div>`;
+                  return result
+            }
+        },
+        series: [
+          {
+            z: 1,
+            type: 'bar',
+            barWidth: barWidth,
+            name: `${this.carrySelect.month}计划`,
+            barGap: "54%", //相邻柱子间距
+            itemStyle: {
+              borderRadius: [0, 0, 0, 0],//柱子四周圆角
+              color: color1//柱子左右颜色（深，浅）
+            },
+            data: curPlan, //Y轴上的高度
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {//数值样式
+                fontSize: 12,
+                color: '#4d8bdc',
+              },
+              formatter: params => `${params.value}%`
+            },
+          },
+          {
+            z: 2,
+            name: `${this.carrySelect.month}计划`,
+            type: "pictorialBar",
+            data: constData1,//此数据对应底部组件
+            symbol: "diamond",//底部组件形状，不写默认为椭圆
+            symbolOffset: ["-154%", "50%"],//与柱子的偏移角度
+            symbolSize: [barWidth, 10],//底面[宽，高]
+            itemStyle: {
+              normal: {
+                color: color1//底面左右颜色（深，浅）
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            z: 3,
+            name: `${this.carrySelect.month}计划`,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: showData1,//此数据对应顶部组件
+            symbol: "diamond",
+            symbolOffset: ["-184%", "-50%"],
+            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+            itemStyle: {
+              normal: {
+                borderColor: colorArr1[2],
+                borderWidth: 2,
+                color: colorArr1[2],
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            z: 4,
+            type: 'bar',
+            barWidth: barWidth,
+            name: `${this.carrySelect.month}实际`,
+            itemStyle: {
+              borderRadius: [0, 0, 0, 0],
+              color: color2
+            },
+            data: curAct,
+            label: {
+              offset:[0,-15],
+              show: true,
+              position: 'top',
+              textStyle: {//数值样式
+                fontSize: 12,
+                // color: 'red',
+              },
+              formatter: params => `${params.value}%`
+            }
+          },
+          {
+            z: 5,
+            name: `${this.carrySelect.month}实际`,
+            type: "pictorialBar",
+            data: constData2,
+            symbol: "diamond",
+            symbolOffset: ["0%", "50%"],
+            symbolSize: [barWidth, 10], //=========================
+            itemStyle: {
+              normal: {
+                color: color2
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            z: 6,
+            name: `${this.carrySelect.month}实际`,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: showData2,
+            symbol: "diamond",
+            symbolOffset: ["0%", "-50%"],
+            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+            itemStyle: {
+              normal: {
+                borderColor: colorArr2[2],
+                borderWidth: 2,
+                color: colorArr2[2]
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            z: 7,
+            type: 'bar',
+            barWidth: barWidth,
+            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
+            itemStyle: {
+              borderRadius: [0, 0, 0, 0],
+              color: color3
+            },
+            data: nextPlan,
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {//数值样式
+                fontSize: 12,
+                color: '#4d8bdc',
+              },
+              formatter: params => `${params.value}%`
+            }
+          },
+          {
+            z: 8,
+            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
+            type: "pictorialBar",
+            data: constData3,
+            symbol: "diamond",
+            symbolOffset: ["154%", "50%"],
+            symbolSize: [barWidth, 10],
+            itemStyle: {
+              normal: {
+                color: color3
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            z: 9,
+            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: showData3,
+            symbol: "diamond",
+            symbolOffset: ["191%", "-50%"],
+            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+            itemStyle: {
+              normal: {
+                borderColor: colorArr3[2],
+                borderWidth: 2,
+                color: colorArr3[2]
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          }
+        ]
+      };
+    },
+
+    changeYear(e) {
+      this.select.year = e;
+      this.getStatistic();
+    },
+    async getStatistic() {
+            const res = await statistic(this.select);
+            console.log(res);
+            this.statistic = res;
+            let m2 = res.progress.money_total_2;
+            let m1 = res.progress.money_total_1;
+            var user_m = res.progress.use_money_total;
+            var m3=m1-user_m
+            if (m2 != 0) {
+              m3=m2-user_m;
+            } else if (m1 != 0) {
+              m3=m1-user_m;
+            }
+      this.rptChartData = {
+        xArr: ["预算未执行金额", "预算已执行金额"],
+        radiusArr: "50%",
+        yArr: [
+          {
+            value: m3,
+            name: "预算未执行金额",
+            label: {
+              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
+            },
+            emphasis: {
+              label: {
+                show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
+              },
+            },
+          },
+          { value: user_m, name: "预算已执行金额" },
+        ],
+      };
+    },
+
+    toContract(row) {
+      this.$refs["detailContract"].getDetail(row.contract_id);
+      this.$refs["detailContract"].isShowDetail = true;
+    },
+
+    pageChange(e) {
+      this.pageIndex = e;
+      this.getNotices();
+    },
+
+    timeFormatter(cell, data, value) {
+      return parseTime(new Date(value));
+    },
+    typeFormatter(cell, data, value) {
+      return value === 1 ? "合同流程" : "付款计划";
+    },
+    toper(m1, m2, m3) {
+      if (m2 != 0) {
+        return ((m3 / m2) * 100).toFixed(2);
+      } else if (m1 != 0) {
+        return ((m3 / m1) * 100).toFixed(2);
+      } else return 0;
+    },
+    async getNotices() {
+      const res = await getNotice({
+        page_size: 10,
+        page: this.pageIndex,
+      });
+      this.list = res.data;
+      this.total = res.total;
+    },
+
+    filterChildren(data) {
+      data.forEach((i) => {
+        if (i.children && i.children.length > 0) {
+          this.filterChildren(i.children);
+        } else {
+          delete i.children;
+        }
+      });
+    },
+    getList() {
+      index(this.listQuery)
+        .then((response) => {
+          this.list = response.data;
+          this.total = response.total;
+        })
+        .catch((error) => {});
+    },
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    readIt(row) {
+      readNotice({
+        id: row.id,
+      }).then((res) => {
+        Message({
+          type: "success",
+          message: "已读",
+        });
+        this.getNotices();
+      });
+      // show({id: row.id}).then(r => { this.form = r }).catch(error => {})
+      // this.list[index].is_read = 1
+    },
+    save() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.form);
+          tempData.admin_id_list = tempData.ids.map((i) => {
+            return {
+              admin_id: i,
+            };
+          });
+          if (tempData.id) {
+            save(tempData)
+              .then((r) => {
+                this.saved();
+              })
+              .catch((error) => {});
+          } else {
+            store(tempData)
+              .then((r) => {
+                this.saved();
+              })
+              .catch((error) => {});
+          }
+        }
+      });
+    },
+    saved() {
+      this.handleFilter();
+      this.dialogFormVisible = false;
+      this.$message.success("保存成功");
+    },
+    handleDelete(row, index) {
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          destroy({
+            id: row.id,
+          })
+            .then((response) => {
+              this.$message.success("删除成功");
+              this.getList();
+            })
+            .catch((error) => {});
+        })
+        .catch(() => {});
+    },
+  },
+  computed: {
+    moneyFormat () {
+      return function (price) {
+        return moneyFormatter(price);
+      };
+    },
+    allowAuth () {
+      return this.$store.state.user.min_allow_level !== 2
+    },
+    authShowStatic () {
+      return this.$store.state.user.myroles.find(i => i.name === "首页统计")
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+::v-deep .el-progress--line {
+  display: flex;
+  align-items: center;
+}
+::v-deep .el-progress__text {
+  word-break: keep-all;
+}
+.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;
+}
+
+::v-deep .el-col-5 {
+  width: 20%;
+}
+
+::v-deep .el-card__body {
+  padding: 4px 10px !important;
+}
+
+.progress-card {
+  display: flex;
+
+  &-item {
+    text-align: center;
+    flex: 1;
+
+    &__label {
+      font-size: 14px;
+    }
+
+    &__num {
+      font-size: 20px;
+      font-weight: 600;
+
+      padding: 6px 0;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.ivu-btn {
+  margin-right: 10px;
+}
+
+.table-tree {
+  margin-top: 10px;
+}
+
+.v-text {
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 20px;
+
+  .title {
+    color: #338de3;
+  }
+}
+
+.dataGroup {
+  padding: 10px 0;
+}
+
+.grid-content {
+  border-radius: 5px;
+  text-align: center;
+  background: #ffffff;
+  padding: 15px 0;
+
+  p {
+    line-height: 1.8;
+  }
+
+  p:first-child {
+    font-weight: 700;
+    font-size: 16px;
+  }
+}
+
+.bg-org {
+  border: 2px solid #ef6c24;
+  color: #ef6c24;
+}
+
+.bg-blue {
+  border: 2px solid #0800ff;
+  color: #0800ff;
+}
+
+.bg-green {
+  border: 2px solid #0f9700;
+  color: #0f9700;
+}
+
+.bg-black {
+  border: 2px solid #333;
+  color: #333;
+}
+
+.bg-pink {
+  border: 2px solid #ff0000;
+  color: #ff0000;
+}
+</style>
diff --git a/src/views/departmentPlanMoney/index.vue b/src/views/departmentPlanMoney/index.vue
new file mode 100644
index 0000000..47d6835
--- /dev/null
+++ b/src/views/departmentPlanMoney/index.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="department-plan-page">
+    <el-card class="filter-card">
+      <el-form :model="searchForm" inline label-width="90px" size="small">
+        <el-form-item label="预算部门">
+          <el-select
+            v-model="searchForm.plan_department_id"
+            placeholder="请选择部门"
+            clearable
+            filterable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in departments"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="月份">
+          <el-date-picker
+            v-model="searchForm.month"
+            type="month"
+            value-format="yyyy-MM"
+            placeholder="请选择月份"
+            clearable
+            style="width: 160px"
+          />
+        </el-form-item>
+        <div class="filter-actions">
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </div>
+      </el-form>
+    </el-card>
+
+    <el-card class="table-card">
+      <div slot="header" class="table-card__header">
+        <div class="table-card__title">部门预算计划金额</div>
+        <el-button type="primary" icon="el-icon-plus" size="small" @click="openDialog('add')">
+          新增
+        </el-button>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="plan_department_name" label="预算部门" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="month" label="月份" width="120" />
+        <el-table-column label="预算金额(元)" width="180" align="right">
+          <template slot-scope="{ row }">
+            {{ formatMoney(row.plan_money) }}
+          </template>
+        </el-table-column>
+        <el-table-column width="200" label="操作" fixed="right" align="center">
+          <template slot-scope="{ row }">
+            <el-button type="text" size="mini" @click="openDialog('edit', row)">编辑</el-button>
+            <el-popconfirm title="确认删除该记录？" @confirm="handleDelete(row)">
+              <el-button slot="reference" type="text" size="mini">删除</el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page.sync="pagination.page"
+          :page-size.sync="pagination.page_size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 30, 50]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="520px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="formRules"
+        label-width="100px"
+        size="small"
+      >
+        <el-form-item label="预算部门" prop="plan_department_id">
+          <el-select
+            v-model="form.plan_department_id"
+            placeholder="请选择预算部门"
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in departments"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="月份" prop="month">
+          <el-date-picker
+            v-model="form.month"
+            type="month"
+            value-format="yyyy-MM"
+            placeholder="请选择月份"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="预算金额" prop="plan_money">
+          <el-input-number
+            v-model="form.plan_money"
+            :min="0"
+            :precision="2"
+            :step="1000"
+            controls-position="right"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitForm">保 存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getdepartmentplanmoney,
+  detaildepartmentplanmoney,
+  deldepartmentplanmoney,
+  editordepartmentplanmoney
+} from '@/api/departmentPlanMoney/index'
+import { listdeptNoAuth } from '@/api/system/department'
+
+export default {
+  name: 'DepartmentPlanMoney',
+  data() {
+    return {
+      loading: false,
+      submitLoading: false,
+      tableData: [],
+      departments: [],
+      pagination: {
+        page: 1,
+        page_size: 10,
+        total: 0
+      },
+      searchForm: {
+        plan_department_id: '',
+        month: ''
+      },
+      dialogVisible: false,
+      dialogMode: 'add',
+      form: {
+        id: '',
+        plan_department_id: '',
+        month: '',
+        plan_money: null
+      },
+      formRules: {
+        plan_department_id: [{ required: true, message: '请选择预算部门', trigger: 'change' }],
+        month: [{ required: true, message: '请选择月份', trigger: 'change' }],
+        plan_money: [{ required: true, message: '请输入预算金额', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    dialogTitle() {
+      return this.dialogMode === 'add' ? '新增预算金额' : '编辑预算金额'
+    }
+  },
+  created() {
+    this.getDepartments()
+    this.getList()
+  },
+  methods: {
+    formatMoney(value) {
+      if (value === undefined || value === null || value === '') {
+        return '-'
+      }
+      return Number(value)
+        .toFixed(2)
+        .replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
+    },
+    async getDepartments() {
+      const res = await listdeptNoAuth()
+      this.departments = res || []
+    },
+    async getList() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+          ...this.searchForm
+        }
+        const res = await getdepartmentplanmoney(params, true)
+        this.tableData = res?.list?.data || []
+        this.pagination.total = res?.list?.total || 0
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.page = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        plan_department_id: '',
+        month: ''
+      }
+      this.pagination.page = 1
+      this.getList()
+    },
+    handleSizeChange(size) {
+      this.pagination.page_size = size
+      this.pagination.page = 1
+      this.getList()
+    },
+    handleCurrentChange(page) {
+      this.pagination.page = page
+      this.getList()
+    },
+    openDialog(mode, row) {
+      this.dialogMode = mode
+      if (mode === 'add') {
+        this.form = {
+          id: '',
+          plan_department_id: '',
+          month: '',
+          plan_money: null
+        }
+        this.dialogVisible = true
+      } else {
+        this.loadDetail(row.id)
+      }
+    },
+    async loadDetail(id) {
+      this.loading = true
+      try {
+        const res = await detaildepartmentplanmoney({ id }, true)
+        this.form = {
+          id: res.id,
+          plan_department_id: res.plan_department_id,
+          month: res.month,
+          plan_money: res.plan_money
+        }
+        this.dialogVisible = true
+      } finally {
+        this.loading = false
+      }
+    },
+    submitForm() {
+      this.$refs.formRef.validate(async(valid) => {
+        if (!valid) return
+        this.submitLoading = true
+        const payload = {
+          ...this.form
+        }
+        if (this.dialogMode === 'add') {
+          delete payload.id
+        }
+        try {
+          await editordepartmentplanmoney(payload)
+          this.$message.success('保存成功')
+          this.dialogVisible = false
+          this.getList()
+        } finally {
+          this.submitLoading = false
+        }
+      })
+    },
+    async handleDelete(row) {
+      await deldepartmentplanmoney({ id: row.id })
+      this.$message.success('删除成功')
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.department-plan-page {
+  padding: 20px;
+  .filter-card {
+    margin-bottom: 16px;
+    .filter-actions {
+      display: inline-flex;
+      gap: 8px;
+      margin-left: 12px;
+      vertical-align: middle;
+    }
+  }
+  .table-card__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .table-card__title {
+    font-weight: 600;
+  }
+  .pagination {
+    margin-top: 16px;
+    text-align: right;
+  }
+}
+</style>
+
diff --git a/src/views/system/workerComponents/department.vue b/src/views/system/workerComponents/department.vue
index a9ed63f..e9e8cd2 100644
--- a/src/views/system/workerComponents/department.vue
+++ b/src/views/system/workerComponents/department.vue
@@ -8,14 +8,15 @@
     </div>
 
     <div>
-      <Table :height="tableHeight" size="small" :data="departmentList" :columns="table"></Table>
+      <div id="departmentChart" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
     </div>
   </el-card>
 </template>
 
 <script>
 import { moneyFormatter } from "@/utils";
-import ElementResize from 'element-resize-detector'
+import ElementResize from 'element-resize-detector';
+import * as echarts from 'echarts';
 
 export default {
   name: "card3",
@@ -63,76 +64,8 @@ export default {
   },
   data() {
     return {
-      tableHeight: 200,
-      table: [
-        {
-          title: "科室",
-          width: 100,
-          key: "plan_department.name",
-          fixed: "left",
-          render:(h,{row}) => {
-            return h('span',{},row.plan_department?.name)
-          }
-        },
-        {
-          title: "执行情况",
-          minWidth: 160,
-          fixed: "right",
-          render: (h, { row }) => {
-            let m2 = row?.money_total_2 || 0;
-            let m1 = row?.money_total_1 || 0;
-            let m3 = row?.use_money_total || 0;
-            let per = 0;
-
-            if (m2 != 0) {
-              per = ((m3 / m2) * 100).toFixed(2);
-            } else if (m1 != 0) {
-              per = ((m3 / m1) * 100).toFixed(2);
-            }
-            return h("el-progress", {
-              props: {
-                percentage: Number(per),
-              },
-            });
-          },
-        },
-        {
-          title: "年初预算合计金额(元)",
-          width: 170,
-          align: "right",
-          key: "money_total_1",
-          render: (h, { row }) => {
-            return h("span", {}, moneyFormatter(row.money_total_1));
-          },
-        },
-        {
-          title: "调整后预算合计金额(元)",
-          width: 170,
-          align: "right",
-          key: "money_total_2",
-          render: (h, { row }) => {
-            return h("span", {}, moneyFormatter(row.money_total_2));
-          },
-        },
-        {
-          title: "年中专项资金(元)",
-          width: 170,
-          align: "right",
-          key: "middle_fund_total",
-          render: (h, { row }) => {
-            return h("span", {}, moneyFormatter(row.middle_fund_total));
-          },
-        },
-        {
-          title: "已使用(元)",
-          width: 120,
-          align: "right",
-          key: "use_money_total",
-          render: (h, { row }) => {
-            return h("span", {}, moneyFormatter(row.use_money_total));
-          },
-        },
-      ],
+      chartHeight: 300,
+      chart: null
     };
   },
   methods: {
@@ -142,9 +75,239 @@ export default {
       const elementResize = ElementResize({
         strategy:'scroll'
       })
-      elementResize.listenTo(cardDom,ele => {
-        this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
+      elementResize.listenTo(cardDom, ele => {
+        this.chartHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH;
+        if (this.chart) {
+          this.chart.resize();
+        }
       })
+    },
+    
+    // 初始化图表
+    initChart() {
+      const chartDom = document.getElementById('departmentChart');
+      if (!chartDom) return;
+      
+      this.chart = echarts.init(chartDom);
+      this.updateChart();
+    },
+    
+    // 更新图表数据
+    updateChart() {
+      if (!this.chart || !this.departmentList.length) return;
+      
+      // 准备数据
+      const departments = this.departmentList.map(item => item.plan_department?.name || '未知科室');
+      const initialBudget = this.departmentList.map(item => Number(item.money_total_1 || 0));
+      const adjustedBudget = this.departmentList.map(item => Number(item.money_total_2 || 0));
+      const middleFund = this.departmentList.map(item => Number(item.middle_fund_total || 0));
+      const usedAmount = this.departmentList.map(item => Number(item.use_money_total || 0));
+      
+      const option = {
+        backgroundColor: '#ffffff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(150,150,150,0.1)'
+            }
+          },
+          backgroundColor: 'rgba(50,50,50,0.95)',
+          borderColor: '#333',
+          borderWidth: 1,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          },
+          formatter: (params) => {
+            const dataIndex = params[0].dataIndex;
+            const row = this.departmentList[dataIndex];
+            
+            // 计算执行情况
+            let executionRate = 0;
+            const m2 = Number(row?.money_total_2 || 0);
+            const m1 = Number(row?.money_total_1 || 0);
+            const m3 = Number(row?.use_money_total || 0);
+            
+            if (m2 !== 0) {
+              executionRate = ((m3 / m2) * 100).toFixed(1);
+            } else if (m1 !== 0) {
+              executionRate = ((m3 / m1) * 100).toFixed(1);
+            }
+            
+            let result = `<div style="padding: 12px; min-width: 250px;">`;
+            result += `<div style="font-weight: bold; margin-bottom: 10px; color: #fff; border-bottom: 1px solid #666; padding-bottom: 6px;">${params[0].name}</div>`;
+            
+            // 显示所有数据项
+            params.forEach(param => {
+              result += `<div style="margin: 6px 0; color: #fff; font-size: 11px; display: flex; justify-content: space-between; align-items: center;">`;
+              result += `<span>${param.marker} ${param.seriesName}:</span>`;
+              result += `<span style="font-weight: bold; margin-left: 10px;">${moneyFormatter(param.value)}</span>`;
+              result += `</div>`;
+            });
+            
+            result += `<div style="margin-top: 10px; padding-top: 8px; border-top: 1px solid #666;">`;
+            result += `<span style="color: #5DADE2; font-weight: bold; font-size: 13px;">执行率: ${executionRate}%</span>`;
+            result += `</div>`;
+            result += `</div>`;
+            
+            return result;
+          }
+        },
+        legend: {
+          data: ['年初预算合计金额', '调整后预算合计金额', '年中专项资金', '已使用'],
+          top: 15,
+          right: 20,
+          textStyle: {
+            fontSize: 10,
+            color: '#666'
+          },
+          itemWidth: 10,
+          itemHeight: 6
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '20%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: departments,
+          axisLabel: {
+            rotate: 0,
+            fontSize: 10,
+            interval: 0,
+            color: '#666',
+            margin: 8
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#e0e0e0'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: 10,
+            color: '#999',
+            formatter: function(value) {
+              if (value >= 1000000) {
+                return (value / 1000000).toFixed(1) + 'M';
+              } else if (value >= 10000) {
+                return (value / 10000).toFixed(0) + '万';
+              }
+              return value;
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#f0f0f0',
+              type: 'dashed'
+            }
+          }
+        },
+        series: [
+          {
+            name: '年初预算合计金额',
+            type: 'bar',
+            data: initialBudget,
+            barWidth: '15%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#AED6F1' },
+                { offset: 1, color: '#85C1E9' }
+              ]),
+              borderRadius: [2, 2, 0, 0]
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#9FC5E8' },
+                  { offset: 1, color: '#7FB3D3' }
+                ])
+              }
+            }
+          },
+          {
+            name: '调整后预算合计金额',
+            type: 'bar',
+            data: adjustedBudget,
+            barWidth: '15%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#85C1E9' },
+                { offset: 1, color: '#5DADE2' }
+              ]),
+              borderRadius: [2, 2, 0, 0]
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#7FB3D3' },
+                  { offset: 1, color: '#5499C7' }
+                ])
+              }
+            }
+          },
+          {
+            name: '年中专项资金',
+            type: 'bar',
+            data: middleFund,
+            barWidth: '15%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#F7DC6F' },
+                { offset: 1, color: '#F4D03F' }
+              ]),
+              borderRadius: [2, 2, 0, 0]
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#F1C40F' },
+                  { offset: 1, color: '#D4AC0D' }
+                ])
+              }
+            }
+          },
+          {
+            name: '已使用',
+            type: 'bar',
+            data: usedAmount,
+            barWidth: '15%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#5499C7' },
+                { offset: 1, color: '#3498DB' }
+              ]),
+              borderRadius: [2, 2, 0, 0]
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#4A90C2' },
+                  { offset: 1, color: '#2E86C1' }
+                ])
+              }
+            }
+          }
+        ]
+      };
+      
+      this.chart.setOption(option);
     }
   },
   computed: {
@@ -153,9 +316,29 @@ export default {
         return this.getStatistic()?.statistic?.departmentList || [];
     },
   },
+  
+  watch: {
+    departmentList: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateChart();
+        });
+      },
+      deep: true
+    }
+  },
   created() {},
   mounted() {
     this.init();
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
   }
 };
 </script>
diff --git a/src/views/system/workerComponents/toDo.vue b/src/views/system/workerComponents/toDo.vue
index e79d1be..f8fa3bd 100644
--- a/src/views/system/workerComponents/toDo.vue
+++ b/src/views/system/workerComponents/toDo.vue
@@ -16,7 +16,7 @@
         :columns="table"
       ></Table>
 
-      <div
+      <!-- <div
         ref="todo-page"
         style="display: flex; justify-content: center; margin: 10px 0"
       >
@@ -32,7 +32,7 @@
             }
           "
         />
-      </div>
+      </div> -->
     </div>
   </el-card>
 </template>
@@ -204,16 +204,12 @@ export default {
     init() {
       let cardDom = document.getElementById("todo-card");
       let cardTitleH = 58;
-      let page = this.$refs["todo-page"];
       const elementResize = ElementResize({
         strategy: "scroll",
       });
       elementResize.listenTo(cardDom, (ele) => {
-        this.tableHeight =
-          cardDom.getBoundingClientRect().height -
-          40 -
-          cardTitleH -
-          page.getBoundingClientRect().height;
+        // 由于分页组件被注释掉了，直接计算表格高度
+        this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH;
       });
     },
   },
diff --git a/src/views/system/workerComponents/total.vue b/src/views/system/workerComponents/total.vue
index 0fc14b1..3a725aa 100644
--- a/src/views/system/workerComponents/total.vue
+++ b/src/views/system/workerComponents/total.vue
@@ -7,22 +7,49 @@
     </div>
     <div class="progress-card">
       <div class="progress-card-item">
-        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_1 || 0)}}</div>
-        <div class="progress-card-item__label">年初预算合计金额</div>
+        <div class="progress-icon blue">
+          <i class="el-icon-coin"></i>
+        </div>
+        <div class="progress-content">
+          <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_1 || 0)}}</div>
+          <div class="progress-card-item__label">年初预算合计金额</div>
+        </div>
       </div>
       <div class="progress-card-item">
-        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_2 || 0)}}</div>
-        <div class="progress-card-item__label">调整后预算合计金额</div>
+        <div class="progress-icon green">
+          <i class="el-icon-wallet"></i>
+        </div>
+        <div class="progress-content">
+          <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_2 || 0)}}</div>
+          <div class="progress-card-item__label">调整后预算合计金额</div>
+        </div>
       </div>
       <div class="progress-card-item">
-        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
-        <div class="progress-card-item__label">已支付金额</div>
+        <div class="progress-icon orange">
+          <i class="el-icon-money"></i>
+        </div>
+        <div class="progress-content">
+          <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
+          <div class="progress-card-item__label">已支付金额</div>
+        </div>
       </div>
-      <div class="progress-card-item">
-        <div class="progress-card-item__num">
-          {{toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0)}}%
+      <div class="progress-card-item execution-item">
+        <div class="progress-rate">
+          <div class="circular-progress">
+            <el-progress
+              type="circle"
+              :percentage="Number(toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0))"
+              :width="100"
+              :stroke-width="10"
+              :color="progressColors"
+              :show-text="false"
+            />
+            <div class="progress-center">
+              <div class="progress-percentage">{{ toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0) }}%</div>
+            </div>
+          </div>
+          <div class="progress-card-item__label">执行率</div>
         </div>
-        <div class="progress-card-item__label">执行率</div>
       </div>
     </div>
   </el-card>
@@ -73,7 +100,18 @@ export default {
       this.$emit('send-data',res)
     },
   },
-  computed: {},
+  computed: {
+    progressColors() {
+      // 根据图片样式，使用蓝色到橙色的渐变
+      return [
+        { color: '#409EFF', percentage: 0 },
+        { color: '#66B1FF', percentage: 25 },
+        { color: '#85C1E9', percentage: 50 },
+        { color: '#F39C12', percentage: 75 },
+        { color: '#E67E22', percentage: 100 }
+      ];
+    }
+  },
   created() {
     this.getStatistic();
   }
@@ -83,20 +121,98 @@ export default {
 <style scoped lang="scss">
 .progress-card {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 15px;
 
   &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
-    flex: 1;
+    flex: 0.8;
+
+    &.execution-item {
+      flex: 1.4;
+    }
+
+    .progress-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 10px;
+
+      i {
+        font-size: 24px;
+        color: white;
+      }
+
+      &.blue {
+        background: linear-gradient(135deg, #409EFF, #66B1FF);
+      }
+
+      &.green {
+        background: linear-gradient(135deg, #67C23A, #85CE61);
+      }
+
+      &.orange {
+        background: linear-gradient(135deg, #E6A23C, #EEBE77);
+      }
+    }
+
+    .progress-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .progress-rate {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .circular-progress {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 10px;
+
+        .progress-center {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .progress-percentage {
+            font-size: 16px;
+            font-weight: 700;
+            color: #303133;
+            line-height: 1;
+          }
+        }
+      }
+    }
 
     &__label {
-      font-size: 14px;
+      font-size: 12px;
+      color: #909399;
+      margin-top: 5px;
+      line-height: 1.2;
     }
 
     &__num {
-      font-size: 20px;
+      font-size: 16px;
       font-weight: 600;
-
-      padding: 6px 0;
+      color: #303133;
+      margin-bottom: 5px;
     }
   }
 }