# 折旧计算 - 查看详情弹窗功能指南

## 📋 功能概述

为农资农具管理的折旧计算tab开发了完整的"查看详情"弹窗功能，提供资产的全面信息展示和可视化分析。

---

## ✨ 功能特性

### 1️⃣ **设备基本信息**
- 📌 设备编号（绿色标签图标）
- 📦 设备名称（蓝色包裹图标）
- 📅 购买日期（紫色日历图标）
- 💰 购买原值（橙色金额图标，大号字体）

### 2️⃣ **折旧信息概览**
左侧信息：
- 折旧方法（徽章显示）
- 折旧年限
- 已使用时间
- 累计工作量（仅工作量法显示）

右侧信息：
- 年折旧额
- 累计折旧
- 资产净值（大号字体）
- 残值（5%）

### 3️⃣ **折旧进度分析**
包含三个进度条：
- **使用年限进度**：已使用时间 / 总折旧年限
- **折旧率**：累计折旧 / 购买原值
- **工作量完成度**：（仅工作量法）已工作时间 / 预计总工作量

每个进度条都显示：
- 进度百分比
- 可视化进度条
- 具体数值对比

### 4️⃣ **资产价值对比图表**
水平条形图展示：
- 购买原值（蓝色）
- 累计折旧（红色）
- 当前净值（绿色）
- 预计残值（灰色）

### 5️⃣ **预计报废信息**
- 剩余使用年限
- 预计报废日期
- 预计残值

### 6️⃣ **折旧计算公式说明**

**直线法：**
```
年折旧额 = 原值 ÷ 预计使用年限
月折旧额 = 年折旧额 ÷ 12
```

**工作量法：**
```
单位折旧额 = 原值 ÷ 预计总工作量
累计折旧 = 单位折旧额 × 累计工作量
```

---

## 🎨 界面设计

### 配色方案
| 模块 | 背景色 | 边框色 | 主色调 |
|------|-------|-------|-------|
| 基本信息 | 绿色渐变 | 绿色 | 绿色系 |
| 折旧信息 | 白色 | 灰色 | 多彩卡片 |
| 进度分析 | 白色 | 灰色 | 蓝/橙/紫 |
| 价值对比 | 白色 | 灰色 | 蓝/红/绿/灰 |
| 报废信息 | 灰色渐变 | 灰色 | 灰色系 |
| 公式说明 | 蓝色渐变 | 蓝色 | 蓝色系 |

### 图标系统
- 📊 BarChart3：价值对比
- 📈 TrendingUp：进度分析
- 🗄️ Archive：报废信息
- 💻 Cpu：计算公式
- 👁️ Eye：查看详情
- 📦 Box：基本信息
- 🧮 Calculator：折旧信息

---

## 🔄 操作流程

```
1. 在折旧计算表格中点击"查看详情"按钮（眼睛图标）
   ↓
2. 弹出查看详情弹窗
   ↓
3. 浏览完整的资产信息
   - 基本信息
   - 折旧概览
   - 进度分析
   - 价值对比图表
   - 报废信息
   - 计算公式
   ↓
4. 可选操作：
   a) 点击"关闭"按钮返回列表
   b) 点击"查看折旧明细"按钮切换到折旧明细弹窗
```

---

## 📱 弹窗规格

| 属性 | 值 |
|------|-----|
| 最大宽度 | 4xl (56rem) |
| 最大高度 | 90vh |
| 滚动方式 | 垂直滚动 |
| 响应式 | 支持移动端和桌面端 |

---

## 🎯 核心功能

### 智能计算
- ✅ 自动计算使用年限进度
- ✅ 自动计算折旧率
- ✅ 自动计算工作量完成度（工作量法）
- ✅ 自动计算剩余年限
- ✅ 自动计算预计报废日期

### 数据展示
- ✅ 金额格式化显示（千分位）
- ✅ 百分比精确到小数点后1位
- ✅ 日期本地化显示（中文）
- ✅ 条件渲染（根据折旧方法显示不同内容）

### 可视化
- ✅ 进度条组件
- ✅ 条形图组件
- ✅ 渐变背景
- ✅ 卡片式布局

---

## 🔗 弹窗联动

### 从查看详情切换到折旧明细
点击"查看折旧明细"按钮：
```typescript
onClick={() => {
  setShowDepreciationViewDialog(false);
  setShowDepreciationDetailDialog(true);
}}
```

这样用户可以在两个弹窗之间无缝切换：
- **查看详情**：概览性信息，快速了解资产状态
- **折旧明细**：详细的折旧计算过程和历史记录

---

## 📊 数据结构

弹窗使用的数据字段：
```typescript
interface DepreciationRecord {
  equipmentCode: string;        // 设备编号
  equipmentName: string;         // 设备名称
  purchaseDate: string;          // 购买日期
  purchasePrice: number;         // 购买原值
  depreciationMethod: string;    // 折旧方法
  depreciationYears: number;     // 折旧年限
  usedMonths: number;            // 已使用月数
  usageHours?: number;           // 累计工作量（工作量法）
  totalWorkload?: number;        // 预计总工作量（工作量法）
  annualDepreciation: number;    // 年折旧额
  accumulatedDepreciation: number; // 累计折旧
  currentValue: number;          // 资产净值
  depreciationRate: number;      // 折旧率
}
```

---

## 🎨 按钮对比

### 操作按钮变化

| 按钮 | 图标 | 颜色 | 功能 |
|------|------|------|------|
| **查看详情** | Eye | 灰色边框 → 打开查看详情弹窗 | 新增完整功能 ✨ |
| **折旧明细** | FileText | 蓝色实心 → 打开折旧明细弹窗 | 已有功能 |

### 弹窗底部按钮

**查看详情弹窗：**
- 关闭（灰色边框）
- 查看折旧明细（蓝色实心）

**折旧明细弹窗：**
- 关闭（灰色边框）
- 导出明细（蓝色实心）

---

## 💡 使用建议

### 最佳实践
1. **快速查看**：使用"查看详情"快速了解资产整体状况
2. **详细分析**：需要查看月度明细时切换到"折旧明细"
3. **对比分析**：利用价值对比图表直观了解资产折旧情况
4. **预测规划**：查看预计报废信息，提前规划资产更新

### 适用场景
- ✅ 资产盘点时查看资产状态
- ✅ 财务审计时核对折旧数据
- ✅ 制定采购计划时评估资产状况
- ✅ 向管理层汇报时展示资产价值

---

## 🔍 功能亮点

### 1. **卡片化设计**
每个信息模块都使用独立卡片，层次清晰，易于阅读。

### 2. **图标辅助**
每个字段都配有相应图标，提升视觉识别度。

### 3. **进度可视化**
三个进度条直观展示折旧进度，一目了然。

### 4. **智能计算**
所有衍生数据自动计算，无需手动输入。

### 5. **双向跳转**
查看详情和折旧明细可以互相跳转，操作便捷。

### 6. **响应式布局**
支持桌面端和移动端，自适应不同屏幕。

---

## 📝 更新日志

### v1.0.0 - 2025-01-22
- ✅ 开发完整的查看详情弹窗
- ✅ 实现设备基本信息展示
- ✅ 实现折旧信息概览
- ✅ 实现折旧进度分析（3个进度条）
- ✅ 实现资产价值对比图表
- ✅ 实现预计报废信息
- ✅ 实现折旧计算公式说明
- ✅ 实现与折旧明细弹窗的联动
- ✅ 优化界面设计和用户体验

---

## 🎯 总结

查看详情弹窗提供了资产信息的全面展示，通过卡片化设计、进度条、图表等多种形式，让用户能够快速、直观地了解资产的当前状态和折旧情况。配合折旧明细弹窗，形成了完整的资产折旧管理功能闭环。

**核心价值：**
- 📊 信息全面：涵盖资产的所有关键信息
- 🎨 界面美观：渐变色、图标、卡片式设计
- 📈 数据可视化：进度条、图表直观展示
- 🔄 操作便捷：与折旧明细弹窗无缝切换
- 💡 智能计算：自动计算各项衍生指标

---

**开发完成时间：** 2025年1月22日  
**功能状态：** ✅ 已完成并测试
