From 9d408b549b899631db29af772ee4e96f4c49a91c Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期四, 25 十二月 2025 15:53:56 +0800
Subject: [PATCH] 相关推送

---
 src/views/project/indexstatistics/index.vue | 1764 +++++++++++++++++++++++++++-------------------------------
 1 files changed, 826 insertions(+), 938 deletions(-)

diff --git a/src/views/project/indexstatistics/index.vue b/src/views/project/indexstatistics/index.vue
index 7c1a8e9..5f24a80 100644
--- a/src/views/project/indexstatistics/index.vue
+++ b/src/views/project/indexstatistics/index.vue
@@ -1,40 +1,38 @@
 <template>
-  <div class="app-container" style="background-color: #f2f2f2; color: #fff">
-    <el-card shadow="always" style="color: #566f94">
-      <el-row :gutter="8">
-        <el-col :span="8">
+  <div class="app-container">
+    <!-- 绛涢�夋潯浠跺崱鐗� -->
+    <el-card class="filter-card">
+      <el-row :gutter="16">
+        <el-col :xs="24" :sm="8" :md="6">
           <el-date-picker
             v-model="selecttime"
             type="monthrange"
             range-separator="鑷�"
-            start-placeholder="寮�濮嬫湀浠斤紙榛樿鏈勾搴︼級"
+            start-placeholder="寮�濮嬫湀浠�"
             end-placeholder="缁撴潫鏈堜唤"
+            style="width: 100%"
             value-format="yyyy-MM-dd"
             @change="getTimeList"
-            style="width: 100%"
-          >
-          </el-date-picker>
+          />
         </el-col>
-        <el-col :span="6">
+        <el-col :xs="24" :sm="8" :md="6">
           <el-select
-            style="width: 100%"
             v-model="reportervalue"
             placeholder="璇烽�夋嫨鎶ュ憡浜�"
+            style="width: 100%"
           >
             <el-option
               v-for="item in reportlist"
               :key="item.index"
               :label="item.reportername"
               :value="item.reporterno"
-            >
-            </el-option>
+            />
           </el-select>
         </el-col>
-        <el-col :span="6">
+        <el-col :xs="24" :sm="8" :md="6">
           <el-select
             v-model="city"
             placeholder="璇烽�夋嫨鎵�灞炲湴甯�"
-            @change="getprovincedata"
             style="width: 100%"
           >
             <el-option
@@ -42,561 +40,382 @@
               :key="item.value"
               :label="item.label"
               :value="item.value"
-            >
-            </el-option>
+            />
           </el-select>
         </el-col>
-        <el-col :span="2">
-          <el-button
-            type="primary"
-            @click="selectdatas"
-            icon="el-icon-search"
-            style="margin-left: 10px"
-            >鎼滅储</el-button
-          >
+        <el-col :xs="24" :sm="24" :md="6">
+          <div class="action-buttons">
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              @click="selectdatas"
+            >
+              鎼滅储
+            </el-button>
+            <el-button icon="el-icon-refresh" @click="resetFilters">
+              閲嶇疆
+            </el-button>
+          </div>
         </el-col>
       </el-row>
     </el-card>
-    <div style="display: flex;">
-      <div style="width: 76%;">
-        <el-row
-          :gutter="10"
-          style="font-size: 18px; font-weight: bold;  margin-top: 10px"
-        >
-          <el-col :span="6">
-            <router-link
-              :to="{
-                name: 'Donatebaseinfo',
-                params: {
-                  starttime: starttime,
-                  endtime: endtime,
-                  tempRecordState: '',
-                  reporterno: reportervalue,
-                  shen: searchAddress.shen,
-                  shi: searchAddress.shi,
-                  qu: searchAddress.qu,
-                  city: city
-                }
-              }"
-            >
-              <!-- params: {
-              tempRecordState: 0,
-            }, -->
-              <!-- @click="tobaseinfo0" -->
-              <el-card shadow="always" style="color: #566f94">
-                <svg-icon icon-class="user" />&nbsp;&nbsp; 娼滃湪鎹愮尞绱锛歿{
-                  donateNumData.numberOfDonate
-                }}&nbsp; 渚�
-              </el-card>
-            </router-link>
-          </el-col>
-          <el-col :span="6">
-            <router-link
-              :to="{
-                name: 'Medicalevaluation',
-                params: {
-                  starttime: starttime,
-                  endtime: endtime,
-                  tempRecordState: '',
-                  reporterno: reportervalue,
-                  shen: searchAddress.shen,
-                  shi: searchAddress.shi,
-                  qu: searchAddress.qu,
-                  city: city
-                }
-              }"
-            >
-              <el-card
-                shadow="always"
-                style="color: #566f94"
-                @click="Tomedicalevalua"
-              >
-                <svg-icon icon-class="tool" />&nbsp;&nbsp; 瀹屾垚鍖诲璇勪及绱锛歿{
-                  donateNumData.numberOfMedicalEvaluation
-                }}&nbsp; 渚�
-              </el-card>
-            </router-link>
-          </el-col>
-          <el-col :span="6">
-            <router-link
-              :to="{
-                name: 'Relativesconfirmation',
-                params: {
-                  starttime: starttime,
-                  endtime: endtime,
-                  tempRecordState: '',
-                  reporterno: reportervalue,
-                  shen: searchAddress.shen,
-                  shi: searchAddress.shi,
-                  qu: searchAddress.qu,
-                  city: city
-                }
-              }"
-            >
-              <el-card shadow="always" style="color: #566f94">
-                <svg-icon icon-class="checkbox" />&nbsp;&nbsp;
-                瀹屾垚浜插睘纭绱锛歿{
-                  donateNumData.numberOfRelativeConfirmation
-                }}&nbsp; 渚�
-              </el-card>
-            </router-link>
-          </el-col>
-          <el-col :span="6">
-            <router-link
-              :to="{
-                name: 'EthicalReview',
-                params: {
-                  starttime: starttime,
-                  endtime: endtime,
-                  tempRecordState: '',
-                  reporterno: reportervalue,
-                  shen: searchAddress.shen,
-                  shi: searchAddress.shi,
-                  qu: searchAddress.qu,
-                  city: city
-                }
-              }"
-            >
-              <el-card shadow="always" style="color: #566f94">
-                <svg-icon icon-class="education" />&nbsp;&nbsp;
-                瀹屾垚浼︾悊瀹℃煡绱锛歿{
-                  donateNumData.numberOfEthicalReview
-                }}&nbsp; 渚�
-              </el-card>
-            </router-link>
-          </el-col>
-        </el-row>
-        <el-row
-          :gutter="10"
-          style="margin-top: 10px; font-size: 18px;  font-weight: bold"
-        >
-          <el-col :span="6">
-            <el-card shadow="always" style="color: #566f94">
-              <svg-icon icon-class="druid" />&nbsp;&nbsp; 瀹屾垚鍣ㄥ畼鍒嗛厤绱锛歿{
-                donateNumData.numberOfDonatePeople
-              }}&nbsp; 涓�
-              <!-- donateNumData.numberOfOrgans -->
-            </el-card>
-          </el-col>
-          <el-col :span="6">
-            <router-link
-              :to="{
-                name: 'Donationwitness',
-                params: {
-                  starttime: starttime,
-                  endtime: endtime,
-                  tempRecordState: '',
-                  reporterno: reportervalue,
-                  shen: searchAddress.shen,
-                  shi: searchAddress.shi,
-                  qu: searchAddress.qu,
-                  city: city
-                }
-              }"
-            >
-              <el-card shadow="always" style="color: #566f94">
-                <svg-icon icon-class="job" />&nbsp;&nbsp; 瀹屾垚鑾峰彇瑙佽瘉绱锛歿{
-                  donateNumData.numberOfWitness
-                }}&nbsp; 渚�
-              </el-card>
-            </router-link>
-          </el-col>
-          <el-col :span="6">
-            <router-link
-              :to="{
-                name: 'Donatefinish',
-                params: {
-                  starttime: starttime,
-                  endtime: endtime,
-                  tempRecordState: '',
-                  reporterno: reportervalue,
-                  shen: searchAddress.shen,
-                  shi: searchAddress.shi,
-                  qu: searchAddress.qu,
-                  city: city
-                }
-              }"
-            >
-              <el-card shadow="always" style="color: #566f94">
-                <svg-icon icon-class="lock" />&nbsp;&nbsp; 鎹愮尞瀹屾垚绱锛歿{
-                  donateNumData.numberOfCompletion
-                }}&nbsp; 渚�
-              </el-card>
-            </router-link>
-          </el-col>
-          <el-col :span="6">
-            <router-link
-              @click.native="closeBaseInfoTab"
-              :to="{
-                name: 'Donatebaseinfo',
-                params: {
-                  starttime: starttime,
-                  endtime: endtime,
-                  tempRecordState: 99,
-                  reporterno: reportervalue,
-                  shen: searchAddress.shen,
-                  shi: searchAddress.shi,
-                  qu: searchAddress.qu,
-                  city: city
-                }
-              }"
-            >
-              <el-card shadow="always" style="color: #566f94">
-                <svg-icon icon-class="lock" />&nbsp;&nbsp; 鎹愮尞缁堟绱锛歿{
-                  donateNumData.numberOfTerminated
-                }}&nbsp; 渚�
-              </el-card>
-            </router-link>
-          </el-col>
-        </el-row>
-        <el-row style="margin-top: 10px; " :gutter="5">
-          <el-col :span="12">
-            <el-card
-              shadow="always"
-              style="padding: 0; font-weight: bold; height: 640px"
-              ref="statisticsCard"
-            >
-              <el-row style="margin-bottom: 20px">
-                <span style="font-size: 18px; color: #566f94; font-weight: bold"
-                  >鏈勾搴︽寚鏍囨暟鎹垎鏋�</span
-                >
-              </el-row>
-              <el-row :gutter="3">
-                <el-col :span="8" style="text-align: center">
-                  <el-card
-                    shadow="always"
-                    style="padding: 0; margin: 0; width: 100%; color: #566f94"
-                  >
-                    鍣ㄥ畼鎹愮尞杞寲鐜�<br />
-                    {{ (qualirtData.donateTransferRate * 100).toFixed(2) }}%
-                  </el-card>
-                </el-col>
-                <el-col :span="8" style="text-align: center">
-                  <el-card
-                    shadow="always"
-                    style="padding: 0; margin: 0; width: 100%; color: #566f94"
-                  >
-                    骞冲潎鍣ㄥ畼浜у嚭鐜�<br />
-                    {{ (qualirtData.organProductionRate * 100).toFixed(2) }}%
-                  </el-card>
-                </el-col>
-                <el-col :span="8" style="text-align: center">
-                  <el-card
-                    shadow="always"
-                    style="padding: 0; margin: 0; width: 100%; color: #566f94"
-                  >
-                    鑾峰彇鍣ㄥ畼鍒╃敤鐜�<br />
-                    {{ (qualirtData.organUsedRate * 100).toFixed(2) }}%
-                  </el-card>
-                </el-col>
-              </el-row>
-              <el-row :gutter="3" style="margin-top: 5px">
-                <el-col :span="24" style="text-align: center">
-                  <el-card shadow="always" style="padding: 0; color: #566f94">
-                    <el-row> 鍣ㄥ畼鎹愮尞鍒嗙被鍗犳瘮 </el-row>
-                    <el-row :gutter="10" style="margin-top: 10px">
-                      <el-col :span="8" style="text-align: center"
-                        >DBD:
-                        {{ (qualirtData.dbddonateRate * 100).toFixed(2) }}%
-                      </el-col>
-                      <el-col :span="8" style="text-align: center">
-                        DCD:
-                        {{ (qualirtData.dcddonateRate * 100).toFixed(2) }}%
-                      </el-col>
-                      <el-col :span="8" style="text-align: center">
-                        DBCD:
-                        {{ (qualirtData.dbcddonateRate * 100).toFixed(2) }}%
-                      </el-col>
-                    </el-row>
-                  </el-card>
-                </el-col>
-              </el-row>
-              <el-row :gutter="3" style="margin-top: 5px">
-                <el-col :span="12" style="text-align: center; color: #566f94">
-                  <el-card
-                    shadow="always"
-                    style="padding: 0; margin: 0; width: 100%; color: #566f94"
-                  >
-                    <el-row>
-                      <span style="font-size: 14px"> 鑾峰彇鍓嶆椿妫�鐜�</span>
-                    </el-row>
-                    {{
-                      (qualirtData.organBeforeGetCheckRate * 100).toFixed(2)
-                    }}%
-                  </el-card>
-                </el-col>
-                <el-col :span="12" style="text-align: center">
-                  <el-card
-                    shadow="always"
-                    style="padding: 0; margin: 0; width: 100%; color: #566f94"
-                  >
-                    <el-row>
-                      <span style="font-size: 14px">鑾峰彇鍚庢椿妫�鐜�</span>
-                    </el-row>
-                    {{ (qualirtData.organAfterGetCheckRate * 100).toFixed(2) }}%
-                  </el-card>
-                </el-col>
-              </el-row>
-              <el-row :gutter="3" style="margin-top: 5px">
-                <el-col :span="12" style="text-align: center">
-                  <el-card
-                    shadow="always"
-                    style="padding: 0; margin: 0; width: 100%; color: #566f94"
-                  >
-                    <span style="font-size: 14px">杈圭紭渚涘櫒瀹樻瘮鐜�</span><br />
-                    {{ (qualirtData.marginOrganRate * 100).toFixed(2) }}%
-                  </el-card>
-                </el-col>
-                <el-col :span="12" style="text-align: center">
-                  <el-card
-                    shadow="always"
-                    style="padding: 0; margin: 0; width: 100%; color: #566f94"
-                  >
-                    <span style="font-size: 14px"
-                      >鍣ㄥ畼淇濆瓨娑茬梾鍘熻弻鍩瑰吇闃虫�х巼</span
-                    ><br />
-                    {{ (qualirtData.germPositiveRate * 100).toFixed(2) }}%
-                  </el-card>
-                </el-col>
-              </el-row>
-              <el-row :gutter="3" style="margin-top: 5px">
-                <el-col :span="24" style="text-align: center">
-                  <el-card shadow="always" style="padding: 0; color: #566f94">
-                    <el-row> 绉绘鍣ㄥ畼鍘熷彂鎬ф棤鍔熻兘鍙戠敓鐜� </el-row>
-                    <el-row :gutter="10" style="margin-top: 10px">
-                      <el-row>
-                        <el-col :span="6" style="text-align: center">
-                          鎬诲彂鐢熺巼<br />
-                          {{ (qualirtData.totalPNFRate * 100).toFixed(2) }}%
-                        </el-col>
-                        <el-col :span="6" style="text-align: center">
-                          DBD<br />
-                          {{ (qualirtData.dbdpnfrate * 100).toFixed(2) }}%
-                        </el-col>
-                        <el-col :span="6" style="text-align: center">
-                          DCD<br />
-                          {{ (qualirtData.dcdpnfrate * 100).toFixed(2) }}%
-                        </el-col>
-                        <el-col :span="6" style="text-align: center">
-                          DBCD<br />
-                          {{ (qualirtData.dbcdpnfrate * 100).toFixed(2) }}%
-                        </el-col>
-                      </el-row>
-                    </el-row>
-                  </el-card>
-                </el-col>
-              </el-row>
-              <el-row :gutter="3" style="margin-top: 5px">
-                <el-col :span="24" style="text-align: center">
-                  <el-card shadow="always" style="padding: 0; color: #566f94">
-                    <el-row> 绉绘鍣ㄥ畼鏈悗鍔熻兘寤惰繜鎬ф仮澶嶅彂鐢熺巼 </el-row>
-                    <el-row :gutter="10" style="margin-top: 10px">
-                      <el-row>
-                        <el-col :span="6" style="text-align: center">
-                          鎬诲彂鐢熺巼<br />{{
-                            (qualirtData.totalDGFRate * 100).toFixed(2)
-                          }}%
-                        </el-col>
-                        <el-col :span="6" style="text-align: center">
-                          DBD<br />{{
-                            (qualirtData.dbddgfrate * 100).toFixed(2)
-                          }}%
-                        </el-col>
-                        <el-col :span="6" style="text-align: center">
-                          DCD<br />{{
-                            (qualirtData.dcddgfrate * 100).toFixed(2)
-                          }}%
-                        </el-col>
-                        <el-col :span="6" style="text-align: center">
-                          DBCD<br />{{
-                            (qualirtData.dbcddgfrate * 100).toFixed(2)
-                          }}%
-                        </el-col>
-                      </el-row>
-                    </el-row>
-                  </el-card>
-                </el-col>
-              </el-row>
-            </el-card>
-          </el-col>
-          <el-col :span="12">
-            <el-card shadow="always" style="height: 640px" ref="organChartCard">
-              <OrganNumChart :cdata="organData" />
-            </el-card>
-            <!-- <el-col :span="7">
-        <el-card shadow="always" style="height: 640px" ref="orgNumberCard">
-          <el-row style="margin-bottom: 20px">
-            <el-col :span="14">
-              <span style="font-size: 18px; color: #566f94; font-weight: bold"
-                >鍚勫湴鍖哄尰闄㈡渚嬫暟鎹�</span
-              >
-            </el-col>
-           
-          </el-row>
-          <el-row>
-           
-          </el-row>
-          <dv-scroll-board
-            :config="config"
-            style="width: 100%; height: 540px"
-          />
-        </el-card>
-      </el-col> -->
-          </el-col>
-        </el-row>
-      </div>
-      <div style="width: 24%; margin-top: 10px; padding-left: 10px; ">
-        <el-card
-          class="box-card"
-          style="padding: 0; font-weight: bold; height: 780px; "
-        >
-          <div slot="header" class="clearfix">
-            <span style="font-size: 18px; color: #566f94; font-weight: bold"
-              >娑堟伅鍒楄〃</span
-            >
-            <el-button
-              v-if="ReadState == 1"
-              style="float: right; padding: 6px "
-              type="danger"
-              plain
-              @click="FnReadState"
-              >鏌ョ湅鏈娑堟伅</el-button
-            >
-            <el-button
-              v-else
-              style="float: right; padding: 6px "
-              type="info"
-              plain
-              @click="FnReadState"
-              >鏌ョ湅宸茶娑堟伅</el-button
-            >
-          </div>
-          <div style="height: 606px;overflow: auto;">
-            <el-table :data="tableData" v-loading="loading" style="width: 100%">
-              <el-table-column label="閫氱煡鏃ユ湡">
-                <template slot-scope="scope">
-                  <i class="el-icon-time"></i>
-                  <span style="margin-left: 10px">{{
-                    scope.row.createTime
-                  }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="姒傝">
-                <template slot-scope="scope">
-                  <el-popover trigger="hover" placement="top">
-                    <div class="dialog-class" style="margin: 20px;">
-                      <div>{{ scope.row.messagecontent }}</div>
-                      <div style=" height: 100px;margin-top: 40px;">
-                        <span>{{ "澶勭悊浜猴細" + scope.row.sendusername }}</span>
-                        <div>{{ "澶勭悊鏃堕棿锛�" + scope.row.updateTime }}</div>
-                      </div>
-                      <div style="text-align: right; ; margin: 0">
-                        <el-button
-                          type="primary"
-                          size="mini"
-                          @click="clickMessageDetailed(scope.row)"
-                          >纭畾</el-button
-                        >
-                      </div>
-                    </div>
-                    <div slot="reference" class="name-wrapper">
-                      <el-tag size="medium">{{
-                        scope.row.messagetitle
-                      }}</el-tag>
-                    </div>
-                  </el-popover>
-                </template>
-              </el-table-column>
-              <el-table-column label="鐘舵��" align="center" prop="paystatus">
-                <template slot-scope="scope">
-                  <dict-tag
-                    :options="dict.type.sys_messagestatus"
-                    :value="scope.row.isread"
-                  />
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
 
-          <pagination
-            v-show="total > 0"
-            :total="total"
-            :page.sync="searchData.pageNum"
-            :limit.sync="searchData.pageSize"
-            @pagination="GetMessageList"
-          />
-        </el-card>
+    <!-- 鏁版嵁姒傝鍖哄煙 -->
+    <el-card class="overview-card">
+      <template #header>
+        <div class="card-header">
+          <span class="header-title">鏁版嵁姒傝</span>
+          <span class="header-subtitle">瀹炴椂缁熻鎸囨爣</span>
+        </div>
+      </template>
+
+      <el-row :gutter="16">
+        <!-- 绗竴琛岀粺璁″崱鐗� -->
+        <el-col :xs="12" :sm="6" :md="3">
+          <router-link
+            :to="{
+              name: 'Donatebaseinfo',
+              params: { ...routeParams }
+            }"
+            class="stat-card-link"
+          >
+            <el-card class="stat-card" shadow="hover">
+              <div class="stat-content">
+                <div class="stat-icon" style="background-color: #409EFF;">
+                  <svg-icon icon-class="user" />
+                </div>
+                <div class="stat-info">
+                  <div class="stat-value">
+                    {{ donateNumData.numberOfDonate }}
+                  </div>
+                  <div class="stat-title">涓婃姤妗堜緥绱</div>
+                </div>
+              </div>
+            </el-card>
+          </router-link>
+        </el-col>
+
+        <el-col :xs="12" :sm="6" :md="3">
+          <router-link
+            :to="{
+              name: 'Medicalevaluation',
+              params: { ...routeParams }
+            }"
+            class="stat-card-link"
+          >
+            <el-card class="stat-card" shadow="hover">
+              <div class="stat-content">
+                <div class="stat-icon" style="background-color: #67C23A;">
+                  <svg-icon icon-class="tool" />
+                </div>
+                <div class="stat-info">
+                  <div class="stat-value">
+                    {{ donateNumData.numberOfMedicalEvaluation }}
+                  </div>
+                  <div class="stat-title">鎹愮尞妗堜緥绱</div>
+                </div>
+              </div>
+            </el-card>
+          </router-link>
+        </el-col>
+
+        <el-col :xs="12" :sm="6" :md="3">
+          <router-link
+            :to="{
+              name: 'Relativesconfirmation',
+              params: { ...routeParams }
+            }"
+            class="stat-card-link"
+          >
+            <el-card class="stat-card" shadow="hover">
+              <div class="stat-content">
+                <div class="stat-icon" style="background-color: #E6A23C;">
+                  <svg-icon icon-class="checkbox" />
+                </div>
+                <div class="stat-info">
+                  <div class="stat-value">
+                    {{ donateNumData.numberOfRelativeConfirmation }}
+                  </div>
+                  <div class="stat-title">渚涗綋杞繍绱</div>
+                </div>
+              </div>
+            </el-card>
+          </router-link>
+        </el-col>
+
+        <el-col :xs="12" :sm="6" :md="3">
+          <router-link
+            :to="{
+              name: 'EthicalReview',
+              params: { ...routeParams }
+            }"
+            class="stat-card-link"
+          >
+            <el-card class="stat-card" shadow="hover">
+              <div class="stat-content">
+                <div class="stat-icon" style="background-color: #F56C6C;">
+                  <svg-icon icon-class="education" />
+                </div>
+                <div class="stat-info">
+                  <div class="stat-value">
+                    {{ donateNumData.numberOfEthicalReview }}
+                  </div>
+                  <div class="stat-title">浜插睘纭绱</div>
+                </div>
+              </div>
+            </el-card>
+          </router-link>
+        </el-col>
+
+        <!-- 绗簩琛岀粺璁″崱鐗� -->
+        <el-col :xs="12" :sm="6" :md="3">
+          <el-card class="stat-card" shadow="hover">
+            <div class="stat-content">
+              <div class="stat-icon" style="background-color: #909399;">
+                <svg-icon icon-class="druid" />
+              </div>
+              <div class="stat-info">
+                <div class="stat-value">
+                  {{ donateNumData.numberOfDonatePeople }}
+                </div>
+                <div class="stat-title">瀹屾垚浼︾悊瀹℃煡绱</div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+
+        <el-col :xs="12" :sm="6" :md="3">
+          <router-link
+            :to="{
+              name: 'Donationwitness',
+              params: { ...routeParams }
+            }"
+            class="stat-card-link"
+          >
+            <el-card class="stat-card" shadow="hover">
+              <div class="stat-content">
+                <div class="stat-icon" style="background-color: #B37FEB;">
+                  <svg-icon icon-class="job" />
+                </div>
+                <div class="stat-info">
+                  <div class="stat-value">
+                    {{ donateNumData.numberOfWitness }}
+                  </div>
+                  <div class="stat-title">瀹屾垚鍣ㄥ畼鍒嗛厤绱</div>
+                </div>
+              </div>
+            </el-card>
+          </router-link>
+        </el-col>
+
+        <el-col :xs="12" :sm="6" :md="3">
+          <router-link
+            :to="{
+              name: 'Donatefinish',
+              params: { ...routeParams }
+            }"
+            class="stat-card-link"
+          >
+            <el-card class="stat-card" shadow="hover">
+              <div class="stat-content">
+                <div class="stat-icon" style="background-color: #FF85C0;">
+                  <svg-icon icon-class="lock" />
+                </div>
+                <div class="stat-info">
+                  <div class="stat-value">
+                    {{ donateNumData.numberOfCompletion }}
+                  </div>
+                  <div class="stat-title">瀹屾垚鑾峰彇绱</div>
+                </div>
+              </div>
+            </el-card>
+          </router-link>
+        </el-col>
+
+        <el-col :xs="12" :sm="6" :md="3">
+          <router-link
+            :to="{
+              name: 'Donatebaseinfo',
+              params: { ...routeParams, terminationcase: 1 }
+            }"
+            class="stat-card-link"
+          >
+            <el-card class="stat-card" shadow="hover">
+              <div class="stat-content">
+                <div class="stat-icon" style="background-color: #5DC8EF;">
+                  <svg-icon icon-class="lock" />
+                </div>
+                <div class="stat-info">
+                  <div class="stat-value">
+                    {{ donateNumData.numberOfTerminated }}
+                  </div>
+                  <div class="stat-title">鎹愮尞缁堟绱</div>
+                </div>
+              </div>
+            </el-card>
+          </router-link>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 鎸囨爣鍒嗘瀽鍖哄煙 -->
+    <el-row :gutter="16" class="analysis-section">
+      <el-col :xs="24" :lg="12">
+        <el-card class="chart-card">
+          <template #header>
+            <div class="card-header">
+              <span>鎸囨爣鏁版嵁鍒嗘瀽</span>
+              <router-link
+                :to="{
+                  name: 'DonationProcess',
+                  params: { ...routeParams, terminationcase: 1 }
+                }"
+              >
+                <el-button type="primary" size="small" round
+                  >鎹愮尞杩涚▼</el-button
+                >
+              </router-link>
+            </div>
+          </template>
+<div class="metrics-wrapper">
+  <div class="metrics-grid">
+    <div class="metric-item">
+      <div class="metric-title">鍣ㄥ畼鎹愮尞杞寲鐜�</div>
+      <div class="metric-value">
+        {{ (qualirtData.donateTransferRate * 100).toFixed(2) }}%
       </div>
     </div>
+
+    <div class="metric-item">
+      <div class="metric-title">骞冲潎鍣ㄥ畼浜у嚭鐜�</div>
+      <div class="metric-value">
+        {{ (qualirtData.organProductionRate * 100).toFixed(2) }}%
+      </div>
+    </div>
+
+    <div class="metric-item">
+      <div class="metric-title">鑾峰彇鍣ㄥ畼鍒╃敤鐜�</div>
+      <div class="metric-value">
+        {{ (qualirtData.organUsedRate * 100).toFixed(2) }}%
+      </div>
+    </div>
+
+    <div class="metric-item full-width">
+      <div class="metric-title">鍣ㄥ畼鎹愮尞鍒嗙被鍗犳瘮</div>
+      <div class="metric-breakdown">
+        <span
+          >DBD:
+          {{ (qualirtData.dbddonateRate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DCD:
+          {{ (qualirtData.dcddonateRate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DBCD:
+          {{ (qualirtData.dbcddonateRate * 100).toFixed(2) }}%</span
+        >
+      </div>
+    </div>
+
+    <div class="metric-item">
+      <div class="metric-title">鑾峰彇鍓嶆椿妫�鐜�</div>
+      <div class="metric-value">
+        {{ (qualirtData.organBeforeGetCheckRate * 100).toFixed(2) }}%
+      </div>
+    </div>
+
+    <div class="metric-item">
+      <div class="metric-title">鑾峰彇鍚庢椿妫�鐜�</div>
+      <div class="metric-value">
+        {{ (qualirtData.organAfterGetCheckRate * 100).toFixed(2) }}%
+      </div>
+    </div>
+
+    <div class="metric-item">
+      <div class="metric-title">杈圭紭渚涘櫒瀹樻瘮鐜�</div>
+      <div class="metric-value">
+        {{ (qualirtData.marginOrganRate * 100).toFixed(2) }}%
+      </div>
+    </div>
+
+    <div class="metric-item">
+      <div class="metric-title">鍣ㄥ畼淇濆瓨娑茬梾鍘熻弻鍩瑰吇闃虫�х巼</div>
+      <div class="metric-value">
+        {{ (qualirtData.germPositiveRate * 100).toFixed(2) }}%
+      </div>
+    </div>
+
+    <div class="metric-item full-width">
+      <div class="metric-title">绉绘鍣ㄥ畼鍘熷彂鎬ф棤鍔熻兘鍙戠敓鐜�</div>
+      <div class="metric-breakdown">
+        <span
+          >鎬�: {{ (qualirtData.totalPNFRate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DBD: {{ (qualirtData.dbdpnfrate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DCD: {{ (qualirtData.dcdpnfrate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DBCD: {{ (qualirtData.dbcdpnfrate * 100).toFixed(2) }}%</span
+        >
+      </div>
+    </div>
+
+    <div class="metric-item full-width">
+      <div class="metric-title">绉绘鍣ㄥ畼鏈悗鍔熻兘寤惰繜鎬ф仮澶嶅彂鐢熺巼</div>
+      <div class="metric-breakdown">
+        <span
+          >鎬�: {{ (qualirtData.totalDGFRate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DBD: {{ (qualirtData.dbddgfrate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DCD: {{ (qualirtData.dcddgfrate * 100).toFixed(2) }}%</span
+        >
+        <span
+          >DBCD: {{ (qualirtData.dbcddgfrate * 100).toFixed(2) }}%</span
+        >
+      </div>
+    </div>
+  </div>
+</div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24" :lg="12">
+        <el-card class="chart-card">
+          <template #header>
+            <div class="card-header">
+              <span>鍣ㄥ畼鏁伴噺缁熻</span>
+            </div>
+          </template>
+          <OrganNumChart :cdata="organData" :CommonOrgan="CommonOrgan" />
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import {
-  listMedicalevaluation,
-  listnewMedicalevaluation, //閫氳繃VO鑾峰彇
-  getMedicalevaluation,
-  delMedicalevaluation,
-  addMedicalevaluation,
-  updateMedicalevaluation,
-  exportMedicalevaluation
-} from "@/api/project/medicalevaluation";
-import {
-  listRelativesconfirmation,
-  getRelativesconfirmation,
-  delRelativesconfirmation,
-  addRelativesconfirmation,
-  updateRelativesconfirmation,
-  listnewRelativesconfirmation,
-  // exportRelativesconfirmation,
-  updatedonatorno,
-  updateDonateNumber,
-  downloadconfirmationinfo
-} from "@/api/project/relativesconfirmation";
-import {
-  listEthicalreviewopinions,
-  getEthicalreviewopinions,
-  delEthicalreviewopinions,
-  addEthicalreviewopinions,
-  updateEthicalreviewopinions,
-  listnewEthicalreviewopinions
-} from "@/api/project/ethicalreviewopinions";
-import {
-  getByInfoId,
-  listDonationwitness,
-  getDonationwitness,
-  delDonationwitness,
-  addDonationwitness,
-  updateDonationwitness,
-  listnewDonationwitness,
-  downloadwitnessinfo
-} from "@/api/project/donationwitness";
-import {
-  getDonatecompletioninfo,
-  listnewDonatecompletioninfo,
-  addDonatecompletioninfo,
-  updateDonatecompletioninfo,
-  listDonatecompletioninfo,
-  downloadcompletioninfo
-} from "@/api/project/donatecompletioninfo";
-
-import { listOrganallocation } from "@/api/project/organallocation";
-
-import RankChart from "./components/rankbarchart";
-import OrganNumChart from "./components/organnumchart";
-import { listDonatebaseinfo } from "@/api/project/donatebaseinfo";
-import dayjs from "dayjs";
-import {
-  getOrgansQuality,
-  getAllOrganInfo,
-  getDonateNumber,
-  getcountByRecordState,
-  getOrgansOfHospital,
-  getNumberOfOrgan,
-  getOrgansOfHospitalByMonth,
-  getDonateorganSum
-} from "@/api/project/donateorgan";
 import { getUserProfile } from "@/api/system/user";
+import { listDonatebaseinfo } from "@/api/project/donatebaseinfo";
+import { listnewMedicalevaluation } from "@/api/project/medicalevaluation";
+import { listnewRelativesconfirmation } from "@/api/project/relativesconfirmation";
+import { listnewEthicalreviewopinions } from "@/api/project/ethicalreviewopinions";
+import { listOrganallocation } from "@/api/project/organallocation";
+import { listnewDonationwitness } from "@/api/project/donationwitness";
+import { listnewDonatecompletioninfo } from "@/api/project/donatecompletioninfo";
+import {
+  getDonateorganSum,
+  getOrgansOfHospitalByMonth,
+  getOrgansQuality
+} from "@/api/project/donateorgan";
+import OrganNumChart from "./components/organnumchart";
+import dayjs from "dayjs";
 import {
   listSystemmessageList,
   listSystemmessageCount,
@@ -617,7 +436,6 @@
   name: "home",
   dicts: ["sys_messagestatus"],
   components: {
-    RankChart,
     OrganNumChart,
     Li_area_select
   },
@@ -625,13 +443,13 @@
   data() {
     return {
       city: "",
-      reportno: "",
-      selecttime: [ new Date(new Date().getFullYear(), 0),new Date()],
-      year: "閫夋嫨骞翠唤",
-      isloading: false,
-      maxHeight: 0,
+      reportervalue: "",
+      selecttime: [new Date(new Date().getFullYear(), 0), new Date()],
+      starttime: dayjs().format("YYYY-01-01 00:00:00"),
+      endtime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+
       provinceData: [
-        { label: "鍏ㄩ儴", value: "" },
+        { label: "鍏ㄩ儴鍦板競", value: "" },
         { label: "鏉窞甯�", value: "1" },
         { label: "瀹佹尝甯�", value: "2" },
         { label: "娓╁窞甯�", value: "3" },
@@ -644,108 +462,136 @@
         { label: "鍙板窞甯�", value: "A" },
         { label: "涓芥按甯�", value: "B" }
       ],
-      ReadState: 1,
-      searchData: {
-        del_flag: 0,
-        receiveuserno: "",
-        isread: null,
-        pageNum: 1,
-        pageSize: 10
-      },
-      total: 0,
-      loading: false,
-      value: "",
-      userID: "",
-      //鏃堕棿閫夐」
-      timeoption: "",
-      //璧峰鏃堕棿
-      starttime: this.$moment().format("YYYY-01-01 00:00:00"),
-      //缁撴潫鏃堕棿
-      endtime: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
+
+      reportlist: [],
 
       organData: [
         {
           key: "heart",
           name: "蹇冭剰",
           value: 0,
+          value1: 0,
           code: "C38"
         },
         {
           key: "fullLiver",
-          name: "鍏ㄨ倽",
+          name: "鑲濊剰",
           value: 0,
+          value1: 0,
+
           code: "C22"
         },
         {
-          key: "leftLiver",
-          name: "宸﹁倽",
+          key: "Lefthalfliver",
+          name: "宸﹀崐鑲�",
           value: 0,
+          value1: 0,
+
           code: "C22L"
         },
         {
-          key: "rightLiver",
-          name: "鍙宠倽",
+          key: "Leftouterlobe",
+          name: "宸﹀鍙�",
           value: 0,
+          value1: 0,
+
+          code: "C22L0"
+        },
+        {
+          key: "Righthalfliver",
+          name: "鍙冲崐鑲�",
+          value: 0,
+          value1: 0,
+
           code: "C22R"
         },
+        {
+          key: "RML",
+          name: "鍙充笁鍙�",
+          value: 0,
+          value1: 0,
+
+          code: "C22R0"
+        },
+
         {
           key: "leftRenal",
           name: "宸﹁偩",
           value: 0,
+          value1: 0,
+
           code: "C64L"
         },
         {
           key: "rightRenal",
           name: "鍙宠偩",
           value: 0,
+          value1: 0,
+
           code: "C64R"
         },
         {
           key: "fullLung",
           name: "鍏ㄨ偤",
           value: 0,
+          value1: 0,
+
           code: "C34"
         },
         {
           key: "leftLung",
           name: "宸﹁偤",
           value: 0,
+          value1: 0,
+
           code: "C34L"
         },
         {
           key: "rightLung",
           name: "鍙宠偤",
           value: 0,
+          value1: 0,
+
           code: "C34R"
         },
         {
           key: "",
           name: "灏忚偁",
           value: 0,
+          value1: 0,
+
           code: "C17"
         },
         {
           key: "",
           name: "鑳拌吅",
           value: 0,
+          value1: 0,
+
           code: "C25"
         },
         {
           key: "leftEye",
           name: "宸︾溂鑶�",
           value: 0,
+          value1: 0,
+
           code: "C69L"
         },
         {
           key: "rightEye",
           name: "鍙崇溂鑶�",
           value: 0,
+          value1: 0,
+
           code: "C69R"
         },
         {
           key: "",
           name: "鍏跺畠",
           value: 0,
+          value1: 0,
+
           code: "C01"
         }
         // {
@@ -776,54 +622,42 @@
           address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�"
         }
       ],
-      //缁熻鎸囨爣鏁版嵁
       qualirtData: {
         dbcddgfrate: 0,
-        //dbcd鎹愮尞鍒嗙被鍗犳瘮
         dbcddonateRate: 0,
         dbcdpnfrate: 0,
         dbddgfrate: 0,
-        //dbd鎹愮尞鍒嗙被鍗犳瘮
         dbddonateRate: 0,
         dbdpnfrate: 0,
         dcddgfrate: 0,
-        //dcd鎹愮尞鍒嗙被鍗犳瘮
-        dcddonateRate: 0,
         dcddonateRate: 0,
         dcdpnfrate: 0,
-        //鎹愮尞杞寲鐜�
         donateTransferRate: 0,
-        //鐥呭師鑿岄槼鎬х巼
         germPositiveRate: 0,
-        //杈圭紭鍣ㄥ畼姣旂巼
         marginOrganRate: 0,
         organAfterGetCheckRate: 0,
         organBeforeGetCheckRate: 0,
-        //鍣ㄥ畼浜у嚭鐜�
         organProductionRate: 0,
-        //鍣ㄥ畼鍒╃敤鐜�
         organUsedRate: 0,
         totalDGFRate: 0,
         totalPNFRate: 0
       },
-      //鎹愮尞绱鏁伴噺
+
       donateNumData: {
-        //鎹愮尞瀹屾垚鏁伴噺
         numberOfCompletion: 0,
-        //娼滃湪鎹愮尞鐧昏鏁伴噺
         numberOfDonate: 0,
-        //浼︾悊瀹℃煡鏁伴噺
         numberOfEthicalReview: 0,
-        //鍖诲璇勪及鏁伴噺
         numberOfMedicalEvaluation: 0,
-        //鍣ㄥ畼鍒嗛厤鏁伴噺
         numberOfOrgans: 0,
-        //瀹跺睘纭鏁伴噺
         numberOfRelativeConfirmation: 0,
-        //鑾峰彇瑙佽瘉鏁伴噺
         numberOfWitness: 0,
-        //缁堟鏁伴噺
-        numberOfTerminated: 0
+        numberOfTerminated: 0,
+        numberOfDonatePeople: 0
+      },
+
+      CommonOrgan: {
+        countSum: 1,
+        abandonCountSum: 0
       },
       config: {
         ...DEF_TABLE_CONFIG
@@ -846,343 +680,181 @@
     this.$nextTick(() => {
       this.GetDonateOrganNum();
       this.GetDonateOrganQuality();
-      //  this.GetDonateNum();
-      this.value = "鏉窞甯�";
       this.GetOrgDonateNumNew();
       this.GetOrgDonateNum();
     });
   },
   methods: {
-    getprovincedata() {},
+    // 鑾峰彇鐢ㄦ埛淇℃伅
     GetUser() {
-      this.loading = true;
       getUserProfile()
         .then(res => {
-          this.searchData.receiveuserno = res.data.userName;
-          this.GetMessageList();
+          this.userInfo = res.data;
         })
         .catch(error => {
-          this.$message.error(error);
+          console.error("鑾峰彇鐢ㄦ埛淇℃伅澶辫触:", error);
         });
     },
-    GetMessageList() {
-      listSystemmessageList(this.searchData).then(res => {
-        if (res.code == 200) {
-          this.tableData = res.rows;
-          this.loading = false;
-          this.total = res.total;
-        }
-      });
-    },
-    // 纭畾宸茶
-    clickMessageDetailed(item) {
-      let data = item;
-      if (data.isread == 0) {
-        item.isread = 1;
-        updateSystemmessage(item)
-          .then(res => {
-            this.$message.success("宸茶");
-            this.GetMessageList();
-          })
-          .catch(error => {});
-      } else {
-        this.$message.info("姝ゆ秷鎭凡璇�");
-      }
-    },
-    // 鍒囨崲璇诲彇鐘舵��
-    FnReadState() {
-      if (this.ReadState == 1) {
-        this.searchData.isread = 0;
-        this.ReadState = 0;
-        this.GetMessageList();
-      } else {
-        this.searchData.isread = 1;
-        this.ReadState = 1;
-        this.GetMessageList();
-      }
-    },
-    get_unix_time(dateStr) {
-      var newstr = dateStr.replace(/-/g, "/");
-      var date = new Date(newstr);
-      var time_str = date.getTime().toString();
-      return time_str.substr(0, 10);
+
+    // 閲嶇疆绛涢�夋潯浠�
+    resetFilters() {
+      this.selecttime = [new Date(new Date().getFullYear(), 0), new Date()];
+      this.reportervalue = "";
+      this.city = "";
+      this.getTimeList();
+      this.selectdatas();
     },
 
-    resetArr(Arr) {
-      var hash = {};
-      Arr = Arr.reduce(function(arr, current) {
-        hash[current.reporterno]
-          ? ""
-          : (hash[current.reporterno] = true && arr.push(current));
-        return arr;
-      }, []);
-      return Arr;
+    // 鏃堕棿閫夋嫨澶勭悊
+    getTimeList(e) {
+      if (this.selecttime && this.selecttime.length === 2) {
+        this.starttime = this.selecttime[0] + " 00:00:00";
+        let endDate = new Date(this.selecttime[1]);
+        endDate.setMonth(endDate.getMonth() + 1);
+        endDate.setDate(0);
+        this.endtime = dayjs(endDate).format("YYYY-MM-DD 23:59:59");
+      } else {
+        this.starttime = dayjs().format("YYYY-01-01 00:00:00");
+        this.endtime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+      }
     },
-    // tobaseinfo0(){
-    //   this.$router.push({path:'/Donatebaseinfo', query: {userid: 0 }})
-    // },
+
+    // 鎼滅储鏁版嵁
     selectdatas() {
       this.GetDonateOrganNum();
       this.GetDonateOrganQuality();
-      //  this.GetDonateNum();
       this.GetOrgDonateNumNew();
       this.GetOrgDonateNum();
     },
-    getTimeList(e) {
-      if (this.selecttime != 0) {
-        this.endtime = this.selecttime[1];
-        this.starttime = this.selecttime[0];
-        // if (this.endtime == this.starttime) {
-        let num = Number(this.endtime.slice(5, 7));
-        if (num < 9) {
-          let mon = Number(this.endtime.slice(6, 7));
 
-          this.endtime =
-            this.endtime.slice(0, 5) +
-            "0" +
-            (mon + 1) +
-            "-" +
-            "01" +
-            " " +
-            "00" +
-            ":" +
-            "00" +
-            ":" +
-            "00";
-        }
-        // this.endtime=this.endtime.slice(0,5)骞�
-        else if (num >= 10) {
-          this.endtime =
-            this.endtime.slice(0, 5) +
-            (num + 1) +
-            "-" +
-            "01" +
-            " " +
-            "00" +
-            ":" +
-            "00" +
-            ":" +
-            "00";
-        } else {
-          this.endtime =
-            this.endtime.slice(0, 5) +
-            "10" +
-            "-" +
-            "01" +
-            " " +
-            "00" +
-            ":" +
-            "00" +
-            ":" +
-            "00";
-        }
-        this.starttime = this.starttime + " " + "00" + ":" + "00" + ":" + "00";
-        // }
-      } else {
-        this.starttime = "1998-01-01 00:00:00";
-        this.endtime = "2998-01-01 00:00:00";
-      }
-    },
-    Tobaseinfo() {
-      this.$router.push("../../donatebaseinfo/index.vue");
-    },
-    Tomedicalevalua() {
-      this.$router.push("../../medicalevaluation/index.vue");
-    },
-    getyearvalue() {
-      console.log("year de  value:", this.year);
-    },
-    handlerInput(e) {
-      console.log("鍏ㄧ渷瀵艰褰撳墠鎵�閫夊勾浠斤細", e);
-    },
-    //鑾峰彇鍣ㄥ畼鎹愮尞鏁伴噺
+    // 鑾峰彇鍣ㄥ畼鏁伴噺缁熻
     GetDonateOrganNum() {
       let param = {
         starttime: this.starttime,
         endtime: this.endtime,
         city: this.city
-
-        // repoterno:'015'
       };
 
-      if (this.reportervalue != "") {
+      if (this.reportervalue) {
         param.reporterno = this.reportervalue;
       }
+
       getDonateorganSum(param).then(response => {
-        /*
-        let list = this.organData.map((item) => item);
-        for (let i = 0; i < list.length; i++) {
-          let k = list[i].key;
-        }
-        this.organData = list;
-      */
-        let list = response.data;
-        for (let i = 0; i < this.organData.length; i++) {
-          let ii = list.findIndex(
-            item => item.organNo == this.organData[i].code
-          );
-          if (ii > -1) {
-            this.organData[i].value = list[ii].count;
-          }
+        if (response.code === 200) {
+          // this.CommonOrgan = response.data || {
+          //   countSum: 1,
+          //   abandonCountSum: 0
+          // };
+          // let list = response.data.organInfoVOList || [];
+          // this.organData.forEach(item => {
+          //   const found = list.find(organ => organ.organNo === item.code);
+          //   if (found) {
+          //     item.value = found.count || 0;
+          //     item.value1 = found.abandonCount || 0;
+          //   }
+          // });
         }
       });
     },
-    //鑾峰彇鎸囨爣鐩戞帶鏁版嵁
+
+    // 鑾峰彇璐ㄩ噺鎸囨爣鏁版嵁
     GetDonateOrganQuality() {
-      let starttime = this.selecttime.length > 0 ? this.selecttime[0] : "";
-      let endtime =
-        this.selecttime.length > 0
-          ? this.$moment(this.selecttime[1])
-              .add(1, "month")
-              .add(-1, "days")
-              .format("YYYY-MM-DD")
-          : "";
-
       let param = {
         starttime: this.starttime,
         endtime: this.endtime,
         city: this.city
-        // repoterno:'015'
       };
+
       getOrgansQuality(param).then(response => {
-        if (response.code == 200) {
+        if (response.code === 200) {
           this.qualirtData = response.data;
-        } else {
-          console.log("鑾峰彇鎸囨爣鐩戞帶鏁版嵁澶辫触锛�");
         }
       });
     },
-    //鑾峰彇绱鎹愮尞淇℃伅鏁版嵁
-    GetDonateNum() {
-      let param = {
-        pageNum: 1,
-        pageSize: 10,
-        starttime: this.starttime,
-        endtime: this.endtime,
-        reportno: this.reportervalue,
-        city: this.city
-        // residenceprovince: this.$refs.areaSelect.getSheng(),
-        // residencecity: this.$refs.areaSelect.getShi(),
-        // residencetown: this.$refs.areaSelect.getQu(),
-      };
-      // getcountByRecordState(param).then(res=>{
-      //   console.log('dawdwadwadwad',res);
-      //    if (res.code == 200) {
-      //     this.donateNumData = res.data;
-      //     this.donateNumData.numberOfDonatePeople =
-      //       res.data.numberOfDonatePeople;
-      //     console.log("this.donateNumData", this.donateNumData);
-      //   } else {
-      //   }
-      // })
-      // getDonateNumber;
 
-      // getDonateNumber(param).then((response) => {
-      //   console.log("鑾峰彇绱鎹愮尞淇℃伅鏁版嵁", response.code, response.data);
-      //   if (response.code == 200) {
-      //     //鍏堟敞閿�鐨勬暟鎹�
-      //     // this.donateNumData = response.data;
-      //     this.donateNumData.numberOfDonate = response.data.numberOfDonate;
-
-      //     this.donateNumData.numberOfMedicalEvaluation=response.data.numberOfMedicalEvaluation;
-
-      //     this.donateNumData.numberOfRelativeConfirmation=response.data.numberOfRelativeConfirmation;
-
-      //     this.donateNumData.numberOfEthicalReview=response.data.numberOfEthicalReview;
-
-      //     this.donateNumData.numberOfWitness=response.data.numberOfWitness;
-
-      //     this.donateNumData.numberOfCompletion=response.data.numberOfCompletion;
-
-      //     this.donateNumData.numberOfTerminated =
-      //       response.data.numberOfTerminated;
-
-      //     this.donateNumData.numberOfDonatePeople =
-      //       response.data.numberOfDonatePeople;
-      //     console.log("this.donateNumData", this.donateNumData);
-      //   } else {
-      //   }
-      // });
-    },
+    // 鑾峰彇缁熻鏁版嵁
     GetOrgDonateNumNew() {
-      // let starttime = this.selecttime.length > 0 ? this.$moment(this.selecttime[0]).format("YYYY-MM-DD 00:00:01") : "";
-      // let endtime =
-      //   this.selecttime.length > 0
-      //     ? this.$moment(this.selecttime[1])
-      //         .add(1, "month")
-      //         .add(-1, "days")
-      //         .format("YYYY-MM-DD")
-      //     : "";
-
-      let info = {
+      const info = {
         starttime: this.starttime,
         endtime: this.endtime
-
-        // residenceprovince: this.$refs.areaSelect.getSheng(),
-        // residencecity: this.$refs.areaSelect.getShi(),
-        // residencetown: this.$refs.areaSelect.getQu(),
       };
-      if (this.reportervalue != "") {
+
+      if (this.reportervalue) {
         info.reporterno = this.reportervalue;
       }
-      if (this.city != "") {
+      if (this.city) {
         info.city = this.city;
       }
 
-      //娼滃湪鎹愮尞
-      listDonatebaseinfo(info).then(res => {
-        this.donateNumData.numberOfDonate = res.total;
-      });
+      // 骞惰鑾峰彇鎵�鏈夌粺璁℃暟鎹�
+      Promise.all([
+        listDonatebaseinfo(info).then(res => {
+          this.donateNumData.numberOfDonate = res.total || 0;
+        }),
 
-      //鍖诲璇勪及
-      listnewMedicalevaluation(info).then(res => {
-        this.donateNumData.numberOfMedicalEvaluation = res.total;
-      }),
-        //浜插睘纭
+        listnewMedicalevaluation(info).then(res => {
+          this.donateNumData.numberOfMedicalEvaluation = res.total || 0;
+        }),
+
         listnewRelativesconfirmation(info).then(res => {
-          this.donateNumData.numberOfRelativeConfirmation = res.total;
-        });
-      //浼︾悊瀹℃煡
-      listnewEthicalreviewopinions(info).then(res => {
-        this.donateNumData.numberOfEthicalReview = res.total;
-      }),
-        //鍣ㄥ畼鎹愮尞
+          this.donateNumData.numberOfRelativeConfirmation = res.total || 0;
+        }),
+
+        listnewEthicalreviewopinions(info).then(res => {
+          this.donateNumData.numberOfEthicalReview = res.total || 0;
+        }),
+
         listOrganallocation(info).then(res => {
-          this.donateNumData.numberOfDonatePeople = res.total;
-        });
+          this.donateNumData.numberOfDonatePeople = res.total || 0;
+        }),
 
-      //鑾峰彇瑙佽瘉
-      listnewDonationwitness(info).then(res => {
-        this.donateNumData.numberOfWitness = res.total;
-      });
+        listnewDonationwitness(info).then(res => {
+          this.donateNumData.numberOfWitness = res.total || 0;
+        }),
 
-      listnewDonatecompletioninfo(info).then(res => {
-        this.donateNumData.numberOfCompletion = res.total;
-      });
+        listnewDonatecompletioninfo(info).then(res => {
+          this.donateNumData.numberOfCompletion = res.total || 0;
+        }),
 
-      //缁堟
-      info.terminationCase = 1;
-      listDonatebaseinfo(info).then(res => {
-        this.donateNumData.numberOfTerminated = res.total;
-      });
-
-      listDonatebaseinfo({}).then(res => {
-        let list = res.rows;
-        let reportlist = [];
-        reportlist.push({ reporterno: "", reportername: "鍏ㄩ儴" });
-        list.forEach(element => {
-          reportlist.push({
-            reporterno: element.reporterno,
-            reportername: element.reportername
-          });
-        });
-
-        if (reportlist != 0) {
-          reportlist = this.resetArr(reportlist);
-          this.reportlist = reportlist;
-        }
+        listDonatebaseinfo({ ...info, terminationCase: 1 }).then(res => {
+          this.donateNumData.numberOfTerminated = res.total || 0;
+        })
+      ]).then(() => {
+        this.loadReportList();
       });
     },
+
+    // 鍔犺浇鎶ュ憡浜哄垪琛�
+    loadReportList() {
+      listDonatebaseinfo({}).then(res => {
+        let list = res.rows || [];
+        let reportlist = [{ reporterno: "", reportername: "鍏ㄩ儴浜哄憳" }];
+
+        list.forEach(element => {
+          if (element.reporterno && element.reportername) {
+            reportlist.push({
+              reporterno: element.reporterno,
+              reportername: element.reportername
+            });
+          }
+        });
+
+        this.reportlist = this.resetArr(reportlist);
+      });
+    },
+
+    // 鏁扮粍鍘婚噸
+    resetArr(Arr) {
+      const hash = {};
+      return Arr.reduce((arr, current) => {
+        if (!hash[current.reporterno]) {
+          hash[current.reporterno] = true;
+          arr.push(current);
+        }
+        return arr;
+      }, []);
+    },
+
     //鑾峰彇鍖婚櫌鏈烘瀯鎹愮尞鏁伴噺
     GetOrgDonateNum() {
       // let time1 =  new Date(this.starttime).getTime()
@@ -1259,83 +931,299 @@
       // this.$tab.closePage(obj);
     }
   },
-  computed: {},
+  computed: {
+    routeParams() {
+      return {
+        starttime: this.starttime,
+        endtime: this.endtime,
+        tempRecordState: "",
+        reporterno: this.reportervalue,
+        shen: this.searchAddress?.shen || "",
+        shi: this.searchAddress?.shi || "",
+        qu: this.searchAddress?.qu || "",
+        city: this.city
+      };
+    }
+  },
   watch: {}
 };
 </script>
 
 <style lang="scss" scoped>
-.c-home {
-  .box-title {
-    width: 100%;
-    span {
-      display: block;
-      width: 130px;
-      height: 25px;
-      -webkit-transform: skew(20deg);
-      -moz-transform: skew(20deg);
-      -o-transform: skew(20deg);
-      background: #0a459f;
-      line-height: 25px;
-      align-self: center;
-      border: 1px transparent solid;
-      border-image: linear-gradient(#070a17, #7be6fc) 10 10;
-      border-image: linear-gradient(#070a17, #7be6fc) 10 10;
-      border-image: linear-gradient(#070a17, #7be6fc) 10 10;
-      margin: 0 auto;
+.app-container {
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  min-height: 100vh;
+}
+
+.filter-card {
+  margin-bottom: 24px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  border: none;
+  background: rgba(255, 255, 255, 0.95);
+
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
+}
+
+.overview-card {
+  margin-bottom: 24px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  border: none;
+  background: rgba(255, 255, 255, 0.95);
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #303133;
     }
-    b {
-      display: block;
-      color: #fff;
-      text-align: center;
-      transform: skewY(-20deg);
-      transform: skewX(-20deg);
+
+    .header-subtitle {
+      font-size: 14px;
+      color: #909399;
     }
   }
-  .box-num {
-    position: relative;
-    .box-num-main {
-      text-align: right;
-      padding-right: 70px;
-      .box-num-main-n {
-        color: #409eff;
-        font-size: 25px;
+
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
+}
+.metrics-wrapper {     // 宸︿晶鍐呭鍖哄煙鍥哄畾 320px锛屾孩鍑鸿嚜鍔ㄦ粴鍔�
+  height: 590px;       // 鍜屽彸渚у浘琛ㄩ粯璁ら珮涓�鏍凤紝涔熷彲浠ユ敼鎴� 350 / 400 鈥�
+  overflow-y: auto;
+  padding-right: 4px;  // 鐣欎竴鐐规粴鍔ㄦ潯浣嶇疆锛岄伩鍏嶆枃瀛楄创杈�
+}
+.chart-card {
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  border: none;
+  background: rgba(255, 255, 255, 0.95);
+  height: 100%;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
+}
+
+.stat-card-link {
+  text-decoration: none;
+  display: block;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.stat-card {
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  border: none;
+  margin-bottom: 16px;
+  background: linear-gradient(135deg, #fff 60%, #f8f9fa 100%);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .stat-content {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+  }
+
+  .stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+
+    .svg-icon {
+      font-size: 24px;
+      color: white;
+    }
+  }
+
+  .stat-info {
+    flex: 1;
+
+    .stat-value {
+      font-size: 24px;
+      font-weight: bold;
+      color: #303133;
+      margin-bottom: 4px;
+    }
+
+    .stat-title {
+      font-size: 14px;
+      color: #606266;
+      line-height: 1.4;
+    }
+  }
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.metric-item {
+  background: linear-gradient(135deg, #fafdff 0%, #e3f0ff 100%);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &.full-width {
+    grid-column: 1 / -1;
+  }
+
+  .metric-title {
+    font-size: 12px;
+    color: #606266;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+
+  .metric-value {
+    font-size: 18px;
+    font-weight: bold;
+    color: #303133;
+  }
+
+  .metric-breakdown {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    span {
+      font-size: 12px;
+      color: #606266;
+      background: rgba(255, 255, 255, 0.7);
+      padding: 4px 8px;
+      border-radius: 4px;
+    }
+  }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+
+  @media (max-width: 768px) {
+    justify-content: stretch;
+
+    .el-button {
+      flex: 1;
+    }
+  }
+}
+
+.analysis-section {
+  margin-top: 24px;
+
+}
+
+// 鍝嶅簲寮忚皟鏁�
+@media (max-width: 1200px) {
+  .metrics-grid {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .app-container {
+    padding: 12px;
+  }
+
+  .filter-card,
+  .overview-card,
+  .chart-card {
+    margin-bottom: 16px;
+
+    :deep(.el-card__body) {
+      padding: 16px;
+    }
+  }
+
+  .stat-card .stat-content {
+    padding: 12px;
+
+    .stat-icon {
+      width: 40px;
+      height: 40px;
+      margin-right: 8px;
+
+      .svg-icon {
+        font-size: 20px;
       }
     }
-    .box-num-ex {
-      position: absolute;
-      bottom: 5px;
-      right: 10px;
-      width: 45px;
 
-      span {
-        color: #409eff;
+    .stat-info {
+      .stat-value {
+        font-size: 20px;
+      }
+
+      .stat-title {
         font-size: 12px;
       }
     }
   }
-}
-::v-deep .c-table-title {
-  .el-divider.el-divider--horizontal {
-    background-color: #95a1ec;
-    .el-divider__text.is-left {
-      color: #303133;
-      background: #fafafa;
-    }
+
+  .metrics-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
   }
-  .active {
-    .el-divider.el-divider--horizontal {
-      .el-divider__text.is-left {
-        color: #409eff;
-      }
+
+  .metric-item {
+    padding: 12px;
+
+    .metric-value {
+      font-size: 16px;
     }
   }
 }
-.border-box-contaier {
-  height: 90px;
-  padding: 10px;
-  overflow: hidden;
-  box-sizing: border-box;
-  // background-color: #282c34;
+
+// 鍔ㄧ敾鏁堟灉
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
 </style>

--
Gitblit v1.9.3