adm/src/views/model/report/supplement.vue

<template>
  <!-- 待补充页面 -->
  <div class="box" ref="boxBody">
    <div class="content-box" v-for="(item,index) in pageData" :key="index">
      <div class="content-top">
        <div class="details">
          <h4>{{ index |numTransformation(4) }}
            <el-badge value="待补充" class="item" type="success"></el-badge>
          </h4>
          <h4>
            {{ `${item.BuildingName}建筑模型` }}-{{
              `${item.FloorName}层`
            }}-{{ `${item.EquipLocalName ? item.EquipLocalName : item.EquipName}` }}</h4>
          <b>标记码:<span @dblclick="copyContent" id="copy">{{ item.EquipID }}</span></b><span class="copy"
                                                                                            @click="clickCopy">点击复制</span>
          <input id="copyContent" type="text" @dblclick="copyContent"
                 style="border:none;opacity:0;position:absolute;top:0;left:0;">
          <p style="margin-top:30px;">建议使用的Revit族:{{ item.Res }}</p>
          <p>设计图纸中编码:{{ item.CADID }}</p>
          <p><span>资产族:{{ item.FamilyName.Name }}</span></p>
          <p><span style="width:500px;">资产ID:{{ item.EquipID }}</span></p>
          <p>现场发现人:{{ item.FindPeople }}</p>
        </div>
        <div class="plan">
          <p>平面图上的位置：<span>{{ item.local | localTransformation }}</span></p>
          <div class="img-box">
            <canvas :id="'canvas'+index" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"
                    :data-modelid="item.ModelId"
                    :data-EquipID='item.EquipID' :data-x="item.local.X" :data-y="item.local.Y"></canvas>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="photo" v-for="(it,ind) in item.LedgerParam.PhotoDoc.Nameplate" :key="ind">
          <p>{{ it.name }}<span>拍摄时间：{{ it.createTime | timeTransformation }}</span></p>
          <div class="img-box">
            <div class="img-content">
              <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.key}`" alt="铭牌图片">
            </div>
          </div>
        </div>
        <div class="photo" v-for="(photo,num) in item.LedgerParam.PhotoDoc.Pic" :key="num+photo">
          <div class="img-box" v-if="item.LedgerParam.PhotoDoc.Pic">
            <p v-if="item.LedgerParam.PhotoDoc.Pic && photo.type !== 'video'">
              {{ photo.name }}<span>拍摄时间：{{ photo.createTime | timeTransformation }}</span>
            </p>
            <div class="img-content" v-if="photo.type !=='video'">
              <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${photo.key}`" alt="现场图片">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { toBeSupplementEquip } from "@/api/scan/request.js";
import { LocationPointScene, FloorView } from "@saga-web/cad-engine/lib";

export default {
  components: {},
  data() {
    return {
      pageData: [],
      equipComDelList: null,
      canvasWidth: 400,
      canvasHeight: 280,
      scene: '',
      view: '',
      i: 0,
      page: {
        pageSize: 20,
        pageNumber: 1,
        total: 0
      }
    }
  },
  filters: {
    numTransformation(num, length) {// 序列号转换为4位
      num = Number(num + 1)
      return (Array(length).join('0') + num).slice(-length);
    },
    localTransformation(local) {// 坐标转换
      let str = "";
      for (let key in local) {
        if (key !== "Z") {
          str += key + '：' + local[key] + '，';
        } else {
          str += key + '：' + local[key];
        }
      }
      return str;
    },
    timeTransformation(time) {// 时间转换
      return time ? time.substring(0, 16) : ''
    }
  },
  mounted() {
    this.getToBeSuppement();
    this.boxBody = this.$refs.boxBody;
    this.boxBody.addEventListener('scroll', () => {
      let clientHeight = this.boxBody.clientHeight;
      let scrollTop = this.boxBody.scrollTop;
      let scrollHeight = this.boxBody.scrollHeight;
      if (clientHeight + scrollTop === scrollHeight) {
        console.log(this.page.pageNumber * this.page.pageSize)
        if (this.page.pageNumber * this.page.pageSize < this.page.total) {
          this.page.pageNumber++;
          if (this.pageData.length < 20) {
            this.page.pageNumber = 1
          }
          this.queryToBelDelEquip();
        }
      }
    })
  },
  created() {
    this.equipComDelList = decodeURIComponent(this.$route.query.equipComDelList);
  },
  computed: {
    ...mapGetters('layout', ['projectId'])
  },
  methods: {
    copyContent(element) {
      // 双击复制
      let content = element.target.innerText;
      let inputObj = document.getElementById('copyContent');
      inputObj.value = content;
      inputObj.select();
      document.execCommand("Copy");
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1000
      });
    },
    clickCopy() {
      // 点击复制
      let target = document.getElementById('copy');
      let content = target.innerText;
      let inputObj = document.getElementById('copyContent');
      inputObj.value = content;
      inputObj.select();
      document.execCommand("Copy");
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1000
      });
    },
    getToBeSuppement() {
      let params = {
        ProjectId: this.projectId,
        Cascade: [
          {
            "Name": "equipFamily"
          },
          {
            "Name": "familyName"
          }
        ],
        Filters: `ModelId in ${this.equipComDelList}`,
        PageNumber: this.page.pageNumber,
        PageSize: this.page.pageSize
      }
      toBeSupplementEquip(params, res => {
        this.page.total = res.PageSize < 20 ? res.PageSize : res.Total;
        if (this.page.pageNumber == 1) {
          this.pageData = res.Content;
          this.$nextTick(() => {
            this.getGraphy();
          })
        } else {
          this.pageData = this.pageData.concat(res.Content);
          this.$nextTick(() => {
            this.getGraphy();
          })
        }
        // this.pageData = res.Content;
        this.pageData.forEach(item => {
          if (item.BIMLocation) {
            let local = {};
            let ary = item.BIMLocation.split(',');
            let localAry = ['X', 'Y', 'Z'];
            ary.forEach((item, index) => {
              local[localAry[index]] = ary[index];
            })
            item.local = local;
          }
          if (item.ScanTaskBase && item.ScanTaskBase.length > 1) {
            item.ScanTaskBase = item.ScanTaskBase.shift();
          }
          if (item.EquipFamily && item.EquipFamily.length) {
            item.Res = '';
            item.EquipFamily.forEach((it, index) => {
              if (index !== item.EquipFamily.length - 1) {
                item.Res += `${it.EquipCode + it.EquipName + ","}`;
              } else {
                item.Res += `${it.EquipCode + it.EquipName}`;
              }
            })
          }
        });
      })
    },
    getGraphy() {// 绘制空间位置图片
      let can = this.$refs.canvas;
      let that = this;
      that.clearGraphy(this.i)
      that.scene = new LocationPointScene();
      this.canvasLoading = true;
      that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: can[this.i].dataset.modelid }).then(res => {
        that.canvasLoading = false;
        if (res == 'error') {
          this.FloorMap = '';
          this.$message.warning('数据解析异常');
          return;
        }
        let modelID = can[this.i].dataset.modelid
        let EquipID = can[this.i].dataset.equipid;
        let X = Number(can[this.i].dataset.x);
        let Y = can[this.i].dataset.y * -1;
        that.view.scene = that.scene;
        this.scene.addMarker({
          Id: EquipID,
          X: X,
          Y: Y
        })
        that.view.fitSceneToView();
        this.scene.isSpaceSelectable = false;
        this.i++;
        if (this.i !== this.pageData.length) {
          this.$nextTick(() => {
            this.getGraphy();
          })
        }
      })
    },
    clearGraphy(i) {
      this.view = new FloorView(`canvas${i}`)
    }
  },
  watch: {}
}
</script>


<style lang="less" scoped>
// 取消打印功能默认的左右边距
@media print {
  @page {
    margin-left: 0;
    margin-right: 0;
  }
}

.box {
  background: #f2f2f2;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;

  ul {
    .infinite-list-item {
      margin-bottom: 20px;
    }
  }

  .content-box {
    width: 1000px;
    margin: 0 auto;
    background: white;
    padding: 10px 4px 10px 20px;
    box-sizing: border-box;

    .content-top {
      display: flex;

      div {
        flex: 1;
      }

      .details {
        margin-right: 10px;

        .el-badge {
          margin: 10px 0 0 10px;
        }

        p {
          margin-top: 4px;

          span:nth-child(1) {
            display: inline-block;
            width: 200px;
          }
        }

        .copy {
          color: #409eff;
          margin-left: 20px;
        }
      }

      .plan {
        padding-left: 20px;
        box-sizing: border-box;

        p {
          width: 100%;
          margin: 10px 0 10px 0;

          span {
            float: right;
            padding-right: 20px;
            box-sizing: border-box;
          }
        }
      }
    }

    .content-bottom {
      width: 100%;
      margin-top: 20px;
      overflow: hidden;

      .photo,
      .explain {
        float: left;
        width: 50%;
      }

      .photo {
        box-sizing: border-box;
        margin-bottom: 24px;

        p {
          margin-bottom: 10px;
        }

        span {
          float: right;
          padding-right: 20px;
          box-sizing: border-box;
        }
      }

      .explain {
        padding-right: 20px;
        box-sizing: border-box;

        .el-scrollbar {
          background: #f2f2f2;
        }

        p {
          margin-bottom: 10px;
        }

        .explain-content {
          padding: 10px;
          width: 100%;
          height: 290px;
          box-sizing: border-box;
        }
      }
    }
  }
}

.img-box {
  width: 100%;

  .img-content {
    overflow: hidden;
    position: relative;
    width: calc(100% - 20px);
    height: 300px;
    vertical-align: middle;
    text-align: center;
    background: #ebeef5;
    margin-right: 20px;

    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      vertical-align: middle;
    }
  }
}

canvas {
  position: static !important;
}
</style>