336 lines
12 KiB
Vue
336 lines
12 KiB
Vue
<!-- 后勤模块 - 项目总览查询 - 列表 -->
|
||
|
||
<template>
|
||
<div class="MainBox">
|
||
<el-form :model="queryForm" class="card-box mb-4" label-position="top">
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-form-item label="项目名称/编号">
|
||
<el-input v-model="queryForm.projectName" placeholder="请输入项目名称/编号"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="所属层级节点">
|
||
<el-select v-model="queryForm.nodeType" placeholder="请选择节点类型" clearable>
|
||
<el-option v-for="item in nodeTypeList" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="施工单位">
|
||
<el-input v-model="queryForm.constructionUnit" placeholder="请输入施工单位"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="监理单位">
|
||
<el-input v-model="queryForm.supervisionUnit" placeholder="请输入监理单位"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="作业类型">
|
||
<el-select v-model="queryForm.workType" placeholder="请选择作业类型" clearable>
|
||
<el-option v-for="item in workTypeList" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<el-form-item label="风险类型">
|
||
<el-select v-model="queryForm.riskType" placeholder="请选择风险类型" clearable>
|
||
<el-option v-for="item in riskTypeList" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="项目状态">
|
||
<el-select v-model="queryForm.projectStatus" placeholder="请选择项目状态" clearable>
|
||
<el-option v-for="item in projectStatusList" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="作业时间">
|
||
<el-date-picker v-model="queryForm.dateRange" type="daterange" value-format="yyyy-MM-dd"
|
||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<el-button size="default">重置</el-button>
|
||
<el-button type="primary" size="default">查询</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<div class="card-box">
|
||
<el-table :data="tableData" class="mt-2">
|
||
<el-table-column prop="projectNo" label="项目编号" fixed="left" width="200"></el-table-column>
|
||
<el-table-column prop="projectName" label="项目名称" fixed="left" width="200"></el-table-column>
|
||
<el-table-column prop="nodeName" label="所属节点" width="200"></el-table-column>
|
||
<el-table-column prop="constructionUnit" label="单位施工" width="200"></el-table-column>
|
||
<el-table-column prop="supervisionUnit" label="监理单位" width="200"></el-table-column>
|
||
<el-table-column prop="operationLocation" label="作业地点" width="200"></el-table-column>
|
||
<el-table-column prop="operationTime" label="作业起止时间" width="200"></el-table-column>
|
||
<el-table-column prop="workPlanStatus" label="工作计划审批状态" width="200"></el-table-column>
|
||
<el-table-column prop="entrancePermitStatus" label="出入证申请状态" width="200"></el-table-column>
|
||
<el-table-column prop="workTicketStatus" label="工作票状态" width="200"></el-table-column>
|
||
<el-table-column prop="highRiskWorkTicketStatus" label="高风险工作票状态" width="200"></el-table-column>
|
||
<el-table-column prop="allotStatus" label="球机分配状态" width="200"></el-table-column>
|
||
<el-table-column prop="ReviewStatusA" label="监理复核状态" width="200"></el-table-column>
|
||
<el-table-column prop="ReviewStatusB" label="物业复核状态" width="200"></el-table-column>
|
||
<el-table-column prop="TemplateType" label="风险卡模版类型" width="200"></el-table-column>
|
||
<el-table-column prop="progress" label="必选项完成度" width="200">
|
||
<template #default="scope">
|
||
<el-progress :percentage="scope.row.progress"
|
||
:format="(percentage) => `${percentage}%`"></el-progress>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="problemNumAI" label="AI反馈问题数" width="200"></el-table-column>
|
||
<el-table-column prop="problemNumSupervision" label="监理反馈问题数" width="200"></el-table-column>
|
||
<el-table-column prop="rectifyNum" label="整改完成数" width="200"></el-table-column>
|
||
<el-table-column prop="permissionDesc" label="整改通过率" width="200"></el-table-column>
|
||
<el-table-column prop="projectStatus" label="项目状态" width="200">
|
||
<template #default="scope">
|
||
<el-tag :type="scope.row.projectStatus === '已完成' ? 'success' : 'danger'">{{
|
||
scope.row.projectStatus }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="180" fixed="right">
|
||
<template #default="scope">
|
||
<el-button size="small" type="primary" link @click="handleDetailClick(scope.row)">查看详情</el-button>
|
||
<el-button size="small" type="primary" link @click="handleExportClick(scope.row)">导出档案</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="pagination-container">
|
||
<span class="total-count">显示第 {{ (pageNum - 1) * pageSize + 1 }} 到 {{ pageNum * pageSize }} 条记录，共 {{
|
||
total }}条</span>
|
||
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 20]"
|
||
:total="total" layout="prev, pager, next"></el-pagination>
|
||
</div>
|
||
</div>
|
||
<!-- 节点审核弹窗 -->
|
||
<DialogBox v-if="dialogShow" ref="dialogRef" :show="dialogShow" :CloseDialog="handleCancel" />
|
||
</div>
|
||
</template>
|
||
<script setup name="Index">
|
||
import { ref } from "vue";
|
||
import DialogBox from "./DialogBox/index.vue";
|
||
|
||
|
||
|
||
// 查询表单数据
|
||
const queryForm = ref({
|
||
projectName: "",
|
||
nodeType: "",
|
||
constructionUnit: "",
|
||
dateRange: [],
|
||
});
|
||
|
||
// 作业类型列表
|
||
const workTypeList = ref([
|
||
{
|
||
label: "正常作业",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "异常作业",
|
||
value: "2"
|
||
},
|
||
]);
|
||
|
||
// 风险类型列表
|
||
const riskTypeList = ref([
|
||
{
|
||
label: "高风险",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "中风险",
|
||
value: "2"
|
||
},
|
||
{
|
||
label: "低风险",
|
||
value: "3"
|
||
},
|
||
]);
|
||
|
||
// 项目状态列表
|
||
const projectStatusList = ref([
|
||
{
|
||
label: "实施中",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "待审批",
|
||
value: "2"
|
||
},
|
||
{
|
||
label: "已完成",
|
||
value: "3"
|
||
},
|
||
]);
|
||
|
||
|
||
|
||
// 节点类型列表
|
||
const nodeTypeList = ref([
|
||
{
|
||
label: "部门",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "楼层",
|
||
value: "2"
|
||
},
|
||
{
|
||
label: "班组",
|
||
value: "3"
|
||
},
|
||
]);
|
||
|
||
// 表格数据
|
||
const tableData = ref([
|
||
{
|
||
id: 1,
|
||
projectNo: "PM20240610001",
|
||
projectName: "XX输变电工程",
|
||
nodeName: "城东片区",
|
||
constructionUnit: "XX建设有限公司",
|
||
supervisionUnit: "XX监理有限公司",
|
||
operationLocation: "XX市XX区",
|
||
operationTime: "2024-06-10 09:00至2024-06-15 17:00",
|
||
workPlanStatus: "已审批",
|
||
entrancePermitStatus: "已申请",
|
||
workTicketStatus: "已签发",
|
||
highRiskWorkTicketStatus: "已签发",
|
||
allotStatus: "已分配",
|
||
ReviewStatusA: "已复核",
|
||
ReviewStatusB: "已复核",
|
||
TemplateType: "高空作业",
|
||
progress: 75,
|
||
problemNumAI: 2,
|
||
problemNumSupervision: 1,
|
||
rectifyNum: 3,
|
||
permissionDesc: "100%",
|
||
projectStatus: "已完成"
|
||
},
|
||
{
|
||
id: 2,
|
||
projectNo: "PM20240609001",
|
||
projectName: "XX变电站工程",
|
||
nodeName: "城西片区",
|
||
constructionUnit: "XX建设有限公司",
|
||
supervisionUnit: "XX监理有限公司",
|
||
operationLocation: "XX市XX区",
|
||
operationTime: "2024-06-09 10:00至2024-06-14 18:00",
|
||
workPlanStatus: "已审批",
|
||
entrancePermitStatus: "已申请",
|
||
workTicketStatus: "已签发",
|
||
highRiskWorkTicketStatus: "已签发",
|
||
allotStatus: "已分配",
|
||
ReviewStatusA: "已复核",
|
||
ReviewStatusB: "已复核",
|
||
TemplateType: "高空作业",
|
||
progress: 80,
|
||
problemNumAI: 1,
|
||
problemNumSupervision: 0,
|
||
rectifyNum: 1,
|
||
permissionDesc: "100%",
|
||
projectStatus: "已完成"
|
||
},
|
||
{
|
||
id: 3,
|
||
projectNo: "PM20240608001",
|
||
projectName: "XX线路工程",
|
||
nodeName: "城南片区",
|
||
constructionUnit: "XX建设有限公司",
|
||
supervisionUnit: "XX监理有限公司",
|
||
operationLocation: "XX市XX区",
|
||
operationTime: "2024-06-08 08:00至2024-06-13 16:00",
|
||
workPlanStatus: "已审批",
|
||
entrancePermitStatus: "已申请",
|
||
workTicketStatus: "已签发",
|
||
highRiskWorkTicketStatus: "已签发",
|
||
allotStatus: "已分配",
|
||
ReviewStatusA: "已复核",
|
||
ReviewStatusB: "已复核",
|
||
TemplateType: "高空作业",
|
||
progress: 90,
|
||
problemNumAI: 0,
|
||
problemNumSupervision: 0,
|
||
rectifyNum: 0,
|
||
permissionDesc: "100%",
|
||
projectStatus: "已完成"
|
||
}
|
||
]);
|
||
const dialogShow = ref(false); // 入库审核弹窗-显示状态
|
||
const pageNum = ref(1); // 当前页码
|
||
const pageSize = ref(5); // 每页显示条数
|
||
const total = ref(20); // 总记录数
|
||
|
||
|
||
// 查看详情
|
||
const handleDetailClick = (row) => {
|
||
dialogShow.value = true
|
||
}
|
||
|
||
// 关闭弹窗
|
||
const handleCancel = () => {
|
||
console.log('关闭弹窗')
|
||
dialogShow.value = false
|
||
}
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.MainBox {
|
||
padding: 20px;
|
||
height: 100%;
|
||
background: #F9FAFB;
|
||
}
|
||
|
||
.FlexBox {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.TitleBox {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
|
||
.mt-2 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
|
||
.card-box {
|
||
background: #fff;
|
||
padding: 16px;
|
||
border-radius: 4px;
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pagination-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.total-count {
|
||
color: #606266;
|
||
}
|
||
</style>
|