eiacloud-mcp-ui/src/pages/home/particulars.vue

<template>
  <div class="page-particulars">
    <div class="page-particulars-header">
      <h2 class="page-particulars-title">项目明细</h2>
      <div class="page-particulars-actions">
        <button
          type="button"
          class="page-particulars-btn is-outline"
          @click="onExportWord"
        >
          导出Word
        </button>
        <button type="button" class="page-particulars-btn is-primary" @click="goCreateProject">
          <icon-svg name="project_add" size="16px" />
          <span>新增项目</span>
        </button>
      </div>
    </div>

    <div class="page-particulars-panel">
      <div class="page-particulars-panel-header">
        <div class="page-particulars-panel-left">
          <div class="page-particulars-panel-title">项目列表</div>
          <div class="page-particulars-legend">
            <span
              v-for="item in tableLegend"
              :key="item.key"
              class="page-particulars-legend-item"
            >
              <i
                class="page-particulars-legend-dot"
                :class="`is-${item.key}`"
              ></i>
              {{ item.label }}
            </span>
          </div>
        </div>
        <el-select v-model="listFilter" size="small" style="width: 120px">
          <el-option
            v-for="opt in listFilterOptions"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
      </div>

      <div class="page-particulars-table-scroll">
        <table class="page-particulars-table">
          <thead>
            <tr>
              <th rowspan="2" class="col-name">项目名称</th>
              <th rowspan="2" class="col-risk">环境风险</th>
              <th colspan="4" class="group-feasibility group-title">可行性研究</th>
              <th colspan="4" class="group-basic group-title">基础设计</th>
              <th colspan="4" class="group-detail group-title">详细设计/建造安装</th>
              <th rowspan="2" class="col-action">操作</th>
            </tr>
            <tr>
              <th
                v-for="col in phaseSubColumns"
                :key="`f-${col.key}`"
                class="group-feasibility"
              >
                {{ col.label }}
              </th>
              <th
                v-for="col in phaseSubColumns"
                :key="`b-${col.key}`"
                class="group-basic"
              >
                {{ col.label }}
              </th>
              <th
                v-for="col in phaseSubColumns"
                :key="`d-${col.key}`"
                class="group-detail"
              >
                {{ col.label }}
              </th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(row, rowIndex) in tableRows" :key="rowIndex">
              <tr v-if="row.isGap" class="page-particulars-gap-row">
                <td colspan="15"></td>
              </tr>
              <tr v-else>
                <td
                  v-if="row.isFirst"
                  class="col-name"
                  :rowspan="row.rowspan"
                >
                  {{ row.project.name }}
                </td>
                <td
                  v-if="row.isFirst"
                  class="col-risk"
                  :rowspan="row.rowspan"
                >
                  {{ row.project.risk }}
                </td>

                <td class="phase-cell">{{ row.feasibility?.name || "—" }}</td>
                <td
                  class="phase-cell"
                  :class="dateClass(row.feasibility?.planStatus, row.feasibility?.planTime)"
                >
                  {{ formatDate(row.feasibility?.planTime) }}
                </td>
                <td
                  class="phase-cell"
                  :class="dateClass(row.feasibility?.actualStatus, row.feasibility?.actualTime)"
                >
                  {{ formatDate(row.feasibility?.actualTime) }}
                </td>
                <td class="phase-cell">{{ row.feasibility?.unit || "—" }}</td>

                <td class="phase-cell">{{ row.basic?.name || "—" }}</td>
                <td
                  class="phase-cell"
                  :class="dateClass(row.basic?.planStatus, row.basic?.planTime)"
                >
                  {{ formatDate(row.basic?.planTime) }}
                </td>
                <td
                  class="phase-cell"
                  :class="dateClass(row.basic?.actualStatus, row.basic?.actualTime)"
                >
                  {{ formatDate(row.basic?.actualTime) }}
                </td>
                <td class="phase-cell">{{ row.basic?.unit || "—" }}</td>

                <td class="phase-cell">{{ row.detail?.name || "—" }}</td>
                <td
                  class="phase-cell"
                  :class="dateClass(row.detail?.planStatus, row.detail?.planTime)"
                >
                  {{ formatDate(row.detail?.planTime) }}
                </td>
                <td
                  class="phase-cell"
                  :class="dateClass(row.detail?.actualStatus, row.detail?.actualTime)"
                >
                  {{ formatDate(row.detail?.actualTime) }}
                </td>
                <td class="phase-cell">{{ row.detail?.unit || "—" }}</td>

                <td
                  v-if="row.isFirst"
                  class="col-action"
                  :rowspan="row.rowspan"
                >
                  <div class="page-particulars-ops">
                    <button
                      type="button"
                      class="page-particulars-op-btn"
                      @click="goProjectDetail(row.project)"
                    >
                      <icon-svg name="edit_blue" size="16px" />
                      <span>明细</span>
                    </button>
                    <button
                      type="button"
                      class="page-particulars-op-btn"
                      @click="goProjectProgress(row.project)"
                    >
                      <icon-svg name="edit_blue" size="16px" />
                      <span>进展</span>
                    </button>
                  </div>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getDetailList, exportDetailWord } from "@/api/project";

defineOptions({
  name: "ProjectParticulars",
});

const router = useRouter();
const tableLegend = [
  { key: "warning", label: "预警" },
  { key: "delay", label: "滞后" },
];

const listFilter = ref("all");
const listFilterOptions = [
  { label: "全部", value: "all" },
  { label: "预警", value: "warning" },
  { label: "滞后", value: "delay" },
];

const STATUS_FILTER_MAP = {
  all: 0,
  warning: 1,
  delay: 2,
};

const PHASE_KEY_MAP = {
  1: "feasibility",
  3: "basic",
  5: "detail",
};

const phaseSubColumns = [
  { key: "name", label: "报告名称" },
  { key: "planTime", label: "计划完成时间" },
  { key: "actualTime", label: "实际完成时间" },
  { key: "unit", label: "报告编制单位" },
];

const projectList = ref([]);

const mapNodeTone = (status) => {
  const value = Number(status);
  if (value === 3) return "warning";
  if (value === 4) return "delay";
  return "";
};

const mapPhaseRows = (phase) => {
  const rows = [];
  (phase?.reports || []).forEach((report) => {
    const nodes = report.nodes || [];
    if (!nodes.length) {
      rows.push({
        name: report.reportName || "",
        planTime: "",
        actualTime: "",
        unit: "",
      });
      return;
    }
    nodes.forEach((node) => {
      const tone = mapNodeTone(node.status);
      rows.push({
        name: report.reportName || "",
        planTime: node.plannedEndDate || "",
        actualTime: node.actualEndDate || "",
        unit: node.reportUnit || "",
        planStatus: tone,
        actualStatus: tone,
      });
    });
  });
  return rows;
};

const mapProjectList = (list = []) =>
  list.map((item) => {
    const project = {
      id: item.id,
      name: item.projectName || "",
      risk: item.environmentalRisk || "",
      feasibility: [],
      basic: [],
      detail: [],
    };
    (item.phases || []).forEach((phase) => {
      const key = PHASE_KEY_MAP[Number(phase.phaseId)];
      if (!key) return;
      project[key] = mapPhaseRows(phase);
    });
    return project;
  });

const loadDetailList = async () => {
  try {
    const status = STATUS_FILTER_MAP[listFilter.value] ?? 0;
    const res = await getDetailList(status);
    if (res?.code !== 200) {
      ElMessage.error(res?.msg || "获取项目明细失败");
      projectList.value = [];
      return;
    }
    projectList.value = mapProjectList(
      Array.isArray(res.data) ? res.data : []
    );
  } catch (error) {
    console.error(error);
    projectList.value = [];
    ElMessage.error("获取项目明细失败，请稍后重试");
  }
};

const getProjectRowCount = (project) =>
  Math.max(
    project.feasibility?.length || 0,
    project.basic?.length || 0,
    project.detail?.length || 0,
    1
  );

const tableRows = computed(() => {
  const rows = [];
  projectList.value.forEach((project) => {
    rows.push({ isGap: true });
    const rowspan = getProjectRowCount(project);
    for (let i = 0; i < rowspan; i += 1) {
      rows.push({
        project,
        isFirst: i === 0,
        rowspan,
        feasibility: project.feasibility[i] || null,
        basic: project.basic[i] || null,
        detail: project.detail[i] || null,
      });
    }
  });
  return rows;
});

const formatDate = (value) => value || "—";

const dateClass = (status, value) => {
  if (!value) return "";
  if (status === "warning") return "is-warning";
  if (status === "delay") return "is-delay";
  return "";
};

const onExportWord = async () => {
  try {
    const res = await exportDetailWord();
    const cd = res.headers?.["content-disposition"] || "";
    const m = /filename\*?=(?:UTF-8'')?"?([^";]+)"?/i.exec(cd);
    const fileName = m ? decodeURIComponent(m[1]) : "项目明细.docx";
    const url = URL.createObjectURL(new Blob([res.data]));
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error(error);
    ElMessage.error("导出Word失败，请稍后重试");
  }
};

const goCreateProject = () => {
  router.push({
    name: "projectDetail",
    query: {
      from: "particulars",
      mode: "create",
    },
  });
};

const goProjectDetail = (project) => {
  if (project?.id == null) return;
  router.push({
    name: "projectDetail",
    query: {
      from: "particulars",
      projectId: String(project.id),
    },
  });
};

const goProjectProgress = (project) => {
  if (project?.id == null) return;
  router.push({
    name: "projectProgress",
    query: {
      projectId: String(project.id),
    },
  });
};

watch(listFilter, () => {
  loadDetailList();
});

onMounted(() => {
  loadDetailList();
});
</script>

<style scoped lang="scss">
.page-particulars {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
  background: #f3f7fc;
}

.page-particulars-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-particulars-title {
  margin: 0;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #16213a;
  line-height: 25px;
  text-align: left;
}

.page-particulars-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.page-particulars-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  border-radius: 2px;
  box-shadow: 0px 4px 10px 0px rgba(35, 130, 231, 0.2);
  cursor: pointer;

  &.is-outline {
    color: #2382e7;
    background: #ffffff;
    border: 1px solid #2382e7;

    &:hover {
      border-color: #2382e7;
    }
  }

  &.is-primary {
    gap: 4px;
    color: #ffffff;
    background: #2382e7;
    border: 1px solid #2382e7;

    &:hover {
      border-color: #2382e7;
    }
  }
}

.page-particulars-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
}

.page-particulars-panel-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-particulars-panel-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.page-particulars-panel-title {
  position: relative;
  padding-left: 10px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 14px;
  color: #16213a;
  line-height: 20px;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 14px;
    background: #2382e7;
    border-radius: 0 2px 2px 0;
    transform: translateY(-50%);
    content: "";
  }
}

.page-particulars-legend {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-particulars-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #9aa5b8;
  line-height: 20px;
  white-space: nowrap;
}

.page-particulars-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d0d5dd;

  &.is-warning {
    background: #ff8e38;
  }

  &.is-delay {
    background: #f54848;
  }
}

.page-particulars-table-scroll {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

.page-particulars-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: 13px;
  color: #16213a;

  th,
  td {
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #dfe3e7;
    text-align: left;
    vertical-align: middle;
    background: #ffffff;
  }

  th {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #58657c;
    background: #edf1f6;
    white-space: nowrap;
    word-break: keep-all;
  }

  .group-feasibility {
    background: #e8f3fc;
  }

  .group-basic {
    background: #e9f7ef;
  }

  .group-detail {
    background: #eef0fb;
  }

  .group-title {
    text-align: center;
  }

  .phase-cell {
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
  }

  .col-name,
  .col-action {
    position: sticky;
    z-index: 2;
  }

  th.col-name,
  th.col-action {
    z-index: 4;
    background: #edf1f6;
  }

  td.col-name,
  td.col-action {
    background: #ffffff;
  }

  .col-name {
    left: 0;
    width: 140px;
    min-width: 140px;
    box-shadow: 2px 0 6px rgba(22, 33, 58, 0.08);
  }

  .col-risk {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    white-space: normal;
    word-break: break-word;
  }

  .col-action {
    right: 0;
    width: 100px;
    min-width: 100px;
    box-shadow: -2px 0 6px rgba(22, 33, 58, 0.08);
  }

  td.is-warning {
    color: #ff8e38;
  }

  td.is-delay {
    color: #f54848;
  }

  .page-particulars-gap-row td {
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
  }
}

.page-particulars-ops {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.page-particulars-op-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: PingFang SC, PingFang SC;
  font-size: 13px;
  color: #2382e7;
  line-height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;

  &:hover {
    border-color: transparent;
  }
}
</style>