feat(zhdpgl): 添加设备列表页面并优化自动跳转功能

- 新增设备列表页面，包含设备搜索、列表展示和详情查看功能
- 在 yjhj 页面添加自动跳转功能，3 秒后打开新窗口
- 优化 yjhj 页面布局，增加手动跳转链接

src/views/zhdpgl/yqzl/yqdl.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ElectricityDetail from '@/views/zhdpgl/yqzl/components/ElectricityDetail.vue'
+import { Search, Eye, Cpu, Gauge, X } from 'lucide-vue-next'
+import { ElButton, ElInput, ElDialog, ElCard } from 'element-plus'
+
+interface ElectricityDevice {
+  tableNumber: string
+  negativeSensor: number
+}
+
+// Sample data - replace with your actual data source
+const deviceList = ref<ElectricityDevice[]>([
+  { tableNumber: '110125022003', negativeSensor: 20 },
+  { tableNumber: '110125022004', negativeSensor: 15 },
+  { tableNumber: '110125022005', negativeSensor: 30 },
+  { tableNumber: '110125022006', negativeSensor: 25 },
+  { tableNumber: '110125022007', negativeSensor: 18 }
+])
+
+const searchQuery = ref('')
+const showDetail = ref(false)
+const currentDevice = ref<ElectricityDevice>({
+  tableNumber: '',
+  negativeSensor: 0
+})
+
+// Filter devices based on search query
+const filteredDevices = computed(() => {
+  if (!searchQuery.value) return deviceList.value
+
+  return deviceList.value.filter(device =>
+    device.tableNumber.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
+
+// View device details
+const viewDeviceDetail = (device: ElectricityDevice) => {
+  currentDevice.value = device
+  showDetail.value = true
+}
+
+// Close detail view
+const closeDetail = () => {
+  showDetail.value = false
+}
+</script>
+
+<template>
+  <div class="device-list-container p-4">
+    <!-- Search and header -->
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="text-xl font-bold">设备列表</h2>
+      <div class="search-box flex items-center">
+        <ElInput
+          v-model="searchQuery"
+          placeholder="搜索设备表号"
+          class="w-64"
+          :prefix-icon="Search"
+        />
+      </div>
+    </div>
+
+    <!-- Replace the Device list table section with this card grid -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
+      <el-card
+        v-for="device in filteredDevices"
+        :key="device.tableNumber"
+        class="device-card hover:shadow-lg transition-shadow duration-300"
+        shadow="hover"
+      >
+        <div class="flex flex-col">
+          <div class="flex items-center mb-3">
+            <div class="bg-blue-100 p-2 rounded-full mr-3">
+              <cpu class="text-blue-500 h-5 w-5" />
+            </div>
+            <div>
+              <h3 class="font-bold">设备表号</h3>
+              <p class="text-gray-600">{{ device.tableNumber }}</p>
+            </div>
+          </div>
+
+          <div class="flex items-center mb-4">
+            <div class="bg-green-100 p-2 rounded-full mr-3">
+              <gauge class="text-green-500 h-5 w-5" />
+            </div>
+            <div>
+              <h3 class="font-bold">负感器值</h3>
+              <p class="text-gray-600">{{ device.negativeSensor }}</p>
+            </div>
+          </div>
+
+          <el-button
+            type="primary"
+            @click="viewDeviceDetail(device)"
+            class="w-full flex items-center justify-center"
+          >
+            <Eye class="mr-1 h-4 w-4" />
+            查看详情
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- Modify the Full screen detail view section -->
+    <ElDialog
+      v-model="showDetail"
+      fullscreen
+      :show-close="false"
+      @close="closeDetail"
+      class="custom-dialog"
+    >
+      <div class="relative">
+        <button
+          @click="closeDetail"
+          class="absolute top-2 left-4 bg-gray-200 hover:bg-gray-300 rounded-full p-2 transition-colors duration-200"
+        >
+          <x class="h-5 w-5" />
+        </button>
+
+        <div class="text-center pt-2 pb-4">
+          <h3 class="text-lg font-bold">设备详情</h3>
+        </div>
+      </div>
+
+      <electricity-detail
+        :negativeSensor="currentDevice.negativeSensor"
+        :tableNumber="currentDevice.tableNumber"
+      />
+    </ElDialog>
+  </div>
+</template>
+
+<style scoped>
+.device-list-container {
+  height: 100%;
+  background-color: #fff;
+}
+
+.custom-dialog :deep(.el-dialog__header) {
+  padding: 0;
+  margin: 0;
+}
+
+.device-card {
+  transition: all 0.3s;
+}
+
+.device-card:hover {
+  transform: translateY(-5px);
+}
+</style>

src/views/zhdpgl/zhdg/yjhj.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
 
+//3秒后自动跳转一个网页(打开一个新窗口栏)
+onMounted(() => {
+  setTimeout(() => {
+    window.open('http://172.16.102.52:8088')
+  }, 3000)
+})
 </script>
 
 <template>
- 今日报警列表
+  <div class="w-70% mx-a mt-30vh text-30px">即将打开一个新窗口如果不自动跳转请点击<a href="http://172.16.102.52:8088">这里</a></div>
 </template>
 
 <style scoped>