跟新井盖

src/api/ldzh/index.js

@@ -29,3 +29,18 @@ export function alterManhole(data) {
   })
 }
 
+
+// 查询井盖翻转报警信息列表
+export function getflipalarmDataAll(arr) {
+  const json = JSON.stringify(arr.query);
+  return request({
+    url: '/manholeData/findByPage',
+    method: 'get',
+    params: {
+      conditionJson:encodeURIComponent(json),
+      pageNum:arr.pageNum,
+      pageSize:arr.pageSize
+    }
+  })
+}
+

src/components/DataTimePicker/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="block">
+    <el-date-picker
+      v-model="selectedDateRange"
+      type="datetimerange"
+      :shortcuts="shortcuts"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      @change="getManholeAllDataPicker"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+const selectedDateRange = ref([]);
+const emit = defineEmits();
+
+const shortcuts = [
+  {
+    text: "过去一周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setDate(start.getDate() - 7);
+      return [start, end];
+    },
+  },
+  {
+    text: "过去一个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setMonth(start.getMonth() - 1);
+      return [start, end];
+    },
+  },
+  {
+    text: "过去三个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setMonth(start.getMonth() - 3);
+      return [start, end];
+    },
+  },
+];
+function getManholeAllDataPicker(val) {
+  const formatDate = (date) => {
+    if (!date) return "";
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    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}`;
+  };
+
+  const formattedDateRange = computed(() => {
+    if (!selectedDateRange.value || selectedDateRange.value.length !== 2) return null;
+    return {
+      start: formatDate(selectedDateRange.value[0]),
+      end: formatDate(selectedDateRange.value[1]),
+    };
+  });
+  console.log(111, formattedDateRange);
+  emit("getDataPicker", val);
+}
+</script>
+<style scoped>
+.block {
+  text-align: center;
+}
+
+.block:last-child {
+  border-right: none;
+}
+
+.block .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>

src/components/Pagination/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'hidden': hidden }" class="pagination-container">
+  <div :class="{ hidden: hidden }" class="pagination-container">
     <el-pagination
       :background="background"
       v-model:current-page="currentPage"
@@ -15,83 +15,82 @@
 </template>
 
 <script setup>
-import { scrollTo } from '@/utils/scroll-to'
+import { scrollTo } from "@/utils/scroll-to";
 
 const props = defineProps({
   total: {
     required: true,
-    type: Number
+    type: Number,
   },
   page: {
     type: Number,
-    default: 1
+    default: 1,
   },
   limit: {
     type: Number,
-    default: 20
+    default: 20,
   },
   pageSizes: {
     type: Array,
     default() {
-      return [10, 20, 30, 50]
-    }
+      return [10, 20, 30, 50];
+    },
   },
   // 移动端页码按钮的数量端默认值5
   pagerCount: {
     type: Number,
-    default: document.body.clientWidth < 992 ? 5 : 7
+    default: document.body.clientWidth < 992 ? 5 : 7,
   },
   layout: {
     type: String,
-    default: 'total, sizes, prev, pager, next, jumper'
+    default: "total, sizes, prev, pager, next, jumper",
   },
   background: {
     type: Boolean,
-    default: true
+    default: true,
   },
   autoScroll: {
     type: Boolean,
-    default: true
+    default: true,
   },
   hidden: {
     type: Boolean,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 
 const emit = defineEmits();
 const currentPage = computed({
   get() {
-    return props.page
+    return props.page;
   },
   set(val) {
-    emit('update:page', val)
-  }
-})
+    emit("update:page", val);
+  },
+});
 const pageSize = computed({
   get() {
-    return props.limit
+    return props.limit;
   },
-  set(val){
-    emit('update:limit', val)
-  }
-})
+  set(val) {
+    emit("update:limit", val);
+  },
+});
 function handleSizeChange(val) {
   if (currentPage.value * val > props.total) {
-    currentPage.value = 1
+    currentPage.value = 1;
   }
-  emit('pagination', { page: currentPage.value, limit: val })
+  emit("pagination", { page: currentPage.value, limit: val });
   if (props.autoScroll) {
-    scrollTo(0, 800)
+    scrollTo(0, 800);
   }
 }
 function handleCurrentChange(val) {
-  emit('pagination', { page: val, limit: pageSize.value })
+  emit("pagination", { page: val, limit: pageSize.value });
   if (props.autoScroll) {
-    scrollTo(0, 800)
+    scrollTo(0, 800);
   }
 }
-
 </script>
 
 <style scoped>
@@ -102,4 +101,4 @@ function handleCurrentChange(val) {
 .pagination-container.hidden {
   display: none;
 }
-</style>
+</style>

src/main.js

@@ -43,6 +43,8 @@ import ImageUpload from "@/components/ImageUpload"
 import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
+// 日期组件
+import DataTimePicker from '@/components/DataTimePicker'
 
 const app = createApp(App)
 
@@ -64,6 +66,7 @@ app.component('ImageUpload', ImageUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
+app.component('dataTimePicker', DataTimePicker)
 
 app.use(router)
 app.use(store)

src/views/device/electricity/components/electricity-detail.vue

@@ -1,10 +1,10 @@
 <script setup>
-import {computed, onMounted, ref} from 'vue';
+import { computed, onMounted, ref } from "vue";
 import request from "@/utils/request.js";
-import {ElMessage} from "element-plus";
-import ECharts from 'vue-echarts';
-import 'echarts';
-import {parseTime} from "@/utils/ruoyi.js";
+import { ElMessage } from "element-plus";
+import ECharts from "vue-echarts";
+import "echarts";
+import { parseTime } from "@/utils/ruoyi.js";
 
 // Data refs
 const newElectricityData = ref(null);
@@ -14,36 +14,36 @@ const tableLoading = ref(false);
 const totalRecords = ref(0);
 const currentPage = ref(1);
 const pageSize = ref(10);
-const searchQuery = ref('');
+const searchQuery = ref("");
 const dateRange = ref([]);
 const props = defineProps({
   tableNumber: {
     type: String,
-    required: true
+    required: true,
   },
 });
 
 // Computed properties for dashboard metrics
 const formattedVoltages = computed(() => {
-  if (!newElectricityData.value) return {a: '0', b: '0', c: '0'};
+  if (!newElectricityData.value) return { a: "0", b: "0", c: "0" };
   return {
     a: parseFloat(newElectricityData.value.aVoltage || 0).toFixed(2),
     b: parseFloat(newElectricityData.value.bVoltage || 0).toFixed(2),
-    c: parseFloat(newElectricityData.value.cVoltage || 0).toFixed(2)
+    c: parseFloat(newElectricityData.value.cVoltage || 0).toFixed(2),
   };
 });
 
 const formattedCurrents = computed(() => {
-  if (!newElectricityData.value) return {a: '0', b: '0', c: '0'};
+  if (!newElectricityData.value) return { a: "0", b: "0", c: "0" };
   return {
     a: parseFloat(newElectricityData.value.aCurrent || 0).toFixed(2),
     b: parseFloat(newElectricityData.value.bCurrent || 0).toFixed(2),
-    c: parseFloat(newElectricityData.value.cCurrent || 0).toFixed(2)
+    c: parseFloat(newElectricityData.value.cCurrent || 0).toFixed(2),
   };
 });
 
 const totalPowerConsumption = computed(() => {
-  if (!newElectricityData.value) return '0';
+  if (!newElectricityData.value) return "0";
   return parseFloat(newElectricityData.value.totalElectricity || 0).toFixed(2);
 });
 
@@ -54,46 +54,46 @@ const voltageChartOption = computed(() => {
   const data = electricityRecords.value.slice().reverse();
   return {
     tooltip: {
-      trigger: 'axis'
+      trigger: "axis",
     },
     legend: {
-      data: ['A相电压', 'B相电压', 'C相电压']
+      data: ["A相电压", "B相电压", "C相电压"],
     },
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
     },
     xAxis: {
-      type: 'category',
+      type: "category",
       boundaryGap: false,
-      data: data.map(item => {
+      data: data.map((item) => {
         const date = new Date(item.createTime);
         return `${date.getHours()}:${date.getMinutes()}`;
-      })
+      }),
     },
     yAxis: {
-      type: 'value',
-      name: '电压 (V)'
+      type: "value",
+      name: "电压 (V)",
     },
     series: [
       {
-        name: 'A相电压',
-        type: 'line',
-        data: data.map(item => parseFloat(item.aVoltage || 0))
+        name: "A相电压",
+        type: "line",
+        data: data.map((item) => parseFloat(item.aVoltage || 0)),
       },
       {
-        name: 'B相电压',
-        type: 'line',
-        data: data.map(item => parseFloat(item.bVoltage || 0))
+        name: "B相电压",
+        type: "line",
+        data: data.map((item) => parseFloat(item.bVoltage || 0)),
       },
       {
-        name: 'C相电压',
-        type: 'line',
-        data: data.map(item => parseFloat(item.cVoltage || 0))
-      }
-    ]
+        name: "C相电压",
+        type: "line",
+        data: data.map((item) => parseFloat(item.cVoltage || 0)),
+      },
+    ],
   };
 });
 
@@ -103,51 +103,51 @@ const powerChartOption = computed(() => {
   const data = electricityRecords.value.slice().reverse();
   return {
     tooltip: {
-      trigger: 'axis'
+      trigger: "axis",
     },
     legend: {
-      data: ['总有功功率', 'A相功率', 'B相功率', 'C相功率']
+      data: ["总有功功率", "A相功率", "B相功率", "C相功率"],
     },
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
     },
     xAxis: {
-      type: 'category',
+      type: "category",
       boundaryGap: false,
-      data: data.map(item => {
+      data: data.map((item) => {
         const date = new Date(item.createTime);
         return `${date.getHours()}:${date.getMinutes()}`;
-      })
+      }),
     },
     yAxis: {
-      type: 'value',
-      name: '功率 (kW)'
+      type: "value",
+      name: "功率 (kW)",
     },
     series: [
       {
-        name: '总有功功率',
-        type: 'line',
-        data: data.map(item => parseFloat(item.totalActivePower || 0))
+        name: "总有功功率",
+        type: "line",
+        data: data.map((item) => parseFloat(item.totalActivePower || 0)),
       },
       {
-        name: 'A相功率',
-        type: 'line',
-        data: data.map(item => parseFloat(item.aActivePower || 0))
+        name: "A相功率",
+        type: "line",
+        data: data.map((item) => parseFloat(item.aActivePower || 0)),
       },
       {
-        name: 'B相功率',
-        type: 'line',
-        data: data.map(item => parseFloat(item.bActivePower || 0))
+        name: "B相功率",
+        type: "line",
+        data: data.map((item) => parseFloat(item.bActivePower || 0)),
       },
       {
-        name: 'C相功率',
-        type: 'line',
-        data: data.map(item => parseFloat(item.cActivePower || 0))
-      }
-    ]
+        name: "C相功率",
+        type: "line",
+        data: data.map((item) => parseFloat(item.cActivePower || 0)),
+      },
+    ],
   };
 });
 
@@ -155,15 +155,17 @@ const powerChartOption = computed(() => {
 const getNewElectricityData = async () => {
   loading.value = true;
   try {
-    const arr = [{
-      column: "create_time",
-      type: "orderByDesc"
-    }];
+    const arr = [
+      {
+        column: "create_time",
+        type: "orderByDesc",
+      },
+    ];
 
     const res = await request.get("/messageParse/getAll", {
       params: {
-        conditionJson: encodeURIComponent(JSON.stringify(arr))
-      }
+        conditionJson: encodeURIComponent(JSON.stringify(arr)),
+      },
     });
 
     if (res.code !== 200) {
@@ -188,31 +190,32 @@ const getNewElectricityData = async () => {
 const getElectricityData = async () => {
   tableLoading.value = true;
   try {
-    const conditions = [{
-      column: "create_time",
-      type: "orderByDesc"
-    }];
+    const conditions = [
+      {
+        column: "create_time",
+        type: "orderByDesc",
+      },
+    ];
     conditions.push({
       column: "table_number",
       type: "eq",
-      value: props.tableNumber
-    })
+      value: props.tableNumber,
+    });
 
     // Add search condition if query exists
     if (searchQuery.value) {
       conditions.push({
         column: "table_number",
         type: "like",
-        value: searchQuery.value
+        value: searchQuery.value,
       });
     }
 
     if (dateRange.value && dateRange.value.length === 2) {
-
       conditions.push({
         column: "create_time",
         type: "between",
-        value: parseTime(dateRange.value[0]) + ',' + parseTime(dateRange.value[1])
+        value: parseTime(dateRange.value[0]) + "," + parseTime(dateRange.value[1]),
       });
     }
 
@@ -220,8 +223,8 @@ const getElectricityData = async () => {
       params: {
         pageNum: currentPage.value,
         pageSize: pageSize.value,
-        conditionJson: encodeURIComponent(JSON.stringify(conditions))
-      }
+        conditionJson: encodeURIComponent(JSON.stringify(conditions)),
+      },
     });
 
     if (res.code !== 200) {
@@ -262,12 +265,11 @@ const refreshData = () => {
 
 // Format date for display
 const formatDate = (dateString) => {
-  if (!dateString) return '';
+  if (!dateString) return "";
   const date = new Date(dateString);
   return date.toLocaleString();
 };
 
-
 // Lifecycle hooks
 onMounted(() => {
   getNewElectricityData();
@@ -313,15 +315,21 @@ onMounted(() => {
           <div class="grid grid-cols-3 gap-2 text-center">
             <div>
               <h4 class="text-sm text-gray-500">A相</h4>
-              <p class="text-lg font-semibold text-green-600">{{ formattedVoltages.a }}</p>
+              <p class="text-lg font-semibold text-green-600">
+                {{ formattedVoltages.a }}
+              </p>
             </div>
             <div>
               <h4 class="text-sm text-gray-500">B相</h4>
-              <p class="text-lg font-semibold text-green-600">{{ formattedVoltages.b }}</p>
+              <p class="text-lg font-semibold text-green-600">
+                {{ formattedVoltages.b }}
+              </p>
             </div>
             <div>
               <h4 class="text-sm text-gray-500">C相</h4>
-              <p class="text-lg font-semibold text-green-600">{{ formattedVoltages.c }}</p>
+              <p class="text-lg font-semibold text-green-600">
+                {{ formattedVoltages.c }}
+              </p>
             </div>
           </div>
         </el-card>
@@ -338,15 +346,21 @@ onMounted(() => {
           <div class="grid grid-cols-3 gap-2 text-center">
             <div>
               <h4 class="text-sm text-gray-500">A相</h4>
-              <p class="text-lg font-semibold text-orange-600">{{ formattedCurrents.a }}</p>
+              <p class="text-lg font-semibold text-orange-600">
+                {{ formattedCurrents.a }}
+              </p>
             </div>
             <div>
               <h4 class="text-sm text-gray-500">B相</h4>
-              <p class="text-lg font-semibold text-orange-600">{{ formattedCurrents.b }}</p>
+              <p class="text-lg font-semibold text-orange-600">
+                {{ formattedCurrents.b }}
+              </p>
             </div>
             <div>
               <h4 class="text-sm text-gray-500">C相</h4>
-              <p class="text-lg font-semibold text-orange-600">{{ formattedCurrents.c }}</p>
+              <p class="text-lg font-semibold text-orange-600">
+                {{ formattedCurrents.c }}
+              </p>
             </div>
           </div>
         </el-card>
@@ -362,9 +376,19 @@ onMounted(() => {
           </template>
           <div class="text-center">
             <h3 class="text-lg font-semibold text-gray-700">
-              {{ newElectricityData ? formatDate(newElectricityData.createTime) : '暂无数据' }}
+              {{
+                newElectricityData
+                  ? formatDate(newElectricityData.createTime)
+                  : "暂无数据"
+              }}
             </h3>
-            <el-button type="primary" size="small" @click="refreshData" :loading="loading" class="mt-2">
+            <el-button
+              type="primary"
+              size="small"
+              @click="refreshData"
+              :loading="loading"
+              class="mt-2"
+            >
               刷新数据
             </el-button>
           </div>
@@ -385,7 +409,11 @@ onMounted(() => {
             </div>
           </template>
           <div class="h-80">
-            <e-charts v-if="electricityRecords.length" :option="voltageChartOption" autoresize/>
+            <e-charts
+              v-if="electricityRecords.length"
+              :option="voltageChartOption"
+              autoresize
+            />
             <div v-else class="h-full flex items-center justify-center text-gray-400">
               暂无数据
             </div>
@@ -404,7 +432,11 @@ onMounted(() => {
             </div>
           </template>
           <div class="h-80">
-            <e-charts v-if="electricityRecords.length" :option="powerChartOption" autoresize/>
+            <e-charts
+              v-if="electricityRecords.length"
+              :option="powerChartOption"
+              autoresize
+            />
             <div v-else class="h-full flex items-center justify-center text-gray-400">
               暂无数据
             </div>
@@ -421,11 +453,11 @@ onMounted(() => {
 
           <div class="flex flex-wrap items-center gap-4">
             <el-input
-                v-model="searchQuery"
-                placeholder="搜索表号"
-                clearable
-                @keyup.enter="handleSearch"
-                class="w-60"
+              v-model="searchQuery"
+              placeholder="搜索表号"
+              clearable
+              @keyup.enter="handleSearch"
+              class="w-60"
             >
               <template #append>
                 <el-button @click="handleSearch">
@@ -435,12 +467,12 @@ onMounted(() => {
             </el-input>
 
             <el-date-picker
-                v-model="dateRange"
-                type="daterange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                @change="handleSearch"
+              v-model="dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="handleSearch"
             />
 
             <el-button type="primary" @click="refreshData" :loading="tableLoading">
@@ -451,14 +483,14 @@ onMounted(() => {
       </template>
 
       <el-table
-          :data="electricityRecords"
-          stripe
-          border
-          style="width: 100%"
-          v-loading="tableLoading"
-          height="500"
+        :data="electricityRecords"
+        stripe
+        border
+        style="width: 100%"
+        v-loading="tableLoading"
+        height="500"
       >
-        <el-table-column prop="tableNumber" label="表号" min-width="120"/>
+        <el-table-column prop="tableNumber" label="表号" min-width="120" />
         <el-table-column label="电压 (V)" min-width="220">
           <template #default="scope">
             <div class="grid grid-cols-3 gap-2">
@@ -543,21 +575,27 @@ onMounted(() => {
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="totalElectricity" label="总用电量 (kWh)" min-width="120"/>
+        <el-table-column prop="totalElectricity" label="总用电量 (kWh)" min-width="120" />
         <el-table-column label="分时电量 (kWh)" min-width="220">
           <template #default="scope">
             <div class="grid grid-cols-2 gap-2">
               <div>
                 <span class="text-xs text-gray-500">尖峰:</span>
-                <span>{{ parseFloat(scope.row.sharpActivePowerConsumption || 0).toFixed(2) }}</span>
+                <span>{{
+                  parseFloat(scope.row.sharpActivePowerConsumption || 0).toFixed(2)
+                }}</span>
               </div>
               <div>
                 <span class="text-xs text-gray-500">峰:</span>
-                <span>{{ parseFloat(scope.row.peakActivePowerConsumption || 0).toFixed(2) }}</span>
+                <span>{{
+                  parseFloat(scope.row.peakActivePowerConsumption || 0).toFixed(2)
+                }}</span>
               </div>
               <div>
                 <span class="text-xs text-gray-500">平:</span>
-                <span>{{ parseFloat(scope.row.averageActivePowerConsumption || 0).toFixed(2) }}</span>
+                <span>{{
+                  parseFloat(scope.row.averageActivePowerConsumption || 0).toFixed(2)
+                }}</span>
               </div>
               <div>
                 <span class="text-xs text-gray-500">谷:</span>
@@ -566,7 +604,7 @@ onMounted(() => {
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="state" label="状态" min-width="100"/>
+        <el-table-column prop="state" label="状态" min-width="100" />
         <el-table-column label="创建时间" min-width="180">
           <template #default="scope">
             {{ formatDate(scope.row.createTime) }}
@@ -576,14 +614,14 @@ onMounted(() => {
 
       <div class="flex justify-center mt-4">
         <el-pagination
-            background
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="totalRecords"
-            :page-size="pageSize"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 50, 100]"
-            @size-change="handleSizeChange"
-            @current-change="handlePageChange"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalRecords"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
         />
       </div>
     </el-card>
@@ -618,4 +656,3 @@ onMounted(() => {
   }
 }
 </style>
-

src/views/device/manhole/index.vue

@@ -19,6 +19,9 @@ import jgkl from "./ldzh/jgkl.vue";
 import bjgl from "./ldzh/bjgl.vue";
 import angz from "./ldzh/ajgz.vue";
 import sgpb from "./ldzh/sgpb.vue";
+import fzbj from "./ldzh/fzbj.vue";
+import sqbj from "./ldzh/sqbj.vue";
+import swbj from "./ldzh/swbj.vue";
 
 //案件办理
 import ajlzgl from "./ajbl/ajlzgl.vue";
@@ -41,6 +44,9 @@ const componentsMap = {
   bjgl,
   angz,
   sgpb,
+  fzbj,
+  sqbj,
+  swbj,
   ajlzgl,
   gdczgl,
   jbgd,
@@ -63,6 +69,9 @@ const componentMapping = {
   "3-2": "bjgl",
   "3-3": "angz",
   "3-4": "sgpb",
+  "3-5": "fzbj",
+  "3-6": "sqbj",
+  "3-7": "swbj",
   "4-1": "ajlzgl",
   "4-2": "gdczgl",
   "4-3": "jbgd",
@@ -82,7 +91,7 @@ const handleSelect = (key) => {
 </script>
 
 <template>
-  <div class="flex h-screen bg-gray-100">
+  <div class="flex h-90.8vh bg-gray-100">
     <!-- Sidebar -->
     <div
       class="bg-dark transition-all duration-300 text-white"
@@ -135,7 +144,10 @@ const handleSelect = (key) => {
           <el-menu-item index="3-1">井盖概览</el-menu-item>
           <el-menu-item index="3-2">报警管理</el-menu-item>
           <el-menu-item index="3-3">案件跟踪</el-menu-item>
-          <el-menu-item index="3-4">施工屏蔽</el-menu-item>
+          <!-- <el-menu-item index="3-4">施工屏蔽</el-menu-item> -->
+          <el-menu-item index="3-5">翻转报警</el-menu-item>
+          <el-menu-item index="3-6">水浸报警</el-menu-item>
+          <el-menu-item index="3-7">水位报警</el-menu-item>
         </el-sub-menu>
 
         <!-- <el-sub-menu index="4">

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

@@ -0,0 +1,98 @@
+<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>
+
+    <!-- 表格 -->
+    <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>
+    <pagination
+      v-show="totals > 0"
+      :total="totals"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getManholeAllData"
+    />
+  </div>
+</template>
+
+<script setup>
+import { getflipalarmDataAll } from "@/api/ldzh/index";
+import { computed, ref } from "vue";
+import { Delete, Edit, Search } from "@element-plus/icons-vue";
+// 表格数据
+const tableData = ref();
+const totals = ref(0);
+const queryParams = {
+  pageNum: 1,
+  pageSize: 10,
+  query: [
+    {
+      column: "alarm_status",
+      type: "ne",
+      value: "0",
+    },
+  ],
+};
+const { proxy } = getCurrentInstance();
+
+// 搜索条件
+const searchForm = ref({
+  id: "",
+});
+
+// 当前选中的井盖信息
+const selectedCover = ref({});
+
+// 根据搜索条件过滤数据
+const filteredTableData = computed(() => {
+  if (!Object.values(searchForm.value).some((value) => value)) {
+    return tableData.value;
+  }
+
+  return tableData.value.filter((row) => {
+    const matches = [searchForm.value.id && row.id.includes(searchForm.value.id)];
+    return matches.some((match) => match);
+  });
+});
+
+//时间选择
+function getDataTime(value) {}
+
+// 搜索逻辑
+function search() {
+  queryParams.pageNum = 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();
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,145 @@
+<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>
+
+    <!-- 表格 -->
+    <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>
+
+    <!-- 查看详情弹窗 -->
+    <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>
+  </div>
+</template>
+
+<script setup>
+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();
+
+// 搜索条件
+const searchForm = ref({
+  id: "",
+  name: "",
+  district: "",
+  street: "",
+  road: "",
+  location: "",
+});
+
+// 是否显示详情弹窗
+const dialogVisible = ref(false);
+// 当前选中的井盖信息
+const selectedCover = ref({});
+
+// 根据搜索条件过滤数据
+const filteredTableData = computed(() => {
+  if (!Object.values(searchForm.value).some((value) => value)) {
+    return tableData.value;
+  }
+
+  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);
+  });
+});
+
+// 搜索逻辑
+function search() {}
+
+// 显示详情
+function showDetail(row) {
+  selectedCover.value = row;
+  dialogVisible.value = true;
+}
+
+//获取井盖倾斜全部信息
+function getManholeAllData() {
+  const query = [];
+  query.push({
+    column: "water_infiltration_alarm_status",
+    type: "ne",
+    value: "0",
+  });
+  getflipalarmDataAll(query).then((res) => {
+    tableData.value = res.data;
+  });
+}
+getManholeAllData();
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,89 @@
+<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>
+
+    <!-- 表格 -->
+    <!-- 表格 -->
+    <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>
+  </div>
+</template>
+
+<script setup>
+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();
+
+// 搜索条件
+const searchForm = ref({
+  id: "",
+  name: "",
+  district: "",
+  street: "",
+  road: "",
+  location: "",
+});
+
+// 是否显示详情弹窗
+const dialogVisible = ref(false);
+// 当前选中的井盖信息
+const selectedCover = ref({});
+
+// 搜索逻辑
+function search() {}
+
+// 显示详情
+function showDetail(row) {
+  selectedCover.value = row;
+  dialogVisible.value = true;
+}
+
+//获取井盖倾斜全部信息
+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();
+</script>
+
+<style scoped lang="scss"></style>

src/views/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted } from "vue";
 import {
   ElCard,
   ElAvatar,
@@ -8,9 +8,9 @@ import {
   ElTable,
   ElTableColumn,
   ElTag,
-  ElProgress
-} from 'element-plus'
-import 'element-plus/dist/index.css'
+  ElProgress,
+} from "element-plus";
+import "element-plus/dist/index.css";
 import {
   Calendar,
   Location,
@@ -20,80 +20,113 @@ import {
   Monitor,
   Connection,
   WarningFilled,
-  Bell
-} from '@element-plus/icons-vue'
+  Bell,
+} from "@element-plus/icons-vue";
 
 // Personal info data
 const personalInfo = ref({
-  name: '刘昊林',
-  title: '系统管理员',
-  avatar: 'https://placeholder.co/150',
-  description: '丰富系统管理经验，专注于IoT设备管理和系统维护。熟悉各类传感器和智能设备的部署与维护。',
-  email: 'guolianfa@500269.com',
-  phone: '123-4567-8910'
-})
+  name: "刘昊林",
+  title: "系统管理员",
+  avatar: "https://placeholder.co/150",
+  description:
+    "丰富系统管理经验，专注于IoT设备管理和系统维护。熟悉各类传感器和智能设备的部署与维护。",
+  email: "guolianfa@500269.com",
+  phone: "123-4567-8910",
+});
 // Weather data
 const weather = ref({
-  location: '上海市',
+  location: "上海市",
   temperature: 24,
-  condition: '晴朗',
+  condition: "晴朗",
   humidity: 65,
-  wind: '东北风 3级',
-  date: new Date().toLocaleDateString('zh-CN', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    weekday: 'long'
-  })
-})
+  wind: "东北风 3级",
+  date: new Date().toLocaleDateString("zh-CN", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    weekday: "long",
+  }),
+});
 
 // Device statistics
 const deviceStats = ref({
   online: 128,
   offline: 23,
   total: 151,
-  onlinePercentage: 0
-})
+  onlinePercentage: 0,
+});
 
 // Calculate percentage
 onMounted(() => {
-  deviceStats.value.onlinePercentage = Math.round((deviceStats.value.online / deviceStats.value.total) * 100)
-})
+  deviceStats.value.onlinePercentage = Math.round(
+    (deviceStats.value.online / deviceStats.value.total) * 100
+  );
+});
 
 // Alarm data
 const alarms = ref([
-  { id: 1, device: '井盖一号', type: '高温警报',location:'长沙', time: '2023-10-15 08:23:45', status: '未处理' },
-  { id: 2, device: '井盖一号', type: '连接中断',location:'长沙',time: '2023-10-15 07:15:22', status: '已处理' },
-  { id: 3, device: '井盖一号', type: '未授权访问',location:'长沙', time: '2023-10-14 23:42:10', status: '处理中' },
-  { id: 4, device: '电表一号', type: '离线',location:'长沙', time: '2023-10-14 18:05:37', status: '已处理' },
-])
+  {
+    id: 1,
+    device: "井盖一号",
+    type: "高温警报",
+    location: "长沙",
+    time: "2023-10-15 08:23:45",
+    status: "未处理",
+  },
+  {
+    id: 2,
+    device: "井盖一号",
+    type: "连接中断",
+    location: "长沙",
+    time: "2023-10-15 07:15:22",
+    status: "已处理",
+  },
+  {
+    id: 3,
+    device: "井盖一号",
+    type: "未授权访问",
+    location: "长沙",
+    time: "2023-10-14 23:42:10",
+    status: "处理中",
+  },
+  {
+    id: 4,
+    device: "电表一号",
+    type: "离线",
+    location: "长沙",
+    time: "2023-10-14 18:05:37",
+    status: "已处理",
+  },
+]);
 
 // Tag type mapping for alarm levels
 const tagType = {
-  critical: 'danger',
-  warning: 'warning',
-  info: 'info'
-}
+  critical: "danger",
+  warning: "warning",
+  info: "info",
+};
 
 // Status tag mapping
 const statusTag = {
-  '未处理': 'danger',
-  '处理中': 'warning',
-  '已处理': 'success'
-}
+  未处理: "danger",
+  处理中: "warning",
+  已处理: "success",
+};
 
 // Get weather icon based on condition
 const getWeatherIcon = (condition) => {
-  if (condition.includes('晴')) return Sunny
-  if (condition.includes('云') || condition.includes('阴')) return Cloudy
-  return Sunny // Default
-}
+  if (condition.includes("晴")) return Sunny;
+  if (condition.includes("云") || condition.includes("阴")) return Cloudy;
+  return Sunny; // Default
+};
 </script>
 
 <template>
   <div class="dashboard-container">
     <!-- Header -->
-    <header class="bg-gradient-to-r from-blue-500 to-blue-700 text-white p-4 flex justify-between items-center">
+    <header
+      class="bg-gradient-to-r from-blue-500 to-blue-700 text-white p-4 flex justify-between items-center"
+    >
       <div class="flex items-center">
         <Monitor class="text-2xl mr-2" />
         <h1 class="text-xl font-bold">智能设备管理系统</h1>
@@ -106,7 +139,6 @@ const getWeatherIcon = (condition) => {
     <!-- Main Content -->
     <main class="p-6 bg-gray-100 min-h-80vh">
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-
         <!-- Personal Introduction Module -->
         <ElCard class="col-span-1 md:col-span-2" shadow="hover">
           <template #header>
@@ -171,7 +203,9 @@ const getWeatherIcon = (condition) => {
             <div class="grid grid-cols-3 gap-4 mb-6">
               <div class="text-center">
                 <ElBadge :value="deviceStats.online" class="mb-2">
-                  <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center mx-auto">
+                  <div
+                    class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center mx-auto"
+                  >
                     <i class="el-icon-success text-green-500 text-xl"></i>
                   </div>
                 </ElBadge>
@@ -179,7 +213,9 @@ const getWeatherIcon = (condition) => {
               </div>
               <div class="text-center">
                 <ElBadge :value="deviceStats.offline" class="mb-2">
-                  <div class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center mx-auto">
+                  <div
+                    class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center mx-auto"
+                  >
                     <i class="el-icon-error text-red-500 text-xl"></i>
                   </div>
                 </ElBadge>
@@ -187,7 +223,9 @@ const getWeatherIcon = (condition) => {
               </div>
               <div class="text-center">
                 <ElBadge :value="deviceStats.total" class="mb-2">
-                  <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto">
+                  <div
+                    class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto"
+                  >
                     <i class="el-icon-data-analysis text-blue-500 text-xl"></i>
                   </div>
                 </ElBadge>
@@ -201,8 +239,14 @@ const getWeatherIcon = (condition) => {
                 <span>{{ deviceStats.onlinePercentage }}%</span>
               </div>
               <ElProgress
-                  :percentage="deviceStats.onlinePercentage"
-                  :color="deviceStats.onlinePercentage > 90 ? '#67C23A' : deviceStats.onlinePercentage > 70 ? '#E6A23C' : '#F56C6C'"
+                :percentage="deviceStats.onlinePercentage"
+                :color="
+                  deviceStats.onlinePercentage > 90
+                    ? '#67C23A'
+                    : deviceStats.onlinePercentage > 70
+                    ? '#E6A23C'
+                    : '#F56C6C'
+                "
               />
             </div>
           </div>
@@ -244,7 +288,7 @@ const getWeatherIcon = (condition) => {
 
 <style>
 .dashboard-container {
-  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 }
 
 .el-card {
@@ -255,4 +299,4 @@ const getWeatherIcon = (condition) => {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
-</style>
+</style>