管灌系统农户端微信小程序(嘉峪关应用)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<view class="irrigation-container">
  <!-- 顶部两个标签页 -->
  <view class="tabs">
    <view class="tab {{currentTab === 0 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="0">
      <text>当前灌溉计划</text>
    </view>
    <view class="tab {{currentTab === 1 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="1">
      <text>历史计划</text>
    </view>
  </view>
 
  <!-- 中间列表 - 使用scroll-view实现下拉刷新 -->
  <scroll-view class="scroll-view" scroll-x="false" scroll-y="true" refresher-enabled="{{isRefreshing==false?true:false}}" refresher-threshold="50" bindrefresherrefresh="onPullDownRefresh" refresher-triggered="{{isWXRefreshing}}">
    <view wx:if="{{isRefreshing}}" class="refresh-view">
      <view class="dot"></view>
      <view class="dot"></view>
      <view class="dot"></view>
    </view>
    <view class="scroll-bg">
      <block wx:if="{{currentList.length > 0}}">
        <view class="list-item" wx:for="{{currentList}}" wx:key="id" bindtap="onItemTap" data-id="{{item.id}}" data-status="{{item.status}}">
          <!-- 状态标签 -->
          <view class="status-tag {{item.status === '1' ? 'draft' : item.status === '2' ? 'published' : item.status === '3' ? 'executing' : 'completed'}}">
            {{item.status === '1' ? '草稿' : item.status === '2' ? '未执行' : item.status === '3' ? '执行中' : '已完成'}}
          </view>
          
          <!-- 主要内容区 -->
          <view class="item-content">
            <!-- 标题区域 -->
            <view class="item-header">
              <view class="title-section">
                <view class="plan-title">{{item.title}}</view>
                <view class="project-name">{{item.projectName}}</view>
              </view>
            </view>
 
            <!-- 信息区域 -->
            <view class="info-section">
              <!-- 草稿状态(1)时横向排列,其他状态纵向排列 -->
              <view class="info-grid {{item.status === '1' ? '' : 'vertical-layout'}} {{currentTab === 1 ? 'history-grid' : ''}}">
                <view class="info-item">
                  <view class="info-icon">
                    <image src="/images/time-icon.svg" mode="aspectFit"></image>
                  </view>
                  <view class="info-content">
                    <view class="info-label">灌溉时间</view>
                    <view class="info-value">{{(item.planStartTime ? item.planStartTime : '手动发布') + (item.planStopTime ? ' - ' + item.planStopTime : '')}}</view>
                  </view>
                </view>
                <view class="info-item">
                  <view class="info-icon duration-icon">
                    <image src="/images/hourglass.svg" mode="aspectFit"></image>
                  </view>
                  <view class="info-content">
                    <view class="info-label">灌溉时长</view>
                    <view class="info-value">{{item.duration}}分钟</view>
                  </view>
                </view>
              </view>
 
              <!-- 执行中状态额外信息 -->
              <block wx:if="{{item.status === '3'}}">
                <view class="executing-info">
                  <view class="info-item">
                    <view class="info-icon">
                      <image src="/images/progress-icon.svg" mode="aspectFit"></image>
                    </view>
                    <view class="info-content">
                      <view class="info-label">已灌溉时间</view>
                      <view class="info-value">{{item.irrigatedTime}}</view>
                    </view>
                  </view>
                  <view class="info-item">
                    <view class="info-icon">
                      <image src="/images/group-icon.svg" mode="aspectFit"></image>
                    </view>
                    <view class="info-content">
                      <view class="info-label">已灌溉轮组</view>
                      <view class="info-value">{{item.irrigatedGroups}}</view>
                    </view>
                  </view>
                </view>
              </block>
            </view>
 
            <!-- 操作按钮区域 -->
            <view class="action-section" catchtap="stopPropagation" wx:if="{{item.status !== '4'}}">
              <block wx:if="{{item.status === '1'}}">
                <view class="action-buttons">
                  <button class="action-button publish-button" hover-class="publish-button-hover" bindtap="onPublish" data-id="{{item.id}}">
                    <image src="/images/publish-icon.svg" mode="aspectFit"></image>
                    <text>发布</text>
                  </button>
                </view>
              </block>
              <block wx:if="{{item.status === '2'}}">
                <view class="action-buttons">
                  <button class="action-button stop-button" hover-class="stop-button-hover" bindtap="onStop" data-id="{{item.id}}">
                    <image src="/images/stop-icon.svg" mode="aspectFit"></image>
                    <text>终止</text>
                  </button>
                </view>
              </block>
              <block wx:if="{{item.status === '3'}}">
                <view class="action-buttons">
                  <button class="action-button stop-button" hover-class="stop-button-hover" bindtap="onStop" data-id="{{item.id}}">
                    <image src="/images/stop-icon.svg" mode="aspectFit"></image>
                    <text>终止</text>
                  </button>
                </view>
              </block>
            </view>
          </view>
        </view>
      </block>
 
      <block wx:else>
        <view class="empty-list">
          <image class="empty-icon" src="/images/no_more.svg" mode="aspectFit"></image>
          <view class="empty-text">暂无轮灌记录</view>
        </view>
      </block>
    </view>
  </scroll-view>
 
  <!-- 底部新建按钮 -->
  <view class="bottom-button">
    <button class="add-button" hover-class="add-button-hover" bindtap="onAddIrrigation">
      <image src="/images/add-icon.svg" mode="aspectFit"></image>
      <text>创建灌溉计划</text>
    </button>
  </view>
</view>