@@ -38,6 +38,10 @@ const warnZJRQApi = { | |||||
warnGroup(params: ReqId) { | warnGroup(params: ReqId) { | ||||
return http.get("getInfo", params); | return http.get("getInfo", params); | ||||
}, | }, | ||||
/** 获取告警分组 */ | |||||
warnType(params: ReqId) { | |||||
return http.get("getAlarmType", params); | |||||
}, | |||||
}; | }; | ||||
export { warnZJRQApi }; | export { warnZJRQApi }; |
@@ -0,0 +1,106 @@ | |||||
<!-- | |||||
* @Description: 表单 | |||||
* @Author: huguodong | |||||
* @Date: 2023-12-15 15:45:28 | |||||
!--> | |||||
<template> | |||||
<div> | |||||
<form-container v-model="visible" title="选择分组" form-size="600px"> | |||||
<el-form | |||||
ref="liveFormRef" | |||||
:rules="rules" | |||||
:disabled="orgProps.disabled" | |||||
:model="orgProps.record" | |||||
:hide-required-asterisk="orgProps.disabled" | |||||
label-width="auto" | |||||
label-suffix=" :" | |||||
> | |||||
<s-form-item label="所属学校" prop="parentId"> | |||||
<org-selector v-model:org-value="orgProps.record.parentId" :org-tree-api="bizOrgApi.tree" :show-all="false" /> | |||||
</s-form-item> | |||||
</el-form> | |||||
<template #footer> | |||||
<el-button @click="onClose"> 取消 </el-button> | |||||
<el-button v-show="!orgProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||||
</template> | |||||
</form-container> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { SysOrg, SysUser, bizOrgApi, bizPositionApi, sysRoleApi, bizUserApi } from "@/api"; | |||||
import { FormOptEnum, SysDictEnum } from "@/enums"; | |||||
import { required } from "@/utils/formRules"; | |||||
import { FormInstance } from "element-plus"; | |||||
import { useDictStore } from "@/stores/modules"; | |||||
const visible = ref(false); //是否显示表单 | |||||
const dictStore = useDictStore(); //字典仓库 | |||||
// 通用状态选项 | |||||
const statusOptions = dictStore.getDictList(SysDictEnum.COMMON_STATUS); | |||||
// 表单参数 | |||||
const orgProps = reactive<FormProps.Base<SysOrg.SysOrgInfo>>({ | |||||
opt: FormOptEnum.ADD, | |||||
record: {}, | |||||
disabled: false | |||||
}); | |||||
// 表单验证规则 | |||||
const rules = reactive({ | |||||
parentId: [required("请选择所属学校")] | |||||
}); | |||||
/** | |||||
* 打开表单 | |||||
* @param props 表单参数 | |||||
*/ | |||||
function omMove(props: FormProps.Base<SysOrg.SysOrgInfo>) { | |||||
Object.assign(orgProps, props); //合并参数 | |||||
if (props.opt == FormOptEnum.ADD) { | |||||
//如果是新增,设置默认值 | |||||
orgProps.record.sortCode = 99; | |||||
// orgProps.record.status = statusOptions[0].value; | |||||
} | |||||
visible.value = true; //显示表单 | |||||
if (props.record.id) { | |||||
//如果传了id,就去请求api获取record | |||||
bizOrgApi.detail({ id: props.record.id }).then(res => { | |||||
orgProps.record = res.data; | |||||
}); | |||||
} | |||||
} | |||||
// 提交数据(新增/编辑) | |||||
const liveFormRef = ref<FormInstance>(); | |||||
/** 提交表单 */ | |||||
async function handleSubmit() { | |||||
liveFormRef.value?.validate(async valid => { | |||||
if (!valid) return; //表单验证失败 | |||||
console.log(orgProps); | |||||
return; | |||||
//提交表单 | |||||
await bizOrgApi | |||||
.submitForm(orgProps.record, orgProps.record.id != undefined) | |||||
.then(() => { | |||||
orgProps.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
}); | |||||
} | |||||
/** 关闭表单*/ | |||||
function onClose() { | |||||
visible.value = false; | |||||
} | |||||
// 暴露给父组件的方法 | |||||
defineExpose({ | |||||
omMove | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped></style> |
@@ -58,7 +58,7 @@ | |||||
:disabled="!scope.isSelected" | :disabled="!scope.isSelected" | ||||
@click="onDelete(scope.selectedListIds, '删除所选数据')" | @click="onDelete(scope.selectedListIds, '删除所选数据')" | ||||
/> | /> | ||||
<el-button plain @click="move(scope.selectedListIds, '移动至分组')" type="success">移动至分组</el-button> | |||||
<el-button plain @click="omMove(FormOptEnum.ADD)" type="success">移动至分组</el-button> | |||||
</template> | </template> | ||||
<!-- 表格 菜单类型 按钮 --> | <!-- 表格 菜单类型 按钮 --> | ||||
<!-- <template #menuType="scope"> | <!-- <template #menuType="scope"> | ||||
@@ -100,7 +100,8 @@ | |||||
<Form ref="formRef" /> | <Form ref="formRef" /> | ||||
<!-- 人员选择 --> | <!-- 人员选择 --> | ||||
<userForm ref="userFormRef" /> | <userForm ref="userFormRef" /> | ||||
<!-- 移动至分组 --> | |||||
<moveForm ref="moveFormRef" /> | |||||
<!-- 视频详情 --> | <!-- 视频详情 --> | ||||
<el-dialog v-model="visible" :title="detailData.title" width="830px" :before-close="closeGroup"> | <el-dialog v-model="visible" :title="detailData.title" width="830px" :before-close="closeGroup"> | ||||
<div> | <div> | ||||
@@ -139,6 +140,7 @@ | |||||
import { useDictStore } from "@/stores/modules"; | import { useDictStore } from "@/stores/modules"; | ||||
import Form from "./components/form.vue"; | import Form from "./components/form.vue"; | ||||
import userForm from "./components/userForm.vue"; | import userForm from "./components/userForm.vue"; | ||||
import moveForm from "./components/moveForm.vue"; | |||||
import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums"; | import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums"; | ||||
// import './aliyun-rts-sdk.js' | // import './aliyun-rts-sdk.js' | ||||
import './ali.js' | import './ali.js' | ||||
@@ -291,29 +293,13 @@ const remove = (node: Node, data: Tree) => { | |||||
await useHandleData(monitorLIVEApi.delete, { ids }, msg); | await useHandleData(monitorLIVEApi.delete, { ids }, msg); | ||||
RefreshTable(); | RefreshTable(); | ||||
} | } | ||||
async function move(ids: string[], msg: string) { | |||||
return new Promise((resolve, reject) => { | |||||
ElMessageBox.confirm(`是否${msg}?`, "温馨提示", { | |||||
confirmButtonText: "确定", | |||||
cancelButtonText: "取消", | |||||
type: 'warning', | |||||
draggable: true | |||||
}) | |||||
.then(async () => { | |||||
// const res = await api(params); | |||||
// if (!res) return reject(false); | |||||
// ElMessage({ | |||||
// type: "success", | |||||
// message: `${message}成功!` | |||||
// }); | |||||
resolve(true); | |||||
}) | |||||
.catch(() => { | |||||
//啥也不干 | |||||
}); | |||||
}) | |||||
} | |||||
const moveFormRef = ref<InstanceType<typeof Form> | null>(null); | |||||
function omMove(opt: FormOptEnum, record: {} | SysOrg.SysOrgInfo = {}) { | |||||
moveFormRef.value?.omMove({ opt: opt, record: record, successful: RefreshTable }); | |||||
} | |||||
/** | /** | ||||
* 刷新表格 | * 刷新表格 | ||||
*/ | */ | ||||
@@ -110,7 +110,28 @@ import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||||
import { useDictStore } from "@/stores/modules"; | import { useDictStore } from "@/stores/modules"; | ||||
import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums"; | import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums"; | ||||
const visible = ref(false); //是否显示表单 | const visible = ref(false); //是否显示表单 | ||||
onMounted(() => { | |||||
getWarnTypeList(); | |||||
}); | |||||
let warnOptions = ref([]); | |||||
function getWarnTypeList() { | |||||
setTimeout(async ()=> { | |||||
await warnZJRQApi.warnType({}).then(res => { | |||||
let { code, data } = res; | |||||
if (code == 200) { | |||||
warnOptions.value = data.map(item => { | |||||
return { | |||||
label: item.name, | |||||
value: item.code | |||||
}; | |||||
}) | |||||
} | |||||
}); | |||||
}) | |||||
} | |||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | // 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | ||||
const proTable = ref<ProTableInstance>(); | const proTable = ref<ProTableInstance>(); | ||||
const dictStore = useDictStore(); | const dictStore = useDictStore(); | ||||
@@ -118,7 +139,7 @@ const dictStore = useDictStore(); | |||||
// 表格配置项 | // 表格配置项 | ||||
const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | ||||
{ type: "selection", fixed: "left", width: 80 }, | { type: "selection", fixed: "left", width: 80 }, | ||||
{ prop: "searchKey", label: "关键字", search: { el: "input" }, isShow: false }, | |||||
// { prop: "searchKey", label: "关键字", search: { el: "input" }, isShow: false }, | |||||
// { prop: "cameraId", label: "所属摄像头", search: { el: "input" }, isShow: false }, | // { prop: "cameraId", label: "所属摄像头", search: { el: "input" }, isShow: false }, | ||||
// { prop: "alarmTypeDesc", label: "告警类型", search: { el: "input" }, isShow: false }, | // { prop: "alarmTypeDesc", label: "告警类型", search: { el: "input" }, isShow: false }, | ||||
{ | { | ||||
@@ -151,21 +172,75 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||||
} | } | ||||
}, | }, | ||||
{ | { | ||||
prop: "alarmTypeDesc", | |||||
label: "告警类型" | |||||
prop: "alarmType", | |||||
label: "告警类型", | |||||
enum: warnOptions, | |||||
search: { | |||||
el: "tree-select", | |||||
// span: 1 | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
prop: "warnHand", | prop: "warnHand", | ||||
label: "处理状态", | label: "处理状态", | ||||
enum: [ | |||||
{ | |||||
label: "已处理", | |||||
value: 1 | |||||
}, | |||||
{ | |||||
label: "未处理", | |||||
value: 0 | |||||
} | |||||
], | |||||
render: scope => { | render: scope => { | ||||
if (scope.row.warnHand === 1) { | if (scope.row.warnHand === 1) { | ||||
return "已处理"; | return "已处理"; | ||||
} else { | } else { | ||||
return "未处理"; | return "未处理"; | ||||
} | } | ||||
} | |||||
}, | |||||
search: { | |||||
el: "tree-select", | |||||
// span: 1 | |||||
} | |||||
}, | }, | ||||
{ prop: "tick", label: "预警时间" }, | |||||
{ | |||||
prop: "tick", | |||||
label: "预警时间", | |||||
search: { | |||||
// 自定义 search 组件 | |||||
span: 1, | |||||
render: ({ searchParam }) => { | |||||
return ( | |||||
<div class="flex-center"> | |||||
<el-date-picker | |||||
style="150px; flex-shink: 1;" | |||||
v-model={searchParam.StartTick} | |||||
type="datetime" | |||||
placeholder="开始时间" | |||||
format="YYYY-MM-DD HH:mm:ss" | |||||
date-format="YYYY-MM-DD" | |||||
time-format="HH:mm:ss" | |||||
value-format="YYYY-MM-DD HH:mm:ss" | |||||
/> | |||||
<span class="mr10 ml10">-</span> | |||||
<el-date-picker | |||||
style="150px;" | |||||
v-model={searchParam.EndTick} | |||||
type="datetime" | |||||
placeholder="结束时间" | |||||
format="YYYY-MM-DD HH:mm:ss" | |||||
date-format="YYYY-MM-DD" | |||||
time-format="HH:mm:ss" | |||||
value-format="YYYY-MM-DD HH:mm:ss" | |||||
/> | |||||
</div> | |||||
); | |||||
} | |||||
} | |||||
}, | |||||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | { prop: "operation", label: "操作", width: 250, fixed: "right" } | ||||
]; | ]; | ||||