开发历史页

历史页以图表的形式展示一周内空气质量指标值。在本页面，考虑显示效果，使用多个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. }