hxh
1 year ago
9 changed files with 1088 additions and 718 deletions
@ -0,0 +1,352 @@ |
|||
<template> |
|||
<div class="report-page"> |
|||
<div class="sticky-top flex justify-between"> |
|||
<el-button type="primary" @click="handleDownPdf">下载报告</el-button> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
<div class="flex justify-center mt-16"> |
|||
<div class="p-20" ref="pdfRef"> |
|||
<div class="table-box border-l-t font-14"> |
|||
<div class="text-center font-16 border-b-r p-10"> |
|||
{{ formData.name }} |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">巡查时间</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.startTime }}-{{ formData.doneTime }} |
|||
</div> |
|||
</div> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">天气</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.weather || "-" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">检查人员</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.patrolName || "-" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">管理单位</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.engineeringManagementUnit }} |
|||
</div> |
|||
</div> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">水闸名称</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.wagaName || "-" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div |
|||
class="flex-1 border-b-r p-10 w-full flex justify-center items-center" |
|||
> |
|||
检查内容 |
|||
</div> |
|||
<div class="w-300"> |
|||
<div class="label border-b-r p-6 text-center">问题等级</div> |
|||
<div class="flex flex-shrink-0"> |
|||
<div class="flex-1 border-b-r p-6 text-center">无</div> |
|||
<div class="flex-1 border-b-r p-6 text-center">一般</div> |
|||
<div class="flex-1 border-b-r p-6 text-center">较重</div> |
|||
<div class="flex-1 border-b-r p-6 text-center">严重</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="border-l-t w-full"> |
|||
<div v-for="(item, index) in problemList" :key="index" class="flex"> |
|||
<div class="w-p-10 border-b-r"> |
|||
<div class="flex items-center p-10">{{ item.projectName }}</div> |
|||
</div> |
|||
<div class="w-p-90"> |
|||
<div |
|||
v-for="(item2, index2) in item.children" |
|||
:key="index2 + '0'" |
|||
class="w-full flex" |
|||
> |
|||
<div class="flex-1 border-b-r p-10">{{ item2.content }}</div> |
|||
<div class="w-300 flex flex-shrink-0"> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '0'"></i> |
|||
</div> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '1'"></i> |
|||
</div> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '2'"></i> |
|||
</div> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '3'"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="border-l-t w-full"> |
|||
<div class="flex"> |
|||
<div class="w-p-10 border-b-r"> |
|||
<div class="flex items-center p-10">问题描述</div> |
|||
</div> |
|||
<div class="w-p-90 border-b-r p-10"> |
|||
{{ |
|||
formData.describeTotal && formData.describeTotal.slice(0, -1) |
|||
}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="border-l-t w-full"> |
|||
<div class="flex"> |
|||
<div class="w-p-10 border-b-r"> |
|||
<div class="flex items-center p-10">现场记录情况</div> |
|||
</div> |
|||
<div class="w-p-90 border-b-r p-10"> |
|||
<el-image |
|||
v-for="item in formData.pictures" |
|||
:src="item" |
|||
style="width: auto" |
|||
class="mb-10 mr-10" |
|||
:preview-src-list="[item]" |
|||
> |
|||
<template #error> |
|||
<div |
|||
class="w-full flex justify-center items-center" |
|||
style=" |
|||
height: 100px; |
|||
border: 1px solid #f0f0f0; |
|||
font-style: italic; |
|||
color: #ccc; |
|||
padding: 10px; |
|||
" |
|||
> |
|||
图片加载失败 |
|||
</div> |
|||
</template> |
|||
</el-image> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="w-full" style="height: 200px"> |
|||
<!-- 占位 --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import html2canvas from "html2canvas"; |
|||
import { jsPDF } from "jspdf"; |
|||
import { |
|||
getEnableSuperviseWayData, |
|||
getSuperviseEngineeringReportDetailsData, |
|||
} from "@/api/sluice"; |
|||
|
|||
import { Loading } from "element-ui"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
problemList: [], |
|||
formData: {}, |
|||
loadingInstance: null, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.initData(); |
|||
}, |
|||
methods: { |
|||
// 初始化数据 |
|||
async initData() { |
|||
const enableData = await getEnableSuperviseWayData({ |
|||
wayId: this.$route.query.wayId, |
|||
}); |
|||
if (enableData) { |
|||
let list = []; |
|||
enableData.data?.itemList?.forEach((item, index) => { |
|||
if (index === 0) { |
|||
list.push({ |
|||
id: item.id, |
|||
projectId: item.projectId, |
|||
projectName: item.projectName, |
|||
problemDescribe: "", |
|||
siteSituationRecords: "", |
|||
siteSituationRecordsArr: [], |
|||
children: [{ ...item, level: null }], |
|||
}); |
|||
} else { |
|||
let exitItem = list.find((v) => v.projectId === item.projectId); |
|||
if (!exitItem) { |
|||
list.push({ |
|||
id: item.id, |
|||
projectId: item.projectId, |
|||
projectName: item.projectName, |
|||
problemDescribe: "", |
|||
siteSituationRecords: "", |
|||
siteSituationRecordsArr: [], |
|||
children: [{ ...item, level: null }], |
|||
}); |
|||
} else { |
|||
exitItem.children.push({ |
|||
...item, |
|||
level: null, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
this.problemList = list; |
|||
console.log("this.problemList >>>>> ", this.problemList); |
|||
} |
|||
|
|||
const detailRes = await getSuperviseEngineeringReportDetailsData( |
|||
this.$route.query.id |
|||
); |
|||
if (detailRes?.data && this.problemList.length) { |
|||
const { data } = detailRes; |
|||
this.formData = { ...data }; |
|||
this.formData.problemList = []; |
|||
this.formData.pictures = []; |
|||
// 产品说描述拼接一起 |
|||
this.formData.describeTotal = ""; |
|||
const { engineeringList, problemList } = data; |
|||
this.problemList.forEach((item) => { |
|||
let exitItem = engineeringList.find( |
|||
(v) => v.projectId === item.projectId |
|||
); |
|||
if (exitItem) { |
|||
item.newId = item.id === exitItem.id ? null : exitItem.id; |
|||
item.problemDescribe = exitItem.problemDescribe; |
|||
if (item.problemDescribe) { |
|||
this.formData.describeTotal += item.problemDescribe + "，"; |
|||
} |
|||
item.siteSituationRecords = exitItem.siteSituationRecords; |
|||
item.siteSituationRecordsArr = exitItem.siteSituationRecords |
|||
? exitItem.siteSituationRecords.split(",") |
|||
: []; |
|||
if (item.siteSituationRecordsArr.length > 0) { |
|||
this.formData.pictures.push(...item.siteSituationRecordsArr); |
|||
} |
|||
item.children.forEach((item2) => { |
|||
let exitItem2 = problemList.find( |
|||
(v) => v.projectItemId === item2.id |
|||
); |
|||
if (exitItem2) { |
|||
item2.level = exitItem2.level; |
|||
item2.newId = item2.id === exitItem2.id ? null : exitItem2.id; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
// 下载报告 |
|||
handleDownPdf() { |
|||
this.loadingInstance = Loading.service({ |
|||
lock: true, |
|||
text: "正在生成PDF中...", |
|||
spinner: "el-icon-loading", |
|||
background: "rgba(0, 0, 0, 0.7)", |
|||
}); |
|||
// A4纸pdf宽高 |
|||
const PDF_W = 592.28; |
|||
const PDF_H = 841.89; |
|||
html2canvas(this.$refs.pdfRef, { |
|||
useCORS: true, |
|||
scale: 2, |
|||
}) |
|||
.then((canvas) => { |
|||
const width = canvas.width; |
|||
const height = canvas.height; |
|||
const pageHeight = (width / PDF_W) * PDF_H; |
|||
let leftHeight = height; |
|||
let position = 0; |
|||
var pageData = canvas.toDataURL("image/jpeg", 1.0); |
|||
|
|||
const imgWidth = PDF_W; |
|||
const imgHeight = (PDF_W / width) * height; |
|||
|
|||
let pdf = new jsPDF(undefined, "pt", "a4"); |
|||
if (height < pageHeight) { |
|||
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); |
|||
} else { |
|||
while (leftHeight > 0) { |
|||
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); |
|||
leftHeight -= pageHeight; |
|||
position -= PDF_H; |
|||
if (leftHeight > 0) { |
|||
pdf.addPage(); |
|||
} |
|||
} |
|||
} |
|||
let save = pdf.save("demo.pdf"); |
|||
this.loadingInstance.close(); |
|||
}) |
|||
.catch((e) => { |
|||
console.log("e >>>>> ", e); |
|||
this.loadingInstance.close(); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.report-page { |
|||
background-color: #fff; |
|||
height: 100%; |
|||
overflow: auto; |
|||
.table-box { |
|||
width: 1184px; |
|||
} |
|||
.sticky-top { |
|||
position: sticky; |
|||
top: 0; |
|||
background-color: #fff; |
|||
padding: 10px 24px; |
|||
} |
|||
} |
|||
.border-l-t { |
|||
border-left: 1px solid #ccc; |
|||
border-top: 1px solid #ccc; |
|||
} |
|||
.border-b-r { |
|||
border-bottom: 1px solid #ccc; |
|||
border-right: 1px solid #ccc; |
|||
} |
|||
.w-100 { |
|||
width: 100px; |
|||
} |
|||
.w-300 { |
|||
width: 300px; |
|||
} |
|||
.w-p-10 { |
|||
width: 10%; |
|||
} |
|||
.w-p-50 { |
|||
width: 50%; |
|||
} |
|||
.w-p-40 { |
|||
width: 40%; |
|||
} |
|||
.w-p-60 { |
|||
width: 60%; |
|||
} |
|||
.w-p-90 { |
|||
width: 90%; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue