测试完成

WXL (wul)

3 天以前 dac4393e8af2646f544f6e1ca24dab11b40c8492

 src/views/Satisfaction/sfstatistics/components/FollowupStatistics.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1030 @@
<template>
  <div class="followup-statistics">
    <div class="query-section">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="medium"
        :inline="true"
        label-width="100px"
        class="query-form"
      >
        <el-form-item label="统计类型" prop="statisticaltype">
          <el-select
            v-model="queryParams.statisticaltype"
            placeholder="请选择统计类型"
            clearable
            @change="handleStatisticalTypeChange"
          >
            <el-option
              v-for="item in Statisticallist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- ç—…区选择 -->
        <el-form-item
          v-if="queryParams.statisticaltype == 1"
          label="病区"
          prop="leavehospitaldistrictcodes"
        >
          <el-select
            v-model="queryParams.leavehospitaldistrictcodes"
            placeholder="请选择病区"
            multiple
            collapse-tags
            filterable
            clearable
            style="width: 300px"
          >
            <el-option
              v-for="item in flatArrayhospit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- ç§‘室选择 -->
        <el-form-item
          v-if="queryParams.statisticaltype == 2"
          label="科室"
          prop="deptcodes"
        >
          <el-select
            v-model="queryParams.deptcodes"
            placeholder="请选择科室"
            multiple
            collapse-tags
            filterable
            clearable
            style="width: 300px"
          >
            <el-option
              v-for="item in flatArraydept"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="服务类型" prop="serviceType">
          <el-select
            v-model="queryParams.serviceType"
            placeholder="请选择服务类型"
            multiple
            collapse-tags
            clearable
            style="width: 300px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="随访时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width: 380px"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            :loading="loading"
          >
            æœç´¢
          </el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">
            é‡ç½®
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-download"
            @click="handleExport"
            :disabled="!userList.length"
          >
            å¯¼å‡º
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-section">
      <el-table
        v-loading="loading"
        :data="userList"
        :border="true"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="getRowKey"
      >
        <!-- ç—…区列 -->
        <el-table-column
          v-if="queryParams.statisticaltype == 1"
          label="出院病区"
          align="center"
          sortable
          key="leavehospitaldistrictname"
          prop="leavehospitaldistrictname"
          :show-overflow-tooltip="true"
          :sort-method="sortChineseNumber"
          min-width="120"
        />

        <!-- ç§‘室列 -->
        <el-table-column
          v-if="queryParams.statisticaltype == 2"
          label="科室"
          align="center"
          key="deptname"
          prop="deptname"
          :show-overflow-tooltip="true"
          min-width="120"
        />

        <el-table-column
          label="出院人次"
          align="center"
          key="dischargeCount"
          prop="dischargeCount"
          min-width="100"
        />

        <el-table-column
          label="无需随访人次"
          align="center"
          key="nonFollowUp"
          prop="nonFollowUp"
          min-width="120"
        />

        <el-table-column
          label="应随访人次"
          align="center"
          key="followUpNeeded"
          prop="followUpNeeded"
          min-width="120"
        />

        <el-table-column
          label="随访率"
          align="center"
          key="followUpRate"
          prop="followUpRate"
          min-width="100"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.followUpRate !== null &&
                scope.row.followUpRate !== undefined
              "
            >
              {{ scope.row.followUpRate }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column
          label="及时率"
          align="center"
          key="rate"
          prop="rate"
          min-width="100"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.rate !== null && scope.row.rate !== undefined"
              type="text"
              @click="handleSeedetails(scope.row)"
            >
              {{ formatPercent(scope.row.rate) }}
            </el-button>
            <span v-else style="color: #909399">-</span>
          </template>
        </el-table-column>

        <el-table-column
          label="满意度题目总量"
          align="center"
          key="joyAllCount"
          prop="joyAllCount"
          min-width="140"
        />

        <el-table-column
          label="满意度填报量"
          align="center"
          key="joyCount"
          prop="joyCount"
          min-width="120"
        />

        <el-table-column
          label="完成比率"
          align="center"
          key="joyTotal"
          prop="joyTotal"
          min-width="100"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.joyTotal !== null && scope.row.joyTotal !== undefined
              "
            >
              {{ formatPercent(scope.row.joyTotal) }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="getinfo(scope.row)">
              <i class="el-icon-s-order" style="margin-right: 4px"></i>
              æŸ¥çœ‹è¯¦æƒ…
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- åˆ†é¡µ -->
    <div class="pagination-section" v-if="total > 0">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- æœªåŠæ—¶éšè®¿è¯¦æƒ…对话框 -->
    <el-dialog
      title="未及时随访患者服务"
      :visible.sync="SeedetailsVisible"
      width="80%"
      :close-on-click-modal="false"
    >
      <SeedetailsDialog
        v-if="SeedetailsVisible"
        :row-data="currentRow"
        :query-params="queryParams"
        @close="SeedetailsVisible = false"
      />
    </el-dialog>

    <!-- æ»¡æ„åº¦è¯¦æƒ…对话框 -->
    <el-dialog
      :visible.sync="topicVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <template #title>
        <div style="display: flex; align-items: center">
          <i
            class="el-icon-s-data"
            style="margin-right: 8px; color: #409eff"
          ></i>
          <span>{{ topicvalue.name }}</span>
          <span style="margin-left: 10px; color: #666; font-size: 14px"
            >满意度指标详情</span
          >
        </div>
      </template>
      <topic-dialog
        v-if="topicVisible"
        :row-data="currentRow"
        :topicList="topiclist"
        :query-params="queryParams"
        @close="topicVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getSfStatisticsJoy,
  getSfStatisticsJoyInfo,
  selectTimelyRate,
} from "@/api/system/user";
import ExcelJS from "exceljs";
import { saveAs } from "file-saver";
import SeedetailsDialog from "./components/SeedetailsDialog.vue";
import TopicDialog from "./components/TopicDialog.vue";

export default {
  name: "FollowupStatistics",
  components: {
    SeedetailsDialog,
    TopicDialog,
  },
  data() {
    return {
      // æŸ¥è¯¢å‚æ•°
      queryParams: {
        statisticaltype: 1,
        leavehospitaldistrictcodes: ["all"],
        deptcodes: [],
        serviceType: [2],
        dateRange: [],
        pageNum: 1,
        pageSize: 20,
      },

      // ç»Ÿè®¡ç±»åž‹åˆ—表
      Statisticallist: [
        { label: "病区统计", value: 1 },
        { label: "科室统计", value: 2 },
      ],

      // ç—…区列表
      flatArrayhospit: [],

      // ç§‘室列表
      flatArraydept: [],

      // æœåŠ¡ç±»åž‹é€‰é¡¹
      options: [],

      // è¡¨æ ¼æ•°æ®
      userList: [],

      // æ€»æ¡æ•°
      total: 0,

      // åŠ è½½çŠ¶æ€
      loading: false,

      // é€‰ä¸­çš„è¡Œ
      ids: [],
      single: true,
      multiple: true,

      // å½“前操作的行
      currentRow: null,

      // å¯¹è¯æ¡†æ˜¾ç¤ºæŽ§åˆ¶
      SeedetailsVisible: false,
      topicVisible: false,

      // æ»¡æ„åº¦è¯¦æƒ…数据
      topiclist: [],
      topicvalue: {
        name: "",
      },

      // æ—¥æœŸé€‰æ‹©å™¨é€‰é¡¹
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },

  created() {
    this.initData();
  },

  methods: {
    // åˆå§‹åŒ–数据
    async initData() {
      await this.getDeptTree();
      await this.getList();
    },

    // èŽ·å–科室树
    getDeptTree() {
      // èŽ·å–服务类型
      this.options = this.$store.getters.tasktypes || [];

      // èŽ·å–科室列表
      this.flatArraydept = (this.$store.getters.belongDepts || []).map(
        (dept) => {
          return {
            label: dept.deptName,
            value: dept.deptCode,
          };
        }
      );

      // èŽ·å–病区列表
      this.flatArrayhospit = (this.$store.getters.belongWards || []).map(
        (ward) => {
          return {
            label: ward.districtName,
            value: ward.districtCode,
          };
        }
      );

      // æ·»åŠ å…¨éƒ¨é€‰é¡¹
      this.flatArraydept.push({ label: "全部", value: "all" });
      this.flatArrayhospit.push({ label: "全部", value: "all" });
    },

    // èŽ·å–统计列表
    async getList() {
      this.loading = true;
      try {
        // å¤„理查询参数
        const params = {
          configKey: "joyCount",
          ...this.queryParams,
        };

        // å¤„理日期范围
        if (
          this.queryParams.dateRange &&
          this.queryParams.dateRange.length === 2
        ) {
          params.startTime = this.queryParams.dateRange[0];
          params.endTime = this.queryParams.dateRange[1];
        }

        // å¤„理病区/科室选择
        if (params.statisticaltype == 1) {
          // ç—…区统计
          if (params.leavehospitaldistrictcodes.includes("all")) {
            // å¦‚果选择了"全部"，则移除"all"值
            params.leavehospitaldistrictcodes =
              params.leavehospitaldistrictcodes.filter(
                (item) => item !== "all"
              );
            // å¦‚果需要传所有病区代码，可以从store中获取
            params.leavehospitaldistrictcodes = (
              this.$store.getters.belongWards || []
            ).map((ward) => ward.districtCode);
          }
        } else if (params.statisticaltype == 2) {
          // ç§‘室统计
          if (params.deptcodes.includes("all")) {
            // å¦‚果选择了"全部"，则移除"all"值
            params.deptcodes = params.deptcodes.filter(
              (item) => item !== "all"
            );
            // å¦‚果需要传所有科室代码，可以从store中获取
            params.deptcodes = (this.$store.getters.belongDepts || []).map(
              (dept) => dept.deptCode
            );
          }
        }

        const response = await getSfStatisticsJoy(params);
        this.userList = this.customSort(response.data) || [];
        this.total = response.total || 0;
      } catch (error) {
        console.error("获取统计列表失败:", error);
        this.$message.error("获取数据失败");
      } finally {
        this.loading = false;
      }
    },
    sortChineseNumber(aRow, bRow) {
      const a = aRow.leavehospitaldistrictname;
      const b = bRow.leavehospitaldistrictname;

      // ä¸­æ–‡æ•°å­—到阿拉伯数字的映射（扩展到45）
      const chineseNumMap = {
        ä¸€: 1,
        äºŒ: 2,
        ä¸‰: 3,
        å››: 4,
        äº”: 5,
        å…­: 6,
        ä¸ƒ: 7,
        å…«: 8,
        ä¹: 9,
        å: 10,
        åä¸€: 11,
        åäºŒ: 12,
        åä¸‰: 13,
        åå››: 14,
        åäº”: 15,
        åå…­: 16,
        åä¸ƒ: 17,
        åå…«: 18,
        åä¹: 19,
        äºŒå: 20,
        äºŒåä¸€: 21,
        äºŒåäºŒ: 22,
        äºŒåä¸‰: 23,
        äºŒåå››: 24,
        äºŒåäº”: 25,
        äºŒåå…­: 26,
        äºŒåä¸ƒ: 27,
        äºŒåå…«: 28,
        äºŒåä¹: 29,
        ä¸‰å: 30,
        ä¸‰åä¸€: 31,
        ä¸‰åäºŒ: 32,
        ä¸‰åä¸‰: 33,
        ä¸‰åå››: 34,
        ä¸‰åäº”: 35,
        ä¸‰åå…­: 36,
        ä¸‰åä¸ƒ: 37,
        ä¸‰åå…«: 38,
        ä¸‰åä¹: 39,
        å››å: 40,
        å››åä¸€: 41,
        å››åäºŒ: 42,
        å››åä¸‰: 43,
        å››åå››: 44,
        å››åäº”: 45,
      };

      // æå–中文数字
      const getNumberFromText = (text) => {
        if (!text || typeof text !== "string") return -1;

        // åŒ¹é…ä¸­æ–‡æ•°å­—，支持一到四十五
        const match = text.match(/^([一二三四五六七八九十]+)/);

        if (match && match[1]) {
          const chineseNum = match[1];
          return chineseNumMap[chineseNum] !== undefined
            ? chineseNumMap[chineseNum]
            : -1;
        }

        // å¦‚果没有匹配到中文数字，尝试匹配阿拉伯数字
        const arabicMatch = text.match(/^(\d+)/);
        if (arabicMatch && arabicMatch[1]) {
          const num = parseInt(arabicMatch[1], 10);
          return num >= 1 && num <= 45 ? num : -1;
        }

        return -1;
      };

      const numA = getNumberFromText(a);
      const numB = getNumberFromText(b);

      // å¤„理无法解析的情况
      if (numA === -1 && numB === -1) {
        return (a || "").localeCompare(b || "");
      }
      if (numA === -1) return 1;
      if (numB === -1) return -1;

      return numA - numB;
    },
    customSort(data) {
      // å®šä¹‰æ‚¨æœŸæœ›çš„病区顺序（扩展到四十五）
      const order = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二",
        "十三",
        "十四",
        "十五",
        "十六",
        "十七",
        "十八",
        "十九",
        "二十",
        "二十一",
        "二十二",
        "二十三",
        "二十四",
        "二十五",
        "二十六",
        "二十七",
        "二十八",
        "二十九",
        "三十",
        "三十一",
        "三十二",
        "三十三",
        "三十四",
        "三十五",
        "三十六",
        "三十七",
        "三十八",
        "三十九",
        "四十",
        "四十一",
        "四十二",
        "四十三",
        "四十四",
        "四十五",
      ];

      return data.sort((a, b) => {
        // æå–病区名称中的中文数字部分
        const getIndex = (name) => {
          if (!name || typeof name !== "string") return -1;

          // åŒ¹é…ä¸­æ–‡æ•°å­—
          const chineseMatch = name.match(/^([一二三四五六七八九十]+)/);
          if (chineseMatch && chineseMatch[1]) {
            return order.indexOf(chineseMatch[1]);
          }

          // åŒ¹é…é˜¿æ‹‰ä¼¯æ•°å­—
          const arabicMatch = name.match(/^(\d+)/);
          if (arabicMatch && arabicMatch[1]) {
            const num = parseInt(arabicMatch[1], 10);
            if (num >= 1 && num <= 45) {
              return num - 1; // å› ä¸ºæ•°ç»„索引从0开始
            }
          }

          return -1;
        };

        const indexA = getIndex(a.leavehospitaldistrictname);
        const indexB = getIndex(b.leavehospitaldistrictname);

        // æŽ’序逻辑
        if (indexA === -1 && indexB === -1) {
          return (a.leavehospitaldistrictname || "").localeCompare(
            b.leavehospitaldistrictname || ""
          );
        }
        if (indexA === -1) return 1;
        if (indexB === -1) return -1;
        return indexA - indexB;
      });
    },
    // å¤„理统计类型变化
    handleStatisticalTypeChange(value) {
      if (value === 1) {
        this.queryParams.deptcodes = [];
      } else {
        this.queryParams.leavehospitaldistrictcodes = [];
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // å¤„理查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // é‡ç½®æŸ¥è¯¢
    resetQuery() {
      this.queryParams = {
        statisticaltype: 1,
        leavehospitaldistrictcodes: [],
        deptcodes: [],
        serviceType: [2],
        dateRange: [],
        pageNum: 1,
        pageSize: 20,
      };
      this.getList();
    },

    // å¤„理分页大小变化
    handleSizeChange(size) {
      this.queryParams.pageSize = size;
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // å¤„理页码变化
    handlePageChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },

    // å¤„理行选择
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    // èŽ·å–è¡Œkey
    getRowKey(row) {
      return row.statisticaltype === 1
        ? row.leavehospitaldistrictcode
        : row.deptcode;
    },

    // æ ¼å¼åŒ–百分比
    formatPercent(value) {
      if (value === null || value === undefined) return "-";
      const num = parseFloat(value);
      if (isNaN(num)) return "-";
      return `${(num * 100).toFixed(2)}%`;
    },

    // æŸ¥çœ‹æœªåŠæ—¶éšè®¿è¯¦æƒ…
    handleSeedetails(row) {
      this.currentRow = row;
      this.SeedetailsVisible = true;
    },

    // æŸ¥çœ‹æ»¡æ„åº¦è¯¦æƒ…
    async getinfo(row) {
      this.currentRow = row;

      try {
        // å¤„理查询参数
        const params = {
          configKey: "joyCount",
          ...this.queryParams,
        };

        // å¤„理日期范围
        if (
          this.queryParams.dateRange &&
          this.queryParams.dateRange.length === 2
        ) {
          params.startTime = this.queryParams.dateRange[0];
          params.endTime = this.queryParams.dateRange[1];
        }

        if (this.queryParams.statisticaltype == 1) {
          this.topicvalue.name = row.leavehospitaldistrictname;
          params.leavehospitaldistrictcodes = [row.leavehospitaldistrictcode];
        } else {
          this.topicvalue.name = row.deptname;
          params.deptcodes = [row.deptcode];
        }

        const response = await getSfStatisticsJoyInfo(params);
        this.topiclist = response.data || [];
      this.topicVisible = true;

      } catch (error) {
        console.error("获取满意度详情失败:", error);
        this.$message.error("获取详情失败");
      }
    },

    // å¯¼å‡ºæ•°æ®
    async handleExport() {
      if (!this.userList.length) {
        this.$message.warning("没有数据可导出");
        return;
      }

      try {
        this.loading = true;

        // æž„建日期范围字符串
        let dateRangeString = "";
        let sheetNameSuffix = "";

        if (
          this.queryParams.dateRange &&
          this.queryParams.dateRange.length === 2
        ) {
          const startDateFormatted = this.queryParams.dateRange[0];
          const endDateFormatted = this.queryParams.dateRange[1];
          dateRangeString = `${startDateFormatted}至${endDateFormatted}`;
          sheetNameSuffix = `${startDateFormatted}至${endDateFormatted}`;
        } else {
          const now = new Date();
          const currentMonth = now.getMonth() + 1;
          dateRangeString = `${currentMonth}月`;
          sheetNameSuffix = `${currentMonth}月`;
        }

        const excelName = `随访统计表_${dateRangeString}.xlsx`;
        const worksheetName = `随访统计_${sheetNameSuffix}`;

        // åˆ›å»ºExcel工作簿
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet(worksheetName);

        // å®šä¹‰æ ·å¼
        const titleStyle = {
          font: { name: "微软雅黑", size: 16, bold: true },
          fill: {
            type: "pattern",
            pattern: "solid",
            fgColor: { argb: "FFE6F3FF" },
          },
          alignment: { vertical: "middle", horizontal: "center" },
          border: {
            top: { style: "thin", color: { argb: "FFD0D0D0" } },
            left: { style: "thin", color: { argb: "FFD0D0D0" } },
            bottom: { style: "thin", color: { argb: "FFD0D0D0" } },
            right: { style: "thin", color: { argb: "FFD0D0D0" } },
          },
        };

        const headerStyle = {
          font: { name: "微软雅黑", size: 11, bold: true },
          fill: {
            type: "pattern",
            pattern: "solid",
            fgColor: { argb: "FFF5F7FA" },
          },
          alignment: { vertical: "middle", horizontal: "center" },
          border: {
            top: { style: "thin", color: { argb: "FFD0D0D0" } },
            left: { style: "thin", color: { argb: "FFD0D0D0" } },
            bottom: { style: "thin", color: { argb: "FFD0D0D0" } },
            right: { style: "thin", color: { argb: "FFD0D0D0" } },
          },
        };

        const cellStyle = {
          font: { name: "宋体", size: 10 },
          alignment: { vertical: "middle", horizontal: "center" },
          border: {
            top: { style: "thin", color: { argb: "FFD0D0D0" } },
            left: { style: "thin", color: { argb: "FFD0D0D0" } },
            bottom: { style: "thin", color: { argb: "FFD0D0D0" } },
            right: { style: "thin", color: { argb: "FFD0D0D0" } },
          },
        };

        // æ·»åŠ æ€»æ ‡é¢˜
        worksheet.mergeCells(1, 1, 1, 10);
        const titleCell = worksheet.getCell(1, 1);
        titleCell.value = `随访统计表（${sheetNameSuffix}）`;
        titleCell.style = titleStyle;
        worksheet.getRow(1).height = 35;

        // æ·»åŠ è¡¨å¤´
        const headers = [
          this.queryParams.statisticaltype == 1 ? "出院病区" : "科室",
          "出院人次",
          "无需随访人次",
          "应随访人次",
          "随访率",
          "及时率",
          "满意度题目总量",
          "满意度填报量",
          "完成比率",
        ];

        const headerRow = worksheet.addRow(headers);
        headerRow.eachCell((cell) => {
          cell.style = headerStyle;
        });
        headerRow.height = 25;

        // æ·»åŠ æ•°æ®è¡Œ
        this.userList.forEach((item) => {
          const dataRow = worksheet.addRow([
            this.queryParams.statisticaltype == 1
              ? item.leavehospitaldistrictname
              : item.deptname,
            item.dischargeCount || 0,
            item.nonFollowUp || 0,
            item.followUpNeeded || 0,
            item.followUpRate || "0%",
            item.rate ? this.formatPercent(item.rate) : "0%",
            item.joyAllCount || 0,
            item.joyCount || 0,
            item.joyTotal ? this.formatPercent(item.joyTotal) : "0%",
          ]);

          dataRow.eachCell((cell) => {
            cell.style = cellStyle;
          });
          dataRow.height = 22;
        });

        // è®¾ç½®åˆ—宽
        worksheet.columns = [
          { width: 20 },
          { width: 12 },
          { width: 12 },
          { width: 12 },
          { width: 12 },
          { width: 12 },
          { width: 15 },
          { width: 15 },
          { width: 12 },
        ];

        // ç”Ÿæˆå¹¶ä¸‹è½½æ–‡ä»¶
        const buffer = await workbook.xlsx.writeBuffer();
        const blob = new Blob([buffer], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });

        saveAs(blob, excelName);
        this.$message.success("导出成功");
      } catch (error) {
        console.error("导出失败:", error);
        this.$message.error(`导出失败: ${error.message}`);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.followup-statistics {
  .query-section {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;

    .query-form {
      display: flex;
      flex-wrap: wrap;

      ::v-deep .el-form-item {
        margin-bottom: 20px;

        &:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
  }

  .table-section {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;

    ::v-deep .el-table {
      th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #333;
      }
    }
  }

  .pagination-section {
    display: flex;
    justify-content: flex-end;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }
}
</style>