<!--pages/modeCompute/modeCompute.wxml-->
|
<view class="container">
|
<!-- 固定头部区域 -->
|
<view class="fixed-header">
|
<!-- 顶部下拉框 -->
|
<view class="header-section">
|
<view class="dropdown-wrapper">
|
<text class="dropdown-label">农作物选择</text>
|
<view class="dropdown-container" bind:tap="showCropPicker">
|
<text class="dropdown-text">{{selectedCrop.cropName || '请选择农作物'}}</text>
|
<image class="dropdown-icon" src="/images/arrow-down.svg" />
|
</view>
|
</view>
|
</view>
|
|
<!-- 日期筛选 -->
|
<view class="date-filter-section">
|
<view class="date-filter">
|
<view class="date-item">
|
<text class="date-label">起始日期</text>
|
<view class="date-picker" bind:tap="showStartDatePicker">
|
<text class="date-text">{{startDate || '选择日期'}}</text>
|
<image class="date-icon" src="/images/calendar.svg" />
|
</view>
|
</view>
|
<view class="date-item">
|
<text class="date-label">结束日期</text>
|
<view class="date-picker" bind:tap="showEndDatePicker">
|
<text class="date-text">{{endDate || '选择日期'}}</text>
|
<image class="date-icon" src="/images/calendar.svg" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 图表/列表切换按钮 -->
|
<view class="toggle-section">
|
<view class="toggle-buttons">
|
<view class="toggle-btn {{displayType === 'chart' ? 'active' : ''}}" bind:tap="switchToChart">
|
<image class="toggle-icon" src="/images/chart.svg" />
|
<text>图表</text>
|
</view>
|
<view class="toggle-btn {{displayType === 'list' ? 'active' : ''}}" bind:tap="switchToList">
|
<image class="toggle-icon" src="/images/list.svg" />
|
<text>列表</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 可滚动内容展示区域 -->
|
<scroll-view class="content-scroll" scroll-y="true">
|
|
<view class="content-section">
|
<!-- 加载状态 -->
|
<view wx:if="{{isLoading}}" class="loading-container">
|
<view class="loading-spinner"></view>
|
<text class="loading-text">数据加载中...</text>
|
</view>
|
|
<!-- 图表展示 -->
|
<view wx:elif="{{displayType === 'chart'}}" class="chart-container">
|
<ec-canvas
|
id="mychart-dom-line"
|
canvas-id="mychart-line"
|
ec="{{ ec }}"
|
class="chart-canvas">
|
</ec-canvas>
|
</view>
|
|
<!-- 列表展示 -->
|
<view wx:if="{{displayType === 'list'}}" class="list-container">
|
<!-- 表头 -->
|
<view class="table-header">
|
<text class="table-cell header-cell">序号</text>
|
<text class="table-cell header-cell">作物名称</text>
|
<text class="table-cell header-cell">日期</text>
|
<text class="table-cell header-cell">蒸腾量</text>
|
<text class="table-cell header-cell">最高温度</text>
|
<text class="table-cell header-cell">最低温度</text>
|
<text class="table-cell header-cell">作物系数</text>
|
</view>
|
|
<!-- 数据列表 -->
|
<scroll-view class="table-scroll" scroll-y="true">
|
<view wx:if="{{tableData.length > 0}}" wx:for="{{tableData}}" wx:key="index" class="table-row">
|
<text class="table-cell">{{index + 1}}</text>
|
<text class="table-cell">{{item.cropName}}</text>
|
<text class="table-cell">{{item.date}}</text>
|
<text class="table-cell">{{item.transpiration}}</text>
|
<text class="table-cell">{{item.maxTemp}}°C</text>
|
<text class="table-cell">{{item.minTemp}}°C</text>
|
<text class="table-cell">{{item.cropCoefficient}}</text>
|
</view>
|
|
<!-- 无数据状态 -->
|
<view wx:if="{{tableData.length === 0}}" class="no-data">
|
<image class="no-data-img" src="/images/no_more.svg" />
|
<text class="no-data-text">暂无数据</text>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 农作物选择弹窗 -->
|
<t-popup visible="{{showCropPopup}}" placement="bottom" bind:visible-change="onCropPopupChange">
|
<view class="popup-content">
|
<view class="popup-header">
|
<text class="popup-title">选择农作物</text>
|
</view>
|
<view class="popup-body">
|
<view wx:for="{{cropList}}" wx:key="cropId" class="crop-item {{selectedCrop.cropId === item.cropId ? 'selected' : ''}}" bind:tap="selectCrop" data-crop="{{item}}">
|
<text class="crop-name">{{item.cropName}}</text>
|
</view>
|
</view>
|
</view>
|
</t-popup>
|
|
<!-- 日期选择器 -->
|
<t-date-time-picker
|
visible="{{showDatePicker}}"
|
mode="date"
|
value="{{pickerDate}}"
|
bind:change="onDateChange"
|
bind:cancel="onDateCancel"
|
bind:confirm="onDateConfirm"
|
/>
|
