refactor(device): 优化井盖设备管理代码结构

-调整代码缩进和格式，提高可读性
- 移除冗余的空行，使代码更加紧凑
- 统一组件和变量的命名风格
- 优化部分代码逻辑，提高性能

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

@@ -1,17 +1,9 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
-import {
-  AlertTriangle,
-  Plus,
-  RefreshCw,
-  Search,
-  Trash2,
-  Wifi,
-  WifiOff,
-} from "lucide-vue-next";
-import { ElMessage, ElMessageBox } from "element-plus";
+import {computed, onMounted, ref, watch} from "vue";
+import {AlertTriangle, Plus, RefreshCw, Search, Trash2, Wifi, WifiOff,} from "lucide-vue-next";
+import {ElMessage, ElMessageBox} from "element-plus";
 import request from "@/utils/request.js";
-import { getDicts } from "@/api/system/dict/data.js";
+import {getDicts} from "@/api/system/dict/data.js";
 
 import EchartsTyp from "@/components/baseEcharts/index.vue";
 import pieChart from "@/components/baseEcharts/pieChart.vue";
@@ -61,10 +53,10 @@ const addForm = ref({
   remarks: "",
 });
 const addFormRules = {
-  deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
-  deviceNumber: [{ required: true, message: "请输入设备编号", trigger: "blur" }],
-  model: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
-  type: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
+  deviceName: [{required: true, message: "请输入设备名称", trigger: "blur"}],
+  deviceNumber: [{required: true, message: "请输入设备编号", trigger: "blur"}],
+  model: [{required: true, message: "请输入设备型号", trigger: "blur"}],
+  type: [{required: true, message: "请输入设备类型", trigger: "blur"}],
 };
 const addFormRef = ref(null);
 
@@ -121,14 +113,14 @@ const generateYearDateRange = () => {
   return {
     start: `${currentYear}-01-01 00:00:00`,
     end: `${currentYear}-${String(new Date().getMonth() + 1).padStart(2, "0")}-${String(
-      new Date().getDate()
+        new Date().getDate()
     ).padStart(2, "0")} 23:59:59`,
   };
 };
 
 // 工具方法：创建通用查询条件
 const createCondition = (column, status, dateRange) => [
-  { column: column, type: "ne", value: status },
+  {column: column, type: "ne", value: status},
   {
     column: "create_time",
     type: "between",
@@ -138,7 +130,7 @@ const createCondition = (column, status, dateRange) => [
 
 // 核心请求方法
 const fetchAlarmData = async (condition) => {
-  const { data } = await request.get("/manholeData/getAll", {
+  const {data} = await request.get("/manholeData/getAll", {
     params: {
       conditionJson: encodeURIComponent(JSON.stringify(condition)),
     },
@@ -149,32 +141,32 @@ const fetchAlarmData = async (condition) => {
 // 获取饼图数据法
 const getyearAllDeviceInfo = () => {
   try {
-    const { start, end } = generateYearDateRange();
+    const {start, end} = generateYearDateRange();
 
     // 定义报警类型配置
     const alarmTypes = [
-      { column: "alarm_status", name: "翻转" },
-      { column: "water_infiltration_alarm_status", name: "水浸" },
-      { column: "water_level_alarm_status", name: "水位" },
+      {column: "alarm_status", name: "翻转"},
+      {column: "water_infiltration_alarm_status", name: "水浸"},
+      {column: "water_level_alarm_status", name: "水位"},
     ];
 
     // 并行发送所有请求
     Promise.all(
-      alarmTypes.map(async ({ column }) =>
-        fetchAlarmData(createCondition(column, "0", { start, end }))
-      )
+        alarmTypes.map(async ({column}) =>
+            fetchAlarmData(createCondition(column, "0", {start, end}))
+        )
     )
-      .then((res) => {
-        PieChartDataTwo.value = res.map((res, index) => {
-          return {
-            value: res.length,
-            name: alarmTypes[index].name,
-          };
+        .then((res) => {
+          PieChartDataTwo.value = res.map((res, index) => {
+            return {
+              value: res.length,
+              name: alarmTypes[index].name,
+            };
+          });
+        })
+        .catch((error) => {
+          ElMessage.error("获取数据失败");
         });
-      })
-      .catch((error) => {
-        ElMessage.error("获取数据失败");
-      });
     // 构建图表数据
   } catch (error) {
     ElMessage.error("获取设备数据失败");
@@ -188,7 +180,7 @@ const getyearAllDeviceInfo = () => {
 const getobtainMonthlyData = async () => {
   loading.value = true;
   try {
-    const { start, end } = generateYearDateRange();
+    const {start, end} = generateYearDateRange();
     const res = await request.get("/manholeData/getMonthlyDataCount", {
       params: {
         startDate: start,
@@ -214,7 +206,7 @@ const getobtainMonthlyData = async () => {
 const getobtainDayData = async () => {
   loading.value = true;
   try {
-    const { start, end } = generateYearDateRange();
+    const {start, end} = generateYearDateRange();
     const res = await request.get("/manholeData/getDailyDataCountThisMonth", {});
     if (res.code !== 200) {
       ElMessage.error(res.msg);
@@ -267,12 +259,12 @@ const formatDate = (dateString) => {
 
 // Watch for search changes
 watch(
-  () => search.value.deviceName,
-  (newVal, oldVal) => {
-    if (newVal === "" && oldVal !== "") {
-      handleSearch();
+    () => search.value.deviceName,
+    (newVal, oldVal) => {
+      if (newVal === "" && oldVal !== "") {
+        handleSearch();
+      }
     }
-  }
 );
 
 // 预览设备信息
@@ -412,13 +404,13 @@ const handleBatchDelete = async () => {
 
   try {
     await ElMessageBox.confirm(
-      `确认删除选中的 ${multipleSelection.value.length} 个设备吗？此操作不可恢复`,
-      "警告",
-      {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "warning",
-      }
+        `确认删除选中的 ${multipleSelection.value.length} 个设备吗？此操作不可恢复`,
+        "警告",
+        {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
     );
 
     const ids = multipleSelection.value.map((item) => item.id);
@@ -468,22 +460,22 @@ onMounted(() => {
       <div class="text-xl font-bold">设备管理</div>
       <div class="flex gap-2">
         <el-input
-          v-model="search.deviceName"
-          placeholder="搜索设备名称"
-          class="w-64"
-          clearable
-          @keyup.enter="handleSearch"
+            v-model="search.deviceName"
+            placeholder="搜索设备名称"
+            class="w-64"
+            clearable
+            @keyup.enter="handleSearch"
         >
           <template #prefix>
-            <Search class="w-4 h-4 text-gray-400" />
+            <Search class="w-4 h-4 text-gray-400"/>
           </template>
         </el-input>
         <el-button type="primary" @click="handleSearch" class="flex items-center">
-          <Search class="w-4 h-4 mr-1" />
+          <Search class="w-4 h-4 mr-1"/>
           搜索
         </el-button>
         <el-button @click="handleReset" class="flex items-center">
-          <RefreshCw class="w-4 h-4 mr-1" />
+          <RefreshCw class="w-4 h-4 mr-1"/>
           重置
         </el-button>
       </div>
@@ -493,17 +485,17 @@ onMounted(() => {
     <div class="mb-4 flex justify-between">
       <div class="flex gap-2">
         <el-button type="primary" @click="openAddDialog" class="flex items-center">
-          <Plus class="w-4 h-4 mr-1" />
+          <Plus class="w-4 h-4 mr-1"/>
           新增设备
         </el-button>
 
         <el-button
-          type="danger"
-          :disabled="!hasSelected"
-          @click="handleBatchDelete"
-          class="flex items-center"
+            type="danger"
+            :disabled="!hasSelected"
+            @click="handleBatchDelete"
+            class="flex items-center"
         >
-          <Trash2 class="w-4 h-4 mr-1" />
+          <Trash2 class="w-4 h-4 mr-1"/>
           批量删除
         </el-button>
         <span class="ml-2 text-gray-500 flex items-center" v-if="hasSelected">
@@ -529,18 +521,18 @@ onMounted(() => {
           <div class="stat-card bg-green-50 p-4 rounded-lg h-100">
             <div class="text-green-500 text-lg font-medium">报警月统计</div>
             <EchartsTyp
-              :flipData="flipDataMonthly"
-              :waterImmersion="waterImmersionMonthly"
-              :waterLevel="waterLevelMonthly"
+                :flipData="flipDataMonthly"
+                :waterImmersion="waterImmersionMonthly"
+                :waterLevel="waterLevelMonthly"
             ></EchartsTyp>
           </div>
           <div class="stat-card bg-red-50 p-4 rounded-lg h-100">
             <div class="text-red-500 text-lg font-medium">报警日统计</div>
             <riEcharts
-              :flipData="flipDataDay"
-              :waterImmersion="waterImmersionDay"
-              :waterLevel="waterLevelDay"
-              :DagiveanalarmDate="DagiveanalarmDate"
+                :flipData="flipDataDay"
+                :waterImmersion="waterImmersionDay"
+                :waterLevel="waterLevelDay"
+                :DagiveanalarmDate="DagiveanalarmDate"
             ></riEcharts>
           </div>
         </div>
@@ -549,53 +541,53 @@ onMounted(() => {
 
     <!-- Table -->
     <el-table
-      :data="deviceArr"
-      border
-      stripe
-      style="width: 100%"
-      v-loading="loading"
-      class="mb-4"
-      @selection-change="handleSelectionChange"
+        :data="deviceArr"
+        border
+        stripe
+        style="width: 100%"
+        v-loading="loading"
+        class="mb-4"
+        @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column type="index" label="序号" width="60" align="center"/>
       <el-table-column
-        prop="deviceName"
-        label="设备名称"
-        min-width="150"
-        show-overflow-tooltip
+          prop="deviceName"
+          label="设备名称"
+          min-width="150"
+          show-overflow-tooltip
       />
       <el-table-column
-        prop="deviceNumber"
-        label="设备编号"
-        min-width="150"
-        show-overflow-tooltip
+          prop="deviceNumber"
+          label="设备编号"
+          min-width="150"
+          show-overflow-tooltip
       />
-      <el-table-column prop="model" label="型号" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="model" label="型号" min-width="150" show-overflow-tooltip/>
       <el-table-column prop="type" label="类型" min-width="120" show-overflow-tooltip>
         <template #default="{ row }">
           {{ deviceType[row.type] }}
         </template>
       </el-table-column>
       <el-table-column
-        prop="location"
-        label="位置"
-        min-width="150"
-        show-overflow-tooltip
+          prop="location"
+          label="位置"
+          min-width="150"
+          show-overflow-tooltip
       />
 
       <el-table-column label="在线状态" width="120" align="center">
         <template #default="scope">
           <div class="flex items-center justify-center">
             <span
-              v-if="scope.row.onlineStatus === 1"
-              class="flex items-center text-green-500"
+                v-if="scope.row.onlineStatus === 1"
+                class="flex items-center text-green-500"
             >
-              <Wifi class="w-4 h-4 mr-1" />
+              <Wifi class="w-4 h-4 mr-1"/>
               在线
             </span>
             <span v-else class="flex items-center text-gray-500">
-              <WifiOff class="w-4 h-4 mr-1" />
+              <WifiOff class="w-4 h-4 mr-1"/>
               离线
             </span>
           </div>
@@ -605,11 +597,11 @@ onMounted(() => {
       <el-table-column label="告警状态" width="120" align="center">
         <template #default="scope">
           <el-tag
-            :type="scope.row.alarmStatus === 0 ? 'success' : 'danger'"
-            effect="dark"
+              :type="scope.row.alarmStatus === 0 ? 'success' : 'danger'"
+              effect="dark"
           >
             <div class="flex items-center">
-              <AlertTriangle v-if="scope.row.alarmStatus === 1" class="w-4 h-4 mr-1" />
+              <AlertTriangle v-if="scope.row.alarmStatus === 1" class="w-4 h-4 mr-1"/>
               {{ scope.row.alarmStatus === 0 ? "正常" : "告警" }}
             </div>
           </el-tag>
@@ -617,10 +609,10 @@ onMounted(() => {
       </el-table-column>
 
       <el-table-column
-        prop="remarks"
-        label="备注"
-        min-width="150"
-        show-overflow-tooltip
+          prop="remarks"
+          label="备注"
+          min-width="150"
+          show-overflow-tooltip
       />
 
       <el-table-column label="创建时间" min-width="180" show-overflow-tooltip>
@@ -638,17 +630,20 @@ onMounted(() => {
       <el-table-column label="操作" fixed="right" width="220" align="center">
         <template #default="scope">
           <el-button type="primary" link size="small" @click="handlePreview(scope.row.id)"
-            >预览</el-button
+          >预览
+          </el-button
           >
           <el-button
-            type="primary"
-            link
-            size="small"
-            @click="openEditDialog(scope.row.id)"
-            >编辑</el-button
+              type="primary"
+              link
+              size="small"
+              @click="openEditDialog(scope.row.id)"
+          >编辑
+          </el-button
           >
           <el-button type="danger" link size="small" @click="handleDelete(scope.row.id)"
-            >删除</el-button
+          >删除
+          </el-button
           >
         </template>
       </el-table-column>
@@ -657,14 +652,14 @@ onMounted(() => {
     <!-- Pagination -->
     <div class="flex justify-end">
       <el-pagination
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          background
       />
     </div>
 
@@ -672,55 +667,61 @@ onMounted(() => {
     <el-dialog v-model="previewDialogVisible" title="设备详情" width="50%">
       <el-descriptions :column="2" border>
         <el-descriptions-item label="设备名称">{{
-          currentDevice.deviceName
-        }}</el-descriptions-item>
+            currentDevice.deviceName
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="设备编号">{{
-          currentDevice.deviceNumber
-        }}</el-descriptions-item>
+            currentDevice.deviceNumber
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="类型">{{
-          deviceType[currentDevice.type]
-        }}</el-descriptions-item>
+            deviceType[currentDevice.type]
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="位置">{{
-          currentDevice.location
-        }}</el-descriptions-item>
+            currentDevice.location
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="型号">{{
-          currentDevice.model
-        }}</el-descriptions-item>
+            currentDevice.model
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="在线状态">
           <span
-            v-if="currentDevice.onlineStatus === 1"
-            class="flex items-center text-green-500"
+              v-if="currentDevice.onlineStatus === 1"
+              class="flex items-center text-green-500"
           >
-            <Wifi class="w-4 h-4 mr-1" />
+            <Wifi class="w-4 h-4 mr-1"/>
             在线
           </span>
           <span v-else class="flex items-center text-gray-500">
-            <WifiOff class="w-4 h-4 mr-1" />
+            <WifiOff class="w-4 h-4 mr-1"/>
             离线
           </span>
         </el-descriptions-item>
         <el-descriptions-item label="告警状态">
           <el-tag
-            :type="currentDevice.alarmStatus === 0 ? 'success' : 'danger'"
-            effect="dark"
+              :type="currentDevice.alarmStatus === 0 ? 'success' : 'danger'"
+              effect="dark"
           >
             <div class="flex items-center">
               <AlertTriangle
-                v-if="currentDevice.alarmStatus === 1"
-                class="w-4 h-4 mr-1"
+                  v-if="currentDevice.alarmStatus === 1"
+                  class="w-4 h-4 mr-1"
               />
               {{ currentDevice.alarmStatus === 0 ? "正常" : "告警" }}
             </div>
           </el-tag>
         </el-descriptions-item>
         <el-descriptions-item label="备注" :span="2">{{
-          currentDevice.remarks
-        }}</el-descriptions-item>
+            currentDevice.remarks
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="创建时间" :span="2"
-          >{{ formatDate(currentDevice.createTime) }}
+        >{{ formatDate(currentDevice.createTime) }}
         </el-descriptions-item>
         <el-descriptions-item label="更新时间" :span="2"
-          >{{ formatDate(currentDevice.updateTime) }}
+        >{{ formatDate(currentDevice.updateTime) }}
         </el-descriptions-item>
       </el-descriptions>
       <template #footer>
@@ -734,16 +735,16 @@ onMounted(() => {
     <el-dialog v-model="editDialogVisible" title="编辑设备" width="40%">
       <el-form :model="editForm" label-width="100px">
         <el-form-item label="设备名称">
-          <el-input v-model="editForm.deviceName" placeholder="请输入设备名称" />
+          <el-input v-model="editForm.deviceName" placeholder="请输入设备名称"/>
         </el-form-item>
         <el-form-item label="位置">
           <el-input
-            v-model="editForm.location"
-            placeholder="请输入位置 例如(xxxxx-xxxxx)"
+              v-model="editForm.location"
+              placeholder="请输入位置 例如(xxxxx-xxxxx)"
           />
         </el-form-item>
         <el-form-item label="备注">
-          <el-input v-model="editForm.remarks" type="textarea" placeholder="请输入备注" />
+          <el-input v-model="editForm.remarks" type="textarea" placeholder="请输入备注"/>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -757,39 +758,39 @@ onMounted(() => {
     <!-- 新增对话框 -->
     <el-dialog v-model="addDialogVisible" title="新增设备" width="40%">
       <el-form
-        ref="addFormRef"
-        :model="addForm"
-        :rules="addFormRules"
-        label-width="100px"
+          ref="addFormRef"
+          :model="addForm"
+          :rules="addFormRules"
+          label-width="100px"
       >
         <el-form-item label="设备名称" prop="deviceName">
-          <el-input v-model="addForm.deviceName" placeholder="请输入设备名称" />
+          <el-input v-model="addForm.deviceName" placeholder="请输入设备名称"/>
         </el-form-item>
         <el-form-item label="设备编号" prop="deviceNumber">
-          <el-input v-model="addForm.deviceNumber" placeholder="请输入设备编号" />
+          <el-input v-model="addForm.deviceNumber" placeholder="请输入设备编号"/>
         </el-form-item>
         <el-form-item label="型号" prop="model">
-          <el-input v-model="addForm.model" placeholder="请输入型号" />
+          <el-input v-model="addForm.model" placeholder="请输入型号"/>
         </el-form-item>
         <el-form-item label="类型" prop="model">
           <el-select v-model="addForm.type" placeholder="请输入设备型号">
             <el-option
-              v-for="(item, index) in deviceType"
-              :key="item.value"
-              :label="item"
-              :value="index"
-              :disabled="index !== '1'"
+                v-for="(item, index) in deviceType"
+                :key="item.value"
+                :label="item"
+                :value="index"
+                :disabled="index !== '1'"
             />
           </el-select>
         </el-form-item>
         <el-form-item label="位置">
           <el-input
-            v-model="addForm.location"
-            placeholder="请输入位置 例如(xxxxx-xxxxx)"
+              v-model="addForm.location"
+              placeholder="请输入位置 例如(xxxxx-xxxxx)"
           />
         </el-form-item>
         <el-form-item label="备注">
-          <el-input v-model="addForm.remarks" type="textarea" placeholder="请输入备注" />
+          <el-input v-model="addForm.remarks" type="textarea" placeholder="请输入备注"/>
         </el-form-item>
       </el-form>
       <template #footer>