From 487e08cd06c2ff864617ca7dd69096c8d9c0e729 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Mon, 30 Jun 2025 18:36:39 +0800
Subject: [PATCH] =?UTF-8?q?add(dms):=20=E6=B7=BB=E5=8A=A0=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=8F=B0=E8=B4=A6=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 集成多种接口
- TODO:字典还未使用
---
 src/views/dms/prodBaseMachineInfo/index.vue | 1939 +++++++++++++++++++
 1 file changed, 1939 insertions(+)
 create mode 100644 src/views/dms/prodBaseMachineInfo/index.vue

diff --git a/src/views/dms/prodBaseMachineInfo/index.vue b/src/views/dms/prodBaseMachineInfo/index.vue
new file mode 100644
index 0000000..ba8a385
--- /dev/null
+++ b/src/views/dms/prodBaseMachineInfo/index.vue
@@ -0,0 +1,1939 @@
+<!--
+  TODO: 字典和统计接口待完善
+
+  需要引入的字典：
+  1. active_flag - 激活标识字典
+  2. maint_type - 保养类型字典
+  3. alarm_level - 报警级别字典
+  4. handle_status - 处理状态字典
+  5. bills_status - 工单状态字典
+  6. device_status - 设备状态字典
+
+  需要创建的统计接口：
+  1. getDmsDeviceStatistics() - 设备统计接口
+     返回：{ totalCount, runningCount, maintenanceCount, alarmCount, faultCount }
+  2. getDmsDeviceMaintenanceStats(machineId) - 设备维护统计接口
+     返回：{ plannedCount, temporaryCount, avgInterval, nextMaintenanceDate }
+-->
+<template>
+  <div class="dms-machine-ledger">
+    <!-- 工厂背景装饰 -->
+    <div class="factory-bg-decoration">
+      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
+        <path d="M0,0 L0,60 L50,60 L50,30 L100,30 L100,50 L150,50 L150,20 L200,20 L200,60 L1200,60 L1200,0 Z"
+              fill="url(#factory-gradient)" opacity="0.1"/>
+        <defs>
+          <linearGradient id="factory-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" style="stop-color:#409EFF;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#667eea;stop-opacity:1" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+
+    <!-- 顶部信息面板 -->
+    <div class="top-info-panel">
+      <div class="panel-left">
+        <h1 class="page-title">
+          <el-icon><Monitor /></el-icon>
+          设备台账管理
+        </h1>
+        <p class="page-subtitle">设备全生命周期管理与履历追踪</p>
+      </div>
+      <div class="panel-right">
+        <div class="current-time">
+          <el-icon><Clock /></el-icon>
+          {{ currentTime }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 统计仪表盘 -->
+    <div class="statistics-dashboard">
+      <div v-for="stat in statistics" :key="stat.type"
+           :class="['stat-item', `stat-${stat.type}`]">
+        <div class="stat-bg-effect"></div>
+        <div class="stat-inner">
+          <div class="stat-icon-wrapper">
+            <el-icon :size="32">
+              <component :is="stat.icon" />
+            </el-icon>
+          </div>
+          <div class="stat-info">
+            <div class="stat-number">
+              <span class="value-animate">{{ stat.value }}</span>
+              <span class="unit">{{ stat.unit }}</span>
+            </div>
+            <div class="stat-title">{{ stat.label }}</div>
+          </div>
+        </div>
+        <div class="stat-chart">
+          <svg viewBox="0 0 100 40">
+            <polyline :points="stat.trend" fill="none" stroke="currentColor" stroke-width="2"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- 功能操作区 -->
+    <div class="action-toolbar">
+      <div class="toolbar-left">
+        <el-button-group>
+          <el-button :type="viewMode === 'grid' ? 'primary' : 'default'"
+                     @click="viewMode = 'grid'">
+            <el-icon><Grid /></el-icon>
+            网格视图
+          </el-button>
+          <el-button :type="viewMode === 'list' ? 'primary' : 'default'"
+                     @click="viewMode = 'list'">
+            <el-icon><List /></el-icon>
+            列表视图
+          </el-button>
+        </el-button-group>
+      </div>
+      <div class="toolbar-right">
+        <el-button type="primary" @click="exportData">
+          <el-icon><Download /></el-icon>
+          导出数据
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 查询过滤器 -->
+    <el-card class="search-filter-card" v-show="showSearch">
+      <template #header>
+        <div class="filter-header">
+          <div class="filter-title">
+            <el-icon><Filter /></el-icon>
+            筛选条件
+          </div>
+          <el-button text @click="showSearch = false">
+            <el-icon><ArrowUp /></el-icon>
+          </el-button>
+        </div>
+      </template>
+      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
+        <el-form-item label="设备编号" prop="machineCode">
+          <el-input v-model="queryParams.machineCode" placeholder="请输入设备编号" clearable />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="machineName">
+          <el-input v-model="queryParams.machineName" placeholder="请输入设备名称" clearable />
+        </el-form-item>
+        <el-form-item label="设备位置" prop="machineLocation">
+          <el-input v-model="queryParams.machineLocation" placeholder="请输入设备位置" clearable />
+        </el-form-item>
+        <el-form-item label="设备状态" prop="machineStatus">
+          <el-select v-model="queryParams.machineStatus" placeholder="请选择设备状态" clearable>
+            <el-option v-for="dict in machine_status" :key="dict.value"
+                       :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备类型" prop="deviceType">
+          <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
+            <el-option v-for="type in deviceTypes" :key="type.deviceTypeId"
+                       :label="type.deviceTypeName" :value="type.deviceTypeId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery" class="filter-btn-primary">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 网格视图 -->
+      <div v-if="viewMode === 'grid'" class="grid-view" v-loading="loading">
+        <transition-group name="fade-transform" tag="div" class="machine-grid">
+          <div v-for="machine in machineList" :key="machine.machineId"
+               class="machine-card-wrapper" @click="selectMachine(machine)">
+            <div :class="['machine-card', { selected: selectedMachine?.machineId === machine.machineId }]">
+              <!-- 状态指示灯 -->
+              <div :class="['status-indicator', `status-${machine.machineStatus}`]">
+                <span class="status-dot"></span>
+              </div>
+
+              <!-- 设备图标区 -->
+              <div class="machine-visual">
+                <div class="machine-icon-bg">
+                  <el-icon :size="40">
+                    <component :is="getMachineIcon(machine.deviceType)" />
+                  </el-icon>
+                </div>
+                <div class="machine-number">{{ machine.machineCode }}</div>
+              </div>
+
+              <!-- 设备信息 -->
+              <div class="machine-details">
+                <h3 class="machine-name">{{ machine.machineName }}</h3>
+                <div class="machine-meta">
+                  <div class="meta-item">
+                    <el-icon><Location /></el-icon>
+                    <span>{{ machine.machineLocation || '-' }}</span>
+                  </div>
+                  <div class="meta-item">
+                    <el-icon><Memo /></el-icon>
+                    <span>{{ getDeviceTypeName(machine.deviceType) }}</span>
+                  </div>
+                  <div class="meta-item">
+                    <el-icon><Timer /></el-icon>
+                    <span>运行 {{ calculateRunDays(machine.createTime) }} 天</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 快捷操作 -->
+              <div class="quick-actions">
+                <el-button size="small" @click.stop="viewLifecycle(machine)">生命周期</el-button>
+                <el-button size="small" @click.stop="viewDetails(machine)">详情</el-button>
+              </div>
+            </div>
+          </div>
+        </transition-group>
+      </div>
+
+      <!-- 列表视图 -->
+      <div v-else-if="viewMode === 'list'" class="list-view">
+        <el-table v-loading="loading" :data="machineList" :row-class-name="tableRowClassName">
+          <el-table-column label="设备编号" align="center" prop="machineCode" />
+          <el-table-column label="设备名称" align="center" prop="machineName" />
+          <el-table-column label="设备类型" align="center" prop="deviceType">
+            <template #default="scope">
+              {{ getDeviceTypeName(scope.row.deviceType) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="设备位置" align="center" prop="machineLocation" />
+          <el-table-column label="设备状态" align="center" prop="machineStatus">
+            <template #default="scope">
+              <div class="status-cell">
+                <span :class="['status-badge', `status-${scope.row.machineStatus}`]"></span>
+                <el-tag :type="getStatusType(scope.row.machineStatus)" effect="plain">
+                  {{ getStatusLabel(scope.row.machineStatus) }}
+                </el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+            <template #default="scope">
+              <span class="date-text">{{ formatDate(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <el-button type="primary" size="small" @click="viewLifecycle(scope.row)">生命周期</el-button>
+              <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                    v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </div>
+    </div>
+
+    <!-- 生命周期抽履 -->
+    <el-drawer v-model="lifecycleDrawer" :title="`设备生命周期 - ${selectedMachine?.machineName || ''}`"
+               size="60%" class="lifecycle-drawer">
+      <div class="lifecycle-container" v-loading="lifecycleLoading">
+        <!-- 设备概览卡片 -->
+        <div class="device-overview-card" v-if="selectedMachine">
+          <div class="overview-header">
+            <div class="device-avatar">
+              <el-icon :size="40">
+                <component :is="getMachineIcon(selectedMachine.deviceType)" />
+              </el-icon>
+            </div>
+            <div class="device-basic">
+              <h2>{{ selectedMachine.machineName }}</h2>
+              <p>编号：{{ selectedMachine.machineCode }} | 位置：{{ selectedMachine.machineLocation || '-' }}</p>
+            </div>
+          </div>
+          <el-divider />
+          <div class="overview-stats">
+            <div class="stat">
+              <span class="stat-label">运行天数</span>
+              <span class="stat-value">{{ calculateRunDays(selectedMachine.createTime) }}</span>
+            </div>
+            <div class="stat">
+              <span class="stat-label">故障次数</span>
+              <span class="stat-value">{{ lifecycleStats.faultCount }}</span>
+            </div>
+            <div class="stat">
+              <span class="stat-label">保养次数</span>
+              <span class="stat-value">{{ lifecycleStats.maintCount }}</span>
+            </div>
+            <div class="stat">
+              <span class="stat-label">报警次数</span>
+              <span class="stat-value">{{ lifecycleStats.alarmCount }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 生命周期类型选择 -->
+        <div class="lifecycle-type-selector">
+          <h3>选择查看的生命周期类型</h3>
+          <div class="type-cards">
+            <div v-for="type in lifecycleTypes" :key="type.value"
+                 :class="['type-card', { active: selectedLifecycleTypes.includes(type.value) }]"
+                 @click="toggleLifecycleType(type.value)">
+              <div class="type-icon" :style="{ background: type.gradient }">
+                <el-icon :size="24">
+                  <component :is="type.icon" />
+                </el-icon>
+              </div>
+              <span class="type-name">{{ type.label }}</span>
+              <span v-if="type.count > 0" class="type-count">{{ type.count }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 生命周期时间轴 -->
+        <div class="lifecycle-timeline-container" v-if="lifecycleEvents.length > 0">
+          <h3>设备履历时间轴</h3>
+          <div class="timeline-wrapper">
+            <div v-for="event in lifecycleEvents" :key="event.id" class="timeline-item">
+              <div class="timeline-marker" :style="{ backgroundColor: event.color }">
+                <el-icon :size="20">
+                  <component :is="event.icon" />
+                </el-icon>
+              </div>
+              <div class="timeline-content">
+                <div class="event-header">
+                  <h4>{{ event.title }}</h4>
+                  <span class="event-time">{{ formatDateTime(event.time) }}</span>
+                </div>
+                <p class="event-description">{{ event.description }}</p>
+                <div class="event-tags">
+                  <el-tag v-for="tag in event.tags" :key="tag" size="small">{{ tag }}</el-tag>
+                </div>
+                <div class="event-details" v-if="event.details">
+                  <el-collapse>
+                    <el-collapse-item title="查看详情">
+                      <el-descriptions :column="2" border>
+                        <el-descriptions-item v-for="(value, key) in event.details"
+                                              :key="key" :label="key">
+                          {{ value || '-' }}
+                        </el-descriptions-item>
+                      </el-descriptions>
+                    </el-collapse-item>
+                  </el-collapse>
+                </div>
+              </div>
+              <div class="timeline-line"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <el-empty v-else-if="selectedLifecycleTypes.length > 0"
+                  description="暂无相关生命周期数据" />
+      </div>
+    </el-drawer>
+
+    <!-- 设备详情对话框 -->
+    <el-dialog v-model="detailDialog" :title="`设备详情 - ${selectedMachine?.machineName || ''}`"
+               width="80%" top="5vh">
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="基本信息" name="basic">
+          <div class="detail-section">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-card>
+                  <template #header>
+                    <span class="card-header-title">设备基础信息</span>
+                  </template>
+                  <el-descriptions :column="1" border>
+                    <el-descriptions-item label="设备编号">{{ selectedMachine?.machineCode }}</el-descriptions-item>
+                    <el-descriptions-item label="设备名称">{{ selectedMachine?.machineName }}</el-descriptions-item>
+                    <el-descriptions-item label="设备类型">{{ getDeviceTypeName(selectedMachine?.deviceType) }}</el-descriptions-item>
+                    <el-descriptions-item label="设备位置">{{ selectedMachine?.machineLocation || '-' }}</el-descriptions-item>
+                    <el-descriptions-item label="设备状态">
+                      <el-tag :type="getStatusType(selectedMachine?.machineStatus)">
+                        {{ getStatusLabel(selectedMachine?.machineStatus) }}
+                      </el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="创建时间">{{ formatDateTime(selectedMachine?.createTime) }}</el-descriptions-item>
+                  </el-descriptions>
+                </el-card>
+              </el-col>
+              <el-col :span="12">
+                <el-card>
+                  <template #header>
+                    <span class="card-header-title">技术参数</span>
+                  </template>
+                  <el-table :data="technicalParams" max-height="300">
+                    <el-table-column prop="paramName" label="参数名称" />
+                    <el-table-column prop="paramValue" label="参数值" />
+                    <el-table-column prop="unit" label="单位" />
+                    <el-table-column prop="remark" label="备注" />
+                  </el-table>
+                </el-card>
+              </el-col>
+            </el-row>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="维护信息" name="maintenance">
+          <div class="detail-section maintenance-section">
+            <el-row :gutter="20">
+              <el-col :span="24">
+                <el-card class="maintenance-summary">
+                  <template #header>
+                    <span class="card-header-title">维护统计</span>
+                  </template>
+                  <el-row :gutter="20">
+                    <el-col :span="6">
+                      <el-statistic title="计划保养次数" :value="maintenanceStats.planned" />
+                    </el-col>
+                    <el-col :span="6">
+                      <el-statistic title="临时保养次数" :value="maintenanceStats.temporary" />
+                    </el-col>
+                    <el-col :span="6">
+                      <el-statistic title="平均保养间隔" :value="maintenanceStats.avgInterval" suffix="天" />
+                    </el-col>
+                    <el-col :span="6">
+                      <el-statistic title="下次保养时间" :value="maintenanceStats.nextDate || '未计划'" />
+                    </el-col>
+                  </el-row>
+                </el-card>
+              </el-col>
+              <el-col :span="24">
+                <el-card>
+                  <template #header>
+                    <span class="card-header-title">维护记录</span>
+                  </template>
+                  <el-table :data="maintenanceRecords" max-height="400">
+                    <el-table-column prop="maintCode" label="保养单号" />
+                    <el-table-column prop="maintType" label="保养类型" />
+                    <el-table-column prop="maintDate" label="保养日期" />
+                    <el-table-column prop="maintPerson" label="保养人员" />
+                    <el-table-column prop="maintContent" label="保养内容" show-overflow-tooltip />
+                    <el-table-column prop="maintResult" label="保养结果">
+                      <template #default="scope">
+                        <el-tag :type="scope.row.maintResult === '合格' ? 'success' : 'warning'">
+                          {{ scope.row.maintResult }}
+                        </el-tag>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </el-card>
+              </el-col>
+            </el-row>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="ProdBaseMachineInfo">
+import { ref, reactive, toRefs, getCurrentInstance, onMounted, onUnmounted, shallowRef, markRaw, watch } from 'vue';
+import { listDmsBaseMachineInfoIn, getDmsBaseMachineInfoList, getDmsBaseMachineInfo } from '@/api/dms/dmsBaseMachineInfo';
+import { listBaseDeviceTypeInDMS, getBaseDeviceTypeListInDMS } from '@/api/dms/baseDeviceType';
+import { listDmsBaseDevicePurchase, getDmsBaseDevicePurchaseList } from '@/api/dms/dmsBaseDevicePurchase';
+import { listDmsBaseDeviceInstall, getDmsBaseDeviceInstallList } from '@/api/dms/dmsBaseDeviceInstall';
+import { listDmsBaseDeviceDebugging, getDmsBaseDeviceDebuggingList } from '@/api/dms/dmsBaseDeviceDebugging';
+import { getDmsBaseDeviceDepreciationList } from '@/api/dms/dmsBaseDeviceDepreciation';
+import { getDmsBaseTransferInfoList } from '@/api/dms/dmsBaseTransferInfo';
+import { getDmsBillsFaultInstanceList } from '@/api/dms/dmsBillsFaultInstance';
+import { getDmsBillsMaintInstanceList } from '@/api/dms/dmsBillsMaintInstance';
+import { getDmsBillsLubeInstanceList } from '@/api/dms/dmsBillsLubeInstance';
+import { getDmsBillsInspectInstanceList } from '@/api/dms/dmsBillsInspectInstance';
+import { getDmsRepairInstanceList } from '@/api/dms/dmsRepairInstance';
+import { getDmsRecordShutDownList } from '@/api/dms/dmsRecordShutDown';
+import { getDmsBaseDeviceFilesList } from '@/api/dms/dmsBaseDeviceFiles';
+import { listDmsBaseDeviceBom } from '@/api/dms/dmsBaseDeviceBom';
+import { listDmsBaseDeviceSupplies } from '@/api/dms/dmsBaseDeviceSupplies';
+import { getBaseAlarmInfoList } from '@/api/dms/baseAlarmInfo';
+import { listDmsBaseSpecialdeviceParam, getDmsBaseSpecialdeviceParamList } from '@/api/dms/dmsBaseSpecialdeviceParam';
+
+// 图标导入
+import {
+  Monitor, Clock, Grid, List, Connection, Filter, ArrowUp, ArrowDown,
+  Location, Memo, Timer, InfoFilled, Calendar, DataAnalysis, TrendCharts,
+  Download, Search, Refresh, Document, Files, Box, Setting,
+  Tools, Notification, TurnOff, Warning, Money, Switch, View,
+  ShoppingCart, CircleCheck, Position, MagicStick
+} from '@element-plus/icons-vue';
+
+const { proxy } = getCurrentInstance();
+
+// TODO: 需要引入完整的字典数据
+const { machine_status, debug_status, fault_status, maint_level, maint_status } = toRefs(proxy.useDict(
+  'machine_status', 'debug_status', 'fault_status', 'maint_level', 'maint_status'
+));
+// TODO: 需要补充以下字典
+// const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
+// const { maint_type } = toRefs<any>(proxy?.useDict('maint_type'));
+// const { alarm_level } = toRefs<any>(proxy?.useDict('alarm_level'));
+// const { handle_status } = toRefs<any>(proxy?.useDict('handle_status'));
+// const { bills_status } = toRefs<any>(proxy?.useDict('bills_status'));
+// const { device_status } = toRefs<any>(proxy?.useDict('device_status'));
+
+// 响应式数据
+const loading = ref(false);
+const showSearch = ref(true);
+const machineList = ref([]);
+const total = ref(0);
+const viewMode = ref('grid');
+const selectedMachine = ref(null);
+const lifecycleDrawer = ref(false);
+const detailDialog = ref(false);
+const activeTab = ref('basic');
+const lifecycleLoading = ref(false);
+const selectedLifecycleTypes = ref([]);
+const lifecycleEvents = ref([]);
+const currentTime = ref('');
+const deviceTypes = ref([]);
+
+// 查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 12,
+  machineCode: undefined,
+  machineName: undefined,
+  machineLocation: undefined,
+  machineStatus: undefined,
+  deviceType: undefined
+});
+
+// 统计数据
+const statistics = ref([
+  {
+    type: 'total',
+    label: '设备总数',
+    value: 0,
+    unit: '台',
+    icon: markRaw(Monitor),
+    trend: '0,40 20,30 40,35 60,25 80,30 100,20'
+  },
+  {
+    type: 'running',
+    label: '运行中',
+    value: 0,
+    unit: '台',
+    icon: markRaw(Setting),
+    trend: '0,30 20,25 40,35 60,20 80,28 100,25'
+  },
+  {
+    type: 'maintenance',
+    label: '维护中',
+    value: 0,
+    unit: '台',
+    icon: markRaw(Tools),
+    trend: '0,20 20,25 40,22 60,28 80,25 100,30'
+  },
+  {
+    type: 'alarm',
+    label: '报警数',
+    value: 0,
+    unit: '个',
+    icon: markRaw(Warning),
+    trend: '0,35 20,30 40,25 60,30 80,20 100,25'
+  }
+]);
+
+// 生命周期类型配置
+const lifecycleTypes = ref([
+  {
+    label: '采购信息',
+    value: 'purchase',
+    icon: shallowRef(ShoppingCart),
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    count: 0
+  },
+  {
+    label: '安装调试',
+    value: 'install',
+    icon: shallowRef(Setting),
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+    count: 0
+  },
+  {
+    label: '维保记录',
+    value: 'maintenance',
+    icon: shallowRef(Tools),
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+    count: 0
+  },
+  {
+    label: '故障维修',
+    value: 'fault',
+    icon: shallowRef(Warning),
+    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+    count: 0
+  },
+  {
+    label: '巡检记录',
+    value: 'inspection',
+    icon: shallowRef(View),
+    gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
+    count: 0
+  },
+  {
+    label: '报警信息',
+    value: 'alarm',
+    icon: shallowRef(Notification),
+    gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
+    count: 0
+  }
+]);
+
+// 生命周期统计
+const lifecycleStats = ref({
+  faultCount: 0,
+  maintCount: 0,
+  alarmCount: 0
+});
+
+// 技术参数
+const technicalParams = ref([]);
+
+// 维护统计
+const maintenanceStats = ref({
+  planned: 0,
+  temporary: 0,
+  avgInterval: 0,
+  nextDate: null
+});
+
+// 维护记录
+const maintenanceRecords = ref([]);
+
+// 更新时间
+const updateCurrentTime = () => {
+  const now = new Date();
+  currentTime.value = now.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
+};
+
+// 获取设备列表
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await listDmsBaseMachineInfoIn(queryParams.value);
+    machineList.value = res.rows || [];
+    total.value = res.total || 0;
+
+    updateStatistics();
+  } catch (error) {
+    console.error('获取设备列表失败:', error);
+    machineList.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 获取设备类型列表
+const getDeviceTypes = async () => {
+  try {
+    const res = await getBaseDeviceTypeListInDMS({ pageNum: 1, pageSize: 100 });
+    deviceTypes.value = res.data;
+  } catch (error) {
+    console.error('获取设备类型失败:', error);
+  }
+};
+
+// 更新统计数据
+const updateStatistics = async () => {
+  const machines = machineList.value;
+  statistics.value[0].value = machines.length;
+  statistics.value[1].value = machines.filter(m => m.machineStatus === '1').length;
+  statistics.value[2].value = machines.filter(m => m.machineStatus === '2').length;
+
+  // TODO: 需要统计接口 - 获取各类统计数据
+  // 建议创建统一的统计接口：getDmsDeviceStatistics()
+  // 返回：{ totalCount, runningCount, maintenanceCount, alarmCount, faultCount }
+
+  // 从真实API获取报警数
+  try {
+    const alarmRes = await getBaseAlarmInfoList({
+      alarmStatus: '0' // 未处理的报警
+    });
+    statistics.value[3].value = alarmRes.rows?.length || 0;
+  } catch (error) {
+    console.error('获取报警统计失败:', error);
+    statistics.value[3].value = 0;
+  }
+};
+
+// 获取设备图标
+const getMachineIcon = (type) => {
+  const iconMap = {
+    '1': markRaw(Monitor),
+    '2': markRaw(Setting),
+    '3': markRaw(Tools),
+    '4': markRaw(Tools)
+  };
+  return iconMap[type] || markRaw(Monitor);
+};
+
+// 获取状态类型
+const getStatusType = (status) => {
+  const typeMap = {
+    '0': 'danger',
+    '1': 'success',
+    '2': 'warning',
+    '3': 'info'
+  };
+  return typeMap[status] || 'info';
+};
+
+// 获取状态标签
+const getStatusLabel = (status) => {
+  if (!machine_status.value) return status;
+  const dict = machine_status.value.find(d => d.value === status);
+  return dict?.label || status;
+};
+
+// 获取设备类型名称
+const getDeviceTypeName = (typeId) => {
+  const type = deviceTypes.value.find(t => t.deviceTypeId === typeId);
+  return type?.deviceTypeName || '-';
+};
+
+// 表格行样式
+const tableRowClassName = ({ row }) => {
+  if (row.machineStatus === '0') return 'danger-row';
+  if (row.machineStatus === '2') return 'warning-row';
+  return '';
+};
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return null;
+  return proxy.parseTime(date, '{y}-{m}-{d}');
+};
+
+// 格式化日期时间
+const formatDateTime = (date) => {
+  if (!date) return null;
+  return proxy.parseTime(date, '{y}-{m}-{d} {h}:{i}');
+};
+
+// 计算运行天数
+const calculateRunDays = (startDate) => {
+  if (!startDate) return 0;
+  const start = new Date(startDate);
+  const now = new Date();
+  const diff = now - start;
+  return Math.floor(diff / (1000 * 60 * 60 * 24));
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  proxy.resetForm("queryFormRef");
+  handleQuery();
+};
+
+// 选择设备
+const selectMachine = (machine) => {
+  selectedMachine.value = machine;
+};
+
+// 切换生命周期类型
+const toggleLifecycleType = (type) => {
+  const index = selectedLifecycleTypes.value.indexOf(type);
+  if (index > -1) {
+    selectedLifecycleTypes.value.splice(index, 1);
+  } else {
+    selectedLifecycleTypes.value.push(type);
+  }
+  loadLifecycleData();
+};
+
+// 查看生命周期
+const viewLifecycle = async (machine) => {
+  selectedMachine.value = machine;
+  lifecycleDrawer.value = true;
+  selectedLifecycleTypes.value = [];
+  lifecycleEvents.value = [];
+
+  // 预加载统计数据
+  await loadLifecycleStats();
+};
+
+// 加载生命周期统计
+const loadLifecycleStats = async () => {
+  if (!selectedMachine.value) return;
+
+  try {
+    const machineId = selectedMachine.value.machineId;
+
+    // 并行请求统计数据
+    const [
+      purchaseRes,
+      installRes,
+      debugRes,
+      faultRes,
+      maintRes,
+      inspectRes,
+      alarmRes
+    ] = await Promise.all([
+      getDmsBaseDevicePurchaseList({ machineId }).catch(() => ({ rows: [] })),
+      getDmsBaseDeviceInstallList({ machineId }).catch(() => ({ rows: [] })),
+      getDmsBaseDeviceDebuggingList({ machineId }).catch(() => ({ rows: [] })),
+      getDmsBillsFaultInstanceList({ machineId }).catch(() => ({ rows: [] })),
+      getDmsBillsMaintInstanceList({ machineId }).catch(() => ({ rows: [] })),
+      getDmsBillsInspectInstanceList({ machineId }).catch(() => ({ rows: [] })),
+      getBaseAlarmInfoList({ machineId }).catch(() => ({ rows: [] }))
+    ]);
+
+    lifecycleStats.value = {
+      faultCount: faultRes.rows?.length || 0,
+      maintCount: maintRes.rows?.length || 0,
+      alarmCount: alarmRes.rows?.length || 0
+    };
+
+    // 更新类型计数
+    lifecycleTypes.value.forEach(type => {
+      switch (type.value) {
+        case 'purchase':
+          type.count = purchaseRes.rows?.length || 0;
+          break;
+        case 'install':
+          type.count = (installRes.rows?.length || 0) + (debugRes.rows?.length || 0);
+          break;
+        case 'maintenance':
+          type.count = lifecycleStats.value.maintCount;
+          break;
+        case 'fault':
+          type.count = lifecycleStats.value.faultCount;
+          break;
+        case 'inspection':
+          type.count = inspectRes.rows?.length || 0;
+          break;
+        case 'alarm':
+          type.count = lifecycleStats.value.alarmCount;
+          break;
+        default:
+          type.count = 0;
+      }
+    });
+  } catch (error) {
+    console.error('加载生命周期统计失败:', error);
+  }
+};
+
+// 加载生命周期数据
+const loadLifecycleData = async () => {
+  if (!selectedMachine.value || selectedLifecycleTypes.value.length === 0) {
+    lifecycleEvents.value = [];
+    return;
+  }
+
+  lifecycleLoading.value = true;
+  const events = [];
+  const machineId = selectedMachine.value.machineId;
+
+  try {
+    const promises = selectedLifecycleTypes.value.map(async (type) => {
+      switch (type) {
+        case 'purchase':
+          try {
+            const purchaseRes = await getDmsBaseDevicePurchaseList({ machineId:machineId });
+            if (purchaseRes.data && purchaseRes.data.length > 0) {
+              purchaseRes.data.forEach(purchase => {
+                events.push({
+                  id: `purchase-${purchase.devicePurchaseId}`,
+                  type: 'purchase',
+                  title: '设备采购',
+                  description: `采购人: ${purchase.purchasePerson || '-'}`,
+                  time: purchase.purchaseTime,
+                  icon: markRaw(ShoppingCart),
+                  color: '#667eea',
+                  tags: ['采购'],
+                  details: {
+                    '计划编号': purchase.workOrder,
+                    '采购地点': purchase.purchasePosition,
+                    '采购价格': purchase.purchasePrice || '-',
+                    '备注': purchase.remark || '-'
+                  }
+                });
+              });
+            }
+          } catch (error) {
+            console.error('获取采购信息失败:', error);
+          }
+          break;
+
+        case 'install':
+          try {
+            const installRes = await getDmsBaseDeviceInstallList({ machineId:machineId });
+            if (installRes.data && installRes.data.length > 0) {
+              installRes.data.forEach(install => {
+                events.push({
+                  id: `install-${install.deviceInstallId}`,
+                  type: 'install',
+                  title: '设备安装',
+                  description: `安装人员: ${install.installPerson || '-'}`,
+                  time: install.installTime,
+                  icon: markRaw(Setting),
+                  color: '#f093fb',
+                  tags: ['安装'],
+                  details: {
+                    '安装地点': install.installPosition,
+                    // TODO: 使用字典 - '状态': getActiveFlagLabel(install.activeFlag)
+                    '状态': install.activeFlag === '1' ? '有效' : '无效'
+                  }
+                });
+              });
+            }
+
+            const debugRes = await getDmsBaseDeviceDebuggingList({ machineId:machineId });
+            if (debugRes.data && debugRes.data.length > 0) {
+              debugRes.data.forEach(debug => {
+                events.push({
+                  id: `debug-${debug.deviceDebuggingId}`,
+                  type: 'debugging',
+                  title: '设备调试',
+                  description: `调试人员: ${debug.debugPerson || '-'}`,
+                  time: debug.debugTime,
+                  icon: markRaw(Tools),
+                  color: '#f5576c',
+                  tags: ['调试'],
+                  details: {
+                    '调试单号': debug.workOrder,
+                    '调试状态': getDebugStatusLabel(debug.status),
+                    '备注': debug.remark || '-'
+                  }
+                });
+              });
+            }
+          } catch (error) {
+            console.error('获取安装调试信息失败:', error);
+          }
+          break;
+
+        case 'maintenance':
+          try {
+            const res = await getDmsBillsMaintInstanceList({ machineId:machineId });
+            if (res.data && res.data.length > 0) {
+              res.data.forEach(maint => {
+                events.push({
+                  id: `maint-${maint.maintInstanceId}`,
+                  type: 'maintenance',
+                  title: '保养记录',
+                  description: `保养单号: ${maint.billsMaintCode}`,
+                  time: maint.planBeginTime,
+                  icon: markRaw(Tools),
+                  color: '#4facfe',
+                  tags: ['保养', getMaintLevelLabel(maint.maintLevel)],
+                  details: {
+                    '保养级别': getMaintLevelLabel(maint.maintLevel),
+                    '保养负责人': maint.maintSupervisor,
+                    '保养状态': getMaintStatusLabel(maint.maintStatus),
+                    // TODO: 使用字典 - '保养类型': getMaintTypeLabel(maint.maintType)
+                    '计划结束时间': formatDateTime(maint.planEndTime)
+                  }
+                });
+              });
+            }
+          } catch (error) {
+            console.error('获取保养记录失败:', error);
+          }
+          break;
+
+        case 'fault':
+          try {
+            const res = await getDmsBillsFaultInstanceList({ machineId:machineId });
+            if (res.data && res.data.length > 0) {
+              res.data.forEach(fault => {
+                events.push({
+                  id: `fault-${fault.repairInstanceId}`,
+                  type: 'fault',
+                  title: '故障报修',
+                  description: `故障单号: ${fault.billsFaultCode}`,
+                  time: fault.applyTime,
+                  icon: markRaw(Warning),
+                  color: '#fa709a',
+                  tags: ['故障', getFaultStatusLabel(fault.billsStatus)],
+                  details: {
+                    '申请人': fault.applyUser,
+                    '工单状态': getFaultStatusLabel(fault.billsStatus),
+                    '故障描述': fault.faultDescription || '-',
+                    '备注': fault.remark || '-'
+                  }
+                });
+              });
+            }
+          } catch (error) {
+            console.error('获取故障记录失败:', error);
+          }
+          break;
+
+        case 'inspection':
+          try {
+            const res = await getDmsBillsInspectInstanceList({ machineId:machineId });
+            if (res.data && res.data.length > 0) {
+              res.data.forEach(inspect => {
+                events.push({
+                  id: `inspect-${inspect.inspectInstanceId}`,
+                  type: 'inspection',
+                  title: '巡检记录',
+                  description: `巡检单号: ${inspect.billsInspectCode}`,
+                  time: inspect.createTime,
+                  icon: markRaw(View),
+                  color: '#30cfd0',
+                  tags: ['巡检'],
+                  details: {
+                    '巡检人': inspect.createBy,
+                    '巡检结果': inspect.inspectResult || '-'
+                  }
+                });
+              });
+            }
+          } catch (error) {
+            console.error('获取巡检记录失败:', error);
+          }
+          break;
+
+        case 'alarm':
+          try {
+            const res = await getBaseAlarmInfoList({ machineId:machineId  });
+            if (res.data && res.data.length > 0) {
+              res.data.slice(0, 10).forEach(alarm => {
+                events.push({
+                  id: `alarm-${alarm.alarmId}`,
+                  type: 'alarm',
+                  title: '设备报警',
+                  description: `报警类型: ${alarm.alarmTypeName || '-'}`,
+                  time: alarm.alarmTime,
+                  icon: markRaw(Notification),
+                  color: '#a8edea',
+                  tags: ['报警', alarm.alarmLevelName],
+                  details: {
+                    // TODO: 使用字典 - '报警级别': getAlarmLevelLabel(alarm.alarmLevel)
+                    '报警级别': alarm.alarmLevelName,
+                    '报警内容': alarm.alarmContent,
+                    // TODO: 使用字典 - '处理状态': getHandleStatusLabel(alarm.handleStatus)
+                    '处理状态': alarm.handleStatus === '1' ? '已处理' : '未处理'
+                  }
+                });
+              });
+            }
+          } catch (error) {
+            console.error('获取报警信息失败:', error);
+          }
+          break;
+      }
+    });
+
+    await Promise.all(promises);
+
+    // 按时间排序
+    lifecycleEvents.value = events.sort((a, b) => {
+      const timeA = new Date(a.time).getTime();
+      const timeB = new Date(b.time).getTime();
+      return timeB - timeA;
+    });
+  } finally {
+    lifecycleLoading.value = false;
+  }
+};
+
+// 状态标签辅助函数
+const getDebugStatusLabel = (status) => {
+  if (!debug_status.value) return status;
+  const dict = debug_status.value.find(d => d.value === status);
+  return dict?.label || status;
+};
+
+const getFaultStatusLabel = (status) => {
+  if (!fault_status.value) return status;
+  const dict = fault_status.value.find(d => d.value === status);
+  return dict?.label || status;
+};
+
+const getMaintLevelLabel = (level) => {
+  if (!maint_level.value) return level;
+  const dict = maint_level.value.find(d => d.value === level);
+  return dict?.label || level;
+};
+
+const getMaintStatusLabel = (status) => {
+  if (!maint_status.value) return status;
+  const dict = maint_status.value.find(d => d.value === status);
+  return dict?.label || status;
+};
+
+// TODO: 需要补充更多字典标签函数
+// const getActiveFlagLabel = (flag) => {
+//   if (!active_flag.value) return flag;
+//   const dict = active_flag.value.find(d => d.value === flag);
+//   return dict?.label || flag;
+// };
+//
+// const getMaintTypeLabel = (type) => {
+//   if (!maint_type.value) return type;
+//   const dict = maint_type.value.find(d => d.value === type);
+//   return dict?.label || type;
+// };
+//
+// const getAlarmLevelLabel = (level) => {
+//   if (!alarm_level.value) return level;
+//   const dict = alarm_level.value.find(d => d.value === level);
+//   return dict?.label || level;
+// };
+//
+// const getHandleStatusLabel = (status) => {
+//   if (!handle_status.value) return status;
+//   const dict = handle_status.value.find(d => d.value === status);
+//   return dict?.label || status;
+// };
+
+// 查看详情
+const viewDetails = async (machine) => {
+  selectedMachine.value = machine;
+  detailDialog.value = true;
+  activeTab.value = 'basic';
+
+  // 加载详情数据
+  await Promise.all([
+    loadTechnicalParams(machine.machineId),
+    loadMaintenanceStats(machine.machineId)
+  ]);
+};
+
+// 导出数据
+const exportData = () => {
+  proxy.$modal.msgInfo('导出功能开发中...');
+};
+
+// 定时更新
+let timer = null;
+onMounted(() => {
+  getList();
+  getDeviceTypes();
+  updateCurrentTime();
+  timer = setInterval(updateCurrentTime, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+
+// 监听生命周期类型变化，自动加载数据
+watch(selectedLifecycleTypes, (newTypes) => {
+  if (newTypes.length > 0 && selectedMachine.value) {
+    loadLifecycleData();
+  } else {
+    lifecycleEvents.value = [];
+  }
+}, { deep: true });
+
+// 监听选中设备变化，重置生命周期选择和数据
+watch(selectedMachine, (newMachine) => {
+  if (newMachine) {
+    selectedLifecycleTypes.value = [];
+    lifecycleEvents.value = [];
+    loadLifecycleTypes();
+  }
+});
+
+// 加载技术参数
+const loadTechnicalParams = async (machineId) => {
+  try {
+    const paramRes = await getDmsBaseSpecialdeviceParamList({ machineId });
+
+    technicalParams.value = paramRes.data?.map(param => ({
+      paramName: param.paramName,
+      paramValue: param.paramValue,
+      unit: param.paramUnit || '-',
+      remark: param.remark || '-'
+    })) || [];
+  } catch (error) {
+    console.error('获取技术参数失败:', error);
+    technicalParams.value = [];
+  }
+};
+
+// 加载维护统计
+const loadMaintenanceStats = async (machineId) => {
+  try {
+    // TODO: 需要统计接口 - 获取设备维护统计
+    // 建议创建接口：getDmsDeviceMaintenanceStats(machineId)
+    // 返回：{ plannedCount, temporaryCount, avgInterval, nextMaintenanceDate }
+
+    // 获取保养记录统计
+    const maintRes = await getDmsBillsMaintInstanceList({ machineId });
+    const maintRecords = maintRes.data || [];
+
+    // 计算统计数据
+    const planned = maintRecords.filter(r => r.maintType === '1').length;
+    const temporary = maintRecords.filter(r => r.maintType === '2').length;
+
+    // 计算平均间隔
+    let avgInterval = 0;
+    if (maintRecords.length > 1) {
+      const sortedRecords = maintRecords
+        .filter(r => r.planBeginTime)
+        .sort((a, b) => new Date(a.planBeginTime).getTime() - new Date(b.planBeginTime).getTime());
+
+      if (sortedRecords.length > 1) {
+        const totalDays = (new Date(sortedRecords[sortedRecords.length - 1].planBeginTime).getTime() -
+                          new Date(sortedRecords[0].planBeginTime).getTime()) / (1000 * 60 * 60 * 24);
+        avgInterval = Math.round(totalDays / (sortedRecords.length - 1));
+      }
+    }
+
+    // 查找下次计划保养时间
+    const futureMaint = maintRecords.find(r =>
+      r.planBeginTime && new Date(r.planBeginTime) > new Date()
+    );
+
+    maintenanceStats.value = {
+      planned,
+      temporary,
+      avgInterval,
+      nextDate: futureMaint ? formatDate(futureMaint.planBeginTime) : null
+    };
+
+    // 加载维护记录详情
+    maintenanceRecords.value = maintRecords.slice(0, 10).map(record => ({
+      maintCode: record.billsMaintCode,
+      // TODO: 使用字典 - maintType: getMaintTypeLabel(record.maintType)
+      maintType: record.maintType === '1' ? '计划保养' : '临时保养',
+      maintDate: formatDate(record.planBeginTime),
+      maintPerson: record.maintSupervisor || '-',
+      maintContent: record.maintContent || '-',
+      // TODO: 使用字典 - maintResult: getMaintStatusLabel(record.maintStatus)
+      maintResult: record.maintStatus === '3' ? '合格' : record.maintStatus === '2' ? '待验收' : '进行中'
+    }));
+
+  } catch (error) {
+    console.error('获取维护统计失败:', error);
+    maintenanceStats.value = { planned: 0, temporary: 0, avgInterval: 0, nextDate: null };
+    maintenanceRecords.value = [];
+  }
+};
+
+// 加载生命周期类型统计
+const loadLifecycleTypes = async () => {
+  if (!selectedMachine.value) return;
+  
+  const machineId = selectedMachine.value.machineId;
+  
+  try {
+    // 并行获取各类型数据的数量，使用不分页的API
+    const [
+      purchaseRes,
+      installRes, 
+      debugRes,
+      maintRes,
+      faultRes,
+      inspectRes,
+      alarmRes
+    ] = await Promise.all([
+      getDmsBaseDevicePurchaseList({ machineId }).catch(() => ({ data: [] })),
+      getDmsBaseDeviceInstallList({ machineId }).catch(() => ({ data: [] })),
+      getDmsBaseDeviceDebuggingList({ machineId }).catch(() => ({ data: [] })),
+      getDmsBillsMaintInstanceList({ machineId }).catch(() => ({ data: [] })),
+      getDmsBillsFaultInstanceList({ machineId }).catch(() => ({ data: [] })),
+      getDmsBillsInspectInstanceList({ machineId }).catch(() => ({ data: [] })),
+      getBaseAlarmInfoList({ machineId }).catch(() => ({ data: [] }))
+    ]);
+    
+    // 更新类型计数
+    lifecycleTypes.value.forEach(type => {
+      switch (type.value) {
+        case 'purchase':
+          type.count = purchaseRes.data?.length || 0;
+          break;
+        case 'install':
+          type.count = (installRes.data?.length || 0) + (debugRes.data?.length || 0);
+          break;
+        case 'maintenance':
+          type.count = maintRes.data?.length || 0;
+          break;
+        case 'fault':
+          type.count = faultRes.data?.length || 0;
+          break;
+        case 'inspection':
+          type.count = inspectRes.data?.length || 0;
+          break;
+        case 'alarm':
+          type.count = Math.min(alarmRes.data?.length || 0, 10); // 最多显示10条报警
+          break;
+      }
+    });
+    
+    // 同时更新生命周期统计
+    lifecycleStats.value = {
+      faultCount: faultRes.data?.length || 0,
+      maintCount: maintRes.data?.length || 0,
+      alarmCount: alarmRes.data?.length || 0
+    };
+  } catch (error) {
+    console.error('加载生命周期统计失败:', error);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dms-machine-ledger {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+  padding: 6px;
+}
+
+.factory-bg-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  z-index: 0;
+  
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.top-info-panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  .panel-left {
+    .page-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #2c3e50;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    
+    .page-subtitle {
+      font-size: 11px;
+      color: #7f8c8d;
+      margin: 1px 0 0 0;
+    }
+  }
+  
+  .panel-right {
+    .current-time {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      font-size: 12px;
+      color: #34495e;
+      font-weight: 500;
+    }
+  }
+}
+
+.statistics-dashboard {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+  
+  .stat-item {
+    position: relative;
+    background: #fff;
+    border-radius: 6px;
+    padding: 12px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    overflow: hidden;
+    
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+    }
+    
+    .stat-bg-effect {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      opacity: 0.1;
+      transform: translate(25px, -25px);
+    }
+    
+    .stat-inner {
+      position: relative;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    
+    .stat-icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 6px;
+      color: #fff;
+    }
+    
+    .stat-info {
+      flex: 1;
+      
+      .stat-number {
+        display: flex;
+        align-items: baseline;
+        gap: 3px;
+        
+        .value-animate {
+          font-size: 20px;
+          font-weight: 700;
+          color: #2c3e50;
+        }
+        
+        .unit {
+          font-size: 11px;
+          color: #7f8c8d;
+          font-weight: 500;
+        }
+      }
+      
+      .stat-title {
+        font-size: 12px;
+        color: #7f8c8d;
+        margin-top: 1px;
+      }
+    }
+    
+    .stat-chart {
+      position: absolute;
+      bottom: 6px;
+      right: 10px;
+      width: 50px;
+      height: 20px;
+      opacity: 0.3;
+      
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    
+    &.stat-total {
+      .stat-icon-wrapper { background: linear-gradient(45deg, #667eea, #764ba2); }
+      .stat-bg-effect { background: #667eea; }
+    }
+    
+    &.stat-running {
+      .stat-icon-wrapper { background: linear-gradient(45deg, #56ab2f, #a8e6cf); }
+      .stat-bg-effect { background: #56ab2f; }
+    }
+    
+    &.stat-maintenance {
+      .stat-icon-wrapper { background: linear-gradient(45deg, #f093fb, #f5576c); }
+      .stat-bg-effect { background: #f093fb; }
+    }
+    
+    &.stat-alarm {
+      .stat-icon-wrapper { background: linear-gradient(45deg, #fa709a, #fee140); }
+      .stat-bg-effect { background: #fa709a; }
+    }
+  }
+}
+
+.action-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  
+  .toolbar-left, .toolbar-right {
+    display: flex;
+    gap: 6px;
+  }
+}
+
+.search-filter-card {
+  margin-bottom: 8px;
+  
+  .filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .filter-title {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-weight: 600;
+    }
+  }
+  
+  :deep(.el-card__body) {
+    padding: 12px;
+  }
+  
+  .el-form {
+    .el-form-item {
+      margin-bottom: 8px;
+    }
+  }
+}
+
+.main-content {
+  .grid-view {
+    .machine-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+    }
+    
+    .machine-card-wrapper {
+      cursor: pointer;
+      
+      .machine-card {
+        background: #fff;
+        border-radius: 4px;
+        padding: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        position: relative;
+        
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        
+        &.selected {
+          border: 2px solid #409EFF;
+          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+        }
+        
+        .status-indicator {
+          position: absolute;
+          top: 6px;
+          right: 6px;
+          
+          .status-dot {
+            display: inline-block;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+          }
+          
+          &.status-0 .status-dot { background: #f56c6c; }
+          &.status-1 .status-dot { background: #67c23a; }
+          &.status-2 .status-dot { background: #e6a23c; }
+          &.status-3 .status-dot { background: #909399; }
+        }
+        
+        .machine-visual {
+          text-align: center;
+          margin-bottom: 6px;
+          
+          .machine-icon-bg {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            border-radius: 6px;
+            color: #fff;
+            margin-bottom: 4px;
+          }
+          
+          .machine-number {
+            font-size: 11px;
+            font-weight: 600;
+            color: #2c3e50;
+          }
+        }
+        
+        .machine-details {
+          margin-bottom: 6px;
+          
+          .machine-name {
+            font-size: 13px;
+            font-weight: 600;
+            color: #2c3e50;
+            margin: 0 0 4px 0;
+            text-align: center;
+            line-height: 1.2;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          
+          .machine-meta {
+            .meta-item {
+              display: flex;
+              align-items: center;
+              gap: 2px;
+              font-size: 10px;
+              color: #7f8c8d;
+              margin-bottom: 2px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+          }
+        }
+        
+        .quick-actions {
+          display: flex;
+          gap: 4px;
+          justify-content: center;
+          
+          .el-button {
+            padding: 2px 6px;
+            font-size: 10px;
+            min-height: 20px;
+          }
+        }
+      }
+    }
+  }
+  
+  .list-view {
+    .status-cell {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      
+      .status-badge {
+        display: inline-block;
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        
+        &.status-0 { background: #f56c6c; }
+        &.status-1 { background: #67c23a; }
+        &.status-2 { background: #e6a23c; }
+        &.status-3 { background: #909399; }
+      }
+    }
+    
+    .date-text {
+      font-size: 12px;
+      color: #606266;
+    }
+    
+    :deep(.danger-row) {
+      background-color: rgba(245, 108, 108, 0.05);
+    }
+    
+    :deep(.warning-row) {
+      background-color: rgba(230, 162, 60, 0.05);
+    }
+  }
+}
+
+.lifecycle-drawer {
+  :deep(.el-drawer__body) {
+    padding: 12px;
+  }
+}
+
+.lifecycle-container {
+  .device-overview-card {
+    background: #fff;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 12px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    
+    .overview-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      
+      .device-avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        background: linear-gradient(45deg, #667eea, #764ba2);
+        border-radius: 10px;
+        color: #fff;
+      }
+      
+      .device-basic {
+        h2 {
+          margin: 0 0 3px 0;
+          font-size: 16px;
+          color: #2c3e50;
+        }
+        
+        p {
+          margin: 0;
+          font-size: 12px;
+          color: #7f8c8d;
+        }
+      }
+    }
+    
+    .overview-stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+      gap: 10px;
+      
+      .stat {
+        text-align: center;
+        
+        .stat-label {
+          display: block;
+          font-size: 11px;
+          color: #7f8c8d;
+          margin-bottom: 3px;
+        }
+        
+        .stat-value {
+          display: block;
+          font-size: 18px;
+          font-weight: 600;
+          color: #2c3e50;
+        }
+      }
+    }
+  }
+  
+  .lifecycle-type-selector {
+    margin-bottom: 12px;
+    
+    h3 {
+      margin: 0 0 10px 0;
+      font-size: 15px;
+      color: #2c3e50;
+    }
+    
+    .type-cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+      gap: 6px;
+      
+      .type-card {
+        background: #fff;
+        border: 2px solid #e1e6f0;
+        border-radius: 6px;
+        padding: 10px;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+        
+        &:hover {
+          border-color: #409EFF;
+        }
+        
+        &.active {
+          border-color: #409EFF;
+          background: #f0f9ff;
+        }
+        
+        .type-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 30px;
+          height: 30px;
+          border-radius: 6px;
+          margin-bottom: 5px;
+          color: #fff;
+        }
+        
+        .type-name {
+          display: block;
+          font-size: 11px;
+          color: #2c3e50;
+          font-weight: 500;
+        }
+        
+        .type-count {
+          position: absolute;
+          top: -3px;
+          right: -3px;
+          background: #409EFF;
+          color: #fff;
+          border-radius: 8px;
+          padding: 1px 5px;
+          font-size: 9px;
+          min-width: 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  
+  .lifecycle-timeline-container {
+    h3 {
+      margin: 0 0 10px 0;
+      font-size: 15px;
+      color: #2c3e50;
+    }
+    
+    .timeline-wrapper {
+      position: relative;
+      
+      .timeline-item {
+        position: relative;
+        padding-left: 35px;
+        padding-bottom: 16px;
+        
+        &:last-child {
+          .timeline-line {
+            display: none;
+          }
+        }
+        
+        .timeline-marker {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          z-index: 2;
+        }
+        
+        .timeline-content {
+          background: #fff;
+          border-radius: 6px;
+          padding: 10px;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+          
+          .event-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 5px;
+            
+            h4 {
+              margin: 0;
+              font-size: 13px;
+              color: #2c3e50;
+            }
+            
+            .event-time {
+              font-size: 11px;
+              color: #7f8c8d;
+            }
+          }
+          
+          .event-description {
+            font-size: 12px;
+            color: #606266;
+            margin: 0 0 6px 0;
+          }
+          
+          .event-tags {
+            margin-bottom: 6px;
+            
+            .el-tag {
+              margin-right: 3px;
+              margin-bottom: 3px;
+            }
+          }
+        }
+        
+        .timeline-line {
+          position: absolute;
+          left: 13px;
+          top: 28px;
+          width: 2px;
+          height: 100%;
+          background: #e1e6f0;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}
+
+.detail-section {
+  .card-header-title {
+    font-weight: 600;
+    color: #2c3e50;
+  }
+  
+  .maintenance-section {
+    .maintenance-summary {
+      margin-bottom: 12px;
+    }
+  }
+}
+
+.filter-btn-primary {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border: none;
+  
+  &:hover {
+    background: linear-gradient(45deg, #5a6fd8, #6a4190);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 currentColor;
+  }
+  
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px transparent;
+  }
+  
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+</style>