[FE]进出详情修改

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

@@ -83,6 +83,7 @@
            <div>抓拍图片</div>
            <div>
              <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
@@ -90,13 +91,14 @@
            <div>
              <div>
                <!-- 修改-->
                <!-- <img src="" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; "> -->
                <div class="scaleimg">
                <img :src="newimage" 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> -->
                <div class="bottomimg">抓拍图片</div>
              </div>
              <div>
@@ -174,14 +176,16 @@ export default {
      // 当前页
      page: 1,
      limit: 10,
      style: {
        bgimg: '',
        bgposition: '',
        scale: '',
        width: '',
        height: ''
      // style: {
      //   bgimg: '',
      //   bgposition: '',
      //   scale: '',
      //   width: '',
      //   height: ''
      }
      // }
      // 截取后的图片
      newimage: ''
    }
  },
@@ -216,25 +220,39 @@ export default {
      if (res.data.success) {
        // this.rowdata = res.data.data
        this.rowdata.pictureInfo = res.data.data.pictureInfo
        console.log('数据', this.rowdata.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('数据', this.rowdata.alarmInfo)
        // this.rowdata.alarmInfo.newImg = this.rowdata.pictureInfo.fileUrl
        this.getImage()
        // var loadTimer
        // var imgObject = new Image()
        // imgObject.setAttribute('crossOrigin', 'anonymous')
        // imgObject.src = this.rowdata.pictureInfo.fileUrl
        // console.log(this)
        // imgObject.onload = this.onImgLoaded(loadTimer, imgObject, this.rowdata.alarmInfo)
        // console.log(this.rowdata.alarmInfo.newImg)
        // 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)
        // // 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.alarmInfo)
        this.detail_modal = true
      } else {
@@ -341,7 +359,41 @@ export default {
      } else {
        return true
      }
    },
    async getImage () {
      var loadTimer
      var imgObject = new Image()
      imgObject.setAttribute('crossOrigin', 'anonymous')
      imgObject.src = this.rowdata.pictureInfo.fileUrl
      var e = this.rowdata.alarmInfo
      var that = this
      imgObject.onload = onImgLoaded()
      // eslint-disable-next-line no-return-assign
      function onImgLoaded () {
        if (loadTimer != null) clearTimeout(loadTimer)
        if (!imgObject.complete) {
          loadTimer = setTimeout(() => {
            onImgLoaded()
          }, 3)
        } else {
          that.newimage = getImagePortion(imgObject, e.face_box[2] - e.face_box[0], e.face_box[3] - e.face_box[1], e.face_box[0], e.face_box[1])
        }
      }
      function getImagePortion (imgObj, newWidth, newHeight, startX, startY) {
        var tnCanvas = document.createElement('canvas')
        var tnCanvasContext = tnCanvas.getContext('2d')
        tnCanvas.width = newWidth; tnCanvas.height = newHeight
        var bufferCanvas = document.createElement('canvas')
        var bufferContext = bufferCanvas.getContext('2d')
        bufferCanvas.width = imgObj.width
        bufferCanvas.height = imgObj.height
        bufferContext.drawImage(imgObj, 0, 0)
        tnCanvasContext.drawImage(bufferCanvas, startX, startY, newWidth, newHeight, 0, 0, newWidth, newHeight)
        // console.log(tnCanvas.toDataURL())
        return tnCanvas.toDataURL()
      }
    }
  }
}
</script>
@@ -400,6 +452,7 @@ export default {
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }
  }