639 lines
16 KiB
Vue
Raw Normal View History

2023-09-06 14:35:32 +08:00
<template>
<div class="overview">
<el-dialog :show-close="false" v-model="visible1" width="1305px" @close="closeMain">
<template #title>
<div class="title-detail">
<span>月报详情</span>
<el-icon>
<close @click="closeMain" />
</el-icon>
</div>
</template>
<div class="report-content" id="monthlyReport">
<div class="title">{{ engineerData.engineeringName }}</div>
<div class="title">建设监理工作月报</div>
<div class="sub-title">
<span></span>
<span>{{ formData.stage }}</span>
<span></span>
</div>
<div class="sub-title">{{ engineerData.supervisorEnt }}</div>
<div class="title">监理月报签认表</div>
<div class="engineer-name">工程名称{{ engineerData.engineeringName }}</div>
<div class="report-content-part1">
<div>
2023-09-11 14:41:08 +08:00
<span> </span>
<span>{{ formData.chiefInspectorName }}</span>
<span>监理工程师</span>
</div>
<div>
<span>按照建设工程监理规范和公司的有关规定 </span>
<span>{{ formData.completeTime?.substring(0, 4) }}</span>
<span></span>
<span>{{ formData.completeTime?.substring(5, 7) }}</span>
<span></span>
<span>{{ formData.completeTime?.substring(8) }}</span>
<span></span>
<span>完成了{{ engineerData.engineeringName }}</span>
<span>{{ formData.month }}</span>
<span>月份监理月报</span>
<span>{{ formData.stage }}</span>
<span>期编写工作请予以审查签认</span>
</div>
<div>
<span style="font-weight: 700">编制人员</span>
</div>
<div>
<span>土建专业监理工程师</span>
<span>{{ formData.civilEngineeringPersons }}</span>
</div>
<div>
<span>水暖专业监理工程师</span>
<span>{{ formData.plumbingPersons }}</span>
</div>
<div>
<span>电气专业监理工程师</span>
<span>{{ formData.electricalPersons }}</span>
2023-09-06 14:35:32 +08:00
</div>
<div>签字</div>
</div>
<div class="report-content-part2">
<div>项目监理部总监理工程师签认意见</div>
<div>
<span>{{ formData.signOpinion }}</span>
</div>
<div>
<span>总监理工程师</span>
<span></span>
<span></span>
</div>
</div>
<div class="report-content-part3">
<div>
<div>工程名称</div>
<div>{{ engineerData.engineeringName }}</div>
<div>设计单位</div>
<div>{{ engineerData.designEnt }}</div>
</div>
<div>
<div>建设单位</div>
<div>{{ engineerData.buildEnt }}</div>
<div>施工单位</div>
<div>{{ engineerData.opEnt }}</div>
</div>
</div>
<div class="report-content-part4">
<div><span>形象进度完成情况</span></div>
<div>
<div>
<div><span>实际完成</span></div>
<div>
<span>{{ formData.actualCompletion }}</span>
</div>
</div>
<div>
<div>原因分析</div>
<div>
<span>{{ formData.reasonAnalysis }}</span>
</div>
</div>
</div>
</div>
<div class="report-content-part5">
<div><span>工程签证情况</span></div>
<div>
<div>
<div><span>专题报告例会纪要</span></div>
<div>
<span>{{ formData.meetingSummary }}</span>
</div>
<div><span>内容简要</span></div>
<div>
<span>{{ formData.meetingContentBriefly }}</span>
</div>
</div>
<div>
<div><span>工程质量签证</span></div>
<div>
<span>{{ formData.engineeringQualityVisa }}</span>
</div>
<div><span>内容简要</span></div>
<div>
<span>{{ formData.engineeringContentBriefly }}</span>
</div>
</div>
<div>
<div><span>向施工单位发出的通知指示指令</span></div>
<div>
<span>{{ formData.instructions }}</span>
</div>
<div><span>内容简要</span></div>
<div>
<span>{{ formData.instructionsContentBriefly }}</span>
</div>
</div>
<div>
<div><span>施工单位提出的各种报告</span></div>
<div>
<span>{{ formData.presentation }}</span>
</div>
<div><span>内容简要</span></div>
<div>
<span>{{ formData.presentationContentBriefly }}</span>
</div>
</div>
<div>
<div><span>工程付款签证</span></div>
<div>
<span>{{ formData.projectPaymentVisa }}</span>
</div>
<div><span>内容简要</span></div>
<div>
<span>{{ formData.projectPaymentContentBriefly }}</span>
</div>
</div>
</div>
</div>
<div class="report-content-step">
<div class="step-title">工程进度</div>
<div class="step-sub-title">本月完成情况</div>
<div class="step-input">
<span>{{ formData.thisMonthCompletion }}</span>
</div>
<div class="step-sub-title">下月计划完成</div>
<div class="step-input">
<span>{{ formData.nextMonthPlan }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">工程质量</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.constructionQuality }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">安全环保文明生产</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.civilizationContent }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">费用支付</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.costContent }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">合同管理</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.contractManagement }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">存在的问题</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.existingProblems }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">监理工作小结</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.workSummary }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">下月工作计划</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.nextMonthWorkPlan }}</span>
</div>
</div>
<div class="report-content-step">
<div class="step-title">本月大事记</div>
<div class="step-input" style="margin-top: 11px">
<span>{{ formData.thisMonthEventsRecord }}</span>
</div>
</div>
<div class="report-content-img">
<div class="step-title">工程照片</div>
<div class="img-list">
<img :src="item" alt="" srcset="" v-for="(item, index) in fileList" :key="index" />
</div>
</div>
</div>
<template #footer>
<div>
<el-button type="primary" @click="visible1 = false">关闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { monthlyReportDetails, engineerMainDetails } from "@/api/modules/enterpriseApi";
const fileList = ref([]);
const props = defineProps({
detailVisible: Boolean,
searchSn: String,
activeValue: String,
relativeId: String,
searchId: String
});
const emits = defineEmits(["update:detailVisible"]);
const engineerData = ref<any>({});
const formData = ref<any>({
stage: "",
signOpinion: "",
actualCompletion: "",
reasonAnalysis: "",
meetingSummary: "",
meetingContentBriefly: "",
engineeringQualityVisa: "",
engineeringContentBriefly: "",
instructions: "",
instructionsContentBriefly: "",
presentation: "",
presentationContentBriefly: "",
projectPaymentVisa: "",
projectPaymentContentBriefly: "",
thisMonthCompletion: "",
nextMonthPlan: "",
constructionQuality: "",
civilizationContent: "",
costContent: "",
contractManagement: "",
existingProblems: "",
workSummary: "",
nextMonthWorkPlan: "",
thisMonthEventsRecord: ""
});
const visible1 = ref(false);
// 获取详情数据
const getDetails = async () => {
const res = await monthlyReportDetails({ id: props.relativeId });
console.log(res);
if (res && res.result) {
formData.value = { ...res.result };
if (formData.value.imageFiles) {
fileList.value = formData.value.imageFiles.split(",");
console.log(fileList.value);
}
}
const res2 = await engineerMainDetails({ id: props.searchId });
console.log(res);
if (res2 && res2.result) {
engineerData.value = { ...res2.result };
}
};
// 关闭两个对话框
const closeMain = () => {
visible1.value = false;
emits("update:detailVisible", false);
};
watch(
() => props.detailVisible,
n => {
if (n) {
getDetails();
visible1.value = n;
}
}
);
watch(
() => visible1,
n => {
emits("update:detailVisible", 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;
border-left: 3px solid #0f81ff;
> span {
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #333333;
margin-left: 12px;
margin-right: auto;
font-size: 18px;
}
:deep(.el-icon) {
cursor: pointer;
color: #a8abb2;
}
}
.report-content {
.title {
font-size: 23px;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
text-align: center;
}
.sub-title {
@include flex;
justify-content: center;
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.sub-title:nth-child(3) {
margin-top: 9px;
}
.sub-title:nth-child(4) {
margin-top: 18px;
}
.title:nth-child(5) {
margin-top: 25px;
}
.engineer-name {
font-size: 16px;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
margin-top: 11px;
}
&-part1 {
padding: 16px 9px;
border: 1px solid #dedede;
margin-top: 11px;
div {
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
div:last-child {
text-align: right;
}
div:not(:last-child) {
margin-bottom: 20px;
}
div:nth-child(6) {
margin-bottom: 0px;
}
}
&-part2 {
padding: 16px 9px;
border: 1px solid #dedede;
border-top: 0;
div:nth-child(1) {
font-size: 16px;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
margin-bottom: 14px;
}
div:nth-child(3) {
@include flex;
justify-content: flex-end;
span {
white-space: nowrap;
}
span:first-child {
margin-right: 120px;
}
span:nth-child(2) {
margin-right: 60px;
}
span:last-child {
margin-right: 107px;
}
}
}
&-part3 {
border: 1px solid #dedede;
border-top: 0;
> div {
@include flex;
height: 50px;
> div {
height: 50px;
line-height: 50px;
}
> div:nth-child(2n-1) {
width: 15%;
text-align: center;
}
> div:nth-child(2n) {
width: 35%;
text-indent: 1em;
}
}
> div:nth-child(1) {
> div:not(:last-child) {
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
> div:nth-child(4) {
border-bottom: 1px solid #dedede;
}
}
> div:nth-child(2) {
> div:not(:last-child) {
border-right: 1px solid #dedede;
}
}
}
&-part4 {
2023-09-13 11:47:55 +08:00
display: flex;
2023-09-06 14:35:32 +08:00
border: 1px solid #dedede;
border-top: 0;
2023-09-13 11:47:55 +08:00
// height: 200px;
2023-09-06 14:35:32 +08:00
> div:nth-child(1) {
@include flex;
justify-content: center;
width: 3%;
2023-09-13 11:47:55 +08:00
// height: 200px;
2023-09-06 14:35:32 +08:00
border-right: 1px solid #dedede;
> span {
display: inline-block;
writing-mode: vertical-lr;
letter-spacing: 4px;
}
}
> div:nth-child(2) {
width: 97%;
2023-09-13 11:47:55 +08:00
display: flex;
flex-direction: column;
2023-09-06 14:35:32 +08:00
> div {
2023-09-13 11:47:55 +08:00
display: flex;
flex: 1;
// height: 100px;
// @include flex;
2023-09-06 14:35:32 +08:00
> div:nth-child(1) {
@include flex;
justify-content: center;
width: calc(12% + 3px);
2023-09-13 11:47:55 +08:00
// height: 100%;
2023-09-06 14:35:32 +08:00
border-right: 1px solid #dedede;
}
> div:nth-child(2) {
2023-09-13 11:47:55 +08:00
display: flex;
align-items: center;
2023-09-06 14:35:32 +08:00
justify-content: center;
flex: 1;
2023-09-13 11:47:55 +08:00
// height: 100%;
// border-bottom: 1px solid #dedede;
span {
word-break: break-all;
}
}
}
> div:not(:last-child) {
> div:nth-child(1) {
border-bottom: 1px solid #dedede;
}
> div:nth-child(2) {
2023-09-06 14:35:32 +08:00
border-bottom: 1px solid #dedede;
}
}
}
}
&-part5 {
2023-09-13 11:47:55 +08:00
display: flex;
2023-09-06 14:35:32 +08:00
border: 1px solid #dedede;
border-top: 0;
2023-09-13 11:47:55 +08:00
// height: 500px;
2023-09-06 14:35:32 +08:00
> div:nth-child(1) {
@include flex;
justify-content: center;
width: 3%;
2023-09-13 11:47:55 +08:00
// height: 100%;
2023-09-06 14:35:32 +08:00
border-right: 1px solid #dedede;
> span {
display: inline-block;
writing-mode: vertical-lr;
letter-spacing: 4px;
}
}
> div:nth-child(2) {
width: 97%;
2023-09-13 11:47:55 +08:00
// height: 100%;
2023-09-06 14:35:32 +08:00
> div {
2023-09-13 11:47:55 +08:00
display: flex;
2023-09-06 14:35:32 +08:00
> div:nth-child(2n-1) {
@include flex;
justify-content: center;
width: calc(12% + 3px);
2023-09-13 11:47:55 +08:00
// height: 100%;
2023-09-06 14:35:32 +08:00
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
> span {
display: inline-block;
width: 92%;
text-align: center;
}
}
> div:nth-child(2n) {
@include flex;
justify-content: center;
flex: 1;
2023-09-13 11:47:55 +08:00
// height: 100%;
2023-09-06 14:35:32 +08:00
border-bottom: 1px solid #dedede;
2023-09-13 11:47:55 +08:00
span {
word-break: break-all;
}
2023-09-06 14:35:32 +08:00
}
> div:nth-child(3) {
border-left: 1px solid #dedede;
}
}
2023-09-13 11:47:55 +08:00
> div:last-child {
display: flex;
> div:nth-child(2n-1) {
border-bottom: 0;
}
> div:nth-child(2n) {
border-bottom: 0;
}
}
2023-09-06 14:35:32 +08:00
}
}
&-step {
border: 1px solid #dedede;
border-top: 0;
padding: 14px 23px;
.step-title {
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.step-sub-title {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-top: 17px;
margin-bottom: 9px;
}
}
&-img {
border: 1px solid #dedede;
border-top: 0;
padding: 14px 23px;
.step-title {
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 12px;
}
.img-list {
@include flex;
img {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin-right: 15px;
}
}
.face-img {
:deep(.face-uploader .el-upload) {
border: 2px dashed #d9d9d9 !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
}
.face-uploader .el-upload:hover {
border-color: #409eff !important;
}
:deep(.el-icon) {
font-size: 42px;
color: #8c939d;
width: 96px;
height: 96px;
line-height: 53px;
text-align: center;
}
}
}
}
}
</style>