RailwayTwo/mini/pages/data-center/index.wxml

<!--pages/data/index.wxml-->
<view class="sg-container sg-index-bg">
  <view class="sg-flex sg-pad sg-align-center sg-index-bg">
    <view class="sg-white-bg sg-pad-sm sg-flex-grow sg-gray-color sg-flex sg-align-center" bindtap="switchShow"
      data-show="{{true}}" data-name="projectShow">
      <view class="sg-flex-grow">{{'选择查看项目'}}</view>
      <van-icon name="arrow-down"></van-icon>
    </view>
    <van-icon name="search" class="sg-icon sg-white sg-pad-sm" style="padding-right: 0" bindtap="getData"></van-icon>
  </view>
  <van-popup show="{{ projectShow }}" position="bottom" custom-style="height: 100%;">
    <view>
      <view class="sg-flex sg-align-center sg-space-between sg-fix-top sg-white-bg sg-pad sg-white-bg"
        style="box-sizing: border-box;z-index:100">
        <view></view>
        <view class="sg-bold">选择项目</view>
        <view class="sg-gray-color" bindtap="closeProject" data-show="{{false}}" data-name="projectShow">确定</view>
      </view>
      <view class="sg-list sg-pad" style="margin-top: 80rpx">
        <view wx:for="{{projects}}" wx:key="index"
          class="sg-flex sg-align-center sg-space-between sg-pad-tb-sm sg-bottom-border {{item.checked ? 'sg-index-color' : ''}}"
          bindtap="switchCheck" data-index="{{index}}">
          <view>{{item.name}}</view>
          <van-icon name="{{item.checked ? 'passed' : 'circle'}}" class="sg-icon" />
        </view>
      </view>
    </view>
  </van-popup>
  <view class="sg-white sg-bold sg-flex sg-align-center sg-space-around">
    <view class="sg-center">
      <view class="sg-font-lg">{{total_money}}</view>
      <view class="sg-font-xs sg-pad-tb-sm">项目累计消费</view>
    </view>
    <view class="sg-center">
      <view class="sg-font-lg">{{month_money}}</view>
      <view class="sg-font-xs sg-pad-tb-sm">当月累计消费</view>
    </view>
    <view class="sg-center">
      <picker mode="date" value="{{date}}" start="{{min_date}}" end="{{max_date}}" bindchange="onChange"
        data-name="date" fields="month">
        <view class="picker">
          <view>时间选择</view>
          <view class="sg-font-small sg-pad-tb-sm sg-flex sg-align-center">
            <text>{{date}}</text>
            <van-icon name="arrow-down" class="sg-icon"></van-icon>
          </view>
        </view>
      </picker>
    </view>
  </view>
  <view class="sg-white-bg sg-chart-box" wx:if="{{!projectShow && !dateShow}}">
    <block wx:if="{{project_names}}">
      <view class="sg-flex sg-pad sg-align-center sg-space-between">
        <view>
          <picker bindchange="onChange" value="{{chartIndex}}" range="{{charts}}" range-key="name"
            data-name="chartIndex" class="sg-flex-grow">
            <view class="picker sg-flex sg-align-center">
              <text>{{chartIndex >= 0 ? charts[chartIndex].name : '显示类型'}}</text>
              <van-icon name="arrow-down"></van-icon>
            </view>
          </picker>
        </view>
        <view class="sg-flex sg-align-center">
          <!-- <view class="sg-radio-group sg-flex sg-align-center sg-fon-small sg-margin-right sg-light-gray-bg">
            <view class="sg-radio {{index == dateIndex ? 'sg-shadow sg-selected sg-index-bg sg-white sg-bold' : ''}}"
              wx:for="{{dateTypes}}" wx:key="index" data-index="{{index}}" data-name="dateIndex" bindtap="radioChange">
              {{item.name}}</view>
          </view> -->
          <van-icon name="notes-o" class="sg-icon-lg sg-margin-right" bindtap="switchShow" data-name="dateShow"
            data-show="{{true}}"></van-icon>
          <van-icon name="filter-o" class="sg-icon-lg" bindtap="navigate" data-url="/pages/filter-data/index">
          </van-icon>
        </view>
      </view>
      <view class="sg-chart">
        <block wx:if="{{chartIndex == 3}}">
          <detail-table data="{{detail_data}}"></detail-table>
        </block>
        <block wx:else>
          <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
        </block>
      </view>
    </block>
    <block wx:else>
      <view class="sg-center sg-text-center sg-gray-color sg-font-small sg-pad">
        <view>筛选条件暂无</view>
        <view>请选择需要查看的项目后</view>
        <view>数据才可进行查看</view>
      </view>
    </block>
  </view>
  <van-dialog use-slot title="选择日期范围" confirm-button-color="#5693FC" show="{{ dateShow }}" bind:confirm="switchShow" data-name="dateShow"
    data-show="{{false}}">
    <view class="sg-pad">
      <view class="sg-flex sg-align-center sg-pad-tb-sm sg-space-between">
        <view>日期范围</view>
        <view class="sg-flex sg-align-center sg-space-between">
          <picker mode="date" value="{{start_date}}" start="{{min_date}}" end="{{end_date}}"
            fields="{{dateIndex == 0 ? 'month' : 'day'}}" bindchange="onChange" data-name="start_date">
            <view class="picker">
              {{start_date}}
            </view>
          </picker>
          <view class="sg-bold sg-gray-color" style="margin: 0 15rpx">至</view>
          <picker mode="date" value="{{end_date}}" start="{{min_date}}" end="{{end_date}}"
            fields="{{dateIndex == 0 ? 'month' : 'day'}}" bindchange="onChange" data-name="end_date">
            <view class="picker">
              {{end_date}}
            </view>
          </picker>
        </view>
      </view>
      <view class="sg-flex sg-align-center sg-pad-tb-sm sg-space-between sg-space-between">
        <view class="sg-margin-right">按年按月</view>
        <view>
          <view class="sg-radio-group sg-flex sg-align-center sg-fon-small sg-margin-right sg-light-gray-bg">
            <view class="sg-radio {{index == dateIndex ? 'sg-shadow sg-selected sg-index-bg sg-white sg-bold' : ''}}"
              wx:for="{{dateTypes}}" wx:key="index" data-index="{{index}}" data-name="dateIndex" bindtap="radioChange">
              {{item.name}}</view>
          </view>
        </view>
      </view>
    </view>
  </van-dialog>
</view>