feat:报表

src/components/system/service-count/firm-statistics-detail.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="firm-statistics-detail">
+    <!-- 返回按钮和标题 -->
+    <div class="detail-header">
+      <a-button type="link" @click="handleBack" class="back-btn">
+        <ArrowLeftOutlined />
+        返回查询
+      </a-button>
+      <div class="detail-title">
+        <h2>律所统计详情</h2>
+        <div class="detail-subtitle">统计时间：{{ queryParams.year }}年第{{ queryParams.quarter }}季度</div>
+      </div>
+    </div>
+
+    <!-- 导出按钮 -->
+    <div class="export-section">
+      <a-button type="primary" @click="handleExport" :loading="exportLoading">
+        <ExportOutlined />
+        导出Excel
+      </a-button>
+    </div>
+
+    <!-- Excel样式表格 -->
+    <div class="excel-table-container">
+      <div class="excel-table-header">
+        <div class="excel-table-title">律所服务统计报表</div>
+        <div class="excel-table-subtitle">统计时间：{{ queryParams.year }}年第{{ queryParams.quarter }}季度</div>
+      </div>
+      
+      <div class="excel-table">
+        <!-- 表头 -->
+        <div class="excel-row excel-header">
+          <div class="excel-cell" style="width: 15%;">序号</div>
+          <div class="excel-cell" style="width: 25%;">律所名称</div>
+          <div class="excel-cell" style="width: 15%;">季度累计服务时长</div>
+          <div class="excel-cell" style="width: 15%;">季度累计服务成本</div>
+          <div class="excel-cell" style="width: 15%;">年度累计服务时长</div>
+          <div class="excel-cell" style="width: 15%;">年度累计服务成本</div>
+        </div>
+        
+        <!-- 数据行 -->
+        <div v-for="(item, index) in tableData" :key="index" class="excel-row excel-data">
+          <div class="excel-cell" style="width: 15%;">{{ index + 1 }}</div>
+          <div class="excel-cell" style="width: 25%;">{{ item.firmName || '-' }}</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatNumber(item.quarterlyServiceDuration) }}</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(item.quarterlyServiceCost) }}</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatNumber(item.annualServiceDuration) }}</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(item.annualServiceCost) }}</div>
+        </div>
+        
+        <!-- 汇总行 -->
+        <div v-if="summaryData" class="excel-row excel-summary">
+          <div class="excel-cell" style="width: 15%;">汇总</div>
+          <div class="excel-cell" style="width: 25%;">-</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatNumber(summaryData.totalQuarterlyDuration) }}</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(summaryData.totalQuarterlyCost) }}</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatNumber(summaryData.totalAnnualDuration) }}</div>
+          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(summaryData.totalAnnualCost) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { ExportOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api';
+
+// 接收父组件传递的参数
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    required: true
+  },
+  tableData: {
+    type: Array,
+    required: true
+  }
+});
+
+const emit = defineEmits(['back']);
+
+const exportLoading = ref(false);
+
+// 计算汇总数据
+const summaryData = computed(() => {
+  if (!props.tableData || props.tableData.length === 0) {
+    return null;
+  }
+
+  const summary = {
+    totalQuarterlyDuration: 0,
+    totalQuarterlyCost: 0,
+    totalAnnualDuration: 0,
+    totalAnnualCost: 0
+  };
+
+  props.tableData.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)}`;
+}
+
+// 返回查询页面
+function handleBack() {
+  emit('back');
+}
+
+// 导出Excel
+async function handleExport() {
+  if (!props.tableData || props.tableData.length === 0) {
+    message.warning('暂无数据可导出');
+    return;
+  }
+
+  exportLoading.value = true;
+  try {
+    console.log('开始导出律所统计详情...');
+    const exportParams = {
+      quarter: props.queryParams.quarter,
+      year: props.queryParams.year,
+      firmName: props.queryParams.firmName,
+      pageNum: 1,
+      pageSize: 500
+    };
+    
+    await serviceApplicationsApi.exportLawyerByDepartment(exportParams);
+    message.success('导出成功');
+    console.log('律所统计详情导出成功');
+  } catch (error) {
+    message.error('导出失败');
+    console.error('律所统计详情导出失败:', error);
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+onMounted(() => {
+  console.log('律所统计详情组件已加载，数据量:', props.tableData.length);
+});
+</script>
+<style scoped>
+.firm-statistics-detail {
+  padding: 0;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.back-btn {
+  margin-right: 20px;
+  color: #1890ff;
+}
+
+.detail-title h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #333;
+}
+
+.detail-subtitle {
+  margin-top: 4px;
+  font-size: 14px;
+  color: #666;
+}
+
+.export-section {
+  margin-bottom: 20px;
+  text-align: right;
+  padding: 0 16px;
+}
+
+.excel-table-container {
+  border: 2px solid #d9d9d9;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.excel-table-header {
+  background: #f5f5f5;
+  padding: 16px;
+  border-bottom: 1px solid #d9d9d9;
+  text-align: center;
+}
+
+.excel-table-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.excel-table-subtitle {
+  font-size: 14px;
+  color: #666;
+}
+
+.excel-table {
+  width: 100%;
+}
+
+.excel-row {
+  display: flex;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.excel-row:last-child {
+  border-bottom: none;
+}
+
+.excel-header {
+  background: #e6f7ff;
+  font-weight: 600;
+}
+
+.excel-summary {
+  background: #f0f0f0;
+  font-weight: 600;
+}
+
+.excel-cell {
+  padding: 12px;
+  border-right: 1px solid #d9d9d9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.excel-cell:last-child {
+  border-right: none;
+}
+
+.excel-header .excel-cell {
+  background: #1890ff;
+  color: white;
+  border-right: 1px solid #40a9ff;
+}
+
+.excel-data .excel-cell {
+  background: white;
+  color: #333;
+}
+
+.excel-summary .excel-cell {
+  background: #fafafa;
+  color: #333;
+}
+</style>