movecar_wx/package-setup/pages/electricity/index.wxml

<view class="container">
  <!-- 筛选栏 -->
  <view class="filter-bar">
    <view class="filter_left">
      <view class="filter-item {{currentType === 'day' ? 'active' : ''}}" bindtap="changeType" data-type="day">日</view>
      <view class="filter-item {{currentType === 'month' ? 'active' : ''}}" bindtap="changeType" data-type="month">月</view>
      <view class="filter-item {{currentType === 'year' ? 'active' : ''}}" bindtap="changeType" data-type="year">年</view>
    </view>

    <!-- 日期选择器触发按钮 -->
    <view>
      <picker mode="date" fields="{{currentType}}" value="{{selectedDate}}" start="2020-01-01" end="{{today}}" bindchange="onDateChange">
        <button class="date-btn" bindtap="openDatePicker">{{showDate}}</button>
      </picker>
    </view>
  </view>

  <!-- 统计卡片 -->
  <view class="stat-card">
    <view class="stat-item" wx:if="{{operationRole==5}}">
      <text class="stat-label">总充电量</text>
      <text class="stat-value">{{statData.chargeActual}} <text style="font-size: 24rpx;">kWh</text> </text>
    </view>
    <view class="stat-item" wx:if="{{operationRole==6}}">
      <text class="stat-label">总放电量</text>
      <text class="stat-value">{{statData.dischargeActual}} <text style="font-size: 24rpx;">kWh</text> </text>
    </view>
  </view>

  <!-- 新增：折线图容器 -->
  <view class="chart-container">
    <view class="chart-title">{{currentType === 'day' ? '今日' : (currentType === 'month' ? '本月' : '本年')}}充电趋势图</view>
    <canvas canvas-id="chargeDischargeChart" disable-scroll="true" class="chart"></canvas>
  </view>
  <view class="empty-tip" wx:if="{{dataList.length === 0}}">
    暂无{{currentType === 'day' ? '今日' : (currentType === 'month' ? '本月' : '本年')}}{{operationRole === 5?'充':'放'}}电数据
  </view>

  <!-- 数据列表 -->
  <view class="data-list">
    <view class="list-content">
      <view class="list-header">
        <view class="list_title1">{{listHeader}}</view>
        <view class="list_title1" wx:if="{{operationRole==5}}">充电量<text style="font-size: 18rpx;margin-top: 10rpx;">/kWh</text></view>
        <view class="list_title2" wx:if="{{operationRole==6}}">放电量<text style="font-size: 18rpx;margin-top: 10rpx;">/kWh</text></view>
      </view>
      <block wx:for="{{dataList}}" wx:key="index">
        <view class="list-item">
          <view class="list_title3">{{item.time}}</view>
          <view class="list_title3" wx:if="{{operationRole==5}}">{{item.chargeActual}}</view>
          <view class="list_title4" wx:if="{{operationRole==6}}">{{item.dischargeActual}}</view>
        </view>
      </block>
    </view>
  </view>
</view>