@@ -21,3 +21,10 @@ const assemblySize = computed(() => globalStore.assemblySize); | |||
// element button config | |||
const buttonConfig = reactive({ autoInsertSpace: false }); | |||
</script> | |||
<style> | |||
.el-button:focus:not(:hover) { | |||
color: var(--el-button-text-color); | |||
background-color: var(--el-button-bg-color); | |||
border-color: var(--el-button-border-color); | |||
} | |||
</style> |
@@ -107,10 +107,6 @@ const refresh = (fn = () => {}, time = 5000) => { | |||
}; | |||
// 性别 | |||
const genderOptions = ref([ | |||
{ | |||
label: "未知", | |||
value: "GENDER_UNKNOWN" | |||
}, | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
@@ -96,7 +96,7 @@ const columns: ColumnProps<SysUserPersonnel.ClassPage>[] = [ | |||
el: "select", | |||
span:1, | |||
props: { | |||
clearable: false, | |||
clearable: true, | |||
placeholder: "请选择专业", | |||
}, | |||
}, | |||
@@ -105,7 +105,9 @@ const columns: ColumnProps<SysUserPersonnel.ClassPage>[] = [ | |||
{ | |||
prop: "personSetName", | |||
label: "班级名称", | |||
search: { el: "input",span:1, } | |||
search: { el: "input",span:1,props: { | |||
clearable: true, | |||
}, }, | |||
}, | |||
{ | |||
@@ -23,7 +23,7 @@ | |||
</s-form-item> | |||
</el-col> | |||
<el-col :span="22"> | |||
<s-form-item label="性别" prop="gender"> | |||
<s-form-item label="宿舍类型" prop="gender"> | |||
<s-radio-group v-model="sysDormitoryProps.record.gender" :options="genderOptions" /> | |||
</s-form-item> | |||
</el-col> | |||
@@ -71,11 +71,11 @@ const visibleDormitory = ref(false); //是否显示表单 | |||
const creamaData = ref<any>([]); | |||
const genderOptions = [ | |||
{ | |||
label: "男", | |||
label: "男生宿舍", | |||
value: true | |||
}, | |||
{ | |||
label: "女", | |||
label: "女生宿舍", | |||
value: false | |||
} | |||
]; | |||
@@ -88,7 +88,7 @@ const sysDormitoryProps = reactive<FormProps.Base<SysDormitory.DormitoryInfo>>({ | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
name: [required("请输入宿舍楼名称")], | |||
gender: [required("请选择性别")], | |||
gender: [required("请选择宿舍类型")], | |||
insCameraId: [required("请选择进楼摄像头")], | |||
outCameraId: [required("请选择出楼摄像头")] | |||
}); | |||
@@ -30,6 +30,11 @@ | |||
}" | |||
> | |||
<el-icon><Plus /></el-icon> | |||
<template #tip> | |||
<div class="el-upload__tip" style="color: #909399"> | |||
请上传不超过5张的清晰人脸照片,以便应用能准确识别 .支持*JPEG、PNG格式,单张照片不超过5M | |||
</div> | |||
</template> | |||
</el-upload> | |||
<el-dialog v-model="dialogVisible" title="查看图片"> | |||
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | |||
@@ -116,10 +121,6 @@ const handleAvatarError: UploadProps["onError"] = (error, uploadFile, uploadFile | |||
}; | |||
// 通用状态选项 | |||
const genderOptions = ref([ | |||
{ | |||
label: "未知", | |||
value: "GENDER_UNKNOWN" | |||
}, | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
@@ -33,7 +33,7 @@ import { FormOptEnum } from "@/enums"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
import Basic from "./form_basic.vue"; | |||
import { checkPhoneNumber } from "@/utils/eleValidate"; | |||
const visible = ref(false); //是否显示表单 | |||
const activeName = ref("basic"); | |||
// 表单参数 | |||
@@ -48,7 +48,10 @@ const rules = reactive({ | |||
name: [required("请输入姓名")], | |||
gender: [required("请选择性别")], | |||
faces: [required("请上传人脸图片")], | |||
phone: [required("请输入手机号")] | |||
phone: [ | |||
{ required: true, message: "请输入手机号", trigger: "blur" }, | |||
{ validator: checkPhoneNumber, trigger: "blur" } | |||
] | |||
}); | |||
/** | |||
@@ -24,30 +24,6 @@ | |||
<el-space> | |||
<s-button link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | |||
<s-button 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-menu> | |||
</template> | |||
</el-dropdown> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
@@ -67,18 +43,12 @@ import { userManageKeyPersonApi,SysUserPersonnel } from "@/api"; | |||
import { useHandleData } from "@/hooks/useHandleData"; | |||
import { FormOptEnum } from "@/enums"; | |||
import Form from "./components/form/index.vue"; | |||
import { ArrowDown } from "@element-plus/icons-vue"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import { ElMessage } from "element-plus"; | |||
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 userStore = useUserStore(); | |||
const { accessToken } = userStore; | |||
// 表格配置项 | |||
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
{ type: "selection", fixed: "left", width: 50 }, | |||
@@ -96,8 +66,21 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
label: "姓名" | |||
}, | |||
{ | |||
prop: "personId", | |||
label: "人员ID" | |||
prop: "gender", | |||
label: "性别", | |||
enum: [ | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
}, | |||
{ | |||
label: "女", | |||
value: "GENDER_FEMALE" | |||
}], | |||
}, | |||
{ | |||
prop: "phone", | |||
label: "手机号" | |||
}, | |||
{ | |||
prop: "age", | |||
@@ -151,54 +134,6 @@ function onOpen(opt: FormOptEnum, record: {} | SysUserPersonnel.SysUserPerInfo = | |||
const RefreshTable = () => { | |||
proTable.value?.refresh(); | |||
} | |||
/** 更多下拉菜单命令枚举 */ | |||
enum cmdEnum { | |||
AddFace = "添加人脸", | |||
} | |||
/** 下拉菜单参数接口 */ | |||
interface Command { | |||
row: SysUserPersonnel.SysUserPerInfo; | |||
command: cmdEnum; | |||
} | |||
/**配置command的参数 */ | |||
function command(row: SysUserPersonnel.SysUserPerInfo, 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 | |||
} | |||
} | |||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => { | |||
if (response.code === 200) { | |||
userManageKeyPersonApi.addFace({ | |||
personId: personId.value, | |||
faceUrl: response.data | |||
}).then(res=>{ | |||
RefreshTable() | |||
}) | |||
} else { | |||
ElMessage.error(response.msg); | |||
} | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.table-box { | |||
@@ -26,7 +26,13 @@ | |||
</el-col> | |||
<el-col :span="12"> | |||
<s-form-item label="所属班级" prop="personSetId"> | |||
<s-select v-model="userInfo.personSetId" :options="classOptions" label="personSetName" value="personSetId"></s-select> </s-form-item | |||
<s-select | |||
v-model="userInfo.personSetId" | |||
:filterable="true" | |||
:options="classOptions" | |||
label="personSetName" | |||
value="personSetId" | |||
></s-select> </s-form-item | |||
></el-col> | |||
</el-row> | |||
<el-row :gutter="16"> | |||
@@ -46,6 +52,11 @@ | |||
}" | |||
> | |||
<el-icon><Plus /></el-icon> | |||
<template #tip> | |||
<div class="el-upload__tip" style="color: #909399"> | |||
请上传不超过5张的清晰人脸照片,以便应用能准确识别 .支持*JPEG、PNG格式,单张照片不超过5M | |||
</div> | |||
</template> | |||
</el-upload> | |||
<el-dialog v-model="dialogVisible" title="查看图片"> | |||
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | |||
@@ -136,10 +147,6 @@ const handleAvatarError: UploadProps["onError"] = (error, uploadFile, uploadFile | |||
}; | |||
// 通用状态选项 | |||
const genderOptions = ref([ | |||
{ | |||
label: "未知", | |||
value: "GENDER_UNKNOWN" | |||
}, | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
@@ -154,8 +161,8 @@ onMounted(async () => { | |||
// 初始化 | |||
userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value; | |||
if (userInfo.value.personId) { | |||
majorOptions.value = await getMajorList(userInfo.value.depId); | |||
classOptions.value = await getClassList(userInfo.value.majorId); | |||
majorOptions.value = await getMajorList(userInfo.value.depId ? userInfo.value.depId : ""); | |||
classOptions.value = await getClassList(userInfo.value.majorId ? userInfo.value.majorId : ""); | |||
if (userInfo.value.faces?.length > 0) { | |||
fileList.value = [ | |||
...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => { | |||
@@ -33,9 +33,10 @@ import { FormOptEnum } from "@/enums"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
import Basic from "./form_basic.vue"; | |||
import { checkPhoneNumber } from "@/utils/eleValidate"; | |||
const visible = ref(false); //是否显示表单 | |||
const activeName = ref("basic"); | |||
const sysUserFormRef = ref<FormInstance>(); | |||
// 表单参数 | |||
const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.SysUserPerInfo>>({ | |||
opt: FormOptEnum.ADD, | |||
@@ -48,7 +49,10 @@ const rules = reactive({ | |||
name: [required("请输入姓名")], | |||
gender: [required("请选择性别")], | |||
faces: [required("请上传人脸图片")], | |||
phone: [required("请输入手机号")], | |||
phone: [ | |||
{ required: true, message: "请输入手机号", trigger: "blur" }, | |||
{ validator: checkPhoneNumber, trigger: "blur" } | |||
], | |||
// depId: [required("请选择系部")], | |||
// majorId: [required("请选择专业")], | |||
personSetId: [required("请选择班级")] | |||
@@ -70,13 +74,11 @@ function onOpen(props: FormProps.Base<SysUserPersonnel.SysUserPerInfo>) { | |||
userManagePersonnelApi.detail({ id: props.record.personId }).then((res: any) => { | |||
if (!res.data.majorId) res.data.majorId = ""; | |||
if (!res.data.depId) res.data.depId = ""; | |||
if (!res.data.age) res.data.age = ""; | |||
sysUserProps.record = res.data; | |||
}); | |||
} | |||
} | |||
// 提交数据(新增/编辑) | |||
const sysUserFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
sysUserFormRef.value?.validate(async valid => { | |||
@@ -25,33 +25,9 @@ | |||
<el-space> | |||
<s-button v-auth="userPerButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | |||
<s-button v-auth="userPerButtonCode.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 v-if="scope.row.personSetId" :command="command(scope.row, cmdEnum.UnderpantsUnBinding)"> | |||
{{ cmdEnum.UnderpantsUnBinding }} | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</template> | |||
</el-dropdown> | |||
<el-button v-if="scope.row.personSetId" type="primary" :icon="Remove" link @click="onUnbind(scope.row)"> | |||
{{ cmdEnum.UnderpantsUnBinding }} | |||
</el-button> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
@@ -68,73 +44,38 @@ | |||
</template> | |||
<script setup lang="tsx" name="SysUserPersonnel"> | |||
import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel } from "@/api"; | |||
import { getMajorList, getDepartmentList, getClassList } from "@/mixin"; | |||
import { getClassList } from "@/mixin"; | |||
import { useHandleData } from "@/hooks/useHandleData"; | |||
import { FormOptEnum } from "@/enums"; | |||
import Form from "./components/form/index.vue"; | |||
import { ArrowDown } from "@element-plus/icons-vue"; | |||
import { Remove } from "@element-plus/icons-vue"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
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 userStore = useUserStore(); | |||
const { accessToken } = userStore; | |||
const departmentOptions = ref<any>([]) | |||
const majorOptions = ref<any>([]) | |||
const classOptions = ref<any>([]) | |||
//监听depId/majorId变化 | |||
watch( | |||
() => [proTable.value!?.searchParam?.depId,proTable.value!?.searchParam?.majorId], | |||
async ([newDepId,newMajorId],[oldDepId,oldMajorId]) => { | |||
if(newDepId !== oldDepId){ | |||
majorOptions.value =await getMajorList(newDepId) | |||
classOptions.value = []; | |||
proTable.value!.searchParam.majorId = ""; | |||
proTable.value!.searchParam.personSetId = "" | |||
} | |||
if(newMajorId !== oldMajorId){ | |||
classOptions.value = await getClassList(newMajorId) | |||
} | |||
} ,{ deep: true, immediate: false } | |||
); | |||
// 表格配置项 | |||
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
{ type: "selection", fixed: "left", width: 50 }, | |||
{ | |||
prop: "depId", | |||
label: "所属系部", | |||
enum: departmentOptions, | |||
fieldNames: { label: "name", value: "id" }, | |||
search: { | |||
el: "select", | |||
span:1, | |||
props: { | |||
clearable: false, | |||
placeholder: "请选择系部", | |||
}, | |||
}, | |||
isShow: false | |||
prop: "faceUrl", | |||
label: "人脸", | |||
render: scope => { | |||
return ( | |||
<img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/> | |||
); | |||
} | |||
}, | |||
{ | |||
prop: "majorId", | |||
label: "所属专业", | |||
enum: majorOptions, | |||
fieldNames: { label: "name", value: "id" }, | |||
search: { | |||
el: "select", | |||
span:1, | |||
props: { | |||
clearable: false, | |||
placeholder: "请选择专业", | |||
}, | |||
}, | |||
isShow: false | |||
prop: "name", | |||
label: "姓名", | |||
search: {el:'input',span:1,} | |||
}, | |||
{ | |||
prop: "personSetName", | |||
label: "所属班级", | |||
}, | |||
{ | |||
prop: "personSetId", | |||
@@ -145,36 +86,37 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
el: "select", | |||
span:1, | |||
props: { | |||
clearable: false, | |||
filterable: true, | |||
clearable: true, | |||
placeholder: "请选择所属班级", | |||
}, | |||
}, | |||
isShow: false | |||
}, | |||
{ | |||
prop: "faceUrl", | |||
label: "人脸", | |||
render: scope => { | |||
return ( | |||
<img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/> | |||
); | |||
} | |||
}, | |||
{ | |||
prop: "name", | |||
label: "姓名" | |||
}, | |||
{ | |||
prop: "personId", | |||
label: "人员ID" | |||
prop: "gender", | |||
label: "性别", | |||
enum: [ | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
}, | |||
{ | |||
label: "女", | |||
value: "GENDER_FEMALE" | |||
}], | |||
}, | |||
{ | |||
prop: "phone", | |||
label: "手机号" | |||
label: "手机号", | |||
search: {el:'input',span:1,} | |||
}, | |||
{ | |||
prop: "personSetName", | |||
label: "所属班级", | |||
prop: "age", | |||
label: "年龄", | |||
render: scope => { | |||
return scope.row.age ? scope.row.age : '--'; | |||
} | |||
}, | |||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
]; | |||
@@ -219,6 +161,7 @@ function onOpen(opt: FormOptEnum, record: {} | SysUserPersonnel.SysUserPerInfo = | |||
// 刷新表格 | |||
const RefreshTable = () => { | |||
proTable.value!.pageable.pageNum = 1; | |||
proTable.value?.refresh(); | |||
// treeFilter.value?.refresh(); //刷新树形筛选器 | |||
} | |||
@@ -226,61 +169,18 @@ const RefreshTable = () => { | |||
/** 更多下拉菜单命令枚举 */ | |||
enum cmdEnum { | |||
AddFace = "添加人脸", | |||
UnderpantsUnBinding = "班级解绑" | |||
} | |||
/** 下拉菜单参数接口 */ | |||
interface Command { | |||
row: SysUserPersonnel.SysUserPerInfo; | |||
command: cmdEnum; | |||
} | |||
/**配置command的参数 */ | |||
function command(row: SysUserPersonnel.SysUserPerInfo, 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.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=>{ | |||
const onUnbind = (row: SysUserPersonnel.SysUserPerInfo) => { | |||
userManagePersonnelApi.personUnBindDfie({ | |||
personId:row.personId, | |||
personSetId: row.personSetId | |||
}).then(res=>{ | |||
ElMessage.success('班级解绑成功'); | |||
RefreshTable() | |||
}) | |||
} else { | |||
ElMessage.error(response.msg); | |||
} | |||
}; | |||
}) | |||
} | |||
onMounted(async () => { | |||
// 获取系部下拉数据 | |||
departmentOptions.value = await getDepartmentList() | |||
// 获取班级 | |||
classOptions.value = await getClassList(""); | |||
}); | |||
@@ -270,7 +270,6 @@ const state: any = reactive({ | |||
oneCard: {} //一卡通消费情况 | |||
}); | |||
const genderOptions = ref<any>({ | |||
GENDER_UNKNOWN: "未知", | |||
GENDER_MALE: "男", | |||
GENDER_FEMALE: "女" | |||
}); | |||
@@ -86,9 +86,6 @@ | |||
<div class="linebox">预警时间:{{ detailData.tick }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">备注信息:{{ detailData.extend ? detailData.extend : "暂无数据" }}</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox"> | |||
复核视频: | |||
@@ -102,6 +99,12 @@ | |||
<!-- {{ detailData.videoUrl }} --> | |||
</div> | |||
</el-col> | |||
<el-col :span="12"> | |||
<div class="linebox">处理时间:{{ detailData.handTime ? detailData.handTime : "暂无数据" }}</div> | |||
</el-col> | |||
<el-col :span="24"> | |||
<div class="linebox">备注信息:{{ detailData.extend ? detailData.extend : "暂无数据" }}</div> | |||
</el-col> | |||
<el-col :span="24"> | |||
<div class="linebox"> | |||
处理意见: | |||
@@ -154,7 +157,7 @@ | |||
<script setup lang="tsx" name="sysSpa"> | |||
import VideoPlay from "@/components/VideoPlay/videoplay.vue"; | |||
import { warnZJRQApi } from "@/api"; | |||
import { warnZJRQApi, monitorLIVEApi } from "@/api"; | |||
import { ZJRQ } from "@/api/interface"; | |||
import { useHandleData } from "@/hooks/useHandleData"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
@@ -174,6 +177,7 @@ const previewhandleClose = () => { | |||
const visible = ref(false); //是否显示表单 | |||
onMounted(() => { | |||
getWarnTypeList(); | |||
getCreamaList() | |||
}); | |||
const formRefH = ref<InstanceType<typeof handleForm> | null>(null); | |||
function toHandle(opt: FormOptEnum, record: {} | ZJRQ.WarnInfo= {}) { | |||
@@ -199,6 +203,17 @@ function getWarnTypeList() { | |||
}) | |||
} | |||
const creamaData = ref<any>([]); | |||
const getCreamaList = () => { | |||
monitorLIVEApi.list({ pageNum: 1, pageSize: 1000 }).then(res => { | |||
creamaData.value = res.data.list.map((item:any) => { | |||
return { | |||
label: item.sensorName, | |||
value: item.sensorId | |||
}; | |||
}); | |||
}); | |||
}; | |||
// 自定义渲染表头(使用tsx语法) | |||
const headerRender = (scope: any) => { | |||
return ( | |||
@@ -232,8 +247,13 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||
// } | |||
}, | |||
{ | |||
prop: "cameraName", | |||
prop: "cameraId", | |||
label: "预警摄像头", | |||
enum: creamaData, | |||
search: { | |||
el: "tree-select", | |||
span: 1 | |||
} | |||
// render: () => { | |||
// return "楼道"; | |||
// } | |||
@@ -305,7 +325,6 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
]; | |||
const getTableList = (params: any) => { | |||
let newParams = JSON.parse(JSON.stringify(params)); | |||
newParams.tick && (newParams.StartTick = newParams.tick[0]); | |||
@@ -55,6 +55,19 @@ | |||
</view> | |||
</u-col> | |||
</u-row> | |||
<u-row style="margin-top:10px;" justify="space-between" gutter="10"> | |||
<u-col span="12"> | |||
<view class="demo-layout" @click="toOpenmanjor"> | |||
<view class="left-layout"> | |||
<text>{{searchForm.$cameraId || '预警摄像头'}}</text> | |||
</view> | |||
<view class="right-layout"> | |||
<image style="width: 30rpx;height:30rpx;" | |||
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> | |||
</view> | |||
</view> | |||
</u-col> | |||
</u-row> | |||
<u-row style="margin-top:10px;" justify="space-between" gutter="10"> | |||
<u-col span="12"> | |||
<uni-datetime-picker v-model="searchForm.tick" type="datetimerange"> | |||
@@ -88,7 +101,8 @@ | |||
</view> | |||
<view class="tableBox"> | |||
<u-empty marginTop="100rpx" :show="warnList.length == 0&&status == 'nomore'" mode="list" text="暂无数据"></u-empty> | |||
<u-empty marginTop="100rpx" :show="warnList.length == 0&&status == 'nomore'" mode="list" | |||
text="暂无数据"></u-empty> | |||
<!-- <u-pull-refresh :refreshing="refreshing" @refresh="onRefresh"> --> | |||
<!-- <scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true" | |||
@refresher-pull="onRefresh" @refresher-refresh="doRefresh" @refresher-restore="restore" | |||
@@ -172,9 +186,12 @@ | |||
<!-- </scroll-view> --> | |||
<!-- </u-pull-refresh> --> | |||
</view> | |||
<selectSearch ref="selectSearchBox" :cellVisible="false" | |||
v-model="searchForm.alarmType" :options="warnOption" :title.sync="searchForm.$alarmType" | |||
placeholder="预警类型" search-placeholder="预警类型" /> | |||
<selectSearch ref="selectSearchBox" :cellVisible="false" v-model="searchForm.alarmType" | |||
:options="warnOption" :title.sync="searchForm.$alarmType" placeholder="预警类型" | |||
search-placeholder="预警类型" /> | |||
<selectSearch ref="selectmanjorBox" :cellVisible="false" v-model="searchForm.cameraId" | |||
:options="[{value:'',label:'全部'},...allOptions.monitorList]" :title.sync="searchForm.$cameraId" placeholder="预警摄像头" | |||
search-placeholder="预警摄像头" /> | |||
<selectRadio ref="selectRadioBox" :cellVisible="false" v-model="searchForm.warnHand" | |||
:options="handOption" :title.sync="searchForm.$warnHand" placeholder="处理状态" /> | |||
</view> | |||
@@ -204,18 +221,19 @@ | |||
$alarmType: '全部', | |||
warnHand: '', | |||
$warnHand: '', | |||
cameraId: '', | |||
$cameraId: '', | |||
tick: [], | |||
StartTick: '', | |||
EndTick: '', | |||
pageNum: 1, | |||
pageSize: 10 | |||
}, | |||
warnOption: [ | |||
{ | |||
label: '全部', | |||
value: '' | |||
} | |||
], | |||
warnOption: [{ | |||
label: '全部', | |||
value: '' | |||
}], | |||
creamaData: [], | |||
handOption: [{ | |||
label: '已处理', | |||
value: 1 | |||
@@ -275,6 +293,8 @@ | |||
$alarmType: '全部', | |||
warnHand: '', | |||
$warnHand: '', | |||
cameraId: '', | |||
$cameraId: '', | |||
tick: [], | |||
StartTick: '', | |||
EndTick: '', | |||
@@ -286,7 +306,7 @@ | |||
onsubmit() { | |||
let arr = [] | |||
for (let key in this.searchForm) { | |||
if (['$alarmType', '$warnHand', 'StartTick', 'EndTick'].includes(key)) { | |||
if (['$alarmType','$cameraId', '$warnHand', 'StartTick', 'EndTick'].includes(key)) { | |||
if (Object.hasOwnProperty.call(this.searchForm, key) && this.searchForm[key]) { | |||
arr.push(this.searchForm[key]) | |||
} | |||
@@ -314,7 +334,7 @@ | |||
value: item.code | |||
}; | |||
}) | |||
this.warnOption = [...this.warnOption,...arr] | |||
this.warnOption = [...this.warnOption, ...arr] | |||
// this.warnOption.unshift({ | |||
// label: '全部', | |||
// value: '' | |||
@@ -324,6 +344,8 @@ | |||
}, | |||
// 获取摄像头 | |||
// creamaData | |||
// 跳转详情页面 | |||
toDetail(row) { | |||
uni.navigateTo({ | |||
@@ -334,6 +356,10 @@ | |||
toOpen() { | |||
this.$refs.selectSearchBox.show = true; | |||
}, | |||
// 预警摄像头弹框筛选 | |||
toOpenmanjor() { | |||
this.$refs.selectmanjorBox.show = true; | |||
}, | |||
// 处理情况筛选 | |||
toOpenSelect() { | |||
this.$refs.selectRadioBox.show = true; | |||