开发历史页

历史页以图表的形式展示一周内空气质量指标值。在本页面，考虑显示效果，使用多个div替代chart组件来实现图表功能，详细代码如下：

history.hml

1. <list style="width:321px;height:321px;top:67px;left:320px;">
2. <list-item class="info-list-item">
3. <div style="width:321px;height:80px;flex-direction:column;align-items:flex-start;">
4. <text class="div-info-historical-data">{{historicalData}}</text>
5. </div>
6. </list-item>
7. <!--使用for属性来动态生成listitem，datasets对应history.js中的datasets变量，根据变量数组中元素个数来创建组件-->
8. <list-item style="width:321px;height:160px;"for="{{datasets}}">
9. <div style="width:321px;height:160px;flex-direction:column;">
10. <div style="width:321px;height:2px;background-color:#f5fffa;"></div>
11. <!--$item是datasets中的子元素-->
12. <text class="gas-name">{{$item}}</text>
13. <div style="width:321px;height:100px;margin-top:4px;justify-content:flex-start;align-items:flex-end;">
14. <!--示例中的颜色为固定值，实际开发中可以考虑动态绑定-->
15. <div style="width:21px;margin-left:21px;height:10px;backgroundColor:#00ff00;"></div>
16. <div style="width:21px;margin-left:21px;height:20px;;backgroundColor:#00ff00;"></div>
17. <div style="width:21px;margin-left:21px;height:90px;backgroundColor:#ff0000;"></div>
18. <div style="width:21px;margin-left:21px;height:80px;backgroundColor:#ff0000;"></div>
19. <div style="width:21px;margin-left:21px;height:60px;backgroundColor:#999999;"></div>
20. <div style="width:21px;margin-left:21px;height:50px;backgroundColor:#999999;"></div>
21. <div style="width:21px;margin-left:21px;height:100px;backgroundColor:#ff0000;"></div>
22. </div>
23. <!--表格中的X轴下标采用图片-->
24. <image style="width:321px;height:20px;"src="common/week.png"></image>
25. </div>
26. </list-item>
27. <list-item class="info-list-item">
28. <!--返回详情页按钮-->
29. <input type="button"value="Back"style="border-width:2px;border-color:#90ee90;width:256px;height:60px;margin-left: 30px;"onclick="backDetail"/>
30. </list-item>
31. </list>

history.css

1. .div-info-location{
2. color:#dcdcdc;
3. width:321px;
4. height:40px;
5. }
6. .div-info-historical-data{
7. color:#f5fffa;
8. width:321px;
9. height:40px;
10. }
11. .gas-name{
12. color:#f0ffff;
13. text-align:right;
14. width:321px;
15. height:32px;
16. }
17. .info-list-item{
18. width:321px;
19. height:80px;
20. }

history.js

1. import router from'@system.router'
2. module.exports = {
3. data: {
4. historicalData:"historicalData",
5. datasets:["CO","O3","NO2","NO","PM25","SO2"]
6. },
7. onInit(){
8. //国际化信息处理
9. this.historicalData = this.$t(this.historicalData);
10. },
11. backDetail(){
12. router.replace({  //返回详情页
13. uri:'pages/detail/detail'
14. });
15. }
16. }