375 lines
8.7 KiB
Vue
375 lines
8.7 KiB
Vue
<template>
|
||
<div class="project-table-container">
|
||
<el-table
|
||
:data="dataList"
|
||
:loading="loading"
|
||
border
|
||
style="width: 100%"
|
||
>
|
||
<!-- 项目名称（含描述） -->
|
||
<el-table-column
|
||
label="项目名称"
|
||
min-width="300"
|
||
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="status"
|
||
label="项目状态"
|
||
width="160"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-tag :type="getStatusType(scope.row.status)">
|
||
<dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
|
||
</el-tag>
|
||
</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
|
||
prop="createByName"
|
||
label="创建人"
|
||
width="120"
|
||
align="center"
|
||
/>
|
||
|
||
<!-- 创建时间 -->
|
||
<el-table-column
|
||
prop="createTime"
|
||
label="创建时间"
|
||
width="160"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 操作列 -->
|
||
<el-table-column
|
||
label="操作"
|
||
width="200"
|
||
align="center"
|
||
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: {
|
||
getStatusType(status) {
|
||
const statusMap = {
|
||
'0': 'primary', // 进行中
|
||
'1': 'success', // 已完成
|
||
'2': 'info' // 已归档
|
||
}
|
||
return statusMap[status] || 'info'
|
||
},
|
||
|
||
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 卡片式
|
||
:deep(.el-table) {
|
||
// 移除边框，使用阴影
|
||
border: none;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
||
// 悬停时卡片阴影加深
|
||
transition: box-shadow 0.3s ease;
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
// 表头样式 - 扁平化，无背景色
|
||
th {
|
||
background-color: transparent;
|
||
color: #333;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
height: 56px;
|
||
padding: 16px 12px;
|
||
|
||
// 只保留底部一条分隔线
|
||
border-bottom: 2px solid #e0e0e0;
|
||
}
|
||
|
||
// 数据行样式
|
||
td {
|
||
color: #333;
|
||
font-size: 14px;
|
||
height: 50px;
|
||
padding: 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
// 移除列分隔线
|
||
.el-table__body-wrapper {
|
||
.cell {
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
// 悬停效果
|
||
.el-table__row:hover > td {
|
||
background-color: #f5f5f5 !important;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
// 表格内容无额外边框
|
||
&::before {
|
||
height: 0;
|
||
}
|
||
|
||
&::after {
|
||
width: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
// 操作按钮样式
|
||
:deep(.el-button--text) {
|
||
color: #1890ff;
|
||
padding: 0 8px;
|
||
|
||
&:hover {
|
||
color: #096dd9;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
&:first-child {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
// 分页样式优化
|
||
:deep(.el-pagination) {
|
||
margin-top: 16px;
|
||
text-align: right;
|
||
|
||
.el-pagination__total,
|
||
.el-pagination__sizes,
|
||
.el-pagination__jump {
|
||
color: #606266;
|
||
}
|
||
}
|
||
</style>
|