首页，数据查询，报警管理

snowy-admin-web/src/components/HomeCard/SysWarningCard/index.vue

@@ -30,7 +30,6 @@
 <script setup name="SysWarningCard">
 	import bizIndexApi from '@/api/biz/bizIndexApi'
 	import router from '@/router'
-	const detailRef = ref()
 	const columns = [
 		{
 			title: '时间',

snowy-admin-web/src/views/motoring/query/history.vue

@@ -0,0 +1,204 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'state'">
+					<span>
+						<a-tag :color="record.state == '1' ? '#2db7f5' : record.state == '2' ? '#cd201f' : '#87d068'">
+							{{ record.stateVlaue }}
+						</a-tag>
+					</span>
+				</template>
+			</template>
+		</s-table>
+	</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '采集时间',
+			dataIndex: 'time',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '所属部门',
+			dataIndex: 'bm',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '对象名称',
+			dataIndex: 'dxmc',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '设备状态',
+			dataIndex: 'state',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控点',
+			dataIndex: 'jkd',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '上下限',
+			dataIndex: 'up',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '传感器类型',
+			dataIndex: 'type',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集值1',
+			dataIndex: 'cjz1',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集值2',
+			dataIndex: 'cjz2',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '对象类型',
+			dataIndex: 'dxtype',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '冷链编号',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						time: '2024-08-28 07:03:24',
+						bm: '上海海关基数中心1',
+						dxmc: '-70度超低温冷冻储存箱',
+						state: '2',
+						stateVlaue: '异常',
+						jkd: '监控点1',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945621'
+					},
+					{
+						time: '2024-08-28 09:21:51',
+						bm: '上海海关基数中心2',
+						dxmc: '-71度超低温冷冻储存箱',
+						state: '2',
+						stateVlaue: '异常',
+						jkd: '监控点2',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945622'
+					},
+					{
+						time: '2024-08-28 11:06:20',
+						bm: '上海海关基数中心3',
+						dxmc: '-72度超低温冷冻储存箱',
+						state: '2',
+						stateVlaue: '异常',
+						jkd: '监控点3',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945623'
+					},
+					{
+						time: '2024-08-28 11:54:19',
+						bm: '上海海关基数中心4',
+						dxmc: '-73度超低温冷冻储存箱',
+						state: '2',
+						stateVlaue: '异常',
+						jkd: '监控点4',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945624'
+					},
+					{
+						time: '2024-08-28 16:17:36',
+						bm: '上海海关基数中心5',
+						dxmc: '-74度超低温冷冻储存箱',
+						state: '2',
+						stateVlaue: '异常',
+						jkd: '监控点5',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945625'
+					},
+					{
+						time: '2024-08-28 19:35:58',
+						bm: '上海海关基数中心6',
+						dxmc: '-75度超低温冷冻储存箱',
+						state: '2',
+						stateVlaue: '异常',
+						jkd: '监控点6',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945626'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+	}
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
+</style>

snowy-admin-web/src/views/motoring/query/index.vue

@@ -1,12 +1,85 @@
 <template>
-	<div>数据查询</div>
+	<div class="query-box">
+		<div class="query-head">
+			<div class="query-tbas">
+				<div class="tbas-title" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">实时数据</div>
+				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
+				<div class="tbas-title" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">历史数据</div>
+			</div>
+			<a-button type="link" @click="leaveFor('/motoring/report')">更多</a-button>
+		</div>
+
+		<div class="query-body">
+			<realtime ref="realtimeRef" v-if="activeKey == '1'" />
+			<history ref="historyRef" v-if="activeKey == '2'" />
+		</div>
+	</div>
 </template>
 <script setup>
+	import Realtime from './realtime.vue'
+	import History from './history.vue'
+
+	const activeKey = ref('1')
+	const realtimeRef = ref(null)
+	const historyRef = ref(null)
+
 	onMounted(() => {})
 
 	onBeforeMount(() => {})
 
+	// 点击标签
+	const activeclick = (v) => {
+		activeKey.value = v
+	}
+
 	// 监听
-	watch()
+	watch(
+		() => activeKey.value,
+		(newValue) => {
+			if (newValue === '1' && realtimeRef.value) {
+				realtimeRef.value.loadData()
+			} else if (newValue === '2' && historyRef.value) {
+				historyRef.value.loadData()
+			}
+		},
+		{
+			immediate: true // 立即执行
+		}
+	)
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+	.query-box {
+		width: 100%;
+		height: 100vh;
+		overflow: hidden;
+		background-color: #fff;
+
+		// 顶部
+		.query-head {
+			width: 100%;
+			height: 50px;
+			display: flex;
+			justify-content: space-between;
+			padding: 15px;
+			border-bottom: 1px solid #e7e7e7;
+
+			.query-tbas {
+				width: 95%;
+				display: flex;
+
+				.tbas-title {
+					height: 35px;
+					line-height: 25px;
+					color: #a7a7a7;
+					font-size: 16px;
+					cursor: pointer;
+				}
+
+				.active {
+					color: #1b8fff;
+					border-bottom: 2px solid #1b8fff;
+				}
+			}
+		}
+	}
+</style>

snowy-admin-web/src/views/motoring/query/realtime.vue

@@ -0,0 +1,233 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<div class="table-head">
+					<div class="head-left">
+						剩余刷新时间：<text style="color: #1c8fff">{{ 33 }}</text>
+					</div>
+					<div class="head-right">
+						<a-button>
+							<template #icon><search-outlined /></template>搜索
+						</a-button>
+						<a-button>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-button>
+							<template #icon><printer-outlined /></template>打印
+						</a-button>
+					</div>
+				</div>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'state'">
+					<span>
+						<a-tag :color="record.state == '1' ? '#2db7f5' : record.state == '2' ? '#cd201f' : '#87d068'">
+							{{ record.stateVlaue }}
+						</a-tag>
+					</span>
+				</template>
+			</template>
+		</s-table>
+	</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '采集时间',
+			dataIndex: 'time',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '所属部门',
+			dataIndex: 'bm',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '对象名称',
+			dataIndex: 'dxmc',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '设备状态',
+			dataIndex: 'state',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控点',
+			dataIndex: 'jkd',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '上下限',
+			dataIndex: 'up',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '传感器类型',
+			dataIndex: 'type',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集值1',
+			dataIndex: 'cjz1',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集值2',
+			dataIndex: 'cjz2',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '对象类型',
+			dataIndex: 'dxtype',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '冷链编号',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						time: '2024-09-28 07:03:24',
+						bm: '广州海关基数中心1',
+						dxmc: '-80度超低温冷冻储存箱',
+						state: '1',
+						stateVlaue: '正常',
+						jkd: '监控点1',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945621'
+					},
+					{
+						time: '2024-09-28 09:21:51',
+						bm: '广州海关基数中心2',
+						dxmc: '-81度超低温冷冻储存箱',
+						state: '1',
+						stateVlaue: '正常',
+						jkd: '监控点2',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945622'
+					},
+					{
+						time: '2024-09-28 11:06:20',
+						bm: '广州海关基数中心3',
+						dxmc: '-82度超低温冷冻储存箱',
+						state: '1',
+						stateVlaue: '正常',
+						jkd: '监控点3',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945623'
+					},
+					{
+						time: '2024-09-28 11:54:19',
+						bm: '广州海关基数中心4',
+						dxmc: '-83度超低温冷冻储存箱',
+						state: '1',
+						stateVlaue: '正常',
+						jkd: '监控点4',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945624'
+					},
+					{
+						time: '2024-09-28 16:17:36',
+						bm: '广州海关基数中心5',
+						dxmc: '-84度超低温冷冻储存箱',
+						state: '1',
+						stateVlaue: '正常',
+						jkd: '监控点5',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945625'
+					},
+					{
+						time: '2024-09-28 19:35:58',
+						bm: '广州海关基数中心6',
+						dxmc: '-85度超低温冷冻储存箱',
+						state: '1',
+						stateVlaue: '正常',
+						jkd: '监控点6',
+						up: '-30~-10℃',
+						type: '温度',
+						cjz1: '-18.9℃',
+						cjz2: '/',
+						dxtype: '冰箱',
+						code: '6578945626'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+
+		.table-head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.ant-btn {
+				margin-left: 10px;
+			}
+		}
+
+		:deep(.ant-table-pagination-right) {
+			justify-content: center !important;
+		}
+	}
+</style>

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

@@ -1,12 +1,85 @@
 <template>
-	<div>报警管理</div>
+	<div class="query-box">
+		<div class="query-head">
+			<div class="query-tbas">
+				<div class="tbas-title" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">报警列表</div>
+				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
+				<div class="tbas-title" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">报警通知列表</div>
+			</div>
+			<a-button type="link" @click="leaveFor('/motoring/report')">更多</a-button>
+		</div>
+
+		<div class="query-body">
+			<list ref="listRef" v-if="activeKey == '1'" />
+			<noticelist ref="noticelistRef" v-if="activeKey == '2'" />
+		</div>
+	</div>
 </template>
 <script setup>
+	import List from './list.vue'
+	import Noticelist from './noticelist.vue'
+
+	const activeKey = ref('1')
+	const listRef = ref(null)
+	const noticelistRef = ref(null)
+
 	onMounted(() => {})
 
 	onBeforeMount(() => {})
 
+	// 点击标签
+	const activeclick = (v) => {
+		activeKey.value = v
+	}
+
 	// 监听
-	watch()
+	watch(
+		() => activeKey.value,
+		(newValue) => {
+			if (newValue === '1' && listRef.value) {
+				listRef.value.loadData()
+			} else if (newValue === '2' && noticelistRef.value) {
+				noticelistRef.value.loadData()
+			}
+		},
+		{
+			immediate: true // 立即执行
+		}
+	)
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+	.query-box {
+		width: 100%;
+		height: 100vh;
+		overflow: hidden;
+		background-color: #fff;
+
+		// 顶部
+		.query-head {
+			width: 100%;
+			height: 50px;
+			display: flex;
+			justify-content: space-between;
+			padding: 15px;
+			border-bottom: 1px solid #e7e7e7;
+
+			.query-tbas {
+				width: 95%;
+				display: flex;
+
+				.tbas-title {
+					height: 35px;
+					line-height: 25px;
+					color: #a7a7a7;
+					font-size: 16px;
+					cursor: pointer;
+				}
+
+				.active {
+					color: #1b8fff;
+					border-bottom: 2px solid #1b8fff;
+				}
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,324 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.dxbh">
+			<template #operator>
+				<div class="table-head">
+					<div class="head-left">
+						<a-form
+							ref="searchFormRef"
+							name="advanced_search"
+							:model="searchFormState"
+							class="ant-advanced-search-form"
+						>
+							<a-form-item label="报警时间" name="searchKey">
+								<a-range-picker v-model:value="searchFormState.searchKey" value-format="YYYY/MM/DD" />
+							</a-form-item>
+						</a-form>
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+					<div class="head-right">
+						<a-button>
+							<template #icon><logout-outlined /></template>处理
+						</a-button>
+						<a-button>
+							<template #icon><logout-outlined /></template>全部处理
+						</a-button>
+						<a-button>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-button>
+							<template #icon><search-outlined /></template>搜索模式
+						</a-button>
+					</div>
+				</div>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'clzt'">
+					<span>
+						<a-tag :color="record.clzt == '1' ? '#cd201f' : record.clzt == '2' ? '#2db7f5' : '#87d068'">
+							{{ record.clztValue }}
+						</a-tag>
+					</span>
+				</template>
+			</template>
+		</s-table>
+	</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormRef = ref()
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '处理状态',
+			dataIndex: 'clzt',
+			align: 'center',
+			ellipsis: true,
+			sorter: true,
+			width: '10%'
+		},
+		{
+			title: '报警开始时间',
+			dataIndex: 'bjkssj',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '最近报警时间',
+			dataIndex: 'zjbjsj',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '所属部门',
+			dataIndex: 'ssbm',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '对象编码',
+			dataIndex: 'dxbh',
+			align: 'center',
+			ellipsis: true,
+			sorter: 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,
+			sorter: true
+		},
+		{
+			title: '处理时间',
+			dataIndex: 'clsj',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '处理人',
+			dataIndex: 'clr',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '异常原因',
+			dataIndex: 'ycyy',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '处理措施',
+			dataIndex: 'clcs',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		}
+	]
+
+	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: '',
+						dxmc: '-20度冰箱',
+						jsr: '周小杰',
+						bjlx: '超限报警',
+						bjyy: '温度超上限',
+						bjyy: '温度超上限',
+						hfzcsj: '',
+						xysj: '',
+						clsj: '',
+						clr: '',
+						ycyy: '',
+						clcs: '',
+						name: '-21度冰箱',
+						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
+						type: '短信报警',
+						dx: '13578945780',
+						dh: '/',
+						wx: '/',
+						yj: '/',
+						zt: '发送成功',
+						clcs: ''
+					},
+					{
+						clzt: '2',
+						clztValue: '已处理',
+						bjkssj: '2024-08-28 11:32:12',
+						zjbjsj: '2024-08-28 11:52:42',
+						ssbm: '上海海关技术中心',
+						dxbh: '',
+						dxmc: '-20度冰箱',
+						jsr: '周小杰',
+						bjlx: '超限报警',
+						bjyy: '温度超上限',
+						bjyy: '温度超上限',
+						hfzcsj: '',
+						xysj: '',
+						clsj: '',
+						clr: '',
+						ycyy: '',
+						clcs: ''
+					},
+					{
+						clzt: '1',
+						clztValue: '未处理',
+						bjkssj: '2024-08-28 13:07:34',
+						zjbjsj: '2024-08-28 13:10:12',
+						ssbm: '上海海关技术中心',
+						dxbh: '',
+						dxmc: '-20度冰箱',
+						jsr: '周小杰',
+						bjlx: '超限报警',
+						bjyy: '温度超上限',
+						bjyy: '温度超上限',
+						hfzcsj: '',
+						xysj: '',
+						clsj: '',
+						clr: '',
+						ycyy: '',
+						clcs: '',
+						name: '-23度冰箱'
+					},
+					{
+						clzt: '2',
+						clztValue: '已处理',
+						bjkssj: '2024-08-28 15:41:04',
+						zjbjsj: '2024-08-28 15:55:51',
+						ssbm: '上海海关技术中心',
+						dxbh: '',
+						dxmc: '-20度冰箱',
+						jsr: '周小杰',
+						bjlx: '超限报警',
+						bjyy: '温度超上限',
+						bjyy: '温度超上限',
+						hfzcsj: '',
+						xysj: '',
+						clsj: '',
+						clr: '',
+						ycyy: '',
+						clcs: ''
+					},
+					{
+						clzt: '1',
+						clztValue: '未处理',
+						bjkssj: '2024-08-28 16:43:14',
+						zjbjsj: '2024-08-28 16:57:32',
+						ssbm: '上海海关技术中心',
+						dxbh: '',
+						dxmc: '-20度冰箱',
+						jsr: '周小杰',
+						bjlx: '超限报警',
+						bjyy: '温度超上限',
+						bjyy: '温度超上限',
+						hfzcsj: '',
+						xysj: '',
+						clsj: '',
+						clr: '',
+						ycyy: '',
+						clcs: ''
+					},
+					{
+						clzt: '2',
+						clztValue: '已处理',
+						bjkssj: '2024-08-28 18:21:33',
+						zjbjsj: '2024-08-28 18:33:12',
+						ssbm: '上海海关技术中心',
+						dxbh: '',
+						dxmc: '-20度冰箱',
+						jsr: '周小杰',
+						bjlx: '超限报警',
+						bjyy: '温度超上限',
+						bjyy: '温度超上限',
+						hfzcsj: '',
+						xysj: '',
+						clsj: '',
+						clr: '',
+						ycyy: '',
+						clcs: ''
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+		.table-head {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.head-left {
+				display: flex;
+			}
+
+			.ant-btn {
+				margin-left: 10px;
+			}
+		}
+	}
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
+</style>

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

@@ -0,0 +1,270 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.sctime">
+			<template #operator>
+				<div class="table-head">
+					<div class="head-left">
+						<a-form
+							ref="searchFormRef"
+							name="advanced_search"
+							:model="searchFormState"
+							class="ant-advanced-search-form"
+						>
+							<a-form-item label="报警时间" name="searchKey">
+								<a-range-picker v-model:value="searchFormState.searchKey" value-format="YYYY/MM/DD" />
+							</a-form-item>
+						</a-form>
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+					<div class="head-right">
+						<a-button>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-button>
+							<template #icon><search-outlined /></template>搜索模式
+						</a-button>
+					</div>
+				</div>
+			</template>
+		</s-table>
+	</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormRef = ref()
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '生成时间',
+			dataIndex: 'sctime',
+			align: 'center',
+			ellipsis: true,
+			sorter: true,
+			width: '10%'
+		},
+		{
+			title: '发送时间',
+			dataIndex: 'fstime',
+			align: 'center',
+			ellipsis: true,
+			sorter: true,
+			width: '10%'
+		},
+		{
+			title: '接收人',
+			dataIndex: 'jsr',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '对象编码',
+			dataIndex: 'dxcpde',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '对象名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '发送内容',
+			dataIndex: 'fsnr',
+			align: 'center',
+			ellipsis: true,
+			width: '20%'
+		},
+		{
+			title: '通知类型',
+			dataIndex: 'type',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '短信',
+			dataIndex: 'dx',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '电话',
+			dataIndex: 'dh',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '微信',
+			dataIndex: 'wx',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '邮件',
+			dataIndex: 'yj',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '状态',
+			dataIndex: 'zt',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		},
+		{
+			title: '故障原因',
+			dataIndex: 'gzyy',
+			align: 'center',
+			ellipsis: true,
+			sorter: true
+		}
+	]
+
+	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: [
+					{
+						sctime: '2024-08-28 07:03:24',
+						fstime: '2024-08-28 09:03:42',
+						jsr: '周小杰',
+						dxcpde: '',
+						name: '-21度冰箱',
+						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
+						type: '短信报警',
+						dx: '13578945780',
+						dh: '/',
+						wx: '/',
+						yj: '/',
+						zt: '发送成功',
+						gzyy: ''
+					},
+					{
+						sctime: '2024-08-28 11:32:12',
+						fstime: '2024-08-28 11:52:42',
+						jsr: '周小杰',
+						dxcpde: '',
+						name: '-22度冰箱',
+						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
+						type: '短信报警',
+						dx: '13578945780',
+						dh: '/',
+						wx: '/',
+						yj: '/',
+						zt: '发送成功',
+						gzyy: ''
+					},
+					{
+						sctime: '2024-08-28 13:07:34',
+						fstime: '2024-08-28 13:10:12',
+						jsr: '周小杰',
+						dxcpde: '',
+						name: '-23度冰箱',
+						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
+						type: '短信报警',
+						dx: '13578945780',
+						dh: '/',
+						wx: '/',
+						yj: '/',
+						zt: '发送成功',
+						gzyy: ''
+					},
+					{
+						sctime: '2024-08-28 15:41:04',
+						fstime: '2024-08-28 15:55:51',
+						jsr: '周小杰',
+						dxcpde: '',
+						name: '-24度冰箱',
+						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
+						type: '短信报警',
+						dx: '13578945780',
+						dh: '/',
+						wx: '/',
+						yj: '/',
+						zt: '发送成功',
+						gzyy: ''
+					},
+					{
+						sctime: '2024-08-28 16:43:14',
+						fstime: '2024-08-28 16:57:32',
+						jsr: '周小杰',
+						dxcpde: '',
+						name: '-25度冰箱',
+						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
+						type: '短信报警',
+						dx: '13578945780',
+						dh: '/',
+						wx: '/',
+						yj: '/',
+						zt: '发送成功',
+						gzyy: ''
+					},
+					{
+						sctime: '2024-08-28 18:21:33',
+						fstime: '2024-08-28 18:33:12',
+						jsr: '周小杰',
+						dxcpde: '',
+						name: '-26度冰箱',
+						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
+						type: '短信报警',
+						dx: '13578945780',
+						dh: '/',
+						wx: '/',
+						yj: '/',
+						zt: '发送成功',
+						gzyy: ''
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+		.table-head {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.head-left {
+				display: flex;
+			}
+
+			.ant-btn {
+				margin-left: 10px;
+			}
+		}
+	}
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
+</style>