Merge branch 'master' of http://10.1.235.20:3000/asiainfo/ebc.git

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

@@ -83,6 +83,7 @@ s<template>
            <div>抓拍图片</div>
            <div>
              <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
@@ -90,12 +91,19 @@ s<template>
            <div>
              <div>
                <!-- 修改-->
                <img src="" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">
                <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 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 +175,17 @@ export default {
      ],
      // 当前页
      page: 1,
      limit: 10
      limit: 10,
      // style: {
      //   bgimg: '',
      //   bgposition: '',
      //   scale: '',
      //   width: '',
      //   height: ''
      // }
      // 截取后的图片
      newimage: ''
    }
  },
@@ -175,7 +193,6 @@ export default {
  mounted () {
    // this.gettype()
    this.getcompanyTypesList()
    // this.search()
  },
  methods: {
    // 表格中的选择数据
@@ -201,12 +218,43 @@ 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
        console.log('数据', this.rowdata.pictureInfo)
        this.rowdata.alarmInfo = res.data.data.alarmInfo
        // console.log(res.data.data)
        // console.log('详情数据是', this.rowdata)
        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.alarmInfo)
        this.detail_modal = true
      } else {
        this.$Message.danger('获取数据失败')
      }
@@ -311,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>
@@ -370,6 +452,7 @@ export default {
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }
  }
@@ -398,6 +481,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;