75 lines
3.0 KiB
Plaintext
75 lines
3.0 KiB
Plaintext
<!-- 数据趋势 -->
|
|
<view class="container">
|
|
<!-- 时间范围选择 -->
|
|
<view class="card card-filter">
|
|
<view class="mode-tabs">
|
|
<view class="mode-tab {{viewMode === 'month' ? 'mode-tab--active' : ''}}" bindtap="onSwitchMode" data-mode="month">按月</view>
|
|
<view class="mode-tab {{viewMode === 'year' ? 'mode-tab--active' : ''}}" bindtap="onSwitchMode" data-mode="year">按年</view>
|
|
<view class="mode-tab {{viewMode === 'custom' ? 'mode-tab--active' : ''}}" bindtap="onSwitchMode" data-mode="custom">自定义</view>
|
|
</view>
|
|
|
|
<!-- 按月选择 -->
|
|
<view wx:if="{{viewMode === 'month'}}" class="filter-row">
|
|
<picker mode="date" fields="month" value="{{filterMonth}}" bindchange="onMonthChange">
|
|
<view class="picker-display">
|
|
<text>{{filterMonth}}</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 按年选择 -->
|
|
<view wx:if="{{viewMode === 'year'}}" class="filter-row">
|
|
<picker mode="date" fields="year" value="{{filterYear}}" bindchange="onYearChange">
|
|
<view class="picker-display">
|
|
<text>{{filterYear}}</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 自定义时间范围 -->
|
|
<view wx:if="{{viewMode === 'custom'}}" class="filter-row custom-range">
|
|
<picker mode="date" fields="month" value="{{customStart}}" bindchange="onCustomStartChange">
|
|
<view class="picker-display picker-display--sm">
|
|
<text class="picker-label-sm">从</text>
|
|
<text>{{customStart}}</text>
|
|
</view>
|
|
</picker>
|
|
<text class="range-sep">至</text>
|
|
<picker mode="date" fields="month" value="{{customEnd}}" bindchange="onCustomEndChange">
|
|
<view class="picker-display picker-display--sm">
|
|
<text>{{customEnd}}</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 项目筛选 -->
|
|
<view class="card card-items">
|
|
<view class="card-title">选择展示项目（可多选）</view>
|
|
<view class="items-tags">
|
|
<block wx:for="{{items}}" wx:key="*this" wx:for-index="si">
|
|
<view
|
|
class="item-tag {{filterItems.indexOf(item) > -1 ? 'item-tag--active' : ''}}"
|
|
style="{{filterItems.indexOf(item) > -1 ? 'border-color:' + colors[si % colors.length] + '; color:' + colors[si % colors.length] + '; background:' + colors[si % colors.length] + '18;' : ''}}"
|
|
bindtap="onToggleItem"
|
|
data-item="{{item}}"
|
|
>
|
|
<view class="item-tag-dot" style="background-color:{{colors[si % colors.length]}};"></view>
|
|
<text>{{item}}</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 趋势图 -->
|
|
<view class="card card-chart">
|
|
<view class="card-title">趋势图</view>
|
|
<canvas canvas-id="trendCanvas" id="trendCanvas" class="chart-canvas"></canvas>
|
|
<view class="chart-empty-overlay" wx:if="{{!hasData}}">
|
|
<text class="empty-hint">暂无数据</text>
|
|
</view>
|
|
</view>
|
|
</view>
|