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

@@ -0,0 +1,593 @@
<template>
  <div class="access">
    <div class="access_header">
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <div>
        <span class="title">结束时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <!-- <div>
        <span class="title">进出类型 : </span>
        <t-select v-model="searchdata.typeid" style="width:200px;height:32px">
          <t-option v-for="item in accesstype" :value="item.id" :key="item.id">{{ item.name }}</t-option>
        </t-select>
      </div> -->
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.nameAsLike" placeholder="员工姓名" style="width: 200px"></t-input>
      </div>
    </div>
    <div class="access_header">
      <!-- 导出excel -->
      <div>
        <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
      </div>
      <div>
        <t-button color="primary" @click="btnsearch">查询</t-button>
        <t-button @click="reset">重置</t-button>
      </div>
    </div>
    <t-table :data="data" line @selection-change="handleSelectionChange">
      <t-table-column type="selection" width="34px"></t-table-column>
      <t-table-column label="姓名" prop="employeeName" width="60px">
      </t-table-column>
      <t-table-column label="员工编号" prop="employeeCode" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="companyname" width="94px">
      </t-table-column>
      <t-table-column label="部门" prop="organizationName" width="94px">
      </t-table-column>
      <t-table-column label="职务" prop="employeePositionZh" width="80px">
      </t-table-column>
      <t-table-column prop="simi" label="相似度" width="75px">
      </t-table-column>
      <t-table-column label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
      <t-table-column label="位置" prop="terminalPosition" width="122px">
      </t-table-column>
      <t-table-column label="终端名称" prop="resourceToolName" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="resourceToolCode" width="90px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <a href="javascript:void(0)" size="sm" style="color:#0089D4" @click="handleClick(scope)">识别详情</a>
        </template>
      </t-table-column>
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" :page-size="limit" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框 -->
    <t-modal :visibled.sync="detail_modal" title="识别详情" width="840px" height="538px">
      <div style="text-align:center">
        <div class="detail_content">
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <!-- <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%"> -->
              <!--处理图片里的方框-->
              <img :src="mainimage" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
            <div>识别结果</div>
            <div>
              <div>
                <!-- 修改-->
                <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="@/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;">
                <div class="bottomimg">人脸底库</div>
              </div>
            </div>
            <div class="describe">
              <div>
                <t-icon icon="user-outline"></t-icon>
                {{ rowdata.alarmInfo.employeeName }}（{{ rowdata.alarmInfo.employeeCode }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon>
                {{ rowdata.alarmInfo.terminalPosition || '--' }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon>
                {{ rowdata.alarmInfo.taskExecuteTime }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：
                {{ rowdata.alarmInfo.simi }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <t-button type="danger" long @click="detail_modal = false">关闭</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
import accessapi from '@/api/access'
export default {
  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 0px;
  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>

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

@@ -0,0 +1,593 @@
<template>
  <div class="access">
    <div class="access_header">
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <div>
        <span class="title">结束时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <!-- <div>
        <span class="title">进出类型 : </span>
        <t-select v-model="searchdata.typeid" style="width:200px;height:32px">
          <t-option v-for="item in accesstype" :value="item.id" :key="item.id">{{ item.name }}</t-option>
        </t-select>
      </div> -->
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.nameAsLike" placeholder="员工姓名" style="width: 200px"></t-input>
      </div>
    </div>
    <div class="access_header">
      <!-- 导出excel -->
      <div>
        <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
      </div>
      <div>
        <t-button color="primary" @click="btnsearch">查询</t-button>
        <t-button @click="reset">重置</t-button>
      </div>
    </div>
    <t-table :data="data" line @selection-change="handleSelectionChange">
      <t-table-column type="selection" width="34px"></t-table-column>
      <t-table-column label="姓名" prop="employeeName" width="60px">
      </t-table-column>
      <t-table-column label="员工编号" prop="employeeCode" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="companyname" width="94px">
      </t-table-column>
      <t-table-column label="部门" prop="organizationName" width="94px">
      </t-table-column>
      <t-table-column label="职务" prop="employeePositionZh" width="80px">
      </t-table-column>
      <t-table-column prop="simi" label="相似度" width="75px">
      </t-table-column>
      <t-table-column label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
      <t-table-column label="位置" prop="terminalPosition" width="122px">
      </t-table-column>
      <t-table-column label="终端名称" prop="resourceToolName" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="resourceToolCode" width="90px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <a href="javascript:void(0)" size="sm" style="color:#0089D4" @click="handleClick(scope)">识别详情</a>
        </template>
      </t-table-column>
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" :page-size="limit" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框 -->
    <t-modal :visibled.sync="detail_modal" title="识别详情" width="840px" height="538px">
      <div style="text-align:center">
        <div class="detail_content">
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <!-- <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%"> -->
              <!--处理图片里的方框-->
              <img :src="mainimage" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
            <div>识别结果</div>
            <div>
              <div>
                <!-- 修改-->
                <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="@/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;">
                <div class="bottomimg">人脸底库</div>
              </div>
            </div>
            <div class="describe">
              <div>
                <t-icon icon="user-outline"></t-icon>
                {{ rowdata.alarmInfo.employeeName }}（{{ rowdata.alarmInfo.employeeCode }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon>
                {{ rowdata.alarmInfo.terminalPosition || '--' }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon>
                {{ rowdata.alarmInfo.taskExecuteTime }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：
                {{ rowdata.alarmInfo.simi }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <t-button type="danger" long @click="detail_modal = false">关闭</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
import accessapi from '@/api/access'
export default {
  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 0px;
  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>

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

@@ -1,594 +1,26 @@
s<template>
  <div class="access">
    <div class="access_header">
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <div>
        <span class="title">结束时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <!-- <div>
        <span class="title">进出类型 : </span>
        <t-select v-model="searchdata.typeid" style="width:200px;height:32px">
          <t-option v-for="item in accesstype" :value="item.id" :key="item.id">{{ item.name }}</t-option>
        </t-select>
      </div> -->
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.nameAsLike" placeholder="员工姓名" style="width: 200px"></t-input>
      </div>
    </div>
    <div class="access_header">
      <!-- 导出excel -->
      <div>
        <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
      </div>
      <div>
        <t-button color="primary" @click="btnsearch">查询</t-button>
        <t-button @click="reset">重置</t-button>
      </div>
    </div>
    <t-table :data="data" line @selection-change="handleSelectionChange">
      <t-table-column type="selection" width="34px"></t-table-column>
      <t-table-column label="姓名" prop="employeeName" width="60px">
      </t-table-column>
      <t-table-column label="员工编号" prop="employeeCode" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="companyname" width="94px">
      </t-table-column>
      <t-table-column label="部门" prop="organizationName" width="94px">
      </t-table-column>
      <t-table-column label="职务" prop="employeePositionZh" width="80px">
      </t-table-column>
      <t-table-column prop="simi" label="相似度" width="75px">
      </t-table-column>
      <t-table-column label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
      <t-table-column label="位置" prop="terminalPosition" width="122px">
      </t-table-column>
      <t-table-column label="终端名称" prop="resourceToolName" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="resourceToolCode" width="90px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <a href="javascript:void(0)" size="sm" style="color:#0089D4" @click="handleClick(scope)">识别详情</a>
        </template>
      </t-table-column>
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" :page-size="limit" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框 -->
    <t-modal :visibled.sync="detail_modal" title="识别详情" width="840px" height="538px">
      <div style="text-align:center">
        <div class="detail_content">
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <!-- <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%"> -->
              <!--处理图片里的方框-->
              <img :src="mainimage" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
            <div>识别结果</div>
            <div>
              <div>
                <!-- 修改-->
                <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="@/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;">
                <div class="bottomimg">人脸底库</div>
              </div>
            </div>
            <div class="describe">
              <div>
                <t-icon icon="user-outline"></t-icon>
                {{ rowdata.alarmInfo.employeeName }}（{{ rowdata.alarmInfo.employeeCode }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon>
                {{ rowdata.alarmInfo.terminalPosition || '--' }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon>
                {{ rowdata.alarmInfo.taskExecuteTime }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：
                {{ rowdata.alarmInfo.simi }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <t-button type="danger" long @click="detail_modal = false">关闭</t-button>
      </div>
    </t-modal>
  </div>
<template>
  <t-tabs :animated="false" style="padding:20px">
    <t-tab-panel label="导航页1" panel-id="tab-1">
      <tab-change1></tab-change1>
    </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>

security-protection-platform/src/modules/attendance/components/DeptStaffCascader/index.vue

@@ -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('部门类型列表数据获取失败！')
      }

security-protection-platform/src/modules/system/monitor/HomePageSettings/ShiftCameraDialog.vue

@@ -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)

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

@@ -115,7 +115,6 @@ export default {
      companyName: '',
      // 判断页面是否是第一次渲染
      firstCreated: true
    }
  },
  watch: {