guest/steel_prices_service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify：优化

Browse Source
This commit is contained in:
ECRZ
2026-01-07 10:13:21 +08:00
parent da4a055c1c
commit 60b5aba7f8
10 changed files with 3148 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

411
Sale/pages/trend/CLAUDE.md Normal file
View File

@@ -0,0 +1,411 @@
[根目录](../../CLAUDE.md) > [pages](../) > **trend**
---
# pages/trend - 价格趋势页
> **模块状态**: ✅ 已完成
>
> **最后更新**: 2026-01-07 09:16:32
---
## 变更记录 (Changelog)
### 2026-01-07 09:16:32
- 重新生成模块文档
- 补充 ECharts 图表集成说明
- 添加数据流与状态管理说明
### 2026-01-06
- 完成价格趋势页面开发
- 集成 ECharts 图表组件
- 实现多维度筛选功能
- 添加统计数据展示
---
## 模块职责
**trend** 是价格趋势分析页面，负责：
1. **趋势图表展示**：使用 ECharts 绘制价格走势折线图
2. **多维度筛选**：支持地区、材质、时间范围的组合查询
3. **数据统计**：显示起始价格、最新价格、价格变动
4. **可视化交互**：平滑曲线、区域填充、响应式图表
---
## 入口与启动
### 页面路径
- **注册路径**：`pages/trend/trend`（在 `app.json` 中注册）
- **物理路径**：`pages/trend/trend.js`
- **访问方式**：通过 TabBar 导航或页面跳转
### 页面配置
```json
{
"navigationBarTitleText": "价格趋势",
"usingComponents": {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
```
### 生命周期
```javascript
Page({
onLoad(options) { }, // 页面加载，初始化图表
onReady() { }, // 页面初次渲染完成
onShow() { } // 页面显示
})
```
---
## 对外接口
### 页面跳转接口
```javascript
// 从价格查询页跳转
wx.navigateTo({
url: '/pages/trend/trend'
})
```
### TabBar 切换
```javascript
onTabChange(e) {
const tabIndex = parseInt(e.detail.value)
if (tabIndex === 0) {
wx.navigateTo({ url: '/pages/index/index' })
}
}
```
---
## 关键依赖与配置
### 依赖文件
| 文件 | 用途 |
|------|------|
| `trend.js` | 页面逻辑（270 行） |
| `trend.wxml` | 页面结构 |
| `trend.wxss` | 页面样式 |
| `trend.json` | 页面配置 |
### 外部依赖
- **API 封装**：`utils/request.js`
- **图表组件**：`components/ec-canvas/ec-canvas`
- **图表库**：`components/ec-canvas/echarts.js`
### 配置项
```javascript
// 地区选项
regions: ['全部', '昆明', '玉溪', '楚雄', '大理', ...]
// 材质选项
materials: ['全部', 'HPB300', 'HRB400', 'HRB400E', ...]
// 时间范围选项
dayRanges: [
{ label: '最近 7 天', value: 7 },
{ label: '最近 15 天', value: 15 },
{ label: '最近 30 天', value: 30 },
...
]
```
---
## 数据模型
### 页面数据结构
```javascript
data: {
// 筛选条件
regions: [], // 地区选项
materials: [], // 材质选项
dayRanges: [], // 时间范围选项
selectedRegionIndex: 0,
selectedMaterialIndex: 0,
selectedDayIndex: 2,
// 状态
loading: false, // 加载状态
searched: false, // 是否已搜索
hasData: false, // 是否有数据
// 图表实例
ec: {
onInit: null // 图表初始化函数
},
// 趋势数据
trendData: {
dates: [], // 日期数组
prices: [] // 价格数组
},
// 统计数据
startPrice: '-', // 起始价格
endPrice: '-', // 最新价格
priceChange: '-' // 价格变动
}
```
### API 返回数据格式
```javascript
// GET /api/prices/trend
[
{ date: '2026-01-01', avgPrice: 3850 },
{ date: '2026-01-02', avgPrice: 3860 },
...
]
```
---
## 核心功能实现
### 1. 图表初始化
```javascript
initChart(canvas, width, height, res) {
const chartInstance = echarts.init(canvas)
const option = {
xAxis: {
type: 'category',
data: this.data.trendData.dates
},
yAxis: {
type: 'value'
},
series: [{
data: this.data.trendData.prices,
type: 'line',
smooth: true, // 平滑曲线
areaStyle: {} // 区域填充
}]
}
chartInstance.setOption(option)
return chartInstance
}
```
### 2. 趋势查询
```javascript
async onQuery() {
const { region, material, days } = this.getQueryParams()
this.setData({ loading: true })
try {
const result = await api.getPriceTrend({ region, material, days })
const dates = result.data.map(item => {
const date = new Date(item.date)
return `${date.getMonth() + 1}/${date.getDate()}`
})
const prices = result.data.map(item => item.avgPrice)
// 计算统计
const startPrice = prices[0]
const endPrice = prices[prices.length - 1]
const priceChange = endPrice - startPrice
this.setData({
trendData: { dates, prices },
startPrice,
endPrice,
priceChange,
hasData: true,
loading: false
})
} catch (error) {
// 错误处理
}
}
```
### 3. TabBar 导航
```javascript
onTabChange(e) {
const value = parseInt(e.detail.value)
if (value === 0) {
// 跳转到价格查询页
wx.navigateTo({
url: '/pages/index/index'
})
}
}
```
---
## UI 组件结构
### WXML 结构
```xml
<view class="container">
<!-- 筛选条件区域 -->
<view class="filter-section">
<!-- 地区选择 -->
<!-- 材质选择 -->
<!-- 时间范围选择 -->
<!-- 查询按钮 -->
</view>
<!-- 图表展示区域 -->
<view class="chart-section" wx:if="{{hasData}}">
<ec-canvas ec="{{ ec }}"></ec-canvas>
<!-- 统计摘要 -->
<view class="stats-summary">
<view class="stat-item">起始价格</view>
<view class="stat-item">最新价格</view>
<view class="stat-item">价格变动</view>
</view>
</view>
<!-- 欢迎提示 -->
<view class="welcome-section" wx:if="{{!hasData && !loading}}">
<!-- 引导文案 -->
</view>
<!-- TabBar -->
<t-tab-bar value="1" bindchange="onTabChange">
<t-tab-bar-item value="0" label="价格查询" />
<t-tab-bar-item value="1" label="价格趋势" />
</t-tab-bar>
</view>
```
---
## 测试与质量
### 测试覆盖
- **手动测试**：已在微信开发者工具中验证
- **图表渲染**：ECharts 图表正常显示
- **数据统计**：价格变动计算正确
### 测试要点
1. **筛选条件**：验证地区、材质、时间范围选择
2. **图表渲染**：验证折线图、坐标轴、数据点
3. **统计数据**：验证起始价、最新价、变动值
4. **空状态**：无数据时提示友好
5. **加载状态**：查询中显示加载提示
6. **错误处理**：网络异常时提示用户
### 已知问题
- 图表在真机上可能存在性能问题（数据量大时）
- 时间范围选择器不支持自定义日期
---
## 常见问题 (FAQ)
### Q: 图表不显示怎么办？
**A**: 检查以下几点：
1. 确保 `ec-canvas` 组件已正确引入
2. 检查 `trendData` 数据是否已更新
3. 确认图表初始化函数 `initChart` 被正确调用
4. 查看控制台是否有错误信息
### Q: 如何修改图表样式？
**A**: 编辑 `initChart` 方法中的 `option` 配置：
```javascript
const option = {
xAxis: { ... },
yAxis: { ... },
series: [{
smooth: true, // 平滑曲线
lineStyle: {
color: '#1890ff', // 线条颜色
width: 3 // 线条宽度
},
areaStyle: {
color: 'rgba(24, 144, 255, 0.3)' // 填充颜色
}
}]
}
```
### Q: 如何添加更多的时间范围选项？
**A**: 编辑 `dayRanges` 数组：
```javascript
dayRanges: [
{ label: '最近 7 天', value: 7 },
{ label: '最近 30 天', value: 30 },
{ label: '最近 90 天', value: 90 },
{ label: '最近 180 天', value: 180 }, // 新增
{ label: '最近 365 天', value: 365 } // 新增
]
```
### Q: 如何导出图表数据？
**A**: 添加导出按钮：
```javascript
onExport() {
const { trendData } = this.data
const csvContent = this.convertToCSV(trendData)
wx.showToast({
title: '导出功能开发中',
icon: 'none'
})
}
```
---
## 相关文件清单
```
pages/trend/
├── trend.js # 页面逻辑（270 行）
├── trend.wxml # 页面结构（128 行）
├── trend.wxss # 页面样式
├── trend.json # 页面配置
└── CLAUDE.md # 本文档
```
---
## 下一步建议
### 功能增强
1. **数据交互**
- 点击数据点显示详细信息
- 十字准星显示数值
- 缩放功能查看细节
2. **图表增强**
- 支持多条折线对比
- 添加 K 线图
- 添加标记点（最高价、最低价）
3. **数据导出**
- 导出图表为图片
- 导出数据为 Excel
### 性能优化
1. **虚拟滚动**：大量数据时的性能优化
2. **懒加载**：图表按需加载
3. **数据缓存**：减少重复请求
---
**模块状态**: ✅ 已完成
**优先级**: 高（核心功能）
**预估工作量**: 已完成
**相关模块**: [pages/index](../index/CLAUDE.md) | [components/ec-canvas](../../components/ec-canvas/CLAUDE.md) | [utils/request](../../utils/request.md)