From 1890cca75f65974efabf776f2655aa5cca9894b9 Mon Sep 17 00:00:00 2001
From: xiaozhiyong <xiaozhiyong@sdxkhlw.cn>
Date: Thu, 4 Jun 2026 16:54:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/equipment/alarmRecord.js              |   4 +-
 src/api/equipment/list.js                     |   4 +-
 src/assets/img/equipment/breaker.png          | Bin 0 -> 13443 bytes
 src/pathInfo.json                             |   5 +
 src/view/equipment/alarmRecord/index.vue      |  17 +-
 src/view/equipment/gateway/index.vue          |  14 +-
 .../detail/components/alarm/index.vue         | 145 +++++++
 .../detail/components/info/index.vue          | 125 ++++++
 .../detail/components/trend/index.vue         | 409 ++++++++++++++++++
 .../list/components/detail/index.vue          |  71 +++
 .../equipment/list/components/list/index.vue  | 368 ++++++++++++++++
 src/view/equipment/list/index.vue             | 245 +----------
 12 files changed, 1149 insertions(+), 258 deletions(-)
 create mode 100644 src/assets/img/equipment/breaker.png
 create mode 100644 src/view/equipment/list/components/detail/components/alarm/index.vue
 create mode 100644 src/view/equipment/list/components/detail/components/info/index.vue
 create mode 100644 src/view/equipment/list/components/detail/components/trend/index.vue
 create mode 100644 src/view/equipment/list/components/detail/index.vue
 create mode 100644 src/view/equipment/list/components/list/index.vue

diff --git a/src/api/equipment/alarmRecord.js b/src/api/equipment/alarmRecord.js
index 11ca8d7..d46ea17 100644
--- a/src/api/equipment/alarmRecord.js
+++ b/src/api/equipment/alarmRecord.js
@@ -1,8 +1,8 @@
 import service from '@/utils/request'
 
-export const getDeviceWarnList = (data) => {
+export const getAlarmRecordListByPage = (data) => {
   return service({
-    url: '/device/getDeviceWarnList',
+    url: '/device/getAlarmRecordListByPage',
     method: 'post',
     data: data
   })
diff --git a/src/api/equipment/list.js b/src/api/equipment/list.js
index 2f6c65f..5c0ecbc 100644
--- a/src/api/equipment/list.js
+++ b/src/api/equipment/list.js
@@ -16,9 +16,9 @@ export const deviceOperation = (data) => {
   })
 }
 
-export const getDeviceDetailsInfoByRemote = (data) => {
+export const getDeviceDetailsListByPage = (data) => {
   return service({
-    url: '/device/getDeviceDetailsInfoByRemote',
+    url: '/device/getDeviceDetailsListByPage',
     method: 'post',
     data: data
   })
diff --git a/src/assets/img/equipment/breaker.png b/src/assets/img/equipment/breaker.png
new file mode 100644
index 0000000000000000000000000000000000000000..9dd2f71de2884b3fb0cd3a8f50cff568ba358369
GIT binary patch
literal 13443
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
H<{ke9R${~K

literal 0
HcmV?d00001

diff --git a/src/pathInfo.json b/src/pathInfo.json
index a82b8d1..fedaff3 100644
--- a/src/pathInfo.json
+++ b/src/pathInfo.json
@@ -13,6 +13,11 @@
   "/src/view/dashboard/index.vue": "Dashboard",
   "/src/view/equipment/alarmRecord/index.vue": "Index",
   "/src/view/equipment/gateway/index.vue": "Index",
+  "/src/view/equipment/list/components/detail/components/alarm/index.vue": "Index",
+  "/src/view/equipment/list/components/detail/components/info/index.vue": "Index",
+  "/src/view/equipment/list/components/detail/components/trend/index.vue": "Index",
+  "/src/view/equipment/list/components/detail/index.vue": "Index",
+  "/src/view/equipment/list/components/list/index.vue": "Index",
   "/src/view/equipment/list/index.vue": "Index",
   "/src/view/equipment/particulars/index.vue": "Index",
   "/src/view/error/index.vue": "Error",
diff --git a/src/view/equipment/alarmRecord/index.vue b/src/view/equipment/alarmRecord/index.vue
index 89f1a49..2bcfc97 100644
--- a/src/view/equipment/alarmRecord/index.vue
+++ b/src/view/equipment/alarmRecord/index.vue
@@ -3,13 +3,9 @@
     <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="用户名">
-          <el-input v-model="searchInfo.username" placeholder="设备ID" />
+        <el-form-item label="设备ID">
+          <el-input v-model="searchInfo.deviceId" placeholder="设备ID" />
         </el-form-item>
-        <el-form-item label="昵称">
-          <el-input v-model="searchInfo.nickname" placeholder="设备状态" />
-        </el-form-item>
-
         <el-form-item>
           <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
           <el-button icon="refresh" @click="onReset"> 重置 </el-button>
@@ -18,7 +14,7 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
+        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
       </div>
       <el-table :data="tableData">
         <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
@@ -85,7 +81,7 @@
   }
   // 查询
   const getTableData = async () => {
-    const table = await serve.getDeviceWarnList({
+    const table = await serve.getAlarmRecordListByPage({
       page: page.value,
       pageSize: pageSize.value,
       ...searchInfo.value
@@ -105,10 +101,7 @@
 
   const onReset = () => {
     searchInfo.value = {
-      username: '',
-      nickname: '',
-      phone: '',
-      email: ''
+      deviceId: ''
     }
     getTableData()
   }
diff --git a/src/view/equipment/gateway/index.vue b/src/view/equipment/gateway/index.vue
index 8f6677d..c5de08b 100644
--- a/src/view/equipment/gateway/index.vue
+++ b/src/view/equipment/gateway/index.vue
@@ -3,11 +3,8 @@
     <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="用户名">
-          <el-input v-model="searchInfo.username" placeholder="设备ID" />
-        </el-form-item>
-        <el-form-item label="昵称">
-          <el-input v-model="searchInfo.nickname" placeholder="设备状态" />
+        <el-form-item label="网关ID">
+          <el-input v-model="searchInfo.gatewayId" placeholder="网关ID" />
         </el-form-item>
 
         <el-form-item>
@@ -18,7 +15,7 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
+        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
       </div>
       <el-table :data="tableData">
         <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
@@ -105,10 +102,7 @@
 
   const onReset = () => {
     searchInfo.value = {
-      username: '',
-      nickname: '',
-      phone: '',
-      email: ''
+      gatewayId: ''
     }
     getTableData()
   }
diff --git a/src/view/equipment/list/components/detail/components/alarm/index.vue b/src/view/equipment/list/components/detail/components/alarm/index.vue
new file mode 100644
index 0000000..252c7b4
--- /dev/null
+++ b/src/view/equipment/list/components/detail/components/alarm/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="detail-content">
+    <div class="detail-card">
+      <h3>报警记录</h3>
+      <el-table :data="tableData" style="width: 100%" stripe>
+        <el-table-column prop="CreatedAt" label="报警时间" width="180" />
+        <el-table-column prop="type" label="报警类型" width="120">
+          <template #default="{ row }">
+            <el-tag :type="typeMap.find((item) => item.value == row.warnType)?.type || 'info'">{{
+              typeMap.find((item) => item.value == row.warnType)?.label || row.warnType
+            }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="level" label="报警等级" width="100">
+          <template #default="{ row }">
+            <el-tag :type="levelMap.find((item) => item.value == row.alarmLevel)?.type || 'info'" effect="dark">{{
+              levelMap.find((item) => item.value == row.alarmLevel)?.label || row.alarmLevel
+            }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="originalContent" label="报警描述">
+          <template #default="{ row }">
+            {{ row.originalContent || '-' }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="status" label="处理状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === '已处理' ? 'success' : 'danger'">{{ row.status }}</el-tag>
+          </template>
+        </el-table-column> -->
+      </el-table>
+
+      <div v-if="!tableData.length" class="empty-alarm">
+        <el-empty description="暂无报警记录" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted, watch } from 'vue'
+  import * as serve from '@/api/equipment/alarmRecord'
+
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+
+  // 报警数据
+  const tableData = ref([])
+
+  // 查询报警记录
+  const getTableData = async () => {
+    const deviceId = props.device?.ID
+    if (deviceId) {
+      try {
+        const table = await serve.getAlarmRecordListByPage({
+          page: 1,
+          pageSize: 10,
+          deviceId
+        })
+        if (table.code === 0) {
+          tableData.value = table.data.list || []
+          return
+        }
+      } catch (e) {
+        console.error('获取报警记录失败', e)
+      }
+    } else {
+      console.warn('[Alarm] device 为空或没有 ID 字段')
+    }
+  }
+
+  // 监听 device 变化，device 更新时重新请求
+  watch(
+    () => props.device,
+    (newDevice) => {
+      if (newDevice) {
+        getTableData()
+      }
+    },
+    { deep: true, immediate: false }
+  )
+  const typeMap = [
+    {
+      value: '45',
+      type: 'danger',
+      label: '设备事件'
+    },
+    {
+      value: '4f',
+      type: 'danger',
+      label: '操作事件'
+    }
+  ]
+  const levelMap = [
+    {
+      value: '0',
+      type: 'primary',
+      label: '记录'
+    },
+    {
+      value: '1',
+      type: 'warning',
+      label: '提醒'
+    },
+    {
+      value: '2',
+      type: 'danger',
+      label: '警告'
+    }
+  ]
+</script>
+
+<style lang="scss" scoped>
+  .detail-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .detail-card {
+    background-color: var(--el-bg-color-overlay, #ffffff);
+    border-radius: 8px;
+    padding: 24px;
+    border: 1px solid var(--el-border-color, #e4e7ed);
+
+    h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--el-text-color-primary, #303133);
+      margin: 0 0 16px 0;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
+    }
+  }
+
+  .empty-alarm {
+    padding: 40px 0;
+    display: flex;
+    justify-content: center;
+  }
+</style>
diff --git a/src/view/equipment/list/components/detail/components/info/index.vue b/src/view/equipment/list/components/detail/components/info/index.vue
new file mode 100644
index 0000000..227a8b8
--- /dev/null
+++ b/src/view/equipment/list/components/detail/components/info/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="detail-content">
+    <div class="detail-card">
+      <h3>基本信息</h3>
+      <div class="detail-row">
+        <span class="detail-label">设备ID：</span>
+        <span class="detail-value">{{ device?.cbId || '未设置' }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">网关ID：</span>
+        <span class="detail-value">{{ device?.gatewayId || '未设置' }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">设备类型名称：</span>
+        <span class="detail-value">{{ device?.cbTypeName || '未设置' }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">网关mac：</span>
+        <span class="detail-value">{{ device?.gatewayMac || '未设置' }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">协议：</span>
+        <span class="detail-value">{{ device?.protocol || '未设置' }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">品牌：</span>
+        <span class="detail-value">{{ device?.brand || '未设置' }}</span>
+      </div>
+    </div>
+
+    <div class="detail-card">
+      <h3>状态信息</h3>
+      <div class="detail-row">
+        <span class="detail-label">设备状态：</span>
+        <span class="detail-value">
+          <el-tag v-if="device?.cbTypeName !== 'T30'" :type="device?.deviceStatus == 1 ? 'success' : 'danger'">
+            {{ device?.deviceStatus == 1 ? '合闸' : '分闸' }}
+          </el-tag>
+          <span v-else>-</span>
+        </span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">锁定状态：</span>
+        <span class="detail-value">
+          <el-tag :type="['success', 'info', 'danger'][device?.lockStatus]">
+            {{ ['正常', '远程合闸禁止', '锁定'][device?.lockStatus] }}
+          </el-tag>
+        </span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">网络状态：</span>
+        <span class="detail-value">
+          <el-tag :type="device?.netStatus == 1 ? 'primary' : 'info'">
+            {{ device?.netStatus == 1 ? '在线' : '离线' }}
+          </el-tag>
+        </span>
+      </div>
+    </div>
+
+    <div class="detail-card">
+      <h3>其他信息</h3>
+      <div class="detail-row">
+        <span class="detail-label">安装时间：</span>
+        <span class="detail-value">{{ device?.createTime || '未设置' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  .detail-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .detail-card {
+    background-color: var(--el-bg-color-overlay, #ffffff);
+    border-radius: 8px;
+    padding: 24px;
+    border: 1px solid var(--el-border-color, #e4e7ed);
+
+    h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--el-text-color-primary, #303133);
+      margin: 0 0 16px 0;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
+    }
+  }
+
+  .detail-row {
+    display: flex;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px dashed var(--el-border-color-lighter, #ebeef5);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .detail-label {
+    width: 120px;
+    color: var(--el-text-color-regular, #606266);
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+
+  .detail-value {
+    flex: 1;
+    color: var(--el-text-color-primary, #303133);
+    font-size: 14px;
+  }
+</style>
diff --git a/src/view/equipment/list/components/detail/components/trend/index.vue b/src/view/equipment/list/components/detail/components/trend/index.vue
new file mode 100644
index 0000000..5b7bdfb
--- /dev/null
+++ b/src/view/equipment/list/components/detail/components/trend/index.vue
@@ -0,0 +1,409 @@
+<template>
+  <div ref="chartContainerRef" class="trend-content">
+    <div class="trend-toolbar">
+      <span class="toolbar-label">时间范围：</span>
+      <el-date-picker
+        v-model="dateRange"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        format="YYYY-MM-DD HH:mm:ss"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        @change="handleDateChange"
+      />
+      <!-- <el-button type="primary" icon="Refresh" @click="resetDateRange">重置</el-button> -->
+    </div>
+    <el-row :gutter="16">
+      <el-col v-for="item in chartList" :key="item.key" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
+        <div class="chart-card">
+          <div class="chart-header">
+            <span class="chart-title">{{ item.title }}</span>
+            <span class="chart-unit">{{ item.unit }}</span>
+          </div>
+          <v-chart class="chart" :option="item.option" autoresize />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+  import { ref, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
+  import { use } from 'echarts/core'
+  import { CanvasRenderer } from 'echarts/renderers'
+  import { LineChart } from 'echarts/charts'
+  import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+  import VChart from 'vue-echarts'
+  import * as serve from '@/api/equipment/list.js'
+
+  use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+
+  // 容器 ref
+  const chartContainerRef = ref(null)
+  let resizeObserver = null
+
+  // 触发图表 resize
+  const triggerResize = () => {
+    // 触发 window resize 事件让 vue-echarts autoresize 生效
+    window.dispatchEvent(new Event('resize'))
+  }
+
+  // 格式化时间 - 转为 yyyy-MM-dd HH:mm:ss
+  const formatDateTime = (date) => {
+    if (!date) return ''
+    // 如果已经是字符串（YYYY-MM-DD HH:mm:ss 格式），直接返回
+    if (typeof date === 'string') {
+      // 验证格式
+      if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) {
+        return date
+      }
+      // 如果是 ISO 格式，转换一下
+      const d = new Date(date)
+      if (isNaN(d.getTime())) return date
+      return formatDateTime(d)
+    }
+    // 如果是 Date 对象
+    if (date instanceof Date) {
+      const pad = (n) => String(n).padStart(2, '0')
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+    }
+    return ''
+  }
+
+  const getTableData = async () => {
+    // 如果没有 device 或 ID，不请求
+    if (!props.device) {
+      console.warn('[Trend] device 为空，跳过请求')
+      return
+    }
+    const deviceId = props.device.ID || props.device.id
+    if (!deviceId) {
+      console.warn('[Trend] device 没有 ID 字段')
+      return
+    }
+    if (!dateRange.value || dateRange.value.length !== 2) {
+      console.warn('[Trend] 日期范围无效')
+      return
+    }
+    // 格式化时间
+    // const startTime = formatDateTime(dateRange.value[0])
+    // const endTime = formatDateTime(dateRange.value[1])
+    try {
+      console.log('[Trend] 请求设备详情数据:', {
+        deviceId
+        // startTime,
+        // endTime
+      })
+      const result = await serve.getDeviceDetailsListByPage({
+        page: 1,
+        pageSize: 999,
+        deviceId,
+        startCreatedAt: dateRange.value[0],
+        endCreatedAt: dateRange.value[1]
+      })
+      console.log('[Trend] 接口返回:', result)
+      if (result.code === 0) {
+        // 提取数据
+        const list = result.data.list || []
+        // 调试：打印第一条数据的所有字段
+        if (list.length > 0) {
+          console.log('[Trend] 第一条数据的所有字段:', list[0])
+          console.log('[Trend] 字段名列表:', Object.keys(list[0]))
+        }
+        const timeData = []
+        const chartData = {
+          voltage: [], // 电压（V）
+          leakage: [], // 漏电流值（mA）
+          energy: [], // 累计用电量（kWh）
+          current: [], // 电流值（A）
+          innerTemp: [], // 内部温度（℃）
+          powerFactor: [] // 功率因数
+        }
+
+        list.forEach((item) => {
+          timeData.push(item.CreatedAt)
+          // 兼容多种命名风格：PascalCase / camelCase
+          chartData.voltage.push(Number(item.LeakageCurrent) || 0)
+          chartData.leakage.push(Number(item.LeakageTotal) || 0)
+          chartData.energy.push(Number(item.CumulativeElectricity) || 0)
+          chartData.current.push(Number(item.Current) || 0)
+          chartData.innerTemp.push(Number(item.InternalTemperature) || 0)
+          chartData.powerFactor.push(Number(item.PowerFactor) || 0)
+        })
+        console.log('[Trend] X轴时间数据:', timeData)
+        console.log('[Trend] 处理后的图表数据:', chartData)
+        // 更新图表
+        updateChartData(timeData, chartData)
+      }
+    } catch (e) {
+      console.error('[Trend] 请求失败', e)
+    }
+  }
+
+  // 监听 device 变化，重新请求数据
+  watch(
+    () => props.device,
+    (newDevice, oldDevice) => {
+      console.log('[Trend] device 变化:', newDevice)
+      if (newDevice && (!oldDevice || newDevice.ID !== oldDevice.ID)) {
+        getTableData()
+      }
+      nextTick(() => {
+        triggerResize()
+      })
+    },
+    { deep: true, immediate: false }
+  )
+
+  onMounted(() => {
+    // 等待 DOM 渲染完成后触发 resize
+    nextTick(() => {
+      // 延迟执行确保容器有尺寸
+      setTimeout(() => {
+        triggerResize()
+      }, 100)
+    })
+
+    // 监听容器尺寸变化
+    if (chartContainerRef.value) {
+      resizeObserver = new ResizeObserver(() => {
+        triggerResize()
+      })
+      resizeObserver.observe(chartContainerRef.value)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect()
+      resizeObserver = null
+    }
+  })
+
+  // 日期范围 - 默认当前时间前一小时
+  const getTodayRange = () => {
+    const now = new Date()
+    const start = new Date(now.getTime() - 3600 * 1000)
+    return [formatDateTime(start), formatDateTime(now)]
+  }
+  const dateRange = ref(getTodayRange())
+
+  // 日期变化处理
+  const handleDateChange = (val) => {
+    if (val && val.length === 2) {
+      console.log('[Trend] 日期范围:', val)
+      // 触发图表 resize
+      nextTick(() => {
+        triggerResize()
+      })
+    }
+  }
+
+  // 重置日期
+  const resetDateRange = () => {
+    dateRange.value = []
+    console.log('[Trend] 重置日期')
+    nextTick(() => {
+      triggerResize()
+    })
+  }
+
+  // 生成模拟数据
+  const generateMockData = () => {
+    const hours = []
+    for (let i = 0; i < 24; i++) {
+      hours.push(`${i}:00`)
+    }
+    return hours
+  }
+
+  // 基础折线图配置
+  // data: 数据数组，xAxis: X 轴数据（可选）
+  const createLineOption = (name, color, data = [], xAxis = []) => {
+    return {
+      tooltip: {
+        trigger: 'axis'
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '8%',
+        top: '15%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxis.length ? xAxis : generateMockData(),
+        boundaryGap: false,
+        axisLine: {
+          lineStyle: {
+            color: '#909399'
+          }
+        }
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          lineStyle: {
+            color: '#909399'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#ebeef5',
+            type: 'dashed'
+          }
+        }
+      },
+      series: [
+        {
+          name,
+          type: 'line',
+          data,
+          smooth: true,
+          itemStyle: {
+            color
+          },
+          lineStyle: {
+            color,
+            width: 2
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: color + '40' },
+                { offset: 1, color: color + '00' }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  }
+
+  const chartList = ref([
+    {
+      key: 'voltage',
+      title: '电压',
+      unit: 'V',
+      color: '#409EFF',
+      option: createLineOption('电压', '#409EFF', [], [])
+    },
+    {
+      key: 'leakage',
+      title: '漏电流值',
+      unit: 'mA',
+      color: '#67C23A',
+      option: createLineOption('漏电流', '#67C23A', [], [])
+    },
+    {
+      key: 'energy',
+      title: '累计用电量',
+      unit: 'kWh',
+      color: '#E6A23C',
+      option: createLineOption('用电量', '#E6A23C', [], [])
+    },
+    {
+      key: 'current',
+      title: '电流值',
+      unit: 'A',
+      color: '#F56C6C',
+      option: createLineOption('电流', '#F56C6C', [], [])
+    },
+    {
+      key: 'innerTemp',
+      title: '内部温度',
+      unit: '℃',
+      color: '#909399',
+      option: createLineOption('内部温度', '#909399', [], [])
+    },
+    {
+      key: 'powerFactor',
+      title: '功率因数',
+      unit: '',
+      color: '#1ABC9C',
+      option: createLineOption('功率因数', '#1ABC9C', [], [])
+    }
+  ])
+
+  // 更新图表数据
+  const updateChartData = (timeData, chartData) => {
+    chartList.value.forEach((item) => {
+      const seriesData = chartData[item.key] || []
+      item.option = createLineOption(item.title, item.color, seriesData, timeData)
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .trend-content {
+    padding: 0;
+  }
+
+  .trend-toolbar {
+    width: 40%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding: 16px;
+    background-color: var(--el-bg-color-overlay, #ffffff);
+    border-radius: 8px;
+    border: 1px solid var(--el-border-color, #e4e7ed);
+  }
+
+  .toolbar-label {
+    font-size: 14px;
+    color: var(--el-text-color-regular, #606266);
+    white-space: nowrap;
+  }
+
+  .chart-card {
+    background-color: var(--el-bg-color-overlay, #ffffff);
+    border-radius: 8px;
+    padding: 16px;
+    border: 1px solid var(--el-border-color, #e4e7ed);
+    margin-bottom: 16px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .chart-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .chart-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--el-text-color-primary, #303133);
+  }
+
+  .chart-unit {
+    font-size: 12px;
+    color: var(--el-text-color-regular, #606266);
+  }
+
+  .chart {
+    height: 220px;
+    width: 100%;
+  }
+</style>
diff --git a/src/view/equipment/list/components/detail/index.vue b/src/view/equipment/list/components/detail/index.vue
new file mode 100644
index 0000000..4201899
--- /dev/null
+++ b/src/view/equipment/list/components/detail/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="device-detail-page">
+    <div class="detail-header">
+      <el-button icon="ArrowLeft" circle @click="handleBack" />
+      <span class="detail-title">设备信息</span>
+    </div>
+
+    <el-menu :default-active="activeMenu" mode="horizontal" class="detail-menu" @select="handleMenuSelect">
+      <el-menu-item index="info">设备详情</el-menu-item>
+      <el-menu-item index="alarm">报警记录</el-menu-item>
+      <el-menu-item index="trend">历史曲线</el-menu-item>
+    </el-menu>
+
+    <DeviceInfo v-show="activeMenu === 'info'" :device="device" />
+    <DeviceTrend v-show="activeMenu === 'trend'" :device="device" />
+    <DeviceAlarm v-show="activeMenu === 'alarm'" :device="device" />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import DeviceInfo from './components/info/index.vue'
+  import DeviceTrend from './components/trend/index.vue'
+  import DeviceAlarm from './components/alarm/index.vue'
+
+  defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+
+  const emit = defineEmits(['back'])
+
+  const activeMenu = ref('info')
+
+  const handleMenuSelect = (index) => {
+    activeMenu.value = index
+  }
+
+  const handleBack = () => {
+    activeMenu.value = 'info'
+    emit('back')
+  }
+</script>
+
+<style lang="scss" scoped>
+  .device-detail-page {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .detail-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--el-text-color-primary, #303133);
+  }
+
+  .detail-menu {
+    margin-bottom: 20px;
+    // border-radius: 8px;
+    // background-color: var(--el-bg-color-overlay, #ffffff);
+    // border: 1px solid var(--el-border-color, #e4e7ed);
+  }
+</style>
diff --git a/src/view/equipment/list/components/list/index.vue b/src/view/equipment/list/components/list/index.vue
new file mode 100644
index 0000000..7928be7
--- /dev/null
+++ b/src/view/equipment/list/components/list/index.vue
@@ -0,0 +1,368 @@
+<template>
+  <div>
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="设备状态">
+          <el-select v-model="searchInfo.deviceStatus" clearable placeholder="请选择">
+            <el-option label="合闸" :value="1" />
+            <el-option label="分闸" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
+          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
+      </div>
+      <div class="device-grid">
+        <div v-for="item in tableData" :key="item.ID" class="device-card" @click="handleCardClick(item, $event)">
+          <div class="device-image">
+            <img src="@/assets/img/equipment/breaker.png" alt="设备" />
+            <div class="signal-icon" :class="{ online: item.netStatus == 1 }">
+              <i class="el-icon-connection"></i>
+            </div>
+          </div>
+          <div class="device-info">
+            <div class="card-menu">
+              <el-dropdown trigger="click" @command="(cmd) => handleDeviceAction(cmd, item)">
+                <span class="menu-icon">
+                  <el-icon><MoreFilled /></el-icon>
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-if="item.deviceStatus == 1" command="changeStatus">分闸</el-dropdown-item>
+                    <el-dropdown-item v-else command="changeStatus">分闸</el-dropdown-item>
+                    <el-dropdown-item v-if="[1].includes(item.lockStatus)" command="unlock">解锁</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+            <div class="status-tags">
+              <el-tag :type="item.netStatus == 1 ? 'primary' : 'info'">
+                {{ item.netStatus == 1 ? '在线' : '离线' }}
+              </el-tag>
+              <el-tag
+                v-if="item.cbTypeName !== 'T30' && item.deviceStatus != 1"
+                :type="item.deviceStatus == 1 ? 'success' : 'danger'"
+              >
+                {{ item.deviceStatus == 1 ? '合闸' : '分闸' }}
+              </el-tag>
+              <el-tag v-if="item.lockStatus != 0" :type="['success', 'info', 'danger'][item.lockStatus]">
+                {{ ['正常', '远程合闸禁止', '锁定'][item.lockStatus] }}
+              </el-tag>
+            </div>
+            <div class="device-name">{{ item.cbTypeName }}</div>
+            <div class="device-id-row">
+              <span class="device-id">ID:{{ item.cbId }}</span>
+              <el-button size="small" type="primary" link icon="CopyDocument" @click.stop="copyDeviceId(item.cbId)">
+              </el-button>
+            </div>
+            <div class="device-location">
+              <el-icon><LocationInformation /></el-icon>
+              <span>{{ item.gatewayMac }}</span>
+              <!-- <el-button
+                size="small"
+                type="primary"
+                link
+                icon="CopyDocument"
+                @click.stop="copyDeviceId(item.cbId)"
+              ></el-button> -->
+            </div>
+            <div class="device-channels">
+              <el-icon><Postcard /></el-icon>
+              <span>{{ item.brand }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import * as serve from '@/api/equipment/list'
+  import { ref, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { MoreFilled } from '@element-plus/icons-vue'
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  const emit = defineEmits(['select-device'])
+
+  const searchInfo = ref({
+    deviceStatus: ''
+  })
+
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  const tableData = ref([])
+
+  onMounted(() => {
+    getTableData()
+  })
+
+  // 点击设备卡片
+  const handleCardClick = (device, event) => {
+    // 如果点击的是 el-dropdown 相关元素，不跳转
+    if (event) {
+      const target = event.target
+      // 检查点击目标是否是 el-dropdown 内部元素
+      if (target.closest('.el-dropdown') || target.closest('.el-popper') || target.closest('.card-menu')) {
+        return
+      }
+    }
+    emit('select-device', device)
+  }
+
+  // 解锁
+  const unlock = async (row) => {
+    ElMessageBox.confirm('确认解锁吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(async () => {
+      const res = await serve.deviceOperation({
+        id: row.ID,
+        gatewayId: row.gatewayId,
+        para: '0xAD'
+      })
+      if (res.code === 0) {
+        ElMessage.success('操作成功')
+        getTableData()
+      }
+    })
+  }
+
+  // 合分闸
+  const changeStatus = (row) => {
+    ElMessageBox.confirm(row.deviceStatus == 1 ? '确认分闸吗？' : '确认合闸吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(async () => {
+      const res = await serve.deviceOperation({
+        id: row.ID,
+        gatewayId: row.gatewayId,
+        para: row.deviceStatus == 1 ? '0xA2' : '0xA1'
+      })
+      if (res.code === 0) {
+        ElMessage.success('操作成功')
+        getTableData()
+      }
+    })
+  }
+
+  // 分页
+  const handleSizeChange = (val) => {
+    pageSize.value = val
+    getTableData()
+  }
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getTableData()
+  }
+  // 查询
+  const getTableData = async () => {
+    const table = await serve.getDeviceListByPage({
+      page: page.value,
+      pageSize: pageSize.value,
+      ...searchInfo.value
+    })
+    if (table.code === 0) {
+      tableData.value = table.data.list
+      total.value = table.data.total
+      page.value = table.data.page
+      pageSize.value = table.data.pageSize
+    }
+  }
+
+  const onSubmit = () => {
+    page.value = 1
+    getTableData()
+  }
+
+  const onReset = () => {
+    searchInfo.value = {
+      deviceStatus: ''
+    }
+    getTableData()
+  }
+
+  // 复制设备ID
+  const copyDeviceId = async (id) => {
+    if (!id) return
+    try {
+      await navigator.clipboard.writeText(id)
+      ElMessage.success('复制成功')
+    } catch {
+      ElMessage.error('复制失败')
+    }
+  }
+
+  // 处理设备操作
+  const handleDeviceAction = (command, item) => {
+    switch (command) {
+      case 'changeStatus':
+        changeStatus(item)
+        break
+      case 'unlock':
+        unlock(item)
+        break
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  // 设备卡片容器
+  .container-device {
+    padding: 24px;
+    background-color: var(--el-bg-color, #f5f7fa);
+  }
+
+  .device-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 36px;
+    width: 100%;
+    background-color: var(--el-bg-color, #f5f7fa);
+  }
+
+  .device-card {
+    background-color: var(--el-bg-color-overlay, #ffffff);
+    border-radius: 8px;
+    padding: 16px;
+    display: flex;
+    gap: 12px;
+    color: var(--el-text-color-regular, #303133);
+    position: relative;
+    transition: all 0.3s ease;
+    border: 1px solid var(--el-border-color, #e4e7ed);
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border-color: var(--el-color-primary, #409eff);
+    }
+  }
+
+  .device-image {
+    position: relative;
+    width: 72px;
+    height: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    flex-shrink: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .signal-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      font-size: 14px;
+      color: var(--el-text-color-placeholder, #9ca3af);
+
+      &.online {
+        color: #10b981;
+      }
+    }
+  }
+
+  .device-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    position: relative;
+    padding-right: 20px;
+  }
+
+  .card-menu {
+    position: absolute;
+    top: -4px;
+    right: 0;
+    cursor: pointer;
+    color: var(--el-text-color-placeholder, #94a3b8);
+    font-size: 18px;
+
+    &:hover {
+      color: var(--el-text-color-primary, #303133);
+    }
+  }
+
+  .status-tags {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  .device-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--el-text-color-primary, #303133);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .device-id-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .device-id {
+      flex: 1;
+      font-size: 12px;
+      color: var(--el-color-primary, #409eff);
+      word-break: break-all;
+    }
+  }
+
+  .device-location,
+  .device-channels {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--el-text-color-regular, #606266);
+
+    .el-icon {
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>
diff --git a/src/view/equipment/list/index.vue b/src/view/equipment/list/index.vue
index 769e9c8..37536dc 100644
--- a/src/view/equipment/list/index.vue
+++ b/src/view/equipment/list/index.vue
@@ -1,244 +1,25 @@
 <template>
   <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
-    <div class="gva-search-box">
-      <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="设备状态">
-          <el-select v-model="searchInfo.deviceStatus" placeholder="请选择">
-            <el-option label="合闸" :value="1" />
-            <el-option label="分闸" :value="0" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
-          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="gva-table-box">
-      <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
-      </div>
-      <el-table :data="tableData" row-key="ID">
-        <!-- <el-table-column align="left" label="设备图片" min-width="75">
-          <template #default="scope">
-            <CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
-          </template>
-        </el-table-column> -->
-        <el-table-column align="left" label="设备ID" prop="cbId">
-          <template #default="{ row }">
-            {{ row.cbId || '未设置' }}
-          </template>
-        </el-table-column>
-        <!-- <el-table-column align="left" label="项目ID" prop="projectId">
-          <template #default="{ row }">
-            {{ row.projectId || '未设置' }}
-          </template>
-        </el-table-column> -->
-        <el-table-column align="left" label="网关ID" prop="gatewayId">
-          <template #default="{ row }">
-            {{ row.gatewayId || '未设置' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="设备状态">
-          <template #default="{ row }">
-            <el-tag v-if="row.cbTypeName !== 'T30'" :type="row.deviceStatus == 1 ? 'success' : 'danger'">{{
-              row.deviceStatus == 1 ? '合闸' : '分闸'
-            }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="锁定状态">
-          <template #default="{ row }">
-            <el-tag :type="['success', 'info', 'danger'][row.lockStatus]">{{
-              ['正常', '远程合闸禁止', '锁定'][row.lockStatus]
-            }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="网络">
-          <template #default="{ row }">
-            <el-tag :type="row.netStatus == 1 ? 'primary' : 'info'">{{ row.netStatus == 1 ? '在线' : '离线' }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="设备类型名称" prop="cbTypeName" />
-        <el-table-column align="left" label="网关mac" prop="gatewayMac" />
-
-        <el-table-column align="left" label="协议" prop="protocol" />
-        <el-table-column align="left" label="品牌" prop="brand" />
-
-        <el-table-column align="left" label="安装时间" prop="createTime">
-          <template #default="{ row }">
-            {{ row.createTime || '未设置' }}
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" fixed="right" width="240">
-          <template #default="{ row }">
-            <span class="action-buttons">
-              <el-button v-if="row.deviceStatus == 1" type="primary" link icon="SortUp" @click="changeStatus(row)">
-                分闸
-              </el-button>
-              <el-button v-else type="primary" link icon="SortDown" @click="changeStatus(row)">合闸</el-button>
-              <el-button v-if="[1].includes(row.lockStatus)" type="primary" link icon="Unlock" @click="unlock(row)">
-                解锁
-              </el-button>
-              <el-dropdown>
-                <span class="el-dropdown-link">
-                  更多
-                  <el-icon class="el-icon--right">
-                    <arrow-down />
-                  </el-icon>
-                </span>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item>
-                      <el-button type="primary" link icon="Odometer" @click="updateParticulars(row)">
-                        实时数据
-                      </el-button>
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="gva-pagination">
-        <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
-      </div>
-    </div>
+    <DeviceList v-show="!showDetail" @select-device="handleSelectDevice" />
+    <DeviceDetail v-show="showDetail" :device="currentDevice" @back="handleBack" />
   </div>
 </template>
 
 <script setup>
-  import * as serve from '@/api/equipment/list'
+  import { ref } from 'vue'
+  import DeviceList from './components/list/index.vue'
+  import DeviceDetail from './components/detail/index.vue'
 
-  import { nextTick, ref, watch, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
+  const showDetail = ref(false)
+  const currentDevice = ref(null)
 
-  const appStore = useAppStore()
-
-  const searchInfo = ref({
-    deviceStatus: ''
-  })
-
-  const page = ref(1)
-  const total = ref(0)
-  const pageSize = ref(10)
-  const tableData = ref([])
-
-  onMounted(() => {
-    getTableData()
-  })
-  // 解锁
-  const unlock = async (row) => {
-    ElMessageBox.confirm('确认解锁吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(async () => {
-      const res = await serve.deviceOperation({
-        id: row.ID,
-        gatewayId: row.gatewayId,
-        para: '0xAD'
-      })
-      if (res.code === 0) {
-        ElMessage.success('操作成功')
-        getTableData()
-      }
-    })
-  }
-  // 更新
-  const updateParticulars = async (row) => {
-    const res = await serve.getDeviceDetailsInfoByRemote({
-      deviceId: row.ID
-    })
-    if (res.code === 0) {
-      ElMessage.success('更新成功')
-    } else {
-      // ElMessage.error(res.msg || '更新失败')
-    }
-  }
-  // 合分闸
-  const changeStatus = (row) => {
-    ElMessageBox.confirm(row.deviceStatus == 1 ? '确认分闸吗？' : '确认合闸吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(async () => {
-      const res = await serve.deviceOperation({
-        id: row.ID,
-        gatewayId: row.gatewayId,
-        para: row.deviceStatus == 1 ? '0xA2' : '0xA1'
-      })
-      if (res.code === 0) {
-        ElMessage.success('操作成功')
-        getTableData()
-      }
-    })
+  const handleSelectDevice = (device) => {
+    currentDevice.value = device
+    showDetail.value = true
   }
 
-  // 分页
-  const handleSizeChange = (val) => {
-    pageSize.value = val
-    getTableData()
-  }
-  const handleCurrentChange = (val) => {
-    page.value = val
-    getTableData()
-  }
-  // 查询
-  const getTableData = async () => {
-    const table = await serve.getDeviceListByPage({
-      page: page.value,
-      pageSize: pageSize.value,
-      ...searchInfo.value
-    })
-    if (table.code === 0) {
-      tableData.value = table.data.list
-      total.value = table.data.total
-      page.value = table.data.page
-      pageSize.value = table.data.pageSize
-    }
-  }
-
-  const onSubmit = () => {
-    page.value = 1
-    getTableData()
-  }
-
-  const onReset = () => {
-    searchInfo.value = {
-      deviceStatus: ''
-    }
-    getTableData()
+  const handleBack = () => {
+    showDetail.value = false
+    currentDevice.value = null
   }
 </script>
-
-<style lang="scss" scoped>
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-  .action-buttons {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .el-dropdown-link {
-    cursor: pointer;
-    color: var(--el-color-primary);
-    // display: flex;
-    // align-items: center;
-  }
-</style>