@@ -0,0 +1,175 @@ | |||||
<!-- | |||||
* @Description: 告警管理 | |||||
* @Author: huguodong | |||||
* @Date: 2023-12-15 15:44:05 | |||||
!--> | |||||
<template> | |||||
<div class="table-box"> | |||||
<ProTable ref="proTable" title="告警列表" :columns="columns" :data="tableData"> | |||||
<!-- 表格 header 按钮 --> | |||||
<!-- 表格 菜单类型 按钮 --> | |||||
<!-- 状态 --> | |||||
<template #status="scope"> | |||||
<el-tag v-if="scope.row.status === 1" type="success">已部署</el-tag> | |||||
<el-tag v-else type="danger">未部署</el-tag> | |||||
</template> | |||||
<template #menuType="scope"> | |||||
<el-space wrap> | |||||
<el-tag v-if="scope.row.menuType === MenuTypeDictEnum.MENU" type="success">{{ | |||||
dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.MENU) | |||||
}}</el-tag> | |||||
<el-tag v-else-if="scope.row.menuType === MenuTypeDictEnum.LINK" type="warning">{{ | |||||
dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.LINK) | |||||
}}</el-tag> | |||||
<el-tag v-else type="info">{{ dictStore.dictTranslation(SysDictEnum.MENU_TYPE, scope.row.menuType) }}</el-tag> | |||||
<el-tag v-if="scope.row.isHome === true" type="danger">首页</el-tag> | |||||
</el-space> | |||||
</template> | |||||
</ProTable> | |||||
</div> | |||||
</template> | |||||
<script setup lang="tsx" name="sysSpa"> | |||||
import { warnZJRQApi } from "@/api"; | |||||
import { ZJRQ } from "@/api/interface"; | |||||
import { useHandleData } from "@/hooks/useHandleData"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||||
import { useDictStore } from "@/stores/modules"; | |||||
import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums"; | |||||
import { dividerDark } from "naive-ui"; | |||||
const visible = ref(false); //是否显示表单 | |||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||||
const proTable = ref<ProTableInstance>(); | |||||
const dictStore = useDictStore(); | |||||
// 表格配置项 | |||||
const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||||
{ | |||||
prop: "name", | |||||
label: "模型名称", | |||||
// render: () => { | |||||
// return "演示学校"; | |||||
// } | |||||
}, | |||||
{ | |||||
prop: "type", | |||||
label: "模型类型", | |||||
// render: () => { | |||||
// return "楼道"; | |||||
// } | |||||
}, | |||||
{ | |||||
prop: "core", | |||||
label: "分数", | |||||
}, | |||||
{ | |||||
prop: "time", | |||||
label: "训练时间", | |||||
}, | |||||
{ | |||||
prop: "status", | |||||
label: "部署状态", | |||||
}, | |||||
{ | |||||
prop: "isshow", | |||||
label: "训练模型开关", | |||||
render: scope => { | |||||
return ( | |||||
<el-switch | |||||
v-model={scope.row.isshow} | |||||
onChange={() => { | |||||
switchChange(scope.row) | |||||
}} | |||||
/> | |||||
); | |||||
} | |||||
}, | |||||
{ | |||||
prop: "ishandle", | |||||
label: "实训业务开关", | |||||
render: scope => { | |||||
return ( | |||||
<el-switch | |||||
v-model={scope.row.ishandle} | |||||
onChange={() => { | |||||
switchChange(scope.row) | |||||
}} | |||||
/> | |||||
); | |||||
} | |||||
}, | |||||
]; | |||||
function switchChange(row: object) { | |||||
console.log(row) | |||||
RefreshTable(); | |||||
} | |||||
const tableData = ref([ | |||||
{ | |||||
name: '无人机巡检算法', | |||||
type: "物体分类", | |||||
core: "95", | |||||
time: "2024-02-10 15:00:25", | |||||
status: 1, | |||||
isshow: true, | |||||
ishandle: true | |||||
}, | |||||
{ | |||||
name: '越界检测', | |||||
type: "物体分类", | |||||
core: "89", | |||||
time: "2024-03-10 16:00:25", | |||||
status: 1, | |||||
isshow: true, | |||||
ishandle: false | |||||
}, | |||||
{ | |||||
name: '口罩识别', | |||||
type: "物体分类", | |||||
core: "80", | |||||
time: "2024-05-26 15:10:00", | |||||
status: 1, | |||||
isshow: true, | |||||
ishandle: true | |||||
}, | |||||
{ | |||||
name: '监控室脱岗检测', | |||||
type: "边界检测", | |||||
core: "80", | |||||
time: "2024-08-10 16:20:25", | |||||
status: 0, | |||||
isshow: true, | |||||
ishandle: true | |||||
}, | |||||
{ | |||||
name: '反光衣识别', | |||||
type: "物体分类", | |||||
core: "70", | |||||
time: "2024-06-02 18:00:25", | |||||
status: 1, | |||||
isshow: true, | |||||
ishandle: true | |||||
}, | |||||
]); | |||||
/** | |||||
* 刷新表格 | |||||
*/ | |||||
function RefreshTable() { | |||||
proTable.value?.refresh(); | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.detailpic { | |||||
width: 800px; | |||||
object-fit: cover; | |||||
} | |||||
.linebox { | |||||
margin-top: 20px; | |||||
} | |||||
</style> | |||||
@@ -0,0 +1,128 @@ | |||||
<!-- | |||||
* @Description: 推送配置 | |||||
* @Author: 王文沛 | |||||
* @Date: 2023-12-15 15:44:05 | |||||
!--> | |||||
<template> | |||||
<div class="card content-main"> | |||||
<el-form | |||||
ref="ruleFormRef" | |||||
style="max-width: 600px" | |||||
:model="ruleForm" | |||||
:rules="rules" | |||||
label-width="auto" | |||||
class="demo-ruleForm" | |||||
:size="formSize" | |||||
status-icon | |||||
> | |||||
<s-form-item label="推送设置:" prop="resource"> | |||||
<s-radio-group v-model="ruleForm.resource" :options="pushOptions" /> | |||||
</s-form-item> | |||||
<div class="ruleTitle">推送规则</div> | |||||
<div class="ruleContent"> | |||||
<span>当日预警每达到</span> | |||||
<el-input-number v-model="ruleForm.num" class="mx-4" :min="1" controls-position="right" @change="handleChange" /> | |||||
<span>条时进行推送</span> | |||||
<div class="tips">当日预警数据每达到设置的条数后,会进行消息推送。</div> | |||||
</div> | |||||
<el-form-item> | |||||
<el-button type="primary" @click="submitForm(ruleFormRef)"> 保 存 </el-button> | |||||
<!-- <el-button @click="resetForm(ruleFormRef)">取消</el-button> --> | |||||
</el-form-item> | |||||
</el-form> | |||||
</div> | |||||
</template> | |||||
<script setup lang="tsx" name="sysconfigPush"> | |||||
import { reactive, ref } from 'vue' | |||||
import type { ComponentSize, FormInstance, FormRules } from 'element-plus' | |||||
import { ElMessage, ElMessageBox } from 'element-plus' | |||||
interface RuleForm { | |||||
resource: string, | |||||
num: number | |||||
} | |||||
const formSize = ref<ComponentSize>('default') | |||||
const ruleFormRef = ref<FormInstance>() | |||||
const ruleForm = reactive<RuleForm>({ | |||||
resource: '0', | |||||
num: 1 | |||||
}) | |||||
const pushOptions = [{ | |||||
label: '开启', | |||||
value: '1', | |||||
},{ | |||||
label: '关闭', | |||||
value: '0', | |||||
}] | |||||
const rules = reactive<FormRules<RuleForm>>({ | |||||
resource: [ | |||||
{ | |||||
required: true, | |||||
message: '请选择推送设置', | |||||
trigger: 'change', | |||||
}, | |||||
], | |||||
}) | |||||
const handleChange = (value: number) => { | |||||
console.log(value) | |||||
} | |||||
function isPositiveInteger(value:any) { | |||||
return /^[1-9]\d*$/.test(value); | |||||
} | |||||
const submitForm = async (formEl: FormInstance | undefined) => { | |||||
if (!formEl) return | |||||
await formEl.validate((valid, fields) => { | |||||
if (valid) { | |||||
if(!isPositiveInteger(ruleForm.num)) { | |||||
ElMessage({ | |||||
message: '推送规则条数必须是大于零的整数', | |||||
type: 'warning', | |||||
}) | |||||
return | |||||
} | |||||
ElMessage({ | |||||
message: '操作成功', | |||||
type: 'success', | |||||
}) | |||||
console.log('submit!') | |||||
} else { | |||||
console.log('error submit!', fields) | |||||
} | |||||
}) | |||||
} | |||||
const resetForm = (formEl: FormInstance | undefined) => { | |||||
if (!formEl) return | |||||
formEl.resetFields() | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.content-main { | |||||
height: 100%; | |||||
.ruleTitle { | |||||
font-size: 14px; | |||||
font-weight: 600; | |||||
margin: 30px 0 20px 0; | |||||
} | |||||
.ruleContent { | |||||
font-size: 14px; | |||||
color: #666666; | |||||
margin: 20px 0; | |||||
.tips { | |||||
font-size: 14px; | |||||
color: red; | |||||
margin-top: 10px; | |||||
} | |||||
} | |||||
} | |||||
</style> | |||||
@@ -98,6 +98,12 @@ | |||||
</div> | </div> | ||||
</template> | </template> | ||||
</el-dialog> | </el-dialog> | ||||
<!-- 预览头像 --> | |||||
<el-dialog v-model="preViewvisible" title="查看图片" width="830px" :before-close="previewhandleClose"> | |||||
<div style="display: flex; align-items: center; justify-content: center"> | |||||
<img class="detailpic" :src="faceUrl" alt="" /> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -109,6 +115,16 @@ import { useHandleData } from "@/hooks/useHandleData"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | 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 faceUrl = ref(''); | |||||
const preViewvisible = ref(false); //是否显示人员表单 | |||||
const viewHeadImage = (scope: any) => { | |||||
faceUrl.value = scope.row.snapshotUrl; | |||||
preViewvisible.value = true | |||||
console.log(faceUrl); | |||||
}; | |||||
const previewhandleClose = () => { | |||||
preViewvisible.value = false; | |||||
}; | |||||
const visible = ref(false); //是否显示表单 | const visible = ref(false); //是否显示表单 | ||||
onMounted(() => { | onMounted(() => { | ||||
getWarnTypeList(); | getWarnTypeList(); | ||||
@@ -161,13 +177,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||||
label: "告警快照", | label: "告警快照", | ||||
render: scope => { | render: scope => { | ||||
return ( | return ( | ||||
<img | |||||
src={scope.row.snapshotUrl} | |||||
class="h-6 w-6" | |||||
onClick={() => { | |||||
window.open(scope.row.snapshotUrl, "_blank"); | |||||
}} | |||||
/> | |||||
<img src={scope.row.snapshotUrl ? scope.row.snapshotUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/> | |||||
); | ); | ||||
} | } | ||||
}, | }, | ||||