|
|
@@ -0,0 +1,505 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <menu-list @actived="actived"></menu-list>
|
|
|
+ <div class="card" v-loading="loading">
|
|
|
+ <!-- 首个卡片 -->
|
|
|
+ <div class="box-card box-first">
|
|
|
+ <div class="top">
|
|
|
+ <div class="item" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <div>{{item.label}}</div>
|
|
|
+ <div>
|
|
|
+ <avue-count-up :end="item.value"></avue-count-up>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <el-button @click="addBtnFunc" round size="medium" style="width:60%" icon="el-icon-plus">
|
|
|
+ <span v-if="$isEmpty(menuObj.index)">新增常驻人员</span>
|
|
|
+ <span v-if="menuObj.index==1">新增来访人员</span>
|
|
|
+ <span v-if="menuObj.index==2">新增服务人员</span>
|
|
|
+ <span v-if="menuObj.index==3">新增体温异常人员</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- list -->
|
|
|
+ <div @click="$refs.staffForm.showDialog(item)" class="box-card" v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="box-face">
|
|
|
+ <!--人脸信息-->
|
|
|
+ <div class="face-top">
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-image class="img" fit="cover" :src="handeData(item).img">
|
|
|
+ <img slot="error" class="img"
|
|
|
+ src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></img>
|
|
|
+ </el-image>
|
|
|
+ <div class="center name">{{handeData(item).name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="center" @click.stop="">
|
|
|
+ <el-dropdown>
|
|
|
+ <i class="el-icon-s-operation operation"></i>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item @click.native="dropdownClick(item,item1.name)"
|
|
|
+ v-for="(item1,index1) in operationList" :key="index1" :icon="item1.icon">
|
|
|
+ {{item1.name}}
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--公司-->
|
|
|
+ <div class="face-center">
|
|
|
+ <div class="company">
|
|
|
+ {{handeData(item).companyName}}
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ {{item.createTime}} 加入
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--底部-->
|
|
|
+ <div class="face-bottom">
|
|
|
+ <div class="status-text" :style="{color:handelStatus(item).color}">
|
|
|
+ {{handelStatus(item).txt}}
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <el-button-group v-if="handelStatus(item).txt == '待审核'">
|
|
|
+ <el-button type="danger" @click.stop="$refs.staffForm.auditref(item,2)"
|
|
|
+ style="padding: 4px 0px;width:48px;font-size: 12px;font-weight: 300;border-color:#F56C6C" size="mini">
|
|
|
+ 不通过
|
|
|
+ </el-button>
|
|
|
+ <el-button type="success" @click.stop="$refs.staffForm.auditref(item,1)"
|
|
|
+ style="padding: 4px 0px;width:48px;font-size: 12px;font-weight: 300;background-color:#19be6b;border-color:#19be6b"
|
|
|
+ size="mini">通过</el-button>
|
|
|
+ </el-button-group>
|
|
|
+
|
|
|
+
|
|
|
+ <el-button v-else-if="handelStatus(item).txt == '审核通过'" @click.stop="pushFaceToDevice(item.id)" size="mini" round
|
|
|
+ type="primary" style="padding: 4px 8px;font-size: 12px;font-weight: 300">
|
|
|
+ <span v-if="item.pushStatus == 0">下发人脸</span>
|
|
|
+ <span v-if="item.pushStatus == 1">重新下发</span>
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <div v-else-if="handelStatus(item).txt == '审核不通过'" class="text-cut"
|
|
|
+ style="font-size:12px;color:#999;width:70%;text-align: right">
|
|
|
+ {{handeData(item).opinion}}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 占位 -->
|
|
|
+ <span style="background-color:transparent;" class="box-card" v-if="lastShow" v-for="(item, index) in lastList"
|
|
|
+ :key="index"></span>
|
|
|
+ </div>
|
|
|
+ <div class="pagination" v-if="total>size">
|
|
|
+ <el-pagination background layout="prev, pager, next" :page-size="size" :total="total"
|
|
|
+ @current-change="currentChange">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <staff-form ref="staffForm" @reloadData="fetchData"></staff-form>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import staffForm from "../form/staff.vue"
|
|
|
+
|
|
|
+ import {
|
|
|
+ getList as getStaffList,
|
|
|
+ getStaffXFList
|
|
|
+ } from "@/api/enterprise/staff";
|
|
|
+ import menuList from "./menu-list.vue"
|
|
|
+ import {
|
|
|
+ statistics
|
|
|
+ } from "@/api/estate/useraccesspermissions";
|
|
|
+ import {
|
|
|
+ getList as getGuestList
|
|
|
+ } from "@/api/estate/guestrecord.js";
|
|
|
+ export default {
|
|
|
+ name: "face-card",
|
|
|
+ props: {
|
|
|
+ row: {
|
|
|
+ type: Number,
|
|
|
+ default: 6,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ staffForm,
|
|
|
+ menuList
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+
|
|
|
+ //默认第一个常驻人员
|
|
|
+ menuObj: {},
|
|
|
+ statuObj: {},
|
|
|
+
|
|
|
+ current: 1,
|
|
|
+ size: 17,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ dataList: [{
|
|
|
+ label: '待审核',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '待下发',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '已下发',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ operationList: [{
|
|
|
+ icon: 'el-icon-view',
|
|
|
+ name: '详情'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ name: '编辑'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'el-icon-delete',
|
|
|
+ name: '删除'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'el-icon-remove-outline',
|
|
|
+ name: '禁用'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ lastList() {
|
|
|
+ let len = this.list.length + 1;
|
|
|
+ return this.row - (len % this.row);
|
|
|
+ },
|
|
|
+ lastShow() {
|
|
|
+ let len = this.list.length + 1;
|
|
|
+ return len % this.row > 0;
|
|
|
+ },
|
|
|
+ handeData() {
|
|
|
+ return data => {
|
|
|
+ let obj = {
|
|
|
+ img: '',
|
|
|
+ name: '',
|
|
|
+ companyName: '',
|
|
|
+ opinion: ''
|
|
|
+ }
|
|
|
+ let index = this.menuObj.index || 0
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ obj.img = data.face
|
|
|
+ obj.name = data.realName
|
|
|
+ obj.opinion = data.auditOpinion
|
|
|
+ obj.companyName = data.enterpriseName || '暂无企业信息'
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ obj.img = data.imageUri
|
|
|
+ obj.name = data.guestName
|
|
|
+ obj.opinion = data.opinion
|
|
|
+ obj.companyName = data.enterpriseName ? '访问【' + data.enterpriseName + '】' : '暂无访问企业信息'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handelStatus() {
|
|
|
+ return data => {
|
|
|
+ let obj = {}
|
|
|
+ if (data.auditStatus == 0 || data.checkState == 0) {
|
|
|
+ obj.txt = '待审核'
|
|
|
+ obj.color = '#ff9900'
|
|
|
+ } else if (data.auditStatus == 1 || data.checkState == 1) {
|
|
|
+ obj.txt = '审核通过'
|
|
|
+ obj.color = '#19be6b'
|
|
|
+ } else if (data.auditStatus == 2 || data.checkState == 2) {
|
|
|
+ obj.txt = '审核不通过'
|
|
|
+ obj.color = '#fa3534'
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addBtnFunc() {
|
|
|
+ let index = this.menuObj.index || 0
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ this.$refs.staffForm.showAddForm()
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dropdownClick(item, name) {
|
|
|
+ if (name == '详情') {
|
|
|
+ this.$refs.staffForm.showDialog(item)
|
|
|
+ } else if (name == '编辑') {
|
|
|
+ this.$refs.staffForm.showDialog(item, false)
|
|
|
+ } else if (name == '删除') {
|
|
|
+ this.$refs.staffForm.rowDel(item.id)
|
|
|
+ } else if (name == '禁用') {
|
|
|
+ this.deleteUserFaceFromDevice(item.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //下发人脸
|
|
|
+ pushFaceToDevice(id) {
|
|
|
+ this.$refs.staffForm.pushUserFaceToDevice(id)
|
|
|
+ },
|
|
|
+ //禁用人脸
|
|
|
+ deleteUserFaceFromDevice(id) {
|
|
|
+ this.$refs.staffForm.deleteUserFaceFromDevice(id)
|
|
|
+ },
|
|
|
+ actived(e) {
|
|
|
+ this.current = 1
|
|
|
+ this.size = 17
|
|
|
+ this.menuObj = e.menuObj
|
|
|
+ this.statuObj = e.statusObj
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ fetchData() {
|
|
|
+ this.loading = true
|
|
|
+ let index = this.menuObj.index || 0
|
|
|
+ //获取统计数据
|
|
|
+ this.getStatistics(index)
|
|
|
+ //获取列表数据
|
|
|
+ if (index == 0) {
|
|
|
+ //常驻人员
|
|
|
+ this.getStaffList()
|
|
|
+ } else if (index == 1) {
|
|
|
+ //来访人员
|
|
|
+ this.getGuestList()
|
|
|
+ } else if (index == 2) {
|
|
|
+ //服务人员
|
|
|
+ } else if (index == 3) {
|
|
|
+ //体温异常
|
|
|
+ }
|
|
|
+ },
|
|
|
+ currentChange(current) {
|
|
|
+ this.current = current
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ //获取数据统计
|
|
|
+ async getStatistics(type) {
|
|
|
+ let params = {
|
|
|
+ type
|
|
|
+ }
|
|
|
+ let data = (await statistics(params)).data.data
|
|
|
+ //待审核
|
|
|
+ this.dataList[0].value = data.waitCount
|
|
|
+ //待下发
|
|
|
+ this.dataList[1].value = data.dxfCount
|
|
|
+ //已下发
|
|
|
+ this.dataList[2].value = data.yxfCount
|
|
|
+ },
|
|
|
+ //获取访客人员列表
|
|
|
+ async getGuestList() {
|
|
|
+ let params = {}
|
|
|
+ let data = {}
|
|
|
+ let index = this.statuObj.index
|
|
|
+ if (index == 4 || index == 5) {
|
|
|
+ console.log("已下发");
|
|
|
+ } else {
|
|
|
+ params.auditStatus = this.statuObj.value
|
|
|
+ data = (await getGuestList(this.current, this.size, params)).data.data
|
|
|
+ }
|
|
|
+ this.list = data.records
|
|
|
+ this.total = data.total
|
|
|
+ this.loading = false
|
|
|
+ },
|
|
|
+ //获取常驻人员数据列表
|
|
|
+ async getStaffList() {
|
|
|
+ let params = {}
|
|
|
+ let data = {}
|
|
|
+ let index = this.statuObj.index
|
|
|
+ if (index == 4 || index == 5) {
|
|
|
+ params.type = this.statuObj.value
|
|
|
+ data = (await getStaffXFList(this.current, this.size, params)).data.data
|
|
|
+ data.records.forEach(item => {
|
|
|
+ //下发状态
|
|
|
+ item.pushStatus = this.statuObj.value
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ params.auditStatus = this.statuObj.value
|
|
|
+ data = (await getStaffList(this.current, this.size, params)).data.data
|
|
|
+ }
|
|
|
+ this.list = data.records
|
|
|
+ this.total = data.total
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .pagination {
|
|
|
+ padding: 20px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ justify-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation {
|
|
|
+ color: #cccccc;
|
|
|
+ font-size: 22px
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-content {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-list {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-list:active {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .center {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card {
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ width: calc(16.7% - 10px);
|
|
|
+ margin: 5px 0;
|
|
|
+ height: 210px;
|
|
|
+ border-radius: 0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-first {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 55%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-bottom: 1px solid #F0F0F0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ div:first-child {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ div:last-child {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #282d30;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ height: 45%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-face {
|
|
|
+ padding: 20px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .face-top {
|
|
|
+ display: flex;
|
|
|
+ height: 25%;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #282D30;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .face-center {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 0 10px;
|
|
|
+ text-align: left;
|
|
|
+ height: 50%;
|
|
|
+
|
|
|
+ .company {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .face-bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 25%;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .status-text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .func-btn {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|