420 lines
9.7 KiB
Vue
420 lines
9.7 KiB
Vue
<template>
|
||
<div class="project-table-container">
|
||
<el-table
|
||
:data="dataList"
|
||
:loading="loading"
|
||
style="width: 100%"
|
||
>
|
||
<!-- 项目名称（含描述） -->
|
||
<el-table-column
|
||
label="项目名称"
|
||
min-width="180"
|
||
align="left"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="project-info-cell">
|
||
<div class="project-name">{{ scope.row.projectName }}</div>
|
||
<div class="project-desc">{{ scope.row.description || '暂无描述' }}</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 更新/创建时间 -->
|
||
<el-table-column
|
||
prop="updateTime"
|
||
label="更新/创建时间"
|
||
width="180"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.updateTime || scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 创建人 -->
|
||
<el-table-column
|
||
prop="createByName"
|
||
label="创建人"
|
||
width="120"
|
||
align="center"
|
||
/>
|
||
|
||
<!-- 状态 -->
|
||
<el-table-column
|
||
prop="status"
|
||
label="状态"
|
||
width="120"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="status-tag">
|
||
<span class="status-dot" :style="{ color: getStatusColor(scope.row.status) }">●</span>
|
||
<dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 目标人数 -->
|
||
<el-table-column
|
||
prop="targetCount"
|
||
label="目标人数"
|
||
width="100"
|
||
align="center"
|
||
/>
|
||
|
||
<!-- 预警人数（带悬停详情） -->
|
||
<el-table-column
|
||
label="预警人数"
|
||
width="120"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-tooltip placement="top" effect="light">
|
||
<div slot="content">
|
||
<div style="padding: 8px;">
|
||
<div style="margin-bottom: 8px; font-weight: bold; color: #303133;">
|
||
风险人数统计
|
||
</div>
|
||
<div style="margin-bottom: 6px;">
|
||
<span style="color: #f56c6c;">● 高风险：</span>
|
||
<span style="font-weight: bold;">{{ scope.row.highRiskCount }} 人</span>
|
||
</div>
|
||
<div style="margin-bottom: 6px;">
|
||
<span style="color: #e6a23c;">● 中风险：</span>
|
||
<span style="font-weight: bold;">{{ scope.row.mediumRiskCount }} 人</span>
|
||
</div>
|
||
<div>
|
||
<span style="color: #909399;">● 低风险：</span>
|
||
<span style="font-weight: bold;">{{ scope.row.lowRiskCount }} 人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="warning-count-wrapper">
|
||
<span :class="getWarningClass(scope.row)" style="cursor: pointer;">
|
||
{{ scope.row.highRiskCount + scope.row.mediumRiskCount + scope.row.lowRiskCount }}
|
||
</span>
|
||
</div>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 操作列 -->
|
||
<el-table-column
|
||
label="操作"
|
||
width="350"
|
||
align="left"
|
||
fixed="right"
|
||
>
|
||
<template slot-scope="scope">
|
||
<!-- 进行中状态 (status = '0') -->
|
||
<el-button
|
||
v-if="scope.row.status === '0'"
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-right"
|
||
@click="handleEnter(scope.row)"
|
||
>进入项目</el-button>
|
||
|
||
<!-- 已完成状态 (status = '1') -->
|
||
<template v-if="scope.row.status === '1'">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-view"
|
||
@click="handleViewResult(scope.row)"
|
||
>查看结果</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-refresh"
|
||
@click="handleReAnalyze(scope.row)"
|
||
>重新分析</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-folder"
|
||
@click="handleArchive(scope.row)"
|
||
>归档</el-button>
|
||
</template>
|
||
|
||
<!-- 已归档状态 (status = '2') -->
|
||
<el-button
|
||
v-if="scope.row.status === '2'"
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-view"
|
||
@click="handleViewResult(scope.row)"
|
||
>查看结果</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
v-show="total > 0"
|
||
:current-page="pageParams.pageNum"
|
||
:page-size="pageParams.pageSize"
|
||
:page-sizes="[10, 20, 30, 50]"
|
||
:total="total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
style="margin-top: 16px; text-align: right;"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ProjectTable',
|
||
dicts: ['ccdi_project_status', 'ccdi_config_type'],
|
||
props: {
|
||
dataList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
loading: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
total: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
pageParams: {
|
||
type: Object,
|
||
default: () => ({
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
getStatusColor(status) {
|
||
const colorMap = {
|
||
'0': '#1890ff', // 进行中 - 蓝色
|
||
'1': '#52c41a', // 已完成 - 绿色
|
||
'2': '#8c8c8c' // 已归档 - 灰色
|
||
}
|
||
return colorMap[status] || '#8c8c8c'
|
||
},
|
||
|
||
getWarningClass(row) {
|
||
const total = row.highRiskCount + row.mediumRiskCount + row.lowRiskCount
|
||
if (row.highRiskCount > 0) {
|
||
return 'text-danger text-bold'
|
||
} else if (row.mediumRiskCount > 0) {
|
||
return 'text-warning text-bold'
|
||
} else if (total > 0) {
|
||
return 'text-info'
|
||
}
|
||
return ''
|
||
},
|
||
|
||
handleEnter(row) {
|
||
this.$emit('enter', row)
|
||
},
|
||
|
||
handleViewResult(row) {
|
||
this.$emit('view-result', row)
|
||
},
|
||
|
||
handleReAnalyze(row) {
|
||
this.$emit('re-analyze', row)
|
||
},
|
||
|
||
handleArchive(row) {
|
||
this.$emit('archive', row)
|
||
},
|
||
|
||
handleSizeChange(val) {
|
||
this.$emit('pagination', { pageNum: this.pageParams.pageNum, pageSize: val })
|
||
},
|
||
|
||
handleCurrentChange(val) {
|
||
this.$emit('pagination', { pageNum: val, pageSize: this.pageParams.pageSize })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.project-table-container {
|
||
margin-top: 16px;
|
||
|
||
// 表格整体样式 - Material Design 卡片式
|
||
::v-deep .el-table {
|
||
// 移除边框，使用阴影
|
||
border: none !important;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
|
||
// 悬停时卡片阴影加深
|
||
transition: box-shadow 0.3s ease;
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
// 表头样式 - 扁平化，无背景色
|
||
th.el-table__cell {
|
||
background-color: transparent !important;
|
||
color: #333;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
height: 56px;
|
||
padding: 16px 12px;
|
||
|
||
// 只保留底部一条分隔线
|
||
border-bottom: 2px solid #e0e0e0 !important;
|
||
border-right: none !important;
|
||
}
|
||
|
||
// 数据行样式 - 增加留白，移除分隔线
|
||
td.el-table__cell {
|
||
color: #333;
|
||
font-size: 14px;
|
||
height: 64px;
|
||
padding: 20px 12px;
|
||
border-bottom: none !important;
|
||
border-right: none !important;
|
||
}
|
||
|
||
// 移除列分隔线
|
||
.el-table__body-wrapper {
|
||
.cell {
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
// 悬停效果
|
||
.el-table__row {
|
||
transition: background-color 0.2s ease;
|
||
|
||
&:hover > td.el-table__cell {
|
||
background-color: #fafafa !important;
|
||
}
|
||
}
|
||
|
||
// 移除额外边框
|
||
&::before,
|
||
&::after {
|
||
display: none !important;
|
||
}
|
||
|
||
// 移除 inner border
|
||
.el-table__inner-wrapper::before {
|
||
display: none !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.status-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
|
||
.status-dot {
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
.project-info-cell {
|
||
padding: 8px 0;
|
||
line-height: 1.5;
|
||
|
||
.project-name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 4px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.project-desc {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.warning-count-wrapper {
|
||
display: inline-block;
|
||
}
|
||
|
||
.text-danger {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.text-warning {
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.text-info {
|
||
color: #909399;
|
||
}
|
||
|
||
.text-bold {
|
||
font-weight: bold;
|
||
}
|
||
|
||
// 操作按钮样式 - Material Design 风格
|
||
::v-deep .el-button--text {
|
||
color: #1890ff;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
color: #096dd9;
|
||
background-color: rgba(24, 144, 255, 0.08);
|
||
text-decoration: none;
|
||
}
|
||
|
||
&:first-child {
|
||
padding-left: 0;
|
||
}
|
||
|
||
// 按钮间距
|
||
& + .el-button--text {
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
// 分页样式优化 - Material Design 风格
|
||
::v-deep .el-pagination {
|
||
margin-top: 24px;
|
||
text-align: right;
|
||
|
||
// 扁平化按钮
|
||
.btn-prev,
|
||
.btn-next,
|
||
.el-pager li {
|
||
border: none;
|
||
background-color: transparent;
|
||
|
||
&:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
}
|
||
|
||
.el-pager li.active {
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.el-pagination__total,
|
||
.el-pagination__sizes,
|
||
.el-pagination__jump {
|
||
color: #666;
|
||
}
|
||
}
|
||
</style>
|