From 585bb26971e44fe3071a2b57cd1fa7e9bf1ed10f Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 24 Mar 2026 09:07:45 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=AE=A1=E7=90=86=E3=80=81=E7=82=B9=E4=BD=8D=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E9=A1=B5=E9=9D=A2-=E6=95=B0=E6=8D=AEmock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/device/management/index.vue | 1035 +++++++++++++++++++++
 src/views/iot/device/point/index.vue      |  683 ++++++++++++++
 2 files changed, 1718 insertions(+)
 create mode 100644 src/views/iot/device/management/index.vue
 create mode 100644 src/views/iot/device/point/index.vue

diff --git a/src/views/iot/device/management/index.vue b/src/views/iot/device/management/index.vue
new file mode 100644
index 0000000..21ac83f
--- /dev/null
+++ b/src/views/iot/device/management/index.vue
@@ -0,0 +1,1035 @@
+<template>
+  <ContentWrap>
+    <div class="device-mgmt">
+      <div class="device-mgmt__left">
+        <el-card shadow="never" class="device-mgmt__panel">
+          <div class="device-mgmt__leftTop">
+            <el-input
+              v-model="treeKeyword"
+              clearable
+              placeholder="搜索设备/产线/公司"
+              class="device-mgmt__search"
+            />
+            <div class="device-mgmt__stats">
+              <div class="device-mgmt__stat">
+                <div class="device-mgmt__statLabel">设备</div>
+                <div class="device-mgmt__statValue">{{ deviceTotal }}</div>
+              </div>
+              <div class="device-mgmt__stat">
+                <div class="device-mgmt__statLabel">在线</div>
+                <div class="device-mgmt__statValue device-mgmt__statValue--ok">{{
+                  deviceOnline
+                }}</div>
+              </div>
+              <div class="device-mgmt__stat">
+                <div class="device-mgmt__statLabel">离线</div>
+                <div class="device-mgmt__statValue device-mgmt__statValue--muted">
+                  {{ deviceTotal - deviceOnline }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <el-tree
+            ref="treeRef"
+            node-key="id"
+            :data="treeData"
+            :props="treeProps"
+            highlight-current
+            default-expand-all
+            :filter-node-method="filterTreeNode"
+            @node-click="handleTreeNodeClick"
+            class="device-mgmt__tree"
+          >
+            <template #default="{ data }">
+              <div class="device-mgmt__treeNode">
+                <div class="device-mgmt__treeNodeName">
+                  <span class="device-mgmt__treeNodeText">{{ data.name }}</span>
+                  <template v-if="data.type === 'device'">
+                    <span
+                      class="device-mgmt__dot"
+                      :class="data.online ? 'device-mgmt__dot--ok' : 'device-mgmt__dot--muted'"
+                    ></span>
+                  </template>
+                </div>
+                <template v-if="data.type === 'device'">
+                  <span class="device-mgmt__treeNodeMeta">{{ data.code }}</span>
+                </template>
+              </div>
+            </template>
+          </el-tree>
+        </el-card>
+      </div>
+
+      <div class="device-mgmt__right">
+        <el-card shadow="never" class="device-mgmt__panel device-mgmt__header">
+          <div class="device-mgmt__headerMain">
+            <div class="device-mgmt__titleRow">
+              <span
+                class="device-mgmt__dot device-mgmt__dot--lg"
+                :class="selectedDevice?.online ? 'device-mgmt__dot--ok' : 'device-mgmt__dot--muted'"
+              ></span>
+              <div class="device-mgmt__titleText">
+                <div class="device-mgmt__title">{{ selectedDevice?.name || '-' }}</div>
+                <div class="device-mgmt__subtitle">{{ selectedDevice?.code || '-' }}</div>
+              </div>
+            </div>
+          </div>
+
+          <el-tabs v-model="activeTab" class="device-mgmt__tabs">
+            <el-tab-pane label="基础信息" name="base" />
+            <el-tab-pane label="实时数据" name="realtime" />
+            <el-tab-pane label="历史数据" name="history" />
+            <el-tab-pane label="报警数据" name="alarm" />
+          </el-tabs>
+        </el-card>
+
+        <div class="device-mgmt__content">
+          <template v-if="activeTab === 'base'">
+            <div class="device-mgmt__baseInfo">
+              <!-- 设备信息 -->
+              <div class="device-mgmt__baseBlock">
+                <div class="device-mgmt__baseBlockTitle">设备信息</div>
+                <div class="device-mgmt__baseGrid">
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">设备编码</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.code || '-' }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">设备名称</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.name || '-' }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">设备型号</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.model || '-' }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">制造商</div>
+                    <div class="device-mgmt__baseValue">{{
+                      selectedDevice?.manufacturer || '-'
+                    }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">所属客户</div>
+                    <div class="device-mgmt__baseValue">{{
+                      selectedDevice?.customerName || '-'
+                    }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">所属产线</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.lineName || '-' }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">安装位置</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.address || '-' }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">在线状态</div>
+                    <div
+                      class="device-mgmt__baseValue"
+                      :class="selectedDevice?.online ? 'device-mgmt__baseValue--success' : ''"
+                    >
+                      {{ selectedDevice?.online ? '在线' : '离线' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 通讯配置 -->
+              <div class="device-mgmt__baseBlock">
+                <div class="device-mgmt__baseBlockTitle">通讯配置</div>
+                <div class="device-mgmt__baseGrid">
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">MQTT主题</div>
+                    <div class="device-mgmt__baseValue device-mgmt__baseValue--bg">{{
+                      selectedDevice?.mqttTopic || '-'
+                    }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">客户端ID</div>
+                    <div class="device-mgmt__baseValue device-mgmt__baseValue--bg">{{
+                      selectedDevice?.mqttClientId || '-'
+                    }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 其他信息 -->
+              <div class="device-mgmt__baseBlock">
+                <div class="device-mgmt__baseBlockTitle">其他信息</div>
+                <div class="device-mgmt__baseGrid">
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">创建时间</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.createdAt || '-' }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem">
+                    <div class="device-mgmt__baseLabel">最后更新</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.updatedAt || '-' }}</div>
+                  </div>
+                  <div class="device-mgmt__baseItem device-mgmt__baseItem--full">
+                    <div class="device-mgmt__baseLabel">备注</div>
+                    <div class="device-mgmt__baseValue">{{ selectedDevice?.remark || '-' }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template v-else-if="activeTab === 'realtime'">
+            <el-row :gutter="16">
+              <el-col v-for="m in realtimeMetrics" :key="m.key" :xs="24" :sm="12" :md="8" :lg="6">
+                <el-card shadow="never" class="device-mgmt__metricCard">
+                  <div class="device-mgmt__metricTop">
+                    <div class="device-mgmt__metricName">{{ m.name }}</div>
+                    <el-tag :type="m.status === 'warn' ? 'warning' : 'success'" size="small">
+                      {{ m.status === 'warn' ? '预警' : '正常' }}
+                    </el-tag>
+                  </div>
+                  <div class="device-mgmt__metricValue">
+                    <span class="device-mgmt__metricNumber">{{ m.value }}</span>
+                    <span class="device-mgmt__metricUnit">{{ m.unit }}</span>
+                  </div>
+                </el-card>
+              </el-col>
+            </el-row>
+            <el-card shadow="never" class="device-mgmt__panel mt-16px">
+              <div class="device-mgmt__hintRow">
+                <div class="device-mgmt__hintTitle">最近更新时间</div>
+                <div class="device-mgmt__hintValue">{{ lastRealtimeAt }}</div>
+              </div>
+            </el-card>
+          </template>
+
+          <template v-else-if="activeTab === 'history'">
+            <el-card shadow="never" class="device-mgmt__panel">
+              <div class="device-mgmt__filters">
+                <div class="device-mgmt__filter">
+                  <div class="device-mgmt__filterLabel">参数选择</div>
+                  <el-radio-group v-model="historyMetricKey" size="small">
+                    <el-radio-button v-for="m in historyMetricOptions" :key="m.key" :label="m.key">
+                      {{ m.name }}
+                    </el-radio-button>
+                  </el-radio-group>
+                </div>
+                <div class="device-mgmt__filter">
+                  <div class="device-mgmt__filterLabel">时间范围</div>
+                  <el-radio-group v-model="historyRange" size="small">
+                    <el-radio-button label="today">今日</el-radio-button>
+                    <el-radio-button label="week">本周</el-radio-button>
+                    <el-radio-button label="month">本月</el-radio-button>
+                  </el-radio-group>
+                </div>
+                <div class="device-mgmt__filterActions">
+                  <el-button type="primary">查询</el-button>
+                  <el-button>导出</el-button>
+                </div>
+              </div>
+              <Echart :height="360" :options="historyChartOptions" />
+            </el-card>
+          </template>
+
+          <template v-else>
+            <el-card shadow="never" class="device-mgmt__panel">
+              <div class="device-mgmt__filters">
+                <div class="device-mgmt__filter">
+                  <div class="device-mgmt__filterLabel">报警类型</div>
+                  <el-select v-model="alarmType" clearable placeholder="全部" class="!w-200px">
+                    <el-option label="温度过高" value="temp_high" />
+                    <el-option label="压力过高" value="pressure_high" />
+                    <el-option label="电流过高" value="current_high" />
+                  </el-select>
+                </div>
+                <div class="device-mgmt__filter">
+                  <div class="device-mgmt__filterLabel">时间范围</div>
+                  <el-radio-group v-model="alarmRange" size="small">
+                    <el-radio-button label="today">今日</el-radio-button>
+                    <el-radio-button label="week">本周</el-radio-button>
+                    <el-radio-button label="month">本月</el-radio-button>
+                  </el-radio-group>
+                </div>
+                <div class="device-mgmt__filterActions">
+                  <el-button type="primary">查询</el-button>
+                  <el-button type="success">导出</el-button>
+                </div>
+              </div>
+
+              <el-row :gutter="16" class="mt-16px">
+                <el-col :xs="24" :sm="8">
+                  <el-card shadow="never" class="device-mgmt__summaryCard">
+                    <div class="device-mgmt__summaryValue">{{ alarmSummary.total }}</div>
+                    <div class="device-mgmt__summaryLabel">总报警</div>
+                  </el-card>
+                </el-col>
+                <el-col :xs="24" :sm="8">
+                  <el-card
+                    shadow="never"
+                    class="device-mgmt__summaryCard device-mgmt__summaryCard--warn"
+                  >
+                    <div class="device-mgmt__summaryValue">{{ alarmSummary.unresolved }}</div>
+                    <div class="device-mgmt__summaryLabel">未处理</div>
+                  </el-card>
+                </el-col>
+                <el-col :xs="24" :sm="8">
+                  <el-card
+                    shadow="never"
+                    class="device-mgmt__summaryCard device-mgmt__summaryCard--ok"
+                  >
+                    <div class="device-mgmt__summaryValue">{{ alarmSummary.resolved }}</div>
+                    <div class="device-mgmt__summaryLabel">已处理</div>
+                  </el-card>
+                </el-col>
+              </el-row>
+
+              <el-table :data="alarmList" class="mt-16px" border>
+                <el-table-column label="报警时间" prop="time" width="180" />
+                <el-table-column label="报警类型" prop="typeLabel" min-width="140" />
+                <el-table-column label="报警级别" prop="level" width="120">
+                  <template #default="{ row }">
+                    <el-tag
+                      :type="
+                        row.level === '高' ? 'danger' : row.level === '中' ? 'warning' : 'info'
+                      "
+                    >
+                      {{ row.level }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="当前值" prop="current" width="120" />
+                <el-table-column label="阈值" prop="threshold" width="120" />
+                <el-table-column label="状态" prop="status" width="120">
+                  <template #default="{ row }">
+                    <el-tag :type="row.status === '已处理' ? 'success' : 'warning'">
+                      {{ row.status }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </template>
+        </div>
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import type { EChartsOption } from 'echarts'
+import Echart from '@/components/Echart/src/Echart.vue'
+
+defineOptions({ name: 'IoTDeviceManagement' })
+
+type TreeNodeType = 'company' | 'line' | 'device'
+type MetricStatus = 'ok' | 'warn'
+type MetricKey = 'temp' | 'pressure' | 'power' | 'current' | 'flow' | 'voltage' | 'runtime'
+type HistoryRange = 'today' | 'week' | 'month'
+
+type TreeNode = {
+  id: string
+  type: TreeNodeType
+  name: string
+  code?: string
+  online?: boolean
+  companyName?: string
+  customerName?: string
+  lineName?: string
+  model?: string
+  productKey?: string
+  manufacturer?: string
+  address?: string
+  mqttTopic?: string
+  mqttClientId?: string
+  createdAt?: string
+  updatedAt?: string
+  remark?: string
+  children?: TreeNode[]
+}
+
+type Metric = { key: MetricKey; name: string; value: number; unit: string; status: MetricStatus }
+
+const treeProps = { children: 'children', label: 'name' }
+const treeRef = ref()
+const treeKeyword = ref('')
+
+const treeData = ref<TreeNode[]>([
+  {
+    id: 'c1',
+    type: 'company',
+    name: '北京科技有限公司',
+    children: [
+      {
+        id: 'c1-l1',
+        type: 'line',
+        name: 'SMT产线A',
+        children: [
+          {
+            id: 'd-1001',
+            type: 'device',
+            name: '贴片机#1',
+            code: 'BJ-PL01-DEV01',
+            online: true,
+            companyName: '北京科技有限公司',
+            customerName: '北京科技有限公司',
+            lineName: 'SMT产线A',
+            model: 'SM471',
+            manufacturer: '三星',
+            address: '车间A区-01工位',
+            mqttTopic: 'device/bj/pl01/dev01',
+            mqttClientId: 'client_bj_dev01',
+            createdAt: '2026-01-15 09:00:00',
+            updatedAt: '2026-03-10 10:30:00',
+            remark: '位于车间A区，主贴片工位'
+          },
+          {
+            id: 'd-1002',
+            type: 'device',
+            name: '注塑机#2',
+            code: 'SH-P01-DEV02',
+            online: false,
+            companyName: '北京科技有限公司',
+            customerName: '北京科技有限公司',
+            lineName: 'SMT产线A',
+            model: 'MA3200',
+            productKey: 'INJ-3200',
+            address: '一号车间 02 工位',
+            mqttTopic: 'dev/iot/sh_p01/dev02',
+            mqttClientId: 'client_sh_p01_dev02',
+            createdAt: '2026-02-02 09:20:00',
+            updatedAt: '2026-03-09 18:30:00',
+            remark: '离线待检修'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'c2',
+    type: 'company',
+    name: '上海智联科技股份公司',
+    children: [
+      {
+        id: 'c2-l1',
+        type: 'line',
+        name: '装配产线',
+        children: [
+          {
+            id: 'd-2001',
+            type: 'device',
+            name: '装配线#1',
+            code: 'SH-A01-DEV01',
+            online: true,
+            companyName: '上海智联科技股份公司',
+            lineName: '装配产线',
+            model: 'ASSY-X1',
+            productKey: 'ASSY-X1',
+            address: '二号车间 A 区',
+            mqttTopic: 'dev/iot/sh_a01/dev01',
+            mqttClientId: 'client_sh_a01_dev01',
+            createdAt: '2025-12-01 12:00:00',
+            updatedAt: '2026-03-10 10:28:10',
+            remark: '装配主线设备'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'c3',
+    type: 'company',
+    name: '杭州云计算中心',
+    children: [
+      {
+        id: 'c3-l1',
+        type: 'line',
+        name: '测试产线',
+        children: [
+          {
+            id: 'd-3001',
+            type: 'device',
+            name: '测试机#1',
+            code: 'HZ-T01-DEV01',
+            online: true,
+            companyName: '杭州云计算中心',
+            lineName: '测试产线',
+            model: 'TEST-PRO',
+            productKey: 'TEST-PRO',
+            address: '三号车间 03 工位',
+            mqttTopic: 'dev/iot/hz_t01/dev01',
+            mqttClientId: 'client_hz_t01_dev01',
+            createdAt: '2026-01-02 11:10:00',
+            updatedAt: '2026-03-10 10:15:00',
+            remark: '用于产线测试'
+          }
+        ]
+      }
+    ]
+  }
+])
+
+const selectedDeviceId = ref<string>('')
+const activeTab = ref<'base' | 'realtime' | 'history' | 'alarm'>('base')
+
+const flattenDevices = (nodes: TreeNode[]) => {
+  const devices: TreeNode[] = []
+  const walk = (list: TreeNode[]) => {
+    list.forEach((n) => {
+      if (n.type === 'device') devices.push(n)
+      if (n.children?.length) walk(n.children)
+    })
+  }
+  walk(nodes)
+  return devices
+}
+
+const deviceList = computed(() => flattenDevices(treeData.value))
+const deviceTotal = computed(() => deviceList.value.length)
+const deviceOnline = computed(() => deviceList.value.filter((d) => !!d.online).length)
+
+const selectedDevice = computed(() => deviceList.value.find((d) => d.id === selectedDeviceId.value))
+
+const getFirstDeviceId = (node: TreeNode): string | undefined => {
+  if (node.type === 'device') return node.id
+  const stack = [...(node.children || [])]
+  while (stack.length) {
+    const cur = stack.shift()!
+    if (cur.type === 'device') return cur.id
+    if (cur.children?.length) stack.unshift(...cur.children)
+  }
+  return undefined
+}
+
+const handleTreeNodeClick = (node: TreeNode) => {
+  const nextId = getFirstDeviceId(node)
+  if (nextId) selectedDeviceId.value = nextId
+}
+
+const filterTreeNode = (value: string, data: TreeNode) => {
+  if (!value) return true
+  const v = value.trim()
+  if (!v) return true
+  return (
+    (data.name && data.name.includes(v)) ||
+    (data.code && data.code.toLowerCase().includes(v.toLowerCase()))
+  )
+}
+
+watchEffect(() => {
+  treeRef.value?.filter?.(treeKeyword.value)
+})
+
+watchEffect(() => {
+  if (!selectedDeviceId.value && deviceList.value.length) {
+    selectedDeviceId.value = deviceList.value[0].id
+  }
+})
+
+const buildRealtimeMetrics = (online?: boolean): Metric[] => {
+  const base: Metric[] = [
+    { key: 'temp', name: '温度', value: 45.2, unit: '℃', status: 'ok' },
+    { key: 'pressure', name: '压力', value: 0.85, unit: 'MPa', status: 'ok' },
+    { key: 'power', name: '功率', value: 1200, unit: 'W', status: 'ok' },
+    { key: 'current', name: '电流', value: 15.6, unit: 'A', status: 'warn' },
+    { key: 'voltage', name: '电压', value: 380, unit: 'V', status: 'ok' },
+    { key: 'flow', name: '水流', value: 8.5, unit: 'L/min', status: 'ok' },
+    { key: 'runtime', name: '运行时间', value: 8.5, unit: 'h', status: 'ok' }
+  ]
+  if (!online) {
+    return base.map((m) => ({ ...m, status: 'warn', value: Number((m.value * 0.6).toFixed(2)) }))
+  }
+  return base
+}
+
+const realtimeMetrics = computed(() => buildRealtimeMetrics(selectedDevice.value?.online))
+const lastRealtimeAt = computed(() =>
+  selectedDevice.value?.updatedAt ? selectedDevice.value.updatedAt : '-'
+)
+
+const historyMetricOptions = computed(() =>
+  realtimeMetrics.value
+    .filter((m) => m.key !== 'runtime')
+    .map((m) => ({ key: m.key, name: m.name }))
+)
+const historyMetricKey = ref<MetricKey>('temp')
+const historyRange = ref<HistoryRange>('today')
+
+watchEffect(() => {
+  if (
+    !historyMetricOptions.value.find((m) => m.key === historyMetricKey.value) &&
+    historyMetricOptions.value.length
+  ) {
+    historyMetricKey.value = historyMetricOptions.value[0].key
+  }
+})
+
+const buildHistory = (range: HistoryRange, base: number) => {
+  const points = range === 'today' ? 24 : range === 'week' ? 7 * 6 : 30 * 3
+  const labels: string[] = []
+  const values: number[] = []
+  for (let i = 0; i < points; i++) {
+    if (range === 'today') {
+      labels.push(String(i).padStart(2, '0') + ':00')
+    } else {
+      labels.push(`D${i + 1}`)
+    }
+    const noise = Math.sin(i / 2.3) * 0.9 + Math.cos(i / 5.2) * 0.6
+    const drift = (i / points) * 0.8
+    values.push(Number((base + noise + drift).toFixed(2)))
+  }
+  return { labels, values }
+}
+
+const metricBaseValue = (key: MetricKey) => {
+  if (key === 'temp') return 42
+  if (key === 'pressure') return 0.8
+  if (key === 'power') return 1180
+  if (key === 'current') return 13
+  if (key === 'flow') return 8
+  if (key === 'voltage') return 380
+  if (key === 'runtime') return 8
+  return 1
+}
+
+const historyChartOptions = computed<EChartsOption>(() => {
+  const metric = realtimeMetrics.value.find((m) => m.key === historyMetricKey.value)
+  const base = metricBaseValue(historyMetricKey.value)
+  const { labels, values } = buildHistory(historyRange.value, base)
+  return {
+    grid: { left: 20, right: 20, bottom: 20, top: 40, containLabel: true },
+    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, padding: [6, 10] },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      boundaryGap: false,
+      axisTick: { show: false }
+    },
+    yAxis: { type: 'value', axisTick: { show: false } },
+    series: [
+      {
+        name: metric?.name || '数据',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        areaStyle: {},
+        data: values
+      }
+    ]
+  }
+})
+
+type AlarmStatus = '已处理' | '未处理'
+type AlarmLevel = '高' | '中' | '低'
+type AlarmRow = {
+  id: string
+  time: string
+  type: string
+  typeLabel: string
+  level: AlarmLevel
+  current: string
+  threshold: string
+  status: AlarmStatus
+}
+
+const alarmType = ref<string | undefined>(undefined)
+const alarmRange = ref<HistoryRange>('today')
+
+const mockAlarmAll = computed<AlarmRow[]>(() => {
+  const base = selectedDevice.value?.code || 'DEV'
+  return [
+    {
+      id: `${base}-a1`,
+      time: '2026-03-10 10:20:00',
+      type: 'temp_high',
+      typeLabel: '温度过高',
+      level: '高',
+      current: '85.6℃',
+      threshold: '80℃',
+      status: '未处理'
+    },
+    {
+      id: `${base}-a2`,
+      time: '2026-03-10 09:15:00',
+      type: 'pressure_high',
+      typeLabel: '压力过高',
+      level: '中',
+      current: '1.2MPa',
+      threshold: '1.0MPa',
+      status: '已处理'
+    },
+    {
+      id: `${base}-a3`,
+      time: '2026-03-09 18:30:00',
+      type: 'current_high',
+      typeLabel: '电流过高',
+      level: '中',
+      current: '16.8A',
+      threshold: '15A',
+      status: '已处理'
+    },
+    {
+      id: `${base}-a4`,
+      time: '2026-03-09 14:22:00',
+      type: 'temp_high',
+      typeLabel: '温度过高',
+      level: '低',
+      current: '78.2℃',
+      threshold: '75℃',
+      status: '已处理'
+    },
+    {
+      id: `${base}-a5`,
+      time: '2026-03-08 11:45:00',
+      type: 'pressure_high',
+      typeLabel: '压力波动',
+      level: '低',
+      current: '-',
+      threshold: '-',
+      status: '已处理'
+    }
+  ]
+})
+
+const alarmList = computed(() => {
+  const list = mockAlarmAll.value
+  if (!alarmType.value) return list
+  return list.filter((x) => x.type === alarmType.value)
+})
+
+const alarmSummary = computed(() => {
+  const total = alarmList.value.length
+  const unresolved = alarmList.value.filter((x) => x.status === '未处理').length
+  return { total, unresolved, resolved: total - unresolved }
+})
+</script>
+
+<style scoped lang="scss">
+.device-mgmt {
+  display: flex;
+  gap: 16px;
+}
+
+.device-mgmt__left {
+  flex: 0 0 320px;
+  width: 320px;
+}
+
+.device-mgmt__right {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.device-mgmt__panel {
+  border-radius: 8px;
+}
+
+.device-mgmt__leftTop {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.device-mgmt__stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.device-mgmt__stat {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--el-fill-color-light);
+}
+
+.device-mgmt__statLabel {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__statValue {
+  margin-top: 2px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+}
+
+.device-mgmt__statValue--ok {
+  color: var(--el-color-success);
+}
+
+.device-mgmt__statValue--muted {
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__tree {
+  max-height: calc(100vh - 340px);
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.device-mgmt__treeNode {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.device-mgmt__treeNodeName {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.device-mgmt__treeNodeText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.device-mgmt__treeNodeMeta {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+}
+
+.device-mgmt__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  display: inline-block;
+  background: var(--el-text-color-disabled);
+}
+
+.device-mgmt__dot--lg {
+  width: 12px;
+  height: 12px;
+}
+
+.device-mgmt__dot--ok {
+  background: var(--el-color-success);
+  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.12);
+}
+
+.device-mgmt__dot--muted {
+  background: var(--el-text-color-disabled);
+}
+
+.device-mgmt__header {
+  margin-bottom: 16px;
+}
+
+.device-mgmt__headerMain {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 6px;
+}
+
+.device-mgmt__titleRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.device-mgmt__title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  line-height: 1.2;
+}
+
+.device-mgmt__subtitle {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__content {
+  min-height: 240px;
+}
+
+.device-mgmt__metricCard {
+  border-radius: 10px;
+}
+
+.device-mgmt__metricTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.device-mgmt__metricName {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__metricValue {
+  margin-top: 10px;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.device-mgmt__metricNumber {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--el-text-color-primary);
+  letter-spacing: 0.2px;
+}
+
+.device-mgmt__metricUnit {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__filters {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+.device-mgmt__filter {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.device-mgmt__filterLabel {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__filterActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.device-mgmt__hintRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.device-mgmt__hintTitle {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__hintValue {
+  font-size: 12px;
+  color: var(--el-text-color-primary);
+}
+
+.device-mgmt__summaryCard {
+  text-align: center;
+  border-radius: 10px;
+  background: var(--el-fill-color-light);
+}
+
+.device-mgmt__summaryCard--warn {
+  background: rgba(230, 162, 60, 0.08);
+}
+
+.device-mgmt__summaryCard--ok {
+  background: rgba(103, 194, 58, 0.08);
+}
+
+.device-mgmt__summaryValue {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--el-text-color-primary);
+  line-height: 1.1;
+}
+
+.device-mgmt__summaryLabel {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+@media (max-width: 960px) {
+  .device-mgmt {
+    flex-direction: column;
+  }
+  .device-mgmt__left {
+    width: 100%;
+    flex-basis: auto;
+  }
+}
+
+.device-mgmt__baseInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.device-mgmt__baseBlock {
+  background-color: var(--el-fill-color-light);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.device-mgmt__baseBlockTitle {
+  font-size: 15px;
+  font-weight: bold;
+  color: var(--el-text-color-primary);
+  margin-bottom: 20px;
+  position: relative;
+  padding-bottom: 12px;
+}
+.device-mgmt__baseBlockTitle::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--el-border-color-light);
+}
+
+.device-mgmt__baseGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px 40px;
+}
+
+.device-mgmt__baseItem {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-mgmt__baseItem--full {
+  grid-column: span 2;
+}
+
+.device-mgmt__baseLabel {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-mgmt__baseValue {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  word-break: break-all;
+}
+
+.device-mgmt__baseValue--success {
+  color: var(--el-color-success);
+}
+
+.device-mgmt__baseValue--bg {
+  background-color: var(--el-fill-color-dark);
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+</style>
diff --git a/src/views/iot/device/point/index.vue b/src/views/iot/device/point/index.vue
new file mode 100644
index 0000000..028a1b3
--- /dev/null
+++ b/src/views/iot/device/point/index.vue
@@ -0,0 +1,683 @@
+<template>
+  <ContentWrap>
+    <div class="point-dict">
+      <!-- 左侧设备树 -->
+      <div class="point-dict__left">
+        <el-card shadow="never" class="point-dict__panel left-panel">
+          <div class="left-panel__search">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索设备..."
+              clearable
+              :prefix-icon="Search"
+            />
+          </div>
+          <div class="left-panel__stats">
+            <div class="stat-item">
+              <el-icon><OfficeBuilding /></el-icon> 客户: 3
+            </div>
+            <div class="stat-item">
+              <el-icon><Monitor /></el-icon> 设备: 8
+            </div>
+          </div>
+
+          <el-tree
+            ref="treeRef"
+            :data="treeData"
+            node-key="id"
+            default-expand-all
+            :props="treeProps"
+            highlight-current
+            :filter-node-method="filterNode"
+            @node-click="handleNodeClick"
+            class="left-panel__tree"
+          >
+            <template #default="{ node, data }">
+              <div class="custom-tree-node">
+                <div class="node-left">
+                  <el-icon v-if="data.type !== 'device'" class="node-icon folder-icon">
+                    <FolderOpened v-if="node.expanded" />
+                    <Folder v-else />
+                  </el-icon>
+                  <span
+                    v-if="data.type === 'device'"
+                    class="node-status-dot"
+                    :class="{ 'is-online': data.online }"
+                  ></span>
+                  <span class="node-label" :class="{ 'is-device': data.type === 'device' }">{{
+                    data.name
+                  }}</span>
+                </div>
+                <div v-if="data.type === 'device'" class="node-right">
+                  <span class="node-code-tag">{{ data.code }}</span>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </el-card>
+      </div>
+
+      <!-- 右侧点位配置 -->
+      <div class="point-dict__right">
+        <template v-if="currentDevice">
+          <!-- 顶部设备信息卡片 -->
+          <div class="right-header">
+            <div class="header-left">
+              <div class="header-title-row">
+                <span class="header-dot" :class="{ 'is-online': currentDevice.online }"></span>
+                <span class="header-title">{{ currentDevice.name }}</span>
+              </div>
+              <div class="header-code-row">
+                <span class="header-code">{{ currentDevice.code }}</span>
+              </div>
+            </div>
+            <div class="header-right">
+              <el-button class="header-add-btn">
+                <el-icon class="mr-4px"><Plus /></el-icon> 新增点位
+              </el-button>
+              <div class="header-count-box">
+                <div class="count-label">点位数量</div>
+                <div class="count-value">{{ totalPoints }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 点位分组列表 -->
+          <div class="right-content">
+            <div v-for="group in pointGroups" :key="group.name" class="point-group">
+              <div class="group-header">
+                <div class="group-title">
+                  <el-icon class="group-icon"><Folder /></el-icon>
+                  <span>{{ group.name }}</span>
+                </div>
+                <div class="group-count">{{ group.points.length }} 个点位</div>
+              </div>
+
+              <div class="group-list">
+                <div v-for="point in group.points" :key="point.id" class="point-card">
+                  <div class="point-card__main">
+                    <span class="point-code">{{ point.code }}</span>
+                    <span class="point-name">{{ point.name }}</span>
+                    <div class="point-value-wrap">
+                      <span class="point-value">{{ point.value }}</span>
+                      <span class="point-unit">{{ point.unit }}</span>
+                    </div>
+                    <el-tag size="small" class="point-type-tag" round>{{ point.type }}</el-tag>
+                  </div>
+                  
+                  <div class="point-card__actions">
+                    <el-checkbox v-model="point.history" size="small" class="action-checkbox">历史数据</el-checkbox>
+                    <el-button link type="warning" size="small" class="action-btn">编辑</el-button>
+                    <el-button link type="danger" size="small" class="action-btn">删除</el-button>
+                  </div>
+                  
+                  <div class="point-card__meta">
+                    <span class="meta-item">更新: {{ point.updatedAt }}</span>
+                    <span class="meta-item">{{ point.desc }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div v-else class="empty-wrap">
+          <el-empty description="请在左侧选择设备" />
+        </div>
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Search, OfficeBuilding, Monitor, Folder, FolderOpened, Plus } from '@element-plus/icons-vue'
+
+defineOptions({ name: 'IoTDevicePointDict' })
+
+const searchKeyword = ref('')
+const treeRef = ref()
+
+const treeProps = {
+  children: 'children',
+  label: 'name'
+}
+
+// Mock Tree Data
+const treeData = ref([
+  {
+    id: 'c1',
+    type: 'company',
+    name: '北京科技有限公司',
+    children: [
+      {
+        id: 'c1-l1',
+        type: 'line',
+        name: 'SMT产线A',
+        children: [
+          {
+            id: 'd-1001',
+            type: 'device',
+            name: '贴片机#1',
+            code: 'BJ-PL01-DEV01',
+            online: true
+          },
+          {
+            id: 'd-1002',
+            type: 'device',
+            name: '贴片机#2',
+            code: 'BJ-PL01-DEV02',
+            online: true
+          }
+        ]
+      },
+      {
+        id: 'c1-l2',
+        type: 'line',
+        name: 'SMT产线B',
+        children: []
+      }
+    ]
+  },
+  {
+    id: 'c2',
+    type: 'company',
+    name: '上海智能科技股份公司',
+    children: []
+  },
+  {
+    id: 'c3',
+    type: 'company',
+    name: '广州数据服务有限公司',
+    children: []
+  }
+])
+
+const currentDeviceId = ref('d-1001')
+
+const flattenDevices = (nodes: any[]) => {
+  let list: any[] = []
+  nodes.forEach(node => {
+    if (node.type === 'device') {
+      list.push(node)
+    }
+    if (node.children) {
+      list = list.concat(flattenDevices(node.children))
+    }
+  })
+  return list
+}
+
+const allDevices = computed(() => flattenDevices(treeData.value))
+const currentDevice = computed(() => allDevices.value.find(d => d.id === currentDeviceId.value))
+
+const filterNode = (value: string, data: any) => {
+  if (!value) return true
+  return data.name.includes(value) || (data.code && data.code.includes(value))
+}
+
+watch(searchKeyword, (val) => {
+  treeRef.value?.filter(val)
+})
+
+const handleNodeClick = (data: any) => {
+  if (data.type === 'device') {
+    currentDeviceId.value = data.id
+  }
+}
+
+// Mock Point Groups Data
+const pointGroups = ref([
+  {
+    name: '环境参数',
+    points: [
+      {
+        id: 'p1',
+        code: 'temperature',
+        name: '温度',
+        value: 45.2,
+        unit: '℃',
+        type: '数值',
+        history: true,
+        updatedAt: '2026-03-10 10:30:00',
+        desc: '设备环境温度'
+      },
+      {
+        id: 'p2',
+        code: 'humidity',
+        name: '湿度',
+        value: 65.8,
+        unit: '%',
+        type: '数值',
+        history: true,
+        updatedAt: '2026-03-10 10:30:00',
+        desc: '设备环境湿度'
+      },
+      {
+        id: 'p3',
+        code: 'pressure',
+        name: '压力',
+        value: 0.85,
+        unit: 'MPa',
+        type: '数值',
+        history: true,
+        updatedAt: '2026-03-10 10:30:00',
+        desc: '系统压力'
+      }
+    ]
+  },
+  {
+    name: '运行参数',
+    points: [
+      {
+        id: 'p4',
+        code: 'speed',
+        name: '运行速度',
+        value: 120,
+        unit: 'm/min',
+        type: '数值',
+        history: true,
+        updatedAt: '2026-03-10 10:30:00',
+        desc: '设备运行速度'
+      },
+      {
+        id: 'p5',
+        code: 'power',
+        name: '功率',
+        value: 8.5,
+        unit: 'kW',
+        type: '数值',
+        history: true,
+        updatedAt: '2026-03-10 10:30:00',
+        desc: '设备功率'
+      }
+    ]
+  }
+])
+
+const totalPoints = computed(() => {
+  return pointGroups.value.reduce((sum, group) => sum + group.points.length, 0)
+})
+
+</script>
+
+<style scoped lang="scss">
+.point-dict {
+  display: flex;
+  gap: 16px;
+  height: calc(100vh - 120px);
+  min-height: 500px;
+}
+
+.point-dict__left {
+  flex: 0 0 280px;
+  display: flex;
+  flex-direction: column;
+}
+
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+  :deep(.el-card__body) {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
+
+.left-panel__search {
+  margin-bottom: 16px;
+}
+
+.left-panel__stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  .stat-item {
+    background-color: var(--el-fill-color-light);
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+}
+
+.left-panel__tree {
+  flex: 1;
+  overflow-y: auto;
+  margin-right: -8px;
+  padding-right: 8px;
+  
+  :deep(.el-tree-node__content) {
+    height: 36px;
+    border-radius: 6px;
+    margin-bottom: 2px;
+  }
+  
+  :deep(.el-tree-node.is-current > .el-tree-node__content) {
+    background-color: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+    .node-code-tag {
+      background-color: #fff;
+      color: var(--el-color-primary);
+      border-color: var(--el-color-primary-light-5);
+    }
+  }
+}
+
+.custom-tree-node {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 8px;
+  min-width: 0;
+}
+
+.node-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.folder-icon {
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+}
+
+.node-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--el-text-color-disabled);
+  &.is-online {
+    background-color: var(--el-color-success);
+  }
+}
+
+.node-label {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &.is-device {
+    font-size: 13px;
+  }
+}
+
+.node-right {
+  flex-shrink: 0;
+}
+
+.node-code-tag {
+  font-size: 11px;
+  background-color: var(--el-fill-color);
+  color: var(--el-text-color-secondary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.point-dict__right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: var(--el-bg-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.empty-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Header */
+.right-header {
+  height: 88px;
+  background: linear-gradient(135deg, #705df2 0%, #5145c2 100%);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 32px;
+  flex-shrink: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+.header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.header-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: var(--el-text-color-disabled);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  &.is-online {
+    background-color: #67c23a;
+    box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
+  }
+}
+
+.header-title {
+  color: #fff;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-code {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.header-add-btn {
+  background-color: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #fff;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.25);
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.header-count-box {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  color: #fff;
+}
+
+.count-label {
+  font-size: 12px;
+  opacity: 0.8;
+  margin-bottom: 2px;
+}
+
+.count-value {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+/* Content */
+.right-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px 32px;
+  background-color: var(--el-fill-color-blank);
+}
+
+.point-group {
+  margin-bottom: 32px;
+}
+
+.group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--el-text-color-primary);
+  .group-icon {
+    color: #e6a23c;
+    font-size: 18px;
+  }
+}
+
+.group-count {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+
+.group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.point-card {
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  border-left: 4px solid #f5c05c;
+  border-radius: 8px;
+  padding: 16px 20px;
+  transition: all 0.3s;
+  
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    border-color: var(--el-border-color);
+    border-left-color: #f5c05c;
+  }
+}
+
+.point-card__main {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.point-code {
+  background-color: var(--el-fill-color);
+  color: var(--el-text-color-secondary);
+  font-family: monospace;
+  font-size: 13px;
+  padding: 4px 10px;
+  border-radius: 4px;
+}
+
+.point-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--el-text-color-primary);
+  margin-left: 16px;
+  min-width: 80px;
+}
+
+.point-value-wrap {
+  margin-left: 40px;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.point-value {
+  font-size: 22px;
+  font-weight: bold;
+  color: var(--el-color-primary);
+}
+
+.point-unit {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+
+.point-type-tag {
+  margin-left: 24px;
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  border: none;
+}
+
+.point-card__actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.action-checkbox {
+  :deep(.el-checkbox__label) {
+    color: var(--el-color-primary);
+    font-size: 13px;
+  }
+}
+
+.action-btn {
+  font-size: 13px;
+  padding: 0;
+  height: auto;
+}
+
+.point-card__meta {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+@media (max-width: 1200px) {
+  .point-dict {
+    flex-direction: column;
+    height: auto;
+  }
+  .point-dict__left {
+    width: 100%;
+    flex: none;
+    height: 400px;
+  }
+  .right-header {
+    padding: 0 20px;
+  }
+}
+</style>