www-huanghe/modules/statisticsReport/views/tongluYearReport.html

<ion-view style="background-color:#fff;" view-title="统计报表详情详情">
  <div class="bar bar-header" style="background-image: none;background-color: #3B8BD0;">
    <div class="button button-icon icon  pus_blue" ng-click="goback()"></div>
    <button class="button button-icon  icon goback whiteGoBack noneContent" ng-click="goback()"></button>
    <h1 class="bar_title" style="color: #fff" ng-bind="title"></h1>
  </div>
  <ion-scroll direction="x" scrollbar-x="false" class="visitModule_header">
    <span ng-repeat="s in toplist track by $index" ng-class="{'arrange_borderBottom' :s.selected,'col-demo':true,'main-select':true}" ng-click="changeSelected($index)" ng-bind="s.label"></span>
  </ion-scroll>
  <ion-content ng-class="{'has-header commonScrollForm':true,'iosTopFormScroll':isIos}" scroll="true" delegate-handle="mainScroll">
    <div ng-if="datausername != null && datausername != ''" style="text-align:left">
      <span class="title-data">数据填报人：</span><span ng-bind="datausername"></span>
    </div>
    <div ng-if="datauserphone != null && datauserphone != ''" style="text-align:left">
      <span class="title-data">填报人联系电话：</span><span ng-bind="datauserphone"></span>
    </div>
    <div ng-if="datacreatetime != null && datacreatetime != ''" style="text-align:left">
      <span class="title-data">填报时间：</span><span ng-bind="datacreatetime"></span>
    </div>
    <div style="margin-bottom:10px;">
      <span class="title-data">选择时间</span>
      <select id = "year" class="select-style" ng-model="select.timeOfYear">
        <option ng-repeat="y in year" value="{{y.value}}">{{y.label}}</option>
      </select>
      <button class="button button-small button-outline button-dark"  ng-click="getSelectionData()">搜索</button>
    </div>
    <div ng-repeat="list in targetList track by $index" ng-class="{'target-box':true,'to-top':list.top}"  id={{"item"+$index}}>
      <div class="target-body">
        <div ng-repeat="item in list.items" ng-if="item.value!=null"   ng-class="{'target-item':true,'item-app':app}">
          <div ng-bind="item.title" style="text-align:center"></div>
          <div class="body-value" ng-bind="item.value"></div>
          <div>
            <span>上年同期</span>
            <span ng-bind="item.lastYear" class="last-year"></span>
            <i style="color:red" class="icon ion-arrow-up-c" ng-show="item.rate>0"></i>
            <i style="color:green" class="icon ion-arrow-down-c" ng-show="item.rate<0"></i>
            <!--<span>{{item.value>item.lastYear?((item.value-item.lastYear)/item.value*100).toFixed(0):((item.lastYear-item.value)/item.value*100).toFixed(0)}}%</span>-->
            <!--<span>{{item.rate>0?item.rate:(-item.rate)}}%</span>-->
            <span ng-show="item.lastYear">{{item.rate}}%</span>
          </div>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>
<style>
  .target-title{
    align-items: center;
    padding:5px;
    background-color:#F9F9F9;
    border:1px solid #eee;
    border-bottom:none;
    /*display:flex;*/
    /*flex-wrap: wrap;*/

  }
  .select-time{
    float:right;
  }
  .target-title::after{
    display:block;
    content:'';
    clear:both;
  }
  .select-style{
    border-radius:3px;
    padding:3px 8px;
  }
  .target-body{
    display:flex;
    flex-wrap: wrap;
    border:1px solid #eee;
  }
  .target-body>div{
    border-left:1px solid #eee;
    border-bottom:1px solid #eee;
  }
  .target-item{
    padding:10px;
    display:flex;
    flex-direction:column;
    align-items: center;
    width:20%;
  }
  .item-app{
    width:50%;
  }
  .body-value{
    font-size:0.5rem;
    font-weight:bold;
    margin:5px;
  }
  .last-year{
    color:#62ABEC;
  }
  .title-data{
    display:inline-block;
    padding:5px;
    width:40%;
    text-align:right;
  }
</style>