@@ -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> | |||
</template> | |||
</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> | |||
</template> | |||
@@ -109,6 +115,16 @@ import { useHandleData } from "@/hooks/useHandleData"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import { useDictStore } from "@/stores/modules"; | |||
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); //是否显示表单 | |||
onMounted(() => { | |||
getWarnTypeList(); | |||
@@ -161,13 +177,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||
label: "告警快照", | |||
render: scope => { | |||
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=''/> | |||
); | |||
} | |||
}, | |||