2023-09-15 14:34:02 +08:00

666 lines
20 KiB
Vue

<template>
<div class="overview">
<el-dialog :show-close="false" v-model="visible1" width="1350px" @close="closeMain">
<template #title>
<div class="title-detail">
<img src="@/assets/images/tableIcon/look.png" alt="" />
<span>查看危大工程信息</span>
<el-icon>
<close @click="closeMain" />
</el-icon>
</div>
</template>
<el-form ref="formRef" :model="formData" label-width="180px" :rules="rules" class="basic-form" size="default">
<div class="basic-info">
<div class="content-title">基本信息</div>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="危大工程名称:" prop="engineeringName">
<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="危大工程类别:" prop="type">
<el-select v-model="formData.type" placeholder="请选择" style="width: 100%" disabled>
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="危大工程概况:" prop="engineeringSurvey">
<el-input v-model="formData.engineeringSurvey" placeholder="请输入" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类别描述:" prop="typeDescribe">
<el-input v-model="formData.typeDescribe" placeholder="请输入" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="施工部位:" prop="constructionLocation">
<el-input v-model="formData.constructionLocation" placeholder="请输入" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划时间:" prop="planRange">
<el-date-picker
disabled
style="width: 100%"
v-model="formData.planRange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
type="daterange"
placeholder="请选择时间"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="施工时间:" prop="constructionRange">
<el-date-picker
disabled
style="width: 100%"
v-model="formData.constructionRange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
type="daterange"
placeholder="请选择时间"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="责任人:" prop="personLiable">
<el-input v-model="formData.personLiable" placeholder="请输入" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="责任分包单位:" prop="responsibilityCompany">
<el-input v-model="formData.responsibilityCompany" placeholder="请输入" disabled />
</el-form-item>
</el-col>
</el-row>
</div>
<div class="basic-info">
<div class="content-title">危大工程资料</div>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="安全技术交底:" prop="devName">
<div class="switch-box">
<el-switch v-model="formData.technicalDisclosureType" :active-value="2" :inactive-value="1" disabled />
<span>{{ formData.technicalDisclosureType == 2 ? "已完成" : "未完成" }}</span>
<el-button type="primary" @click="onDownLoad('technicalDisclosureFile')">点击下载</el-button>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安全专项施工方案及附件:" prop="devNumber">
<div class="switch-box">
<el-switch v-model="formData.securityConstructionSchemeType" :active-value="2" :inactive-value="1" disabled />
<span>{{ formData.securityConstructionSchemeType == 2 ? "已完成" : "未完成" }}</span>
<el-button type="primary" @click="onDownLoad('securityConstructionSchemeFile')">点击下载</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="专项施工方案交底:" prop="devName">
<div class="switch-box">
<el-switch v-model="formData.specialConstructionSchemeType" :active-value="2" :inactive-value="1" disabled />
<span>{{ formData.specialConstructionSchemeType == 2 ? "已完成" : "未完成" }}</span>
<el-button type="primary" @click="onDownLoad('specialConstructionSchemeFile')">点击下载</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="basic-info">
<div class="content-title">过程管控</div>
<div class="tabs-option">
<el-tabs v-model="tabPosition" type="card" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane :label="item.name" :name="index" v-for="(item, index) in tabsList" :key="index"> </el-tab-pane>
</el-tabs>
<div class="table" v-if="tabPosition != 5 && tabPosition != 6 && tabPosition != 7">
<el-table
:data="arrOne"
border
height="260"
class="el-table"
:row-style="{ height: '40px', textAlign: 'center' }"
:header-cell-style="{ height: '40px', backgroundColor: '#e1eeff', textAlign: 'center' }"
:cell-style="{ height: '40px', textAlign: 'center' }"
>
<el-table-column type="index" label="序号" width="200" />
<el-table-column prop="annexName" label="附件名称"></el-table-column>
<el-table-column prop="fileList" label="操作">
<template #default="{ row, $index }">
<el-button v-if="row.id" type="primary" @click="onTableDownLoad(row)" link>下载附件</el-button>
</template>
</el-table-column>
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
</div>
<div class="table" v-if="tabPosition == 5">
<el-table
:data="arrFive"
class="el-table"
height="260"
:row-style="{ height: '40px' }"
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
:cell-style="{ textAlign: 'center', height: '40px' }"
>
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="currentProgress" label="当前进度"> </el-table-column>
<el-table-column prop="imageUrl" label="图片">
<template #default="{ row }">
<img v-if="row.imageUrl" class="showImg" :src="row.imageUrl" />
</template>
</el-table-column>
<el-table-column prop="createByName" label="记录人"> </el-table-column>
<el-table-column prop="createTime" label="记录时间"> </el-table-column>
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
</div>
<div class="table" v-if="tabPosition == 6">
<el-table
:data="arrSeven"
class="el-table"
height="260"
:row-style="{ height: '40px' }"
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
:cell-style="{ textAlign: 'center', height: '40px' }"
>
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="inspectResult" label="检查结果"> </el-table-column>
<el-table-column prop="inspectUser" label="检查人"> </el-table-column>
<el-table-column prop="inspectTime" label="检查时间"> </el-table-column>
<el-table-column prop="question" label="隐患信息"> </el-table-column>
<el-table-column prop="solveUser" label="整改人"> </el-table-column>
<el-table-column prop="questionDesc" label="隐患详情"> </el-table-column>
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
</div>
<div class="table" v-if="tabPosition == 7">
<el-table
:data="arrEight"
class="el-table"
height="260"
:row-style="{ height: '40px' }"
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
:cell-style="{ textAlign: 'center', height: '40px' }"
>
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="type" label="验收类型">
<template #default="{ row }">
<span>{{ textTransform(row.type) }}</span>
</template>
</el-table-column>
<el-table-column prop="result" label="验收结果">
<template #default="{ row }">
<span>{{ row.result == 1 ? "合格" : "不合格" }}</span>
</template>
</el-table-column>
<el-table-column prop="state" label="验收状态">
<template #default="{ row }">
<span>{{ row.state == 2 ? "已验收" : "待验收" }}</span>
</template>
</el-table-column>
<el-table-column prop="imageUrl" label="图片">
<template #default="{ row }">
<img class="showImg" v-if="row.imageUrl" :src="row.imageUrl" />
</template>
</el-table-column>
<el-table-column prop="acceptTime" label="验收时间" width="160"> </el-table-column>
<el-table-column prop="createByName" label="记录人"> </el-table-column>
<el-table-column prop="createTime" label="记录时间" width="180"> </el-table-column>
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
</div>
</div>
</div>
</el-form>
<template #footer>
<el-button type="primary" @click="visible1 = false">关闭</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { getDicList } from "@/api/modules/jxjview";
import FilesUploadPlus from "@/components/FilesUploadPlus/FilesUpload.vue";
import {
dangerousEngineerDetails,
constructionSchemeList,
constructionSchemeFile,
constructionProgressList,
localInspectList,
engineerAcceptList
} from "@/api/modules/goverment";
import DownLoad from "@/utils/annexDowload.ts";
const tabsList = ref([
{ name: "专项施工方案" },
{ name: "专家论证" },
{ name: "方案交底" },
{ name: "安全技术交底" },
{ name: "施工条件验收" },
{ name: "施工进度" },
{ name: "现场巡视" },
{ name: "危大工程验收" },
{ name: "全部管控资料" }
]);
const props = defineProps({
detailsVisible: Boolean,
searchSn: String,
relativeId: String
});
const emits = defineEmits(["update:detailsVisible"]);
const arrOne = ref<any>([]);
const arrFive = ref<any>([]);
const arrSeven = ref<any>([]);
const arrEight = ref<any>([]);
const tabPosition = ref(0);
const documentDataIndex = ref(0);
const current = ref({
files: []
});
const typeList = ref([]);
const acceptTypeList = ref([]);
const rules = ref({
engineeringName: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
type: [
{
required: true,
message: "请输入",
trigger: "change"
}
],
typeDescribe: [
{
required: true,
message: "请输入",
trigger: "blur"
}
]
});
const formRef = ref<FormInstance>();
const formData = ref<any>({
technicalDisclosureFile: [],
securityConstructionSchemeFile: [],
specialConstructionSchemeFile: []
});
const visible1 = ref(false);
// 验收类型文本转换;
const textTransform = (id: any) => {
let findItem: any = acceptTypeList.value.find(item => item.value == id);
return findItem?.label;
};
// 获取附件列表
const getConstructionSchemeList = async () => {
const res = await constructionSchemeList({ dangerousEngineeringId: props.relativeId, type: tabPosition.value });
console.log(res);
if (res.result && res.result.length > 0) {
arrOne.value = res.result;
} else {
arrOne.value = [];
}
};
// 获取施工进度列表
const getConstructionProgressList = async () => {
const res = await constructionProgressList({ dangerousEngineeringId: props.relativeId });
console.log(res);
if (res.result && res.result.length > 0) {
arrFive.value = res.result;
} else {
arrFive.value = [];
}
};
// 获取现场巡视列表
const getLocalInspectList = async () => {
const res = await localInspectList({ dangerousEngineeringId: props.relativeId });
console.log(res);
if (res.result && res.result.length > 0) {
arrSeven.value = res.result;
} else {
arrSeven.value = [];
}
};
// 获取危大工程验收列表
const getengineerAcceptList = async () => {
const res = await engineerAcceptList({ dangerousEngineeringId: props.relativeId });
console.log(res);
if (res.result && res.result.length > 0) {
arrEight.value = res.result;
} else {
arrEight.value = [];
}
};
// 获取危大工程详情
const getDetailsData = async () => {
const res = await dangerousEngineerDetails({ id: props.relativeId });
console.log(res);
if (res && res.result) {
formData.value = { ...res.result };
}
if (formData.value.constructionPlanStartTime && formData.value.constructionPlanEndTime) {
formData.value.planRange = [formData.value.constructionPlanStartTime, formData.value.constructionPlanEndTime];
}
if (formData.value.constructionStartTime && formData.value.constructionEndTime) {
formData.value.constructionRange = [formData.value.constructionStartTime, formData.value.constructionEndTime];
}
};
// tabs项点击时
const handleClick = (pane: any) => {
tabPosition.value = pane.props.name;
const listOperation = [getConstructionSchemeList, getConstructionProgressList, getLocalInspectList, getengineerAcceptList];
if (tabPosition.value < 5 || tabPosition.value == 8) {
listOperation[0]();
} else {
listOperation[tabPosition.value - 4]();
}
};
// 附件上传改变
const handlechange = e => {
console.log(e);
current.value.files = e.map(item => {
item.label = current.value.dictLabel;
return item;
});
console.log(current.value.files);
arrOne.value[documentDataIndex.value].fileList = current.value.files;
};
// 危大工程资料
const onDownLoad = (key: any) => {
console.log(key);
console.log(formData.value[key]);
let val = JSON.parse(formData.value[key]);
if (val && val.length > 0) {
DownLoad(val);
} else {
ElMessage.error("暂无可下载文件");
}
};
// 表格附件下载
const onTableDownLoad = async (row: any) => {
console.log(row);
let requestData = {
id: row.id
};
const { result } = await constructionSchemeFile(requestData);
console.log(result);
if (result && result.length > 0) {
DownLoad(result);
} else {
ElMessage.error("暂无可下载文件");
}
};
// 获取验收类型字典
const getAcceptTypeList = async () => {
const { result } = await getDicList({ dictType: "check_accept_type" });
if (result.length > 0) {
let arr: any = [];
result.map(item => {
arr.push({
label: item.dictValue,
value: item.dictLabel
});
});
acceptTypeList.value.length = 0;
acceptTypeList.value.push(...arr);
}
};
const getTypeDicMainList = async () => {
// 获取起重机械设备类型字典
const { result } = await getDicList({ dictType: "dangerous_engineer_type" });
if (result.length > 0) {
let arr: any = [];
result.map(item => {
arr.push({
label: item.dictValue,
value: item.dictLabel
});
});
typeList.value.length = 0;
typeList.value.push(...arr);
}
};
// 关闭两个对话框
const closeMain = () => {
visible1.value = false;
emits("update:detailsVisible", false);
};
watch(
() => props.detailsVisible,
n => {
if (n) {
getAcceptTypeList();
getTypeDicMainList();
getDetailsData();
getConstructionSchemeList();
setTimeout(function () {
formRef.value?.clearValidate();
}, 200);
visible1.value = n;
tabPosition.value = 0;
}
}
);
watch(
() => visible1.value,
n => {
emits("update:detailsVisible", n);
}
);
onMounted(() => {});
</script>
<style lang="scss" scoped>
@mixin flex {
display: flex;
align-items: center;
}
@mixin title {
font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #333333;
border-left: 2px solid #008bff;
padding-left: 5px;
}
.overview {
:deep() {
.el-dialog__body {
padding-top: 0;
padding-bottom: 0;
}
}
.title-detail {
@include flex;
> img {
width: 16px;
height: 18px;
}
> span {
font-size: 18px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #333333;
margin-left: 5px;
margin-right: auto;
}
:deep(.el-icon) {
cursor: pointer;
color: #a8abb2;
}
}
.basic-form {
margin-bottom: 42px;
.basic-info {
.content-title {
@include title;
margin-bottom: 35px;
}
.switch-box {
width: 100%;
display: flex;
align-items: center;
> span {
margin-right: auto;
margin-left: 9px;
}
}
.tabs-option {
width: 100%;
.table {
width: 100%;
// height: 310px;
margin-top: 15px;
:deep(.el-table) {
height: 100%;
}
.face-img {
width: 100%;
align-self: flex-start;
:deep(.face-uploader .el-upload) {
border: 1px dashed #d9d9d9 !important;
border-radius: 6px !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
}
.face-uploader .el-upload:hover {
border-color: #409eff !important;
}
:deep(.el-icon) {
font-size: 24px;
color: #8c939d;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}
.face-avatar {
width: 35px;
height: 35px;
display: block;
}
}
.showImg {
width: 35px;
height: 35px;
border-radius: 6px;
}
.table-empty {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
flex: 1;
flex-direction: column;
color: #999;
}
}
}
}
}
}
:deep(.el-tabs--card > .el-tabs__header) {
border-bottom: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
width: 100%;
background: #f8f8f8;
border: 0;
}
:deep(.el-tabs__nav-scroll) {
display: flex;
.el-tabs__item {
width: 50%;
text-align: center;
// background: #f8f8f8;
color: #333;
// border: 1px solid #e5e5e5;
// border-radius: 8px;
}
.el-tabs__item.is-active {
background-color: #008bff;
color: #fff;
}
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
border-bottom-color: #008bff !important;
}
:deep(#tab-0) {
border-radius: 4px 0 0 4px;
border: 1px solid #e5e5e5;
border-right: 0;
}
:deep() {
#tab-1,
#tab-2,
#tab-3,
#tab-4,
#tab-5,
#tab-6,
#tab-7 {
border: 1px solid #e5e5e5;
border-right: 0;
}
}
:deep(#tab-8) {
border: 1px solid #e5e5e5;
border-radius: 0 4px 4px 0;
}
</style>