348 lines
7.8 KiB
Vue
348 lines
7.8 KiB
Vue
<template>
|
|
<div class="project-table-container">
|
|
<el-card class="table-card" shadow="hover">
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="dataList"
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '600' }"
|
|
>
|
|
<!-- 序号 -->
|
|
<el-table-column
|
|
type="index"
|
|
label="序号"
|
|
width="60"
|
|
align="center"
|
|
/>
|
|
|
|
<!-- 项目名称 -->
|
|
<el-table-column
|
|
label="项目名称"
|
|
min-width="160"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="project-name-cell">
|
|
<div class="name">{{ scope.row.projectName }}</div>
|
|
<div class="desc">{{ scope.row.projectDesc }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 创建时间 -->
|
|
<el-table-column
|
|
label="创建时间"
|
|
prop="createTime"
|
|
width="110"
|
|
align="center"
|
|
/>
|
|
|
|
<!-- 状态 -->
|
|
<el-table-column
|
|
label="状态"
|
|
prop="projectStatus"
|
|
width="90"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tag
|
|
:type="getStatusType(scope.row.projectStatus)"
|
|
size="medium"
|
|
effect="plain"
|
|
>
|
|
{{ getStatusLabel(scope.row.projectStatus) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 目标人数 -->
|
|
<el-table-column
|
|
label="目标人数"
|
|
prop="targetCount"
|
|
width="80"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span class="count-number">{{ scope.row.targetCount }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 预警人数 -->
|
|
<el-table-column
|
|
label="预警人数"
|
|
width="90"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span :class="getWarningClass(scope.row)">{{ scope.row.warningCount }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 操作 -->
|
|
<el-table-column
|
|
label="操作"
|
|
width="200"
|
|
align="center"
|
|
fixed="right"
|
|
class-name="operation-column"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="operation-buttons">
|
|
<!-- 进行中项目 -->
|
|
<template v-if="scope.row.projectStatus === '0'">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-s-data"
|
|
@click="handleEnter(scope.row)"
|
|
>进入项目</el-button>
|
|
</template>
|
|
|
|
<!-- 已完成项目 -->
|
|
<template v-else-if="scope.row.projectStatus === '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>
|
|
|
|
<!-- 已归档项目 -->
|
|
<template v-else>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-document"
|
|
@click="handleDetail(scope.row)"
|
|
>查看详情</el-button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
:current-page="pageParams.pageNum"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
:page-size="pageParams.pageSize"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ProjectTable',
|
|
props: {
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
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'
|
|
},
|
|
/** 获取状态标签 */
|
|
getStatusLabel(status) {
|
|
const statusMap = {
|
|
'0': '进行中',
|
|
'1': '已完成',
|
|
'2': '已归档'
|
|
}
|
|
return statusMap[status] || '未知'
|
|
},
|
|
/** 获取预警数量样式类名 */
|
|
getWarningClass(row) {
|
|
if (row.warningCount > 20) return 'warning-high'
|
|
if (row.warningCount > 10) return 'warning-medium'
|
|
return 'warning-normal'
|
|
},
|
|
/** 进入项目 */
|
|
handleEnter(row) {
|
|
this.$emit('enter', row)
|
|
},
|
|
/** 查看详情 */
|
|
handleDetail(row) {
|
|
this.$emit('detail', 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', { pageSize: val, pageNum: 1 })
|
|
},
|
|
/** 当前页变化 */
|
|
handleCurrentChange(val) {
|
|
this.$emit('pagination', { pageNum: val })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.project-table-container {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.table-card {
|
|
border-radius: 4px;
|
|
border: 1px solid #EBEEF5;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
|
|
:deep(.el-card__body) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.project-name-cell {
|
|
.name {
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin-bottom: 2px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
}
|
|
|
|
.count-number {
|
|
font-weight: 500;
|
|
color: #606266;
|
|
}
|
|
|
|
.warning-count-cell {
|
|
.warning-high {
|
|
color: #F56C6C;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.warning-medium {
|
|
color: #E6A23C;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.warning-normal {
|
|
color: #67C23A;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.pagination-container {
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
border-top: 1px solid #EBEEF5;
|
|
}
|
|
|
|
// 表格行样式优化
|
|
:deep(.el-table) {
|
|
.el-table__row {
|
|
transition: background-color 0.3s;
|
|
|
|
&:hover {
|
|
background-color: #f5f7fa;
|
|
}
|
|
}
|
|
|
|
.el-table__body-wrapper {
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #dcdfe6;
|
|
border-radius: 3px;
|
|
|
|
&:hover {
|
|
background-color: #c0c4cc;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 操作列样式
|
|
.operation-column {
|
|
.cell {
|
|
padding: 0 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.operation-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
|
|
:deep(.el-button--mini) {
|
|
padding: 4px 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
:deep(.el-button--mini .el-icon--left) {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
:deep(.el-button + .el-button) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|