From cdb9107e3ffdccdb2462ed9d0418c32826b0e173 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 30 Jun 2026 16:05:07 +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=E6=A6=82=E6=8B=AC=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device.js                         |  17 +
 src/pages.json                                |  16 +
 .../pages/materialMove/index.vue              |  99 +--
 .../pages/overview/device/index.vue           | 748 ++++++++++++++++++
 .../pages/overview/device/list.vue            | 512 ++++++++++++
 src/utils/permissionMenu.js                   |   3 +
 6 files changed, 1339 insertions(+), 56 deletions(-)
 create mode 100644 src/api/iot/device.js
 create mode 100644 src/pages_function/pages/overview/device/index.vue
 create mode 100644 src/pages_function/pages/overview/device/list.vue

diff --git a/src/api/iot/device.js b/src/api/iot/device.js
new file mode 100644
index 0000000..edc3e6b
--- /dev/null
+++ b/src/api/iot/device.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getIotDevicePage(params = {}) {
+  return request({
+    url: '/admin-api/iot/device/page',
+    method: 'get',
+    params
+  })
+}
+
+export function getDeviceRunOverview(params = {}) {
+  return request({
+    url: '/admin-api/iot/device-operation-record/runOverview',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/pages.json b/src/pages.json
index f382966..815b755 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -351,6 +351,22 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "overview/device/index",
+          "style": {
+            "navigationBarTitleText": "\u8bbe\u5907\u603b\u89c8",
+            "navigationStyle": "custom",
+            "enablePullDownRefresh": true
+          }
+        },
+        {
+          "path": "overview/device/list",
+          "style": {
+            "navigationBarTitleText": "\u8bbe\u5907\u5217\u8868",
+            "navigationStyle": "custom",
+            "enablePullDownRefresh": true
+          }
+        },
         {
           "path": "spare/index",
           "style": {
diff --git a/src/pages_function/pages/materialMove/index.vue b/src/pages_function/pages/materialMove/index.vue
index b640273..7487b9e 100644
--- a/src/pages_function/pages/materialMove/index.vue
+++ b/src/pages_function/pages/materialMove/index.vue
@@ -38,40 +38,26 @@
           <text class="drawer-title">更多筛选</text>
         </view>
         <scroll-view scroll-y class="drawer-body">
-          <view class="drawer-section">
-            <view class="drawer-section-head">
-              <text class="drawer-section-title">调拨信息</text>
-            </view>
-            <view class="drawer-grid">
-              <view class="drawer-field drawer-field-wide">
-                <text class="drawer-label">创建人</text>
-                <view class="drawer-picker" @click="toggleCreatorPanel">
+          <view class="drawer-section drawer-fields">
+            <view class="drawer-field">
+              <text class="drawer-label">创建人</text>
+              <picker class="drawer-picker-host" :range="creatorPickerLabels" :value="creatorPickerIndex" @change="onCreatorPickerChange">
+                <view class="drawer-picker">
                   <text :class="['drawer-picker-text', !selectedCreator ? 'placeholder' : '']">{{ selectedCreatorLabel }}</text>
                   <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
                 </view>
-                <scroll-view v-if="creatorPanelOpen" scroll-y class="drawer-option-panel">
-                  <view
-                    v-for="item in creatorOptions"
-                    :key="item.value"
-                    :class="['drawer-option-item', selectedCreator === item.value ? 'active' : '']"
-                    @click="selectCreator(item)"
-                  >
-                    <text class="drawer-option-text">{{ item.label }}</text>
-                    <text v-if="selectedCreator === item.value" class="drawer-option-check">✓</text>
-                  </view>
-                </scroll-view>
-              </view>
-              <view class="drawer-field drawer-field-wide">
-                <text class="drawer-label">调拨时间</text>
-                <view class="drawer-date">
-                  <uni-datetime-picker
-                    v-model="moveTimeFilter"
-                    type="daterange"
-                    :clear-icon="true"
-                    start-placeholder="开始时间"
-                    end-placeholder="结束时间"
-                  />
-                </view>
+              </picker>
+            </view>
+            <view class="drawer-field">
+              <text class="drawer-label">调拨时间</text>
+              <view class="drawer-date">
+                <uni-datetime-picker
+                  v-model="moveTimeFilter"
+                  type="daterange"
+                  :clear-icon="true"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                />
               </view>
             </view>
           </view>
@@ -164,7 +150,6 @@ const filterPopupRef = ref(null)
 const selectedCreator = ref(null)
 const moveTimeFilter = ref([])
 const creatorOptions = ref([])
-const creatorPanelOpen = ref(false)
 const categoryType = ref(2)
 
 const categoryNameMap = {
@@ -197,7 +182,16 @@ const selectedCreatorLabel = computed(() => {
   const found = creatorOptions.value.find((item) => item.value === selectedCreator.value)
   return found ? found.label : '创建人'
 })
-
+const creatorPickerOptions = computed(() => [
+  { label: '全部创建人', value: null },
+  ...creatorOptions.value
+])
+const creatorPickerLabels = computed(() => creatorPickerOptions.value.map((item) => item.label))
+const creatorPickerIndex = computed(() => {
+  if (!selectedCreator.value) return 0
+  const index = creatorPickerOptions.value.findIndex((item) => String(item.value) === String(selectedCreator.value))
+  return index >= 0 ? index : 0
+})
 const list = ref([])
 const loading = ref(false)
 const loadingMore = ref(false)
@@ -315,13 +309,12 @@ function confirmFilterDrawer() {
   filterPopupRef.value?.close()
   fetchList(true)
 }
-function toggleCreatorPanel() {
-  creatorPanelOpen.value = !creatorPanelOpen.value
-}
-function selectCreator(item) {
-  selectedCreator.value = selectedCreator.value === item.value ? null : item.value
-  creatorPanelOpen.value = false
+function onCreatorPickerChange(event) {
+  const index = Number(event?.detail?.value || 0)
+  const option = creatorPickerOptions.value[index]
+  selectedCreator.value = option?.value || null
 }
+
 async function loadCreatorOptions() {
   if (creatorOptions.value.length) return
   try {
@@ -440,24 +433,18 @@ onUnload(() => {
 .drawer-action { flex: 1; height: 72rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; border: 2rpx solid #174b78; box-sizing: border-box; }
 .drawer-action.reset { border-radius: 12rpx 0 0 12rpx; background: #ffffff; color: #174b78; }
 .drawer-action.confirm { border-radius: 0 12rpx 12rpx 0; background: #174b78; color: #ffffff; }
-.drawer-section { margin-bottom: 18rpx; padding: 28rpx 28rpx 30rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; }
-.drawer-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
-.drawer-section-title { font-size: 32rpx; line-height: 1.3; color: #1f2937; font-weight: 700; }
-.drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22rpx 20rpx; }
-.drawer-field { min-width: 0; }
-.drawer-field-wide { grid-column: 1 / -1; }
-.drawer-label { display: block; margin-bottom: 12rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; }
-.drawer-picker { width: 100%; min-height: 74rpx; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 18rpx; gap: 8rpx; }
-.drawer-picker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: center; }
+.drawer-section { margin-bottom: 18rpx; padding: 8rpx 28rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; }
+.drawer-fields { display: flex; flex-direction: column; }
+.drawer-field { min-width: 0; min-height: 98rpx; display: flex; align-items: center; gap: 20rpx; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; }
+.drawer-field:last-child { border-bottom: 0; }
+.drawer-field-wide { grid-column: auto; }
+.drawer-label { width: 160rpx; flex: 0 0 160rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; }
+.drawer-picker-host { min-width: 0; flex: 1; display: block; }
+.drawer-picker, .drawer-date { min-width: 0; flex: 1; width: 100%; min-height: 74rpx; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; }
+.drawer-picker { display: flex; align-items: center; justify-content: flex-end; padding: 0 18rpx; gap: 8rpx; }
+.drawer-picker-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: right; }
 .drawer-picker-text.placeholder { color: #9ca3af; }
-.drawer-option-panel { max-height: 360rpx; margin-top: 12rpx; border-radius: 12rpx; background: #f7f8fb; overflow: hidden; }
-.drawer-option-item { min-height: 72rpx; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; }
-.drawer-option-item:last-child { border-bottom: 0; }
-.drawer-option-item.active { background: rgba(23, 75, 120, 0.1); }
-.drawer-option-item.active .drawer-option-text { color: #174b78; font-weight: 600; }
-.drawer-option-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #1f2937; }
-.drawer-option-check { flex-shrink: 0; font-size: 28rpx; color: #174b78; margin-left: 16rpx; }
-.drawer-date { width: 100%; min-height: 74rpx; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; padding: 0 12rpx; }
+.drawer-date { display: flex; align-items: center; padding: 0 12rpx; }
 .drawer-date :deep(.uni-date), .drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { width: 100%; }
 .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { border: 0; padding: 0; background: transparent; }
 
diff --git a/src/pages_function/pages/overview/device/index.vue b/src/pages_function/pages/overview/device/index.vue
new file mode 100644
index 0000000..f3d0010
--- /dev/null
+++ b/src/pages_function/pages/overview/device/index.vue
@@ -0,0 +1,748 @@
+<template>
+  <view class="page-container">
+    <NavBar :title="t('deviceOverview.title')" />
+
+    <view class="summary-wrap">
+      <view class="summary-grid">
+        <view
+          v-for="item in statisticCards"
+          :key="item.key"
+          :class="['stat-card', `stat-card--${item.key}`]"
+          @click="openDeviceList(item)"
+        >
+          <view class="card-head">
+            <view class="card-icon">
+              <uni-icons :type="item.icon" size="24" :color="item.color"></uni-icons>
+            </view>
+            <uni-icons type="right" size="14" color="#9ca3af"></uni-icons>
+          </view>
+          <text class="stat-value">{{ item.value }}</text>
+          <text class="stat-label">{{ item.label }}</text>
+        </view>
+      </view>
+
+      <view class="refresh-row" @click="fetchOverview">
+        <uni-icons type="refresh" size="18" color="#64748b"></uni-icons>
+        <text class="refresh-text">刷新数据</text>
+      </view>
+    </view>
+
+    <view class="operation-wrap">
+      <view class="metric-grid">
+        <view v-for="item in operationMetrics" :key="item.key" class="metric-card">
+          <view class="metric-icon" :style="{ background: item.bgColor }">
+            <uni-icons :type="item.icon" size="22" :color="item.color"></uni-icons>
+          </view>
+          <view class="metric-content">
+            <text class="metric-title">{{ item.label }}</text>
+            <view class="metric-value-row">
+              <text class="metric-value">{{ formatPercentValue(item.value) }}</text>
+              <text class="metric-unit">%</text>
+            </view>
+            <view class="metric-compare">
+              <text class="compare-label">较昨日</text>
+              <text :class="['compare-value', item.change >= 0 ? 'is-up' : 'is-down']">
+                {{ item.change >= 0 ? '↑' : '↓' }} {{ formatPercentValue(Math.abs(item.change)) }}%
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="summary-card">
+        <view class="section-title">状态占比（汇总）</view>
+        <view class="summary-body">
+          <view class="donut-wrap">
+            <view class="donut-chart" :style="donutStyle">
+              <view class="donut-hole">
+                <text class="donut-label">总时长</text>
+                <text class="donut-value">{{ formatHour(operationOverview.summaryTotalHours) }}h</text>
+              </view>
+            </view>
+          </view>
+          <view class="summary-legend">
+            <view v-for="item in statusSummaryItems" :key="item.status" class="legend-row">
+              <view class="legend-left">
+                <view class="legend-dot" :style="{ background: item.color }"></view>
+                <text class="legend-label">{{ item.label }}</text>
+              </view>
+              <text class="legend-value">{{ formatPercentValue(item.percent) }}% ({{ formatHour(item.hours) }}h)</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="loading" class="hint">{{ t('functionCommon.loading') }}</view>
+    <view v-else-if="loadFailed" class="hint error">{{ t('functionCommon.loadFailed') }}</view>
+  </view>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
+import { useI18n } from 'vue-i18n'
+import NavBar from '@/components/common/NavBar.vue'
+import { getDeviceRunOverview, getIotDevicePage } from '@/api/iot/device'
+
+const { t } = useI18n()
+
+const loading = ref(false)
+const loadFailed = ref(false)
+const initialized = ref(false)
+
+const statistics = reactive({
+  total: 0,
+  running: 0,
+  standby: 0,
+  fault: 0,
+  alarm: 0,
+  offline: 0
+})
+
+const operationOverview = reactive({
+  metrics: [],
+  summary: [],
+  summaryTotalHours: 0
+})
+
+const metricConfig = {
+  utilizationRate: { label: '平均稼动率', icon: 'info', color: '#3d84ff', bgColor: 'rgba(61, 132, 255, 0.12)' },
+  powerOnRate: { label: '平均开机率', icon: 'checkbox-filled', color: '#56c45e', bgColor: 'rgba(86, 196, 94, 0.12)' },
+  faultRate: { label: '平均故障率', icon: 'clear', color: '#ffa436', bgColor: 'rgba(255, 164, 54, 0.12)' },
+  standbyRate: { label: '平均待机率', icon: 'refresh', color: '#9c6cff', bgColor: 'rgba(156, 108, 255, 0.12)' }
+}
+
+const statusConfig = {
+  running: { label: '运行', color: '#67c35b' },
+  standby: { label: '待机', color: '#f5c243' },
+  fault: { label: '故障', color: '#ff6b6b' },
+  offline: { label: '离线', color: '#cfd4df' }
+}
+
+const statisticCards = computed(() => [
+  {
+    key: 'total',
+    label: t('deviceOverview.totalDevices'),
+    value: statistics.total,
+    icon: 'list',
+    color: '#1d4ed8'
+  },
+  {
+    key: 'running',
+    label: t('deviceOverview.runningCount'),
+    value: statistics.running,
+    icon: 'checkbox-filled',
+    color: '#16a34a'
+  },
+  {
+    key: 'standby',
+    label: t('deviceOverview.standbyCount'),
+    value: statistics.standby,
+    icon: 'reload',
+    color: '#64748b'
+  },
+  {
+    key: 'fault',
+    label: t('deviceOverview.faultCount'),
+    value: statistics.fault,
+    icon: 'clear',
+    color: '#dc2626'
+  },
+  {
+    key: 'alarm',
+    label: '报警',
+    value: statistics.alarm,
+    icon: 'notification-filled',
+    color: '#f59e0b'
+  },
+  {
+    key: 'offline',
+    label: t('deviceOverview.offlineCount'),
+    value: statistics.offline,
+    icon: 'minus-filled',
+    color: '#6b7280'
+  }
+])
+
+const operationMetrics = computed(() => {
+  const fallback = buildFallbackMetrics()
+  return Object.keys(metricConfig).map((key) => {
+    const metric = operationOverview.metrics.find((item) => item?.key === key) || fallback[key]
+    return {
+      key,
+      ...metricConfig[key],
+      value: Number(metric?.value || 0),
+      change: Number(metric?.change || 0),
+      unit: metric?.unit || '%'
+    }
+  })
+})
+
+const statusSummaryItems = computed(() => {
+  const fallback = buildFallbackSummary()
+  const source = operationOverview.summary.length ? operationOverview.summary : fallback
+  return Object.keys(statusConfig).map((status) => {
+    const found = source.find((item) => item?.status === status)
+    return {
+      status,
+      ...statusConfig[status],
+      percent: Number(found?.percent || 0),
+      hours: Number(found?.hours || 0)
+    }
+  })
+})
+
+const donutStyle = computed(() => {
+  let current = 0
+  const segments = statusSummaryItems.value.map((item) => {
+    const start = current
+    const end = Math.min(100, current + Math.max(0, Number(item.percent || 0)))
+    current = end
+    return item.color + ' ' + start + '% ' + end + '%'
+  })
+  if (current < 100) segments.push('#edf1f7 ' + current + '% 100%')
+  return { background: 'conic-gradient(' + segments.join(', ') + ')' }
+})
+
+onLoad(fetchOverview)
+
+onShow(() => {
+  if (initialized.value) fetchOverview(false)
+})
+
+onPullDownRefresh(async () => {
+  await fetchOverview(false)
+  uni.stopPullDownRefresh()
+})
+
+async function fetchOverview(showLoading = true) {
+  if (loading.value) return
+  if (showLoading) loading.value = true
+  loadFailed.value = false
+  try {
+    const firstPage = await getDeviceRows({ pageNo: 1, pageSize: 10 })
+    let rows = firstPage.list
+    const total = Number(firstPage.total || rows.length || 0)
+    if (total > rows.length) {
+      const allPage = await getDeviceRows({
+        pageNo: 1,
+        pageSize: Math.max(total, 1)
+      })
+      rows = allPage.list
+    }
+    setStatistics(rows, total)
+    await fetchRunOverview(rows)
+    initialized.value = true
+  } catch (error) {
+    loadFailed.value = true
+    resetStatistics()
+    resetOperationOverview()
+  } finally {
+    loading.value = false
+  }
+}
+
+async function getDeviceRows(params) {
+  const res = await getIotDevicePage(params)
+  return normalizePageData(res)
+}
+
+function setStatistics(rows, totalCount) {
+  const next = {
+    total: Number(totalCount || rows.length || 0),
+    running: 0,
+    standby: 0,
+    fault: 0,
+    alarm: 0,
+    offline: 0
+  }
+  rows.forEach((row) => {
+    const key = normalizeDeviceStatus(row?.operatingStatus)
+    next[key] += 1
+  })
+  Object.assign(statistics, next)
+}
+
+function resetStatistics() {
+  Object.assign(statistics, {
+    total: 0,
+    running: 0,
+    standby: 0,
+    fault: 0,
+    alarm: 0,
+    offline: 0
+  })
+}
+
+async function fetchRunOverview(rows) {
+  try {
+    const ids = rows
+      .map((item) => item?.id)
+      .filter((id) => id !== undefined && id !== null && String(id) !== '')
+      .join(',')
+    const range = buildTodayRange()
+    const res = await getDeviceRunOverview({
+      ids,
+      startTime: range.startTime,
+      endTime: range.endTime,
+      timelinePageNo: 1,
+      timelinePageSize: 1
+    })
+    const data = normalizeRunOverviewData(res)
+    if (!data.metrics.length && !data.summary.length) {
+      setFallbackOperationOverview()
+      return
+    }
+    const fallbackSummary = buildFallbackSummary()
+    const nextSummary = data.summary.length ? data.summary : fallbackSummary
+    const summaryHours = nextSummary.reduce((sum, item) => sum + Number(item?.hours || 0), 0)
+    operationOverview.metrics = data.metrics
+    operationOverview.summary = nextSummary
+    operationOverview.summaryTotalHours = Number(data.summaryTotalHours || 0) || summaryHours
+  } catch (error) {
+    setFallbackOperationOverview()
+  }
+}
+
+function normalizeRunOverviewData(res) {
+  const root = res && res.data !== undefined ? res.data : res
+  return {
+    metrics: Array.isArray(root?.metrics) ? root.metrics : Array.isArray(root?.data?.metrics) ? root.data.metrics : [],
+    summary: Array.isArray(root?.summary) ? root.summary : Array.isArray(root?.data?.summary) ? root.data.summary : [],
+    summaryTotalHours: Number(root?.summaryTotalHours ?? root?.data?.summaryTotalHours ?? 0)
+  }
+}
+
+function resetOperationOverview() {
+  operationOverview.metrics = []
+  operationOverview.summary = []
+  operationOverview.summaryTotalHours = 0
+}
+
+function setFallbackOperationOverview() {
+  const summary = buildFallbackSummary()
+  const fallback = buildFallbackMetrics()
+  operationOverview.metrics = Object.keys(metricConfig).map((key) => ({
+    key,
+    value: fallback[key].value,
+    change: 0,
+    unit: '%'
+  }))
+  operationOverview.summary = summary
+  operationOverview.summaryTotalHours = summary.reduce((sum, item) => sum + Number(item.hours || 0), 0)
+}
+
+function buildFallbackMetrics() {
+  const total = Math.max(Number(statistics.total || 0), 1)
+  const faultCount = Number(statistics.fault || 0) + Number(statistics.alarm || 0)
+  return {
+    utilizationRate: { value: (Number(statistics.running || 0) / total) * 100, change: 0, unit: '%' },
+    powerOnRate: { value: ((Number(statistics.running || 0) + Number(statistics.standby || 0) + faultCount) / total) * 100, change: 0, unit: '%' },
+    faultRate: { value: (faultCount / total) * 100, change: 0, unit: '%' },
+    standbyRate: { value: (Number(statistics.standby || 0) / total) * 100, change: 0, unit: '%' }
+  }
+}
+
+function buildFallbackSummary() {
+  const total = Math.max(Number(statistics.total || 0), 1)
+  const faultCount = Number(statistics.fault || 0) + Number(statistics.alarm || 0)
+  const rows = [
+    { status: 'running', count: Number(statistics.running || 0) },
+    { status: 'standby', count: Number(statistics.standby || 0) },
+    { status: 'fault', count: faultCount },
+    { status: 'offline', count: Number(statistics.offline || 0) }
+  ]
+  return rows.map((item) => ({
+    status: item.status,
+    percent: (item.count / total) * 100,
+    hours: item.count
+  }))
+}
+
+function buildTodayRange() {
+  const start = new Date()
+  start.setHours(0, 0, 0, 0)
+  const end = new Date()
+  end.setHours(23, 59, 59, 999)
+  return { startTime: formatDateTime(start), endTime: formatDateTime(end) }
+}
+
+function formatDateTime(date) {
+  const pad = (value) => String(value).padStart(2, '0')
+  return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()) + ' ' + pad(date.getHours()) + ':' + pad(date.getMinutes()) + ':' + pad(date.getSeconds())
+}
+
+function formatPercentValue(value) {
+  const number = Number(value || 0)
+  return Number.isFinite(number) ? number.toFixed(2) : '0.00'
+}
+
+function formatHour(value) {
+  const number = Number(value || 0)
+  return Number.isFinite(number) ? number.toFixed(2) : '0.00'
+}
+
+function normalizePageData(res) {
+  const root = res && res.data !== undefined ? res.data : res
+  const list =
+    root?.list ||
+    root?.rows ||
+    root?.records ||
+    root?.data?.list ||
+    root?.data?.rows ||
+    root?.data?.records ||
+    []
+  const total =
+    root?.total ??
+    root?.data?.total ??
+    (Array.isArray(list) ? list.length : 0)
+  return {
+    list: Array.isArray(list) ? list : [],
+    total: Number(total || 0)
+  }
+}
+
+function normalizeDeviceStatus(value) {
+  const text = String(value ?? '').trim().toLowerCase()
+  if (['运行', '运行中', 'running', 'run', '1'].includes(text)) return 'running'
+  if (['待机', '待机中', 'standby', 'idle', '2'].includes(text)) return 'standby'
+  if (['故障', '故障中', 'fault', 'error', '3'].includes(text)) return 'fault'
+  if (['报警', '报警中', 'alarm', 'warning', '4', '5'].includes(text)) return 'alarm'
+  return 'offline'
+}
+
+function openDeviceList(item) {
+  uni.navigateTo({
+    url: `/pages_function/pages/overview/device/list?status=${encodeURIComponent(item.key)}&title=${encodeURIComponent(item.label)}`
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background: #f3f4f6;
+}
+
+.summary-wrap {
+  padding: 24rpx;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18rpx;
+}
+
+.stat-card {
+  min-width: 0;
+  height: 190rpx;
+  padding: 18rpx;
+  border-radius: 8rpx;
+  background: #ffffff;
+  box-shadow: 0 6rpx 20rpx rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.stat-card:active {
+  transform: scale(0.98);
+}
+
+.card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-icon {
+  width: 54rpx;
+  height: 54rpx;
+  border-radius: 8rpx;
+  background: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stat-value {
+  margin-top: 10rpx;
+  font-size: 42rpx;
+  line-height: 1.1;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.stat-label {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  line-height: 1.25;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stat-card--running .card-icon {
+  background: #ecfdf3;
+}
+
+.stat-card--standby .card-icon,
+.stat-card--offline .card-icon {
+  background: #f1f5f9;
+}
+
+.stat-card--fault .card-icon {
+  background: #fef2f2;
+}
+
+.stat-card--alarm .card-icon {
+  background: #fffbeb;
+}
+
+.stat-card--total .card-icon {
+  background: #eff6ff;
+}
+
+.refresh-row {
+  margin-top: 24rpx;
+  height: 72rpx;
+  border-radius: 8rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+  color: #64748b;
+}
+
+.refresh-text {
+  font-size: 26rpx;
+  line-height: 1;
+}
+
+.hint {
+  padding: 28rpx;
+  text-align: center;
+  color: #64748b;
+  font-size: 26rpx;
+}
+
+.hint.error {
+  color: #dc2626;
+}
+
+.operation-wrap {
+  padding: 0 24rpx 28rpx;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18rpx;
+}
+
+.metric-card {
+  min-width: 0;
+  min-height: 168rpx;
+  padding: 20rpx;
+  border-radius: 8rpx;
+  background: #ffffff;
+  box-shadow: 0 6rpx 20rpx rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 18rpx;
+}
+
+.metric-icon {
+  width: 66rpx;
+  height: 66rpx;
+  border-radius: 50%;
+  flex: 0 0 66rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.metric-content {
+  min-width: 0;
+  flex: 1;
+}
+
+.metric-title {
+  display: block;
+  font-size: 24rpx;
+  line-height: 1.25;
+  color: #475569;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.metric-value-row {
+  margin-top: 10rpx;
+  display: flex;
+  align-items: baseline;
+}
+
+.metric-value {
+  font-size: 36rpx;
+  line-height: 1;
+  color: #0f172a;
+  font-weight: 800;
+}
+
+.metric-unit {
+  margin-left: 4rpx;
+  font-size: 26rpx;
+  color: #0f172a;
+  font-weight: 700;
+}
+
+.metric-compare {
+  margin-top: 12rpx;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  min-width: 0;
+}
+
+.compare-label,
+.compare-value {
+  font-size: 22rpx;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.compare-label {
+  color: #64748b;
+}
+
+.compare-value.is-up {
+  color: #ef4444;
+}
+
+.compare-value.is-down {
+  color: #16a34a;
+}
+
+.summary-card {
+  margin-top: 18rpx;
+  padding: 24rpx;
+  border-radius: 8rpx;
+  background: #ffffff;
+  box-shadow: 0 6rpx 20rpx rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
+}
+
+.section-title {
+  font-size: 30rpx;
+  line-height: 1.3;
+  color: #0f172a;
+  font-weight: 800;
+}
+
+.summary-body {
+  margin-top: 24rpx;
+  display: flex;
+  align-items: center;
+  gap: 26rpx;
+}
+
+.donut-wrap {
+  width: 230rpx;
+  flex: 0 0 230rpx;
+  display: flex;
+  justify-content: center;
+}
+
+.donut-chart {
+  width: 210rpx;
+  height: 210rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.donut-hole {
+  width: 132rpx;
+  height: 132rpx;
+  border-radius: 50%;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.donut-label {
+  font-size: 21rpx;
+  color: #64748b;
+  line-height: 1.2;
+}
+
+.donut-value {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #0f172a;
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+.summary-legend {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.legend-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14rpx;
+  min-width: 0;
+}
+
+.legend-left {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  flex: 0 0 90rpx;
+}
+
+.legend-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  flex: 0 0 16rpx;
+}
+
+.legend-label {
+  font-size: 24rpx;
+  line-height: 1.2;
+  color: #64748b;
+}
+
+.legend-value {
+  min-width: 0;
+  flex: 1;
+  text-align: right;
+  font-size: 24rpx;
+  line-height: 1.2;
+  color: #111827;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/pages_function/pages/overview/device/list.vue b/src/pages_function/pages/overview/device/list.vue
new file mode 100644
index 0000000..46cc2d6
--- /dev/null
+++ b/src/pages_function/pages/overview/device/list.vue
@@ -0,0 +1,512 @@
+<template>
+  <view class="page-container">
+    <NavBar :title="pageTitle" />
+
+    <view class="filter-bar">
+      <view class="keyword-wrap">
+        <input
+          id="overview-device-keyword-input"
+          v-model="keyword"
+          class="keyword-input"
+          type="text"
+          placeholder="搜索设备编号/名称"
+          confirm-type="search"
+          @input="handleKeywordInput"
+          @confirm="handleSearch"
+        />
+      </view>
+      <view class="icon-btn" @click="resetSearch">
+        <uni-icons type="refresh" size="23" color="#64748b"></uni-icons>
+      </view>
+    </view>
+
+    <scroll-view
+      scroll-y
+      class="list-scroll"
+      :scroll-top="scrollTop"
+      @scroll="onScroll"
+      @scrolltolower="loadMore"
+      :lower-threshold="80"
+    >
+      <view class="list-wrap">
+        <view v-for="item in list" :key="item.id || item.deviceCode" class="device-card">
+          <view class="card-header">
+            <view class="device-main">
+              <text class="device-name">{{ textValue(item.deviceName) }}</text>
+              <text class="device-code">{{ textValue(item.deviceCode) }}</text>
+            </view>
+            <view :class="['status-chip', statusClass(item.operatingStatus)]">
+              <view class="status-dot"></view>
+              <text class="status-text">{{ operatingStatusLabel(item.operatingStatus) }}</text>
+            </view>
+          </view>
+
+          <view class="card-body">
+            <view class="info-row">
+              <text class="info-label">采集协议</text>
+              <text class="info-value">{{ textValue(item.protocol) }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">采集时间</text>
+              <text class="info-value">{{ formatDateTime(item.collectionTime) }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">是否启用</text>
+              <text :class="['enable-text', isEnabled(item) ? 'enabled' : 'disabled']">
+                {{ isEnabled(item) ? '已启用' : '未启用' }}
+              </text>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="loading" class="hint">{{ t('functionCommon.loading') }}</view>
+        <view v-else-if="!list.length" class="hint">暂无设备数据</view>
+        <view v-else-if="loadingMore" class="hint">{{ t('functionCommon.loadingMore') }}</view>
+        <view v-else-if="finished" class="hint">{{ t('functionCommon.noMore') }}</view>
+      </view>
+    </scroll-view>
+
+    <view v-if="showGoTop" class="go-top-btn" @click="goTop">
+      <uni-icons type="top" size="22" color="#ffffff"></uni-icons>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { useI18n } from 'vue-i18n'
+import NavBar from '@/components/common/NavBar.vue'
+import { getIotDevicePage } from '@/api/iot/device'
+
+const { t } = useI18n()
+
+const statusKey = ref('total')
+const titleText = ref('')
+const keyword = ref('')
+const allDevices = ref([])
+const filteredDevices = ref([])
+const list = ref([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const finished = ref(false)
+const pageNo = ref(1)
+const pageSize = ref(10)
+const scrollTop = ref(0)
+const showGoTop = ref(false)
+
+let searchTimer = null
+
+const pageTitle = computed(() => titleText.value || statusTitle(statusKey.value))
+
+onLoad(async (options = {}) => {
+  statusKey.value = String(options.status || 'total')
+  titleText.value = options.title ? decodeURIComponent(String(options.title)) : statusTitle(statusKey.value)
+  await fetchDevices()
+})
+
+onPullDownRefresh(async () => {
+  await fetchDevices(false)
+  uni.stopPullDownRefresh()
+})
+
+onReachBottom(loadMore)
+
+async function fetchDevices(showLoading = true) {
+  if (loading.value) return
+  if (showLoading) loading.value = true
+  try {
+    const firstPage = await getDeviceRows({ pageNo: 1, pageSize: 10 })
+    let rows = firstPage.list
+    const total = Number(firstPage.total || rows.length || 0)
+    if (total > rows.length) {
+      const allPage = await getDeviceRows({
+        pageNo: 1,
+        pageSize: Math.max(total, 1)
+      })
+      rows = allPage.list
+    }
+    allDevices.value = rows
+    applyFilters(true)
+  } catch (error) {
+    allDevices.value = []
+    applyFilters(true)
+    uni.showToast({ title: t('functionCommon.loadFailed'), icon: 'none' })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function getDeviceRows(params) {
+  const res = await getIotDevicePage(params)
+  return normalizePageData(res)
+}
+
+function normalizePageData(res) {
+  const root = res && res.data !== undefined ? res.data : res
+  const rows =
+    root?.list ||
+    root?.rows ||
+    root?.records ||
+    root?.data?.list ||
+    root?.data?.rows ||
+    root?.data?.records ||
+    []
+  const total =
+    root?.total ??
+    root?.data?.total ??
+    (Array.isArray(rows) ? rows.length : 0)
+  return {
+    list: Array.isArray(rows) ? rows : [],
+    total: Number(total || 0)
+  }
+}
+
+function applyFilters(reset = false) {
+  if (reset) {
+    pageNo.value = 1
+    finished.value = false
+  }
+  const text = keyword.value.trim().toLowerCase()
+  const rows = allDevices.value.filter((item) => {
+    const matchedStatus =
+      statusKey.value === 'total' ||
+      normalizeDeviceStatus(item?.operatingStatus) === statusKey.value
+    const matchedKeyword =
+      !text ||
+      String(item?.deviceCode ?? '').toLowerCase().includes(text) ||
+      String(item?.deviceName ?? '').toLowerCase().includes(text)
+    return matchedStatus && matchedKeyword
+  })
+  filteredDevices.value = rows
+  const nextList = rows.slice(0, pageNo.value * pageSize.value)
+  list.value = nextList
+  finished.value = nextList.length >= rows.length
+}
+
+function loadMore() {
+  if (loading.value || loadingMore.value || finished.value) return
+  loadingMore.value = true
+  pageNo.value += 1
+  applyFilters(false)
+  loadingMore.value = false
+}
+
+function handleKeywordInput() {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    applyFilters(true)
+  }, 300)
+}
+
+function handleSearch() {
+  if (searchTimer) clearTimeout(searchTimer)
+  applyFilters(true)
+}
+
+function resetSearch() {
+  keyword.value = ''
+  applyFilters(true)
+}
+
+function onScroll(e) {
+  showGoTop.value = (e?.detail?.scrollTop || 0) > 500
+}
+
+function goTop() {
+  scrollTop.value = 0
+  setTimeout(() => {
+    scrollTop.value = 1
+  }, 80)
+}
+
+function statusTitle(key) {
+  const map = {
+    total: t('deviceOverview.totalDevices'),
+    running: t('deviceOverview.runningCount'),
+    standby: t('deviceOverview.standbyCount'),
+    fault: t('deviceOverview.faultCount'),
+    alarm: '报警',
+    offline: t('deviceOverview.offlineCount')
+  }
+  return map[key] || t('deviceOverview.title')
+}
+
+function normalizeDeviceStatus(value) {
+  const text = String(value ?? '').trim().toLowerCase()
+  if (['运行', '运行中', 'running', 'run', '1'].includes(text)) return 'running'
+  if (['待机', '待机中', 'standby', 'idle', '2'].includes(text)) return 'standby'
+  if (['故障', '故障中', 'fault', 'error', '3'].includes(text)) return 'fault'
+  if (['报警', '报警中', 'alarm', 'warning', '4', '5'].includes(text)) return 'alarm'
+  return 'offline'
+}
+
+function operatingStatusLabel(value) {
+  const text = String(value ?? '').trim()
+  if (text) return text
+  const map = {
+    running: '运行',
+    standby: '待机',
+    fault: '故障',
+    alarm: '报警',
+    offline: '离线'
+  }
+  return map[normalizeDeviceStatus(value)]
+}
+
+function statusClass(value) {
+  return `status-${normalizeDeviceStatus(value)}`
+}
+
+function isEnabled(item) {
+  const value = item?.isEnable
+  if (typeof value === 'boolean') return value
+  const text = String(value ?? '').trim().toLowerCase()
+  return ['true', '1', 'yes', 'y'].includes(text)
+}
+
+function textValue(value) {
+  if (value === 0) return '0'
+  if (value === false) return t('functionCommon.no')
+  if (value === true) return t('functionCommon.yes')
+  if (value === null || value === undefined) return '-'
+  const text = String(value).trim()
+  return text || '-'
+}
+
+function formatDateTime(value) {
+  if (!value) return '-'
+  const pad = (n) => String(n).padStart(2, '0')
+  if (Array.isArray(value) && value.length >= 3) {
+    const [y, m, d, h = 0, mi = 0, s = 0] = value
+    return `${y}-${pad(m)}-${pad(d)} ${pad(h)}:${pad(mi)}:${pad(s)}`
+  }
+  const text = String(value).trim()
+  if (!text) return '-'
+  if (/^\d{10,13}$/.test(text)) {
+    const timestamp = Number(text.length === 10 ? `${text}000` : text)
+    const date = new Date(timestamp)
+    if (!Number.isNaN(date.getTime())) {
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+    }
+  }
+  return text
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background: #f3f4f6;
+}
+
+.filter-bar {
+  padding: 18rpx 20rpx;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  background: #f3f4f6;
+}
+
+.keyword-wrap {
+  min-width: 0;
+  flex: 1;
+  height: 68rpx;
+  border: 1rpx solid #d9dde5;
+  border-radius: 8rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.keyword-input {
+  width: 100%;
+  height: 66rpx;
+  padding: 0 22rpx;
+  font-size: 26rpx;
+  color: #1f2937;
+  box-sizing: border-box;
+}
+
+.icon-btn {
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 8rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.list-scroll {
+  height: calc(100vh - 180rpx - var(--status-bar-height));
+}
+
+.list-wrap {
+  padding: 0 20rpx 30rpx;
+}
+
+.device-card {
+  margin-bottom: 18rpx;
+  padding: 24rpx;
+  border-radius: 8rpx;
+  background: #ffffff;
+  box-shadow: 0 6rpx 20rpx rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
+}
+
+.card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18rpx;
+}
+
+.device-main {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.device-name {
+  font-size: 31rpx;
+  line-height: 1.35;
+  font-weight: 700;
+  color: #111827;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.device-code {
+  font-size: 24rpx;
+  line-height: 1.25;
+  color: #64748b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-chip {
+  max-width: 190rpx;
+  height: 46rpx;
+  padding: 0 14rpx;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+}
+
+.status-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: currentColor;
+  flex: 0 0 12rpx;
+}
+
+.status-text {
+  min-width: 0;
+  font-size: 23rpx;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-running {
+  color: #15803d;
+  background: #ecfdf3;
+}
+
+.status-standby {
+  color: #475569;
+  background: #f1f5f9;
+}
+
+.status-fault {
+  color: #b91c1c;
+  background: #fef2f2;
+}
+
+.status-alarm {
+  color: #b45309;
+  background: #fffbeb;
+}
+
+.status-offline {
+  color: #64748b;
+  background: #f3f4f6;
+}
+
+.card-body {
+  margin-top: 22rpx;
+  border-top: 1rpx solid #edf0f5;
+  padding-top: 18rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 14rpx;
+}
+
+.info-row {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+}
+
+.info-label {
+  flex: 0 0 auto;
+  font-size: 24rpx;
+  line-height: 1.3;
+  color: #64748b;
+}
+
+.info-value,
+.enable-text {
+  min-width: 0;
+  flex: 1;
+  text-align: right;
+  font-size: 25rpx;
+  line-height: 1.35;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.enable-text.enabled {
+  color: #15803d;
+}
+
+.enable-text.disabled {
+  color: #9ca3af;
+}
+
+.hint {
+  padding: 30rpx 0;
+  text-align: center;
+  color: #64748b;
+  font-size: 26rpx;
+}
+
+.go-top-btn {
+  position: fixed;
+  right: 28rpx;
+  bottom: 44rpx;
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: #1f4f7a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(31, 79, 122, 0.24);
+}
+</style>
diff --git a/src/utils/permissionMenu.js b/src/utils/permissionMenu.js
index 19913cc..ef87f75 100644
--- a/src/utils/permissionMenu.js
+++ b/src/utils/permissionMenu.js
@@ -87,6 +87,9 @@ const MENU_ROUTE_MAP = {
   molddismount: '/pages_function/pages/moldoperate/dismount',
   mold: '/pages_function/pages/mold/index',
   equipment: '/pages_function/pages/equipment/index',
+  '\u8bbe\u5907\u603b\u89c8': '/pages_function/pages/overview/device/index',
+  deviceoverview: '/pages_function/pages/overview/device/index',
+  overviewdevice: '/pages_function/pages/overview/device/index',
   spare: '/pages_function/pages/spare/index',
   sparepartInbound: '/pages_function/pages/sparepartInbound/index',
   productInbound: '/pages_function/pages/productInbound/index',