|
|
@@ -4,9 +4,15 @@ |
|
|
|
<el-row> |
|
|
|
<el-col :span="18"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="6"><el-text class="mx-1" type="primary" size="large">应到:8人</el-text></el-col> |
|
|
|
<el-col :span="6"><el-text class="mx-1" type="success" size="large">实到:4</el-text> </el-col> |
|
|
|
<el-col :span="6"> <el-text class="mx-1" type="warning" size="large">趴桌子:2</el-text></el-col> |
|
|
|
<el-col :span="6" |
|
|
|
><el-text class="mx-1" type="primary" size="large">应到:{{ listData.length }}人</el-text></el-col |
|
|
|
> |
|
|
|
<el-col :span="6" |
|
|
|
><el-text class="mx-1" type="success" size="large">实到:{{ HighlightData.length }}人</el-text> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-text class="mx-1" type="warning" size="large">趴桌子:{{ LieOnTable.length }}人</el-text></el-col |
|
|
|
> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-text class="mx-1" type="info" size="large">未识别:{{ UnrecognizedD.length }}</el-text></el-col |
|
|
|
> |
|
|
@@ -20,7 +26,13 @@ |
|
|
|
<el-col :xl="4" :lg="4" :md="6" :sm="8" :xs="12" v-for="(item, index) in listData" :key="index" |
|
|
|
><div class="grid-content"> |
|
|
|
<div class="imgBox" :class="{ active: item.status === 1 ? true : false }"> |
|
|
|
<img :src="item.faces[0].faceUrl" alt="" /> |
|
|
|
<el-image |
|
|
|
style="width: 100px; height: 100px" |
|
|
|
:src="item.faces[0].faceUrl" |
|
|
|
:preview-src-list="[item.faces[0].faceUrl]" |
|
|
|
:initial-index="4" |
|
|
|
fit="cover" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="info"> |
|
|
|
<div class="desc"> |
|
|
@@ -39,20 +51,69 @@ |
|
|
|
<el-col :span="6"> |
|
|
|
<div class="unrecognized"> |
|
|
|
<div class="title">未识别人员</div> |
|
|
|
<div class="imgBox" v-for="(item, index) in UnrecognizedD" :key="index"> |
|
|
|
<img :src="item.faceUrl" alt="" /> |
|
|
|
</div> |
|
|
|
<ul> |
|
|
|
<li class="imgBox" v-for="(item, index) in UnrecognizedD" :key="index"> |
|
|
|
<el-image |
|
|
|
style="width: 80px; height: 80px" |
|
|
|
:src="item.snapshotUrl" |
|
|
|
:preview-src-list="[item.snapshotUrl]" |
|
|
|
:initial-index="4" |
|
|
|
fit="cover" |
|
|
|
/> |
|
|
|
<el-button color="#626aef" size="small" @click="assignFn(item)">指派{{ item.id }}</el-button> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-dialog v-model="visible" title="指派" width="830px" :before-close="handleClose"> |
|
|
|
<el-row class="rowbg"> |
|
|
|
<el-col :xl="6" :lg="6" :md="8" v-for="(item, index) in UnRollCallData" :key="index" |
|
|
|
><div class="grid-content gridContentDialog" :class="{ active: checkIndex == index }" @click="checkOut(item, index)"> |
|
|
|
<div class="imgBox" :class="{ active: item.status === 1 ? true : false }"> |
|
|
|
<el-image |
|
|
|
style="width: 100px; height: 100px" |
|
|
|
:src="item.faces[0].faceUrl" |
|
|
|
:preview-src-list="[item.faces[0].faceUrl]" |
|
|
|
:initial-index="4" |
|
|
|
fit="cover" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="info"> |
|
|
|
<div class="desc"> |
|
|
|
<span class="label">姓名:</span> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
<div class="desc"> |
|
|
|
<span class="label">所属分组:</span> |
|
|
|
{{ item.personSets[0].personSetName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div></el-col |
|
|
|
> |
|
|
|
</el-row> |
|
|
|
<template #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<el-button @click="visible = false">取消</el-button> |
|
|
|
<el-button type="primary" @click="submitFn">确认</el-button> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script setup lang="ts" name="SysUserPersonnel"> |
|
|
|
<script setup lang="ts" name="AttendanceRoolcallDetail"> |
|
|
|
import { userManagePersonnelApi, attendanceRoolcallApi } from "@/api"; |
|
|
|
const route = useRoute(); |
|
|
|
const listData = ref<any>([]); //人员列表 |
|
|
|
const HighlightData = ref<any>([]); //点名人员列表 |
|
|
|
const listData = ref<any>([]); //班级人员列表 |
|
|
|
const HighlightData = ref<any>([]); //已到人员列表 |
|
|
|
const UnRollCallData = ref<any>([]); //未点名人员列表 |
|
|
|
const UnrecognizedD = ref<any>([]); //未识别数据 |
|
|
|
const LieOnTable = ref<any>([]); //趴桌子数据 |
|
|
|
const visible = ref(false); //指派是否显示人员 |
|
|
|
const assignId = ref<any>(); //指派人员id |
|
|
|
const checkIndex = ref<any>(); //选择把指派人员id指派给对应的人员 |
|
|
|
const checkData = ref<any>({}); |
|
|
|
|
|
|
|
const getList = () => { |
|
|
|
userManagePersonnelApi |
|
|
|
.page({ |
|
|
@@ -86,19 +147,56 @@ const Highlight = () => { |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
// 未点名人员摘取 |
|
|
|
UnRollCallData.value = JSON.parse(JSON.stringify(listData.value)).filter((item: any) => item.status == 0); |
|
|
|
// 未识别人员摘取 |
|
|
|
UnrecognizedD.value = []; |
|
|
|
JSON.parse(JSON.stringify(HighlightData.value)).map((item: any) => { |
|
|
|
if (!item.personId) { |
|
|
|
UnrecognizedD.value.push(item); |
|
|
|
UnrecognizedD.value = JSON.parse(JSON.stringify(HighlightData.value)).filter((item: any) => !item.personId); |
|
|
|
// 趴桌子人员摘取 |
|
|
|
LieOnTable.value = JSON.parse(JSON.stringify(HighlightData.value)).filter((item: any) => item.alarmType == "lie_on_table"); |
|
|
|
|
|
|
|
console.log("未识别人员摘取:", UnrecognizedD.value, ",趴桌子人员摘取:", LieOnTable.value, ",未点名人员摘取:", UnRollCallData.value); |
|
|
|
}); |
|
|
|
}; |
|
|
|
const assignFn = (item: any) => { |
|
|
|
assignId.value = item.id; |
|
|
|
visible.value = true; |
|
|
|
}; |
|
|
|
const checkOut = (item: any, index: number) => { |
|
|
|
checkIndex.value = index; |
|
|
|
checkData.value = JSON.parse(JSON.stringify(item)); |
|
|
|
}; |
|
|
|
const submitFn = () => { |
|
|
|
if (!checkIndex.value && checkIndex.value !== 0) { |
|
|
|
ElMessage({ |
|
|
|
message: "请选择要指派的人员", |
|
|
|
type: "warning" |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
visible.value = false; |
|
|
|
|
|
|
|
attendanceRoolcallApi |
|
|
|
.update({ id: assignId.value, personId: checkData.value.personId, personSetId: checkData.value.personSets[0].personSetId }) |
|
|
|
.then(() => { |
|
|
|
ElMessage({ |
|
|
|
message: "指派成功", |
|
|
|
type: "success" |
|
|
|
}); |
|
|
|
UnrecognizedD.value = UnrecognizedD.value.filter((item: any) => item.id !== assignId.value); |
|
|
|
listData.value.map((item: any) => { |
|
|
|
if (item.personId === checkData.value.personId) { |
|
|
|
item.status = 1; |
|
|
|
} |
|
|
|
}); |
|
|
|
console.log(UnrecognizedD.value); |
|
|
|
}); |
|
|
|
}; |
|
|
|
const handleClose = () => { |
|
|
|
visible.value = false; |
|
|
|
checkIndex.value = null; |
|
|
|
assignId.value = null; |
|
|
|
}; |
|
|
|
onMounted(() => { |
|
|
|
getList(); |
|
|
|
console.log(route.query); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
@@ -138,14 +236,15 @@ onMounted(() => { |
|
|
|
width: 100%; |
|
|
|
height: 100px; |
|
|
|
background: #f2f2f2; |
|
|
|
opacity: 0.5; |
|
|
|
&.active { |
|
|
|
background: #79bbff45; |
|
|
|
opacity: 1; |
|
|
|
:deep(.el-image__preview) { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
img { |
|
|
|
:deep(.el-image__preview) { |
|
|
|
max-height: 100%; |
|
|
|
object-fit: cover; |
|
|
|
opacity: 0.5; |
|
|
|
} |
|
|
|
} |
|
|
|
.info { |
|
|
@@ -176,6 +275,18 @@ onMounted(() => { |
|
|
|
border-top: 1px solid #f3f3f3; |
|
|
|
} |
|
|
|
} |
|
|
|
.gridContentDialog { |
|
|
|
cursor: pointer; |
|
|
|
background: #f2f3f5; |
|
|
|
.imgBox { |
|
|
|
:deep(.el-image__preview) { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
&.active { |
|
|
|
border: 2px solid red; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.unrecognized { |
|
|
@@ -186,6 +297,23 @@ onMounted(() => { |
|
|
|
color: #41465f; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
ul { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
margin: 0; |
|
|
|
list-style: none; |
|
|
|
li { |
|
|
|
box-sizing: border-box; |
|
|
|
width: 80px; |
|
|
|
margin-right: 20px; |
|
|
|
margin-bottom: 20px; |
|
|
|
text-align: center; |
|
|
|
background: #f2f2f2; |
|
|
|
:deep(.el-image__preview) { |
|
|
|
width: 80px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |