style(drainage): 排水子系统列表页样式统一

- 搜索区改为标准行内表单，支持显隐切换，补齐重置按钮
- 操作按钮改为描边样式，统一间距与排列，右侧补充刷新与显隐搜索入口
- 数据表格去除竖线与斑马纹，分页统一换用分页组件
- 当前预警与历史预警的状态切换改为分段按钮
- 历史预警导出按钮调整样式与文案

src/views/subSystem/drainage/fxpg/zhfxtjfx.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container risk-stat-page">
     <!-- ==================== 筛选区 ==================== -->
-    <el-form :model="queryParams" :inline="true" class="search-form" @submit.prevent>
+    <el-form :model="queryParams" :inline="true" v-show="showSearch" label-width="80px" @submit.prevent>
       <el-form-item label="管线编号">
         <el-input v-model="queryParams.networkCode" placeholder="请输入" clearable style="width: 150px"
           @keyup.enter="handleQuery" />
@@ -98,7 +98,14 @@
     </div>
 
     <!-- ==================== 数据表格 ==================== -->
-    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading"
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Refresh" :loading="loading" @click="loadList">刷新</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadList"></right-toolbar>
+    </el-row>
+
+    <el-table :data="tableData" style="width: 100%" v-loading="loading"
       :default-sort="{ prop: 'riskScore', order: 'descending' }">
       <el-table-column label="序号" type="index" width="60" align="center"
         :index="(i) => (pageNum - 1) * pageSize + i + 1" />
@@ -157,9 +164,8 @@
 
     <!-- ==================== 分页 ==================== -->
     <div class="pagination-wrap">
-      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
-        :total="total" layout="total, sizes, prev, pager, next, jumper" background @size-change="loadList"
-        @current-change="loadList" />
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
+        @pagination="loadList" />
     </div>
 
     <!-- ==================== 详情抽屉 ==================== -->
@@ -188,6 +194,7 @@ import {
 import RiskAssessmentTabs from './components/RiskAssessmentTabs.vue'
 
 // ==================== 筛选与分页 ====================
+const showSearch = ref(true)
 const queryParams = reactive({
   networkCode: '',
   networkLevel: '',

src/views/subSystem/drainage/jcsj/gcssgl.vue

@@ -41,13 +41,7 @@
     </el-card>
 
     <!-- 查询条件 -->
-    <el-card shadow="never" class="filter-card">
-      <template #header>
-        <div class="card-header">
-          <div class="card-title"><span>查询条件</span></div>
-        </div>
-      </template>
-      <el-form :model="query" :inline="true" label-width="80px" class="filter-form">
+    <el-form ref="queryRef" :model="query" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="设施编码">
           <el-input v-model="query.facilityCode" placeholder="请输入" clearable style="width: 160px"
             @keyup.enter="handleQuery" />
@@ -80,29 +74,27 @@
             @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
-          <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
-      </el-form>
-    </el-card>
+    </el-form>
 
     <!-- 设施清单 -->
-    <el-card shadow="never" class="table-card">
-      <template #header>
-        <div class="card-header">
-          <div class="card-title"><span>设施清单</span></div>
-        </div>
-      </template>
-
-      <div class="toolbar">
-        <el-button v-hasPermi="['drainage:facility:add']" type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button v-hasPermi="['drainage:facility:remove']" type="danger" :icon="Delete"
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['drainage:facility:add']" type="primary" plain icon="Plus"
+          @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['drainage:facility:remove']" type="danger" plain icon="Delete"
           :disabled="selectedIds.length === 0" @click="handleBatchDelete">
           删除{{ selectedIds.length ? `(${selectedIds.length})` : '' }}
         </el-button>
-      </div>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadAll"></right-toolbar>
+    </el-row>
 
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%"
+      <el-table v-loading="loading" :data="tableData" style="width: 100%"
         @selection-change="handleSelectionChange" @row-dblclick="openDetail">
         <el-table-column type="selection" width="50" align="center" />
         <el-table-column label="设施编码" prop="facilityCode" min-width="120" show-overflow-tooltip />
@@ -133,10 +125,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
-        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-        class="pager" @size-change="handleSizeChange" @current-change="loadPage" />
-    </el-card>
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
+        @pagination="loadPage" />
 
     <!-- 详情抽屉（只读） -->
     <el-drawer v-model="detailVisible" title="工程设施详情" size="680px" direction="rtl"
@@ -305,7 +295,7 @@
 <script setup name="Gcssgl">
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Aim, Delete, Plus, Refresh, RefreshLeft, Search } from '@element-plus/icons-vue'
+import { Aim, Refresh } from '@element-plus/icons-vue'
 import GisMapCanvas from '@/components/GisMapCanvas.vue'
 import { useDict } from '@/utils/dict'
 import { bd09ToWgs84 } from '@/utils/coordTransform'
@@ -349,6 +339,8 @@ const emptyQuery = () => ({
   status: ''
 })
 const query = ref(emptyQuery())
+const showSearch = ref(true)
+const queryRef = ref()
 
 // 设施等级：前端写死可选项，落库存编码（不存中文）
 const levelOptions = [

src/views/subSystem/drainage/jcsj/psfqgl.vue

@@ -11,33 +11,41 @@
     </div>
 
     <!-- 搜索区域 -->
-    <el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="分区名称">
-        <el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 200px" />
+        <el-input v-model="queryParams.name" placeholder="请输入分区名称" clearable style="width: 200px"
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="地点">
-        <el-input v-model="queryParams.district" placeholder="请输入" clearable style="width: 200px" />
+        <el-input v-model="queryParams.district" placeholder="请输入地点" clearable style="width: 200px"
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="分区类型">
-        <el-select v-model="queryParams.partitionType" placeholder="请选择" clearable style="width: 200px">
+        <el-select v-model="queryParams.partitionType" placeholder="请选择分区类型" clearable style="width: 200px">
           <el-option label="雨水分区" value="雨水分区" />
           <el-option label="污水分区" value="污水分区" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <!-- 操作按钮区域 -->
-    <div class="toolbar">
-      <el-button type="primary" @click="handleAdd">新增</el-button>
-      <el-button type="danger" :disabled="selectedIds.length === 0" @click="handleBatchDelete">删除</el-button>
-    </div>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="selectedIds.length === 0"
+          @click="handleBatchDelete">删除</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadData"></right-toolbar>
+    </el-row>
 
     <!-- 数据表格 -->
-    <el-table v-loading="loading" :data="filteredList" border style="width: 100%"
-      @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="filteredList" style="width: 100%" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="分区名称" prop="name" min-width="160" />
       <el-table-column label="地点" prop="district" min-width="100" />
@@ -77,9 +85,8 @@
     </el-table>
 
     <!-- 分页 -->
-    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
-      :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-      style="margin-top: 16px; justify-content: flex-end;" @size-change="loadData" @current-change="loadData" />
+    <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
+      @pagination="loadData" />
 
     <!-- 查看详情对话框 -->
     <el-drawer v-model="dialogVisible" title="详情" size="700px" :before-close="handleClose" @opened="onDialogOpened" class="detail-drawer" direction="rtl">
@@ -267,9 +274,8 @@
         </el-table-column>
       </el-table>
 
-      <el-pagination v-model:current-page="bindPageNum" v-model:page-size="bindPageSize" :total="bindTotal"
-        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-        style="margin-top: 16px; justify-content: flex-end;" @size-change="loadBindData" @current-change="loadBindData" />
+      <pagination v-show="bindTotal > 0" v-model:page="bindPageNum" v-model:limit="bindPageSize" :total="bindTotal"
+        @pagination="loadBindData" />
 
       <template #footer>
         <el-button @click="closeBindDialog">取 消</el-button>
@@ -456,6 +462,8 @@ function renderMainMapMarkers() {
 }
 
 // ==================== 搜索参数 ====================
+const showSearch = ref(true)
+const queryRef = ref()
 const queryParams = ref({
   name: '',
   district: '',
@@ -531,6 +539,16 @@ function handleQuery() {
   loadData()
 }
 
+// 重置搜索条件
+function resetQuery() {
+  queryRef.value?.resetFields()
+  queryParams.value.name = ''
+  queryParams.value.district = ''
+  queryParams.value.partitionType = ''
+  pageNum.value = 1
+  loadData()
+}
+
 // ==================== 查看详情对话框 ====================
 const dialogVisible = ref(false)
 const currentRow = ref({})

src/views/subSystem/drainage/jcsj/psgwgl.vue

@@ -40,13 +40,7 @@
     </el-card>
 
     <!-- 查询条件 -->
-    <el-card shadow="never" class="filter-card">
-      <template #header>
-        <div class="card-header">
-          <div class="card-title"><span>查询条件</span></div>
-        </div>
-      </template>
-      <el-form :model="query" :inline="true" label-width="80px" class="filter-form">
+    <el-form ref="queryRef" :model="query" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="设施编码">
           <el-input v-model="query.networkCode" placeholder="请输入" clearable style="width: 160px"
             @keyup.enter="handleQuery" />
@@ -90,21 +84,20 @@
             range-separator="-" start-placeholder="开始" end-placeholder="结束" style="width: 230px" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
-          <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
-      </el-form>
-    </el-card>
+    </el-form>
 
     <!-- 管网清单 -->
-    <el-card shadow="never" class="table-card">
-      <template #header>
-        <div class="card-header">
-          <div class="card-title"><span>管网清单</span></div>
-        </div>
-      </template>
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%"
-        @row-dblclick="openDetail">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Refresh" :loading="loading" @click="loadAll">刷新</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadAll"></right-toolbar>
+    </el-row>
+
+      <el-table v-loading="loading" :data="tableData" style="width: 100%" @row-dblclick="openDetail">
         <el-table-column label="设施编码" prop="networkCode" min-width="120" show-overflow-tooltip />
         <el-table-column label="设施名称" prop="networkName" min-width="150" show-overflow-tooltip />
         <el-table-column label="等级" width="90" align="center">
@@ -131,10 +124,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
-        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-        class="pager" @size-change="handleSizeChange" @current-change="loadPage" />
-    </el-card>
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
+        @pagination="loadPage" />
 
     <!-- 详情抽屉（只读） -->
     <el-drawer v-model="detailVisible" title="排水管网详情" size="680px" direction="rtl"
@@ -183,7 +174,7 @@
 <script setup name="Psgwgl">
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Aim, Refresh, RefreshLeft, Search } from '@element-plus/icons-vue'
+import { Aim, Refresh } from '@element-plus/icons-vue'
 import GisMapCanvas from '@/components/GisMapCanvas.vue'
 import { useDict } from '@/utils/dict'
 import {
@@ -208,6 +199,8 @@ const query = ref({
   diameterMax: null
 })
 const buildRange = ref([])
+const showSearch = ref(true)
+const queryRef = ref()
 
 // 下拉项（材质、管养单位去重值）
 const filterOptions = ref({ materials: [], managementUnits: [] })

src/views/subSystem/drainage/jcsj/sbyx.vue

@@ -100,7 +100,7 @@
           </el-form-item>
         </template>
         <el-form-item class="filter-actions">
-          <el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
+          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
           <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>
           <el-button link type="primary" @click="filterExpanded = !filterExpanded">
             {{ filterExpanded ? '收起' : '展开' }}
@@ -121,17 +121,17 @@
             <span class="muted">共 {{ total }} 台</span>
           </div>
           <div class="toolbar-actions">
-            <el-button type="primary" :icon="Tools" :disabled="selection.length === 0" @click="openRepairDialog()">
-              维修派单{{ selection.length > 1 ? `（${selection.length}）` : '' }}
-            </el-button>
-            <el-button type="danger" plain :icon="Bell" :disabled="selection.length === 0" @click="openWarningDialog()">
-              发布预警
-            </el-button>
-            <el-button :icon="Download" :loading="exporting" @click="handleExport">导出</el-button>
-            <el-popover placement="bottom-end" :width="200" trigger="click">
-              <template #reference>
-                <el-button :icon="Operation">列设置</el-button>
-              </template>
+          <el-button type="primary" :icon="Tools" plain :disabled="selection.length === 0" @click="openRepairDialog()">
+            维修派单{{ selection.length > 1 ? `（${selection.length}）` : '' }}
+          </el-button>
+          <el-button type="danger" plain :icon="Bell" :disabled="selection.length === 0" @click="openWarningDialog()">
+            发布预警
+          </el-button>
+          <el-button type="warning" plain :icon="Download" :loading="exporting" @click="handleExport">导出</el-button>
+          <el-popover placement="bottom-end" :width="200" trigger="click">
+            <template #reference>
+              <el-button plain :icon="Operation">列设置</el-button>
+            </template>
               <div class="column-setting">
                 <div class="column-setting-head">
                   <span>显示字段</span>
@@ -146,7 +146,7 @@
         </div>
       </template>
 
-      <el-table v-loading="loading" :data="tableData" border stripe @selection-change="handleSelectionChange">
+      <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="50" align="center" />
         <el-table-column v-if="isColumnVisible('equipmentName')" label="设备名称" prop="equipmentName"
           min-width="150" show-overflow-tooltip />

src/views/subSystem/drainage/jcsj/yjsdgl.vue

@@ -33,13 +33,7 @@
     </el-card>
 
     <!-- 查询条件 -->
-    <el-card shadow="never" class="filter-card">
-      <template #header>
-        <div class="card-header">
-          <div class="card-title"><span>查询条件</span></div>
-        </div>
-      </template>
-      <el-form :model="query" :inline="true" label-width="80px" class="filter-form">
+    <el-form ref="queryRef" :model="query" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="点位编码">
           <el-input v-model="query.pointCode" placeholder="请输入" clearable style="width: 160px"
             @keyup.enter="handleQuery" />
@@ -65,29 +59,27 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
-          <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
-      </el-form>
-    </el-card>
+    </el-form>
 
     <!-- 点位清单 -->
-    <el-card shadow="never" class="table-card">
-      <template #header>
-        <div class="card-header">
-          <div class="card-title"><span>点位清单</span></div>
-        </div>
-      </template>
-
-      <div class="toolbar">
-        <el-button v-hasPermi="['drainage:waterlogging:add']" type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button v-hasPermi="['drainage:waterlogging:remove']" type="danger" :icon="Delete"
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['drainage:waterlogging:add']" type="primary" plain icon="Plus"
+          @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['drainage:waterlogging:remove']" type="danger" plain icon="Delete"
           :disabled="selectedIds.length === 0" @click="handleBatchDelete">
           删除{{ selectedIds.length ? `(${selectedIds.length})` : '' }}
         </el-button>
-      </div>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadAll"></right-toolbar>
+    </el-row>
 
-      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%"
+      <el-table v-loading="loading" :data="tableData" style="width: 100%"
         @selection-change="handleSelectionChange" @row-dblclick="openDetail">
         <el-table-column type="selection" width="50" align="center" />
         <el-table-column label="点位编码" prop="pointCode" min-width="110" show-overflow-tooltip />
@@ -135,10 +127,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
-        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-        class="pager" @size-change="handleSizeChange" @current-change="loadPage" />
-    </el-card>
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
+        @pagination="loadPage" />
 
     <!-- 详情抽屉（只读） -->
     <el-drawer v-model="detailVisible" title="易积水点详情" size="700px" direction="rtl"
@@ -388,7 +378,7 @@
 <script setup name="Yjsdgl">
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Aim, Delete, Plus, Refresh, RefreshLeft, Search } from '@element-plus/icons-vue'
+import { Aim, Refresh } from '@element-plus/icons-vue'
 import GisMapCanvas from '@/components/GisMapCanvas.vue'
 import DrainageLiveTile from '@/views/subSystem/drainage/spjc/DrainageLiveTile.vue'
 import { useDict } from '@/utils/dict'
@@ -451,6 +441,8 @@ const emptyQuery = () => ({
   riskLevel: ''
 })
 const query = ref(emptyQuery())
+const showSearch = ref(true)
+const queryRef = ref()
 
 // ==================== 列表 ====================
 const tableData = ref([])

src/views/subSystem/drainage/jcyj/dqyjgl.vue

@@ -36,32 +36,48 @@
     </div>
 
     <!-- ==================== 筛选区 ==================== -->
-    <div class="filter-panel">
-      <div class="filter-tabs">
-        <div class="tab-item" :class="{ active: activeTab === tab }" v-for="tab in tabs" :key="tab"
-          @click="handleTabChange(tab)">{{ tab }}</div>
-      </div>
-      <div class="filter-form">
-        <el-input v-model="filters.equipmentName" placeholder="预警名称" clearable style="width:150px" />
-        <el-date-picker v-model="filters.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
-          end-placeholder="结束日期" style="width:260px" value-format="YYYY-MM-DD" />
-        <el-select v-model="filters.warningLevel" placeholder="预警级别" clearable style="width:150px">
+    <el-form ref="queryRef" :model="filters" :inline="true" v-show="showSearch" label-width="80px">
+      <el-form-item label="预警名称">
+        <el-input v-model="filters.equipmentName" placeholder="请输入预警名称" clearable style="width: 200px"
+          @keyup.enter="handleSearch" />
+      </el-form-item>
+      <el-form-item label="预警级别">
+        <el-select v-model="filters.warningLevel" placeholder="请选择预警级别" clearable style="width: 180px">
           <el-option label="严重" :value="1" />
           <el-option label="重要" :value="2" />
           <el-option label="一般" :value="3" />
         </el-select>
-        <el-select v-model="filters.warningType" placeholder="预警类型" clearable filterable style="width:160px">
+      </el-form-item>
+      <el-form-item label="预警类型">
+        <el-select v-model="filters.warningType" placeholder="请选择预警类型" clearable filterable style="width: 180px">
           <el-option v-for="item in warningTypeOptions" :key="item.dictValue" :label="item.dictLabel"
             :value="item.dictValue" />
         </el-select>
-        <el-button type="primary" @click="handleSearch">搜索</el-button>
-        <el-button @click="handleClear">重置</el-button>
-      </div>
-    </div>
+      </el-form-item>
+      <el-form-item label="预警时间" style="width: 308px">
+        <el-date-picker v-model="filters.dateRange" type="daterange" range-separator="-"
+          start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px" value-format="YYYY-MM-DD" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
+        <el-button icon="Refresh" @click="handleClear">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- ==================== 状态分类 + 操作栏 ==================== -->
+    <el-row :gutter="10" class="mb8">
+      <el-radio-group v-model="activeTab" @change="handleTabChange">
+        <el-radio-button v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</el-radio-button>
+      </el-radio-group>
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Refresh" :loading="loading" @click="loadData">刷新</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadData"></right-toolbar>
+    </el-row>
 
     <!-- ==================== 数据表格 ==================== -->
-    <div class="table-panel">
-      <el-table :data="tableData" border stripe style="width:100%" v-loading="loading">
+    <div>
+      <el-table :data="tableData" style="width:100%" v-loading="loading">
         <el-table-column prop="warningNo" label="预警编号" width="180" show-overflow-tooltip />
         <el-table-column prop="equipmentName" label="预警名称" min-width="130" show-overflow-tooltip />
         <el-table-column label="预警类型" width="130" align="center" show-overflow-tooltip>
@@ -101,9 +117,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
-        :total="total" layout="total, sizes, prev, pager, next, jumper"
-        style="margin-top: 16px; justify-content: flex-end" @size-change="loadData" @current-change="loadData" />
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
+        @pagination="loadData" />
     </div>
 
     <!-- ==================== 查看详情弹窗 ==================== -->
@@ -334,6 +349,8 @@ const ringCharts = [
 // ==================== 筛选 ====================
 const tabs = ['全部', '草稿', '待办', '处置中', '已发布']
 const activeTab = ref('全部')
+const showSearch = ref(true)
+const queryRef = ref()
 const filters = ref({
   equipmentName: '',
   dateRange: null,

src/views/subSystem/drainage/jcyj/lsyjgl.vue

@@ -24,49 +24,54 @@
     </div>
 
     <!-- ==================== 搜索区域 ==================== -->
-    <div class="search-panel">
-      <div class="search-form">
-        <div class="form-item">
-          <span class="form-label">预警名称：</span>
-          <el-input v-model="filters.equipmentName" placeholder="请输入" clearable style="width:170px" />
-        </div>
-        <div class="form-item">
-          <span class="form-label">预警类型：</span>
-          <el-select v-model="filters.warningType" placeholder="请选择" clearable filterable style="width:160px">
-            <el-option v-for="item in warningTypeOptions" :key="item.dictValue"
-              :label="item.dictLabel" :value="item.dictValue" />
-          </el-select>
-        </div>
-        <div class="form-item">
-          <span class="form-label">预警级别：</span>
-          <el-select v-model="filters.warningLevel" placeholder="请选择" clearable style="width:130px">
-            <el-option label="严重" :value="1" />
-            <el-option label="重要" :value="2" />
-            <el-option label="一般" :value="3" />
-          </el-select>
-        </div>
-        <div class="form-item">
-          <span class="form-label">处理状态：</span>
-          <el-select v-model="filters.status" placeholder="请选择" clearable style="width:130px">
-            <el-option label="已处置" value="HANDLED" />
-            <el-option label="已解除" value="CLOSED" />
-          </el-select>
-        </div>
-        <div class="form-item">
-          <span class="form-label">预警时间：</span>
-          <el-date-picker v-model="filters.dateRange" type="daterange" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
-            style="width:240px" />
-        </div>
-        <el-button type="primary" @click="handleSearch">搜索</el-button>
-        <el-button @click="handleClear">清除</el-button>
-        <el-button :icon="Download" :loading="exporting" @click="handleExport">导出归档清单</el-button>
-      </div>
-    </div>
+    <el-form ref="queryRef" :model="filters" :inline="true" v-show="showSearch" label-width="80px">
+      <el-form-item label="预警名称">
+        <el-input v-model="filters.equipmentName" placeholder="请输入预警名称" clearable style="width: 200px"
+          @keyup.enter="handleSearch" />
+      </el-form-item>
+      <el-form-item label="预警类型">
+        <el-select v-model="filters.warningType" placeholder="请选择预警类型" clearable filterable style="width: 180px">
+          <el-option v-for="item in warningTypeOptions" :key="item.dictValue" :label="item.dictLabel"
+            :value="item.dictValue" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="预警级别">
+        <el-select v-model="filters.warningLevel" placeholder="请选择预警级别" clearable style="width: 180px">
+          <el-option label="严重" :value="1" />
+          <el-option label="重要" :value="2" />
+          <el-option label="一般" :value="3" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="处理状态">
+        <el-select v-model="filters.status" placeholder="请选择处理状态" clearable style="width: 180px">
+          <el-option label="已处置" value="HANDLED" />
+          <el-option label="已解除" value="CLOSED" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="预警时间" style="width: 308px">
+        <el-date-picker v-model="filters.dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
+          end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 240px" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
+        <el-button icon="Refresh" @click="handleClear">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- ==================== 操作栏 ==================== -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" :loading="exporting" @click="handleExport">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Refresh" :loading="loading" @click="loadData">刷新</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadData"></right-toolbar>
+    </el-row>
 
     <!-- ==================== 数据表格 ==================== -->
-    <div class="table-panel">
-      <el-table :data="tableData" border stripe style="width:100%" v-loading="loading"
+    <div>
+      <el-table :data="tableData" style="width:100%" v-loading="loading"
         empty-text="暂无已处置 / 已解除的预警记录">
         <el-table-column label="归档编号" width="150" show-overflow-tooltip>
           <template #default="{ row }">{{ archiveNoOf(row) }}</template>
@@ -114,9 +119,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
-        :total="total" layout="total, sizes, prev, pager, next, jumper"
-        style="margin-top: 16px; justify-content: flex-end" @size-change="loadData" @current-change="loadData" />
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
+        @pagination="loadData" />
     </div>
 
     <!-- ==================== 查看详情弹窗 ==================== -->
@@ -226,7 +230,6 @@
 <script setup name="Lsyjgl">
 import { ref, reactive, computed, onMounted, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Download } from '@element-plus/icons-vue'
 import * as XLSX from 'xlsx'
 import { saveAs } from 'file-saver'
 import * as echarts from 'echarts'
@@ -379,6 +382,8 @@ const pageNum = ref(1)
 const pageSize = ref(10)
 
 // ==================== 搜索筛选 ====================
+const showSearch = ref(true)
+const queryRef = ref()
 const filters = reactive({
   equipmentName: '',
   warningType: '',

src/views/subSystem/drainage/spjc/spfzgl.vue

@@ -4,9 +4,9 @@
       <el-tree :data="tree" node-key="id" highlight-current default-expand-all @node-click="selectNode"><template #default="{data}">{{ data.label }}（{{ data.count }}）</template></el-tree>
     </aside>
     <main>
-      <el-form :inline="true" @submit.prevent="search"><el-form-item label="视频设备"><el-input v-model="keyword" clearable placeholder="名称/编码" @keyup.enter="search" /></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button><el-button @click="refresh">刷新</el-button></el-form-item></el-form>
+      <el-form :inline="true" @submit.prevent="search"><el-form-item label="视频设备"><el-input v-model="keyword" clearable placeholder="名称/编码" @keyup.enter="search" /></el-form-item><el-form-item><el-button type="primary" icon="Search" @click="search">搜索</el-button><el-button icon="Refresh" @click="refresh">刷新</el-button></el-form-item></el-form>
       <el-alert v-if="error" :title="error" type="error" :closable="false" />
-      <el-table :data="pageRows" border empty-text="当前分组暂无视频">
+      <el-table :data="pageRows" empty-text="当前分组暂无视频">
         <el-table-column prop="deviceName" label="视频设备" min-width="170" /><el-table-column prop="deviceCode" label="设备编码" min-width="180" show-overflow-tooltip />
         <el-table-column prop="districtName" label="所属片区" width="100" /><el-table-column label="易积水点" min-width="140"><template #default="{row}">{{ row.pointName || '未关联' }}</template></el-table-column><el-table-column prop="typeName" label="接入类型" width="100" />
         <el-table-column label="操作" width="210"><template #default="{row}">

src/views/subSystem/drainage/spjc/spgngl.vue

@@ -4,10 +4,10 @@
       <el-form-item label="视频设备"><el-input v-model="query.query" clearable placeholder="设备名称/编码" @keyup.enter="search" /></el-form-item>
       <el-form-item label="所属片区"><el-select v-model="query.district" clearable style="width:160px"><el-option v-for="d in districtOptions" :key="d.value" :label="d.label" :value="Number(d.value)" /></el-select></el-form-item>
       <el-form-item label="关联状态"><el-select v-model="query.unbound" clearable style="width:160px"><el-option label="已关联" :value="false" /><el-option label="未关联" :value="true" /></el-select></el-form-item>
-      <el-form-item><el-button type="primary" @click="search">查询</el-button><el-button @click="reset">重置</el-button></el-form-item>
+      <el-form-item><el-button type="primary" icon="Search" @click="search">搜索</el-button><el-button icon="Refresh" @click="reset">重置</el-button></el-form-item>
     </el-form>
     <el-alert v-if="error" :title="error" type="error" show-icon :closable="false" />
-    <el-table v-loading="loading" :data="rows" border empty-text="暂无排水视频设备，请先在视频设备管理中纳管">
+    <el-table v-loading="loading" :data="rows" empty-text="暂无排水视频设备，请先在视频设备管理中纳管">
       <el-table-column prop="deviceCode" label="设备编码" min-width="180" show-overflow-tooltip /><el-table-column prop="deviceName" label="设备名称" min-width="160" />
       <el-table-column prop="districtName" label="所属片区" width="100" /><el-table-column prop="location" label="安装位置" min-width="180" show-overflow-tooltip />
       <el-table-column prop="typeName" label="接入类型" width="110" /><el-table-column label="关联易积水点" min-width="160"><template #default="{ row }">{{ row.pointName || '未关联' }}</template></el-table-column>