[FE]进出详情里截图完成

security-protection-platform/src/modules/access/index.vue

@@ -90,12 +90,18 @@
            <div>
              <div>
                <!-- 修改-->
                <img src="" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">
                <!-- <img src="" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; "> -->
                <div class="scaleimg">
                  <div :style="{backgroundImage:style.bgimg,backgroundPosition:style.bgposition,
                                transform:style.scale,
                                width:style.width,
                                height:style.height}" class="imgcontant"></div>
                </div>
                <div class="bottomimg">抓拍图片</div>
              </div>
              <div>
                <!-- 修改-->
                <img src="http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg" alt="" srcset="">
                <img src="@/assets/images/Identify_the_successful.png" alt="" srcset="">
              </div>
              <div>
                <img :src="rowdata.alarmInfo.headerImage" alt="" srcset="" style="width:100%;height:160px; border-radius: 5px;">
@@ -167,7 +173,15 @@ export default {
      ],
      // 当前页
      page: 1,
      limit: 10
      limit: 10,
      style: {
        bgimg: '',
        bgposition: '',
        scale: '',
        width: '',
        height: ''
      }
    }
  },
@@ -175,7 +189,6 @@ export default {
  mounted () {
    // this.gettype()
    this.getcompanyTypesList()
    // this.search()
  },
  methods: {
    // 表格中的选择数据
@@ -201,12 +214,29 @@ export default {
      var res = await accessapi.getOneInAndOutRecord({ params: { aiIdenLogId: scope.row.aiIdenLogId } })
      if (res.data.success) {
        this.detail_modal = true
        // this.rowdata = res.data.data
        this.rowdata.pictureInfo = res.data.data.pictureInfo
        this.rowdata.alarmInfo = res.data.data.alarmInfo
        this.style.width = res.data.data.alarmInfo.face_box[2] - res.data.data.alarmInfo.face_box[0] + 'px'
        // console.log('width是', this.style.width)
        this.style.height = res.data.data.alarmInfo.face_box[3] - res.data.data.alarmInfo.face_box[1] + 'px'
        // console.log('height是', this.style.height)
        this.style.bgimg = 'url(' + res.data.data.pictureInfo.fileUrl + ')'
        // console.log('bgimg是', this.style.bgimg)
        this.style.bgposition = '' + -res.data.data.alarmInfo.face_box[0] + 'px ' + -res.data.data.alarmInfo.face_box[1] + 'px'
        // console.log('bgposition是', this.style.bgposition)
        // transform: scale(0.33, 0.33);
        var width = res.data.data.alarmInfo.face_box[2] - res.data.data.alarmInfo.face_box[0]
        var height = res.data.data.alarmInfo.face_box[3] - res.data.data.alarmInfo.face_box[1]
        var scalex = 120 / width
        var scaley = 160 / height
        // console.log(scalex)
        this.style.scale = 'scale(' + scalex + ',' + scaley + ')'
        // console.log('scale是', this.style.scale)
        // console.log(res.data.data)
        // console.log('详情数据是', this.rowdata)
        this.detail_modal = true
      } else {
        this.$Message.danger('获取数据失败')
      }
@@ -398,6 +428,21 @@ export default {
      > div:nth-child(1) {
        width: 120px;
        height: 100%;
        .scaleimg {
          width: 120px;
          height: 160px;
          position: relative;
          .imgcontant {
            border-radius: 10px;
            background-repeat: no-repeat;
            background-attachment: local;
            position: absolute;
            top: -160px;
            left: -120px;
          }
        }
      }
      > div:nth-child(2) {
        width: 117.76px;