From f10de286cca51bd4b30424f59fd3ff03def749f7 Mon Sep 17 00:00:00 2001
From: "zhonghua.li" <t-systems.d.li@mercedes-benz.com>
Date: Thu, 30 Apr 2026 09:38:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=91=E5=BD=A2=E6=95=B0=E6=8D=AE=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/lb-business/daily-report/index.vue | 656 ++++++++++++-------
 1 file changed, 413 insertions(+), 243 deletions(-)

diff --git a/src/views/lb-business/daily-report/index.vue b/src/views/lb-business/daily-report/index.vue
index 7f912c7..e686d13 100644
--- a/src/views/lb-business/daily-report/index.vue
+++ b/src/views/lb-business/daily-report/index.vue
@@ -1,104 +1,197 @@
 <template>
   <div class="app-container">
-    <el-card class="filter-container" shadow="never">
-      <el-form :model="queryParams" :inline="true" label-width="100px">
-        <el-form-item label="昵称">
-          <el-input v-model="queryParams.nickname" clearable placeholder="请输入昵称" style="width: 180px" />
-        </el-form-item>
-        <el-form-item label="数据类型">
-          <el-select v-model="queryParams.dataType" clearable placeholder="请选择数据类型" style="width: 180px">
-            <el-option label="详情" value="report_detail" />
-            <el-option label="汇总" value="report_sum" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="报表开始">
-          <el-date-picker
-            v-model="queryParams.reportStartTime"
-            type="datetime"
-            clearable
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="报表开始时间"
-            style="width: 200px"
+    <el-tabs v-model="activeTab" class="daily-report-tabs" @tab-click="handleMainTabClick">
+      <el-tab-pane label="报表列表" name="list">
+        <el-card class="filter-container" shadow="never">
+          <el-form :model="queryParams" :inline="true" label-width="100px">
+            <el-form-item label="昵称">
+              <el-input v-model="queryParams.nickname" clearable placeholder="请输入昵称" style="width: 180px" />
+            </el-form-item>
+            <el-form-item label="数据类型">
+              <el-select v-model="queryParams.dataType" clearable placeholder="请选择数据类型" style="width: 180px">
+                <el-option label="详情" value="report_detail" />
+                <el-option label="汇总" value="report_sum" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="报表开始">
+              <el-date-picker
+                v-model="queryParams.reportStartTime"
+                type="datetime"
+                clearable
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="报表开始时间"
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="报表结束">
+              <el-date-picker
+                v-model="queryParams.reportEndTime"
+                type="datetime"
+                clearable
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="报表结束时间"
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+              <el-button type="warning" icon="el-icon-warning-outline" :loading="checkUnsoldLoading" @click="handleCheckUnsold">检查未寄卖</el-button>
+              <el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="action-container" shadow="never">
+          <div class="action-bar">
+            <div class="action-buttons">
+              <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+              <el-button type="warning" icon="el-icon-data-analysis" :loading="reportSumLoading" @click="openReportSumDialog">汇总数据</el-button>
+              <el-button type="danger" icon="el-icon-delete" :loading="deleteByDateLoading" @click="openDeleteByDateDialog">删除报表数据</el-button>
+              <el-button type="success" icon="el-icon-download" :loading="exportLoading" @click="openExportDialog">报表导出</el-button>
+            </div>
+            <div class="action-tip">
+              说明：服务费=当日买入×0.01；差额=当日卖出−当日买入；应收应付=差额−服务费（&gt;0 应收（当前人），&lt;0 应付（当前人））
+            </div>
+          </div>
+        </el-card>
+
+        <el-card class="table-container" shadow="never">
+          <el-table v-loading="loading" :data="list" style="width: 100%">
+            <el-table-column label="报表日期" prop="reportDate" min-width="170">
+              <template slot-scope="scope">
+                {{ formatDate(scope.row.reportDate) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="昵称" prop="nickname" min-width="120" />
+            <el-table-column label="昨日买入金额" prop="yestodayBuyAmt" min-width="130" />
+            <el-table-column label="当日卖出金额" prop="dailySellAmt" min-width="130" />
+            <el-table-column label="当日买入金额" prop="dailyBuyAmt" min-width="130" />
+            <el-table-column label="服务费" prop="serviceAmt" min-width="100" />
+            <el-table-column label="差额" prop="diffAmt" min-width="100" />
+            <el-table-column label="应收应付" prop="actualReceiptsPayments" min-width="110" />
+            <el-table-column label="抵扣金额" prop="dikouAmt" min-width="110" />
+            <el-table-column label="数据类型" prop="dataType" min-width="100" />
+            <el-table-column label="描述" prop="descContent" min-width="140" show-overflow-tooltip />
+            <el-table-column label="创建时间" prop="createdAt" min-width="170">
+              <template slot-scope="scope">
+                {{ formatDateTime(scope.row.createdAt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="更新时间" prop="updatedAt" min-width="170">
+              <template slot-scope="scope">
+                {{ formatDateTime(scope.row.updatedAt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="140">
+              <template slot-scope="scope">
+                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+                <el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination
+            :current-page="queryParams.current"
+            :page-size="queryParams.size"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
           />
-        </el-form-item>
-        <el-form-item label="报表结束">
-          <el-date-picker
-            v-model="queryParams.reportEndTime"
-            type="datetime"
-            clearable
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="报表结束时间"
-            style="width: 200px"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
-          <el-button type="warning" icon="el-icon-warning-outline" :loading="checkUnsoldLoading" @click="handleCheckUnsold">检查未寄卖</el-button>
-          <el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+        </el-card>
+      </el-tab-pane>
 
-    <el-card class="action-container" shadow="never">
-      <div class="action-bar">
-        <div class="action-buttons">
-          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
-          <el-button type="warning" icon="el-icon-data-analysis" :loading="reportSumLoading" @click="openReportSumDialog">汇总数据</el-button>
-          <el-button type="danger" icon="el-icon-delete" :loading="deleteByDateLoading" @click="openDeleteByDateDialog">删除报表数据</el-button>
-          <el-button type="success" icon="el-icon-download" :loading="exportLoading" @click="openExportDialog">报表导出</el-button>
-          <el-button type="info" icon="el-icon-s-grid" :loading="deptStatsLoading" @click="openDeptStatsDialog">统计部门金额</el-button>
-        </div>
-        <div class="action-tip">
-          说明：服务费=当日买入×0.01；差额=当日卖出−当日买入；应收应付=差额−服务费（>0 应收（当前人），<0 应付（当前人））
-        </div>
-      </div>
-    </el-card>
-
-    <el-card class="table-container" shadow="never">
-      <el-table v-loading="loading" :data="list" style="width: 100%">
-        <el-table-column label="报表日期" prop="reportDate" min-width="170">
-          <template slot-scope="scope">
-            {{ formatDate(scope.row.reportDate) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="昵称" prop="nickname" min-width="120" />
-        <el-table-column label="昨日买入金额" prop="yestodayBuyAmt" min-width="130" />
-        <el-table-column label="当日卖出金额" prop="dailySellAmt" min-width="130" />
-        <el-table-column label="当日买入金额" prop="dailyBuyAmt" min-width="130" />
-        <el-table-column label="服务费" prop="serviceAmt" min-width="100" />
-        <el-table-column label="差额" prop="diffAmt" min-width="100" />
-        <el-table-column label="应收应付" prop="actualReceiptsPayments" min-width="110" />
-        <el-table-column label="抵扣金额" prop="dikouAmt" min-width="110" />
-        <el-table-column label="数据类型" prop="dataType" min-width="100" />
-        <el-table-column label="描述" prop="descContent" min-width="140" show-overflow-tooltip />
-        <el-table-column label="创建时间" prop="createdAt" min-width="170">
-          <template slot-scope="scope">
-            {{ formatDateTime(scope.row.createdAt) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="更新时间" prop="updatedAt" min-width="170">
-          <template slot-scope="scope">
-            {{ formatDateTime(scope.row.updatedAt) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" fixed="right" width="140">
-          <template slot-scope="scope">
-            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        :current-page="queryParams.current"
-        :page-size="queryParams.size"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </el-card>
+      <el-tab-pane label="统计部门金额" name="deptStats">
+        <el-card shadow="never" class="dept-stats-panel">
+          <el-form :inline="true" label-width="88px" class="dept-stats-filter">
+            <el-form-item label="开始日期">
+              <el-date-picker
+                v-model="deptStatsForm.startDate"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="开始日期"
+                style="width: 160px"
+              />
+            </el-form-item>
+            <el-form-item label="结束日期">
+              <el-date-picker
+                v-model="deptStatsForm.endDate"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="结束日期"
+                style="width: 160px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" :loading="deptStatsLoading" @click="fetchDeptStatsTree">查询</el-button>
+            </el-form-item>
+          </el-form>
+          <p v-if="deptStatsSummaryText" class="dept-stats-summary">{{ deptStatsSummaryText }}</p>
+          <div class="dept-stats-table-wrap">
+            <el-table
+              v-loading="deptStatsLoading"
+              :data="deptStatsTreeData"
+              row-key="userId"
+              border
+              :stripe="false"
+              :indent="40"
+              :height="deptStatsTableHeight"
+              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+              :row-class-name="deptStatsRowClassName"
+              class="dept-stats-tree-table"
+              style="width: 100%"
+            >
+              <el-table-column label="姓名 / 用户ID" prop="name" min-width="240" fixed show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <span class="dept-stats-name-wrap">
+                    <i :class="['dept-stats-level-icon', deptStatsLevelIconClass(scope.row)]" />
+                    <span class="dept-stats-name-text">{{ scope.row.name || '-' }}</span>
+                    <span class="dept-stats-user-id">{{ scope.row.userId }}</span>
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="本人当日买入" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.ownDailyBuyAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="团队当日买入" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.teamDailyBuyAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="合计当日买入" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.totalDailyBuyAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="本人昨日买入" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.ownYestodayBuyAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="团队昨日买入" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.teamYestodayBuyAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="合计昨日买入" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.totalYestodayBuyAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="本人当日卖出" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.ownDailySellAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="团队当日卖出" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.teamDailySellAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="合计当日卖出" min-width="118" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.totalDailySellAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="本人差额" min-width="100" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.ownDiffAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="团队差额" min-width="100" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.teamDiffAmt) }}</template>
+              </el-table-column>
+              <el-table-column label="合计差额" min-width="100" align="right">
+                <template slot-scope="s">{{ formatDeptAmt(s.row.totalDiffAmt) }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
 
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="760px" @close="resetForm">
       <el-form ref="dataForm" :model="form" :rules="formRules" label-width="120px">
@@ -216,99 +309,6 @@
       </div>
     </el-dialog>
 
-    <el-dialog
-      title="统计部门金额"
-      :visible.sync="deptStatsDialogVisible"
-      width="96%"
-      top="4vh"
-      custom-class="dept-stats-dialog"
-      @close="resetDeptStatsDialog"
-    >
-      <el-form :inline="true" label-width="88px" class="dept-stats-filter">
-        <el-form-item label="开始日期">
-          <el-date-picker
-            v-model="deptStatsForm.startDate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="开始日期"
-            style="width: 160px"
-          />
-        </el-form-item>
-        <el-form-item label="结束日期">
-          <el-date-picker
-            v-model="deptStatsForm.endDate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="结束日期"
-            style="width: 160px"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" :loading="deptStatsLoading" @click="fetchDeptStatsTree">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <p v-if="deptStatsSummaryText" class="dept-stats-summary">{{ deptStatsSummaryText }}</p>
-      <div class="dept-stats-table-wrap">
-        <el-table
-          v-loading="deptStatsLoading"
-          :data="deptStatsTreeData"
-          row-key="userId"
-          border
-          stripe
-          height="520"
-          default-expand-all
-          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-          style="width: 100%"
-        >
-          <el-table-column label="姓名 / 用户ID" prop="name" min-width="220" fixed show-overflow-tooltip>
-            <template slot-scope="scope">
-              <span>{{ scope.row.name || '-' }}</span>
-              <span class="dept-stats-user-id">{{ scope.row.userId }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="本人昨日买入" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.ownYestodayBuyAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="团队昨日买入" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.teamYestodayBuyAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="合计昨日买入" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.totalYestodayBuyAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="本人当日卖出" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.ownDailySellAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="团队当日卖出" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.teamDailySellAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="合计当日卖出" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.totalDailySellAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="本人当日买入" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.ownDailyBuyAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="团队当日买入" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.teamDailyBuyAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="合计当日买入" min-width="118" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.totalDailyBuyAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="本人差额" min-width="100" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.ownDiffAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="团队差额" min-width="100" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.teamDiffAmt) }}</template>
-          </el-table-column>
-          <el-table-column label="合计差额" min-width="100" align="right">
-            <template slot-scope="s">{{ formatDeptAmt(s.row.totalDiffAmt) }}</template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="deptStatsDialogVisible = false">关闭</el-button>
-      </div>
-    </el-dialog>
-
     <el-dialog title="报表导出" :visible.sync="exportDialogVisible" width="480px" @close="resetExportForm">
       <el-form ref="exportFormRef" :model="exportForm" :rules="exportRules" label-width="120px">
         <el-form-item label="报表日期" prop="reportDate">
@@ -415,11 +415,11 @@ function buildDeptTradeStatsTree(flatRows, departmentRows) {
     childrenByParent[pid].sort((x, y) =>
       compareDeptAmtDesc(statsByUserId[y].totalDiffAmt, statsByUserId[x].totalDiffAmt))
   })
-  function buildNode(uid) {
+  function buildNode(uid, depth) {
     const row = statsByUserId[uid]
     const childIds = childrenByParent[uid] || []
-    const kids = childIds.map(buildNode)
-    const node = { ...row }
+    const kids = childIds.map((cid) => buildNode(cid, depth + 1))
+    const node = { ...row, deptStatsDepth: depth }
     if (kids.length) node.children = kids
     return node
   }
@@ -429,7 +429,7 @@ function buildDeptTradeStatsTree(flatRows, departmentRows) {
     if (!p || !userIds.has(p)) roots.push(uid)
   })
   roots.sort((a, b) => compareDeptAmtDesc(statsByUserId[b].totalDiffAmt, statsByUserId[a].totalDiffAmt))
-  return roots.map(buildNode)
+  return roots.map((uid) => buildNode(uid, 0))
 }
 
 export default {
@@ -443,7 +443,7 @@ export default {
       exportLoading: false,
       checkUnsoldLoading: false,
       deptStatsLoading: false,
-      deptStatsDialogVisible: false,
+      activeTab: 'list',
       deptStatsForm: {
         startDate: '',
         endDate: ''
@@ -504,10 +504,53 @@ export default {
       }
     }
   },
+  computed: {
+    deptStatsTableHeight() {
+      return 'calc(100vh - 280px)'
+    }
+  },
   created() {
     this.fetchList()
   },
   methods: {
+    deptStatsRowDepth(row) {
+      const d = row && row.deptStatsDepth != null ? Number(row.deptStatsDepth) : 0
+      if (!Number.isFinite(d) || d < 0) return 0
+      return Math.min(d, 8)
+    },
+    deptStatsRowClassName({ row }) {
+      const level = this.deptStatsRowDepth(row)
+      return `dept-stats-tree-row dept-stats-tree-level-${level}`
+    },
+    deptStatsLevelIconClass(row) {
+      const level = this.deptStatsRowDepth(row)
+      const icons = [
+        'el-icon-office-building',
+        'el-icon-s-custom',
+        'el-icon-user',
+        'el-icon-connection',
+        'el-icon-share',
+        'el-icon-remove-outline'
+      ]
+      return icons[Math.min(level, icons.length - 1)]
+    },
+    handleMainTabClick(tab) {
+      if (!tab || tab.name !== 'deptStats') return
+      const sd = this.extractDateOnly(this.queryParams.reportStartTime)
+      const ed = this.extractDateOnly(this.queryParams.reportEndTime)
+      this.deptStatsForm = {
+        startDate: sd || '',
+        endDate: ed || ''
+      }
+      this.deptStatsTreeData = []
+      this.deptStatsSummaryText = ''
+      this.$nextTick(() => {
+        const tenantId = this.getTenantIdFromBusinessHeaders()
+        if (tenantId && this.deptStatsForm.startDate && this.deptStatsForm.endDate) {
+          this.fetchDeptStatsTree()
+        }
+      })
+    },
     fetchList() {
       this.loading = true
       getLbDailyUserTradeReportList(this.buildListParams())
@@ -663,28 +706,6 @@ export default {
         if (this.$refs.exportFormRef) this.$refs.exportFormRef.clearValidate()
       })
     },
-    openDeptStatsDialog() {
-      const sd = this.extractDateOnly(this.queryParams.reportStartTime)
-      const ed = this.extractDateOnly(this.queryParams.reportEndTime)
-      this.deptStatsForm = {
-        startDate: sd || '',
-        endDate: ed || ''
-      }
-      this.deptStatsTreeData = []
-      this.deptStatsSummaryText = ''
-      this.deptStatsDialogVisible = true
-      this.$nextTick(() => {
-        const tenantId = this.getTenantIdFromBusinessHeaders()
-        if (tenantId && this.deptStatsForm.startDate && this.deptStatsForm.endDate) {
-          this.fetchDeptStatsTree()
-        }
-      })
-    },
-    resetDeptStatsDialog() {
-      this.deptStatsForm = { startDate: '', endDate: '' }
-      this.deptStatsTreeData = []
-      this.deptStatsSummaryText = ''
-    },
     fetchAllLbDepartmentUsers() {
       const pageSize = 500
       let all = []
@@ -984,31 +1005,180 @@ export default {
       text-align: right;
     }
   }
-}
-</style>
-
-<style lang="scss">
-/* el-dialog 挂载到 body，需非 scoped */
-.dept-stats-dialog .dept-stats-filter {
-  margin-bottom: 8px;
-}
-
-.dept-stats-dialog .dept-stats-summary {
-  margin: 0 0 12px;
-  color: #606266;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.dept-stats-dialog .dept-stats-table-wrap {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.dept-stats-dialog .dept-stats-user-id {
-  display: block;
-  margin-top: 2px;
-  color: #909399;
-  font-size: 12px;
+
+  .daily-report-tabs ::v-deep .el-tabs__header {
+    margin-bottom: 16px;
+  }
+
+  .dept-stats-panel {
+    .dept-stats-filter {
+      margin-bottom: 8px;
+    }
+
+    .dept-stats-summary {
+      margin: 0 0 12px;
+      color: #606266;
+      font-size: 13px;
+      line-height: 20px;
+    }
+
+    .dept-stats-table-wrap {
+      width: 100%;
+      overflow-x: auto;
+    }
+
+    .dept-stats-name-wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .dept-stats-level-icon {
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .dept-stats-name-text {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .dept-stats-user-id {
+      flex: 0 1 auto;
+      min-width: 0;
+      margin-left: 4px;
+      color: #909399;
+      font-size: 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .dept-stats-tree-table ::v-deep td:first-child .cell {
+      white-space: nowrap;
+    }
+
+    /* 树表格层级：背景、左边线、整行字号与颜色 */
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-row td {
+      transition: background-color 0.15s ease;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-row:hover td {
+      background-color: #f0f7ff !important;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-0 td:first-child {
+      border-left: 4px solid #409eff;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-0 td {
+      background-color: #ecf5ff !important;
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-0 .dept-stats-level-icon {
+      color: #409eff;
+      font-size: 17px;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-1 td:first-child {
+      border-left: 4px solid #67c23a;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-1 td {
+      background-color: #f0f9eb !important;
+      font-size: 13px;
+      font-weight: 500;
+      color: #434343;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-1 .dept-stats-level-icon {
+      color: #67c23a;
+      font-size: 16px;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-2 td:first-child {
+      border-left: 4px solid #e6a23c;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-2 td {
+      background-color: #fdf6ec !important;
+      font-size: 13px;
+      font-weight: 400;
+      color: #606266;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-2 .dept-stats-level-icon {
+      color: #e6a23c;
+      font-size: 15px;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-3 td:first-child {
+      border-left: 4px solid #909399;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-3 td {
+      background-color: #f4f4f5 !important;
+      font-size: 13px;
+      font-weight: 400;
+      color: #606266;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-3 .dept-stats-level-icon {
+      color: #909399;
+      font-size: 14px;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-4 td:first-child {
+      border-left: 4px solid #c0c4cc;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-4 td {
+      background-color: #fafafa !important;
+      font-size: 12px;
+      color: #787b80;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-4 .dept-stats-level-icon {
+      color: #c0c4cc;
+      font-size: 14px;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-5 td:first-child,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-6 td:first-child,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-7 td:first-child,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-8 td:first-child {
+      border-left: 4px solid #dcdfe6;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-5 td,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-6 td,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-7 td,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-8 td {
+      background-color: #ffffff !important;
+      font-size: 12px;
+      color: #909399;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-5 .dept-stats-level-icon,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-6 .dept-stats-level-icon,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-7 .dept-stats-level-icon,
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-level-8 .dept-stats-level-icon {
+      color: #c0c4cc;
+      font-size: 13px;
+    }
+
+    .dept-stats-tree-table ::v-deep tbody tr.dept-stats-tree-row .dept-stats-user-id {
+      font-weight: 400;
+    }
+  }
 }
 </style>