更新项目配置，添加监测站相关数据和状态管理；优化首页和监测页面的逻辑，提升用户体验；新增SVG图标资源，更新样式以增强可视化效果。

zuoxiao

2025-08-15 b0862808be397892e57b7e20d0859040effd01b4

 pages/stationMonitor/stationMonitor.wxml

@@ -1,23 +1,23 @@
<!--pages/stationMonitor/stationMonitor.wxml-->
<view class="container">
  <!-- 顶部选项卡 -->
  <view class="tab-container">
    <view class="tab-item {{activeTab === 'weather' ? 'active' : ''}}" bind:tap="switchTab" data-tab="weather">
  <view class="tabs">
    <view class="tab {{activeTab === 'weather' ? 'active' : ''}}" bind:tap="switchTab" data-tab="weather">
      <image class="tab-icon" src="/images/weather.svg" />
      <text class="tab-name">气象站</text>
    </view>

    <view class="tab-item {{activeTab === 'soil' ? 'active' : ''}}" bind:tap="switchTab" data-tab="soil">
    <view class="tab {{activeTab === 'soil' ? 'active' : ''}}" bind:tap="switchTab" data-tab="soil">
      <image class="tab-icon" src="/images/soil.svg" />
      <text class="tab-name">土壤墒情站</text>
    </view>

    <view class="tab-item {{activeTab === 'fertilizer' ? 'active' : ''}}" bind:tap="switchTab" data-tab="fertilizer">
    <view class="tab {{activeTab === 'fertilizer' ? 'active' : ''}}" bind:tap="switchTab" data-tab="fertilizer">
      <image class="tab-icon" src="/images/fertilizer.svg" />
      <text class="tab-name">水肥机</text>
    </view>

    <view class="tab-item {{activeTab === 'camera' ? 'active' : ''}}" bind:tap="switchTab" data-tab="camera">
    <view class="tab {{activeTab === 'camera' ? 'active' : ''}}" bind:tap="switchTab" data-tab="camera">
      <image class="tab-icon" src="/images/camera.svg" />
      <text class="tab-name">摄像头</text>
    </view>
@@ -27,25 +27,407 @@
  <view class="content-area">
    <!-- 气象站内容 -->
    <view wx:if="{{activeTab === 'weather'}}" class="tab-content">
      <text class="content-title">气象站监测</text>
      <!-- 在这里添加气象站相关内容 -->
      <!-- <text class="content-title">气象站监测</text> -->

      <!-- 气象站选择下拉框 -->
      <view class="weather-station-selector">
        <picker bindchange="onWeatherStationChange" value="{{selectedWeatherStationIndex}}" range="{{weatherStationList}}" range-key="name">
          <view class="picker-container">
            <text class="picker-label">选择气象站：</text>
            <view class="picker-value">
              <text>{{weatherStationList[selectedWeatherStationIndex].name || '请选择气象站'}}</text>
              <image class="picker-arrow" src="/images/arrow-down.svg" />
            </view>
          </view>
        </picker>
      </view>

      <!-- 气象站信息卡片 -->
      <view wx:if="{{currentWeatherStation}}" class="weather-info-card">
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <view class="status-indicator {{currentWeatherStation.online ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentWeatherStation.online ? '在线' : '离线'}}</text>
          </view>
          <view class="refresh-btn" bind:tap="refreshWeatherData">
            <image class="refresh-icon" src="/images/refresh.svg" />
            <text class="refresh-text">刷新</text>
          </view>
        </view>

        <!-- 气象数据网格 -->
        <view class="weather-data-grid">
          <!-- 空气湿度 -->
          <view class="weather-data-item humidity">
            <view class="data-icon">
              <image src="/images/humidity.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">空气湿度(%)</text>
              <text class="data-value">{{currentWeatherStation.humidity || '--'}}%</text>
            </view>
          </view>

          <!-- 空气温度 -->
          <view class="weather-data-item temperature">
            <view class="data-icon">
              <image src="/images/temperature.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">空气温度(℃)</text>
              <text class="data-value">{{currentWeatherStation.temperature || '--'}}°C</text>
            </view>
          </view>

          <!-- 紫外线 -->
          <view class="weather-data-item uv">
            <view class="data-icon">
              <image src="/images/uv.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">紫外线(mW/m²)</text>
              <text class="data-value">{{currentWeatherStation.uv || '--'}}</text>
            </view>
          </view>

          <!-- 光照强度 -->
          <view class="weather-data-item light">
            <view class="data-icon">
              <image src="/images/light.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">光照强度(lm/㎡)</text>
              <text class="data-value">{{currentWeatherStation.light || '--'}} lux</text>
            </view>
          </view>

          <!-- 雨量 -->
          <view class="weather-data-item rainfall">
            <view class="data-icon">
              <image src="/images/rainfall.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">雨量(mm)</text>
              <text class="data-value">{{currentWeatherStation.rainfall || '--'}} mm</text>
            </view>
          </view>

          <!-- 风速 -->
          <view class="weather-data-item wind-speed">
            <view class="data-icon">
              <image src="/images/wind-speed.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">风速(m/s)</text>
              <text class="data-value">{{currentWeatherStation.windSpeed || '--'}} m/s</text>
            </view>
          </view>

          <!-- 风向 -->
          <view class="weather-data-item wind-direction">
            <view class="data-icon">
              <image src="/images/wind-direction.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">风向</text>
              <view class="wind-direction-display">
                <!-- <image class="wind-arrow" src="/images/wind-arrow.svg" style="transform: rotate({{currentWeatherStation.windDirectionAngle || 0}}deg)" /> -->
                <text class="data-value">{{currentWeatherStation.windDirection || '--'}}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 最后更新时间 -->
        <view class="last-update">
          <text class="update-text">最后更新：{{currentWeatherStation.lastUpdate || '--'}}</text>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view wx:if="{{!currentWeatherStation}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />
        <text class="no-data-text">请选择气象站查看数据</text>
      </view>
    </view>

    <!-- 土壤墒情站内容 -->
    <view wx:elif="{{activeTab === 'soil'}}" class="tab-content">
      <text class="content-title">土壤墒情站监测</text>
      <!-- 在这里添加土壤墒情站相关内容 -->
      <!-- 土壤墒情站选择下拉框 -->
      <view class="weather-station-selector">
        <picker bindchange="onSoilStationChange" value="{{selectedSoilStationIndex}}" range="{{soilStationList}}" range-key="name">
          <view class="picker-container">
            <text class="picker-label">选择土壤墒情站：</text>
            <view class="picker-value">
              <text>{{soilStationList[selectedSoilStationIndex].name || '请选择土壤墒情站'}}</text>
              <image class="picker-arrow" src="/images/arrow-down.svg" />
            </view>
          </view>
        </picker>
      </view>
      
      <!-- 土壤墒情信息卡片 -->
      <view wx:if="{{currentSoilStation}}" class="weather-info-card">
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <view class="status-indicator {{currentSoilStation.online ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentSoilStation.online ? '在线' : '离线'}}</text>
          </view>
          <view class="refresh-btn" bind:tap="refreshSoilData">
            <image class="refresh-icon" src="/images/refresh.svg" />
            <text class="refresh-text">刷新</text>
          </view>
        </view>

        <!-- 土壤墒情数据网格 -->
        <view class="weather-data-grid">
          <!-- 土壤层1 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/one.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度1(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity1 || '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/one.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度1(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature1 || '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层2 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/two.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度2(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity2 || '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/two.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度2(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature2 || '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层3 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/three.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度3(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity3 || '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/three.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度3(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature3 || '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层4 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/four.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度4(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity4 || '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/four.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度4(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature4 || '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层5 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/five.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度5(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity5 || '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/five.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度5(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature5 || '--'}}°C</text>
            </view>
          </view>
        </view>

        <!-- 最后更新时间 -->
        <view class="last-update">
          <text class="update-text">最后更新：{{currentSoilStation.lastUpdate || '--'}}</text>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view wx:if="{{!currentSoilStation}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />
        <text class="no-data-text">请选择土壤墒情站查看数据</text>
      </view>
    </view>

    <!-- 水肥机内容 -->
    <view wx:elif="{{activeTab === 'fertilizer'}}" class="tab-content">
      <text class="content-title">水肥机监测</text>
      <!-- 在这里添加水肥机相关内容 -->
      <!-- <text class="content-title">水肥机监测</text> -->

      <!-- 水肥机选择下拉框 -->
      <view class="fertilizer-station-selector">
        <picker bindchange="onFertilizerStationChange" value="{{selectedFertilizerStationIndex}}" range="{{fertilizerStationList}}" range-key="name">
          <view class="picker-container">
            <text class="picker-label">选择水肥机：</text>
            <view class="picker-value">
              <text>{{fertilizerStationList[selectedFertilizerStationIndex].name || '请选择水肥机'}}</text>
              <image class="picker-arrow" src="/images/arrow-down.svg" />
            </view>
          </view>
        </picker>
      </view>

      <!-- 水肥机信息卡片 -->
      <view wx:if="{{currentFertilizerStation}}" class="fertilizer-info-card">
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <view class="status-indicator {{currentFertilizerStation.onLine === 1 ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentFertilizerStation.onLine === 1 ? '在线' : '离线'}}</text>
          </view>
          <view class="refresh-btn" bind:tap="refreshFertilizerData">
            <image class="refresh-icon" src="/images/refresh.svg" />
            <text class="refresh-text">刷新</text>
          </view>
        </view>

        <!-- 控制开关区域 -->
        <view class="control-switches">
          <text class="section-title">控制开关</text>
          <view class="switch-container">
            <!-- 搅拌开关 -->
            <view class="switch-item">
              <text class="switch-label">搅拌</text>
              <switch class="custom-switch" checked="{{currentFertilizerStation.mixingEnabled}}" bindchange="toggleMixing" disabled="{{currentFertilizerStation.onLine !== 1}}" color="#07c160" />
            </view>

            <!-- 注肥开关 -->
            <view class="switch-item">
              <text class="switch-label">注肥</text>
              <switch class="custom-switch" checked="{{currentFertilizerStation.fertilizingEnabled}}" bindchange="toggleFertilizing" disabled="{{currentFertilizerStation.onLine !== 1}}" color="#07c160" />
            </view>
          </view>
        </view>

        <!-- 监测数据区域 -->
        <view class="monitoring-data">
          <text class="section-title">监测数据</text>
          <view class="data-grid">
            <!-- 肥料流量 -->
            <view class="data-item waste-flow">
              <view class="data-icon">
                <image src="/images/flow.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">肥料流量(升)</text>
                <text class="data-value">{{currentFertilizerStation.manureFlow || '--'}} L</text>
              </view>
            </view>

            <!-- 注肥时长 -->
            <view class="data-item fertilizing-duration">
              <view class="data-icon">
                <image src="/images/timer.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">注肥时长(秒)</text>
                <text class="data-value">{{currentFertilizerStation.manureTime || '--'}} s</text>
              </view>
            </view>

            <!-- 搅拌时长 -->
            <view class="data-item mixing-duration">
              <view class="data-icon">
                <image src="/images/mixing.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">搅拌时长(秒)</text>
                <text class="data-value">{{currentFertilizerStation.stirTime || '--'}} s</text>
              </view>
            </view>

            <!-- 搅拌设定时间 -->
            <view class="data-item mixing-set-time">
              <view class="data-icon">
                <image src="/images/settings.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">搅拌设定时间(秒)</text>
                <text class="data-value">{{currentFertilizerStation.stirDuration || '--'}} s</text>
              </view>
            </view>

            <!-- 注肥设定时间 -->
            <view class="data-item fertilizing-set-time">
              <view class="data-icon">
                <image src="/images/settings-time.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">注肥设定时间(秒)</text>
                <text class="data-value">{{currentFertilizerStation.injectDuration || '--'}} s</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 最后更新时间 -->
        <view class="last-update">
          <text class="update-text">最后更新：{{currentFertilizerStation.dt || currentFertilizerStation.lastUpdate || '--'}}</text>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view wx:if="{{!currentFertilizerStation}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />
        <text class="no-data-text">请选择水肥机查看数据</text>
      </view>
    </view>

    <!-- 摄像头内容 -->
    <view wx:elif="{{activeTab === 'camera'}}" class="tab-content">

      <!-- <text class="content-title">摄像头监控</text> -->

      <!-- 摄像头列表 -->
      <view class="camera-list">
@@ -59,63 +441,66 @@
          </view>

          <!-- 摄像头视频 -->
          <view class="camera-video-container">
            <view wx:if="{{item.online}}" class="video-wrapper">
          <view class="camera-video-container" style="height: {{deviceSpecificConfig.videoHeight}}rpx;">
            <!-- 加载状态 -->
            <view wx:if="{{item.isLoadingUrl}}" class="video-loading">
              <view class="loading-spinner"></view>
              <text class="loading-text">正在获取播放地址...</text>
            </view>

            <!-- 错误状态 -->
            <view wx:elif="{{item.urlError}}" class="video-error">
              <image class="error-icon" src="/images/error.svg" />
              <text class="error-text">获取播放地址失败</text>
              <button class="retry-btn" bind:tap="retryGetHlsUrl" data-camera="{{item}}">
                <image class="retry-icon" src="/images/refresh.svg" />
                <text>重试</text>
              </button>
            </view>

            <!-- 正常播放状态 -->
            <view wx:elif="{{item.online && item.hslUrl}}" class="video-wrapper">
              <!-- 直播播放器组件 -->
              <ezplayer id="ezplayer" accessToken="at.2o04glgs0q36cjugbvddqujz7tqrghx1-1ovr6lmf3k-03pij3c-304ziif7e" url="rtmp://open.ys7.com/BA7248908/1/live" plugins="talk,voice,capture" recPlayTime="" width="360" height="300" watermark="shuiyin" theme="{{ { showFullScreenBtn: true, showHdBtn: true, showTimeLine: true } }}" bind:handleError="handleError" bind:onControlEvent="onControlEvent" />

              <!-- 备用HLS播放器 -->
              <video wx:if="{{item.isPlaying && !item.rtmpUrl}}" class="live-player" src="{{item.hlsUrl}}" autoplay="{{true}}" muted="{{true}}" controls="{{false}}" object-fit="contain" bind:load="onVideoLoad" bind:play="onVideoPlay" bind:pause="onVideoPause" bind:ended="onVideoEnded" bind:error="onVideoError" data-camera="{{item}}" />

              <!-- 视频控制覆盖层 -->
              <view class="video-overlay" wx:if="{{!item.isPlaying}}">
                <view class="play-overlay" bind:tap="playVideo" data-camera="{{item}}">
                  <image class="play-icon" src="/images/play.svg" />
                </view>
              </view>

              <!-- 视频信息 -->
              <view class="video-info">
                <text class="video-time">{{item.lastUpdate}}</text>
                <text class="video-status">{{item.isPlaying ? '直播中' : '已停止'}}</text>
              </view>

              <!-- 播放控制按钮 -->
              <view class="video-controls" wx:if="{{item.isPlaying}}">
                <view class="control-btn" bind:tap="pauseVideo" data-camera="{{item}}">
                  <image class="control-icon" src="/images/pause.svg" />
                </view>
                <view class="control-btn" bind:tap="stopVideo" data-camera="{{item}}">
                  <image class="control-icon" src="/images/stop.svg" />
                </view>
              </view>

              <!-- 调试按钮 -->
              <view class="debug-controls">
                <view class="debug-btn" bind:tap="testVideoUrl" data-camera="{{item}}">
                  <text>测试URL</text>
                </view>
              </view>
              <ezplayer 
                id="ezplayer-{{item.id}}" 
                accessToken="{{item.accessToken}}" 
                url="{{item.hslUrl}}" 
                deviceSerial="{{item.deviceSerial}}"
                channelNo="1"
                width="300rpx"
                height="300rpx"
                plugins="talk,voice,capture,ptz,privacy,mirror" 
                watermark="大禹"
                autoPlay="{{true}}"
                theme="{{ { showFullScreenBtn: true, showHdBtn: true, showTimeLine: true } }}" 
                bind:handleError="handleError" 
                bind:onControlEvent="onControlEvent"
                style="width: 100vw; height: 100%; max-width: 100vw; min-width: 100vw; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; margin: 0; padding: 0; transform: none; border: none; border-radius: 0; box-shadow: none; background: transparent;"
              />
            </view>

            <!-- 离线状态 -->
            <view wx:else class="video-offline">
              <image class="offline-icon" src="/images/offline.svg" />
              <text class="offline-text">摄像头离线</text>
            <!-- 离线状态显示 -->
            <view wx:elif="{{!item.online}}" class="video-offline">
              <image class="offline-icon" src="/images/camera.svg" />
              <text class="offline-text">设备离线</text>
            </view>

            <!-- 无播放地址状态 -->
            <view wx:else class="video-no-url">
              <image class="no-url-icon" src="/images/camera.svg" />
              <text class="no-url-text">暂无播放地址</text>
            </view>
          </view>

          <!-- 摄像头操作按钮 -->
          <view class="camera-actions">
            <button class="action-btn {{item.online ? 'primary' : 'disabled'}}" disabled="{{!item.online}}" bind:tap="fullscreenVideo" data-camera="{{item}}">
              全屏播放
            </button>
            <button class="action-btn secondary" bind:tap="cameraSettings" data-camera="{{item}}">
              设置
            </button>
          </view>
         
        </view>
      </view>

      <!-- 无数据提示 -->
      <view wx:if="{{cameraList.length === 0}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />
        <text class="no-data-text">暂无摄像头设备</text>
      </view>
    </view>
  </view>
</view>