界面中所有的搜索区域进行优化调整

snowy-admin-web/src/style/index.less

@@ -525,7 +525,6 @@ body,
 
 
 // 搜索区域的表单
-// 搜索区域
 .table-search {
 	width: 100%;
 	display: flex;
@@ -550,13 +549,23 @@ body,
 	}
 }
 // 其他操作区域
-.table-head {
+.table-head-btn{
+    height: 50px;
+    position: relative;
+    border-radius: 2px;
 	display: flex;
-	flex-direction: row-reverse;
-	align-items: center;
-	justify-content: space-between;
-	padding: 10px 0;
+    align-items: center;
 	background-color: #e6f7ff;
-	border: 1px solid #91d5ff;
-	border-radius: 2px;
+    border: 1px solid #91d5ff;
+	.btn-left{
+		position: absolute;
+		left: 10px;
+	}
+
+
+	.btn-right{
+		position: absolute;
+		right: 10px;
+	}
+
 }

snowy-admin-web/src/views/basicset/devicetype/category.vue

@@ -2,16 +2,21 @@
 	<div class="table_item">
 		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
 			<template #operator>
-				<div class="table-head">
-					<a-button type="primary">
-						<template #icon><plus-outlined /></template>新增
-					</a-button>
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-left">
+						<a-button type="primary">
+							<template #icon><plus-outlined /></template>新增</a-button
+						>
+					</div>
 				</div>
 			</template>
 			<template #bodyCell="{ column }">
 				<template v-if="column.dataIndex === 'action'">
 					<a-button type="link" size="small">编辑</a-button>
-					<a-button type="link" size="small">删除</a-button>
+					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
+						<a-button type="link" danger size="small">删除</a-button>
+					</a-popconfirm>
 				</template>
 			</template>
 		</s-table>
@@ -119,16 +124,23 @@
 			return obj
 		})
 	}
+
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+
+	// 删除
+	const deleteData = (record) => {
+		console.log(record, '删除')
+	}
 </script>
 
 <style lang="less" scoped>
 	.table_item {
 		padding: 15px 20px;
 
-		.table-head {
-			text-align: right;
-		}
-
 		:deep(.ant-table-pagination-right) {
 			justify-content: center !important;
 		}

snowy-admin-web/src/views/basicset/devicetype/model.vue

@@ -2,16 +2,46 @@
 	<div class="table_item">
 		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
 			<template #operator>
-				<div class="table-head">
-					<a-button type="primary">
-						<template #icon><plus-outlined /></template>新增
-					</a-button>
+				<!-- 搜索区域 -->
+				<div class="table-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<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-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+				</div>
+
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-left">
+						<a-button type="primary">
+							<template #icon><plus-outlined /></template>新增</a-button
+						>
+					</div>
 				</div>
 			</template>
 			<template #bodyCell="{ column }">
 				<template v-if="column.dataIndex === 'action'">
 					<a-button type="link" size="small">编辑</a-button>
-					<a-button type="link" size="small">删除</a-button>
+					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
+						<a-button type="link" danger size="small">删除</a-button>
+					</a-popconfirm>
 				</template>
 			</template>
 		</s-table>
@@ -119,14 +149,21 @@
 			return obj
 		})
 	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+
+	// 删除
+	const deleteData = (record) => {
+		console.log(record, '删除')
+	}
 </script>
 
 <style lang="less" scoped>
 	.table_item {
 		padding: 15px 20px;
-		.table-head {
-			text-align: right;
-		}
 	}
 	:deep(.ant-table-pagination-right) {
 		justify-content: center !important;

snowy-admin-web/src/views/basicset/mem/collector.vue

@@ -2,30 +2,72 @@
 	<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">
-						<a-button type="primary">显示新设备</a-button>
-						<a-form
-							ref="searchFormRef"
-							name="advanced_search"
-							:model="searchFormState"
-							layout="inline"
-							class="ant-advanced-search-form"
-						>
-							<a-form-item label="冷链编号" name="code">
-								<a-input v-model:value="searchFormState.code" placeholder="请输入冷链编号" />
-							</a-form-item>
-						</a-form>
+				<!-- 搜索区域 -->
+				<div class="table-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<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="sszj">
+										<a-select v-model:value="searchFormState.sszj" placeholder="请选择所属中继">
+											<a-select-option value="1">虚拟中继</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="yxzt">
+										<a-select v-model:value="searchFormState.yxzt" 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>
+									</a-form-item></a-col
+								>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
+									><a-form-item label="采集名称" name="name">
+										<a-input v-model:value="searchFormState.name" placeholder="请输入采集名称" /> </a-form-item
+								></a-col>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+									<a-form-item label="型号" name="xh">
+										<a-select v-model:value="searchFormState.xh" 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">wifi采集</a-select-option>
+										</a-select>
+									</a-form-item></a-col
+								>
+							</a-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
 						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
 						<a-button class="xn-mg08" @click="reset">重置</a-button>
 					</div>
-					<div class="head-right">
+				</div>
+
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-left">
+						<a-button type="primary">显示新设备</a-button>
+					</div>
+
+					<div class="btn-right">
 						<a-button>
 							<template #icon><download-outlined /></template>导出
 						</a-button>
-						<a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus" @change="handleChange">
-							<a-select-option value="1">搜索模式</a-select-option>
-						</a-select>
 					</div>
 				</div>
 			</template>
@@ -39,7 +81,9 @@
 				</template>
 				<template v-if="column.dataIndex === 'action'">
 					<a-button type="link" size="small">编辑</a-button>
-					<a-button type="link" size="small">删除</a-button>
+					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
+						<a-button type="link" danger size="small">删除</a-button>
+					</a-popconfirm>
 					<a-button type="link" size="small">记录</a-button>
 				</template>
 			</template>
@@ -244,28 +288,16 @@
 		searchFormRef.value.resetFields()
 		tableRef.value.refresh(true)
 	}
+	// 删除
+	const deleteData = (record) => {
+		console.log(record, '删除')
+	}
 </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 {
-				width: 60%;
-				display: flex;
-			}
-
-			.ant-btn {
-				margin-right: 10px;
-			}
-		}
-
 		:deep(.ant-table-pagination-right) {
 			justify-content: center !important;
 		}

snowy-admin-web/src/views/basicset/mem/repeater.vue

@@ -1,14 +1,277 @@
 <template>
-	<div class="table_item">冷链中继器</div>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<!-- 搜索区域 -->
+				<div class="table-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<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="bjzt">
+										<a-select v-model:value="searchFormState.yxzt" 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>
+									</a-form-item></a-col
+								>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
+									><a-form-item label="中继名称" name="name">
+										<a-input v-model:value="searchFormState.name" placeholder="请输入中继名称" /> </a-form-item
+								></a-col>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+									<a-form-item label="型号" name="xh">
+										<a-select v-model:value="searchFormState.xh" 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">wifi采集</a-select-option>
+										</a-select>
+									</a-form-item></a-col
+								>
+							</a-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+				</div>
+
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-left">
+						<a-button type="primary">显示新设备</a-button>
+					</div>
+					<div class="btn-right">
+						<a-button>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+					</div>
+				</div>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'state'">
+					<span>
+						<a-tag :color="record.state == '1' ? '#87d068' : record.state == '2' ? '#cd201f' : '#50cd7c'">
+							{{ record.stateValue }}
+						</a-tag>
+					</span>
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-button type="link" size="small">编辑</a-button>
+					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
+						<a-button type="link" danger size="small">删除</a-button>
+					</a-popconfirm>
+					<a-button type="link" size="small">记录</a-button>
+				</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 value1 = ref('1')
+	const columns = [
+		{
+			title: '所属部门',
+			dataIndex: 'ssbm',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '485编号',
+			dataIndex: 'code1',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '中继编号',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '中继名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '型号',
+			dataIndex: 'xh',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '中继IP',
+			dataIndex: 'ip',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '最后心跳时间',
+			dataIndex: 'zhxtsj',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '设备状态',
+			dataIndex: 'state',
+			align: 'center',
+			ellipsis: true
+		},
+
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 150
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						ssbm: '广州海关技术中心',
+						code1: '123456',
+						code: 'Y6578945621',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						ip: '126.145.01.14',
+						zhxtsj: '2024-09-28 07:03:24',
+						state: '1',
+						stateValue: '正常',
+
+						children: [
+							{
+								ssbm: '广州海关技术中心',
+								code1: '123456',
+								code: 'Y-01-6578945621',
+								name: 'ABSL-3超低温冰箱123456',
+								xh: '三代GPRS采集-VH',
+								ip: '126.145.01.14',
+								zhxtsj: '2024-09-28 07:03:24',
+								state: '2',
+								stateValue: '异常'
+							}
+						]
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code1: '123456',
+						code: 'Y6578945622',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						ip: '126.145.01.14',
+						zhxtsj: '2024-11-05 07:12:42',
+						state: '1',
+						stateValue: '正常',
+						children: [
+							{
+								ssbm: '广州海关技术中心',
+								code1: '123456',
+								code: 'Y-01-6578945622',
+								name: 'ABSL-3超低温冰箱123456',
+								xh: '三代GPRS采集-VH',
+								ip: '126.145.01.14',
+								zhxtsj: '2024-09-28 07:03:24',
+								state: '2',
+								stateValue: '异常'
+							}
+						]
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code1: '123456',
+						code: 'Y6578945623',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						ip: '126.145.01.14',
+						zhxtsj: '2024-11-05 09:22:45',
+						state: '1',
+						stateValue: '正常'
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code1: '123456',
+						code: 'Y6578945624',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						ip: '126.145.01.14',
+						zhxtsj: '2024-11-05 09:27:55',
+						state: '1',
+						stateValue: '正常'
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code1: '123456',
+						code: 'Y6578945625',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						ip: '126.145.01.14',
+						zhxtsj: '2024-11-05 10:16:11',
+						state: '2',
+						stateValue: '异常'
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code1: '123456',
+						code: 'Y6578945626',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						ip: '126.145.01.14',
+						zhxtsj: '2024-11-05 14:57:31',
+						state: '2',
+						stateValue: '异常'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+	// 删除
+	const deleteData = (record) => {
+		console.log(record, '删除')
+	}
 </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/analyse/curve.vue

@@ -141,30 +141,6 @@
 
 		.table-wrapper {
 			width: 75%;
-			// 搜索及操作按钮区域
-			.table-head {
-				width: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				.head-left {
-					width: 90%;
-					display: flex;
-
-					.ant-form-inline {
-						width: 100%;
-
-						.ant-form-item {
-							flex: 1;
-						}
-					}
-				}
-
-				.ant-btn {
-					margin-left: 10px;
-				}
-			}
 		}
 
 		// 右边的搜索区域

snowy-admin-web/src/views/motoring/analyse/daily.vue

@@ -45,12 +45,12 @@
 				</div>
 
 				<!-- 其他操作区域 -->
-				<div class="table-head">
-					<div>
-						<a-button>
+				<div class="table-head-btn">
+					<div class="btn-right">
+						<a-button class="xn-mg08">
 							<template #icon><download-outlined /></template>导出
 						</a-button>
-						<a-button class="xn-mg08">
+						<a-button>
 							<template #icon><printer-outlined /></template>打印
 						</a-button>
 					</div>

snowy-admin-web/src/views/motoring/analyse/evaluate.vue

@@ -33,12 +33,12 @@
 				</div>
 
 				<!-- 其他操作区域 -->
-				<div class="table-head">
-					<div>
-						<a-button>
+				<div class="table-head-btn">
+					<div class="btn-right">
+						<a-button class="xn-mg08">
 							<template #icon><download-outlined /></template>导出
 						</a-button>
-						<a-button class="xn-mg08">
+						<a-button>
 							<template #icon><printer-outlined /></template>打印预览
 						</a-button>
 					</div>
@@ -164,6 +164,11 @@
 			return obj
 		})
 	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
 </script>
 
 <style lang="less" scoped>
@@ -175,22 +180,6 @@
 		// 表格区域
 		.table-wrapper {
 			width: 100%;
-
-			// 搜索及操作按钮区域
-			.table-head {
-				width: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				.head-left {
-					display: flex;
-				}
-
-				.ant-btn {
-					margin-left: 10px;
-				}
-			}
 		}
 	}
 

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

@@ -93,12 +93,12 @@
 				</div>
 
 				<!-- 其他操作区域 -->
-				<div class="table-head">
-					<div>
-						<a-button>
+				<div class="table-head-btn">
+					<div class="btn-right">
+						<a-button class="xn-mg08">
 							<template #icon><download-outlined /></template>导出
 						</a-button>
-						<a-button class="xn-mg08">
+						<a-button>
 							<template #icon><printer-outlined /></template>打印
 						</a-button>
 					</div>

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

@@ -73,18 +73,18 @@
 				</div>
 
 				<!-- 其他操作区域 -->
-				<div class="table-head">
-					<div>
-						<a-button>
+				<div class="table-head-btn">
+					<div class="btn-left">
+						剩余刷新时间：<text style="color: #1c8fff">{{ 33 }}</text>
+					</div>
+					<div class="btn-right">
+						<a-button class="xn-mg08">
 							<template #icon><download-outlined /></template>导出
 						</a-button>
-						<a-button class="xn-mg08">
+						<a-button>
 							<template #icon><printer-outlined /></template>打印
 						</a-button>
 					</div>
-					<div>
-						剩余刷新时间：<text style="color: #1c8fff">{{ 33 }}</text>
-					</div>
 				</div>
 			</template>
 			<template #bodyCell="{ column, record }">

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

@@ -76,15 +76,15 @@
 				</div>
 
 				<!-- 其他操作区域 -->
-				<div class="table-head">
-					<div>
-						<a-button>
+				<div class="table-head-btn">
+					<div class="btn-right">
+						<a-button class="xn-mg08">
 							<template #icon><logout-outlined /></template>处理
 						</a-button>
 						<a-button class="xn-mg08">
 							<template #icon><logout-outlined /></template>全部处理
 						</a-button>
-						<a-button class="xn-mg08">
+						<a-button>
 							<template #icon><download-outlined /></template>导出
 						</a-button>
 					</div>

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

@@ -69,8 +69,8 @@
 				</div>
 
 				<!-- 其他操作区域 -->
-				<div class="table-head">
-					<div>
+				<div class="table-head-btn">
+					<div class="btn-right">
 						<a-button>
 							<template #icon><download-outlined /></template>导出
 						</a-button>