feat：预警信息页面

snowy-admin-web/src/api/coldchain/monitornotice.js

@@ -0,0 +1,36 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/coldchain/monitornotice/` + url, ...arg)
+
+/** 获取监控通知分页 */
+export const getPage = (data) => {
+	return request('page', data, 'get')
+}
+
+/**	获取监控通知详情 */
+export const getDetail = (data) => {
+	return request('detail', data, 'get')
+}
+
+/** 编辑监控通知 */
+export const editMonitornotice = (data) => {
+	return request('edit', data)
+}
+
+/** 删除监控通知 */
+export const deleteMonitornotice = (data) => {
+	return request('delete', data)
+}
+
+/** 添加监控通知 */
+export const addMonitornotice = (data) => {
+	return request('add', data)
+}
+
+export default {
+	getPage,
+	getDetail,
+	editMonitornotice,
+	deleteMonitornotice,
+	addMonitornotice
+}

snowy-admin-web/src/utils/request.js

@@ -136,6 +136,7 @@ service.interceptors.response.use(
 				}
 			})
 		}
+		console.log('返回数据', data)
 		return Promise.resolve(data.data)
 	},
 	(error) => {

snowy-admin-web/src/views/motoring/report/components/DetailModal.vue

@@ -0,0 +1,143 @@
+<template>
+	<xn-form-container
+		:title="formData.id ? '编辑监控通知' : '新增监控通知'"
+		:width="550"
+		:visible="visible"
+		:destroy-on-close="true"
+		@close="onClose"
+	>
+		<a-form ref="formRef" :model="formData" :rules="formRules" layout="Inline" :label-col="labelCol">
+			<a-form-item label="通知标题" name="title">
+				<a-input v-model:value="formData.title" placeholder="请输入通知标题" allow-clear />
+			</a-form-item>
+
+			<a-form-item label="通知类型" name="type">
+				<a-select
+					ref="select"
+					v-model:value="formData.type"
+					placeholder="请选择通知类型"
+					style="width: 100%"
+					allowClear
+				>
+					<a-select-option value="1">系统</a-select-option>
+					<a-select-option value="2">预警</a-select-option>
+				</a-select>
+			</a-form-item>
+			<a-form-item label="通知内容" name="content">
+				<a-textarea v-model:value="formData.content" placeholder="请输入通知内容" :rows="4" allow-clear />
+			</a-form-item>
+			<a-form-item label="监控目标" name="targetId">
+				<a-select
+					ref="select"
+					v-model:value="formData.targetId"
+					placeholder="请选择监控目标"
+					style="width: 100%"
+					allowClear
+				>
+					<a-select-option value="1">1</a-select-option>
+				</a-select>
+			</a-form-item>
+			<a-form-item label="传感器路数" name="sensorRoute">
+				<a-select
+					ref="select"
+					v-model:value="formData.sensorRoute"
+					placeholder="请选择传感器路数"
+					style="width: 100%"
+					allowClear
+				>
+					<a-select-option value="1">1</a-select-option>
+				</a-select>
+			</a-form-item>
+		</a-form>
+		<template #footer>
+			<a-button class="xn-mr8" @click="onClose">退出</a-button>
+			<a-button :loading="loading.submitLoading" type="primary" @click="onSubmit">确定</a-button>
+		</template>
+	</xn-form-container>
+</template>
+
+<script setup>
+	import { message } from 'ant-design-vue'
+
+	import { addMonitornotice, editMonitornotice, getDetail } from '@/api/coldchain/monitornotice'
+
+	import { required } from '@/utils/formRules'
+
+	const emit = defineEmits({ successful: null })
+
+	// 默认是关闭状态
+	const visible = ref(false)
+	const state = ref('')
+	const formRef = ref()
+	const labelCol = { style: { width: '80px' } }
+	// 表单数据
+	const formData = ref({})
+	// 默认要校验的
+	const formRules = {
+		title: [required('请输入通知标题')],
+		type: [required('请输入通知类型')]
+		// content: [required('请输入通知内容')],
+		// targetId: [required('请选择监控目标')],
+		// sensorRoute: [required('请选择传感器路数')]
+	}
+
+	const loading = reactive({
+		submitLoading: false
+	})
+
+	// 打开
+	const open = (record = {}, _state = 'add') => {
+		visible.value = true
+		state.value = _state
+		console.log(_state)
+		console.log(record)
+		if (state.value != 'add') {
+			getDetail({ id: record.id }).then((res) => {
+				formData.value = res
+			})
+		} else {
+			formData.value = { ...record }
+		}
+	}
+	// 关闭
+	const onClose = () => {
+		visible.value = false
+		formRef.value.resetFields()
+	}
+	// 报警时间
+	const onChange = (value, dateString) => {
+		formData.value.bjkssj = dateString
+		console.log('报警时间', dateString)
+	}
+
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				if (state.value == 'add') {
+					// 添加
+					addMonitornotice(formData.value).then((res) => {
+						emit('successful')
+						onClose()
+					})
+				} else if (state.value === 'edit') {
+					// 编辑
+					editMonitornotice(formData.value).then((res) => {
+						emit('successful')
+						onClose()
+					})
+				} else {
+					visible.value = false
+				}
+			})
+			.catch(() => {
+				message.warning('请根据提示填写数据')
+			})
+	}
+
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	defineExpose({
+		open
+	})
+</script>

snowy-admin-web/src/views/motoring/report/initData.js

@@ -0,0 +1,52 @@
+export const initColumns = [
+	{
+		title: '通知标题',
+		dataIndex: 'title',
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '通知类型',
+		dataIndex: 'type',
+		align: 'center',
+		customRender({ value }) {
+			return value == '1' ? '系统' : '预警'
+		}
+	},
+	{
+		title: '通知内容',
+		dataIndex: 'content',
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '监控目标',
+		dataIndex: 'targetName',
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '传感器路数',
+		dataIndex: 'sensorRoute',
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '创建人',
+		dataIndex: 'createUserName',
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '创建时间',
+		dataIndex: 'createTime',
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '操作',
+		dataIndex: 'options',
+		align: 'center',
+		ellipsis: true
+	}
+]

snowy-admin-web/src/views/motoring/report/list.vue

@@ -4,8 +4,9 @@
 			ref="tableRef"
 			:columns="columns"
 			:data="loadData"
-			:row-key="(record) => record.dxbh"
+			:row-key="(record) => record.id"
 			:row-selection="options.rowSelection"
+			:loading="loading"
 		>
 			<template #operator>
 				<!-- 搜索区域 -->
@@ -21,57 +22,45 @@
 								class="ant-advanced-search-form"
 							>
 								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
-									<a-form-item label="报警时间" name="searchKey">
-										<a-range-picker
-											v-model:value="searchFormState.searchKey"
-											value-format="YYYY/MM/DD"
+									<a-form-item label="通知类型" name="type">
+										<a-select
+											v-model:value="searchFormState.type"
+											placeholder="请选择通知类型"
 											style="width: 100%"
-										/>
+											allowClear
+										>
+											<a-select-option value="1">系统</a-select-option>
+											<a-select-option value="2">预警</a-select-option>
+										</a-select>
 									</a-form-item>
 								</a-col>
 								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-									<a-form-item label="报警状态" name="jkdmc">
-										<a-select v-model:value="searchFormState.jkdmc" placeholder="请选择报警状态">
-											<a-select-option value="1">已处理</a-select-option>
-											<a-select-option value="2">未处理</a-select-option>
-											<a-select-option value="3">处理中</a-select-option>
-										</a-select>
-									</a-form-item></a-col
-								>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
-									><a-form-item label="对象编码" name="code">
-										<a-input v-model:value="searchFormState.code" placeholder="请输入对象编码" /> </a-form-item
-								></a-col>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
-									><a-form-item label="对象名称" name="code">
-										<a-input v-model:value="searchFormState.code" placeholder="请输入对象名称" /> </a-form-item
-								></a-col>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
-									><a-form-item label="发生时间" name="syzt">
-										<a-select v-model:value="searchFormState.syzt" placeholder="请选择发生时间">
-											<a-select-option value="1">>10分钟</a-select-option>
-											<a-select-option value="2">>30分钟</a-select-option>
-											<a-select-option value="3">>1小时</a-select-option>
-											<a-select-option value="4">>5小时</a-select-option>
-										</a-select>
-									</a-form-item></a-col
-								>
+									<a-form-item label="关键字" name="searchKey">
+										<a-input v-model:value="searchFormState.searchKey" placeholder="请输入关键字" allowClear />
+									</a-form-item>
+								</a-col>
+								<!-- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+									<a-form-item label="排序字段" name="sortField">
+										<a-input
+											v-model:value="searchFormState.sortField"
+											placeholder="请输入排序字段(驼峰名称。如：userName)"
+											allowClear
+										/>
+									</a-form-item>
+								</a-col>
 								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-									<a-form-item label="报警类型" name="jkdmc">
-										<a-select v-model:value="searchFormState.jkdmc" placeholder="请选择报警类型">
-											<a-select-option value="1">超限报警</a-select-option>
-											<a-select-option value="2">传感器故障</a-select-option>
-											<a-select-option value="3">电池报警</a-select-option>
-											<a-select-option value="4">断线报警</a-select-option>
-											<a-select-option value="5">其他报警</a-select-option>
-											<a-select-option value="6">外部电源断开</a-select-option>
+									<a-form-item label="排序方式" name="sortOrder">
+										<a-select
+											v-model:value="searchFormState.sortOrder"
+											placeholder="请选择排序方式"
+											style="width: 100%"
+											allowClear
+										>
+											<a-select-option value="ASCEND">升序</a-select-option>
+											<a-select-option value="DESCEND">降序</a-select-option>
 										</a-select>
-									</a-form-item></a-col
-								>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
-									><a-form-item label="报警原因" name="bjyy">
-										<a-input v-model:value="searchFormState.bjyy" placeholder="请输入报警原因" /> </a-form-item
-								></a-col>
+									</a-form-item>
+								</a-col> -->
 							</a-form>
 						</a-row>
 					</div>
@@ -83,6 +72,12 @@
 
 				<!-- 其他操作区域 -->
 				<div class="table-head-btn">
+					<div class="btn-left">
+						<a-button type="primary" @click="handleAdd">
+							<template #icon><plus-outlined /></template>新增
+						</a-button>
+					</div>
+
 					<div class="btn-right">
 						<a-button class="xn-mg08" @click="handle">
 							<template #icon><logout-outlined /></template>处理
@@ -101,76 +96,34 @@
 			</template>
 
 			<template #bodyCell="{ column, record }">
-				<template v-if="column.dataIndex === 'clzt'">
-					<span style="cursor: pointer">
-						<a-tag color="#cd201f" v-if="record.clzt == '1'" @click="formRef.onOpen(record)">
-							<template #icon>
-								<form-outlined />
-							</template>
-							{{ record.clztValue }}
-						</a-tag>
-
-						<a-tag v-else-if="record.clzt == '2'" color="#87d068">
-							{{ record.clztValue }}
-						</a-tag>
-					</span>
+				<template v-if="column.dataIndex === 'options'">
+					<a-button type="link" size="small" @click="handlerEdit(record)">编辑</a-button>
+					<a-popconfirm title="确定要删除吗？" @confirm="handlerDel(record)">
+						<a-button type="link" danger size="small">删除</a-button>
+					</a-popconfirm>
 				</template>
 			</template>
-			<template #expandedRowRender="{ record }">
-				<a-tabs v-model:activeKey="record.activeKey" size="small" type="card">
-					<a-tab-pane key="1" tab="处理过程">
-						<div class="list">
-							<a-descriptions title="报警信息" bordered size="small">
-								<a-descriptions-item label="报警时间">{{ record.zjbjsj }}</a-descriptions-item>
-								<a-descriptions-item label="报警类型">{{ record.bjlx }}</a-descriptions-item>
-								<a-descriptions-item label="设备名称">{{ record.sbmc }}</a-descriptions-item>
-							</a-descriptions>
-
-							<a-descriptions title="报警通知" bordered size="small">
-								<a-descriptions-item label="接收人" :span="2">{{ record.jsr }}</a-descriptions-item>
-								<a-descriptions-item label="报警方式" :span="2">{{ record.type }}</a-descriptions-item>
-								<a-descriptions-item label="详情">{{ record.xq }}</a-descriptions-item>
-							</a-descriptions>
-
-							<a-descriptions title="解决过程" bordered size="small">
-								<a-descriptions-item label="响应时间">{{ record.xysj }}</a-descriptions-item>
-								<a-descriptions-item label="处理人">{{ record.clr }}</a-descriptions-item>
-								<a-descriptions-item label="处理时间">{{ record.clsj }}</a-descriptions-item>
-								<a-descriptions-item label="报警原因">{{ record.bjyy }}</a-descriptions-item>
-								<a-descriptions-item label="异常原因">{{ record.ycyy }}</a-descriptions-item>
-								<a-descriptions-item label="处理措施">{{ record.clcs }}</a-descriptions-item>
-							</a-descriptions>
-						</div>
-					</a-tab-pane>
-					<a-tab-pane key="2" tab="监控信息">
-						<div class="list">
-							<a-descriptions title="基本信息" bordered size="small">
-								<a-descriptions-item label="对象名称">{{ record.dxmc }}</a-descriptions-item>
-								<a-descriptions-item label="对象编号">{{ record.dxbh }}</a-descriptions-item>
-								<a-descriptions-item label="购置日期">{{ record.gzrq }}</a-descriptions-item>
-								<a-descriptions-item label="品牌">{{ record.pp }}</a-descriptions-item>
-								<a-descriptions-item label="型号">{{ record.xh }}</a-descriptions-item>
-							</a-descriptions>
-
-							<a-descriptions title="归属信息" bordered size="small">
-								<a-descriptions-item label="所属部门">{{ record.ssbm }}</a-descriptions-item>
-								<a-descriptions-item label="对象编码">{{ record.dxbh }}</a-descriptions-item>
-							</a-descriptions>
-						</div>
-					</a-tab-pane>
-				</a-tabs>
-			</template>
 		</s-table>
 
-		<Form ref="formRef" @successful="tableRef.refresh(true)" />
+		<!-- <Form ref="formRef" @successful="tableRef.refresh(true)" /> -->
+		<DetailModal ref="detailModalRef" @successful="tableRef.refresh(true)" />
 	</div>
 </template>
 
 <script setup>
 	import { message } from 'ant-design-vue'
-	import jobApi from '@/api/dev/jobApi'
-	import Form from './form.vue'
+	import { debounce, cloneDeep } from 'lodash-es'
+
+	import Form from './components/form.vue'
+	import DetailModal from './components/DetailModal.vue'
+
+	import { getPage, deleteMonitornotice } from '@/api/coldchain/monitornotice'
+
+	import { initColumns } from './initData'
+
+	const loading = ref(false)
 	const formRef = ref()
+	const detailModalRef = ref()
 	const searchFormRef = ref()
 	const searchFormState = ref({})
 	const tableRef = ref()
@@ -185,193 +138,47 @@
 		}
 	}
 
-	const columns = [
-		{
-			title: '处理状态',
-			dataIndex: 'clzt',
-			align: 'center',
-			ellipsis: true,
-			width: '10%'
-		},
-		{
-			title: '报警开始时间',
-			dataIndex: 'bjkssj',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '最近报警时间',
-			dataIndex: 'zjbjsj',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '所属部门',
-			dataIndex: 'ssbm',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '对象编码',
-			dataIndex: 'dxbh',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '对象名称',
-			dataIndex: 'dxmc',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '报警类型',
-			dataIndex: 'bjlx',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '报警原因',
-			dataIndex: 'bjyy',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '恢复正常时间',
-			dataIndex: 'hfzcsj',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '响应时间',
-			dataIndex: 'xysj',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '处理时间',
-			dataIndex: 'clsj',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '处理人',
-			dataIndex: 'clr',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '异常原因',
-			dataIndex: 'ycyy',
-			align: 'center',
-			ellipsis: true
-		},
-		{
-			title: '处理措施',
-			dataIndex: 'clcs',
-			align: 'center',
-			ellipsis: true
-		}
-	]
+	const columns = ref(initColumns)
+
 	const tableData = ref([]) // 用来存储表格数据
 	const loadData = (parameter) => {
-		if (searchFormState.value.searchKey) {
-			searchFormState.value.startCreateTime = searchFormState.value.searchKey[0]
-			searchFormState.value.endCreateTime = searchFormState.value.searchKey[1]
-			delete searchFormState.value.searchKey
-		}
-
-		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
-			// return res
-			const obj = {
-				current: 1,
-				pages: 1,
-				records: [
-					{
-						clzt: '1',
-						clztValue: '未处理',
-						bjkssj: '2024-08-28 07:03:24',
-						zjbjsj: '2024-08-28 09:03:42',
-						ssbm: '上海海关技术中心',
-						dxbh: '1111',
-						dxmc: '-20度冰箱',
-						jsr: '周小杰',
-						bjlx: '超限报警1',
-						bjyy: '温度超上限',
-						bjyy: '温度超上限',
-						hfzcsj: '',
-						xysj: '',
-						clsj: '2024-08-30 09:27:56',
-						clr: '',
-						ycyy: '',
-						clcs: '',
-						name: '-21度冰箱',
-						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
-						type: '短信报警1',
-						dx: '13578945780',
-						dh: '/',
-						wx: '/',
-						yj: '/',
-						zt: '发送成功',
-						clcs: '',
-						sbmc: '冰箱',
-						xq: '2024-08-28 09:03:42 短信报警',
-						xysj: '2024-08-28 09:03:42',
-						clr: '周小杰',
-						dxlx: '冰箱',
-						gzrq: '2024-05-30 14:27:03',
-						pp: '海尔',
-						xh: '68'
-					},
-					{
-						clzt: '2',
-						clztValue: '已处理',
-						bjkssj: '2024-08-31 09:24:56',
-						zjbjsj: '2024-08-31 11:15:10',
-						ssbm: '广州海关技术中心',
-						dxbh: '2222',
-						dxmc: '-56度冰箱',
-						jsr: '欧阳天添',
-						bjlx: '超限报警2',
-						bjyy: '温度超上限',
-						bjyy: '温度超上限',
-						hfzcsj: '',
-						xysj: '',
-						clsj: '2024-09-01 11:56:01',
-						clr: '',
-						ycyy: '',
-						clcs: '',
-						name: '-21度冰箱',
-						fsnr: '广州海关基数中心-[-56度冰箱]报警;温度超过上限:-7.7℃',
-						type: '电话报警',
-						dx: '15464789745',
-						dh: '/',
-						wx: '/',
-						yj: '/',
-						zt: '发送成功',
-						clcs: '',
-						sbmc: '冰箱',
-						xq: '2024-08-31 11:15:10 电话报警',
-						xysj: '2024-08-31 11:15:10',
-						clr: '欧阳天添',
-						dxlx: '冰箱',
-						gzrq: '2024-05-30 14:27:03',
-						pp: '海尔',
-						xh: '68'
-					}
-				],
-				size: 10,
-				total: 1
-			}
-			tableData.value = obj.records || [] // 将数据赋值到 tableData 中
-			return obj
+		return getPage({ ...parameter, ...cloneDeep(searchFormState.value) }).then((res) => {
+			tableData.value = res.records || []
+			return res
 		})
 	}
 	// 重置
 	const reset = () => {
+		searchFormState.value = {}
 		searchFormRef.value.resetFields()
 		tableRef.value.refresh(true)
 	}
 
+	/** 新增 */
+	const handleAdd = debounce(() => {
+		detailModalRef.value.open()
+	}, 300)
+	/** 编辑 */
+	const handlerEdit = debounce((rowItem) => {
+		detailModalRef.value.open(rowItem, 'edit')
+	}, 300)
+	/** 删除 */
+	const handlerDel = debounce(async (rowItem) => {
+		if (loading.value) return
+		loading.value = true
+
+		deleteMonitornotice([{ id: rowItem.id }])
+			.then((res) => {
+				tableRef.value.refresh(true)
+			})
+			.catch((e) => {
+				message.error(e.msg || '删除失败')
+			})
+			.finally(() => {
+				loading.value = false
+			})
+	}, 300)
+
 	// 处理
 	const handle = () => {
 		if (selectedRowKeys.value.length < 1) {