wang
1 month ago
17 changed files with 2925 additions and 91 deletions
Binary file not shown.
File diff suppressed because it is too large
@ -0,0 +1,656 @@ |
|||
<!-- |
|||
* 律所活动统计报表 |
|||
* |
|||
* @Author: wzh |
|||
* @Date: 2026-02-10 |
|||
* @Copyright 1.0 |
|||
--> |
|||
<template> |
|||
<div class="law-firm-activity-statistics"> |
|||
<!---------- 查询表单form begin -----------> |
|||
<a-form class="smart-query-form"> |
|||
<a-row class="smart-query-form-row"> |
|||
<a-form-item label="执业机构" class="smart-query-form-item" v-if="isCeo"> |
|||
<DepartmentTreeSelect style="width: 250px" v-model:value="queryForm.firmId" placeholder="请选择执业机构" /> |
|||
</a-form-item> |
|||
<a-form-item label="统计年份" class="smart-query-form-item"> |
|||
<a-select v-model:value="queryForm.year" placeholder="请选择年份" style="width: 120px"> |
|||
<a-select-option v-for="year in yearOptions" :key="year" :value="year"> |
|||
{{ year }}年 |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item label="统计季度" class="smart-query-form-item"> |
|||
<a-select v-model:value="queryForm.quarter" placeholder="请选择季度" style="width: 120px"> |
|||
<a-select-option v-for="quarter in quarterOptions" :key="quarter.value" :value="quarter.value"> |
|||
{{ quarter.label }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item class="smart-query-form-item"> |
|||
<a-button type="primary" @click="onSearch"> |
|||
<template #icon> |
|||
<SearchOutlined /> |
|||
</template> |
|||
查询 |
|||
</a-button> |
|||
<a-button @click="resetQuery" class="smart-margin-left10"> |
|||
<template #icon> |
|||
<ReloadOutlined /> |
|||
</template> |
|||
重置 |
|||
</a-button> |
|||
</a-form-item> |
|||
<div style="margin-left: auto;"> |
|||
<a-button @click="handleExport" type="primary"> |
|||
<template #icon> |
|||
<ExportOutlined /> |
|||
</template> |
|||
导出 |
|||
</a-button> |
|||
</div> |
|||
</a-row> |
|||
</a-form> |
|||
<!---------- 查询表单form end -----------> |
|||
|
|||
<!---------- 统计表格 begin -----------> |
|||
<a-card size="small" :bordered="false" :hoverable="true"> |
|||
<div class="statistics-title">律所活动统计报表</div> |
|||
|
|||
<!-- 自定义表头 --> |
|||
<div class="custom-table-container"> |
|||
<table class="custom-table" border="1" cellspacing="0" cellpadding="0"> |
|||
<thead> |
|||
<!-- 第一行：序号 + 律所名称 + 活动分类 --> |
|||
<tr> |
|||
<th rowspan="2" class="fixed-col index-col">序号</th> |
|||
<th rowspan="2" class="fixed-col firm-col">律所名称</th> |
|||
<th rowspan="2" class="fixed-col lawyer-col">律师名称</th> |
|||
<th v-for="category in categoryStructure" :key="category.categoryId" :colspan="category.activityList.length" class="category-col"> |
|||
{{ category.categoryName }} |
|||
</th> |
|||
<th rowspan="2" class="fixed-col fixed-right total-count-col">服务总次数</th> |
|||
</tr> |
|||
<!-- 第二行：活动名称 --> |
|||
<tr> |
|||
<th v-for="activity in allActivities" :key="activity.activityId" class="activity-col"> |
|||
{{ activity.activityName }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<template v-for="(firm, firmIndex) in tableData" :key="firm.firmId"> |
|||
<!-- 律所汇总行 --> |
|||
<tr class="firm-row" @click="toggleExpand(firm.firmId)" :class="{ 'expanded': expandedFirms.includes(firm.firmId) }"> |
|||
<td class="fixed-col index-col" style="width: 60px; min-width: 60px; max-width: 40px;">{{ firmIndex + 1 }}</td> |
|||
<td class="fixed-col firm-name"> |
|||
<span class="expand-icon">{{ expandedFirms.includes(firm.firmId) ? '▼' : '▶' }}</span> |
|||
{{ firm.firmName }} |
|||
</td> |
|||
<td class="fixed-col lawyer-col">-</td> |
|||
<td v-for="activity in allActivities" :key="activity.activityId" class="data-col"> |
|||
{{ firm[`activity_${activity.activityId}`] || 0 }} |
|||
</td> |
|||
<td class="fixed-col fixed-right total-count">{{ firm.totalCount || 0 }}</td> |
|||
</tr> |
|||
<!-- 律师明细行 --> |
|||
<tr v-for="lawyer in firm.lawyerList" :key="lawyer.lawyerId" |
|||
v-show="expandedFirms.includes(firm.firmId)" |
|||
class="lawyer-row"> |
|||
<td class="fixed-col index-col" style="width: 40px; min-width: 40px; max-width: 40px;"></td> |
|||
<td class="fixed-col firm-name"></td> |
|||
<td class="fixed-col lawyer-name">{{ lawyer.lawyerName }}</td> |
|||
<td v-for="activity in allActivities" :key="activity.activityId" class="data-col"> |
|||
{{ lawyer[`activity_${activity.activityId}`] || 0 }} |
|||
</td> |
|||
<td class="fixed-col fixed-right total-count">{{ lawyer.totalCount || 0 }}</td> |
|||
</tr> |
|||
</template> |
|||
<!-- 合计行 --> |
|||
<tr class="total-row" v-if="tableData.length > 0"> |
|||
<td class="fixed-col index-col" style="width: 40px; min-width: 40px; max-width: 40px;">-</td> |
|||
<td class="fixed-col firm-name" style="font-weight: bold; color: #ff4d4f;">合计</td> |
|||
<td class="fixed-col lawyer-col" style="font-weight: bold; color: #ff4d4f;">-</td> |
|||
<td v-for="activity in allActivities" :key="activity.activityId" class="data-col" style="font-weight: bold; color: #ff4d4f;"> |
|||
{{ totalRow[`activity_${activity.activityId}`] || 0 }} |
|||
</td> |
|||
<td class="fixed-col fixed-right" style="font-weight: bold; color: #ff4d4f;"> |
|||
{{ totalRow.totalCount || 0 }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination-wrapper"> |
|||
<a-pagination |
|||
v-model:current="pagination.current" |
|||
v-model:pageSize="pagination.pageSize" |
|||
:total="pagination.total" |
|||
:pageSizeOptions="pagination.pageSizeOptions" |
|||
showSizeChanger |
|||
showQuickJumper |
|||
showTotal |
|||
@change="handleTableChange" |
|||
/> |
|||
</div> |
|||
</a-card> |
|||
<!---------- 统计表格 end -----------> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive, ref, onMounted, computed } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons-vue'; |
|||
import { smartSentry } from '/@/lib/smart-sentry'; |
|||
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const'; |
|||
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api'; |
|||
import { categoryApi } from '/@/api/business/category/category-api'; |
|||
import DepartmentTreeSelect from '/@/components/system/department-tree-select/index.vue'; |
|||
import { useUserStore } from '/@/store/modules/system/user'; |
|||
|
|||
// ---------------------------- 用户权限 ---------------------------- |
|||
|
|||
const userStore = useUserStore(); |
|||
const isCeo = computed(() => userStore.userRole === 'ceo'); |
|||
|
|||
// ---------------------------- 查询表单 ---------------------------- |
|||
|
|||
const yearOptions = ref([]); |
|||
const quarterOptions = ref([ |
|||
{ label: '第一季度', value: 1 }, |
|||
{ label: '第二季度', value: 2 }, |
|||
{ label: '第三季度', value: 3 }, |
|||
{ label: '第四季度', value: 4 } |
|||
]); |
|||
|
|||
const queryFormState = { |
|||
firmId: undefined, |
|||
year: new Date().getFullYear(), |
|||
quarter: Math.ceil((new Date().getMonth() + 1) / 3), |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}; |
|||
|
|||
const queryForm = reactive({ ...queryFormState }); |
|||
const tableLoading = ref(false); |
|||
const tableData = ref([]); |
|||
const total = ref(0); |
|||
|
|||
// 活动分类和活动名称数据结构 |
|||
const categoryStructure = ref([]); |
|||
|
|||
// 展开的律所ID列表 |
|||
const expandedFirms = ref([]); |
|||
|
|||
// 所有活动列表（平铺） |
|||
const allActivities = computed(() => { |
|||
const activities = []; |
|||
categoryStructure.value.forEach(category => { |
|||
if (category.activityList) { |
|||
activities.push(...category.activityList); |
|||
} |
|||
}); |
|||
return activities; |
|||
}); |
|||
|
|||
// 计算合计行 |
|||
const totalRow = computed(() => { |
|||
const row = { totalCount: 0 }; |
|||
|
|||
// 初始化每个活动的合计为0 |
|||
allActivities.value.forEach(activity => { |
|||
row[`activity_${activity.activityId}`] = 0; |
|||
}); |
|||
|
|||
// 累加每个律所的数据 |
|||
tableData.value.forEach(firm => { |
|||
// 累加总次数 |
|||
row.totalCount += firm.totalCount || 0; |
|||
|
|||
// 累加每个活动的次数 |
|||
allActivities.value.forEach(activity => { |
|||
const key = `activity_${activity.activityId}`; |
|||
row[key] += firm[key] || 0; |
|||
}); |
|||
}); |
|||
|
|||
return row; |
|||
}); |
|||
|
|||
// 分页配置 |
|||
const pagination = reactive({ |
|||
current: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
showSizeChanger: true, |
|||
showQuickJumper: true, |
|||
showTotal: (total) => `共${total}条`, |
|||
pageSizeOptions: PAGE_SIZE_OPTIONS |
|||
}); |
|||
|
|||
// 初始化年份选项 |
|||
function initYearOptions() { |
|||
const currentYear = new Date().getFullYear(); |
|||
for (let i = currentYear - 5; i <= currentYear; i++) { |
|||
yearOptions.value.push(i); |
|||
} |
|||
} |
|||
|
|||
// ---------------------------- 展开/收起功能 ---------------------------- |
|||
|
|||
function toggleExpand(firmId) { |
|||
const index = expandedFirms.value.indexOf(firmId); |
|||
if (index > -1) { |
|||
expandedFirms.value.splice(index, 1); |
|||
} else { |
|||
expandedFirms.value.push(firmId); |
|||
} |
|||
} |
|||
|
|||
// ---------------------------- 查询方法 ---------------------------- |
|||
|
|||
function resetQuery() { |
|||
Object.assign(queryForm, queryFormState); |
|||
pagination.current = 1; |
|||
pagination.pageSize = 10; |
|||
onSearch(); |
|||
} |
|||
|
|||
function onSearch() { |
|||
pagination.current = 1; |
|||
queryData(); |
|||
} |
|||
|
|||
function handleTableChange(pag) { |
|||
pagination.current = pag.current; |
|||
pagination.pageSize = pag.pageSize; |
|||
queryForm.pageNum = pag.current; |
|||
queryForm.pageSize = pag.pageSize; |
|||
queryData(); |
|||
} |
|||
|
|||
async function queryData() { |
|||
tableLoading.value = true; |
|||
try { |
|||
// 先获取活动分类结构 |
|||
await loadCategoryStructure(); |
|||
|
|||
// 查询统计数据 |
|||
const params = { |
|||
firmId: queryForm.firmId, |
|||
year: queryForm.year, |
|||
quarter: queryForm.quarter, |
|||
statisticsType: 'lawFirm', |
|||
pageNum: queryForm.pageNum, |
|||
pageSize: queryForm.pageSize |
|||
}; |
|||
|
|||
const result = await serviceApplicationsApi.statisticsFirmByActivity(params); |
|||
|
|||
// 处理数据，适配表格结构 |
|||
// 新接口返回分页格式 {pageNum, pageSize, total, pages, list} |
|||
const pageData = result.data || {}; |
|||
tableData.value = processStatisticsData(pageData.list || []); |
|||
total.value = pageData.total || 0; |
|||
pagination.total = total.value; |
|||
|
|||
} catch (error) { |
|||
smartSentry.captureError(error); |
|||
message.error('查询统计数据失败'); |
|||
} finally { |
|||
tableLoading.value = false; |
|||
} |
|||
} |
|||
|
|||
// 加载活动分类结构 |
|||
async function loadCategoryStructure() { |
|||
try { |
|||
// 使用新接口 /category/tree/child 获取活动分类和活动名称（无参数） |
|||
const result = await categoryApi.queryCategoryTreeChild(); |
|||
|
|||
// 接口返回的数据格式： |
|||
// [ |
|||
// { |
|||
// categoryId: 1, |
|||
// categoryName: '活动分类A', |
|||
// childrenGood: [ |
|||
// { goodsId: 1, goodsName: '活动a' }, |
|||
// { goodsId: 2, goodsName: '活动b' } |
|||
// ] |
|||
// } |
|||
// ] |
|||
const categories = result.data || []; |
|||
|
|||
// 转换为报表需要的格式 |
|||
categoryStructure.value = categories.map(category => ({ |
|||
categoryId: category.categoryId, |
|||
categoryName: category.categoryName, |
|||
activityList: (category.childrenGood || []).map(goods => ({ |
|||
activityId: goods.goodsId, |
|||
activityName: goods.goodsName |
|||
})) |
|||
})).filter(cat => cat.activityList.length > 0); |
|||
|
|||
} catch (error) { |
|||
console.error('加载活动分类结构失败:', error); |
|||
categoryStructure.value = []; |
|||
} |
|||
} |
|||
|
|||
// 处理统计数据，适配表格显示 |
|||
function processStatisticsData(data) { |
|||
if (!data || !Array.isArray(data)) return []; |
|||
|
|||
return data.map(item => { |
|||
const row = { |
|||
firmId: item.firmId, |
|||
firmName: item.firmName, |
|||
totalCount: item.totalCount || 0, |
|||
lawyerList: [] |
|||
}; |
|||
|
|||
// 填充律所每个活动的统计数据 |
|||
if (item.activityCountMap) { |
|||
Object.keys(item.activityCountMap).forEach(activityId => { |
|||
row[`activity_${activityId}`] = item.activityCountMap[activityId] || 0; |
|||
}); |
|||
} |
|||
|
|||
// 处理律师列表数据 |
|||
if (item.lawyerList && Array.isArray(item.lawyerList)) { |
|||
row.lawyerList = item.lawyerList.map(lawyer => { |
|||
const lawyerRow = { |
|||
lawyerId: lawyer.userId, |
|||
lawyerName: lawyer.lawyerName, |
|||
totalCount: lawyer.totalCount || 0 |
|||
}; |
|||
|
|||
// 填充律师每个活动的统计数据 |
|||
if (lawyer.activityList && Array.isArray(lawyer.activityList)) { |
|||
lawyer.activityList.forEach(activity => { |
|||
lawyerRow[`activity_${activity.activityId}`] = activity.count || 0; |
|||
}); |
|||
} |
|||
|
|||
return lawyerRow; |
|||
}); |
|||
} |
|||
|
|||
return row; |
|||
}); |
|||
} |
|||
|
|||
// 导出功能 |
|||
async function handleExport() { |
|||
try { |
|||
const params = { |
|||
firmId: queryForm.firmId, |
|||
year: queryForm.year, |
|||
quarter: queryForm.quarter, |
|||
statisticsType: 'lawFirm' |
|||
}; |
|||
|
|||
await serviceApplicationsApi.exportFirmActivityStatistics(params); |
|||
message.success('导出成功'); |
|||
} catch (error) { |
|||
smartSentry.captureError(error); |
|||
message.error('导出失败'); |
|||
} |
|||
} |
|||
|
|||
// ---------------------------- 生命周期 ---------------------------- |
|||
|
|||
onMounted(() => { |
|||
initYearOptions(); |
|||
queryData(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.law-firm-activity-statistics { |
|||
padding: 16px; |
|||
} |
|||
|
|||
.statistics-title { |
|||
text-align: center; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
margin-bottom: 16px; |
|||
color: #333; |
|||
} |
|||
|
|||
.smart-query-form { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.smart-query-form-row { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.smart-margin-left10 { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.custom-table-container { |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
margin-bottom: 16px; |
|||
border: 1px solid #d9d9d9; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.custom-table { |
|||
width: auto; |
|||
min-width: 100%; |
|||
border-collapse: collapse; |
|||
table-layout: fixed; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.custom-table th, |
|||
.custom-table td { |
|||
border: 1px solid #e8e8e8; |
|||
padding: 10px 8px; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.custom-table th { |
|||
background-color: #f5f5f5; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 固定列基础样式 */ |
|||
.fixed-col { |
|||
background-color: #fafafa; |
|||
font-weight: 500; |
|||
position: sticky; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* 序号列 - 第一列固定 */ |
|||
.index-col { |
|||
width: 40px !important; |
|||
min-width: 40px !important; |
|||
max-width: 40px !important; |
|||
left: 0 !important; |
|||
z-index: 3 !important; |
|||
text-align: center; |
|||
padding: 8px 2px !important; |
|||
} |
|||
|
|||
/* 律所名称列 - 第二列固定 */ |
|||
.firm-col, |
|||
.firm-name { |
|||
width: 150px; |
|||
min-width: 150px; |
|||
max-width: 180px; |
|||
left: 40px; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* 律师名称列 - 第三列固定 */ |
|||
.lawyer-col, |
|||
.lawyer-name { |
|||
width: 120px; |
|||
min-width: 120px; |
|||
max-width: 140px; |
|||
left: 190px; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* 右侧固定列 */ |
|||
.fixed-right { |
|||
right: 0; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* 表头固定列 */ |
|||
.custom-table thead th.fixed-col { |
|||
z-index: 3; |
|||
} |
|||
|
|||
.total-count-col { |
|||
width: 100px; |
|||
min-width: 100px; |
|||
} |
|||
|
|||
/* 分类列样式 - 第一行 */ |
|||
.category-col { |
|||
color: #fff; |
|||
font-weight: 600; |
|||
font-size: 11px; |
|||
padding: 8px 6px; |
|||
line-height: 1.4; |
|||
min-width: 180px; |
|||
max-width: 250px; |
|||
} |
|||
|
|||
/* 活动列样式 - 第二行 */ |
|||
.activity-col { |
|||
background-color: #f0f5ff; |
|||
color: #1890ff; |
|||
font-weight: 500; |
|||
font-size: 10px; |
|||
padding: 6px 2px; |
|||
width: 60px; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.data-col { |
|||
color: #333; |
|||
font-size: 13px; |
|||
min-width: 80px; |
|||
} |
|||
|
|||
/* 合计行样式 */ |
|||
.total-row { |
|||
background-color: #fff2f0; |
|||
} |
|||
|
|||
.total-row td { |
|||
border-top: 2px solid #ff4d4f; |
|||
} |
|||
|
|||
.firm-row { |
|||
cursor: pointer; |
|||
background: linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%); |
|||
} |
|||
|
|||
.firm-row:hover { |
|||
background: linear-gradient(135deg, #d9f7be 0%, #bae7ff 100%); |
|||
} |
|||
|
|||
.firm-row.expanded { |
|||
background: linear-gradient(135deg, #b7eb8f 0%, #91d5ff 100%); |
|||
} |
|||
|
|||
.firm-name { |
|||
text-align: left; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.expand-icon { |
|||
margin-right: 8px; |
|||
color: #52c41a; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.lawyer-row { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.lawyer-row:hover { |
|||
background-color: #e6f7ff; |
|||
} |
|||
|
|||
.lawyer-name { |
|||
text-align: center; |
|||
color: #1890ff; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.total-count { |
|||
color: #52c41a; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.total-duration { |
|||
color: #faad14; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 分页样式 */ |
|||
.pagination-wrapper { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 16px; |
|||
padding-top: 16px; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
/* 响应式处理 */ |
|||
@media (max-width: 1200px) { |
|||
.custom-table { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.custom-table th, |
|||
.custom-table td { |
|||
padding: 6px 4px; |
|||
} |
|||
|
|||
.category-col { |
|||
min-width: 120px; |
|||
} |
|||
|
|||
.activity-col { |
|||
min-width: 100px; |
|||
} |
|||
} |
|||
|
|||
.total-count { |
|||
color: #52c41a; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.total-duration { |
|||
color: #1890ff; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.pagination-wrapper { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
padding-top: 16px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,549 @@ |
|||
<!-- |
|||
* 律师活动统计报表 |
|||
* |
|||
* @Author: wzh |
|||
* @Date: 2026-02-10 |
|||
* @Copyright 1.0 |
|||
--> |
|||
<template> |
|||
<div class="lawyer-activity-statistics"> |
|||
<!---------- 查询表单form begin -----------> |
|||
<a-form class="smart-query-form"> |
|||
<a-row class="smart-query-form-row"> |
|||
<a-form-item label="统计年份" class="smart-query-form-item"> |
|||
<a-select v-model:value="queryForm.year" placeholder="请选择年份" style="width: 120px"> |
|||
<a-select-option v-for="year in yearOptions" :key="year" :value="year"> |
|||
{{ year }}年 |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item label="统计季度" class="smart-query-form-item"> |
|||
<a-select v-model:value="queryForm.quarter" placeholder="请选择季度" style="width: 120px"> |
|||
<a-select-option v-for="quarter in quarterOptions" :key="quarter.value" :value="quarter.value"> |
|||
{{ quarter.label }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item class="smart-query-form-item"> |
|||
<a-button type="primary" @click="onSearch"> |
|||
<template #icon> |
|||
<SearchOutlined /> |
|||
</template> |
|||
查询 |
|||
</a-button> |
|||
<a-button @click="resetQuery" class="smart-margin-left10"> |
|||
<template #icon> |
|||
<ReloadOutlined /> |
|||
</template> |
|||
重置 |
|||
</a-button> |
|||
</a-form-item> |
|||
<div style="margin-left: auto;"> |
|||
<a-button @click="handleExport" type="primary"> |
|||
<template #icon> |
|||
<ExportOutlined /> |
|||
</template> |
|||
导出 |
|||
</a-button> |
|||
</div> |
|||
</a-row> |
|||
</a-form> |
|||
<!---------- 查询表单form end -----------> |
|||
|
|||
<!---------- 统计表格 begin -----------> |
|||
<a-card size="small" :bordered="false" :hoverable="true"> |
|||
<div class="statistics-title">律师活动统计报表</div> |
|||
|
|||
<!-- 自定义表头 --> |
|||
<div class="custom-table-header"> |
|||
<table class="header-table" border="1" cellspacing="0" cellpadding="0"> |
|||
<thead> |
|||
<!-- 第一行：序号 + 活动分类 --> |
|||
<tr> |
|||
<th rowspan="2" class="fixed-col index-col">序号</th> |
|||
<th rowspan="2" class="fixed-col fixed-left">律师名称</th> |
|||
<th v-for="category in categoryStructure" :key="category.categoryId" :colspan="category.activityList.length" class="category-col" :title="category.categoryName"> |
|||
{{ category.categoryName }} |
|||
</th> |
|||
<th rowspan="2" class="fixed-col fixed-right">服务总次数</th> |
|||
</tr> |
|||
<!-- 第二行：活动名称 --> |
|||
<tr> |
|||
<th v-for="activity in allActivities" :key="activity.activityId" class="activity-col" :title="activity.activityName"> |
|||
{{ activity.activityName }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(record, index) in tableData" :key="record.lawyerId"> |
|||
<td class="fixed-col index-col">{{ index + 1 }}</td> |
|||
<td class="fixed-col fixed-left lawyer-name">{{ record.lawyerName }}</td> |
|||
<td v-for="activity in allActivities" :key="activity.activityId" class="data-col"> |
|||
{{ record[`activity_${activity.activityId}`] || 0 }} |
|||
</td> |
|||
<td class="fixed-col fixed-right total-count">{{ record.totalCount || 0 }}</td> |
|||
</tr> |
|||
<!-- 合计行 --> |
|||
<tr class="total-row" v-if="tableData.length > 0"> |
|||
<td class="fixed-col index-col" style="font-weight: bold; color: #ff4d4f;">-</td> |
|||
<td class="fixed-col fixed-left" style="font-weight: bold; color: #ff4d4f;">合计</td> |
|||
<td v-for="activity in allActivities" :key="activity.activityId" class="data-col" style="font-weight: bold; color: #ff4d4f;"> |
|||
{{ totalRow[`activity_${activity.activityId}`] || 0 }} |
|||
</td> |
|||
<td class="fixed-col fixed-right" style="font-weight: bold; color: #ff4d4f;"> |
|||
{{ totalRow.totalCount || 0 }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination-wrapper"> |
|||
<a-pagination |
|||
v-model:current="pagination.current" |
|||
v-model:pageSize="pagination.pageSize" |
|||
:total="pagination.total" |
|||
:pageSizeOptions="pagination.pageSizeOptions" |
|||
showSizeChanger |
|||
showQuickJumper |
|||
showTotal |
|||
@change="handleTableChange" |
|||
/> |
|||
</div> |
|||
</a-card> |
|||
<!---------- 统计表格 end -----------> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive, ref, onMounted, computed } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons-vue'; |
|||
import { smartSentry } from '/@/lib/smart-sentry'; |
|||
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const'; |
|||
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api'; |
|||
import { categoryApi } from '/@/api/business/category/category-api'; |
|||
|
|||
// ---------------------------- 查询表单 ---------------------------- |
|||
|
|||
const yearOptions = ref([]); |
|||
const quarterOptions = ref([ |
|||
{ label: '第一季度', value: 1 }, |
|||
{ label: '第二季度', value: 2 }, |
|||
{ label: '第三季度', value: 3 }, |
|||
{ label: '第四季度', value: 4 } |
|||
]); |
|||
|
|||
const queryFormState = { |
|||
year: new Date().getFullYear(), |
|||
quarter: Math.ceil((new Date().getMonth() + 1) / 3), |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}; |
|||
|
|||
const queryForm = reactive({ ...queryFormState }); |
|||
const tableLoading = ref(false); |
|||
const tableData = ref([]); |
|||
const total = ref(0); |
|||
|
|||
// 活动分类和活动名称数据结构 |
|||
const categoryStructure = ref([]); |
|||
|
|||
// 所有活动列表（扁平化） |
|||
const allActivities = computed(() => { |
|||
const activities = []; |
|||
categoryStructure.value.forEach(category => { |
|||
if (category.activityList) { |
|||
activities.push(...category.activityList); |
|||
} |
|||
}); |
|||
return activities; |
|||
}); |
|||
|
|||
// 计算合计行 |
|||
const totalRow = computed(() => { |
|||
const row = { totalCount: 0 }; |
|||
|
|||
// 初始化每个活动的合计为0 |
|||
allActivities.value.forEach(activity => { |
|||
row[`activity_${activity.activityId}`] = 0; |
|||
}); |
|||
|
|||
// 累加每行的数据 |
|||
tableData.value.forEach(record => { |
|||
// 累加总次数 |
|||
row.totalCount += record.totalCount || 0; |
|||
|
|||
// 累加每个活动的次数 |
|||
allActivities.value.forEach(activity => { |
|||
const key = `activity_${activity.activityId}`; |
|||
row[key] += record[key] || 0; |
|||
}); |
|||
}); |
|||
|
|||
return row; |
|||
}); |
|||
|
|||
// 分页配置 |
|||
const pagination = reactive({ |
|||
current: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
showSizeChanger: true, |
|||
showQuickJumper: true, |
|||
showTotal: (total) => `共${total}条`, |
|||
pageSizeOptions: PAGE_SIZE_OPTIONS |
|||
}); |
|||
|
|||
// 初始化年份选项 |
|||
function initYearOptions() { |
|||
const currentYear = new Date().getFullYear(); |
|||
for (let i = currentYear - 5; i <= currentYear; i++) { |
|||
yearOptions.value.push(i); |
|||
} |
|||
} |
|||
|
|||
// ---------------------------- 查询方法 ---------------------------- |
|||
|
|||
function resetQuery() { |
|||
Object.assign(queryForm, queryFormState); |
|||
pagination.current = 1; |
|||
pagination.pageSize = 10; |
|||
onSearch(); |
|||
} |
|||
|
|||
function onSearch() { |
|||
pagination.current = 1; |
|||
queryData(); |
|||
} |
|||
|
|||
function handleTableChange(page, pageSize) { |
|||
pagination.current = page; |
|||
pagination.pageSize = pageSize; |
|||
queryForm.pageNum = page; |
|||
queryForm.pageSize = pageSize; |
|||
queryData(); |
|||
} |
|||
|
|||
async function queryData() { |
|||
console.log('queryData 被调用'); |
|||
tableLoading.value = true; |
|||
try { |
|||
// 先获取活动分类结构 |
|||
console.log('准备调用 loadCategoryStructure'); |
|||
await loadCategoryStructure(); |
|||
console.log('loadCategoryStructure 完成'); |
|||
|
|||
// 查询统计数据 |
|||
const params = { |
|||
year: queryForm.year, |
|||
quarter: queryForm.quarter, |
|||
statisticsType: 'lawyer', |
|||
pageNum: queryForm.pageNum, |
|||
pageSize: queryForm.pageSize |
|||
}; |
|||
|
|||
const result = await serviceApplicationsApi.statisticsByActivity(params); |
|||
|
|||
// 处理数据，适配表格结构 |
|||
// 新接口返回分页格式 {pageNum, pageSize, total, pages, list} |
|||
const pageData = result.data || {}; |
|||
tableData.value = processStatisticsData(pageData.list || []); |
|||
total.value = pageData.total || 0; |
|||
pagination.total = total.value; |
|||
|
|||
} catch (error) { |
|||
smartSentry.captureError(error); |
|||
message.error('查询统计数据失败'); |
|||
} finally { |
|||
tableLoading.value = false; |
|||
} |
|||
} |
|||
|
|||
// 加载活动分类结构 |
|||
async function loadCategoryStructure() { |
|||
console.log('开始加载活动分类结构...'); |
|||
try { |
|||
// 使用新接口 /category/tree/child 获取活动分类和活动名称（无参数） |
|||
console.log('调用 categoryApi.queryCategoryTreeChild()'); |
|||
const result = await categoryApi.queryCategoryTreeChild(); |
|||
console.log('活动分类接口返回:', result); |
|||
|
|||
// 接口返回的数据格式： |
|||
// [ |
|||
// { |
|||
// categoryId: 1, |
|||
// categoryName: '活动分类A', |
|||
// childrenGood: [ |
|||
// { goodsId: 1, goodsName: '活动a' }, |
|||
// { goodsId: 2, goodsName: '活动b' } |
|||
// ] |
|||
// } |
|||
// ] |
|||
const categories = result.data || []; |
|||
|
|||
// 转换为报表需要的格式 |
|||
categoryStructure.value = categories.map(category => ({ |
|||
categoryId: category.categoryId, |
|||
categoryName: category.categoryName, |
|||
activityList: (category.childrenGood || []).map(goods => ({ |
|||
activityId: goods.goodsId, |
|||
activityName: goods.goodsName |
|||
})) |
|||
})).filter(cat => cat.activityList.length > 0); |
|||
|
|||
} catch (error) { |
|||
console.error('加载活动分类结构失败:', error); |
|||
categoryStructure.value = []; |
|||
} |
|||
} |
|||
|
|||
// 处理统计数据，适配表格显示 |
|||
function processStatisticsData(data) { |
|||
if (!data || !Array.isArray(data)) return []; |
|||
|
|||
return data.map(item => { |
|||
const row = { |
|||
lawyerId: item.userId, |
|||
lawyerName: item.lawyerName, |
|||
totalCount: item.totalCount || 0 |
|||
}; |
|||
|
|||
// 从 activityList 填充每个活动的统计数据 |
|||
if (item.activityList && Array.isArray(item.activityList)) { |
|||
item.activityList.forEach(activity => { |
|||
row[`activity_${activity.activityId}`] = activity.count || 0; |
|||
}); |
|||
} |
|||
|
|||
return row; |
|||
}); |
|||
} |
|||
|
|||
// 导出功能 |
|||
async function handleExport() { |
|||
try { |
|||
const params = { |
|||
year: queryForm.year, |
|||
quarter: queryForm.quarter, |
|||
statisticsType: 'lawyer' |
|||
}; |
|||
|
|||
await serviceApplicationsApi.exportLawyerActivityStatistics(params); |
|||
message.success('导出成功'); |
|||
} catch (error) { |
|||
smartSentry.captureError(error); |
|||
message.error('导出失败'); |
|||
} |
|||
} |
|||
|
|||
// ---------------------------- 生命周期 ---------------------------- |
|||
|
|||
onMounted(() => { |
|||
console.log('律师报表页面 onMounted 被调用'); |
|||
initYearOptions(); |
|||
console.log('准备调用 queryData'); |
|||
queryData(); |
|||
console.log('onMounted 完成'); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.lawyer-activity-statistics { |
|||
padding: 16px; |
|||
} |
|||
|
|||
.statistics-title { |
|||
text-align: center; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
margin-bottom: 16px; |
|||
color: #333; |
|||
} |
|||
|
|||
.smart-query-form { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.smart-query-form-row { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.smart-margin-left10 { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
/* 自定义表格样式 */ |
|||
.custom-table-header { |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
margin-bottom: 16px; |
|||
border: 1px solid #d9d9d9; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.header-table { |
|||
width: auto; |
|||
min-width:100%; |
|||
border-collapse: collapse; |
|||
table-layout: auto; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.header-table th, |
|||
.header-table td { |
|||
border: 1px solid #e8e8e8; |
|||
padding: 10px 6px; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.header-table thead th { |
|||
background-color: #f5f5f5; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 固定列样式 */ |
|||
.fixed-col { |
|||
background-color: #fafafa; |
|||
font-weight: 500; |
|||
width: 90px; |
|||
min-width: 90px; |
|||
position: sticky; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* 序号列 - 第一列固定 */ |
|||
.index-col { |
|||
left: 0; |
|||
width: 40px !important; |
|||
min-width: 40px !important; |
|||
max-width: 40px !important; |
|||
text-align: center; |
|||
z-index: 3; |
|||
padding: 8px 2px !important; |
|||
} |
|||
|
|||
/* 左侧固定列 - 律师名称 */ |
|||
.fixed-left { |
|||
left: 40px; |
|||
} |
|||
|
|||
/* 右侧固定列 */ |
|||
.fixed-right { |
|||
right: 0; |
|||
} |
|||
|
|||
/* 表头固定列 */ |
|||
.header-table thead th.fixed-col { |
|||
z-index: 3; |
|||
} |
|||
|
|||
.lawyer-name { |
|||
font-weight: bold; |
|||
color: #1890ff; |
|||
} |
|||
|
|||
.total-count { |
|||
color: #52c41a; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.total-duration { |
|||
color: #faad14; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 分类列样式 - 第一行 */ |
|||
.category-col { |
|||
color: #fff; |
|||
font-weight: 600; |
|||
font-size: 12px; |
|||
padding: 10px 4px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
/* 活动列样式 - 第二行 */ |
|||
.activity-col { |
|||
background-color: #f0f5ff; |
|||
color: #1890ff; |
|||
font-weight: 500; |
|||
font-size: 10px; |
|||
padding: 6px 2px; |
|||
width: 60px; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
/* 数据列样式 */ |
|||
.data-col { |
|||
color: #333; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
/* 合计行样式 */ |
|||
.total-row { |
|||
background-color: #fff2f0; |
|||
} |
|||
|
|||
.total-row td { |
|||
border-top: 2px solid #ff4d4f; |
|||
} |
|||
|
|||
/* 数据行hover效果 */ |
|||
.header-table tbody tr:hover { |
|||
background-color: #e6f7ff; |
|||
} |
|||
|
|||
/* 分页样式 */ |
|||
.pagination-wrapper { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 16px; |
|||
padding-top: 16px; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
/* 活动列样式 */ |
|||
.activity-col { |
|||
background-color: #f6ffed; |
|||
color: #52c41a; |
|||
font-weight: 500; |
|||
min-width: 80px; |
|||
} |
|||
|
|||
/* 数据列样式 */ |
|||
.data-col { |
|||
min-width: 80px; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 分页样式 */ |
|||
.pagination-wrapper { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 16px; |
|||
padding-top: 16px; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
/* 响应式处理 */ |
|||
@media (max-width: 1200px) { |
|||
.header-table { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.header-table th, |
|||
.header-table td { |
|||
padding: 6px 8px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,378 @@ |
|||
<template> |
|||
<div class="firm-statistics-detail"> |
|||
|
|||
<!-- 查询条件和导出按钮 --> |
|||
<div class="query-section"> |
|||
<a-form layout="inline" :model="localQueryForm"> |
|||
<a-form-item label="年度"> |
|||
<a-select v-model:value="localQueryForm.year" placeholder="请选择年度" style="width: 120px"> |
|||
<a-select-option v-for="year in yearOptions" :key="year" :value="year">{{ year }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item label="季度"> |
|||
<a-select v-model:value="localQueryForm.quarter" placeholder="请选择季度" style="width: 120px"> |
|||
<a-select-option v-for="quarter in quarterOptions" :key="quarter.value" :value="quarter.value">{{ quarter.label }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item> |
|||
<a-button type="primary" @click="handleQuery" :loading="loading"> |
|||
<SearchOutlined /> |
|||
查询 |
|||
</a-button> |
|||
<a-button @click="handleReset" style="margin-left: 8px;"> |
|||
<ReloadOutlined /> |
|||
重置 |
|||
</a-button> |
|||
</a-form-item> |
|||
<a-form-item style="margin-left: auto;"> |
|||
<a-button type="primary" @click="handleExport" :loading="exportLoading"> |
|||
<ExportOutlined /> |
|||
导出 |
|||
</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</div> |
|||
|
|||
<!-- 统计报表 --> |
|||
<div class="statistics-report-container"> |
|||
<!-- 报表标题 --> |
|||
<div class="report-header"> |
|||
<h1>本所律师参与公益法律服务统计表</h1> |
|||
</div> |
|||
|
|||
<!-- 加载状态 --> |
|||
<div v-if="loading" class="loading-section"> |
|||
<a-spin size="large" /> |
|||
<div>正在加载数据...</div> |
|||
</div> |
|||
|
|||
<!-- 报表表格 --> |
|||
<div v-else class="report-table"> |
|||
<!-- 表头 --> |
|||
<div class="report-row header-row"> |
|||
<div class="report-cell">序号</div> |
|||
<div class="report-cell">律师名称</div> |
|||
<div class="report-cell">执业证号</div> |
|||
<div class="report-cell">季度累计服务时长</div> |
|||
<div class="report-cell">季度累计服务成本</div> |
|||
<div class="report-cell">年度累计服务时长</div> |
|||
<div class="report-cell">年度累计服务成本</div> |
|||
</div> |
|||
|
|||
<!-- 数据行 --> |
|||
<template v-for="(item, index) in tableData" :key="index"> |
|||
<!-- 律师数据行 --> |
|||
<div class="report-row data-row"> |
|||
<div class="report-cell">{{ index + 1 }}</div> |
|||
<div class="report-cell">{{ item.lawyerName || '-' }}</div> |
|||
<div class="report-cell">{{ item.certificateNumber || '-' }}</div> |
|||
<div class="report-cell">{{ formatNumber(item.quarterlyServiceDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(item.quarterlyServiceCost) }}</div> |
|||
<div class="report-cell">{{ formatNumber(item.annualServiceDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(item.annualServiceCost) }}</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 汇总行 --> |
|||
<div v-if="summaryData" class="report-row summary-row"> |
|||
<div class="report-cell">汇总</div> |
|||
<div class="report-cell">-</div> |
|||
<div class="report-cell">-</div> |
|||
<div class="report-cell">{{ formatNumber(summaryData.totalQuarterlyDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(summaryData.totalQuarterlyCost) }}</div> |
|||
<div class="report-cell">{{ formatNumber(summaryData.totalAnnualDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(summaryData.totalAnnualCost) }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, onMounted, watch, reactive } from 'vue'; |
|||
import { ExportOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api'; |
|||
|
|||
// 接收父组件传递的参数 |
|||
const props = defineProps({ |
|||
params: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}); |
|||
|
|||
const emit = defineEmits(['back']); |
|||
|
|||
// 使用 computed 或 ref 来访问 params |
|||
const params = computed(() => props.params || {}); |
|||
|
|||
const exportLoading = ref(false); |
|||
const tableData = ref([]); |
|||
const loading = ref(false); |
|||
|
|||
// 本地查询表单 |
|||
const localQueryForm = reactive({ |
|||
year: new Date().getFullYear(), |
|||
quarter: null |
|||
}); |
|||
|
|||
// 年度选项 |
|||
const yearOptions = ref([]); |
|||
// 季度选项 |
|||
const quarterOptions = ref([ |
|||
{ value: 1, label: '第一季度' }, |
|||
{ value: 2, label: '第二季度' }, |
|||
{ value: 3, label: '第三季度' }, |
|||
{ value: 4, label: '第四季度' } |
|||
]); |
|||
|
|||
// 初始化年度选项 |
|||
function initYearOptions() { |
|||
const currentYear = new Date().getFullYear(); |
|||
const years = []; |
|||
for (let i = currentYear - 5; i <= currentYear + 1; i++) { |
|||
years.push(i); |
|||
} |
|||
yearOptions.value = years; |
|||
} |
|||
|
|||
// 查询按钮点击事件 |
|||
async function handleQuery() { |
|||
loading.value = true; |
|||
try { |
|||
const queryParams = { |
|||
year: localQueryForm.year, |
|||
quarter: localQueryForm.quarter, |
|||
firmId: props.params?.firmId |
|||
}; |
|||
|
|||
const response = await serviceApplicationsApi.statistics(queryParams); |
|||
tableData.value = response.data || []; |
|||
|
|||
} catch (error) { |
|||
message.error('查询失败'); |
|||
console.error('查询失败:', error); |
|||
} finally { |
|||
loading.value = false; |
|||
} |
|||
} |
|||
|
|||
// 重置查询条件 |
|||
function handleReset() { |
|||
localQueryForm.quarter = null; |
|||
// 重置后自动查询 |
|||
handleQuery(); |
|||
} |
|||
|
|||
// 计算汇总数据 |
|||
const summaryData = computed(() => { |
|||
if (!tableData.value || tableData.value.length === 0) { |
|||
return null; |
|||
} |
|||
|
|||
const summary = { |
|||
totalQuarterlyDuration: 0, |
|||
totalQuarterlyCost: 0, |
|||
totalAnnualDuration: 0, |
|||
totalAnnualCost: 0 |
|||
}; |
|||
|
|||
tableData.value.forEach(item => { |
|||
summary.totalQuarterlyDuration += Number(item.quarterlyServiceDuration) || 0; |
|||
summary.totalQuarterlyCost += Number(item.quarterlyServiceCost) || 0; |
|||
summary.totalAnnualDuration += Number(item.annualServiceDuration) || 0; |
|||
summary.totalAnnualCost += Number(item.annualServiceCost) || 0; |
|||
}); |
|||
|
|||
return summary; |
|||
}); |
|||
|
|||
// 格式化数字 |
|||
function formatNumber(value) { |
|||
if (value === null || value === undefined) return '-'; |
|||
const num = Number(value); |
|||
return isNaN(num) ? '-' : num.toFixed(2); |
|||
} |
|||
|
|||
// 格式化货币 |
|||
function formatCurrency(value) { |
|||
if (value === null || value === undefined) return '-'; |
|||
const num = Number(value); |
|||
return isNaN(num) ? '-' : `¥${num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`; |
|||
} |
|||
|
|||
// 导出Excel |
|||
async function handleExport() { |
|||
if (!tableData.value || tableData.value.length === 0) { |
|||
message.warning('暂无数据可导出'); |
|||
return; |
|||
} |
|||
|
|||
exportLoading.value = true; |
|||
try { |
|||
console.log('开始导出律所统计详情...'); |
|||
const exportParams = { |
|||
quarter: props.params.quarter, |
|||
year: props.params.year, |
|||
firmId: props.params.firmId |
|||
// 去除分页参数，导出所有数据 |
|||
}; |
|||
|
|||
await serviceApplicationsApi.exportLawyer(exportParams); |
|||
message.success('导出成功'); |
|||
console.log('律所统计详情导出成功'); |
|||
} catch (error) { |
|||
message.error('导出失败'); |
|||
console.error('律所统计详情导出失败:', error); |
|||
} finally { |
|||
exportLoading.value = false; |
|||
} |
|||
} |
|||
|
|||
// 监听参数变化，重新获取数据 |
|||
watch(() => props.params, (newParams) => { |
|||
if (newParams) { |
|||
// 同步参数到本地表单 |
|||
if (newParams.year) { |
|||
localQueryForm.year = newParams.year; |
|||
} |
|||
if (newParams.quarter !== undefined) { |
|||
localQueryForm.quarter = newParams.quarter; |
|||
} |
|||
// 自动调用查询 |
|||
handleQuery(); |
|||
} |
|||
}, { immediate: true, deep: true }); |
|||
|
|||
onMounted(() => { |
|||
console.log('律师统计详情组件已加载，参数:', props.params); |
|||
initYearOptions(); |
|||
// 如果没有props参数，使用默认参数查询 |
|||
if (!props.params || !props.params.year) { |
|||
handleQuery(); |
|||
} |
|||
}); |
|||
</script> |
|||
<style scoped> |
|||
.firm-statistics-detail { |
|||
padding: 0 16px; |
|||
} |
|||
|
|||
.detail-header { |
|||
margin-bottom: 20px; |
|||
padding: 16px 0; |
|||
} |
|||
|
|||
.back-btn { |
|||
color: #1e3a8a; |
|||
} |
|||
|
|||
.query-section { |
|||
margin-bottom: 20px; |
|||
padding: 16px; |
|||
background: #f5f5f5; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.query-section :deep(.ant-form) { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
} |
|||
|
|||
.query-section :deep(.ant-form-item:last-child) { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.statistics-report-container { |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.report-header { |
|||
background: #f5f5f5; |
|||
padding: 20px; |
|||
text-align: center; |
|||
border-bottom: 1px solid #ddd; |
|||
} |
|||
|
|||
.report-header h1 { |
|||
margin: 0 0 8px 0; |
|||
font-size: 24px; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.report-subtitle { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.loading-section { |
|||
padding: 60px 20px; |
|||
text-align: center; |
|||
background: #fff; |
|||
} |
|||
|
|||
.loading-section div:last-child { |
|||
margin-top: 16px; |
|||
color: #666; |
|||
} |
|||
|
|||
.report-table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
.report-row { |
|||
display: flex; |
|||
width: 100%; |
|||
} |
|||
|
|||
.report-cell { |
|||
padding: 12px; |
|||
border-right: 1px solid #ddd; |
|||
border-bottom: 1px solid #ddd; |
|||
text-align: center; |
|||
min-height: 50px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
/* 所有列平分宽度 */ |
|||
.report-cell { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.report-cell:last-child { |
|||
border-right: none; |
|||
} |
|||
|
|||
.header-row { |
|||
background-color: #0044cc; |
|||
color: white; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.data-row { |
|||
background-color: white; |
|||
color: #333; |
|||
} |
|||
|
|||
.summary-row { |
|||
background-color: #f0f0f0; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
/* 最后一行单元格没有下边框 */ |
|||
.report-row:last-child .report-cell { |
|||
border-bottom: none; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue