</t-tab-panel>

    <t-tab-panel label="导航页2" panel-id="tab-2">

      <tab-change2></tab-change2>

    </t-tab-panel>

  </t-tabs>

</template>

<script>

import accessapi from '@/api/access'

import tabChange1 from './component/tab1'

import tabChange2 from './component/tab2'

export default {

  components: {

    tabChange1,

    tabChange2

  },

  data () {

    return {

      // 进出类型

      accesstype: [],

      // 页码

      total: 0,

      // 选择的数据

      selectdata: [],

      // 模态框显示

      detail_modal: false,

      // 当前行数据

      rowdata: {

        alarmInfo: {},

        pictureInfo: {}

      },

      // 公司列表

      companyTypesList: [],

      // 查询的参数

      searchdata: {

        nameAsLike: '',

        beginDay: '',

        endDay: ''

      },

      // 一页的数据

      data: [

      ],

      // 当前页

      page: 1,

      limit: 10,

      // style: {

      //   bgimg: '',

      //   bgposition: '',

      //   scale: '',

      //   width: '',

      //   height: ''

      // }

      // 截取后的图片

      newimage: '',

      // 详情的主图片

      mainimage: ''

    }

  },

  mounted () {

    // this.gettype()

    this.getcompanyTypesList()

  },

  methods: {

    // 表格中的选择数据

    handleSelectionChange (val) {

      this.selectdata = val

    },

    // 获取公司

    async getcompanyTypesList () {

      var res = await accessapi.getcompanyTypesList()

      // console.log('公司信息是', res)

      if (res.status === 200) {

        this.companyTypesList = res.data.data

        console.log(this.companyTypesList)

        this.search()

      } else {

        this.$Message.danger('获取数据失败')

      }

    },

    // 点击详情

    async handleClick (scope) {

      // this.rowdata = scope.row

      // console.log(this.rowdata)

      // console.log('id是', scope.row.aiIdenLogId)

      this.newimage = ''

      this.mainimage = ''

      var res = await accessapi.getOneInAndOutRecord({ params: { aiIdenLogId: scope.row.aiIdenLogId } })

      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

        console.log('数据', this.rowdata.alarmInfo)

        console.log('相似度数据', this.rowdata.alarmInfo.simi, typeof this.rowdata.alarmInfo.simi)

        // this.rowdata.alarmInfo.newImg = this.rowdata.pictureInfo.fileUrl

        this.getImage()

        this.getmainimage()

        // 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('获取数据失败')

      }

    },

    // 分页

    onChange (val) {

      this.page = val

      this.search()

    },

    // 点击查询按钮

    btnsearch () {

      if (this.page === 1) {

        this.search()

      } else {

        this.page = 1

      }

    },

    // 获取进出类型

    // gettype () {

    //   accessapi.getaccesstype().then((res) => {

    //     this.accesstype = res.data.data

    //     console.log(this.accesstype)

    //   })

    // },

    // 查询数据

    async search () {

      // 检验数据

      var flag = this.startreend(this.searchdata.beginDay, this.searchdata.endDay)

      if (flag) {

        // console.log(this.page)

        // console.log(this.searchdata)

        var params = this.searchdata

        params.pageNumber = this.page

        params.pageSize = this.limit

        // console.log(params)

        var res = await accessapi.getaccesslist({ params: params })

        // console.log(res)

        if (res.status === 200) {

          // console.log(res)

          this.data = res.data.data.data

          // console.log(this.data)

          // console.log(this.companyTypesList)

          this.data = this.data.map((item) => {

            // 处理进出时间

            // item.taskExecuteTime = formatDateTime(item.taskExecuteTime)

            // 处理相似度

            // item.simi = this.percentagedata(item.simi)

            // console.log('公司的数据是', this.companyTypesList)

            // console.log('公司id', item.companyId, typeof item.companyId)

            // console.log('公司名字是', this.companyTypesList.filter((item1) => { return item1.id === 10000 }))

            item.companyinfo = this.companyTypesList.filter((item1) => { return String(item1.id) === item.companyId })

            if (item.companyinfo.length > 0) {

              item.companyname = item.companyinfo[0].name

            } else {

              item.companyname = ''

            }

            return item

          })

          // this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5

          // console.log(this.total)

          this.total = res.data.data.total

          // console.log('数据是', this.data)

        }

      } else {

        this.$Message.danger('开始时间不能在结束时间的后面')

      }

    },

    percentagedata (point) {

      if (point === 0) {

        return 0

      }

      var str = Number(point * 100).toFixed(1)

      str += '%'

      return str

    },

    // 重置数据

    reset () {

      for (var index in this.searchdata) {

        this.searchdata[index] = ''

      }

      this.page = 1

      this.$Message.success('数据重置成功')

    },

    // 字符串更改为时间类型

    stringtodate (date) {

      date = date.substring(0, 19)

      date = date.replace(/-/g, '/')

      var timestamp = new Date(date).getTime()

      return timestamp

    },

    // 验证开始时间·和结束时间

    startreend (startdate, enddate) {

      startdate = this.stringtodate(startdate)

      enddate = this.stringtodate(enddate)

      if (startdate > enddate) {

        return false

      } 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()

      }

    },

    // 处理主图片

    async getmainimage () {

      var that = this

      var x = this.rowdata.alarmInfo.face_box[0]

      var y = this.rowdata.alarmInfo.face_box[1]

      var width = this.rowdata.alarmInfo.face_box[2] - this.rowdata.alarmInfo.face_box[0]

      var height = this.rowdata.alarmInfo.face_box[3] - this.rowdata.alarmInfo.face_box[1]

      function getBase64Image (img) {

        var canvas = document.createElement('canvas')

        canvas.width = img.width

        canvas.height = img.height

        var ctx = canvas.getContext('2d')

        ctx.drawImage(img, 0, 0, img.width, img.height)

        ctx.beginPath()

        ctx.moveTo(x, y)

        ctx.lineTo(x + width, y)

        ctx.lineTo(x + width, y + height)

        ctx.lineTo(x, y + height)

        ctx.lineTo(x, y) // 绘制最后一笔使图像闭合

        ctx.lineWidth = 5

        ctx.strokeStyle = 'red'

        ctx.stroke()

        var dataURL = canvas.toDataURL('image/png') // 可选其他值 image/jpeg

        return dataURL

      }

      function main (src, cb) {

        var image = new Image()

        image.src = src + '?v=' + Math.random() // 处理缓存

        image.crossOrigin = '*' // 支持跨域图片

        image.onload = function () {

          var base64 = getBase64Image(image)

          cb && cb(base64)

        }

      }

      main(this.rowdata.pictureInfo.fileUrl, function (base64) {

        // console.log(base64, '是否成功打印base64')

        that.mainimage = base64

      })

    }

    // //将分数转换为小数

    // toPoint (percent) {

    //   var str = percent.replace('%', '')

    //   str = str / 100

    //   return str

    // }

  }

}

</script>

<style lang='scss' scoped>

.access {

  font-size: 14px;

  padding: 6px 24px;

  height: 702px;

  .upload {

    font-size: 14px;

    line-height: 22px;

  }

  .table th,

  .table td {

    font-size: 14px;

    padding: 0 0 0 18px;

  }

  .access_header {

    display: flex;

    justify-content: space-between;

    margin-top: 24px;

    margin-bottom: 24px;

    .title {

      display: inline-block;

      width: 70px;

      height: 20px;

      font-size: 14px;

      text-align: right;

      color: rgba($color: #000000, $alpha: 0.65);

    }

  }

  .pager {

    float: right;

    margin-top: 26px;

  }

}

.detail_content {

  width: 100%;

  height: 376px;

  display: flex;

  justify-content: space-between;

  .detail_item1 {

    width: 45%;

    text-align: left;

    > div:nth-child(1) {

      margin: 0 0 20px 0;

      color: rgba(0, 0, 0, 0.65);

      font-size: 14px;

    }

    > div:nth-child(2) {

      width: 100%;

      height: 240px;

      border-radius: 5px;

      overflow: hidden;

      position: relative;

    }

  }

  .detail_item2 {

    width: 50%;

    text-align: left;

    > div:nth-child(1) {

      margin: 0 0 20px 0;

      color: rgba(0, 0, 0, 0.65);

      font-size: 14px;

    }

    > div:nth-child(2) {

      width: 100%;

      height: 190px;

      display: flex;

      justify-content: space-between;

      .bottomimg {

        margin-top: 12px;

        width: 100%;

        text-align: center;

        font-size: 12px;

        color: rgba(0, 0, 0, 0.65);

      }

      > 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;

        height: 160px;

        line-height: 160px;

        img {

          width: 100%;

          height: 84.32px;

        }

      }

      > div:nth-child(3) {

        height: 100%;

        width: 120px;

      }

    }

    .describe {

      margin-top: 20px;

      width: 100%;

      height: 148px;

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      > div {

        width: 100%;

        height: 22px;

        font-size: 14px;

      }

    }

  }

}

</style>

@ -41,7 +41,8 @@ export default {

      staffTypesList: [],

      companyTypeId: '',

      departmentTypeId: '',

      staffTypeId: ''

      staffTypeId: '',

      firstCreated: true

    }

  },

  computed: {

@ -79,7 +80,6 @@ export default {

  },

  methods: {

    getOrgId() {

      console.log(123);

      this.$emit('getOrgId', this.companyTypeId)

    },

    getDepId() {

@ -93,6 +93,8 @@ export default {

      const res = await commonApi.getCompanyTypesList()

      if (res.status === 200) {

        this.companyTypesList = res.data.data

        this.companyTypeId = 10086

        this.getOrgId()

      } else {

        this.$Message.danger('公司类型列表数据获取失败！')

      }

@ -123,6 +125,13 @@ export default {

        })

        // eslint-disable-next-line no-return-assign

        this.departmentTypesList = data.filter(item => item.data = item.id)

        this.$nextTick(() => {

          if (this.firstCreated === true) {

            this.departmentTypeId = '10087'

            this.getDepId()

            this.firstCreated = false

          }

        })

      } else {

        this.$Message.danger('部门类型列表数据获取失败！')

      }

@ -118,6 +118,7 @@ export default {

      this.form.resourceToolName = item.resourceToolName

      this.form.resourceToolId = item.resourceToolId

      this.form.pictureUrl = item.pictureUrl

      this.form.videoUrl = item.videoUrl

    },

    handleSubmit () {

      this.$emit('submit', this.form)

@ -115,7 +115,6 @@ export default {

      companyName: '',

      // 判断页面是否是第一次渲染

      firstCreated: true

    }

  },

  watch: {

首页 探索 帮助

登录

liuyang50

/

qb-logic-flow

关注 1

点赞 0

派生 0

代码 工单管理 0 合并请求 0 提交历史 15 版本发布 0 Wiki

分支: v1.1

分支列表 标签列表

master

v1.1

v1.1-node

1 次代码提交 (v1.1)

作者	SHA1 备注	提交日期
liuyang	fbf554504e create：创建新工程，重构之前老版本逻辑编排	2 年之前