

# 盈亏大屏页面 [ProfitAndLoss.vue](mdc:TonyMask/src/pages/ProfitAndLoss.vue)
- 与后端进行 盈亏分析 数据的请求为 [profit_loss.ts](mdc:TonyMask/src/api/profit_loss.ts)
- 请求选定的时间，默认为东八区的时间，起始时间修正为00:00:00，终止时间修正为 23:59:59

## 数据接口及格式
- 数据接口 /api/profit-loss/aggregation
- 数据格式为 [profit_and_loss.go](mdc:TonyProfitLoss/models/profit_and_loss.go)
- 数据统一不显示单位，不显示美元标识符

## 页面设计
- 按照下面的顺序依次呈现

### 币种选择
- 币种选择栏 下拉框点击之后，币种图标出现在选择框中，具有删除按键
- 下拉框出现，各个币种的图标及名称，点击的方式选取需要计算盈亏的币种
- 选择框右边出现计算按钮

### 总体盈亏情况 

- 使用绿色代表盈亏大于0，红色代表盈亏小于0

- 展示已实现盈亏，未实现盈亏，总盈亏

- 确保下列柱状图的纵坐标具有可变性，符合人类的观看习惯，纵坐标轴只显示整数数值，纵坐标可能出现负数
- 按照柱状图，按照从大到小的顺序，展示查询币种的收益率
- 按照柱状图，按照从大到小的顺序，展示查询币种的年化收益率
- 按照柱状图，按照从大到小的顺序，展示查询币种的总盈亏数据
- 按照柱状图，按照从大到小的顺序，展示查询币种的已实现盈亏数据
- 按照柱状图，按照从大到小的顺序，展示查询币种的未实现盈亏数据


<!-- ### 单一币种盈亏情况
- 页面下方使用横条展示 币种图标及名称 点击即可跳转单一币种盈亏分析页面 [SingleProfitAndLoss.vue](mdc:TonyMask/src/pages/SingleProfitAndLoss.vue)
- 数据来源接口 /api/profit-loss/aggregation 中包括此部分数据
- 跳转时，附带单一币种的盈亏数据，传递给 单一币种盈亏分析页面 -->