feat(monthlyAssessSum): add word document export function

实现月度考核汇总页面的Word文档导出功能，支持导出页面所有图表和表格数据，自动生成带格式的报告文档，包含加载状态提示和错误处理。

src/views/performanceManage/monthlyAssessSum/index.vue

@@ -178,9 +178,12 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, nextTick, computed } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ref, reactive, onMounted, onUnmounted, nextTick, computed } from 'vue'
+import { ElMessage, ElLoading } from 'element-plus'
 import * as echarts from 'echarts'
+import html2canvas from 'html2canvas'
+import { Document, Packer, Paragraph, ImageRun, HeadingLevel, AlignmentType } from 'docx'
+import { saveAs } from 'file-saver'
 
 // API导入
 import {
@@ -738,10 +741,475 @@ const resetQuery = () => {
 
 // 导出
 const handleExport = async () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在生成Word文档...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+
   try {
-    ElMessage.success('导出功能开发中')
+    const children = []
+
+    // 生成动态文档标题
+    let reportTitle = '非干部月度考核汇总报告'
+    if (queryParams.assessmentMonth) {
+      const [year, month] = queryParams.assessmentMonth.split('-')
+      reportTitle = `${year}年${parseInt(month)}月非干部月度考核汇总报告`
+    }
+
+    // 添加文档标题
+    children.push(
+      new Paragraph({
+        text: reportTitle,
+        heading: HeadingLevel.TITLE,
+        alignment: AlignmentType.CENTER,
+      }),
+      new Paragraph({
+        text: `导出时间: ${new Date().toLocaleString('zh-CN')}`,
+        alignment: AlignmentType.CENTER,
+      }),
+      new Paragraph({ text: '' })
+    )
+
+    // 获取所有 main-section（两大区块）
+    const mainSections = document.querySelectorAll('.main-section')
+
+    for (let i = 0; i < mainSections.length; i++) {
+      const section = mainSections[i]
+      const sectionTitle = section.querySelector('.section-title')
+      const sectionName = sectionTitle ? sectionTitle.textContent : `第${i + 1}部分`
+
+      children.push(
+        new Paragraph({
+          text: `${i + 1}. ${sectionName}`,
+          heading: HeadingLevel.HEADING_1,
+        }),
+        new Paragraph({ text: '' })
+      )
+
+      if (i === 0) {
+        // 第一部分：非干部月度考核分数汇总
+        // 处理第一行的两个图表
+        const chartRow1 = section.querySelector('.chart-row')
+        if (chartRow1) {
+          const chartCards = chartRow1.querySelectorAll('.chart-card')
+          for (let j = 0; j < chartCards.length; j++) {
+            const card = chartCards[j]
+            const header = card.querySelector('.chart-header')
+            const chartTitle = header ? header.textContent : `图表${j + 1}`
+
+            children.push(
+              new Paragraph({
+                text: `${i + 1}.${j + 1} ${chartTitle}`,
+                heading: HeadingLevel.HEADING_2,
+              }),
+              new Paragraph({ text: '' })
+            )
+
+            const chartContainer = card.querySelector('.chart-container')
+            if (chartContainer) {
+              await captureAndAddImage(chartContainer, children)
+            }
+          }
+        }
+
+        // 处理第二行的图表和汇总表
+        const chartRow2 = section.querySelectorAll('.chart-row')
+        if (chartRow2.length > 1) {
+          const secondRow = chartRow2[1]
+          const cards = secondRow.querySelectorAll('.chart-card')
+          for (let j = 0; j < cards.length; j++) {
+            const card = cards[j]
+            const header = card.querySelector('.chart-header')
+            const chartTitle = header ? header.textContent : `图表${j + 1}`
+
+            children.push(
+              new Paragraph({
+                text: `${i + 1}.${j + 3} ${chartTitle}`,
+                heading: HeadingLevel.HEADING_2,
+              }),
+              new Paragraph({ text: '' })
+            )
+
+            if (j === 0) {
+              // 各部门分值分布对比图
+              const chartContainer = card.querySelector('.chart-container')
+              if (chartContainer) {
+                await captureAndAddImage(chartContainer, children)
+              }
+            } else {
+              // 汇总表
+              const table = card.querySelector('.el-table')
+              if (table) {
+                await captureTable(table, children)
+              }
+            }
+          }
+        }
+      } else {
+        // 第二部分：非干部月度考核分类结果汇总
+        // 汇总统计表格
+        const summaryTableCard = section.querySelector('.summary-table-card')
+        if (summaryTableCard) {
+          const header = summaryTableCard.querySelector('.chart-header')
+          const tableTitle = header ? header.textContent : '汇总统计'
+
+          children.push(
+            new Paragraph({
+              text: `${i + 1}.1 ${tableTitle}`,
+              heading: HeadingLevel.HEADING_2,
+            }),
+            new Paragraph({ text: '' })
+          )
+
+          const table = summaryTableCard.querySelector('.el-table')
+          if (table) {
+            await captureTable(table, children)
+          }
+        }
+
+        // 第四行的两个图表
+        const chartRows = section.querySelectorAll('.chart-row')
+        if (chartRows.length > 0) {
+          const chartRow = chartRows[0]
+          const chartCards = chartRow.querySelectorAll('.chart-card')
+          for (let j = 0; j < chartCards.length; j++) {
+            const card = chartCards[j]
+            const header = card.querySelector('.chart-header')
+            const chartTitle = header ? header.textContent : `图表${j + 1}`
+
+            children.push(
+              new Paragraph({
+                text: `${i + 1}.${j + 2} ${chartTitle}`,
+                heading: HeadingLevel.HEADING_2,
+              }),
+              new Paragraph({ text: '' })
+            )
+
+            const pieChartsContainer = card.querySelector('.pie-charts-container')
+            if (pieChartsContainer) {
+              await captureAndAddImage(pieChartsContainer, children)
+            }
+          }
+        }
+      }
+    }
+
+    // 处理第一个遍历区域（traversalData1）
+    const traversalSections = document.querySelectorAll('.traversal-section')
+    let sectionCounter = mainSections.length + 1
+
+    if (traversalSections.length > 0) {
+      const firstTraversal = traversalSections[0]
+      const traversalContainers = firstTraversal.querySelectorAll('.traversal-container')
+
+      for (let t = 0; t < traversalContainers.length; t++) {
+        const container = traversalContainers[t]
+        const headerEl = container.querySelector('.traversal-header')
+        const title = headerEl ? headerEl.textContent : `部门${t + 1}`
+
+        children.push(
+          new Paragraph({
+            text: `${sectionCounter}. ${title}`,
+            heading: HeadingLevel.HEADING_1,
+          }),
+          new Paragraph({ text: '' })
+        )
+
+        const content = container.querySelector('.traversal-content')
+        if (content) {
+          // 左边表格
+          const tableSection = content.querySelector('.table-section')
+          if (tableSection) {
+            const table = tableSection.querySelector('.el-table')
+            if (table) {
+              children.push(
+                new Paragraph({
+                  text: `${sectionCounter}.1 考核组统计表`,
+                  heading: HeadingLevel.HEADING_2,
+                }),
+                new Paragraph({ text: '' })
+              )
+              await captureTable(table, children)
+            }
+          }
+
+          // 右边两个饼状图
+          const chartSection = content.querySelector('.chart-section')
+          if (chartSection) {
+            const pieContainers = chartSection.querySelectorAll('.pie-chart-container')
+            for (let p = 0; p < pieContainers.length; p++) {
+              const pieContainer = pieContainers[p]
+              const pieTitleEl = pieContainer.querySelector('.pie-chart-title')
+              const pieTitle = pieTitleEl ? pieTitleEl.textContent : `饼图${p + 1}`
+
+              children.push(
+                new Paragraph({
+                  text: `${sectionCounter}.${p + 2} ${pieTitle}`,
+                  heading: HeadingLevel.HEADING_2,
+                }),
+                new Paragraph({ text: '' })
+              )
+
+              const pieChart = pieContainer.querySelector('.pie-chart')
+              if (pieChart) {
+                await captureAndAddImage(pieChart, children)
+              }
+            }
+          }
+        }
+
+        sectionCounter++
+      }
+    }
+
+    // 处理第二个遍历区域（traversalData2）
+    if (traversalSections.length > 1) {
+      const secondTraversal = traversalSections[1]
+      const traversalContainers = secondTraversal.querySelectorAll('.traversal-container')
+
+      for (let t = 0; t < traversalContainers.length; t++) {
+        const container = traversalContainers[t]
+        const headerEl = container.querySelector('.traversal-header')
+        const title = headerEl ? headerEl.textContent : `部门${t + 1}`
+
+        children.push(
+          new Paragraph({
+            text: `${sectionCounter}. ${title}`,
+            heading: HeadingLevel.HEADING_1,
+          }),
+          new Paragraph({ text: '' })
+        )
+
+        const content = container.querySelector('.traversal-content')
+        if (content) {
+          // 左边表格
+          const tableSection = content.querySelector('.table-section')
+          if (tableSection) {
+            const table = tableSection.querySelector('.el-table')
+            if (table) {
+              children.push(
+                new Paragraph({
+                  text: `${sectionCounter}.1 考核组统计表`,
+                  heading: HeadingLevel.HEADING_2,
+                }),
+                new Paragraph({ text: '' })
+              )
+              await captureTable(table, children)
+            }
+          }
+
+          // 右边柱状图和饼状图
+          const chartSection = content.querySelector('.chart-section')
+          if (chartSection) {
+            const barContainer = chartSection.querySelector('.bar-chart-container')
+            if (barContainer) {
+              const chartTitleEl = barContainer.querySelector('.chart-title')
+              const chartTitle = chartTitleEl ? chartTitleEl.textContent : '考核分数分布'
+
+              children.push(
+                new Paragraph({
+                  text: `${sectionCounter}.2 ${chartTitle}`,
+                  heading: HeadingLevel.HEADING_2,
+                }),
+                new Paragraph({ text: '' })
+              )
+
+              const barChart = barContainer.querySelector('.bar-chart')
+              if (barChart) {
+                await captureAndAddImage(barChart, children)
+              }
+            }
+
+            const pieContainer = chartSection.querySelector('.pie-chart-container')
+            if (pieContainer) {
+              const pieTitleEl = pieContainer.querySelector('.pie-chart-title')
+              const pieTitle = pieTitleEl ? pieTitleEl.textContent : '岗位分布'
+
+              children.push(
+                new Paragraph({
+                  text: `${sectionCounter}.3 ${pieTitle}`,
+                  heading: HeadingLevel.HEADING_2,
+                }),
+                new Paragraph({ text: '' })
+              )
+
+              const pieChart = pieContainer.querySelector('.pie-chart')
+              if (pieChart) {
+                await captureAndAddImage(pieChart, children)
+              }
+            }
+          }
+        }
+
+        sectionCounter++
+      }
+    }
+
+    // 创建文档
+    const doc = new Document({
+      sections: [{
+        properties: {},
+        children: children
+      }]
+    })
+
+    // 生成并下载
+    const blob = await Packer.toBlob(doc)
+    const fileName = `${reportTitle}_${new Date().toISOString().slice(0, 10)}.docx`
+    saveAs(blob, fileName)
+
+    ElMessage.success('Word文档导出成功')
+  } catch (error) {
+    console.error('导出失败:', error)
+    ElMessage.error('导出失败: ' + (error.message || '请重试'))
+  } finally {
+    loading.close()
+  }
+}
+
+// 截图图表容器并添加为图片
+const captureAndAddImage = async (element, children) => {
+  try {
+    const canvas = await html2canvas(element, {
+      backgroundColor: '#ffffff',
+      scale: 2,
+      logging: false
+    })
+
+    const imageData = canvas.toDataURL('image/png')
+    const base64Data = imageData.replace(/^data:image\/png;base64,/, '')
+
+    if (!base64Data || base64Data.trim() === '') {
+      return
+    }
+
+    const maxWidth = 500
+    const originalWidth = canvas.width
+    const originalHeight = canvas.height
+    const aspectRatio = originalWidth / originalHeight
+
+    let finalWidth = maxWidth
+    let finalHeight = maxWidth / aspectRatio
+
+    const maxHeight = 400
+    if (finalHeight > maxHeight) {
+      finalHeight = maxHeight
+      finalWidth = maxHeight * aspectRatio
+    }
+
+    const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0))
+    children.push(
+      new Paragraph({
+        children: [
+          new ImageRun({
+            data: imageBytes,
+            transformation: {
+              width: Math.round(finalWidth),
+              height: Math.round(finalHeight)
+            }
+          })
+        ],
+        alignment: AlignmentType.CENTER,
+      }),
+      new Paragraph({ text: '' })
+    )
+  } catch (error) {
+    console.error('截图失败:', error)
+  }
+}
+
+// 截图表格并添加为图片
+const captureTable = async (table, children) => {
+  try {
+    const originalMaxHeight = table.style.maxHeight || ''
+    const originalOverflowY = table.style.overflowY || ''
+    const originalOverflowX = table.style.overflowX || ''
+    const originalTableWidth = table.style.width || ''
+
+    table.style.maxHeight = 'none'
+    table.style.overflowY = 'visible'
+    table.style.overflowX = 'visible'
+    table.style.width = '800px'
+
+    let originalTableHeight = ''
+    let originalTableWidthStyle = ''
+    originalTableHeight = table.style.height || ''
+    originalTableWidthStyle = table.style.width || ''
+    table.style.height = 'auto'
+    table.style.width = '800px'
+
+    const bodyWrapper = table.querySelector('.el-table__body-wrapper')
+    if (bodyWrapper) {
+      bodyWrapper.style.overflowX = 'visible'
+      bodyWrapper.style.overflowY = 'visible'
+    }
+
+    await new Promise(resolve => setTimeout(resolve, 200))
+
+    const canvas = await html2canvas(table, {
+      backgroundColor: '#ffffff',
+      scale: 1.5,
+      logging: false,
+      useCORS: true,
+      allowTaint: true,
+      scrollX: 0,
+      scrollY: 0,
+      width: 800,
+      height: table.scrollHeight
+    })
+
+    table.style.maxHeight = originalMaxHeight
+    table.style.overflowY = originalOverflowY
+    table.style.overflowX = originalOverflowX
+    table.style.width = originalTableWidth
+    table.style.height = originalTableHeight
+    table.style.width = originalTableWidthStyle
+
+    if (bodyWrapper) {
+      bodyWrapper.style.overflowX = ''
+      bodyWrapper.style.overflowY = ''
+    }
+
+    const imageData = canvas.toDataURL('image/png')
+    const base64Data = imageData.replace(/^data:image\/png;base64,/, '')
+
+    if (!base64Data || base64Data.trim() === '') {
+      return
+    }
+
+    const maxWidth = 500
+    const originalWidth = canvas.width
+    const originalHeight = canvas.height
+    const aspectRatio = originalWidth / originalHeight
+
+    let finalWidth = maxWidth
+    let finalHeight = maxWidth / aspectRatio
+
+    const maxHeight = 400
+    if (finalHeight > maxHeight) {
+      finalHeight = maxHeight
+      finalWidth = maxHeight * aspectRatio
+    }
+
+    const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0))
+    children.push(
+      new Paragraph({
+        children: [
+          new ImageRun({
+            data: imageBytes,
+            transformation: {
+              width: Math.round(finalWidth),
+              height: Math.round(finalHeight)
+            }
+          })
+        ],
+        alignment: AlignmentType.CENTER,
+      }),
+      new Paragraph({ text: '' })
+    )
   } catch (error) {
-    ElMessage.error('导出失败')
+    console.error('表格截图失败:', error)
   }
 }