@@ -0,0 +1,50 @@ | |||
/** | |||
* @description 用户管理接口 | |||
* @license Apache License Version 2.0 | |||
* @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛 | |||
* @remarks | |||
* SimpleAdmin 基于 Apache License Version 2.0 协议发布,可用于商业项目,但必须遵守以下补充条款: | |||
* 1.请不要删除和修改根目录下的LICENSE文件。 | |||
* 2.请不要删除和修改SimpleAdmin源码头部的版权声明。 | |||
* 3.分发源码时候,请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin | |||
* 4.基于本软件的作品,只能使用 SimpleAdmin 作为后台服务,除外情况不可商用且不允许二次分发或开源。 | |||
* 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为,不能以任何形式用于非法为目的的行为不要删除和修改作者声明。 | |||
* 6.任何基于本软件而产生的一切法律纠纷和责任,均于我司无关 | |||
*/ | |||
import { ReqPage } from "@/api"; | |||
/** | |||
* @Description: 寝室管理接口 | |||
* @Author: wwp | |||
* @Date: 2024-07-24 15:34:54 | |||
*/ | |||
export namespace SysDormitory { | |||
// 宿舍楼树信息 | |||
export interface DormitoryInfo { | |||
id?: string | number | undefined; | |||
name?: string | undefined; | |||
gender?: boolean | undefined; | |||
createTime?: string | undefined; | |||
} | |||
// 寝室列表传参 | |||
export interface Page extends ReqPage { | |||
buildId?: string | undefined | number; | |||
gender?: any; | |||
name?: string | undefined; | |||
} | |||
// 寝室列表信息 | |||
export interface ChamberInfo { | |||
id?: string | undefined | number; | |||
name?: string | undefined; | |||
gender?: boolean | undefined; | |||
buildId?: string | undefined | number; | |||
personCount?: string | undefined | number; | |||
createTime?: string | undefined; | |||
} | |||
// 寝室分配人员 | |||
export interface ChamberPersonnel { | |||
dormitoryId: string | undefined | number; | |||
personIds: Array<string | number>; | |||
} | |||
} |
@@ -14,3 +14,4 @@ | |||
*/ | |||
export * from "./personnel"; | |||
export * from "./clothing"; | |||
export * from "./dormitory"; |
@@ -86,9 +86,7 @@ const monitorLiveButtonCode = { | |||
/** 删除监控 */ | |||
delete: "monitorLiveDelete", | |||
/** 批量删除监控 */ | |||
batchDelete: "monitorLiveBatchDelete", | |||
/** 复制监控 */ | |||
copy: "monitorLiveCopy" | |||
batchDelete: "monitorLiveBatchDelete" | |||
}; | |||
export { monitorLIVEApi, monitorLiveButtonCode }; |
@@ -0,0 +1,77 @@ | |||
/** | |||
* @description 单页管理接口 | |||
* @license Apache License Version 2.0 | |||
* @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛 | |||
* @remarks | |||
* SimpleAdmin 基于 Apache License Version 2.0 协议发布,可用于商业项目,但必须遵守以下补充条款: | |||
* 1.请不要删除和修改根目录下的LICENSE文件。 | |||
* 2.请不要删除和修改SimpleAdmin源码头部的版权声明。 | |||
* 3.分发源码时候,请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin | |||
* 4.基于本软件的作品,只能使用 SimpleAdmin 作为后台服务,除外情况不可商用且不允许二次分发或开源。 | |||
* 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为,不能以任何形式用于非法为目的的行为不要删除和修改作者声明。 | |||
* 6.任何基于本软件而产生的一切法律纠纷和责任,均于我司无关 | |||
* @see https://gitee.com/dotnetmoyu/SimpleAdmin | |||
*/ | |||
import { moduleRequest } from "@/api/request"; | |||
import { ReqId, ResPage, ReqPersonId, SysDormitory } from "@/api/interface"; | |||
const http = moduleRequest("/business/building/"); | |||
const httpChamber = moduleRequest("/business/dormitory/"); | |||
/** | |||
* @Description: 单页管理 | |||
* @Author: wwp | |||
* @Date: 2023-12-15 15:34:54 | |||
*/ | |||
const userManageDormitoryApi = { | |||
// 获取宿舍楼树 | |||
list(params: any) { | |||
return http.get("getNoPageList", params); | |||
}, | |||
// 新增宿舍楼 | |||
addDormitory(params: any) { | |||
return http.post("add", params); | |||
}, | |||
// 修改宿舍楼 | |||
updateDormitory(params: any) { | |||
return http.put("update", params); | |||
}, | |||
// 删除宿舍楼 | |||
deleteDormitory(params: ReqId) { | |||
return http.delete("delete", params); | |||
}, | |||
// 获取寝室列表 | |||
page(params: SysDormitory.Page) { | |||
return httpChamber.get("getPageList", params); | |||
}, | |||
/** 新增寝室 */ | |||
add(params: SysDormitory.ChamberInfo) { | |||
return httpChamber.post("add", params); | |||
}, | |||
/** 修改寝室 */ | |||
update(params: SysDormitory.ChamberInfo) { | |||
return httpChamber.put("update", params); | |||
}, | |||
/** 删除寝室 */ | |||
delete(params: ReqId) { | |||
return httpChamber.delete("delete", params); | |||
}, | |||
/**寝室分配人员*/ | |||
assignPersonnel(params: SysDormitory.ChamberPersonnel) { | |||
return httpChamber.post("assignPersonnel", params); | |||
} | |||
/** 获取单页详情 */ | |||
// detail(params: ReqId) { | |||
// return http.get("getPersionById", params); | |||
// }, | |||
}; | |||
const dormitoryButtonCode = { | |||
/** 新增人员 */ | |||
add: "userManageDormitoryAdd", | |||
/** 删除人员 */ | |||
edit: "userManageDormitoryEdit", | |||
/** 删除人员 */ | |||
delete: "userManageDormitoryDelete" | |||
}; | |||
export { userManageDormitoryApi, dormitoryButtonCode }; |
@@ -17,3 +17,4 @@ export * from "./classManage"; | |||
export * from "./clothing"; | |||
export * from "./teacher"; | |||
export * from "./keyPersonnel"; | |||
export * from "./dormitory"; |
@@ -27,7 +27,7 @@ | |||
</div> | |||
<div class="home-bg-content-item-content"> | |||
<div class="home-bg-content-item-title">告警信息总量</div> | |||
<div class="home-bg-content-item-value">197218</div> | |||
<div class="home-bg-content-item-value">1972</div> | |||
</div> | |||
</div></el-col | |||
> | |||
@@ -350,27 +350,27 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||
const tableData = ref([ | |||
{ | |||
type: "今日", | |||
warntotal: "828", | |||
lowrisk: "675", | |||
highrisk: "153" | |||
warntotal: "20", | |||
lowrisk: "10", | |||
highrisk: "10" | |||
}, | |||
{ | |||
type: "本周", | |||
warntotal: "828", | |||
lowrisk: "675", | |||
highrisk: "153" | |||
warntotal: "50", | |||
lowrisk: "20", | |||
highrisk: "30" | |||
}, | |||
{ | |||
type: "本月", | |||
warntotal: "19813", | |||
lowrisk: "17671", | |||
highrisk: "2129" | |||
warntotal: "198", | |||
lowrisk: "176", | |||
highrisk: "22" | |||
}, | |||
{ | |||
type: "上月", | |||
warntotal: "21789", | |||
lowrisk: "0", | |||
highrisk: "0" | |||
warntotal: "10", | |||
lowrisk: "5", | |||
highrisk: "5" | |||
}, | |||
{ | |||
@@ -30,7 +30,8 @@ | |||
.node-label { | |||
width: 100px; | |||
overflow: hidden; | |||
font-size: 16px; | |||
// font-size: 16px; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
} | |||
@@ -50,7 +51,7 @@ | |||
} | |||
} | |||
:deep(.el-tree-node__content) { | |||
height: 50px; | |||
height: 33px; | |||
} | |||
} | |||
.el-input { | |||
@@ -30,12 +30,12 @@ | |||
<span class="custom-tree-node"> | |||
<span class="node-label" :title="node.label">{{ node.label }}</span> | |||
<span v-if="data.id && data.id != '-1'"> | |||
<!-- <el-icon size="16" title="添加" @click.stop="append('add', data)"><CirclePlus /></el-icon> --> | |||
<el-icon size="16" title="编辑" @click.stop="append('edit', data)" style="margin-left: 8px"><Edit /></el-icon> | |||
<el-icon size="16" title="添加分组" @click.stop="append('addChild', data)"><CirclePlus /></el-icon> | |||
<el-icon size="16" title="编辑分组" @click.stop="append('edit', data)" style="margin-left: 8px"><Edit /></el-icon> | |||
<el-icon size="16" title="设置推送人" @click.stop="pushPerson(FormOptEnum.GroupPushPerson, data)" style="margin-left: 8px" | |||
><UserFilled | |||
/></el-icon> | |||
<el-icon size="16" title="删除" @click.stop="remove(data.id, '删除该分组')" style="margin-left: 8px"><Delete /></el-icon> | |||
<el-icon size="16" title="删除分组" @click.stop="remove(data.id, '删除该分组')" style="margin-left: 8px"><Delete /></el-icon> | |||
</span> | |||
</span> | |||
</template> | |||
@@ -235,7 +235,10 @@ const groupVisible = ref(false); //是否显示表单 | |||
const groupTitle = ref("新增分组"); | |||
const groupForm = reactive({ | |||
name: "", | |||
id: "" | |||
id: "", | |||
parentId: "" | |||
}); | |||
const groupFormRules = ref({ | |||
}); | |||
const groupRules = ref({ | |||
name: [{ required: true, message: "请输入分组名称", trigger: "blur" }] | |||
@@ -245,13 +248,19 @@ const closeGroup = () => { | |||
groupVisible.value = false; | |||
groupFormRef.value.resetFields(); | |||
groupForm.name = ""; | |||
groupForm.id = ""; | |||
groupForm.parentId = ""; | |||
}; | |||
const groupFormType = ref<any>(null); | |||
// 新增编辑分组 | |||
const append = (type: string, data: Tree) => { | |||
groupVisible.value = true; | |||
groupFormType.value = type | |||
if (type == "edit") { | |||
groupForm.name = data.name; | |||
groupForm.id = data.id; | |||
} else if(type == "addChild") { | |||
groupForm.parentId = data.id | |||
} | |||
}; | |||
// 删除分组 | |||
@@ -265,18 +274,30 @@ const onSubmit = () => { | |||
if (valid) { | |||
let params: any = reactive({ | |||
id: "", | |||
name: groupForm.name | |||
name: groupForm.name, | |||
parentId: groupForm.parentId | |||
}); | |||
if (!groupForm.id) { | |||
monitorLIVEApi.addGroup(params).then(res => { | |||
console.log(groupFormType) | |||
if (groupFormType.value == 'add') { | |||
delete params.parentId; | |||
monitorLIVEApi.addGroup(params).then((res:any) => { | |||
if (res.code == 200) { | |||
getGroupList(); | |||
closeGroup(); | |||
} | |||
}); | |||
} else { | |||
} else if(groupFormType.value == 'edit') { | |||
params.id = groupForm.id; | |||
monitorLIVEApi.updateGroup(params).then(res => { | |||
delete params.parentId; | |||
monitorLIVEApi.updateGroup(params).then((res:any) => { | |||
if (res.code == 200) { | |||
getGroupList(); | |||
closeGroup(); | |||
} | |||
}); | |||
} else if(groupFormType.value == 'addChild') { | |||
delete params.id; | |||
monitorLIVEApi.addGroup(params).then((res:any) => { | |||
if (res.code == 200) { | |||
getGroupList(); | |||
closeGroup(); | |||
@@ -4,63 +4,73 @@ | |||
* @Date: 2023-12-15 15:44:05 | |||
!--> | |||
<template> | |||
<div class="abilityBox"> | |||
<TreeFilter ref="treeFilter" title="摄像头分组" label="name" id="id" width="300px" :request-api="monitorLIVEApi.groupList" @change="changeGroup"> | |||
</TreeFilter> | |||
<div class="table-box"> | |||
<div class="abilityBox"> | |||
<TreeFilter | |||
ref="treeFilter" | |||
title="摄像头分组" | |||
label="name" | |||
id="id" | |||
width="300px" | |||
:request-api="monitorLIVEApi.groupList" | |||
@change="changeGroup" | |||
> | |||
</TreeFilter> | |||
<TreeFilter | |||
ref="treeFilters" | |||
title="摄像头列表" | |||
label="sensorName" | |||
id="sensorId" | |||
:isData="true" | |||
width="300px" | |||
:data="videoList" | |||
@change="changeVideo" | |||
> | |||
</TreeFilter> | |||
<TreeFilter | |||
ref="treeFilters" | |||
title="摄像头列表" | |||
label="sensorName" | |||
id="sensorId" | |||
:isData="true" | |||
width="300px" | |||
:data="videoList" | |||
@change="changeVideo" | |||
> | |||
</TreeFilter> | |||
<div class="card content-main"> | |||
<el-collapse accordion> | |||
<el-collapse-item :name="ins" v-for="(item, ins) in warnGroupList" :key="item.cameraId[0]"> | |||
<template #title> | |||
<div class="collapse-title" @click.stop=""> | |||
<div class="titlemodel"> | |||
<div style="width: 220px; text-align: left">{{ item.name }} {{ item.cameraId[0] }}</div> | |||
<div style="margin-left: 20px"> | |||
<el-button @click="pushPerson(FormOptEnum.VideoPushPerson, item)" type="primary" size="small">设置推送人</el-button> | |||
<div class="card content-main"> | |||
<el-collapse accordion> | |||
<el-collapse-item :name="ins" v-for="(item, ins) in warnGroupList" :key="item.code"> | |||
<template #title> | |||
<div class="collapse-title" @click.stop=""> | |||
<div class="titlemodel"> | |||
<div style="width: 220px; text-align: left">{{ item.name }}</div> | |||
<div style="margin-left: 20px"> | |||
<el-button @click="pushPerson(FormOptEnum.VideoPushPerson, item)" type="primary" size="small">设置推送人</el-button> | |||
</div> | |||
</div> | |||
<div class="btns"> | |||
<el-switch v-model="item.state" @change="stateChange" /> | |||
</div> | |||
</div> | |||
<div class="btns"> | |||
<el-switch v-model="item.state" @change="stateChange" /> | |||
</div> | |||
</div> | |||
</template> | |||
<div class="collapse-content"> | |||
<!-- <div class="contentinfo" v-for="(v, index) in item.subset" :key="v.code"> | |||
</template> | |||
<div class="collapse-content"> | |||
<!-- <div class="contentinfo" v-for="(v, index) in item.subset" :key="v.code"> | |||
<div class="modellabel">{{ v.name }}</div> | |||
<div class="btns"> | |||
<el-switch v-model="v.state" active-text="开启" inactive-text="关闭" /> | |||
</div> | |||
</div> --> | |||
<el-row :gutter="20"> | |||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" v-for="v in item.subset" :key="v.code"> | |||
<div class="contentinfo"> | |||
<div class="modellabel">{{ v.name }}</div> | |||
<el-row :gutter="20"> | |||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" v-for="v in item.subset" :key="v.code"> | |||
<div class="contentinfo"> | |||
<div class="modellabel">{{ v.name }}</div> | |||
<div class="btns"> | |||
<el-switch :disabled="item.state == false" v-model="v.state" @change="stateChange" /> | |||
<div class="btns"> | |||
<el-switch :disabled="item.state == false" v-model="v.state" @change="stateChange" /> | |||
</div> | |||
</div> | |||
</div> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</el-collapse-item> | |||
</el-collapse> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</el-collapse-item> | |||
</el-collapse> | |||
</div> | |||
<!-- 人员选择 --> | |||
<userForm ref="userFormRef" /> | |||
</div> | |||
<!-- 人员选择 --> | |||
<userForm ref="userFormRef" /> | |||
</div> | |||
</template> | |||
@@ -92,7 +102,7 @@ enum FormOptEnum { | |||
} | |||
onMounted(() => { | |||
// 在这里执行其他需要在组件挂载后运行的代码 | |||
getwarnGroup(); | |||
getwarnGroup(''); | |||
getVideoList('') | |||
}); | |||
const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null); | |||
@@ -111,6 +121,7 @@ function getVideoList(id:any) { | |||
} | |||
function changeVideo(val: number | string) { | |||
console.log(val) | |||
getwarnGroup(val); | |||
// personSetId.value = val | |||
// proTable.value!.pageable.pageNum = 1; | |||
// proTable.value!.searchParam.personSetId = val; | |||
@@ -121,9 +132,9 @@ function changeVideo(val: number | string) { | |||
// 获取配置树 | |||
let warnGroupList = ref<any>([]); | |||
function getwarnGroup() { | |||
function getwarnGroup(id) { | |||
setTimeout(async () => { | |||
await abilityApi.warnGroup({}).then((res:any) => { | |||
await abilityApi.warnGroup({cameraId: id}).then((res:any) => { | |||
let { code, data } = res; | |||
if (code == 200) { | |||
warnGroupList.value = data; | |||
@@ -0,0 +1,137 @@ | |||
<!-- | |||
* @Description: 人员表单 | |||
* @Author: syy | |||
* @Date: 2023-12-15 15:45:50 | |||
--> | |||
<template> | |||
<div class="userManageForm"> | |||
<div> | |||
<el-row :gutter="16"> | |||
<el-col :span="12"> | |||
<s-form-item label="寝室名称" prop="name"> | |||
<s-input v-model="userInfo.name"></s-input> | |||
</s-form-item> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</div> | |||
</template> | |||
<script setup lang="ts"> | |||
import { SysUserPersonnel, userManagePersonnelApi, userManageClassManageApi } from "@/api"; | |||
import { Plus } from "@element-plus/icons-vue"; | |||
import { useUserStore } from "@/stores/modules"; | |||
import type { UploadProps } from "element-plus"; | |||
import { ElMessage } from "element-plus"; | |||
import { TokenEnum } from "@/enums"; | |||
// props | |||
interface FormProps { | |||
modelValue: Partial<SysUserPersonnel.SysUserPerInfo>; | |||
} | |||
const emit = defineEmits(["update:modelValue"]); //定义emit | |||
const props = defineProps<FormProps>(); //定义props | |||
// 人员信息 | |||
const userInfo = computed({ | |||
get: () => props.modelValue, | |||
set: val => emit("update:modelValue", val) | |||
}); | |||
/* */ | |||
const userStore = useUserStore(); | |||
const { accessToken } = userStore; | |||
const fileList = ref<any>([]); | |||
const faces = ref<SysUserPersonnel.SysUserAvatar[]>([]); | |||
const dialogImageUrl = ref(""); | |||
const dialogVisible = ref(false); | |||
const treeData = ref<any>([]); | |||
const handleRemove: UploadProps["onRemove"] = (uploadFile: any) => { | |||
const index = faces.value.findIndex(item => item.uid === uploadFile.uid); | |||
if (index > -1) { | |||
faces.value.splice(index, 1); | |||
} | |||
userInfo.value.faces = faces.value; | |||
if (uploadFile.personId) { | |||
userManagePersonnelApi.deleteFace({ personId: uploadFile.personId, faceIds: [uploadFile.uid] }).then(res => {}); | |||
} | |||
}; | |||
const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => { | |||
dialogImageUrl.value = uploadFile.url!; | |||
dialogVisible.value = true; | |||
}; | |||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => { | |||
if (response.code === 200) { | |||
faces.value.push({ faceUrl: response.data, uid: uploadFile.uid }); | |||
userInfo.value.faces = faces.value; | |||
ElMessage.success(response.msg); | |||
} else { | |||
ElMessage.error(response.msg); | |||
fileList.value = fileList.value.splice(0, fileList.value.length - 1); | |||
} | |||
}; | |||
const handleAvatarError: UploadProps["onError"] = (error, uploadFile, uploadFiles) => { | |||
console.log(error, uploadFile, uploadFiles, "err"); | |||
}; | |||
// 通用状态选项 | |||
const genderOptions = ref([ | |||
{ | |||
label: "未知", | |||
value: "GENDER_UNKNOWN" | |||
}, | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
}, | |||
{ | |||
label: "女", | |||
value: "GENDER_FEMALE" | |||
} | |||
]); | |||
const getRequestData = async () => { | |||
const { data } = await userManageClassManageApi.page(); | |||
treeData.value = data; | |||
}; | |||
onMounted(() => { | |||
// 初始化 | |||
userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value; | |||
getRequestData(); | |||
if (userInfo.value.personId) { | |||
if (userInfo.value.faces?.length > 0) { | |||
fileList.value = [ | |||
...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => { | |||
return { | |||
url: item.faceUrl, | |||
uid: item.faceId, | |||
personId: userInfo.value.personId | |||
}; | |||
}) | |||
]; | |||
faces.value = [ | |||
...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => { | |||
return { | |||
faceUrl: item.faceUrl, | |||
uid: item.faceId, | |||
personId: userInfo.value.personId | |||
}; | |||
}) | |||
]; | |||
} | |||
} | |||
}); | |||
</script> | |||
<style lang="scss" scoped> | |||
:deep(.el-input__wrapper) { | |||
width: 100% !important; | |||
} | |||
:deep(.el-date-editor.el-input) { | |||
width: 92% !important; | |||
} | |||
:deep(.el-upload-list--picture-card .el-upload-list__item) { | |||
width: 100px !important; | |||
height: 100px !important; | |||
} | |||
:deep(.el-upload--picture-card) { | |||
width: 100px !important; | |||
height: 100px !important; | |||
} | |||
</style> |
@@ -0,0 +1,119 @@ | |||
<!-- | |||
* @Description: 表单 | |||
* @Author: syy | |||
* @Date: 2023-12-15 15:45:59 | |||
--> | |||
<template> | |||
<div> | |||
<form-container v-model="visible" :title="`${sysUserProps.opt}人员`" form-size="800px" @close="onClose"> | |||
<el-form | |||
ref="sysUserFormRef" | |||
:rules="rules" | |||
:disabled="sysUserProps.disabled" | |||
:model="sysUserProps.record" | |||
:hide-required-asterisk="sysUserProps.disabled" | |||
label-width="auto" | |||
label-suffix=" :" | |||
> | |||
<el-tabs v-model="activeName"> | |||
<Basic v-model="sysUserProps.record"></Basic> | |||
</el-tabs> | |||
</el-form> | |||
<template #footer> | |||
<el-button @click="onClose"> 取消 </el-button> | |||
<el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||
</template> | |||
</form-container> | |||
</div> | |||
</template> | |||
<script setup lang="ts" name="SysUserPersonnelForm"> | |||
import { SysUserPersonnel, userManagePersonnelApi } from "@/api"; | |||
import { FormOptEnum } from "@/enums"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
import Basic from "./form_basic.vue"; | |||
const visible = ref(false); //是否显示表单 | |||
const activeName = ref("basic"); | |||
// 表单参数 | |||
const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.SysUserPerInfo>>({ | |||
opt: FormOptEnum.ADD, | |||
record: {}, | |||
disabled: false | |||
}); | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
// personId: [required("请输入人员ID")], | |||
name: [required("请输入姓名")], | |||
gender: [required("请选择性别")], | |||
faces: [required("请上传人脸图片")], | |||
phone: [required("请输入手机号")] | |||
// extData: [required("请输入扩展数据")] | |||
}); | |||
/** | |||
* 打开表单 | |||
* @param props 表单参数 | |||
*/ | |||
function onOpen(props: FormProps.Base<SysUserPersonnel.SysUserPerInfo>) { | |||
Object.assign(sysUserProps, props); //合并参数 | |||
if (props.opt == FormOptEnum.ADD) { | |||
//如果是新增,设置默认值 | |||
// sysUserProps.record.sortCode = 99; | |||
} | |||
visible.value = true; //显示表单 | |||
if (props.record.personId) { | |||
//如果传了id,就去请求api获取record | |||
userManagePersonnelApi.detail({ id: props.record.personId }).then((res: any) => { | |||
sysUserProps.record = res.data; | |||
}); | |||
} | |||
} | |||
// 提交数据(新增/编辑) | |||
const sysUserFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
sysUserFormRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
//提交表单 | |||
if (sysUserProps.record.faces.length === 0) { | |||
return ElMessage.error("请上传人脸图片"); | |||
} | |||
if (sysUserProps.record.personId) { | |||
await userManagePersonnelApi | |||
.update(sysUserProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} else { | |||
await userManagePersonnelApi | |||
.add(sysUserProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} | |||
}); | |||
} | |||
/** 关闭表单*/ | |||
function onClose() { | |||
visible.value = false; | |||
activeName.value = "basic"; | |||
} | |||
// 暴露给父组件的方法 | |||
defineExpose({ | |||
onOpen | |||
}); | |||
</script> | |||
<style lang="scss" scoped></style> |
@@ -0,0 +1,107 @@ | |||
<!-- | |||
* @Description: 表单 | |||
* @Author: syy | |||
* @Date: 2023-12-15 15:45:59 | |||
--> | |||
<template> | |||
<div> | |||
<form-container v-model="visibleClass" :title="`${sysUserProps.opt}宿舍楼`" form-size="400px" @close="onClose"> | |||
<el-form | |||
ref="sysUserFormRef" | |||
:rules="rules" | |||
:disabled="sysUserProps.disabled" | |||
:model="sysUserProps.record" | |||
:hide-required-asterisk="sysUserProps.disabled" | |||
label-width="auto" | |||
label-suffix=" :" | |||
> | |||
<div> | |||
<el-row :gutter="16"> | |||
<el-col :span="22"> | |||
<s-form-item label="宿舍楼名称" prop="personSetName"> | |||
<s-input v-model="sysUserProps.record.personSetName"></s-input> | |||
</s-form-item> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</el-form> | |||
<template #footer> | |||
<el-button @click="onClose"> 取消 </el-button> | |||
<el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||
</template> | |||
</form-container> | |||
</div> | |||
</template> | |||
<script setup lang="ts" name="SysUserPerformClass"> | |||
import { ref } from "vue"; | |||
import { SysDormitory, userManageClassManageApi } from "@/api"; | |||
import { FormOptEnum } from "@/enums"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
const visibleClass = ref(false); //是否显示表单 | |||
// 表单参数 | |||
const sysUserProps = reactive<FormProps.Base<SysDormitory.DormitoryInfo>>({ | |||
opt: FormOptEnum.ADD, | |||
record: {}, | |||
disabled: false | |||
}); | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
personSetName: [required("请输入班级名称")] | |||
}); | |||
/** | |||
* 打开表单 | |||
* @param props 表单参数 | |||
*/ | |||
function onOpen(props: FormProps.Base<SysDormitory.DormitoryInfo>) { | |||
Object.assign(sysUserProps, props); //合并参数 | |||
visibleClass.value = true; //显示表单 | |||
sysUserProps.record = props.record; | |||
} | |||
// 提交数据(新增/编辑) | |||
const sysUserFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
sysUserFormRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
sysUserProps.record.name = sysUserProps.record.personSetName; | |||
//提交表单 | |||
if (sysUserProps.record.personSetId) { | |||
sysUserProps.record.id = sysUserProps.record.personSetId; | |||
await userManageClassManageApi | |||
.update(sysUserProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} else { | |||
await userManageClassManageApi | |||
.add(sysUserProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} | |||
}); | |||
} | |||
/** 关闭表单*/ | |||
function onClose() { | |||
visibleClass.value = false; | |||
} | |||
// 暴露给父组件的方法 | |||
defineExpose({ | |||
onOpen | |||
}); | |||
</script> | |||
<style lang="scss" scoped></style> |
@@ -0,0 +1,116 @@ | |||
<!-- | |||
* @Description: 表单 | |||
* @Author: syy | |||
* @Date: 2023-12-15 15:45:59 | |||
--> | |||
<template> | |||
<div> | |||
<form-container v-model="visibleClass" :title="`${sysUserProps.opt}`" form-size="400px" @close="onClose"> | |||
<el-form | |||
ref="sysUserFormRef" | |||
:rules="rules" | |||
:disabled="sysUserProps.disabled" | |||
:model="sysUserProps.record" | |||
:hide-required-asterisk="sysUserProps.disabled" | |||
label-width="auto" | |||
label-suffix=" :" | |||
> | |||
<div> | |||
<el-row :gutter="16"> | |||
<el-col :span="22"> | |||
<s-form-item label="班主任" prop="userId"> | |||
<s-select v-model="sysUserProps.record.userId" :options="teacherData" label="name" value="userId"></s-select> | |||
</s-form-item> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</el-form> | |||
<template #footer> | |||
<el-button @click="onClose"> 取消 </el-button> | |||
<el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||
</template> | |||
</form-container> | |||
</div> | |||
</template> | |||
<script setup lang="ts" name="SysUserPerformClass"> | |||
import { ref } from "vue"; | |||
import { SysUserPersonnel, userManageTeacherApi } from "@/api"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
const teacherData = ref<any>([]); | |||
const visibleClass = ref(false); //是否显示表单 | |||
// 表单参数 | |||
enum FormOptEnum { | |||
/** 新增 */ | |||
AddTeacher = "绑定班主任", | |||
/** 编辑 */ | |||
UpdateTeacher = "修改班主任" | |||
} | |||
const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.ClassPage>>({ | |||
opt: FormOptEnum.AddTeacher, | |||
record: {}, | |||
disabled: false | |||
}); | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
userId: [required("请选择班主任名称")] | |||
}); | |||
/** | |||
* 打开表单 | |||
* @param props 表单参数 | |||
*/ | |||
function onOpen(props: FormProps.Base<SysUserPersonnel.ClassPage>) { | |||
getRequestData(); | |||
Object.assign(sysUserProps, props); //合并参数 | |||
visibleClass.value = true; //显示表单 | |||
sysUserProps.record = props.record; | |||
} | |||
const getRequestData = async () => { | |||
const { data } = await userManageTeacherApi.page(); | |||
teacherData.value = data; | |||
}; | |||
// 提交数据(新增/编辑) | |||
const sysUserFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
sysUserFormRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
console.log(sysUserProps); | |||
//提交表单 | |||
if (sysUserProps.opt === FormOptEnum.UpdateTeacher) { | |||
await userManageTeacherApi | |||
.update(sysUserProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} else { | |||
await userManageTeacherApi | |||
.add(sysUserProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} | |||
}); | |||
} | |||
/** 关闭表单*/ | |||
function onClose() { | |||
visibleClass.value = false; | |||
} | |||
// 暴露给父组件的方法 | |||
defineExpose({ | |||
onOpen | |||
}); | |||
</script> | |||
<style lang="scss" scoped></style> |
@@ -0,0 +1,285 @@ | |||
<!-- | |||
* @Description: 寝室管理 | |||
* @Author: syy | |||
* @Date: 2024-7-15 | |||
--> | |||
<template> | |||
<div class="main-box"> | |||
<TreeFilter | |||
ref="treeFilter" | |||
title="宿舍楼管理" | |||
label="name" | |||
id="id" | |||
width="300px" | |||
:show-all="true" | |||
:request-api="userManageDormitoryApi.list" | |||
@change="changeTreeFilter" | |||
> | |||
<template v-slot:header> | |||
<s-button suffix="宿舍楼" @click="addDormitory(FormOptEnum.ADD)" style="margin-bottom: 15px" /> | |||
</template> | |||
<template v-slot:label="{ row }"> | |||
<span class="custom-tree-node"> | |||
<span>{{ row.node.label }}</span> | |||
<span v-if="row.node.label != '全部'"> | |||
<a :title="FormOptEnum.EDIT" @click.stop="addDormitory(FormOptEnum.EDIT, row.node.data)"> | |||
<el-icon><Edit /></el-icon> | |||
</a> | |||
<a :title="FormOptEnum.DELETE" style="margin-left: 8px" @click.stop="addDelete(row.node.data.personSetId, '删除宿舍楼')"> | |||
<el-icon><Delete /></el-icon> | |||
</a> | |||
</span> | |||
</span> | |||
</template> | |||
</TreeFilter> | |||
<div class="table-box"> | |||
<ProTable ref="proTable" title="寝室管理" :columns="columns" rowKey="personId" :request-api="userManageDormitoryApi.page"> | |||
<!-- 表格 header 按钮 --> | |||
<template #tableHeader="scope"> | |||
<s-button v-auth="dormitoryButtonCode.add" suffix="寝室" @click="onOpen(FormOptEnum.ADD, { personSetId: personSetId })" /> | |||
<s-button | |||
v-auth="dormitoryButtonCode.delete" | |||
type="danger" | |||
:opt="FormOptEnum.DELETE" | |||
plain | |||
suffix="寝室" | |||
:disabled="!scope.isSelected" | |||
@click="onDelete(scope.selectedListIds, '删除所选寝室')" | |||
/> | |||
</template> | |||
<!-- 表格操作栏 --> | |||
<template #operation="scope"> | |||
<el-space> | |||
<s-button v-auth="dormitoryButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | |||
<s-button v-auth="dormitoryButtonCode.delete" link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.personId], `删除寝室`)" /> | |||
<!-- <el-dropdown @command="handleCommand"> | |||
<el-link type="primary" :underline="false" :icon="ArrowDown"> 更多 </el-link> | |||
<template #dropdown> | |||
<el-dropdown-menu> | |||
<el-dropdown-item :command="command(scope.row, cmdEnum.AddFace)" | |||
><el-upload | |||
ref="upload" | |||
class="upload-demo" | |||
action="/api/business/personApi/uploadFile" | |||
:show-file-list="false" | |||
:on-success="handleAvatarSuccess" | |||
accept=".jpg, .jpeg, .png" | |||
:headers="{ | |||
Authorization: `${TokenEnum.TOKEN_PREFIX} ${accessToken}` | |||
}" | |||
> | |||
<template #trigger> | |||
{{ cmdEnum.AddFace }} | |||
</template> | |||
</el-upload> | |||
</el-dropdown-item> | |||
<el-dropdown-item :command="command(scope.row, cmdEnum.UnderpantsUnBinding)"> | |||
{{ cmdEnum.UnderpantsUnBinding }} | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</template> | |||
</el-dropdown> --> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
</div> | |||
<!-- 寝室新增/编辑表单 --> | |||
<Form ref="formRef"></Form> | |||
<!-- 宿舍楼新增/编辑表单 --> | |||
<FormClass ref="formRefC" /> | |||
<!-- 班主任绑定/修改 --> | |||
<FormTeacher ref="formRefT" /> | |||
<!-- 预览头像 --> | |||
<el-dialog v-model="visible" title="查看头像" width="830px" :before-close="handleClose"> | |||
<div style="display: flex; align-items: center; justify-content: center"> | |||
<img style="max-width: 100%; max-height: 600px" class="detailpic" :src="faceUrl" alt="" /> | |||
</div> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
<script setup lang="tsx" name="SysDormitory"> | |||
import { userManageDormitoryApi,dormitoryButtonCode,SysDormitory } from "@/api"; | |||
import { useHandleData } from "@/hooks/useHandleData"; | |||
import { FormOptEnum } from "@/enums"; | |||
import Form from "./components/form/index.vue"; | |||
import FormClass from "./components/formClass/index.vue"; | |||
import FormTeacher from "./components/formTeacher/index.vue"; | |||
import { ArrowDown,More } from "@element-plus/icons-vue"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import TreeFilter from "@/components/TreeFilter/index.vue"; | |||
import { useUserStore } from "@/stores/modules"; | |||
import { TokenEnum } from "@/enums"; | |||
import type { UploadProps } from "element-plus"; | |||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||
const faceUrl = ref(''); | |||
const visible = ref(false); //是否显示寝室表单 | |||
const proTable = ref<ProTableInstance>(); | |||
const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null); | |||
const userStore = useUserStore(); | |||
const { accessToken } = userStore; | |||
// 表格配置项 | |||
const columns: ColumnProps<SysDormitory.ChamberInfo>[] = [ | |||
{ type: "selection", fixed: "left", width: 50 }, | |||
{ | |||
prop: "name", | |||
label: "寝室名称" | |||
}, | |||
{ | |||
prop: "personId", | |||
label: "寝室数量" | |||
}, | |||
// { prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
]; | |||
const viewHeadImage = (scope: any) => { | |||
faceUrl.value = scope.row.faces[0].faceUrl; | |||
visible.value = true | |||
console.log(faceUrl); | |||
}; | |||
const handleClose = () => { | |||
visible.value = false; | |||
}; | |||
const tableData = ref([ | |||
{ | |||
name: "203", | |||
personId: "20", | |||
}, | |||
]); | |||
// 寝室表单引用 | |||
const formRef = ref<InstanceType<typeof Form> | null>(null); | |||
// 宿舍楼表单引用 | |||
const formRefC = ref<InstanceType<typeof FormClass> | null>(null); | |||
// 宿舍楼表单引用 | |||
const formRefT = ref<InstanceType<typeof FormTeacher> | null>(null); | |||
/** | |||
* 打开表单 | |||
* @param opt 操作类型 | |||
* @param record 记录 | |||
*/ | |||
function onOpen(opt: FormOptEnum, record: {} | SysDormitory.ChamberInfo = {}) { | |||
formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable }); | |||
} | |||
/** | |||
* 打开宿舍楼表单 | |||
* @param opt 操作类型 | |||
* @param record 记录 | |||
*/ | |||
function addDormitory(opt: FormOptEnum, record: {} | SysDormitory.DormitoryInfo = {}) { | |||
formRefC.value?.onOpen({ opt: opt, record: JSON.parse(JSON.stringify(record)), successful: RefreshTable }); | |||
} | |||
/** | |||
* 宿舍楼删除 | |||
* @param ids id数组 | |||
*/ | |||
async function addDelete(id: string[],msg: string) { | |||
// 二次确认 => 请求api => 刷新表格 | |||
await useHandleData(userManageClassManageApi.delete, { id }, msg); | |||
RefreshTable(); //刷新表格 | |||
} | |||
/** | |||
* 寝室删除 | |||
* @param ids id数组 | |||
*/ | |||
async function onDelete(ids: string[], msg: string) { | |||
if(ids.length === 0){ | |||
ElMessage({ | |||
message: '请选择要删除的寝室', | |||
type: 'warning' | |||
}); | |||
return | |||
} | |||
// 二次确认 => 请求api => 刷新表格 | |||
await useHandleData(userManagePersonnelApi.delete, {id: ids.join(",") }, msg); | |||
RefreshTable(); //刷新表格 | |||
} | |||
// 刷新表格 | |||
const RefreshTable = () => { | |||
proTable.value?.refresh(); | |||
treeFilter.value?.refresh(); //刷新树形筛选器 | |||
} | |||
/** 更多下拉菜单命令枚举 */ | |||
enum cmdEnum { | |||
AddFace = "添加人脸", | |||
UnderpantsUnBinding = "底库解绑" | |||
} | |||
/** 下拉菜单参数接口 */ | |||
interface Command { | |||
row: SysDormitory.ChamberInfo; | |||
command: cmdEnum; | |||
} | |||
/**配置command的参数 */ | |||
function command(row: SysDormitory.ChamberInfo, command: cmdEnum): Command { | |||
return { | |||
row: row, | |||
command: command | |||
}; | |||
} | |||
/** | |||
* 列表更多下拉菜单点击事件 | |||
* @param command | |||
*/ | |||
const personId = ref<number | string>(); //寝室id | |||
function handleCommand(command: Command) { | |||
switch (command.command) { | |||
case cmdEnum.AddFace: | |||
personId.value = command.row.personId; //获取寝室id | |||
break | |||
case cmdEnum.UnderpantsUnBinding: | |||
userManagePersonnelApi.personUnBindDfie({ | |||
personId:command.row.personId, | |||
personSetId: command.row.personSets[0].personSetId | |||
}).then(res=>{ | |||
ElMessage.success('底库解绑成功'); | |||
RefreshTable() | |||
}) | |||
break; | |||
} | |||
} | |||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => { | |||
if (response.code === 200) { | |||
userManagePersonnelApi.addFace({ | |||
personId: personId.value, | |||
faceUrl: response.data | |||
}).then(res=>{ | |||
RefreshTable() | |||
}) | |||
} else { | |||
ElMessage.error(response.msg); | |||
} | |||
}; | |||
/** 部门切换 */ | |||
const personSetId = ref<number | string>() | |||
function changeTreeFilter(val: number | string) { | |||
personSetId.value = val | |||
proTable.value!.pageable.pageNum = 1; | |||
proTable.value!.searchParam.personSetId = val; | |||
proTable.value!.search(); | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.table-box { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.custom-tree-node { | |||
display: flex; | |||
flex: 1; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding-right: 8px; | |||
font-size: 14px; | |||
} | |||
</style> |
@@ -43,19 +43,26 @@ | |||
<img class="detailpic" :src="detailData.snapshotUrl" alt="" /> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<div class="linebox">告警内容:{{ detailData.alarmTypeDesc }}</div> | |||
<div class="linebox">所属学校:演示学校</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">告警时间:{{ detailData.tick }}</div> | |||
<div class="linebox">班级:{{ detailData.personSetName ? detailData.personSetName : "暂无数据" }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">姓名:{{ detailData.personName ? detailData.personName : "暂无数据" }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">告警摄像头:{{ detailData.cameraName }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">告警位置:{{ detailData.cameraName }}</div> | |||
<div class="linebox">告警类型:{{ detailData.alarmTypeDesc }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">所属门店:演示设备</div> | |||
<div class="linebox">告警时间:{{ detailData.tick }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">备注信息:{{ detailData.extend }}</div> | |||
<div class="linebox">备注信息:{{ detailData.extend ? detailData.extend : "暂无数据" }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox"> | |||
@@ -165,12 +172,20 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||
return "演示学校"; | |||
} | |||
}, | |||
{ | |||
prop: "cameraId", | |||
label: "所属摄像头", | |||
render: () => { | |||
return "楼道"; | |||
} | |||
prop: "personSetName", | |||
label: "班级", | |||
// render: () => { | |||
// return "楼道"; | |||
// } | |||
}, | |||
{ | |||
prop: "cameraName", | |||
label: "告警摄像头", | |||
// render: () => { | |||
// return "楼道"; | |||
// } | |||
}, | |||
{ | |||
prop: "snapshotUrl", | |||
@@ -181,6 +196,14 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||
); | |||
} | |||
}, | |||
{ | |||
prop: "personName", | |||
label: "姓名", | |||
// render: () => { | |||
// return "楼道"; | |||
// } | |||
}, | |||
{ | |||
prop: "alarmType", | |||
label: "告警类型", | |||