shuili-vue/src/views/dike/runManage/supervisionInspetion/projectManage/projectReportPage.vue

<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.showStartTime }} - {{ formData.showDoneTime }}
              </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.dikeName || "-" }}
              </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"
                  :key="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 dayjs from "dayjs";
import { cloneDeep } from "lodash";
import {
  getEnableSuperviseWayData,
  getSuperviseEngineeringReportDetailsData,
} from "@/api/dike";

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 newProblemList = [];
        let list = [];
        enableData.data?.itemList?.forEach((item, index) => {
          if (index === 0) {
            list.push({
              id: item.id,
              projectId: item.projectId,
              projectName: item.projectName,
              children: [
                {
                  ...item,
                  projectItemId: item.id,
                  problemDescribe: "",
                  siteSituationRecords: "",
                  siteSituationRecordsArr: [],
                  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,

                children: [
                  {
                    ...item,
                    projectItemId: item.id,
                    problemDescribe: "",
                    siteSituationRecords: "",
                    siteSituationRecordsArr: [],
                    level: null,
                  },
                ],
              });
            } else {
              exitItem.children.push({
                ...item,
                projectItemId: item.id,
                problemDescribe: "",
                siteSituationRecords: "",
                siteSituationRecordsArr: [],
                level: null,
              });
            }
          }
        });
        const detailRes = await getSuperviseEngineeringReportDetailsData(
          this.$route.query.id
        );
        if (detailRes?.data && list.length) {
          const { data } = detailRes;
          this.formData = { ...data };
          if (this.formData.startTime) {
            this.formData.showStartTime = dayjs(this.formData.startTime).format(
              "YYYY年MM月DD日"
            );
          }
          if (this.formData.doneTime) {
            this.formData.showDoneTime = dayjs(this.formData.doneTime).format(
              "YYYY年MM月DD日"
            );
          }
          this.formData.problemList = [];
          this.formData.pictures = [];
          // 产品说描述拼接一起
          this.formData.describeTotal = "";
          const { problemList } = data;
          list.forEach((item) => {
            let exitItem = problemList.find(
              (v) => v.projectId === item.projectId
            );
            if (exitItem) {
              let itemTemp = cloneDeep(item);
              itemTemp.children = [];
              item.children.forEach((item2) => {
                let exitItem2 = problemList.find(
                  (v) => v.projectItemId === item2.id
                );
                if (exitItem2) {
                  if (exitItem2.problemDescribe) {
                    this.formData.describeTotal +=
                      exitItem2.problemDescribe + "，";
                  }
                  if (exitItem2.siteSituationRecords) {
                    this.formData.pictures.push(
                      ...exitItem2.siteSituationRecords.split(",")
                    );
                  }
                  itemTemp.children.push(exitItem2);
                }
              });
              newProblemList.push(itemTemp);
            }
          });

          this.problemList = newProblemList;
        }
      }
    },
    // 下载报告
    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("检查报告.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;
    z-index: 2;
  }
}
.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>