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

<template>
  <div class="page-overview">
    <h2 class="page-overview-title">项目概览</h2>

    <div class="page-overview-cards">
      <div
        v-for="card in summaryCards"
        :key="card.key"
        class="page-overview-card"
        :class="{
          'page-overview-card--warning': card.key === 'warning',
          'page-overview-card--delay': card.key === 'delay',
        }"
      >
        <div class="page-overview-card-top">
          <div class="page-overview-card-main">
            <div class="page-overview-card-label">
              <span>{{ card.label }}</span>
              <span v-if="card.tip" class="page-overview-card-tip">{{
                card.tip
              }}</span>
            </div>
            <div class="page-overview-card-metric-block">
              <div class="page-overview-card-metric">
                <span
                  class="page-overview-card-num"
                  :class="{
                    'page-overview-card-num--clickable':
                      card.key === 'warning' || card.key === 'delay',
                  }"
                  :style="{ color: card.color }"
                  @click="onSummaryNumClick(card)"
                >{{ card.value }}</span>
                <span v-if="card.unit" class="page-overview-card-unit">{{
                  card.unit
                }}</span>
              </div>
              <div v-if="card.subTitle" class="page-overview-card-subtitle">
                {{ card.subTitle }}
              </div>
            </div>
          </div>
          <span
            class="page-overview-card-icon"
            :class="{ 'page-overview-card-icon--shake': card.key === 'delay' }"
          >
            <icon-svg
              :name="card.icon"
              size="32px"
            />
          </span>
        </div>

        <div v-if="card.phases?.length" class="page-overview-card-bottom">
          <div
            v-for="phase in card.phases"
            :key="phase.name"
            class="page-overview-card-phase"
          >
            <div class="page-overview-card-phase-label">
              <i class="page-overview-card-phase-dot"></i>
              <span>{{ phase.name }}</span>
            </div>
            <div class="page-overview-card-phase-num">{{ phase.count }}</div>
          </div>
        </div>

        <div
          v-else-if="card.subReport"
          class="page-overview-card-bottom page-overview-card-rate-bottom"
        >
          <div class="page-overview-card-subreport">
            {{ card.subReport.prefix }}<span class="page-overview-card-subreport-num">{{
              card.subReport.value
            }}</span>/{{ card.subReport.total }}
          </div>
        </div>
      </div>
    </div>

    <div class="page-overview-table">
      <div class="page-overview-table-header">
        <div class="page-overview-table-title">项目列表</div>
        <div class="page-overview-table-legend">
          <span
            v-for="item in tableLegend"
            :key="item.key"
            class="page-overview-table-legend-item"
          >
            <i
              class="page-overview-table-legend-dot"
              :class="`is-${item.key}`"
            ></i>
            {{ item.label }}
          </span>
        </div>
        <div class="page-overview-table-filter">
          <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>

      <div class="page-overview-table-scroll">
        <table class="page-overview-table-grid">
          <thead>
            <tr>
              <th class="col-name">项目名称</th>
              <th class="col-progress">整体进度</th>
              <th class="col-phase col-phase--feasibility">可行性研究</th>
              <th class="col-phase col-phase--basic">基本设计</th>
              <th class="col-phase col-phase--detail">详细设计/建造安装</th>
              <th class="col-status">预警</th>
              <th class="col-status">滞后</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in projectList" :key="item.id">
              <td class="col-name">
                <div class="page-overview-table-name">
                  <a href="javascript:;" class="page-overview-table-name-link">{{
                    item.name
                  }}</a>
                </div>
              </td>
              <td class="col-progress">
                <div class="page-overview-table-progress">
                  <div class="page-overview-table-progress-track">
                    <div
                      class="page-overview-table-progress-bar"
                      :style="{ width: `${item.progress}%` }"
                    ></div>
                  </div>
                  <span class="page-overview-table-progress-text"
                    >{{ item.progress }}%</span
                  >
                </div>
              </td>
              <td class="col-phase" colspan="3">
                <div class="page-overview-table-gantt">
                  <div class="page-overview-table-gantt-row is-plan">
                    <template v-if="item.progress > 0">
                      <div
                        v-for="(seg, idx) in item.timeline.plan"
                        :key="`plan-${idx}`"
                        class="page-overview-table-gantt-seg"
                        :class="`is-${seg.type}`"
                        :style="{ flex: `${seg.flex} 1 0%` }"
                      >
                        <span v-if="seg.label">{{ seg.label }}</span>
                      </div>
                    </template>
                  </div>
                  <div class="page-overview-table-gantt-row is-actual">
                    <template v-if="item.progress > 0">
                      <template
                        v-for="(seg, idx) in item.timeline.actual"
                        :key="`actual-${idx}`"
                      >
                        <div
                          v-if="seg.popover"
                          class="page-overview-table-gantt-seg-host"
                          :style="{ flex: `${seg.flex} 1 0%` }"
                        >
                          <el-popover
                            placement="bottom"
                            trigger="hover"
                            :show-arrow="true"
                            :width="200"
                            :offset="6"
                            popper-class="page-overview-gantt-popper"
                          >
                            <template #reference>
                              <div
                                class="page-overview-table-gantt-seg"
                                :class="`is-${seg.type}`"
                                tabindex="0"
                              >
                                <span v-if="seg.label">{{ seg.label }}</span>
                              </div>
                            </template>
                            <div class="page-overview-gantt-tip">
                              <div class="page-overview-gantt-tip-name">
                                {{ seg.popover.name }}
                              </div>
                              <div class="page-overview-gantt-tip-line">
                                计划时间：{{ seg.popover.planTime }}
                              </div>
                              <div
                                v-if="seg.popover.remainDays != null"
                                class="page-overview-gantt-tip-line"
                              >
                                距完成天数：<span
                                  class="page-overview-gantt-tip-days is-warning"
                                >{{ seg.popover.remainDays }}</span
                                >天
                              </div>
                              <div
                                v-else-if="seg.popover.overdueDays != null"
                                class="page-overview-gantt-tip-line"
                              >
                                已逾期天数：<span
                                  class="page-overview-gantt-tip-days is-delay"
                                >{{ seg.popover.overdueDays }}</span
                                >天
                              </div>
                              <div
                                v-else-if="seg.popover.completeTime"
                                class="page-overview-gantt-tip-line"
                              >
                                完成时间：{{ seg.popover.completeTime }}
                              </div>
                            </div>
                          </el-popover>
                        </div>
                        <div
                          v-else
                          class="page-overview-table-gantt-seg"
                          :class="`is-${seg.type}`"
                          :style="{ flex: `${seg.flex} 1 0%` }"
                        >
                          <span v-if="seg.label">{{ seg.label }}</span>
                        </div>
                      </template>
                    </template>
                  </div>
                </div>
              </td>
              <td class="col-status">
                <span
                  class="page-overview-table-badge"
                  :class="item.warning > 0 ? 'is-warning' : 'is-zero'"
                  >{{ item.warning }}</span
                >
              </td>
              <td class="col-status">
                <span
                  class="page-overview-table-badge"
                  :class="item.delay > 0 ? 'is-delay' : 'is-zero'"
                  >{{ item.delay }}</span
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="reportDialogVisible"
    width="720px"
    append-to-body
    align-center
    class="page-overview-report-dialog"
  >
    <template #header>
      <div class="page-overview-report-dialog-header">
        <icon-svg
          :name="
            reportDialogType === 'warning'
              ? 'early_warning_report'
              : 'late_report'
          "
          size="24px"
        />
        <span class="page-overview-report-dialog-title">
          {{ reportDialogType === "warning" ? "预警报告" : "滞后报告" }}
          <span class="page-overview-report-dialog-count-wrap"
            >(<span
              class="page-overview-report-dialog-count"
              :class="`is-${reportDialogType}`"
              >{{ reportDialogList.length }}</span
            >)</span
          >
        </span>
      </div>
    </template>

    <div class="page-overview-report-dialog-body">
      <div
        v-for="item in reportDialogList"
        :key="item.id"
        class="page-overview-report-item"
      >
        <div class="page-overview-report-item-title">{{ item.projectName }}</div>
        <div class="page-overview-report-item-body">
          <div class="page-overview-report-row">
            <div class="page-overview-report-field">
              <span class="label">报告名称：</span>
              <span class="value">{{ item.reportName }}</span>
            </div>
          </div>
          <div class="page-overview-report-row is-cols-4">
            <div class="page-overview-report-field">
              <span class="label">开始时间：</span>
              <span class="value">{{ item.startTime }}</span>
            </div>
            <div class="page-overview-report-field">
              <span class="label">工期：</span>
              <span class="value">{{ item.duration }}</span>
            </div>
            <div class="page-overview-report-field">
              <span class="label">计划完成时间：</span>
              <span class="value">{{ item.planEndTime }}</span>
            </div>
            <div class="page-overview-report-field">
              <span class="label">{{
                reportDialogType === "warning" ? "距完成天数：" : "已逾期天数："
              }}</span>
              <span class="value" :class="`is-${reportDialogType}`"
                >{{ item.days }}天</span
              >
            </div>
          </div>
          <div class="page-overview-report-row is-cols-2">
            <div class="page-overview-report-field">
              <span class="label">报告编制单位：</span>
              <span class="value">{{ item.unit }}</span>
            </div>
            <div class="page-overview-report-field">
              <span class="label">负责人：</span>
              <span class="value">{{ item.owner }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="page-overview-report-dialog-footer">
        <button
          type="button"
          class="page-overview-report-dialog-close-btn"
          @click="reportDialogVisible = false"
        >
          关闭
        </button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

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

const tableLegend = [
  { key: "plan", label: "计划进度" },
  { key: "actual", label: "实际进度" },
  { key: "done", label: "完成" },
  { key: "warning", label: "预警" },
  { key: "delay", label: "滞后" },
];

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

const reportDialogVisible = ref(false);
const reportDialogType = ref("warning");
const reportDialogList = ref([]);

const warningReportList = [
  {
    id: 1,
    projectName: "垦利10-1油田开发项目",
    reportName: "可行性研究-环境质量现状调查",
    startTime: "2026-06-05",
    duration: "60天",
    planEndTime: "2026-08-05",
    days: 2,
    unit: "樟树市邦厉有限公司",
    owner: "苏小苏",
  },
  {
    id: 2,
    projectName: "渤中19-6凝析气田开发项目",
    reportName: "详细设计/建造安装-通航安全影响咨询",
    startTime: "2026-05-01",
    duration: "90天",
    planEndTime: "2026-08-20",
    days: 22,
    unit: "天津海蓝工程咨询有限公司",
    owner: "李明",
  },
];

const delayReportList = [
  {
    id: 1,
    projectName: "锦州25-1油田开发项目",
    reportName: "可行性研究-通航安全影响咨询",
    startTime: "2026-05-01",
    duration: "90天",
    planEndTime: "2026-07-30",
    days: 3,
    unit: "天津海蓝工程咨询有限公司",
    owner: "王强",
  },
];

const onSummaryNumClick = (card) => {
  if (card.key !== "warning" && card.key !== "delay") return;
  reportDialogType.value = card.key;
  reportDialogList.value =
    card.key === "warning" ? warningReportList : delayReportList;
  reportDialogVisible.value = true;
};

const summaryCards = [
  {
    key: "total",
    label: "项目总数",
    value: "24",
    unit: "个项目",
    color: "#2382E7",
    icon: "total_number_of_projects",
    phases: [
      { name: "可行性研究", count: 8 },
      { name: "基本设计", count: 8 },
      { name: "详细设计/建造安装", count: 8 },
    ],
  },
  {
    key: "warning",
    label: "预警报告",
    tip: "(计划日期内仍未完成)",
    value: "2",
    unit: "个项目",
    color: "#FF8E38",
    icon: "early_warning_report",
    phases: [
      { name: "可行性研究", count: 1 },
      { name: "基本设计", count: 0 },
      { name: "详细设计/建造安装", count: 1 },
    ],
  },
  {
    key: "delay",
    label: "滞后报告",
    tip: "(计划日期内仍未完成)",
    value: "1",
    unit: "个项目",
    color: "#F54848",
    icon: "late_report",
    phases: [
      { name: "可行性研究", count: 1 },
      { name: "基本设计", count: 0 },
      { name: "详细设计/建造安装", count: 0 },
    ],
  },
  {
    key: "rate",
    label: "报告完成率",
    value: "58",
    unit: "%",
    color: "#10B837",
    icon: "report_completion_rate",
    subTitle: "年度计划完成率",
    subReport: {
      prefix: "2026年报告：",
      value: "58",
      total: "100",
    },
  },
];

const createNormalPopover = (name, planTime = "2026-07-30") => ({
  name,
  planTime,
  completeTime: planTime,
});

const projectList = [
  {
    id: 1,
    name: "垦利10-1油田开发项目",
    progress: 20,
    timeline: {
      plan: [
        { type: "plan", flex: 1 },
        { type: "empty", flex: 13 },
      ],
      actual: [
        {
          type: "warning",
          flex: 1,
          label: "环境质量现状调查",
          popover: {
            name: "环境质量现状调查",
            planTime: "2026-08-05",
            remainDays: 2,
          },
        },
        { type: "empty", flex: 13 },
      ],
    },
    warning: 1,
    delay: 0,
  },
  {
    id: 2,
    name: "锦州25-1油田开发项目",
    progress: 43,
    timeline: {
      plan: [
        { type: "done", flex: 5 },
        { type: "plan", flex: 1 },
        { type: "empty", flex: 8 },
      ],
      actual: [
        {
          type: "actual",
          flex: 1,
          label: "环境质量现状调查",
          popover: createNormalPopover("环境质量现状调查"),
        },
        {
          type: "actual",
          flex: 1,
          label: "渔业资源现状调查",
          popover: createNormalPopover("渔业资源现状调查"),
        },
        {
          type: "actual",
          flex: 1,
          label: "环境风险预评价",
          popover: createNormalPopover("环境风险预评价"),
        },
        {
          type: "actual",
          flex: 1,
          label: "桌面路由方案",
          popover: createNormalPopover("桌面路由方案"),
        },
        {
          type: "delay",
          flex: 1,
          label: "通航安全影响咨询",
          popover: {
            name: "通航安全影响咨询",
            planTime: "2026-07-30",
            overdueDays: 3,
          },
        },
        {
          type: "actual",
          flex: 1,
          label: "安全预评价",
          popover: createNormalPopover("安全预评价"),
        },
        { type: "empty", flex: 8 },
      ],
    },
    warning: 0,
    delay: 1,
  },
  {
    id: 3,
    name: "渤中19-6凝析气田开发项目",
    progress: 100,
    timeline: {
      plan: [
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
        { type: "done", flex: 1 },
      ],
      actual: [
        "环境质量现状调查",
        "环境影响评价",
        "可行性研究报告",
        "项目建议书",
        "核准批复",
        "总图设计",
        "工艺设计",
        "结构设计",
        "公用工程设计",
        "基本设计审查",
        "详细设计",
        "设备采购",
        "建造安装",
        "竣工验收",
      ].map((label) => ({
        type: "actual",
        flex: 1,
        label,
        popover: createNormalPopover(label),
      })),
    },
    warning: 0,
    delay: 0,
  },
  {
    id: 4,
    name: "曹妃甸6-4油田开发项目",
    progress: 0,
    timeline: { plan: [], actual: [] },
    warning: 0,
    delay: 0,
  },
  {
    id: 5,
    name: "旅大5-2油田开发项目",
    progress: 0,
    timeline: { plan: [], actual: [] },
    warning: 0,
    delay: 0,
  },
];
</script>

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

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

.page-overview-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.page-overview-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e5ebf3;
}

.page-overview-card--warning {
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #ff8e38;
}

.page-overview-card--delay {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(245, 72, 72, 0.35);

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 220%;
    height: 220%;
    translate: -50% -50%;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 300deg,
      rgba(245, 72, 72, 0.08) 325deg,
      rgba(245, 72, 72, 0.28) 342deg,
      #f54848 352deg,
      #ff8a8a 356deg,
      transparent 360deg
    );
    animation: page-overview-delay-beam 3.5s linear infinite;
    pointer-events: none;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.92);
    pointer-events: none;
  }

  > * {
    position: relative;
    z-index: 2;
  }
}

.page-overview-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.page-overview-card-icon--shake {
  animation: page-overview-delay-shake 3.2s ease-in-out infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}

@keyframes page-overview-delay-beam {
  to {
    transform: rotate(1turn);
  }
}

@keyframes page-overview-delay-shake {
  0%,
  72%,
  100% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-6deg);
  }

  78% {
    transform: rotate(6deg);
  }

  81% {
    transform: rotate(-4deg);
  }

  84% {
    transform: rotate(4deg);
  }

  87% {
    transform: rotate(-2deg);
  }

  90% {
    transform: rotate(0deg);
  }
}

.page-overview-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-overview-card-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.page-overview-card-label {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 14px;
  color: #58657c;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}

.page-overview-card-tip {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #9aa5b8;
  line-height: 20px;
  text-align: left;
}

.page-overview-card-metric-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-overview-card-metric {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.page-overview-card-num {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36px;
  line-height: 50px;
  text-align: left;
}

.page-overview-card-num--clickable {
  cursor: pointer;
}

.page-overview-card-unit {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #9aa5b8;
  line-height: 50px;
  text-align: left;
}

.page-overview-card-metric-block:has(.page-overview-card-subtitle) {
  .page-overview-card-num,
  .page-overview-card-unit {
    line-height: 36px;
  }
}

.page-overview-card-bottom {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
}

.page-overview-card-phase {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: 4px 8px;
  background: #f6f9fd;
  border-radius: 4px;
}

.page-overview-card-phase-label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #9aa5b8;
  line-height: 17px;
  text-align: left;

  > span {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
  }
}

.page-overview-card-phase-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 5.5px;
  background: #2382e7;
  border-radius: 50%;
}

.page-overview-card-phase-num {
  margin-top: auto;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #16213a;
  line-height: 22px;
  text-align: left;
  white-space: nowrap;
}

.page-overview-card-rate-bottom {
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.page-overview-card-subtitle {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #9aa5b8;
  line-height: 20px;
  text-align: left;
}

.page-overview-card-subreport {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #58657c;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}

.page-overview-card-subreport-num {
  color: #16213a;
}

@media (max-width: 1400px) {
  .page-overview-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .page-overview-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-overview-table {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 16px 16px;
  background: #ffffff;
  border-radius: 4px;
}

.page-overview-table-header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.page-overview-table-title {
  flex-shrink: 0;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 14px;
  color: #16213a;
  line-height: 20px;
  text-align: left;
}

.page-overview-table-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.page-overview-table-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #9aa5b8;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
}

.page-overview-table-legend-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d0d5dd;

  &.is-plan {
    background: #12aec2;
  }

  &.is-actual {
    background: #2382e7;
  }

  &.is-done {
    background: #10b837;
  }

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

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

.page-overview-table-filter {
  flex-shrink: 0;
  margin-left: auto;
}

.page-overview-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.page-overview-table-grid {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  color: #16213a;

  th,
  td {
    padding: 10px 16px;
    text-align: left;
    vertical-align: middle;
  }

  th {
    background: #edf1f6;
    border: 1px solid #dfe3e7;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #58657c;
    line-height: 20px;
    text-align: left;
  }

  td {
    background: #ffffff;
    border-top: none;
    border-right: 1px solid #dfe3e7;
    border-bottom: 1px solid #dfe3e7;
    border-left: none;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  td:first-child {
    border-left: 1px solid #dfe3e7;
  }

  .col-name {
    width: 14%;
  }

  .col-progress {
    width: 10%;
  }

  .col-phase--feasibility {
    width: calc(60% * 5 / 14);
  }

  .col-phase--basic {
    width: calc(60% * 5 / 14);
  }

  .col-phase--detail {
    width: calc(60% * 4 / 14);
  }

  .col-status {
    width: 5%;
  }

  td.col-phase {
    position: relative;
    padding: 16px 0;
    background: #ffffff;
  }

  td.col-status {
    text-align: center;
  }
}

.page-overview-table-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.page-overview-table-name-link {
  min-width: 0;
  overflow: hidden;
  color: #16213a;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-overview-table-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.page-overview-table-progress-track {
  flex: 1;
  min-width: 0;
  height: 8px;
  overflow: hidden;
  background: #edf2f8;
  border-radius: 0;
}

.page-overview-table-progress-bar {
  height: 100%;
  background: #2382e7;
  border-radius: 0;
}

.page-overview-table-progress-text {
  flex-shrink: 0;
  min-width: 36px;
  color: #58657c;
  text-align: right;
}

.page-overview-table-gantt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 36px;
}

.page-overview-table-gantt-row {
  position: relative;
  display: flex;
  gap: 0;
  width: 100%;
  height: 16px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 16px;
  background-color: #edf1f6;
  background-clip: content-box;

  &::before,
  &::after {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 1px;
    background: #dfe3e7;
    content: "";
    pointer-events: none;
  }

  /* 与内容区 5 / 5 / 4 分块对齐，分割线 #DFE3E7 */
  &::before {
    left: calc(16px + (100% - 32px) * 5 / 14);
  }

  &::after {
    left: calc(16px + (100% - 32px) * 10 / 14);
  }
}

.page-overview-table-gantt-seg-host {
  z-index: 1;
  display: flex;
  min-width: 0;
  height: 100%;

  .page-overview-table-gantt-seg {
    flex: 1;
    width: 100%;
  }

  :deep(.el-tooltip__trigger) {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
  }
}

.page-overview-table-gantt-seg {
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: transparent;

  > span {
    overflow: hidden;
    padding: 0 6px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 7px;
    color: #ffffff;
    line-height: 10px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.is-empty {
    background: transparent;
  }

  &.is-plan {
    background: #12aec2;
  }

  &.is-actual {
    background: #2382e7;
  }

  &.is-done {
    background: #10b837;
  }

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

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

.page-overview-table-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 8px;
  border-radius: 1px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: left;

  &.is-zero {
    color: #9aa5b8;
    background: #edf1f6;
  }

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

  &.is-delay {
    color: #f54848;
    background: #fef4f4;
  }
}
</style>

<style lang="scss">
.page-overview-gantt-popper.el-popover.el-popper {
  padding: 12px 14px;
  border: 1px solid #e5ebf3;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(22, 33, 58, 0.08);
}

.page-overview-gantt-tip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: PingFang SC, PingFang SC;
  color: #16213a;
}

.page-overview-gantt-tip-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.page-overview-gantt-tip-line {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: #58657c;
}

.page-overview-gantt-tip-days {
  font-weight: 600;

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

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

.page-overview-report-dialog.el-dialog {
  --el-dialog-padding-primary: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;

  .el-dialog__header {
    margin: 0;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e5ebf3;
  }

  .el-dialog__headerbtn {
    top: 16px;
    right: 20px;
    width: 24px;
    height: 24px;
    margin: 0;

    .el-dialog__close {
      font-size: 24px;
      color: #9aa5b8;
    }
  }

  .el-dialog__body {
    margin: 0;
    padding: 16px;
    background: #f6f9fd;
  }

  .el-dialog__footer {
    margin: 0;
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid #e5ebf3;
  }
}

.page-overview-report-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-overview-report-dialog-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #16213a;
  line-height: 25px;
  text-align: left;
  font-style: normal;
}

.page-overview-report-dialog-count {
  font-weight: 600;
  color: #ff8e38;

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

.page-overview-report-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.page-overview-report-item {
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
}

.page-overview-report-item-title {
  position: relative;
  padding: 14px 8px 14px 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 14px;
  color: #58657c;
  line-height: 20px;
  text-align: left;

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

.page-overview-report-item-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 8px 14px 12px;
}

.page-overview-report-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 24px;
  width: 100%;

  &.is-cols-4,
  &.is-cols-2 {
    .page-overview-report-field {
      flex: 0 0 auto;
      min-width: 0;
    }
  }
}

.page-overview-report-field {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  text-align: left;

  .label {
    flex-shrink: 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #9aa5b8;
    line-height: 20px;
    text-align: left;
  }

  .value {
    flex-shrink: 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #16213a;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;

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

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

.page-overview-report-dialog-footer {
  display: flex;
  justify-content: center;
}

.page-overview-report-dialog-close-btn {
  padding: 6px 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #58657c;
  line-height: 20px;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e4eaf2;
  border-radius: 2px;
  cursor: pointer;
}
</style>