[FE]进出记录联调

security-protection-platform/src/api/access/index.js

  getaccesstype () {
    return $http.get('/access/getaccesstype')
  },
  getOneInAndOutRecord (params) {
    return $default.get('/sp/inAndOutRecord/queryOneInAndOutRecord', params)
  },
  // 获取公司
  getcompanyTypesList () {
    return $default.get('sp/employeeManagement/queryCompanyList')
  }
}

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

  <div class="access">
    <div class="access_header">
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.beginTime" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
        <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.endTime" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
        <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <!-- <div>
      </div> -->
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.relateEmployeeNameAsLike" placeholder="员工姓名、编号关键字" style="width: 200px"></t-input>
        <t-input v-model="searchdata.nameAsLike" placeholder="员工姓名" style="width: 200px"></t-input>
      </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="relateEmployeeRoleName" width="60px">
      <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="organizationName" width="94px">
      <t-table-column label="公司" prop="companyname" width="94px">
      </t-table-column>
      <t-table-column label="部门" prop="orgName" width="94px">
      <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 l="相似度" prop="similarity" width="75px">
      <t-table-column prop="simi" l="相似度" width="75px">
      </t-table-column>
      <t-table-column label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
      </t-table-column>
      <t-table-column label="终端名称" prop="resourceToolName" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="resourceToolCode" width="72px">
      <t-table-column label="终端编号" prop="resourceToolCode" width="90px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" show-elevator class="pager" @on-change="onChange"></t-pager>
    <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 class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <img :src="rowdata.idenVideoUrl" alt="" srcset="" style="width:100%;height:100%">
              <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
            <div>识别结果</div>
            <div>
              <div>
                <img :src="rowdata.idenPictureUrl" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">
                <!-- 修改-->
                <img src="" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">
                <div class="bottomimg">抓拍图片</div>
              </div>
              <div>
                <!-- 修改-->
                <img src="http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg" alt="" srcset="">
              </div>
              <div>
                <img :src="rowdata.headerUrl" alt="" srcset="" style="width:100%;height:160px; border-radius: 5px;">
                <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.relateEmployeeRoleName }}（{{ rowdata.code }}）
                <t-icon icon="user-outline"></t-icon>
                {{ rowdata.alarmInfo.employeeName }}（{{ rowdata.alarmInfo.employeeCode }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon> {{ rowdata.terminalPosition }}
                <t-icon icon="map-marker"></t-icon>
                {{ rowdata.alarmInfo.terminalPosition || '--' }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon> {{ rowdata.taskExecuteTime }}
                <t-icon icon="clock-outline"></t-icon>
                {{ rowdata.alarmInfo.taskExecuteTime }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：{{ rowdata.similarity }}
                <t-icon icon="team-outline"></t-icon> 相似度：
                {{ rowdata.alarmInfo.simi }}
              </div>
            </div>
          </div>
<script>
import accessapi from '@/api/access'
import formatDateTime from '@/utils/formatDateTime.js'
export default {
  data () {
    return {
      // 进出类型
      // 模态框显示
      detail_modal: false,
      // 当前行数据
      rowdata: {},
      rowdata: {
        alarmInfo: {},
        pictureInfo: {}
      },
      // 公司列表
      companyTypesList: [],
      // 查询的参数
      searchdata: {
        relateEmployeeNameAsLike: '',
        beginTime: '',
        endTime: ''
        nameAsLike: '',
        beginDay: '',
        endDay: ''
      },
      // 一页的数据
      data: [
  mounted () {
    // this.gettype()
    this.search()
    this.getcompanyTypesList()
    // this.search()
  },
  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
        this.search()
      } else {
        this.$Message.danger('获取数据失败')
      }
    },
    // 点击详情
    handleClick (scope) {
      this.detail_modal = true
      this.rowdata = scope.row
      console.log(this.rowdata)
    async handleClick (scope) {
      // this.rowdata = scope.row
      // console.log(this.rowdata)
      // console.log('id是', scope.row.aiIdenLogId)
      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
        // console.log(res.data.data)
        // console.log('详情数据是', this.rowdata)
      } else {
        this.$Message.danger('获取数据失败')
      }
    },
    // 分页
    onChange (val) {
    // 查询数据
    async search () {
      // 检验数据
      var flag = this.startreend(this.searchdata.beginTime, this.searchdata.endTime)
      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)
        // console.log(params)
        var res = await accessapi.getaccesslist({ params: params })
        // console.log(res)
        if (res.status === 200) {
          console.log(res)
          // console.log(res)
          this.data = res.data.data.data
          this.data = this.data.map((item) => { item.taskExecuteTime = formatDateTime(item.taskExecuteTime); return item })
          console.log(this.data)
          this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          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)
            // console.log('公司名字是', this.companyTypesList.filter((item1) => { return item1.id === 10000 }))
            item.companyinfo = this.companyTypesList.filter((item1) => { return 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) {

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

    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" show-elevator class="pager" @on-change="onChange"></t-pager>
    <t-pager :total="total" :current="page" :page-size="limit" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框-->
    <t-modal :visibled.sync="details_modal" :title="clickdetail==0?'报警详情':'报警处理'" width="732px">
          this.data = res.data.data.data
          this.data = this.data.map((item) => { item.aiIdenTime = formatDateTime(item.aiIdenTime); return item })
          console.log(this.data)
          this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          console.log('数据是', res)
          // this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          this.total = res.data.data.total
        } else {
          this.$Message.danger('数据获取失败')
        }