跟新水位，反正，水浸报警信息

src/components/DataTimePicker/index.vue

@@ -14,9 +14,8 @@
 
 <script setup>
 import { ref, computed } from "vue";
-const selectedDateRange = ref([]);
 const emit = defineEmits();
-
+const selectedDateRange = ref();
 const shortcuts = [
   {
     text: "过去一周",
@@ -56,9 +55,8 @@ function getManholeAllDataPicker(val) {
     const hours = String(d.getHours()).padStart(2, "0");
     const minutes = String(d.getMinutes()).padStart(2, "0");
     const seconds = String(d.getSeconds()).padStart(2, "0");
-    return `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
   };
-
   const formattedDateRange = computed(() => {
     if (!selectedDateRange.value || selectedDateRange.value.length !== 2) return null;
     return {
@@ -66,8 +64,7 @@ function getManholeAllDataPicker(val) {
       end: formatDate(selectedDateRange.value[1]),
     };
   });
-  console.log(111, formattedDateRange);
-  emit("getDataPicker", val);
+  emit("getDataPicker", formattedDateRange.value);
 }
 </script>
 <style scoped>

src/views/device/manhole/ldzh/fzbj.vue

@@ -1,98 +1,106 @@
 <template>
   <div class="p-5">
-    <!-- 搜索表单 -->
-    <el-form :model="searchForm" label-width="80px">
-      <el-row>
-        <dataTimePicker @getDataPicker="getDataTime"></dataTimePicker>
-        <el-col :span="12">
-          <el-form-item class="ml-0">
-            <el-button class="ml-0" type="primary" @click="search">搜索</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+    <div class="w-30% flex items-center gap-4 mb-4">
+      <span class="whitespace-nowrap">选择时间：</span>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        class="flex-grow w-full"
+        clearable
+      />
+      <el-button type="primary" @click="search">搜索</el-button>
+    </div>
 
-    <!-- 表格 -->
-    <el-table :data="filteredTableData" border>
-      <el-table-column
-        prop="imeiCardNumber"
-        label="设备编号"
-        width="200"
-      ></el-table-column>
-      <el-table-column prop="batteryLevel" label="电池电量"></el-table-column>
-      <el-table-column prop="alarmStatus" label="报警状态"></el-table-column>
-      <el-table-column prop="tiltAngle" label="倾斜角度"></el-table-column>
-      <el-table-column prop="createTime" label="创建时间" width="400"></el-table-column>
+    <el-table :data="tableData" v-loading="tableLoading" border stripe>
+      <el-table-column prop="imeiCardNumber" label="设备编号" width="200" />
+      <el-table-column prop="batteryLevel" label="电池电量" />
+      <el-table-column prop="alarmStatus" label="报警状态" />
+      <el-table-column prop="tiltAngle" label="倾斜角度" />
+      <el-table-column prop="createTime" label="创建时间" width="400" />
     </el-table>
+
     <pagination
       v-show="totals > 0"
       :total="totals"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
+      v-model:page="currentPage"
+      v-model:limit="pageSize"
       @pagination="getManholeAllData"
     />
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
 import { getflipalarmDataAll } from "@/api/ldzh/index";
-import { computed, ref } from "vue";
-import { Delete, Edit, Search } from "@element-plus/icons-vue";
-// 表格数据
-const tableData = ref();
+import { parseTime } from "@/utils/ruoyi.js";
+
+const tableData = ref([]);
 const totals = ref(0);
-const queryParams = {
-  pageNum: 1,
-  pageSize: 10,
+const dateRange = ref([]);
+const tableLoading = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 构建查询参数
+const buildQueryParams = () => ({
+  pageNum: currentPage.value,
+  pageSize: pageSize.value,
   query: [
-    {
-      column: "alarm_status",
-      type: "ne",
-      value: "0",
-    },
+    { column: "alarm_status", type: "ne", value: "0" },
+    ...(dateRange.value?.length === 2
+      ? [
+          {
+            column: "create_time",
+            type: "between",
+            value: `${parseTime(dateRange.value[0])},${parseTime(dateRange.value[1])}`,
+          },
+        ]
+      : []),
   ],
-};
-const { proxy } = getCurrentInstance();
-
-// 搜索条件
-const searchForm = ref({
-  id: "",
 });
 
-// 当前选中的井盖信息
-const selectedCover = ref({});
+// 获取数据
+const getManholeAllData = async () => {
+  try {
+    tableLoading.value = true;
+    const res = await getflipalarmDataAll(buildQueryParams());
 
-// 根据搜索条件过滤数据
-const filteredTableData = computed(() => {
-  if (!Object.values(searchForm.value).some((value) => value)) {
-    return tableData.value;
-  }
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
 
-  return tableData.value.filter((row) => {
-    const matches = [searchForm.value.id && row.id.includes(searchForm.value.id)];
-    return matches.some((match) => match);
-  });
-});
+    totals.value = res.data.total;
+    tableData.value = res.data.records || [];
 
-//时间选择
-function getDataTime(value) {}
+    if (totals.value === 0) {
+      ElMessage.warning("暂无数据");
+    }
+  } catch (error) {
+    console.error("获取数据失败:", error);
+    ElMessage.error("数据加载失败，请稍后重试");
+  } finally {
+    tableLoading.value = false;
+  }
+};
 
-// 搜索逻辑
-function search() {
-  queryParams.pageNum = 1;
+// 搜索时重置页码
+const search = () => {
+  currentPage.value = 1;
   getManholeAllData();
-  console.log(112);
-}
+};
 
-//获取井盖倾斜全部信息
-function getManholeAllData() {
-  console.log(23);
-  getflipalarmDataAll(queryParams).then((res) => {
-    tableData.value = res.data.records;
-    totals.value = res.data.total;
-  });
-}
-getManholeAllData();
+// 初始化加载
+onMounted(getManholeAllData);
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+  max-width: 400px;
+}
+</style>

src/views/device/manhole/ldzh/sqbj.vue

@@ -1,145 +1,106 @@
 <template>
   <div class="p-5">
-    <!-- 搜索表单 -->
-    <el-form :model="searchForm" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="设备编号">
-            <el-input v-model="searchForm.id" placeholder="请输入井盖编号"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item class="ml-0">
-            <el-button class="ml-0" type="primary" @click="search">搜索</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+    <div class="w-30% flex items-center gap-4 mb-4">
+      <span class="whitespace-nowrap">选择时间：</span>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        class="flex-grow w-full"
+        clearable
+      />
+      <el-button type="primary" @click="search">搜索</el-button>
+    </div>
 
-    <!-- 表格 -->
-    <el-table :data="filteredTableData" border>
-      <el-table-column
-        prop="imeiCardNumber"
-        label="设备编号"
-        width="200"
-      ></el-table-column>
-      <el-table-column prop="batteryLevel" label="电池电量"></el-table-column>
-      <el-table-column
-        prop="waterInfiltrationAlarmStatus"
-        label="报警状态"
-      ></el-table-column>
-      <el-table-column prop="tiltAngle" label="倾斜角度"></el-table-column>
-      <el-table-column prop="createTime" label="创建时间" width="400"></el-table-column>
-
-      <!-- <el-table-column label="操作">
-        <template #default="{ row, $index }">
-          <el-button size="small" :icon="Search" circle @click="showDetail(scope.row)" />
-        </template>
-      </el-table-column> -->
+    <el-table :data="tableData" v-loading="tableLoading" border stripe>
+      <el-table-column prop="imeiCardNumber" label="设备编号" width="200" />
+      <el-table-column prop="batteryLevel" label="电池电量" />
+      <el-table-column prop="alarmStatus" label="报警状态" />
+      <el-table-column prop="tiltAngle" label="倾斜角度" />
+      <el-table-column prop="createTime" label="创建时间" width="400" />
     </el-table>
 
-    <!-- 查看详情弹窗 -->
-    <el-dialog title="井盖详情" v-model="dialogVisible">
-      <el-descriptions :column="1">
-        <el-descriptions-item label="设备名称">{{
-          selectedCover.deviceName
-        }}</el-descriptions-item>
-        <el-descriptions-item label="设备编号">{{
-          selectedCover.deviceNumber
-        }}</el-descriptions-item>
-        <el-descriptions-item label="设备类型">{{
-          selectedCover.type
-        }}</el-descriptions-item>
-        <el-descriptions-item label="设备型号">{{
-          selectedCover.model
-        }}</el-descriptions-item>
-        <el-descriptions-item label="位置">{{
-          selectedCover.location
-        }}</el-descriptions-item>
-        <el-descriptions-item label="报警状态">{{
-          selectedCover.alarmStatus
-        }}</el-descriptions-item>
-        <el-descriptions-item label="在线状态">{{
-          selectedCover.onlineStatus
-        }}</el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{
-          selectedCover.createTime
-        }}</el-descriptions-item>
-        <el-descriptions-item label="	修改时间">{{
-          selectedCover.updateTime
-        }}</el-descriptions-item>
-        <el-descriptions-item label="备注">{{
-          selectedCover.remarks
-        }}</el-descriptions-item>
-      </el-descriptions>
-    </el-dialog>
+    <pagination
+      v-show="totals > 0"
+      :total="totals"
+      v-model:page="currentPage"
+      v-model:limit="pageSize"
+      @pagination="getManholeAllData"
+    />
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
 import { getflipalarmDataAll } from "@/api/ldzh/index";
-import { computed, ref } from "vue";
-import { Delete, Edit, Search } from "@element-plus/icons-vue";
-// 表格数据
-const tableData = ref();
-const { proxy } = getCurrentInstance();
+import { parseTime } from "@/utils/ruoyi.js";
+
+const tableData = ref([]);
+const totals = ref(0);
+const dateRange = ref([]);
+const tableLoading = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
 
-// 搜索条件
-const searchForm = ref({
-  id: "",
-  name: "",
-  district: "",
-  street: "",
-  road: "",
-  location: "",
+// 构建查询参数
+const buildQueryParams = () => ({
+  pageNum: currentPage.value,
+  pageSize: pageSize.value,
+  query: [
+    { column: "water_infiltration_alarm_status", type: "ne", value: "0" },
+    ...(dateRange.value?.length === 2
+      ? [
+          {
+            column: "create_time",
+            type: "between",
+            value: `${parseTime(dateRange.value[0])},${parseTime(dateRange.value[1])}`,
+          },
+        ]
+      : []),
+  ],
 });
 
-// 是否显示详情弹窗
-const dialogVisible = ref(false);
-// 当前选中的井盖信息
-const selectedCover = ref({});
+// 获取数据
+const getManholeAllData = async () => {
+  try {
+    tableLoading.value = true;
+    const res = await getflipalarmDataAll(buildQueryParams());
 
-// 根据搜索条件过滤数据
-const filteredTableData = computed(() => {
-  if (!Object.values(searchForm.value).some((value) => value)) {
-    return tableData.value;
-  }
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
 
-  return tableData.value.filter((row) => {
-    const matches = [
-      searchForm.value.id && row.id.includes(searchForm.value.id),
-      searchForm.value.name && row.name.includes(searchForm.value.name),
-      searchForm.value.district && row.district.includes(searchForm.value.district),
-      searchForm.value.street && row.street.includes(searchForm.value.street),
-      searchForm.value.road && row.road.includes(searchForm.value.road),
-      searchForm.value.location && row.location.includes(searchForm.value.location),
-    ];
-    return matches.some((match) => match);
-  });
-});
+    totals.value = res.data.total;
+    tableData.value = res.data.records || [];
 
-// 搜索逻辑
-function search() {}
+    if (totals.value === 0) {
+      ElMessage.warning("暂无数据");
+    }
+  } catch (error) {
+    console.error("获取数据失败:", error);
+    ElMessage.error("数据加载失败，请稍后重试");
+  } finally {
+    tableLoading.value = false;
+  }
+};
 
-// 显示详情
-function showDetail(row) {
-  selectedCover.value = row;
-  dialogVisible.value = true;
-}
+// 搜索时重置页码
+const search = () => {
+  currentPage.value = 1;
+  getManholeAllData();
+};
 
-//获取井盖倾斜全部信息
-function getManholeAllData() {
-  const query = [];
-  query.push({
-    column: "water_infiltration_alarm_status",
-    type: "ne",
-    value: "0",
-  });
-  getflipalarmDataAll(query).then((res) => {
-    tableData.value = res.data;
-  });
-}
-getManholeAllData();
+// 初始化加载
+onMounted(getManholeAllData);
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+  max-width: 400px;
+}
+</style>

src/views/device/manhole/ldzh/swbj.vue

@@ -1,89 +1,106 @@
 <template>
   <div class="p-5">
-    <!-- 搜索表单 -->
-    <el-form :model="searchForm" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="设备编号">
-            <el-input v-model="searchForm.id" placeholder="请输入井盖编号"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item class="ml-0">
-            <el-button class="ml-0" type="primary" @click="search">搜索</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+    <div class="w-30% flex items-center gap-4 mb-4">
+      <span class="whitespace-nowrap">选择时间：</span>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        class="flex-grow w-full"
+        clearable
+      />
+      <el-button type="primary" @click="search">搜索</el-button>
+    </div>
 
-    <!-- 表格 -->
-    <!-- 表格 -->
-    <el-table :data="tableData.value" border>
-      <el-table-column
-        prop="imeiCardNumber"
-        label="设备编号"
-        width="200"
-      ></el-table-column>
-      <el-table-column prop="batteryLevel" label="电池电量"></el-table-column>
-      <el-table-column prop="waterLevelAlarmStatus" label="报警状态"></el-table-column>
-      <el-table-column prop="tiltAngle" label="倾斜角度"></el-table-column>
-      <el-table-column prop="createTime" label="创建时间" width="400"></el-table-column>
-
-      <!-- <el-table-column label="操作">
-        <template #default="{ row, $index }">
-          <el-button size="small" :icon="Search" circle @click="showDetail(scope.row)" />
-        </template>
-      </el-table-column> -->
+    <el-table :data="tableData" v-loading="tableLoading" border stripe>
+      <el-table-column prop="imeiCardNumber" label="设备编号" width="200" />
+      <el-table-column prop="batteryLevel" label="电池电量" />
+      <el-table-column prop="alarmStatus" label="报警状态" />
+      <el-table-column prop="tiltAngle" label="倾斜角度" />
+      <el-table-column prop="createTime" label="创建时间" width="400" />
     </el-table>
+
+    <pagination
+      v-show="totals > 0"
+      :total="totals"
+      v-model:page="currentPage"
+      v-model:limit="pageSize"
+      @pagination="getManholeAllData"
+    />
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
 import { getflipalarmDataAll } from "@/api/ldzh/index";
-import { computed, ref } from "vue";
-import { Delete, Edit, Search } from "@element-plus/icons-vue";
-// 表格数据
-const tableData = ref();
-const { proxy } = getCurrentInstance();
+import { parseTime } from "@/utils/ruoyi.js";
 
-// 搜索条件
-const searchForm = ref({
-  id: "",
-  name: "",
-  district: "",
-  street: "",
-  road: "",
-  location: "",
+const tableData = ref([]);
+const totals = ref(0);
+const dateRange = ref([]);
+const tableLoading = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 构建查询参数
+const buildQueryParams = () => ({
+  pageNum: currentPage.value,
+  pageSize: pageSize.value,
+  query: [
+    { column: "water_level_alarm_status", type: "ne", value: "0" },
+    ...(dateRange.value?.length === 2
+      ? [
+          {
+            column: "create_time",
+            type: "between",
+            value: `${parseTime(dateRange.value[0])},${parseTime(dateRange.value[1])}`,
+          },
+        ]
+      : []),
+  ],
 });
 
-// 是否显示详情弹窗
-const dialogVisible = ref(false);
-// 当前选中的井盖信息
-const selectedCover = ref({});
+// 获取数据
+const getManholeAllData = async () => {
+  try {
+    tableLoading.value = true;
+    const res = await getflipalarmDataAll(buildQueryParams());
 
-// 搜索逻辑
-function search() {}
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
 
-// 显示详情
-function showDetail(row) {
-  selectedCover.value = row;
-  dialogVisible.value = true;
-}
+    totals.value = res.data.total;
+    tableData.value = res.data.records || [];
 
-//获取井盖倾斜全部信息
-function getManholeAllData() {
-  const query = [];
-  query.push({
-    column: "water_level_alarm_status",
-    type: "ne",
-    value: "0",
-  });
-  getflipalarmDataAll(query).then((res) => {
-    console.log(111, res);
-    // tableData.value = res.data.records;
-  });
-}
-getManholeAllData();
+    if (totals.value === 0) {
+      ElMessage.warning("暂无数据");
+    }
+  } catch (error) {
+    console.error("获取数据失败:", error);
+    ElMessage.error("数据加载失败，请稍后重试");
+  } finally {
+    tableLoading.value = false;
+  }
+};
+
+// 搜索时重置页码
+const search = () => {
+  currentPage.value = 1;
+  getManholeAllData();
+};
+
+// 初始化加载
+onMounted(getManholeAllData);
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+  max-width: 400px;
+}
+</style>