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

<template>
  <!-- 待补充页面 -->
  <div class="box">
    <ul class="infinite-list" style="overflow:auto">
      <li class="infinite-list-item">
        <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>设备类型:{{'XXXXXXX'}}</span><span>设备ID:{{'XXXXXXX'}}</span></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">
                <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.key}`" alt="铭牌图片">
              </div>
            </div>
            <div class="photo" v-for="(photo,num) in item.LedgerParam.PhotoDoc.Pic" :key="num+photo">
              <p v-if="item.LedgerParam.PhotoDoc.Pic">{{photo.name}}<span>拍摄时间：{{photo.createTime | timeTransformation}}</span></p>
              <div class="img-box" v-if="item.LedgerParam.PhotoDoc.Pic">
                <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${photo.key}`" alt="设备图片" v-if="photo.type !=='video'">
                <video :src="'/image-service/common/image_get?systemId=dataPlatform&key='+photo.key" controls
                  :poster="'/image-service/common/image_get?systemId=dataPlatform&key='+ photo.key" v-if="photo.type === 'video'" width="400px"
                  height="300px"></video>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </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: [],
      count: 0,
      equipComDelList: null,
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      canvasWidth: 400,
      canvasHeight: 280,
      scene: '',
      view: '',
      i: 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) {// 时间转换
      time = time.replace(/(\d+)\-(\d+)\-(\d+)\ (\d+)\:(\d+)\:(\d+)/, function () {
        let str = '';
        let ary = ['年', '月', '日', '时', '分'];
        let time = Array.prototype.concat.apply([], arguments);
        time = time.splice(1, 5);
        time.forEach((item, index) => {
          str += item + ary[index];
        })
        return str;
      })
      return time;
    }
  },
  mounted() {
    // this.getGraphy();
    this.getToBeSuppement();
  },
  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.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}`;
              }
            })
          }
        });
        this.$nextTick(() => {
          this.getGraphy();
        })
      })
    },
    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;
        // console.log(X, Y)
        that.view.scene = that.scene;
        this.scene.addMarker({
          Id: EquipID,
          X: X,
          Y: Y
        })
        that.view.fitSceneToView();
        this.scene.isSpaceSelectable = false;
        this.i++;
      })
    },
    clearGraphy(i) {
      // if (this.view && this.view.scene) {
      //   this.view.scene = null;
      //   return
      // }
      this.view = new FloorView(`canvas${i}`)
    }
  },
  watch: {
    i() {
      if (this.i >= this.pageData.length) {
        return;
      }
      this.getGraphy();
    }
  }
}
</script>


<style lang="less" scoped>
// 取消打印功能默认的左右边距
@media print {
  @page {
    margin-left: 0;
    margin-right: 0;
  }
}
.box {
  background: #f2f2f2;
  margin: 0 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%;
  // text-align: center;
  img {
    vertical-align: middle;
    width: 400px;
    height: 300px;
  }
}
</style>