diff --git a/src/api/equipment/list.js b/src/api/equipment/list.js
index ccebb42..a5f6d48 100644
--- a/src/api/equipment/list.js
+++ b/src/api/equipment/list.js
@@ -48,3 +48,11 @@ export const getCircuitBreakerDetail = (data) => {
     data: data
   })
 }
+// 设备配置
+export const getDeviceConfigListByPage = (data) => {
+  return service({
+    url: '/device/getDeviceConfigListByPage',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/api/masterStation/equipment.js b/src/api/masterStation/equipment.js
new file mode 100644
index 0000000..a5f6d48
--- /dev/null
+++ b/src/api/masterStation/equipment.js
@@ -0,0 +1,58 @@
+import service from '@/utils/request'
+// 网关
+export const getDeviceGatewayListByPage = (data) => {
+  return service({
+    url: '/device/getDeviceGatewayListByPage',
+    method: 'post',
+    data: data
+  })
+}
+// 设备
+export const getDeviceListByPage = (data) => {
+  return service({
+    url: '/device/getDeviceListByPage',
+    method: 'post',
+    data: data
+  })
+}
+
+export const deviceOperation = (data) => {
+  return service({
+    url: '/device/deviceOperation',
+    method: 'post',
+    data: data
+  })
+}
+// 曲线
+export const getDeviceDetailsListByPage = (data) => {
+  return service({
+    url: '/device/getDeviceDetailsListByPage',
+    method: 'post',
+    data: data
+  })
+}
+// 报警
+export const getAlarmRecordListByPage = (data) => {
+  return service({
+    url: '/device/getAlarmRecordListByPage',
+    method: 'post',
+    data: data
+  })
+}
+
+// 报警
+export const getCircuitBreakerDetail = (data) => {
+  return service({
+    url: '/device/getCircuitBreakerDetail',
+    method: 'post',
+    data: data
+  })
+}
+// 设备配置
+export const getDeviceConfigListByPage = (data) => {
+  return service({
+    url: '/device/getDeviceConfigListByPage',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/api/securityControl/alarmList.js b/src/api/securityControl/alarmList.js
new file mode 100644
index 0000000..7f51927
--- /dev/null
+++ b/src/api/securityControl/alarmList.js
@@ -0,0 +1,16 @@
+import service from '@/utils/request'
+// echarts图
+export const getAlarmCategorySummary = (data) => {
+  return service({
+    url: '/device/getAlarmCategorySummary',
+    method: 'post',
+    data: data
+  })
+}
+export const getAlarmTrend = (data) => {
+  return service({
+    url: '/device/getAlarmTrend',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/pathInfo.json b/src/pathInfo.json
index 53accfa..80cd0f1 100644
--- a/src/pathInfo.json
+++ b/src/pathInfo.json
@@ -14,6 +14,7 @@
   "/src/view/equipment/gateway/index.vue": "Index",
   "/src/view/equipment/index.vue": "Equipment",
   "/src/view/equipment/list/components/detail/components/alarm/index.vue": "Index",
+  "/src/view/equipment/list/components/detail/components/config/index.vue": "Index",
   "/src/view/equipment/list/components/detail/components/info/index.vue": "Index",
   "/src/view/equipment/list/components/detail/components/line/index.vue": "Index",
   "/src/view/equipment/list/components/detail/components/trend/index.vue": "Index",
@@ -54,10 +55,22 @@
   "/src/view/layout/setting/modules/layout/index.vue": "LayoutSettings",
   "/src/view/layout/tabs/index.vue": "HistoryComponent",
   "/src/view/login/index.vue": "Login",
+  "/src/view/masterStation/equipment/components/detail/components/alarm/index.vue": "Index",
+  "/src/view/masterStation/equipment/components/detail/components/config/index.vue": "Index",
+  "/src/view/masterStation/equipment/components/detail/components/info/index.vue": "Index",
+  "/src/view/masterStation/equipment/components/detail/components/line/index.vue": "Index",
+  "/src/view/masterStation/equipment/components/detail/components/trend/index.vue": "Index",
+  "/src/view/masterStation/equipment/components/detail/index.vue": "Index",
+  "/src/view/masterStation/equipment/components/list/index.vue": "Index",
+  "/src/view/masterStation/equipment/index.vue": "Index",
+  "/src/view/masterStation/index.vue": "MasterStation",
+  "/src/view/masterStation/project/index.vue": "Index",
   "/src/view/person/person.vue": "Person",
   "/src/view/routerHolder.vue": "RouterHolder",
   "/src/view/securityControl/alarmList/index.vue": "Index",
+  "/src/view/securityControl/currentAlarm/index.vue": "Index",
   "/src/view/securityControl/index.vue": "SecurityControl",
+  "/src/view/securityControl/temperatureAlarm/index.vue": "Index",
   "/src/view/superAdmin/api/api.vue": "Api",
   "/src/view/superAdmin/authority/authority.vue": "Authority",
   "/src/view/superAdmin/authority/components/apis.vue": "Apis",
diff --git a/src/view/equipment/list/components/detail/components/config/index.vue b/src/view/equipment/list/components/detail/components/config/index.vue
new file mode 100644
index 0000000..cc38385
--- /dev/null
+++ b/src/view/equipment/list/components/detail/components/config/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="config-content">
+    <div class="left">
+      <div class="title">
+        <span>线路列表</span>
+        <el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
+        <el-button style="margin-left: 3px" :disabled="!checkedDevices.length" plain size="small" type="danger"
+          >一键合闸</el-button
+        >
+      </div>
+      <div>
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+          全选
+        </el-checkbox>
+        <el-checkbox-group v-model="checkedDevices" @change="handleCheckedDevicesChange">
+          <div
+            class="ouliy"
+            :class="{ active: currentCheck == index }"
+            v-for="(item, index) in deviceList"
+            :key="item.id"
+          >
+            <el-checkbox :value="item.id">
+              <div class="line-item" @click.stop.prevent="handleClick(item, index)">
+                <span>{{ item.nodeNumber == 0 ? '总路' : `线路${index + 1}` }}</span>
+                <span>{{ `（${item.gatewayMac}）` }}</span>
+                <el-tag v-if="item.status == 1" type="danger" size="small" effect="light"> 合闸 </el-tag>
+                <el-tag v-else type="success" size="small" effect="light"> 分闸 </el-tag>
+              </div>
+            </el-checkbox>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div class="right">
+      <div>
+        <p class="title">参数配置</p>
+      </div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="参数类型" width="180" />
+        <el-table-column prop="name" label="上/下限" width="180" />
+        <el-table-column prop="date" label="预支类型" width="180" />
+        <el-table-column prop="name" label="预警值" width="180" />
+        <el-table-column prop="date" label="默认预警值" width="180" />
+        <el-table-column prop="name" label="报警值" width="180" />
+        <el-table-column prop="date" label="默认报警值" width="180" />
+        <el-table-column label="操作" :min-width="appStore.operateMinWith" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" text>设定阈值</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import * as serve from '@/api/equipment/list.js'
+  import { ref, onMounted } from 'vue'
+  import { useAppStore } from '@/pinia'
+  const appStore = useAppStore()
+
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+  onMounted(async () => {
+    await getDeviceListByPage()
+  })
+
+  // 右侧参数配置列表
+  const tableData = ref([])
+
+  const getDeviceConfigListByPage = async () => {
+    const deviceId = props.device?.deviceId
+    if (deviceId) {
+      const res = await serve.getDeviceConfigListByPage({
+        deviceId,
+        page: 1,
+        pageSize: 50
+      })
+      if (res.code === 0) {
+        // tableData.value = res.data.list || []
+        // total.value = res.data.total || 0
+      }
+    }
+  }
+
+  const deviceList = ref([])
+  // 左侧设备（线路）列表
+  const getDeviceListByPage = async () => {
+    const gatewayMac = props.device?.gatewayMac
+    if (gatewayMac) {
+      const res = await serve.getDeviceListByPage({
+        gatewayMac,
+        page: 1,
+        pageSize: 50,
+        sortBy: 'CreatedAt',
+        desc: true
+      })
+      if (res.code === 0) {
+        deviceList.value = res.data.list || []
+        // total.value = res.data.total || 0
+      }
+    }
+  }
+  // 多选
+  const checkAll = ref(false)
+  const isIndeterminate = ref(false)
+  const checkedDevices = ref([])
+  const handleCheckAllChange = (val) => {
+    checkedDevices.value = val ? deviceList.value.map((item) => item.id) : []
+    isIndeterminate.value = false
+  }
+  const handleCheckedDevicesChange = (value) => {
+    const checkedCount = value.length
+    checkAll.value = checkedCount === deviceList.value.length
+    isIndeterminate.value = checkedCount > 0 && checkedCount < deviceList.value.length
+  }
+</script>
+
+<style lang="scss" scoped>
+  .config-content {
+    display: flex;
+
+    // flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+    .left {
+      @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg 
+      width: 270px;
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--el-text-color-primary, #303133);
+        > span {
+          margin-right: 50px;
+        }
+        // margin: 0 0 16px 0;
+        // padding-bottom: 12px;
+        // border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
+      }
+      .line-item {
+        > span {
+          &:nth-child(1) {
+            display: inline-block;
+            width: 40px;
+          }
+          &:nth-child(2) {
+            display: inline-block;
+            width: 140px;
+            margin-right: 15px;
+          }
+        }
+      }
+      .ouliy {
+        padding: 5px;
+        border-radius: 5px;
+        &.active {
+          background-color: var(--el-color-primary-light-9);
+        }
+        &:hover {
+          background-color: var(--el-color-primary-light-8);
+        }
+      }
+    }
+  }
+</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
index ae095c1..f8dde60 100644
--- a/src/view/equipment/list/components/detail/components/trend/index.vue
+++ b/src/view/equipment/list/components/detail/components/trend/index.vue
@@ -489,7 +489,8 @@
       })
       if (res.code === 0) {
         ElMessage.success('操作成功')
-        getDeviceGatewayListByPage()
+        // getDeviceGatewayListByPage()
+        getCircuitBreakerDetail()
       }
     })
   }
diff --git a/src/view/equipment/list/components/detail/index.vue b/src/view/equipment/list/components/detail/index.vue
index 19c1a1b..c025fbb 100644
--- a/src/view/equipment/list/components/detail/index.vue
+++ b/src/view/equipment/list/components/detail/index.vue
@@ -11,18 +11,14 @@
         <el-radio-button label="设备详情" value="info" />
         <el-radio-button label="线路列表" value="line" />
         <el-radio-button label="运行趋势" value="trend" />
+        <el-radio-button label="参数配置" value="config" />
       </el-radio-group>
     </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-if="activeMenu === 'info'" :device="device" />
     <DeviceLine v-if="activeMenu === 'line'" :device="device" />
     <DeviceTrend v-if="activeMenu === 'trend'" :device="device" />
+    <DeviceConfig v-if="activeMenu === 'config'" :device="device" />
     <!-- <DeviceAlarm v-show="activeMenu === 'alarm'" :device="device" /> -->
   </div>
 </template>
@@ -32,6 +28,7 @@
   import DeviceInfo from './components/info/index.vue'
   import DeviceLine from './components/line/index.vue'
   import DeviceTrend from './components/trend/index.vue'
+  import DeviceConfig from './components/config/index.vue'
   import DeviceAlarm from './components/alarm/index.vue'
 
   defineProps({
@@ -42,15 +39,8 @@
   })
 
   const activeMenu = ref('info')
-
   const emit = defineEmits(['back'])
 
-  // const activeMenu = ref('info')
-
-  // const handleMenuSelect = (index) => {
-  //   activeMenu.value = index
-  // }
-
   const handleBack = () => {
     activeMenu.value = ''
     emit('back')
diff --git a/src/view/masterStation/equipment/components/detail/components/alarm/index.vue b/src/view/masterStation/equipment/components/detail/components/alarm/index.vue
new file mode 100644
index 0000000..ef08708
--- /dev/null
+++ b/src/view/masterStation/equipment/components/detail/components/alarm/index.vue
@@ -0,0 +1,173 @@
+<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.remark || '-' }}
+          </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 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 { ref, onMounted, watch } from 'vue'
+  import * as serve from '@/api/equipment/alarmRecord'
+
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+
+  // 报警数据
+  const tableData = ref([])
+
+  // 分页相关
+  const page = ref(1)
+  const pageSize = ref(10)
+  const total = ref(0)
+
+  // 当前页变化
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getTableData()
+  }
+
+  // 每页大小变化
+  const handleSizeChange = (val) => {
+    pageSize.value = val
+    page.value = 1
+    getTableData()
+  }
+
+  // 查询报警记录
+  const getTableData = async () => {
+    const deviceId = props.device?.ID
+    if (deviceId) {
+      try {
+        const table = await serve.getAlarmRecordListByPage({
+          page: page.value,
+          pageSize: pageSize.value,
+          deviceId,
+          sortBy: 'CreatedAt',
+          desc: true
+        })
+        if (table.code === 0) {
+          tableData.value = table.data.list || []
+          // total.value = table.data.total || 0
+          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/masterStation/equipment/components/detail/components/config/index.vue b/src/view/masterStation/equipment/components/detail/components/config/index.vue
new file mode 100644
index 0000000..e1ccfc4
--- /dev/null
+++ b/src/view/masterStation/equipment/components/detail/components/config/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="config-content">
+    <div class="left">
+      <div class="title">
+        <span>线路列表</span>
+        <el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
+        <el-button style="margin-left: 3px" :disabled="!checkedDevices.length" plain size="small" type="danger"
+          >一键合闸</el-button
+        >
+      </div>
+      <div>
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+          全选
+        </el-checkbox>
+        <el-checkbox-group v-model="checkedDevices" @change="handleCheckedDevicesChange">
+          <div
+            class="ouliy"
+            :class="{ active: currentCheck == index }"
+            v-for="(item, index) in deviceList"
+            :key="item.id"
+          >
+            <el-checkbox :value="item.id">
+              <div class="line-item" @click.stop.prevent="handleClick(item, index)">
+                <span>{{ item.nodeNumber == 0 ? '总路' : `线路${index + 1}` }}</span>
+                <span>{{ `（${item.gatewayMac}）` }}</span>
+                <el-tag v-if="item.status == 1" type="danger" size="small" effect="light"> 合闸 </el-tag>
+                <el-tag v-else type="success" size="small" effect="light"> 分闸 </el-tag>
+              </div>
+            </el-checkbox>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div class="right">
+      <div>
+        <p class="title">参数配置</p>
+      </div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="参数类型" width="180" />
+        <el-table-column prop="name" label="上/下限" width="180" />
+        <el-table-column prop="date" label="预支类型" width="180" />
+        <el-table-column prop="name" label="预警值" width="180" />
+        <el-table-column prop="date" label="默认预警值" width="180" />
+        <el-table-column prop="name" label="报警值" width="180" />
+        <el-table-column prop="date" label="默认报警值" width="180" />
+        <el-table-column label="操作" :min-width="appStore.operateMinWith" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" text>设定阈值</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import * as serve from '@/api/masterStation/equipment.js'
+  import { ref, onMounted } from 'vue'
+  import { useAppStore } from '@/pinia'
+  const appStore = useAppStore()
+
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+  onMounted(async () => {
+    await getDeviceListByPage()
+  })
+
+  // 右侧参数配置列表
+  const tableData = ref([])
+
+  const getDeviceConfigListByPage = async () => {
+    const deviceId = props.device?.deviceId
+    if (deviceId) {
+      const res = await serve.getDeviceConfigListByPage({
+        deviceId,
+        page: 1,
+        pageSize: 50
+      })
+      if (res.code === 0) {
+        // tableData.value = res.data.list || []
+        // total.value = res.data.total || 0
+      }
+    }
+  }
+
+  const deviceList = ref([])
+  // 左侧设备（线路）列表
+  const getDeviceListByPage = async () => {
+    const gatewayMac = props.device?.gatewayMac
+    if (gatewayMac) {
+      const res = await serve.getDeviceListByPage({
+        gatewayMac,
+        page: 1,
+        pageSize: 50,
+        sortBy: 'CreatedAt',
+        desc: true
+      })
+      if (res.code === 0) {
+        deviceList.value = res.data.list || []
+        // total.value = res.data.total || 0
+      }
+    }
+  }
+  // 多选
+  const checkAll = ref(false)
+  const isIndeterminate = ref(false)
+  const checkedDevices = ref([])
+  const handleCheckAllChange = (val) => {
+    checkedDevices.value = val ? deviceList.value.map((item) => item.id) : []
+    isIndeterminate.value = false
+  }
+  const handleCheckedDevicesChange = (value) => {
+    const checkedCount = value.length
+    checkAll.value = checkedCount === deviceList.value.length
+    isIndeterminate.value = checkedCount > 0 && checkedCount < deviceList.value.length
+  }
+</script>
+
+<style lang="scss" scoped>
+  .config-content {
+    display: flex;
+
+    // flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+    .left {
+      @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg 
+      width: 270px;
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--el-text-color-primary, #303133);
+        > span {
+          margin-right: 50px;
+        }
+        // margin: 0 0 16px 0;
+        // padding-bottom: 12px;
+        // border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
+      }
+      .line-item {
+        > span {
+          &:nth-child(1) {
+            display: inline-block;
+            width: 40px;
+          }
+          &:nth-child(2) {
+            display: inline-block;
+            width: 140px;
+            margin-right: 15px;
+          }
+        }
+      }
+      .ouliy {
+        padding: 5px;
+        border-radius: 5px;
+        &.active {
+          background-color: var(--el-color-primary-light-9);
+        }
+        &:hover {
+          background-color: var(--el-color-primary-light-8);
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/view/masterStation/equipment/components/detail/components/info/index.vue b/src/view/masterStation/equipment/components/detail/components/info/index.vue
new file mode 100644
index 0000000..9a4fcb0
--- /dev/null
+++ b/src/view/masterStation/equipment/components/detail/components/info/index.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="detail-content">
+    <!-- <div class="cards">
+      <div class="detail-card">
+        <h3>基本信息</h3>
+        <div class="detail-row">
+          <span class="detail-label">设备号：</span>
+          <span class="detail-value">{{ device?.gatewayId || '未设置' }}</span>
+        </div>
+
+        <div class="detail-row">
+          <span class="detail-label">经度：</span>
+          <span class="detail-value">{{ device?.gatewayLong || '未设置' }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">纬度：</span>
+          <span class="detail-value">{{ device?.gatewayLat || '未设置' }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">imei：</span>
+          <span class="detail-value">{{ device?.imei || '未设置' }}</span>
+        </div>
+      </div>
+
+      <div class="detail-card">
+        <h3>状态信息</h3>
+        <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> -->
+    <div class="info-box">
+      <p class="title">基础信息</p>
+      <div class="details">
+        <el-image src="https://v5.snd02.com/upload/icon/UN2.png" style="width: 150px; height: 150px; cursor: pointer" />
+        <div>
+          <p>
+            <span>设备号：</span>
+            <span>{{ device?.gatewayId || '未设置' }}</span>
+          </p>
+          <p>
+            <span>网络状态：</span>
+            <span
+              ><el-tag :type="device?.netStatus == 1 ? 'primary' : 'info'">
+                {{ device?.netStatus == 1 ? '在线' : '离线' }}
+              </el-tag></span
+            >
+          </p>
+          <p>
+            <span>经度：</span>
+            <span>{{ device?.gatewayLong || '未设置' }}</span>
+          </p>
+          <p>
+            <span>纬度：</span>
+            <span>{{ device?.gatewayLat || '未设置' }}</span>
+          </p>
+        </div>
+        <div>
+          <p>
+            <span>imei：</span>
+            <span>{{ device?.imei || '未设置' }}</span>
+          </p>
+          <p>
+            <span>地址：</span>
+            <span>{{ device?.gatewayAddress || '未设置' }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="alarms-box">
+      <p class="title">报警列表</p>
+      <div>
+        <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.remark || '-' }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import * as serve from '@/api/masterStation/equipment.js'
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+  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: '警告'
+    }
+  ]
+  const params = ref({
+    page: 1,
+    pageSize: 10,
+    sortBy: 'CreatedAt',
+    desc: true
+  })
+  const tableData = ref([])
+
+  onMounted(() => {
+    // console.log('123123')
+    // getAlarmRecordListByPage()
+    getAlarmRecordListByPage()
+  })
+
+  const getAlarmRecordListByPage = async () => {
+    // console.log(123)
+    const gatewayMac = props.device?.gatewayMac
+    if (gatewayMac) {
+      try {
+        const table = await serve.getAlarmRecordListByPage({ gatewayMac, ...params.value })
+        if (table.code === 0) {
+          tableData.value = table.data.list || []
+          // total.value = table.data.total || 0
+          return
+        }
+      } catch (e) {
+        console.error('获取报警记录失败', e)
+      }
+    } else {
+      console.warn('[Alarm] device 为空或没有 ID 字段')
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .detail-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  // .cards {
+  //   display: flex;
+  //   // flex-direction: column;
+  //   gap: 5px;
+  // }
+
+  // .detail-card {
+  //   background-color: var(--el-bg-color-overlay, #ffffff);
+  //   border-radius: 8px;
+  //   padding: 24px;
+  //   border: 1px solid var(--el-border-color, #e4e7ed);
+  //   flex: 1;
+  //   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;
+  // }
+  .alarms-box,
+  .info-box {
+    @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg;
+    padding-bottom: 40px;
+    .title {
+      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);
+    }
+  }
+  .alarms-box {
+    > div {
+      margin-top: 15px;
+      padding-left: 25px;
+    }
+  }
+  .info-box .details {
+    display: flex;
+    margin-top: 15px;
+    padding-left: 25px;
+    // flex-direction: column;
+    gap: 40px;
+    > div {
+      display: flex;
+      flex-direction: column;
+      width: 30%;
+      gap: 20px;
+      > p {
+        > span {
+          font-size: 14px;
+          &:nth-child(1) {
+            font-weight: 600;
+            color: var(--el-text-color-regular, #606266);
+          }
+          &:nth-child(2) {
+            color: var(--el-text-color-regular, #303133);
+          }
+        }
+      }
+      // justify-content: space-around;
+    }
+  }
+</style>
diff --git a/src/view/masterStation/equipment/components/detail/components/line/index.vue b/src/view/masterStation/equipment/components/detail/components/line/index.vue
new file mode 100644
index 0000000..5a44fcb
--- /dev/null
+++ b/src/view/masterStation/equipment/components/detail/components/line/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="line-content">
+    <div class="detail-card">
+      <h3>线路列表</h3>
+      <el-table :data="tableData" style="width: 100%" height="400" stripe>
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="lineName" label="线路名称" width="120">
+          <template #default="{ row }">
+            {{ row.nodeNumber == 0 ? '总路' : `线路${row.nodeNumber}` }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="lineCode" label="接线方式" width="120">
+          <template #default="{ row }">
+            {{ row.nodeNumber == 0 ? '进线直连' : '总路' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="nodeNumber" label="地址码" width="120" />
+
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="{ row }">
+            <el-tag :type="row.deviceStatus === 1 ? 'danger' : 'success'">
+              {{ row.deviceStatus === 1 ? '合闸' : '分闸' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="{ row }">
+            <el-tag :type="['success', 'info', 'danger'][row.lockStatus]">
+              {{ ['正常', '远程合闸禁止', '锁定'][row.lockStatus] }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column label="操作" :min-width="appStore.operateMinWith" fixed="right">
+          <template #default="{ row }">
+            <el-button v-if="row.deviceStatus == 1" type="success" link icon="SortUp" @click="changeStatus(row)"
+              >分闸</el-button
+            >
+            <el-button v-else type="danger" link icon="SortDown" @click="changeStatus(row)">合闸</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import * as serve from '@/api/masterStation/equipment.js'
+  import { ref, watch, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+
+  import { useAppStore } from '@/pinia'
+
+  const appStore = useAppStore()
+
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+
+  const tableData = ref([])
+
+  const params = ref({
+    page: 1,
+    pageSize: 50,
+    sortBy: 'CreatedAt',
+    desc: true
+  })
+
+  onMounted(() => {
+    getDeviceListByPage()
+  })
+
+  const getDeviceListByPage = async () => {
+    const gatewayMac = props.device?.gatewayMac
+    if (gatewayMac) {
+      try {
+        const res = await serve.getDeviceListByPage({
+          gatewayMac,
+          ...params.value
+        })
+        if (res.code === 0) {
+          tableData.value = res.data.list || []
+          // total.value = res.data.total || 0
+        }
+      } catch (e) {
+        console.error('获取线路列表失败', e)
+      }
+    }
+  }
+
+  // 合分闸
+  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('操作成功')
+        getDeviceListByPage()
+      }
+    })
+  }
+</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);
+    }
+  }
+
+  .gva-pagination {
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/src/view/masterStation/equipment/components/detail/components/trend/index.vue b/src/view/masterStation/equipment/components/detail/components/trend/index.vue
new file mode 100644
index 0000000..211b8c1
--- /dev/null
+++ b/src/view/masterStation/equipment/components/detail/components/trend/index.vue
@@ -0,0 +1,678 @@
+<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"
+      />
+     
+    </div> -->
+
+    <div class="left">
+      <div class="title">
+        <span>线路列表</span>
+        <el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
+        <el-button style="margin-left: 3px" :disabled="!checkedDevices.length" plain size="small" type="danger"
+          >一键合闸</el-button
+        >
+      </div>
+      <div>
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+          全选
+        </el-checkbox>
+        <el-checkbox-group v-model="checkedDevices" @change="handleCheckedDevicesChange">
+          <div
+            class="ouliy"
+            :class="{ active: currentCheck == index }"
+            v-for="(item, index) in deviceList"
+            :key="item.id"
+          >
+            <el-checkbox :value="item.id">
+              <div class="line-item" @click.stop.prevent="handleClick(item, index)">
+                <span>{{ item.nodeNumber == 0 ? '总路' : `线路${index + 1}` }}</span>
+                <span>{{ `（${item.gatewayMac}）` }}</span>
+                <el-tag v-if="item.status == 1" type="danger" size="small" effect="light"> 合闸 </el-tag>
+                <el-tag v-else type="success" size="small" effect="light"> 分闸 </el-tag>
+              </div>
+            </el-checkbox>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top">
+        <p class="title">基本信息</p>
+        <div class="info">
+          <div class="item">
+            <div>
+              <span>设备名称：</span>
+              <span>{{
+                circuitBreaker.device?.nodeNumber == 0 ? '总路' : `线路${circuitBreaker.device?.nodeNumber}`
+              }}</span>
+            </div>
+            <div>
+              <span>线路ID：</span>
+              <span>{{ `${circuitBreaker.device?.gatewayMac}-${circuitBreaker.device?.nodeNumber}` }}</span>
+            </div>
+            <div>
+              <span>总功率：</span>
+              <span>{{ circuitBreaker.latestTelemetry?.power || 0 }}</span>
+            </div>
+            <div>
+              <span>机身温度(℃)：</span>
+              <span>{{ circuitBreaker.latestTelemetry?.internalTemperature || 0 }}</span>
+            </div>
+            <div>
+              <span>漏保档位：</span>
+              <span>无</span>
+            </div>
+            <div>
+              <span>电气子节点：</span>
+              <span>点击展开</span>
+            </div>
+            <div>
+              <span>警情状态：</span>
+              <span>--</span>
+            </div>
+          </div>
+          <div class="item">
+            <div>
+              <span>线路状态：</span>
+              <span
+                ><el-tag v-if="circuitBreaker.device?.deviceStatus == 1" type="danger" size="small" effect="light">
+                  合闸
+                </el-tag>
+                <el-tag v-else type="success" size="small" effect="light"> 分闸 </el-tag></span
+              >
+            </div>
+            <div>
+              <span>地址码：</span>
+              <span>{{ circuitBreaker.latestTelemetry?.nodeNumber || '--' }}</span>
+            </div>
+            <div>
+              <span>环境温度：</span>
+              <span>--</span>
+            </div>
+          </div>
+          <div class="other" style="width: 100%">
+            <div>
+              <el-button :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
+                >合闸</el-button
+              >
+              <el-button :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
+                >分闸</el-button
+              >
+            </div>
+            <el-table :data="realTimeData" border>
+              <el-table-column prop="text" label="实时数据" />
+              <el-table-column prop="value" label="相线" />
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div>
+          <p class="title">运行趋势</p>
+        </div>
+        <el-row v-if="isReady">
+          <el-col v-for="(item, index) in chartList" :key="item.key" :span="24">
+            <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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import * as serve from '@/api/masterStation/equipment.js'
+  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 { ElMessage, ElMessageBox } from 'element-plus'
+  use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+
+  const currentCheck = ref(0)
+
+  const deviceList = ref([])
+  // const circuitBreaker = ref({})
+
+  const handleClick = (item, index) => {
+    currentCheck.value = index
+    console.log(item, index)
+
+    getDeviceDetailsListByPage()
+    getCircuitBreakerDetail()
+  }
+  // 容器 ref
+  const chartContainerRef = ref(null)
+  // 容器就绪状态：父级用 v-show 切换时，初始为 display:None，宽度为 0，需要等容器有尺寸后再渲染图表
+  const isReady = ref(false)
+  let resizeObserver = null
+
+  onMounted(async () => {
+    if (chartContainerRef.value) {
+      nextTick(checkContainerReady)
+      resizeObserver = new ResizeObserver(() => {
+        checkContainerReady()
+      })
+      resizeObserver.observe(chartContainerRef.value)
+    }
+    await getDeviceListByPage()
+    getCircuitBreakerDetail()
+    getDeviceDetailsListByPage()
+  })
+
+  // 左侧设备（线路）列表
+  const getDeviceListByPage = async () => {
+    const gatewayMac = props.device?.gatewayMac
+    if (gatewayMac) {
+      const res = await serve.getDeviceListByPage({
+        gatewayMac,
+        page: 1,
+        pageSize: 50,
+        sortBy: 'CreatedAt',
+        desc: true
+      })
+      if (res.code === 0) {
+        deviceList.value = res.data.list || []
+        // total.value = res.data.total || 0
+      }
+    }
+  }
+
+  // 检测容器是否已具备尺寸
+  const checkContainerReady = () => {
+    if (isReady.value || !chartContainerRef.value) return
+    const { clientWidth, clientHeight } = chartContainerRef.value
+    if (clientWidth > 0 && clientHeight > 0) {
+      isReady.value = true
+    }
+  }
+
+  // 触发图表 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 circuitBreaker = ref([])
+  const realTimeData = ref([])
+
+  // 基本信息
+  const getCircuitBreakerDetail = async () => {
+    const ID = deviceList.value[currentCheck.value].ID
+    // console.log(deviceId)
+    const res = await serve.getCircuitBreakerDetail({
+      ID
+    })
+    if (res.code === 0) {
+      const arr = [
+        { label: 'current', text: '电流(A)' },
+        { label: 'voltage', text: '电压' },
+        { label: 'internalTemperature', text: '温度' },
+        { label: 'powerFactor', text: '功率' }
+      ]
+      if (res.data.latestTelemetry) {
+        arr.forEach((item) => {
+          item.value = res.data.latestTelemetry[item.label] || '--'
+        })
+        realTimeData.value = arr
+      }
+
+      circuitBreaker.value = res.data
+      console.log('circuitBreaker', circuitBreaker.value)
+    }
+  }
+  // echarts图
+  const getDeviceDetailsListByPage = async () => {
+    if (!dateRange.value || dateRange.value.length !== 2) {
+      console.warn('[Trend] 日期范围无效')
+      return
+    }
+    const deviceId = deviceList.value[currentCheck.value].id
+    try {
+      const result = await serve.getDeviceDetailsListByPage({
+        page: 1,
+        pageSize: 999,
+        deviceId,
+        startCreatedAt: dateRange.value[0],
+        endCreatedAt: dateRange.value[1],
+        orderKey: 'voltage',
+        sortBy: 'CreatedAt',
+        order: 'desc',
+        desc: true
+      })
+      if (result.code === 0) {
+        const list = result.data.list || []
+        const timeData = []
+        const chartData = {
+          voltage: [], // 电压（V）
+          leakageCurrent: [], // 漏电流值（mA）
+          cumulativeElectricity: [], // 累计用电量（kWh）
+          current: [], // 电流值（A）
+          internalTemperature: [], // 内部温度（℃）
+          powerFactor: [] // 功率因数
+        }
+
+        list.forEach((item) => {
+          timeData.push(item.CreatedAt)
+          chartData.voltage.push(item.voltage)
+          chartData.leakageCurrent.push(item.leakageCurrent)
+          chartData.cumulativeElectricity.push(item.cumulativeElectricity)
+          chartData.current.push(item.current)
+          chartData.internalTemperature.push(item.internalTemperature)
+          chartData.powerFactor.push(item.powerFactor)
+        })
+        updateChartData(timeData, chartData)
+      }
+    } catch (e) {}
+  }
+
+  // 监听 device 变化，重新请求数据
+  // watch(
+  //   () => props.device,
+  //   (newDevice, oldDevice) => {
+  //     if (newDevice && (!oldDevice || newDevice.ID !== oldDevice.ID)) {
+  //       getDeviceDetailsListByPage()
+  //     }
+  //     nextTick(() => {
+  //       triggerResize()
+  //     })
+  //   },
+  //   { deep: true, immediate: false }
+  // )
+
+  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()
+        getDeviceDetailsListByPage()
+      })
+    }
+  }
+
+  // 基础折线图配置
+  // 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,
+        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,
+          // 去掉数据点标点，全一条线
+          symbol: 'none',
+          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: 'leakageCurrent',
+      title: '漏电流值',
+      unit: 'mA',
+      color: '#67C23A',
+      option: createLineOption('漏电流', '#67C23A', [], [])
+    },
+    {
+      key: 'cumulativeElectricity',
+      title: '累计用电量',
+      unit: 'kWh',
+      color: '#E6A23C',
+      option: createLineOption('用电量', '#E6A23C', [], [])
+    },
+    {
+      key: 'current',
+      title: '电流值',
+      unit: 'A',
+      color: '#F56C6C',
+      option: createLineOption('电流', '#F56C6C', [], [])
+    },
+    {
+      key: 'internalTemperature',
+      title: '内部温度',
+      unit: '℃',
+      color: '#909399',
+      option: createLineOption('内部温度', '#909399', [], [])
+    },
+    {
+      key: 'powerFactor',
+      title: '功率因数',
+      unit: '',
+      color: '#1ABC9C',
+      option: createLineOption('功率因数', '#1ABC9C', [], [])
+    }
+  ])
+
+  // 合分闸
+  const changeStatus = () => {
+    const row = circuitBreaker.value.device || {}
+    if (!row.ID) {
+      ElMessage.error('请选择设备')
+      return
+    }
+    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('操作成功')
+        // getDeviceGatewayListByPage()
+        getCircuitBreakerDetail()
+      }
+    })
+  }
+
+  // 更新图表数据
+  const updateChartData = (timeData, chartData) => {
+    chartList.value.forEach((item) => {
+      const seriesData = chartData[item.key] || []
+      item.option = createLineOption(item.title, item.color, seriesData, timeData)
+    })
+  }
+  // 多选
+  const checkAll = ref(false)
+  const isIndeterminate = ref(false)
+  const checkedDevices = ref([])
+  const handleCheckAllChange = (val) => {
+    checkedDevices.value = val ? deviceList.value.map((item) => item.id) : []
+    isIndeterminate.value = false
+  }
+  const handleCheckedDevicesChange = (value) => {
+    const checkedCount = value.length
+    checkAll.value = checkedCount === deviceList.value.length
+    isIndeterminate.value = checkedCount > 0 && checkedCount < deviceList.value.length
+  }
+</script>
+
+<style lang="scss" scoped>
+  .trend-content {
+    // @apply text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg
+    display: flex;
+
+    // flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+    .left {
+      @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg 
+      width: 270px;
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--el-text-color-primary, #303133);
+        > span {
+          margin-right: 50px;
+        }
+        // margin: 0 0 16px 0;
+        // padding-bottom: 12px;
+        // border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
+      }
+      .line-item {
+        > span {
+          &:nth-child(1) {
+            display: inline-block;
+            width: 40px;
+          }
+          &:nth-child(2) {
+            display: inline-block;
+            width: 140px;
+            margin-right: 15px;
+          }
+        }
+      }
+      .ouliy {
+        padding: 5px;
+        border-radius: 5px;
+        &.active {
+          background-color: var(--el-color-primary-light-9);
+        }
+        &:hover {
+          background-color: var(--el-color-primary-light-8);
+        }
+      }
+    }
+    .right {
+      height: calc(100vh - 6rem - 120px);
+      flex: 1;
+      overflow: auto;
+      .top {
+        @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg;
+        margin-bottom: 10px;
+        .title {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--el-text-color-primary, #303133);
+        }
+        .info {
+          display: flex;
+          // flex-direction: column;
+          gap: 100px;
+        }
+        .item {
+          padding: 12px 12px 0 12px;
+          > div {
+            height: 30px;
+            white-space: nowrap;
+            > span {
+              &:nth-child(1) {
+                display: inline-block;
+                width: 120px;
+                font-size: 14px;
+                color: var(--el-text-color-regular, #ddd);
+              }
+              &:nth-child(2) {
+                font-size: 14px;
+                color: var(--el-text-color-primary, #303133);
+              }
+            }
+          }
+        }
+        .other {
+          :deep(.el-table .el-table__cell) {
+            padding: 2px;
+          }
+          div {
+            &:nth-child(1) {
+              display: flex;
+              justify-content: flex-end;
+              margin-bottom: 20px;
+            }
+          }
+        }
+      }
+      .bottom {
+        @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg;
+        .title {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--el-text-color-primary, #303133);
+        }
+      }
+    }
+  }
+
+  .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;
+    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/masterStation/equipment/components/detail/index.vue b/src/view/masterStation/equipment/components/detail/index.vue
new file mode 100644
index 0000000..c025fbb
--- /dev/null
+++ b/src/view/masterStation/equipment/components/detail/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="device-detail-page">
+    <!-- <div class="detail-header">
+      <el-button icon="ArrowLeft" circle @click="handleBack" />
+      <span class="detail-title">设备信息</span>
+    </div> -->
+    <div class="tabs-box">
+      <el-button icon="ArrowLeft" circle @click="handleBack" />
+      <span class="title">设备信息（{{ device?.gatewayMac }}）</span>
+      <el-radio-group v-model="activeMenu" size="large" fill="#409eff">
+        <el-radio-button label="设备详情" value="info" />
+        <el-radio-button label="线路列表" value="line" />
+        <el-radio-button label="运行趋势" value="trend" />
+        <el-radio-button label="参数配置" value="config" />
+      </el-radio-group>
+    </div>
+
+    <DeviceInfo v-if="activeMenu === 'info'" :device="device" />
+    <DeviceLine v-if="activeMenu === 'line'" :device="device" />
+    <DeviceTrend v-if="activeMenu === 'trend'" :device="device" />
+    <DeviceConfig v-if="activeMenu === 'config'" :device="device" />
+    <!-- <DeviceAlarm v-show="activeMenu === 'alarm'" :device="device" /> -->
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import DeviceInfo from './components/info/index.vue'
+  import DeviceLine from './components/line/index.vue'
+  import DeviceTrend from './components/trend/index.vue'
+  import DeviceConfig from './components/config/index.vue'
+  import DeviceAlarm from './components/alarm/index.vue'
+
+  defineProps({
+    device: {
+      type: Object,
+      default: () => null
+    }
+  })
+
+  const activeMenu = ref('info')
+  const emit = defineEmits(['back'])
+
+  const handleBack = () => {
+    activeMenu.value = ''
+    emit('back')
+  }
+</script>
+
+<style lang="scss" scoped>
+  .device-detail-page {
+    // padding: 20px;
+    .tabs-box {
+      @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg;
+      display: flex;
+      align-items: center;
+      > .title {
+        margin: 0 15px;
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--el-text-color-primary, #303133);
+      }
+    }
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .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/masterStation/equipment/components/list/index.vue b/src/view/masterStation/equipment/components/list/index.vue
new file mode 100644
index 0000000..25c0d1a
--- /dev/null
+++ b/src/view/masterStation/equipment/components/list/index.vue
@@ -0,0 +1,377 @@
+<template>
+  <div>
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="网关MAC">
+          <el-input v-model="searchInfo.gatewayMac" placeholder="请输入" clearable />
+        </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.gatewayMac }}</div>
+            <div class="device-id-row">
+              <span class="device-id">ID:{{ item.gatewayId }}</span>
+              <el-button
+                size="small"
+                type="primary"
+                link
+                icon="CopyDocument"
+                @click.stop="copyDeviceId(item.gatewayId)"
+              >
+              </el-button>
+            </div>
+            <div class="device-location">
+              <el-icon><LocationInformation /></el-icon>
+              <span style="white-space: break-spaces">{{ item.gatewayAddress }}</span>
+            </div>
+            <div class="device-channels">
+              <el-icon><Operation /></el-icon>
+              <span>{{ '3' }}</span>
+            </div>
+            <div v-if="item.alarmType" class="device-alarm">
+              <el-icon style="color: #f56c6c"><WarningFilled /></el-icon>
+              <span style="color: #f56c6c">{{ item.alarmCreatedAt }} {{ item.alarmType }} </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/masterStation/equipment.js'
+  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({
+    gatewayMac: ''
+  })
+
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  const tableData = ref([])
+
+  onMounted(() => {
+    getDeviceGatewayListByPage()
+  })
+
+  // 点击设备卡片
+  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('操作成功')
+        getDeviceGatewayListByPage()
+      }
+    })
+  }
+
+  // 合分闸
+  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('操作成功')
+        getDeviceGatewayListByPage()
+      }
+    })
+  }
+
+  // 分页
+  const handleSizeChange = (val) => {
+    pageSize.value = val
+    getDeviceGatewayListByPage()
+  }
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getDeviceGatewayListByPage()
+  }
+  // 查询
+  const getDeviceGatewayListByPage = async () => {
+    const table = await serve.getDeviceGatewayListByPage({
+      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
+    getDeviceGatewayListByPage()
+  }
+
+  const onReset = () => {
+    searchInfo.value = {
+      gatewayMac: ''
+    }
+    getDeviceGatewayListByPage()
+  }
+
+  // 复制设备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(330px, 1fr));
+    gap: 12px;
+    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: 14px;
+      color: var(--el-color-primary, #409eff);
+      word-break: break-all;
+    }
+  }
+
+  .device-location,
+  .device-channels,
+  .device-alarm {
+    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;
+    }
+  }
+  // .device-alarm {
+  //   display: flex;
+  //   // align-items: center;
+  //   gap: 4px;
+  //   font-size: 12px;
+  //   color: var(--el-text-color-regular, #606266);
+  // }
+</style>
diff --git a/src/view/masterStation/equipment/index.vue b/src/view/masterStation/equipment/index.vue
new file mode 100644
index 0000000..37536dc
--- /dev/null
+++ b/src/view/masterStation/equipment/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <DeviceList v-show="!showDetail" @select-device="handleSelectDevice" />
+    <DeviceDetail v-show="showDetail" :device="currentDevice" @back="handleBack" />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import DeviceList from './components/list/index.vue'
+  import DeviceDetail from './components/detail/index.vue'
+
+  const showDetail = ref(false)
+  const currentDevice = ref(null)
+
+  const handleSelectDevice = (device) => {
+    currentDevice.value = device
+    showDetail.value = true
+  }
+
+  const handleBack = () => {
+    showDetail.value = false
+    currentDevice.value = null
+  }
+</script>
diff --git a/src/view/masterStation/index.vue b/src/view/masterStation/index.vue
new file mode 100644
index 0000000..00ee663
--- /dev/null
+++ b/src/view/masterStation/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <keep-alive :include="routerStore.keepAliveRouters">
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<script setup>
+  import { useRouterStore } from '@/pinia/modules/router'
+  const routerStore = useRouterStore()
+
+  defineOptions({
+    name: 'MasterStation'
+  })
+</script>
diff --git a/src/view/masterStation/project/index.vue b/src/view/masterStation/project/index.vue
new file mode 100644
index 0000000..b23dd19
--- /dev/null
+++ b/src/view/masterStation/project/index.vue
@@ -0,0 +1,754 @@
+<template>
+  <div class="project-overview">
+    <div class="main-panel">
+      <!-- 地图区域 -->
+      <div class="overview-card">
+        <div class="card-header">
+          <div class="tabs">
+            <div :class="['tab', { active: deviceTab === 'device' }]" @click="deviceTab = 'device'">设备概况</div>
+            <div :class="['tab', { active: deviceTab === 'project' }]" @click="deviceTab = 'project'">项目概况</div>
+          </div>
+          <el-icon class="fullscreen-icon" @click="toggleMapFullscreen"><FullScreen /></el-icon>
+        </div>
+        <div ref="mapWrapperRef" class="map-container">
+          <div id="projectMap" class="map-canvas"></div>
+        </div>
+      </div>
+
+      <!-- 警情列表 -->
+      <div class="alarm-list">
+        <div class="list-header">
+          <div class="list-title">
+            <span class="dot"></span>
+            警情列表
+          </div>
+        </div>
+        <div class="record-tag">智能竖井</div>
+        <el-table :data="alarmTableData" border stripe class="alarm-table">
+          <el-table-column align="center" label="序号" prop="index" width="60" />
+          <el-table-column align="left" label="事件ID" prop="eventId" width="110" />
+          <el-table-column align="left" label="设备别名" prop="deviceAlias" min-width="150" show-overflow-tooltip />
+          <el-table-column align="left" label="设备号" prop="deviceNum" width="150" />
+          <el-table-column align="center" label="线路" prop="line" width="80" />
+          <el-table-column align="left" label="报警/预警类型" prop="alarmType" width="120" />
+          <el-table-column align="center" label="报警/预警值（红色）/ 阈值（蓝色）" width="200">
+            <template #default="scope">
+              <span v-if="scope.row.alarmValue" class="value-red">{{ scope.row.alarmValue }}</span>
+              <span v-if="scope.row.alarmValue && scope.row.threshold"> / </span>
+              <span v-if="scope.row.threshold" class="value-blue">{{ scope.row.threshold }}</span>
+              <span v-if="!scope.row.alarmValue && !scope.row.threshold">/</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="耗时" prop="duration" width="80" />
+          <el-table-column align="center" label="状态" prop="status" width="90">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '已处理' ? 'success' : 'danger'" size="small" effect="light">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="报警/预警时间" prop="alarmTime" width="170" />
+          <el-table-column align="center" label="动作" width="100" fixed="right">
+            <template #default="scope">
+              <el-button v-if="scope.row.status === '未处理'" type="primary" link @click="handleProcess(scope.row)">
+                处理
+              </el-button>
+              <el-button v-else type="primary" link @click="handleRecall(scope.row)">撤回</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 警情情况（右侧） -->
+    <div class="alarm-section">
+      <div class="alarm-title">警情情况</div>
+
+      <div class="alarm-card">
+        <div class="alarm-row">
+          <div class="alarm-icon device-icon">
+            <el-icon><Monitor /></el-icon>
+          </div>
+          <div class="alarm-content">
+            <div class="alarm-labels">
+              <span class="label-item">设备总数</span>
+              <span class="label-item">在线设备数</span>
+              <span class="label-item">离线设备数</span>
+            </div>
+            <div class="alarm-values">
+              <span class="value-item">17</span>
+              <span class="value-item online">12</span>
+              <span class="value-item offline">5</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="alarm-card">
+        <div class="alarm-row">
+          <div class="alarm-icon line-icon">
+            <el-icon><Connection /></el-icon>
+          </div>
+          <div class="alarm-content">
+            <div class="alarm-labels">
+              <span class="label-item">线路总数</span>
+              <span class="label-item">在线线路数</span>
+              <span class="label-item">离线线路数</span>
+            </div>
+            <div class="alarm-values">
+              <span class="value-item">92</span>
+              <span class="value-item online">74</span>
+              <span class="value-item offline">18</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="alarm-card">
+        <div class="alarm-row">
+          <div class="alarm-icon warn-icon">
+            <el-icon><Bell /></el-icon>
+          </div>
+          <div class="alarm-content">
+            <div class="alarm-labels">
+              <span class="label-item">本月报警总数</span>
+              <span class="label-item">本月预警总数</span>
+              <span class="label-item">昨日报警总数</span>
+            </div>
+            <div class="alarm-values">
+              <span class="value-item danger">19641</span>
+              <span class="value-item warning">208</span>
+              <span class="value-item danger">25</span>
+            </div>
+            <div class="alarm-labels second-row">
+              <span class="label-item">今日报警总数</span>
+              <span class="label-item">今日报警设备数</span>
+            </div>
+            <div class="alarm-values two-cols">
+              <span class="value-item danger">13</span>
+              <span class="value-item danger">5</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="alarm-card">
+        <div class="alarm-row process-row">
+          <div class="process-stat">
+            <div class="process-ring green">
+              <span class="process-ring-value">0.18%</span>
+            </div>
+            <div class="process-label">本月已处理报警数</div>
+            <div class="process-sub-value processed">35</div>
+          </div>
+          <div class="process-divider"></div>
+          <div class="process-stat">
+            <div class="process-ring red">
+              <span class="process-ring-value">99.82%</span>
+            </div>
+            <div class="process-label">本月未处理报警数</div>
+            <div class="process-sub-value unprocessed">19606</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { FullScreen, Monitor, Connection, Bell } from '@element-plus/icons-vue'
+  import { ElMessage } from 'element-plus'
+
+  defineOptions({
+    name: 'MasterStationProject'
+  })
+
+  const deviceTab = ref('device')
+  const mapWrapperRef = ref(null)
+  const mapInstance = ref(null)
+  const markers = ref([])
+
+  const alarmTableData = ref([
+    {
+      index: 1,
+      eventId: '634949976',
+      deviceAlias: 'DEV-98CC4D11AA3C',
+      deviceNum: '98CC4D11AA3C',
+      line: '-',
+      alarmType: '上线提醒',
+      alarmValue: '',
+      threshold: '',
+      duration: '-',
+      status: '已处理',
+      alarmTime: '2026-06-10 14:52:02'
+    },
+    {
+      index: 2,
+      eventId: '634924606',
+      deviceAlias: 'DEV-98CC4D11AA3C',
+      deviceNum: '98CC4D11AA3C',
+      line: '线路03',
+      alarmType: '异常分闸',
+      alarmValue: '0',
+      threshold: '100',
+      duration: '2h',
+      status: '已处理',
+      alarmTime: '2026-06-10 14:17:33'
+    },
+    {
+      index: 3,
+      eventId: '634924607',
+      deviceAlias: 'DEV-98CC4D11AA3C',
+      deviceNum: '98CC4D11AA3C',
+      line: '-',
+      alarmType: '上线提醒',
+      alarmValue: '',
+      threshold: '',
+      duration: '-',
+      status: '已处理',
+      alarmTime: '2026-06-10 14:17:19'
+    },
+    {
+      index: 4,
+      eventId: '634906602',
+      deviceAlias: 'DEV-98CC4D11AA3C',
+      deviceNum: '98CC4D11AA3C',
+      line: '-',
+      alarmType: '上线提醒',
+      alarmValue: '',
+      threshold: '',
+      duration: '-',
+      status: '未处理',
+      alarmTime: '2026-06-10 13:54:02'
+    },
+    {
+      index: 5,
+      eventId: '634898301',
+      deviceAlias: 'DEV-98CC4D2052AE',
+      deviceNum: '98CC4D2052AE',
+      line: '线路01',
+      alarmType: '异常分闸',
+      alarmValue: '120',
+      threshold: '100',
+      duration: '35m',
+      status: '未处理',
+      alarmTime: '2026-06-10 13:20:15'
+    }
+  ])
+
+  const mapDevices = [
+    { lng: 116.4, lat: 39.9, label: '10', type: 'cluster' },
+    { lng: 113.2, lat: 23.1, label: '6', type: 'cluster' },
+    { lng: 118.8, lat: 32.0, label: '98CC4D2052AE', subLabel: '98CC4D2052AE', type: 'device' }
+  ]
+
+  const createClusterContent = (label) => {
+    return `
+      <div class="map-cluster-marker">
+        <div class="map-cluster-pulse"></div>
+        <div class="map-cluster-core">${label}</div>
+      </div>
+    `
+  }
+
+  const createDeviceContent = (label, subLabel) => {
+    return `
+      <div class="map-device-marker">
+        <div class="map-device-icon">📍</div>
+        <div class="map-device-label">
+          <div class="map-device-name">${label}</div>
+          <div class="map-device-sub">[${subLabel}]</div>
+        </div>
+      </div>
+    `
+  }
+
+  const initMap = () => {
+    if (typeof AMap === 'undefined') {
+      console.error('高德地图API未加载')
+      return
+    }
+
+    mapInstance.value = new AMap.Map('projectMap', {
+      zoom: 5,
+      center: [116.4074, 39.9042],
+      mapStyle: 'amap://styles/whitesmoke',
+      viewMode: '2D',
+      features: ['bg', 'road', 'building', 'point']
+    })
+
+    mapDevices.forEach((item) => {
+      const content =
+        item.type === 'cluster'
+          ? createClusterContent(item.label)
+          : createDeviceContent(item.label, item.subLabel)
+
+      const marker = new AMap.Marker({
+        position: [item.lng, item.lat],
+        content,
+        offset: item.type === 'cluster' ? new AMap.Pixel(-18, -18) : new AMap.Pixel(-10, -30),
+        zIndex: item.type === 'device' ? 10 : 5
+      })
+
+      mapInstance.value.add(marker)
+      markers.value.push(marker)
+    })
+  }
+
+  const toggleMapFullscreen = () => {
+    const el = mapWrapperRef.value
+    if (!el) return
+    if (!document.fullscreenElement) {
+      el.requestFullscreen?.()
+    } else {
+      document.exitFullscreen?.()
+    }
+  }
+
+  const handleProcess = (row) => {
+    row.status = '已处理'
+    ElMessage.success('处理成功')
+  }
+
+  const handleRecall = (row) => {
+    row.status = '未处理'
+    ElMessage.success('已撤回')
+  }
+
+  const handleResize = () => {
+    mapInstance.value?.resize()
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      initMap()
+    })
+    window.addEventListener('resize', handleResize)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResize)
+    if (mapInstance.value) {
+      mapInstance.value.destroy()
+      mapInstance.value = null
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  .project-overview {
+    background-color: #f5f7fa;
+    padding: 12px;
+    display: flex;
+    gap: 12px;
+    min-height: calc(100vh - 120px);
+    color: #303133;
+  }
+
+  .main-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .overview-card,
+  .alarm-list,
+  .alarm-card {
+    background: #ffffff;
+    border: 1px solid #e4e7ed;
+    border-radius: 6px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  }
+
+  .overview-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .tabs {
+    display: flex;
+    gap: 24px;
+  }
+
+  .tab {
+    font-size: 14px;
+    color: #909399;
+    cursor: pointer;
+    padding-bottom: 6px;
+    position: relative;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #409eff;
+    }
+
+    &.active {
+      color: #409eff;
+      font-weight: 600;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: #409eff;
+        border-radius: 1px;
+      }
+    }
+  }
+
+  .fullscreen-icon {
+    color: #909399;
+    cursor: pointer;
+    font-size: 16px;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+
+  .map-container {
+    height: 360px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid #ebeef5;
+    background: #f0f2f5;
+  }
+
+  .map-canvas {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* 右侧警情情况 */
+  .alarm-section {
+    width: 380px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .alarm-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    padding: 4px 8px;
+  }
+
+  .alarm-card {
+    padding: 14px 12px;
+  }
+
+  .alarm-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .alarm-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 22px;
+
+    &.device-icon {
+      background: linear-gradient(135deg, #409eff, #2777ec);
+    }
+
+    &.line-icon {
+      background: linear-gradient(135deg, #67c23a, #4ab27a);
+    }
+
+    &.warn-icon {
+      background: linear-gradient(135deg, #f56c6c, #e94d4d);
+    }
+  }
+
+  .alarm-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .alarm-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #909399;
+
+    &.second-row {
+      margin-top: 4px;
+    }
+  }
+
+  .alarm-values {
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px;
+    font-weight: bold;
+    font-family: 'DIN', 'Arial', sans-serif;
+
+    &.two-cols {
+      justify-content: flex-start;
+      gap: 80px;
+    }
+
+    .value-item {
+      color: #303133;
+
+      &.online {
+        color: #67c23a;
+      }
+
+      &.offline {
+        color: #f56c6c;
+      }
+
+      &.danger {
+        color: #f56c6c;
+      }
+
+      &.warning {
+        color: #e6a23c;
+      }
+    }
+  }
+
+  /* 处理率环形图 */
+  .process-row {
+    justify-content: center;
+    gap: 0;
+  }
+
+  .process-stat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .process-ring {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &.green {
+      background: conic-gradient(#67c23a 0deg 1deg, #e4e7ed 1deg 360deg);
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: #ffffff;
+      }
+    }
+
+    &.red {
+      background: conic-gradient(#f56c6c 0deg 359deg, #e4e7ed 359deg 360deg);
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: #ffffff;
+      }
+    }
+
+    .process-ring-value {
+      position: relative;
+      z-index: 1;
+      font-size: 11px;
+      font-weight: bold;
+    }
+
+    &.green .process-ring-value {
+      color: #67c23a;
+    }
+
+    &.red .process-ring-value {
+      color: #f56c6c;
+    }
+  }
+
+  .process-label {
+    font-size: 11px;
+    color: #909399;
+    text-align: center;
+  }
+
+  .process-sub-value {
+    font-size: 15px;
+    font-weight: bold;
+
+    &.processed {
+      color: #67c23a;
+    }
+
+    &.unprocessed {
+      color: #f56c6c;
+    }
+  }
+
+  .process-divider {
+    width: 1px;
+    height: 90px;
+    background: #e4e7ed;
+    margin: 0 12px;
+  }
+
+  /* 警情列表 */
+  .alarm-list {
+    padding: 12px;
+    position: relative;
+  }
+
+  .list-header {
+    margin-bottom: 10px;
+  }
+
+  .list-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .dot {
+    width: 3px;
+    height: 14px;
+    background: #409eff;
+    border-radius: 2px;
+  }
+
+  .record-tag {
+    display: inline-block;
+    background: #409eff;
+    color: #ffffff;
+    font-size: 12px;
+    padding: 5px 14px;
+    border-radius: 4px 4px 0 0;
+    margin-bottom: -1px;
+    position: relative;
+    z-index: 2;
+  }
+
+  .alarm-table {
+    width: 100%;
+
+    .value-red {
+      color: #f56c6c;
+      font-weight: 500;
+    }
+
+    .value-blue {
+      color: #409eff;
+      font-weight: 500;
+    }
+  }
+</style>
+
+<style lang="scss">
+  /* 地图标记点样式（非 scoped，供 AMap 注入的 HTML 使用） */
+  .map-cluster-marker {
+    position: relative;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .map-cluster-pulse {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: rgba(64, 158, 255, 0.2);
+    border: 2px solid #409eff;
+    animation: map-pulse 2s ease-out infinite;
+  }
+
+  .map-cluster-core {
+    position: relative;
+    z-index: 1;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #409eff;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
+  }
+
+  .map-device-marker {
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+    background: #ffffff;
+    border: 1px solid #409eff;
+    border-radius: 4px;
+    padding: 4px 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+  }
+
+  .map-device-icon {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .map-device-name {
+    font-size: 11px;
+    color: #303133;
+    font-weight: 600;
+  }
+
+  .map-device-sub {
+    font-size: 10px;
+    color: #909399;
+  }
+
+  @keyframes map-pulse {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.6);
+      opacity: 0;
+    }
+  }
+</style>
diff --git a/src/view/securityControl/alarmList/index.vue b/src/view/securityControl/alarmList/index.vue
index c28b954..ab4bd37 100644
--- a/src/view/securityControl/alarmList/index.vue
+++ b/src/view/securityControl/alarmList/index.vue
@@ -1,22 +1,16 @@
 <template>
   <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
-    <div class="p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2">
-      <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="报警事件" name="first"></el-tab-pane>
-        <el-tab-pane label="预警事件" name="second"></el-tab-pane>
-        <el-tab-pane label="二级报警事件" name="third"></el-tab-pane>
-      </el-tabs> -->
+    <!-- <div class="p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2">
       <el-radio-group v-model="radio" size="large" fill="#409eff">
         <el-radio-button label="报警事件" value="New York" />
         <el-radio-button label="预警事件" value="Washington" />
         <el-radio-button label="二级报警事件" value="Los Angeles" />
       </el-radio-group>
-    </div>
+    </div> -->
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="设备ID">
-          <el-input v-model="searchInfo.deviceId" placeholder="设备ID" />
+        <el-form-item label="设备号">
+          <el-input v-model="searchInfo.deviceId" placeholder="设备号" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
@@ -57,12 +51,12 @@
 </template>
 
 <script setup>
+  import * as serve from '@/api/securityControl/alarmList'
   import { use } from 'echarts/core'
   import { CanvasRenderer } from 'echarts/renderers'
   import { PieChart, LineChart } from 'echarts/charts'
   import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
   import VChart from 'vue-echarts'
-  import * as serve from '@/api/equipment/alarmRecord'
 
   import { ref, watch, onMounted } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
@@ -96,8 +90,137 @@
   // 报警类型环形图配置（响应式 option 交给 v-chart 渲染）
   const alarmTypeOption = ref(buildAlarmTypeOption([]))
 
-  // 报警数量折线图配置
-  const alarmCountOption = ref(buildAlarmCountOption([]))
+  // 报警趋势折线图配置
+  const alarmCountOption = ref(buildAlarmTrendOption({ dates: [], series: [] }))
+
+  // 颜色数组
+  const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#1ABC9C', '#A0CFFF', '#B37000']
+
+  // 构建报警趋势折线图 option（基于 dates/series）
+  function buildAlarmTrendOption({ dates = [], series = [] }) {
+    const seriesData = series.map((item, index) => ({
+      name: item.category,
+      type: 'line',
+      data: item.data || [],
+      smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: colorList[index % colorList.length],
+        width: 2
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: colorList[index % colorList.length] + '40' },
+            { offset: 1, color: colorList[index % colorList.length] + '00' }
+          ]
+        }
+      }
+    }))
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(15, 23, 42, 0.9)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' }
+      },
+      legend: {
+        orient: 'horizontal',
+        top: 0,
+        left: 'center',
+        textStyle: { color: '#606266', fontSize: 12 }
+      },
+      grid: {
+        left: 36,
+        right: 16,
+        top: 40,
+        bottom: 28
+      },
+      xAxis: {
+        type: 'category',
+        data: dates,
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: '#e4e7ed' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: '#f0f2f5' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      series: seriesData
+    }
+  }
+
+  // 构建报警类型环形图 option（基于 category/count/percent）
+  function buildAlarmCategoryChartOption(list) {
+    const chartData = list.map((item, index) => ({
+      name: item.category,
+      value: item.count,
+      percent: item.percent,
+      itemStyle: { color: colorList[index % colorList.length] }
+    }))
+    const totalCount = chartData.reduce((sum, d) => sum + d.value, 0)
+
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params) => `${params.name}<br/>数量：${params.value}（${params.data.percent || 0}%）`
+      },
+      legend: {
+        orient: 'vertical',
+        right: 8,
+        top: 'middle',
+        textStyle: { color: '#606266', fontSize: 12 },
+        itemWidth: 10,
+        itemHeight: 10
+      },
+      series: [
+        {
+          name: '报警分类',
+          type: 'pie',
+          radius: ['52%', '78%'],
+          center: ['38%', '52%'],
+          avoidLabelOverlap: false,
+          label: { show: false },
+          labelLine: { show: false },
+          itemStyle: {
+            borderRadius: 6,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          label: {
+            show: true,
+            position: 'center',
+            formatter: `{total|${totalCount}}\n{label|总数}`,
+            rich: {
+              total: {
+                fontSize: 26,
+                fontWeight: 'bold',
+                color: '#f56c6c',
+                lineHeight: 36
+              },
+              label: {
+                fontSize: 14,
+                color: '#909399',
+                lineHeight: 20
+              }
+            }
+          },
+          data: chartData
+        }
+      ]
+    }
+  }
 
   // 构建报警类型环形图 option
   function buildAlarmTypeOption(list) {
@@ -293,8 +416,10 @@
   }
 
   onMounted(() => {
-    getTableData()
-    loadChartData()
+    // getTableData()
+    // loadChartData()
+    getAlarmCategorySummary()
+    getAlarmTrend()
   })
 
   // 分页
@@ -306,6 +431,22 @@
     page.value = val
     getTableData()
   }
+  // 环形图
+  const getAlarmCategorySummary = async () => {
+    const res = await serve.getAlarmCategorySummary()
+    if (res.code === 0) {
+      const list = res.data?.items || []
+      alarmTypeOption.value = buildAlarmCategoryChartOption(list)
+    }
+  }
+  // 折线图
+  const getAlarmTrend = async () => {
+    const res = await serve.getAlarmTrend()
+    if (res.code === 0) {
+      const { dates = [], series = [] } = res.data || {}
+      alarmCountOption.value = buildAlarmTrendOption({ dates, series })
+    }
+  }
   // 查询
   const getTableData = async () => {
     const table = await serve.getAlarmRecordListByPage({
diff --git a/src/view/securityControl/currentAlarm/index.vue b/src/view/securityControl/currentAlarm/index.vue
new file mode 100644
index 0000000..858a6ec
--- /dev/null
+++ b/src/view/securityControl/currentAlarm/index.vue
@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <!-- <div class="p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2">
+      <el-radio-group v-model="radio" size="large" fill="#409eff">
+        <el-radio-button label="报警事件" value="New York" />
+        <el-radio-button label="预警事件" value="Washington" />
+        <el-radio-button label="二级报警事件" value="Los Angeles" />
+      </el-radio-group>
+    </div> -->
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="设备号">
+          <el-input v-model="searchInfo.deviceId" 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>
+        </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="echarts-box">
+        <div class="item broken-line">
+          <p class="title">报警数量</p>
+          <v-chart :option="alarmCountOption" autoresize class="alarm-count-chart" />
+        </div>
+      </div>
+      <el-table :data="tableData">
+        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
+      </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>
+  </div>
+</template>
+
+<script setup>
+  import * as serve from '@/api/securityControl/alarmList'
+  import * as equipmentListServe from '@/api/equipment/list.js'
+  import { use } from 'echarts/core'
+  import { CanvasRenderer } from 'echarts/renderers'
+  import { PieChart, LineChart } from 'echarts/charts'
+  import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+  import VChart from 'vue-echarts'
+
+  import { ref, watch, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  // import { id } from 'element-plus/es/locale'
+  import { useAppStore } from '@/pinia'
+
+  // 按需注册 ECharts 模块
+  use([CanvasRenderer, PieChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+  const appStore = useAppStore()
+
+  const searchInfo = ref({
+    username: '',
+    nickname: '',
+    phone: '',
+    email: ''
+  })
+  const radio = ref('New York')
+
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  const tableData = ref([])
+
+  // 报警趋势折线图配置
+  const alarmCountOption = ref(buildAlarmTrendOption({ dates: [], series: [] }))
+
+  // 颜色数组
+  const colorList = ['#F56C6C']
+
+  // 构建报警趋势折线图 option（基于 dates/series）
+  function buildAlarmTrendOption({ dates = [], series = [] }) {
+    const seriesData = series.map((item, index) => ({
+      name: item.category,
+      type: 'line',
+      data: item.data || [],
+      smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: colorList[index % colorList.length],
+        width: 2
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: colorList[index % colorList.length] + '40' },
+            { offset: 1, color: colorList[index % colorList.length] + '00' }
+          ]
+        }
+      }
+    }))
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(15, 23, 42, 0.9)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' }
+      },
+      legend: {
+        orient: 'horizontal',
+        top: 0,
+        left: 'center',
+        textStyle: { color: '#606266', fontSize: 12 }
+      },
+      grid: {
+        left: 36,
+        right: 16,
+        top: 40,
+        bottom: 28
+      },
+      xAxis: {
+        type: 'category',
+        data: dates,
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: '#e4e7ed' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: '#f0f2f5' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      series: seriesData
+    }
+  }
+
+  // 把后端时间字段格式化成 YYYY-MM-DD
+  function formatDate(value) {
+    if (!value) return ''
+    const d = new Date(value)
+    if (isNaN(d.getTime())) return ''
+    return formatDateKey(d)
+  }
+  function formatDateKey(d) {
+    const y = d.getFullYear()
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+  }
+  // X 轴显示用 MM-DD
+  function formatDateLabel(d) {
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${m}-${day}`
+  }
+
+  onMounted(() => {
+    // getTableData()
+    // loadChartData()
+    getAlarmTrend()
+    getAlarmRecordListByPage()
+  })
+
+  // 分页
+  const handleSizeChange = (val) => {
+    pageSize.value = val
+    getAlarmRecordListByPage()
+  }
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getAlarmRecordListByPage()
+  }
+  // 折线图
+  const getAlarmTrend = async () => {
+    const res = await serve.getAlarmTrend({ category: '剩余电流报警', alarmType: '剩余电流报警' })
+    if (res.code === 0) {
+      const { dates = [], series = [] } = res.data || {}
+      alarmCountOption.value = buildAlarmTrendOption({ dates, series })
+    }
+  }
+  // 查询
+  const getAlarmRecordListByPage = async () => {
+    const table = await equipmentListServe.getAlarmRecordListByPage({
+      page: page.value,
+      pageSize: pageSize.value,
+      alarmType: '剩余电流报警',
+      ...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
+    getAlarmRecordListByPage()
+  }
+
+  const onReset = () => {
+    searchInfo.value = {
+      deviceId: ''
+    }
+    getAlarmRecordListByPage()
+  }
+</script>
+
+<style lang="scss">
+  .header-img-box {
+    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
+  }
+
+  .gva-table-box {
+    padding-top: 0 !important;
+  }
+  .echarts-box {
+    display: flex;
+    > .item {
+      height: 251px;
+
+      &.broken-line {
+        flex: 1;
+      }
+      .title {
+        font-size: 14px;
+        font-weight: bold;
+      }
+    }
+  }
+  .alarm-count-chart {
+    width: 100%;
+    height: calc(100% - 30px);
+  }
+</style>
diff --git a/src/view/securityControl/temperatureAlarm/index.vue b/src/view/securityControl/temperatureAlarm/index.vue
new file mode 100644
index 0000000..d2c8ffd
--- /dev/null
+++ b/src/view/securityControl/temperatureAlarm/index.vue
@@ -0,0 +1,328 @@
+<template>
+  <div>
+    <!-- <div class="p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2">
+      <el-radio-group v-model="radio" size="large" fill="#409eff">
+        <el-radio-button label="报警事件" value="New York" />
+        <el-radio-button label="预警事件" value="Washington" />
+        <el-radio-button label="二级报警事件" value="Los Angeles" />
+      </el-radio-group>
+    </div> -->
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="设备号">
+          <el-input v-model="searchInfo.deviceId" 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>
+        </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="echarts-box">
+        <div class="item broken-line">
+          <p class="title">报警数量</p>
+          <v-chart :option="alarmCountOption" autoresize class="alarm-count-chart" />
+        </div>
+      </div>
+      <el-table :data="tableData">
+        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
+      </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>
+  </div>
+</template>
+
+<script setup>
+  import * as serve from '@/api/securityControl/alarmList'
+  import { use } from 'echarts/core'
+  import { CanvasRenderer } from 'echarts/renderers'
+  import { PieChart, LineChart } from 'echarts/charts'
+  import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+  import VChart from 'vue-echarts'
+
+  import { ref, watch, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  // import { id } from 'element-plus/es/locale'
+  import { useAppStore } from '@/pinia'
+
+  // 按需注册 ECharts 模块
+  use([CanvasRenderer, PieChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+  const appStore = useAppStore()
+
+  const searchInfo = ref({
+    username: '',
+    nickname: '',
+    phone: '',
+    email: ''
+  })
+  const radio = ref('New York')
+
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  const tableData = ref([])
+
+  // 报警趋势折线图配置
+  const alarmCountOption = ref(buildAlarmTrendOption({ dates: [], series: [] }))
+
+  // 颜色数组
+  const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#1ABC9C', '#A0CFFF', '#B37000']
+
+  // 构建报警趋势折线图 option（基于 dates/series）
+  function buildAlarmTrendOption({ dates = [], series = [] }) {
+    const seriesData = series.map((item, index) => ({
+      name: item.category,
+      type: 'line',
+      data: item.data || [],
+      smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: colorList[index % colorList.length],
+        width: 2
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: colorList[index % colorList.length] + '40' },
+            { offset: 1, color: colorList[index % colorList.length] + '00' }
+          ]
+        }
+      }
+    }))
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(15, 23, 42, 0.9)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' }
+      },
+      legend: {
+        orient: 'horizontal',
+        top: 0,
+        left: 'center',
+        textStyle: { color: '#606266', fontSize: 12 }
+      },
+      grid: {
+        left: 36,
+        right: 16,
+        top: 40,
+        bottom: 28
+      },
+      xAxis: {
+        type: 'category',
+        data: dates,
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: '#e4e7ed' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: '#f0f2f5' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      series: seriesData
+    }
+  }
+
+  // 构建报警数量折线图 option（按日期统计最近 30 天）
+  function buildAlarmCountOption(list) {
+    // 按日期分组（YYYY-MM-DD）
+    const countMap = {}
+    list.forEach((item) => {
+      const date = formatDate(item.CreatedAt || item.createdAt || item.time)
+      if (!date) return
+      countMap[date] = (countMap[date] || 0) + 1
+    })
+
+    // 生成最近 30 天的 X 轴（缺失日期补 0）
+    const xAxisData = []
+    const seriesData = []
+    const today = new Date()
+    for (let i = 29; i >= 0; i--) {
+      const d = new Date(today)
+      d.setDate(today.getDate() - i)
+      const key = formatDateKey(d)
+      xAxisData.push(formatDateLabel(d))
+      seriesData.push(countMap[key] || 0)
+    }
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(15, 23, 42, 0.9)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' }
+      },
+      grid: {
+        left: 36,
+        right: 16,
+        top: 16,
+        bottom: 28
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: '#e4e7ed' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: '#f0f2f5' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      series: [
+        {
+          name: '报警数量',
+          type: 'line',
+          data: seriesData,
+          symbol: 'none', // 不画数据点，全一条线
+          smooth: true,
+          lineStyle: {
+            color: '#409EFF',
+            width: 2
+          },
+          // 折线下面积渐变
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(64, 158, 255, 0.35)' },
+                { offset: 1, color: 'rgba(64, 158, 255, 0.02)' }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  }
+
+  // 把后端时间字段格式化成 YYYY-MM-DD
+  function formatDate(value) {
+    if (!value) return ''
+    const d = new Date(value)
+    if (isNaN(d.getTime())) return ''
+    return formatDateKey(d)
+  }
+  function formatDateKey(d) {
+    const y = d.getFullYear()
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+  }
+  // X 轴显示用 MM-DD
+  function formatDateLabel(d) {
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${m}-${day}`
+  }
+
+  onMounted(() => {
+    // getTableData()
+    // loadChartData()
+    getAlarmTrend()
+  })
+
+  // 分页
+  const handleSizeChange = (val) => {
+    pageSize.value = val
+    getTableData()
+  }
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getTableData()
+  }
+  // 折线图
+  const getAlarmTrend = async () => {
+    const res = await serve.getAlarmTrend({ alarmType: '温度报警' })
+    if (res.code === 0) {
+      const { dates = [], series = [] } = res.data || {}
+      alarmCountOption.value = buildAlarmTrendOption({ dates, series })
+    }
+  }
+  // 查询
+  const getTableData = async () => {
+    const table = await serve.getAlarmRecordListByPage({
+      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 = {
+      deviceId: ''
+    }
+    getTableData()
+  }
+</script>
+
+<style lang="scss">
+  .header-img-box {
+    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
+  }
+
+  .gva-table-box {
+    padding-top: 0 !important;
+  }
+  .echarts-box {
+    display: flex;
+    > .item {
+      height: 251px;
+
+      &.broken-line {
+        flex: 1;
+      }
+      .title {
+        font-size: 14px;
+        font-weight: bold;
+      }
+    }
+  }
+  .alarm-count-chart {
+    width: 100%;
+    height: calc(100% - 30px);
+  }
+</style>