人员台账修改

src/views/pms/qhse/certPerson/index.vue

@@ -1,257 +1,291 @@
 <template>
-  <el-row :gutter="20">
-    <!-- 左侧部门树 -->
-    <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
-
-    <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <div style="overflow-y: hidden !important; border: none" class="bg-white px-2 py-2">
-        <!-- 搜索工作栏 -->
-        <el-form
-          class="-mb-15px"
-          :model="queryParams"
-          ref="queryFormRef"
-          :inline="true"
-          @submit.prevent
-          border>
-          <el-form-item label="人员名称" prop="username">
-            <el-input
-              v-model="queryParams.username"
-              placeholder="请输入人员名称"
-              clearable
-              @keyup.enter="handleQuery"
-              class="!w-150px" />
-          </el-form-item>
-          <el-form-item label="姓名" prop="nickname">
-            <el-input
-              v-model="queryParams.nickname"
-              placeholder="请输入姓名"
-              clearable
-              @keyup.enter="handleQuery"
-              class="!w-150px" />
-          </el-form-item>
-
-          <el-form-item label="岗位" prop="postName">
-            <el-input
-              v-model="queryParams.postName"
-              placeholder="请输入岗位名称"
-              clearable
-              @keyup.enter="handleQuery"
-              class="!w-150px" />
-          </el-form-item>
-
-          <el-form-item>
-            <el-button @click="handleQuery" v-hasPermi="['rq:qhse-cert-person:query']"
-              ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
-            >
-            <el-button @click="resetQuery"
-              ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
-            >
-            <el-button
-              type="primary"
-              plain
-              @click="openForm('create')"
-              v-hasPermi="['rq:qhse-cert-person:create']">
-              <Icon icon="ep:plus" class="mr-5px" /> 新增
-            </el-button>
-            <el-button
-              type="success"
-              plain
-              @click="handleExport"
-              :loading="exportLoading"
-              v-hasPermi="['rq:qhse-cert-person:export']">
-              <Icon icon="ep:download" class="mr-5px" /> 导出
-            </el-button>
-          </el-form-item>
-        </el-form>
+  <div
+    class="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_minmax(0,1fr)] gap-0 gap-x-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    <DeptTreeSelect
+      class="row-span-4"
+      :top-id="rootDeptId"
+      :deptId="deptId"
+      v-model="queryParams.deptId"
+      :init-select="false"
+      :show-title="false"
+      request-api="getSimpleDeptList"
+      @node-click="handleDeptNodeClick" />
+
+    <div class="mb-1">
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 pt-4 flex items-center flex-wrap min-w-0"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        @submit.prevent
+        border>
+        <el-form-item label="人员名称" prop="username">
+          <el-input
+            v-model="queryParams.username"
+            placeholder="请输入人员名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-150px" />
+        </el-form-item>
+        <el-form-item label="姓名" prop="nickname">
+          <el-input
+            v-model="queryParams.nickname"
+            placeholder="请输入姓名"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-150px" />
+        </el-form-item>
+
+        <el-form-item label="岗位" prop="postName">
+          <el-input
+            v-model="queryParams.postName"
+            placeholder="请输入岗位名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-150px" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button @click="handleQuery" v-hasPermi="['rq:qhse-cert-person:query']"
+            ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
+          >
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button
+            type="primary"
+            plain
+            @click="openForm('create')"
+            v-hasPermi="['rq:qhse-cert-person:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新增
+          </el-button>
+          <el-button
+            type="success"
+            plain
+            @click="handleExport"
+            :loading="exportLoading"
+            v-hasPermi="['rq:qhse-cert-person:export']">
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="min-w-0"></div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-2 pt-4 min-w-0">
+      <div class="flex-1 relative min-h-0">
+        <el-auto-resizer class="absolute">
+          <template #default="{ width, height }">
+            <zm-table
+              :loading="loading"
+              :data="list"
+              :stripe="true"
+              :show-overflow-tooltip="true"
+              :width="width"
+              :height="height"
+              :max-height="height">
+              <el-table-column :label="t('monitor.serial')" width="70" align="center">
+                <template #default="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+
+              <zm-table-column label="人员名称" align="center" prop="username" />
+              <zm-table-column label="姓名" align="center" prop="nickname" />
+              <zm-table-column label="岗位" align="center" prop="postName" />
+              <zm-table-column label="手机号" align="center" prop="mobile" />
+              <zm-table-column label="部门名称" align="center" prop="deptName" />
+              <zm-table-column label="三小证" align="center">
+                <zm-table-column label="硫化氢" align="center">
+                  <template #default="scope">
+                    <el-button
+                      circle
+                      type="success"
+                      style="border: none"
+                      plain
+                      v-if="scope.row.lsh">
+                      <span class="text-[#259644]">
+                        {{ '✔' }}
+                      </span>
+                    </el-button>
+                    <span v-else></span>
+                  </template>
+                </zm-table-column>
+                <zm-table-column label="井控（A2）" align="center">
+                  <template #default="scope">
+                    <el-button circle type="success" style="border: none" plain v-if="scope.row.jk">
+                      <span class="text-[#259644]">
+                        {{ '✔' }}
+                      </span>
+                    </el-button>
+                    <span v-else></span>
+                  </template>
+                </zm-table-column>
+                <zm-table-column label="HSE" align="center">
+                  <template #default="scope">
+                    <el-button
+                      circle
+                      type="success"
+                      style="border: none"
+                      plain
+                      v-if="scope.row.hse">
+                      <span class="text-[#259644]">
+                        {{ '✔' }}
+                      </span>
+                    </el-button>
+                    <span v-else></span>
+                  </template>
+                </zm-table-column>
+              </zm-table-column>
+
+              <zm-table-column label="司钻证" align="center">
+                <template #default="scope">
+                  <el-button circle type="success" style="border: none" plain v-if="scope.row.sz">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="高处作业证" align="center">
+                <template #default="scope">
+                  <el-button circle type="success" style="border: none" plain v-if="scope.row.gczy">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="电工证" align="center">
+                <template #default="scope">
+                  <el-button circle type="success" style="border: none" plain v-if="scope.row.dg">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="连续油管主操证" align="center" min-width="120px">
+                <template #default="scope">
+                  <el-button
+                    circle
+                    type="success"
+                    style="border: none"
+                    plain
+                    v-if="scope.row.lxygzc">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="吊装证" align="center">
+                <template #default="scope">
+                  <el-button circle type="success" style="border: none" plain v-if="scope.row.dz">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="安全管理证" align="center">
+                <template #default="scope">
+                  <el-button circle type="success" style="border: none" plain v-if="scope.row.aqgl">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="国际井控证" align="center">
+                <template #default="scope">
+                  <el-button circle type="success" style="border: none" plain v-if="scope.row.gjjk">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="消防证" align="center">
+                <template #default="scope">
+                  <el-button
+                    circle
+                    type="success"
+                    style="border: none"
+                    plain
+                    v-if="scope.row.xiaofang">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="急救证" align="center">
+                <template #default="scope">
+                  <el-button
+                    circle
+                    type="success"
+                    style="border: none"
+                    plain
+                    v-if="scope.row.jijiu">
+                    <span class="text-[#259644]">
+                      {{ '✔' }}
+                    </span>
+                  </el-button>
+                  <span v-else></span>
+                </template>
+              </zm-table-column>
+
+              <zm-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+
+              <zm-table-column label="操作" align="center" min-width="120px" action fixed="right">
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    @click="openForm('update', scope.row.id)"
+                    v-hasPermi="['rq:qhse-cert-person:update']">
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="danger"
+                    @click="handleDelete(scope.row.id)"
+                    v-hasPermi="['rq:qhse-cert-person:delete']">
+                    删除
+                  </el-button>
+                </template>
+              </zm-table-column>
+            </zm-table>
+          </template>
+        </el-auto-resizer>
       </div>
 
-      <!-- 列表 -->
-      <ContentWrap style="border: none; margin-top: 10px">
-        <zm-table :loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-          <el-table-column :label="t('monitor.serial')" width="70" align="center">
-            <template #default="scope">
-              {{ scope.$index + 1 }}
-            </template>
-          </el-table-column>
-
-          <zm-table-column label="人员名称" align="center" prop="username" />
-          <zm-table-column label="姓名" align="center" prop="nickname" />
-          <zm-table-column label="岗位" align="center" prop="postName" />
-          <zm-table-column label="手机号" align="center" prop="mobile" />
-          <zm-table-column label="部门名称" align="center" prop="deptName" />
-          <zm-table-column label="三小证" align="center">
-            <zm-table-column label="硫化氢" align="center">
-              <template #default="scope">
-                <el-button circle type="success" style="border: none" plain v-if="scope.row.lsh">
-                  <span class="text-[#259644]">
-                    {{ '✔' }}
-                  </span>
-                </el-button>
-                <span v-else></span>
-              </template>
-            </zm-table-column>
-            <zm-table-column label="井控（A2）" align="center">
-              <template #default="scope">
-                <el-button circle type="success" style="border: none" plain v-if="scope.row.jk">
-                  <span class="text-[#259644]">
-                    {{ '✔' }}
-                  </span>
-                </el-button>
-                <span v-else></span>
-              </template>
-            </zm-table-column>
-            <zm-table-column label="HSE" align="center">
-              <template #default="scope">
-                <el-button circle type="success" style="border: none" plain v-if="scope.row.hse">
-                  <span class="text-[#259644]">
-                    {{ '✔' }}
-                  </span>
-                </el-button>
-                <span v-else></span>
-              </template>
-            </zm-table-column>
-          </zm-table-column>
-
-          <zm-table-column label="司钻证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.sz">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="高处作业证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.gczy">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="电工证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.dg">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="连续油管主操证" align="center" min-width="120px">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.lxygzc">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="吊装证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.dz">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-          <!-- 
-          <zm-table-column label="特种作业证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.tzzy">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column> -->
-
-          <zm-table-column label="安全管理证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.aqgl">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="国际井控证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.gjjk">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="消防证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.xiaofang">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="急救证" align="center">
-            <template #default="scope">
-              <el-button circle type="success" style="border: none" plain v-if="scope.row.jijiu">
-                <span class="text-[#259644]">
-                  {{ '✔' }}
-                </span>
-              </el-button>
-              <span v-else></span>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
-
-          <zm-table-column label="操作" align="center" min-width="120px" action fixed="right">
-            <template #default="scope">
-              <el-button
-                link
-                type="primary"
-                @click="openForm('update', scope.row.id)"
-                v-hasPermi="['rq:qhse-cert-person:update']">
-                编辑
-              </el-button>
-              <el-button
-                link
-                type="danger"
-                @click="handleDelete(scope.row.id)"
-                v-hasPermi="['rq:qhse-cert-person:delete']">
-                删除
-              </el-button>
-            </template>
-          </zm-table-column>
-        </zm-table>
-        <!-- 分页 -->
+      <div class="h-8 mt-2 flex items-center justify-end">
         <Pagination
           :total="total"
           v-model:page="queryParams.pageNo"
           v-model:limit="queryParams.pageSize"
           @pagination="getList" />
-      </ContentWrap>
-    </el-col>
-  </el-row>
+      </div>
+    </div>
+  </div>
 
   <!-- 表单弹窗：添加/修改 -->
   <CertPersonForm ref="formRef" @success="getList" />
@@ -261,9 +295,12 @@
 import download from '@/utils/download'
 import { CertPersonApi } from '@/api/pms/qhse/index'
 import CertPersonForm from './CertPersonForm.vue'
-import DeptTree from '@/views/system/user/DeptTree2.vue'
+
+import { useUserStore } from '@/store/modules/user'
 
 defineOptions({ name: 'CertPerson' })
+const rootDeptId = 156
+const deptId = useUserStore().getUser.deptId || rootDeptId
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -271,13 +308,14 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref([]) // 列表的数据
 const total = ref(0) // 列表的总页数
-const isLeftContentCollapsed = ref(false)
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   username: undefined,
   nickname: undefined,
-  postName: undefined
+  postName: undefined,
+  deptId: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中

src/views/pms/qhse/certificate.vue

@@ -4,6 +4,66 @@
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
+      <div class="stats-cards">
+        <div class="stats-card stats-card--expired">
+          <div class="flex items-center gap-2">
+            <Icon icon="ep:info-filled" color="#de3b3b" />
+            <div class="stats-card__label">已过期</div>
+          </div>
+
+          <div class="stats-card__value">
+            <CountTo
+              :duration="2600"
+              :end-val="expired"
+              :start-val="0"
+              class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
+          </div>
+        </div>
+        <div class="stats-card stats-card--warn">
+          <div class="flex items-center gap-2">
+            <Icon icon="ep:bell-filled" color="#d97706" />
+            <div class="stats-card__label">60天预警</div>
+          </div>
+          <div class="stats-card__value">
+            <CountTo
+              :duration="2600"
+              :end-val="warn"
+              :start-val="0"
+              class="stats-card__value text-[40px]! pt-10 text-center! text-[#d97706]!" />
+          </div>
+        </div>
+        <div class="stats-card stats-card--total">
+          <div class="flex items-center gap-2">
+            <Icon icon="eos-icons:counting" color="#2563eb" />
+            <div class="stats-card__label">证书总数</div>
+          </div>
+
+          <div class="stats-card__value">
+            <CountTo
+              :duration="2600"
+              :end-val="totalCert"
+              :start-val="0"
+              class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
+          </div>
+        </div>
+        <div class="stats-card stats-card--personal">
+          <div class="flex items-center gap-2">
+            <Icon
+              icon="material-symbols-light:account-circle-outline"
+              class="w-20 h-20"
+              color="#2563eb" />
+            <div class="stats-card__label">个人证书</div>
+          </div>
+
+          <div class="stats-card__value">
+            <CountTo
+              :duration="2600"
+              :end-val="personal"
+              :start-val="0"
+              class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
+          </div>
+        </div>
+      </div>
       <div style="border: none" class="!border-none bg-white rounded-sm pt-4 px-2">
         <!-- 搜索工作栏 -->
         <el-form :model="queryParams" ref="queryFormRef" :inline="true">
@@ -82,79 +142,6 @@
 
       <!-- 列表 -->
       <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
-        <div class="stats-cards">
-          <div class="stats-card stats-card--expired">
-            <div class="flex items-center gap-2">
-              <Icon icon="ep:info-filled" color="#de3b3b" />
-              <div class="stats-card__label">已过期</div>
-            </div>
-
-            <div class="stats-card__value">
-              <CountTo
-                :duration="2600"
-                :end-val="expired"
-                :start-val="0"
-                class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
-            </div>
-          </div>
-          <div class="stats-card stats-card--warn">
-            <div class="flex items-center gap-2">
-              <Icon icon="ep:bell-filled" color="#d97706" />
-              <div class="stats-card__label">60天预警</div>
-            </div>
-            <div class="stats-card__value">
-              <CountTo
-                :duration="2600"
-                :end-val="warn"
-                :start-val="0"
-                class="stats-card__value text-[40px]! pt-10 text-center! text-[#d97706]!" />
-            </div>
-          </div>
-          <div class="stats-card stats-card--total">
-            <div class="flex items-center gap-2">
-              <Icon icon="eos-icons:counting" color="#2563eb" />
-              <div class="stats-card__label">证书总数</div>
-            </div>
-
-            <div class="stats-card__value">
-              <CountTo
-                :duration="2600"
-                :end-val="totalCert"
-                :start-val="0"
-                class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
-            </div>
-          </div>
-          <div class="stats-card stats-card--personal">
-            <div class="flex items-center gap-2">
-              <Icon
-                icon="material-symbols-light:account-circle-outline"
-                class="w-20 h-20"
-                color="#2563eb" />
-              <div class="stats-card__label">个人证书</div>
-            </div>
-
-            <div class="stats-card__value">
-              <CountTo
-                :duration="2600"
-                :end-val="personal"
-                :start-val="0"
-                class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
-            </div>
-          </div>
-          <div class="stats-card stats-card--organization">
-            <div class="flex items-center gap-2">
-              <Icon icon="bxs:building" class="w-20 h-20" color="#2563eb" />
-              <div class="stats-card__label">组织证书</div>
-            </div>
-            <div class="stats-card__value">
-              <CountTo
-                :duration="2600"
-                :end-val="organization"
-                :start-val="0"
-                class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
-            </div>
-          </div>
-        </div>
         <zm-table
           :loading="loading"
           :data="list"
@@ -839,7 +826,7 @@ onMounted(async () => {
 
 .stats-cards {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
   margin-bottom: 16px;
 }

src/views/pms/qhse/index.vue

@@ -11,6 +11,42 @@
       request-api="getSimpleDeptList"
       @node-click="handleDeptNodeClick" />
 
+    <div class="stats-cards min-w-0">
+      <div class="stats-card stats-card--expired">
+        <div class="stats-card__header">
+          <el-icon class="stats-card__icon" :size="28">
+            <Icon icon="ep:info-filled" />
+          </el-icon>
+          <div class="stats-card__label">已过期</div>
+        </div>
+        <div class="stats-card__value text-[40px]! pt-10 text-center!">
+          <CountTo
+            :duration="2600"
+            :end-val="expired"
+            :start-val="0"
+            class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
+        </div>
+      </div>
+      <div class="stats-card stats-card--warn">
+        <div class="stats-card__header">
+          <el-icon class="stats-card__icon" :size="28">
+            <Icon icon="ep:bell-filled" />
+          </el-icon>
+          <div class="stats-card__label">90天预警</div>
+        </div>
+        <div class="stats-card__value text-[40px]! pt-10 text-center!">
+          <CountTo
+            :duration="2600"
+            :end-val="warn"
+            :start-val="0"
+            class="stats-card__value text-[40px]! pt-10 text-center! text-[#df8a28]!" />
+        </div>
+      </div>
+      <div class="stats-chart-card">
+        <div class="stats-card__label">分类统计</div>
+        <div ref="staticChartRef" class="stats-chart"></div>
+      </div>
+    </div>
     <el-form
       ref="queryFormRef"
       :model="queryParams"
@@ -77,43 +113,6 @@
       </div>
     </el-form>
 
-    <div class="stats-cards min-w-0">
-      <div class="stats-card stats-card--expired">
-        <div class="stats-card__header">
-          <el-icon class="stats-card__icon" :size="28">
-            <Icon icon="ep:info-filled" />
-          </el-icon>
-          <div class="stats-card__label">已过期</div>
-        </div>
-        <div class="stats-card__value text-[40px]! pt-10 text-center!">
-          <CountTo
-            :duration="2600"
-            :end-val="expired"
-            :start-val="0"
-            class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
-        </div>
-      </div>
-      <div class="stats-card stats-card--warn">
-        <div class="stats-card__header">
-          <el-icon class="stats-card__icon" :size="28">
-            <Icon icon="ep:bell-filled" />
-          </el-icon>
-          <div class="stats-card__label">90天预警</div>
-        </div>
-        <div class="stats-card__value text-[40px]! pt-10 text-center!">
-          <CountTo
-            :duration="2600"
-            :end-val="warn"
-            :start-val="0"
-            class="stats-card__value text-[40px]! pt-10 text-center! text-[#df8a28]!" />
-        </div>
-      </div>
-      <div class="stats-chart-card">
-        <div class="stats-card__label">分类统计</div>
-        <div ref="staticChartRef" class="stats-chart"></div>
-      </div>
-    </div>
-
     <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-2 pt-3 min-w-0">
       <div class="flex-1 relative min-h-0">
         <el-auto-resizer class="absolute">