cdht-app-h5/miniprogram/pages/statement/reportStatement/reportStatement.wxml

<!--pages/statement/reportStatement/reportStatement.wxml-->
<view class="container">
  <van-tabs color="#4381FC" bind:click="tabOnClick">
  
    <van-tab title="统计图表">
      <view class="search-container">
        <view class="row">
          <view class="select">
            <picker 
              value="{{dateOptionIndex}}" 
              range-key="name" 
              range="{{dateOptions}}"
              bindchange="bindPickerType" >
              <view class="picker project-select">
                {{dateOptions[dateOptionIndex].name}}
              </view>
            </picker>
          </view>
          <view class="select" wx:if="{{dateOptionIndex == 0 || dateOptionIndex == 1}}">
            <picker 
              fields="{{dateOptions[dateOptionIndex].dateType}}" 
              mode="date" 
              value="{{date}}" 
              bindchange="bindPickerDate" >
              <view class="picker project-select">
                {{currentDateStr}}
              </view>
            </picker>
          </view>
          <view class="select" wx:if="{{dateOptionIndex == 2}}" catch:tap="showDateSeasonSelect">
            {{dateSeason}}
          </view>
        </view>
      </view>
      <view class="content">
        <view class="item" wx:for="{{chartList}}" wx:key="index">
          <view class="top">
            <view class="label">
              <image src="../../../images/icon_maintain1.png" mode=""/>
              <view class="title">{{item.type}}总数</view>
            </view>
            <view class="val">{{item.totalCount}}</view>
          </view>
          <view class="chart">
            <view class="bg">
              <view class="line" wx:for="{{item.scale}}" wx:key="index" wx:for-item="itemS">
                <view class="num">{{itemS}}</view>
              </view>
            </view>
            <view class="item-num" wx:for="{{item.list}}" wx:key="index" wx:for-item="itemP">
              <view class="label">{{itemP.projectName}}</view>
              <view class="num">
                <view class="line" style="width:{{itemP.count / item.totalCount * 100 + '%'}}"></view>
                <view class="count">{{itemP.count}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="no-data" wx:if="{{chartList.length == 0}}">
          <van-empty description="无数据" />
        </view>
      </view>
    </van-tab>
    <van-tab title="数据列表">
      <view class="search-container">
        <view class="row">
          <view class="select">
            <picker 
              value="{{dateOptionIndex}}" 
              range-key="name" 
              range="{{dateOptions}}"
              bindchange="bindPickerType" >
              <view class="picker project-select">
                {{dateOptions[dateOptionIndex].name}}
              </view>
            </picker>
          </view>
          <view class="select" wx:if="{{dateOptionIndex == 0 || dateOptionIndex == 1}}">
            <picker 
              fields="{{dateOptions[dateOptionIndex].dateType}}" 
              mode="date" 
              value="{{date}}" 
              bindchange="bindPickerDate" >
              <view class="picker project-select">
                {{currentDateStr}}
              </view>
            </picker>
          </view>
          <view class="select" wx:if="{{dateOptionIndex == 2}}" catch:tap="showDateSeasonSelect">
            {{dateSeason}}
          </view>
        </view>
      </view>
      <view class="table-content">
        <view class="header">
          <view class="th" catch:tap="filterShow">
            项目
            <view class="icon">
              <image src="../../../images/icon_filter2.png" mode=""/>
            </view>
          </view>
          <view class="th" catch:tap="filterShow">
            车型
            <view class="icon">
              <image src="../../../images/icon_filter2.png" mode=""/>
            </view>
          </view>
          <view class="th">维修</view>
          <view class="th">保养</view>
          <view class="th">事故</view>
          <view class="th">违章</view>
        </view>
        <view class="list">
          <view class="row" wx:for="{{tableData}}" wx:key="index">
            <view class="td">{{item.projectName}}</view>
            <view class="td">{{item.vehicleType_dictText}}</view>
            <view class="td">{{item.repairCount}}</view>
            <view class="td">{{item.upKeepCount}}</view>
            <view class="td">{{item.accidentCount}}</view>
            <view class="td">{{item.violationCount}}</view>
          </view>
          <view class="no-data" wx:if="{{tableData.length == 0}}">
            <van-empty description="无数据" />
          </view>
        </view>
      </view>
    </van-tab>
  </van-tabs>
  
  <!-- 日期范围选择 -->
  <van-popup
    show="{{ showDateSeasonSelect }}"
    position="bottom"
    custom-style="height: 50%;"
    bind:click-overlay="hideDate"
  >
    <view style="background: #fff;border-radius: 4px 4px 0 0;overflow: hidden;">
      <view class="date-btn-box">
        <view class="btn btn-cancel" bindtap="hideDate">取消</view>
        <view class="btn btn-confirm" bindtap="changeDate">确定</view>
      </view>
      <view class="picker-box">
        <picker-view data-key="dateRang" value="{{dateValue}}" indicator-style="height: 50px;" style="width: 100%; height: 500rpx;" bindchange="selectDate">
          <picker-view-column>
            <view style="line-height: 50px; text-align: center;" wx:for="{{dateList.years}}" wx:key="index">{{item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 50px; text-align: center;" wx:for="{{dateList.season}}" wx:key="index">{{item}}季</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </van-popup>
  <!-- 表格数据筛选 -->
  
  <van-popup 
    show="{{ showMoreSearch }}"
    position="top"
    bind:close="filterHide">
    <view class="more-search">
      <view class="row">
        <view class="label">按项目筛选</view>
        <view class="select-content">
          <view class="project-select">
            <picker bindchange="bindPickerProject" value="{{selectProjectIndex}}" range="{{projectOptions}}">
              <view class="picker project-select">
                {{projectOptions[selectProjectIndex]}}
              </view>
            </picker>
          </view>
        </view>
      </view>
      <view class="row">
        <view class="label">按车型筛选</view>
        <view class="select-content">
          <view class="project-select">
            <picker bindchange="bindPickerVehicleType" value="{{selectVehicleTypeIndex}}" range="{{vehicleTypeOptions}}">
              <view class="picker project-select">
                {{vehicleTypeOptions[selectVehicleTypeIndex]}}
              </view>
            </picker>
          </view>
        </view>
      </view>
      <view class="row">
        <view class="btn-content">
          <view class="btn" catchtap="restList">重置</view>
          <view class="btn btn-confirm" catchtap="filterTableList">确定</view>
        </view>
      </view>
    </view>
  </van-popup> 
</view>