数据查询样式

snowy-admin-web/src/layout/components/userbar.vue

@@ -29,7 +29,7 @@
 				</a-menu>
 			</template>
 		</a-dropdown>
-		<a-dropdown v-if="!isMobile" class="panel-item">
+		<!-- <a-dropdown v-if="!isMobile" class="panel-item">
 			<global-outlined />
 			<template #overlay>
 				<a-menu :selected-keys="lang">
@@ -41,7 +41,7 @@
 					</a-menu-item>
 				</a-menu>
 			</template>
-		</a-dropdown>
+		</a-dropdown> -->
 		<div v-if="setDrawer === 'true'" class="setting panel-item" @click="openSetting">
 			<layout-outlined />
 		</div>

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

@@ -522,3 +522,40 @@ body,
 .batch-box.active:before {
 	background: var(--primary-color) !important;
 }
+
+
+// 搜索区域的表单
+// 搜索区域
+.table-search {
+	width: 100%;
+	display: flex;
+
+	// 搜索表单
+	.table-search-form {
+		width: 100%;
+		overflow: hidden;
+		flex: 1;
+		.ant-form-inline {
+			width: 100%;
+			.ant-form-item {
+				margin-bottom: 18px;
+			}
+		}
+	}
+
+	// 搜索按钮
+	.table-search-buttons {
+		min-width: 100px;
+		margin-left: 20px;
+	}
+}
+// 其他操作区域
+.table-head {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px 22px;
+	background-color: #e6f7ff;
+	border: 1px solid #91d5ff;
+	border-radius: 2px;
+}

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

@@ -1,6 +1,111 @@
 <template>
 	<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="6"
+									><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="6"
+									><a-form-item label="对象状态" name="syzt">
+										<a-select v-model:value="searchFormState.syzt" 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-select>
+									</a-form-item></a-col
+								>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+									<a-form-item label="监控点" name="jkdmc">
+										<a-select v-model:value="searchFormState.jkdmc" placeholder="请选择监控点名称">
+											<a-select-option value="1">监控点1</a-select-option>
+										</a-select>
+									</a-form-item></a-col
+								>
+
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+									<a-form-item label="报警状态" name="bjzt">
+										<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="6"
+									><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="6"
+									><a-form-item label="对象名称" name="dxmc">
+										<a-select v-model:value="searchFormState.dxmc" placeholder="请选择对象名称">
+											<a-select-option value="1">-20度冰箱</a-select-option>
+											<a-select-option value="2">-86度超低温冷冻储存箱</a-select-option>
+											<a-select-option value="3">90160189</a-select-option>
+											<a-select-option value="4">ABSL-3(II)超低温冰箱</a-select-option>
+											<a-select-option value="5">BSL-3(II)超低温冰箱</a-select-option>
+											<a-select-option value="6">超低温冰箱</a-select-option>
+											<a-select-option value="7">物联网变频超低温冰箱</a-select-option>
+											<a-select-option value="8">医用冰箱</a-select-option>
+											<a-select-option value="9">医用低温保存箱</a-select-option>
+										</a-select>
+									</a-form-item></a-col
+								>
+								<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+									<a-form-item label="采集时间" name="searchKey">
+										<a-range-picker
+											v-model:value="searchFormState.searchKey"
+											show-time
+											format="YYYY-MM-DD HH:mm:ss"
+											value-format="YYYY-MM-DD HH:mm:ss"
+										/>
+									</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">
+					<div>
+						剩余刷新时间：<text style="color: #1c8fff">{{ 33 }}</text>
+					</div>
+					<div>
+						<a-button>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-button class="xn-mg08">
+							<template #icon><printer-outlined /></template>打印
+						</a-button>
+					</div>
+				</div>
+			</template>
 			<template #bodyCell="{ column, record }">
 				<template v-if="column.dataIndex === 'state'">
 					<span>
@@ -192,6 +297,11 @@
 			return obj
 		})
 	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
 </script>
 
 <style lang="less" scoped>

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

@@ -2,18 +2,86 @@
 	<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="6"
+									><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="6"
+									><a-form-item label="使用状态" name="syzt">
+										<a-select v-model:value="searchFormState.syzt" 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-select>
+									</a-form-item></a-col
+								>
+
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
+									><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="6"
+									><a-form-item label="对象名称" name="dxmc">
+										<a-select v-model:value="searchFormState.dxmc" placeholder="请选择对象名称">
+											<a-select-option value="1">-20度冰箱</a-select-option>
+											<a-select-option value="2">-86度超低温冷冻储存箱</a-select-option>
+											<a-select-option value="3">90160189</a-select-option>
+											<a-select-option value="4">ABSL-3(II)超低温冰箱</a-select-option>
+											<a-select-option value="5">BSL-3(II)超低温冰箱</a-select-option>
+											<a-select-option value="6">超低温冰箱</a-select-option>
+											<a-select-option value="7">物联网变频超低温冰箱</a-select-option>
+											<a-select-option value="8">医用冰箱</a-select-option>
+											<a-select-option value="9">医用低温保存箱</a-select-option>
+										</a-select>
+									</a-form-item></a-col
+								>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+									<a-form-item label="监控点" name="jkdmc">
+										<a-select v-model:value="searchFormState.jkdmc" placeholder="请选择监控点名称">
+											<a-select-option value="1">监控点1</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">
-					<div class="head-left">
+					<div>
 						剩余刷新时间：<text style="color: #1c8fff">{{ 33 }}</text>
 					</div>
-					<div class="head-right">
-						<a-button>
-							<template #icon><search-outlined /></template>搜索
-						</a-button>
+					<div>
 						<a-button>
 							<template #icon><download-outlined /></template>导出
 						</a-button>
-						<a-button>
+						<a-button class="xn-mg08">
 							<template #icon><printer-outlined /></template>打印
 						</a-button>
 					</div>
@@ -210,22 +278,17 @@
 			return obj
 		})
 	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
 </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;
 		}