639 lines
16 KiB
Vue
639 lines
16 KiB
Vue
<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>
|
||
<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>
|
||
</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 {
|
||
display: flex;
|
||
border: 1px solid #dedede;
|
||
border-top: 0;
|
||
// height: 200px;
|
||
> div:nth-child(1) {
|
||
@include flex;
|
||
justify-content: center;
|
||
width: 3%;
|
||
// height: 200px;
|
||
border-right: 1px solid #dedede;
|
||
> span {
|
||
display: inline-block;
|
||
writing-mode: vertical-lr;
|
||
letter-spacing: 4px;
|
||
}
|
||
}
|
||
> div:nth-child(2) {
|
||
width: 97%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
> div {
|
||
display: flex;
|
||
flex: 1;
|
||
// height: 100px;
|
||
// @include flex;
|
||
> div:nth-child(1) {
|
||
@include flex;
|
||
justify-content: center;
|
||
width: calc(12% + 3px);
|
||
// height: 100%;
|
||
border-right: 1px solid #dedede;
|
||
}
|
||
> div:nth-child(2) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
// 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) {
|
||
border-bottom: 1px solid #dedede;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&-part5 {
|
||
display: flex;
|
||
border: 1px solid #dedede;
|
||
border-top: 0;
|
||
// height: 500px;
|
||
> div:nth-child(1) {
|
||
@include flex;
|
||
justify-content: center;
|
||
width: 3%;
|
||
// height: 100%;
|
||
border-right: 1px solid #dedede;
|
||
> span {
|
||
display: inline-block;
|
||
writing-mode: vertical-lr;
|
||
letter-spacing: 4px;
|
||
}
|
||
}
|
||
> div:nth-child(2) {
|
||
width: 97%;
|
||
// height: 100%;
|
||
> div {
|
||
display: flex;
|
||
> div:nth-child(2n-1) {
|
||
@include flex;
|
||
justify-content: center;
|
||
width: calc(12% + 3px);
|
||
// height: 100%;
|
||
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;
|
||
// height: 100%;
|
||
border-bottom: 1px solid #dedede;
|
||
span {
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
> div:nth-child(3) {
|
||
border-left: 1px solid #dedede;
|
||
}
|
||
}
|
||
> div:last-child {
|
||
display: flex;
|
||
> div:nth-child(2n-1) {
|
||
border-bottom: 0;
|
||
}
|
||
> div:nth-child(2n) {
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&-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>
|