hyyfClient/src/views/BioSafety/PersonAdmin.vue

<!--
 * @Author: your name
 * @Date: 2021-09-16 11:27:35
 * @LastEditTime: 2021-11-19 14:45:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue
-->
<template>
  <div class="person-admin">
    <!-- 顶部的按钮选择 -->
    <head-btns 
      :btnNames="btnNames" 
      :btnSelected="btnSelected"
      @btnSelected="getBtnSelected">
    </head-btns>

    <!-- 筛选条件 -->
    <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>

    <!-- 表格 -->
    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows" :height="475">
      <template v-slot:right>
        <template v-if="btnSelected === 1">
          <div>
            <el-button size="mini">添加人员</el-button>
            <el-button size="mini">添加区域</el-button>
          </div>
        </template>
        <template v-else-if="btnSelected === 2">
          <div>
            <el-button size="mini">黑名单</el-button>
          </div>
        </template>
        <template v-else>
          <div>
            <el-button size="mini">添加赶猪人员</el-button>
          </div>
        </template>
      </template>
      <template v-slot:recordImage="slotProps">
        <img :src="slotProps.row.recordImage"  alt="人员门禁" width="100"/>
      </template>
    </new-table>
    <table-footer
      :totals="total"
      :size="size"
      @sizeChange="sizeChange"
      @pageChange="pageChange">
    </table-footer>
  </div>
</template>

<script>
import HeadBtns from 'components/bioSafety/Btns'
import QueryConditions from 'components/bioSafety/QueryConditions'
import NewTable from 'components/newTable/NewTable'
import TableFooter from "../../components/TableFooter"

import { formItems, propFormData } from './personAdmin/queryCondition.config'
import { titles, tableItems, tableShows } from './personAdmin/table.config'
import { getFaceToken, getFaceGuard } from '../../utils/api'
import { getFaceGuardTotal } from '../../utils/chenApi'

export default {
  name: "PersonAdmin",
  components: {
    HeadBtns,
    QueryConditions,
    NewTable,
    TableFooter
  },
  data() {
    return {
      btnNames: [ // 按钮情况
        { id: 1, name: '档案管理' },
        { id: 2, name: '人脸门禁' },
        // { id: 3, name: '赶猪监管' }
      ],
      btnSelected: 2, // 选中的按钮
      formItems: [], // 传给 QueryCondition 组件的 formItems
      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
      title: '', // 传给 BioTable 组件的 title
      listData: [], // 传给 BioTable 组件的表格展示的值 listData
      tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
      tableShows: {},
      // table的翻页
      total: 0,
      size: 20,
      pageNum: 1,
      selectId: '',
      params: {}
    }
  },
  mounted() {
    this.formItems = formItems[this.btnSelected - 1]
    this.propFormData = propFormData[this.btnSelected - 1]
    this.title = titles[this.btnSelected - 1]
    this.tableItems = tableItems[this.btnSelected - 1]
    this.tableShows = tableShows
  },
  methods: {
    // 获取选中的按钮情况
    getBtnSelected(id) {
      this.btnSelected = id
      this.formItems = formItems[id - 1]
      this.propFormData = propFormData[id - 1]
      this.title = titles[id - 1]
      this.tableItems = tableItems[id - 1]
    },
    // 获取查询条件
    handleQuery(params) {
      this.params = params
      if (this.btnSelected === 2) {
        this.faceGuard()
        this.faceGuardTotal()
      }
    },
    // 修改size
    sizeChange(val) {
      this.size = val;
      if (this.btnSelected === 2) {
        this.faceGuard()
      }
    },
    // 修改页数
    pageChange(val) {
      this.pageNum= val;
      if (this.btnSelected === 2) {
        this.faceGuard()
      }
    },
    init() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.size,
        searchStr: this.keyword
      }
      console.log(params)
      // 获取后端数据
    },
    // 人脸门禁的查询
    faceGuard() {
      let queryParams = {
        pageNum: this.pageNum,
        pageSize: this.size,
        personName: this.params.name || undefined,
        startSwingTime: this.params.time[0] + ' 00:00:00',
        endSwingTime: this.params.time[1] + ' 23:59:59',
        openType: 61 // 进门，刷脸
      }
      getFaceGuard(queryParams).then(async (res) => {
        console.log('res:', res)
        console.log(JSON.parse(res.result))
        // 结果是 JSON 格式
        this.listData = JSON.parse(res.result).data.pageData
        const { token } = await getFaceToken()
        this.listData.forEach(item => {
          item.channelName = item.channelName.split('人脸门禁')[0]
          item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`
        })
        console.log('token:', token)
      })
    },
    faceGuardTotal() {
      let queryParams = {
        personName: this.params.name || undefined,
        startSwingTime: this.params.time[0] + ' 00:00:00',
        endSwingTime: this.params.time[1] + ' 23:59:59',
        openType: 61 // 进门，刷脸
      }
      getFaceGuardTotal(queryParams).then(res => {
        console.log('total:', JSON.parse(res.result))
        this.total = JSON.parse(res.result).data
      })
    }
  },
}
</script>

<style scoped>
.person-admin {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>