|
|
@@ -1,20 +1,840 @@
|
|
|
<template>
|
|
|
- <div class="page-overview">内容展示</div>
|
|
|
+ <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"
|
|
|
+ :style="{ color: card.color }"
|
|
|
+ >{{ 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>
|
|
|
+ <icon-svg
|
|
|
+ :name="card.icon"
|
|
|
+ size="32px"
|
|
|
+ />
|
|
|
+ </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">可行性研究</th>
|
|
|
+ <th class="col-phase">基本设计</th>
|
|
|
+ <th class="col-phase">详细设计/建造安装</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 }"
|
|
|
+ >
|
|
|
+ <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">
|
|
|
+ <div
|
|
|
+ v-for="(seg, idx) in item.timeline.actual"
|
|
|
+ :key="`actual-${idx}`"
|
|
|
+ class="page-overview-table-gantt-seg"
|
|
|
+ :class="`is-${seg.type}`"
|
|
|
+ :style="{ flex: seg.flex }"
|
|
|
+ >
|
|
|
+ <span v-if="seg.label">{{ seg.label }}</span>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
</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 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 projectList = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "垦利10-1油田开发项目",
|
|
|
+ progress: 0,
|
|
|
+ timeline: { plan: [], actual: [] },
|
|
|
+ warning: 0,
|
|
|
+ delay: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "锦州25-1油田开发项目",
|
|
|
+ progress: 0,
|
|
|
+ timeline: { plan: [], actual: [] },
|
|
|
+ warning: 0,
|
|
|
+ delay: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "渤中19-6凝析气田开发项目",
|
|
|
+ progress: 0,
|
|
|
+ timeline: { plan: [], actual: [] },
|
|
|
+ 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: 16px;
|
|
|
+ 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 {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #f54848;
|
|
|
+}
|
|
|
+
|
|
|
+.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-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;
|
|
|
+ }
|
|
|
+
|
|
|
+ td:first-child {
|
|
|
+ border-left: 1px solid #dfe3e7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-name {
|
|
|
+ width: 18%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-progress {
|
|
|
+ width: 14%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-phase {
|
|
|
+ width: 16%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-status {
|
|
|
+ width: 7%;
|
|
|
+ }
|
|
|
+
|
|
|
+ td.col-phase {
|
|
|
+ position: relative;
|
|
|
+ padding: 8px 12px;
|
|
|
+ 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: 8px;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.page-overview-table-progress-track {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ height: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #edf2f8;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-overview-table-progress-bar {
|
|
|
+ height: 100%;
|
|
|
+ background: #2382e7;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 2px;
|
|
|
+ width: 100%;
|
|
|
+ height: 16px;
|
|
|
+ min-width: 0;
|
|
|
+ background: #edf1f6;
|
|
|
+
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 0;
|
|
|
+ width: 0;
|
|
|
+ border-left: 1px solid #dfe3e7;
|
|
|
+ content: "";
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ left: 33.333%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ left: 66.666%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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: 2px;
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ > span {
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 6px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ 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: 24px;
|
|
|
+ padding: 0 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 13px;
|
|
|
+
|
|
|
+ &.is-zero {
|
|
|
+ color: #9aa5b8;
|
|
|
+ background: #f3f5f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-warning {
|
|
|
+ color: #ff8e38;
|
|
|
+ background: #fff4eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-delay {
|
|
|
+ color: #f54848;
|
|
|
+ background: #feeeee;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
肖栋
