相关推送

WXL

8 小时以前 9d408b549b899631db29af772ee4e96f4c49a91c

 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,562 +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,
@@ -618,7 +436,6 @@
  name: "home",
  dicts: ["sys_messagestatus"],
  components: {
    RankChart,
    OrganNumChart,
    Li_area_select
  },
@@ -626,13 +443,13 @@
  data() {
    return {
      city: "",
      reportno: "",
      selecttime: [],
      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" },
@@ -645,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"
        }
        // {
@@ -777,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
@@ -847,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()
@@ -1260,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>