<!--pages/stationMonitor/stationMonitor.wxml-->
|
<view class="container">
|
<!-- 顶部选项卡 -->
|
<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 {{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 {{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 {{activeTab === 'camera' ? 'active' : ''}}" bind:tap="switchTab" data-tab="camera">
|
<image class="tab-icon" src="/images/camera.svg" />
|
<text class="tab-name">摄像头</text>
|
</view>
|
</view>
|
|
<!-- 内容区域 -->
|
<view class="content-area">
|
<!-- 气象站内容 -->
|
<view wx:if="{{activeTab === 'weather'}}" class="tab-content">
|
<!-- <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 === true ? 'online' : 'offline'}}"></view>
|
<text class="status-text">{{currentWeatherStation.onLine === true ? '在线' : '离线'}}</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 !== null && currentWeatherStation.humidity !== undefined ? 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 !== null && currentWeatherStation.temperature !== undefined ? 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 !== null && currentWeatherStation.uv !== undefined ? 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 !== null && currentWeatherStation.light !== undefined ? 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 !== null && currentWeatherStation.rainfall !== undefined ? 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 !== null && currentWeatherStation.windSpeed !== undefined ? 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 !== null && currentWeatherStation.windDirection !== undefined ? 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">
|
<!-- 土壤墒情站选择下拉框 -->
|
<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 === true ? 'online' : 'offline'}}"></view>
|
<text class="status-text">{{currentSoilStation.onLine === true ? '在线' : '离线'}}</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 !== null && currentSoilStation.soilHumidity1 !== undefined ? 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 !== null && currentSoilStation.soilTemperature1 !== undefined ? 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 !== null && currentSoilStation.soilHumidity2 !== undefined ? 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 !== null && currentSoilStation.soilTemperature2 !== undefined ? 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 !== null && currentSoilStation.soilHumidity3 !== undefined ? 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 !== null && currentSoilStation.soilTemperature3 !== undefined ? 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 !== null && currentSoilStation.soilHumidity4 !== undefined ? 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 !== null && currentSoilStation.soilTemperature4 !== undefined ? 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 !== null && currentSoilStation.soilHumidity5 !== undefined ? 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 !== null && currentSoilStation.soilTemperature5 !== undefined ? 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> -->
|
|
<!-- 水肥机选择下拉框 -->
|
<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 === true ? 'online' : 'offline'}}"></view>
|
<text class="status-text">{{currentFertilizerStation.onLine === true ? '在线' : '离线'}}</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 !== true}}" color="#07c160" />
|
</view>
|
|
<!-- 注肥开关 -->
|
<view class="switch-item">
|
<text class="switch-label">注肥</text>
|
<switch class="custom-switch" checked="{{currentFertilizerStation.fertilizingEnabled}}" bindchange="toggleFertilizing" disabled="{{currentFertilizerStation.onLine !== true}}" 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 !== null && currentFertilizerStation.manureFlow !== undefined ? 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 !== null && currentFertilizerStation.manureTime !== undefined ? 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 !== null && currentFertilizerStation.stirTime !== undefined ? 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 !== null && currentFertilizerStation.stirDuration !== undefined ? 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 !== null && currentFertilizerStation.injectDuration !== undefined ? 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">
|
<view wx:for="{{cameraList}}" wx:key="id" class="camera-item">
|
<!-- 摄像头名称 -->
|
<view class="camera-header">
|
<text class="camera-name">{{item.name}}</text>
|
<view class="camera-status {{item.onLine === true ? 'online' : 'offline'}}">
|
<text>{{item.onLine === true ? '在线' : '离线'}}</text>
|
</view>
|
</view>
|
|
<!-- 摄像头视频 -->
|
<view class="camera-video-container" >
|
<!-- 加载状态 -->
|
<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 class="video-wrapper-ezplayer" id="ezplayer-{{item.id}}" accessToken="{{item.accessToken}}" url="{{item.hslUrl}}" deviceSerial="{{item.deviceSerial}}" channelNo="1" plugins="capture,ptz,mirror" watermark="大禹" autoPlay="{{true}}" theme="{{ { showFullScreenBtn: true, showHdBtn: true, showTimeLine: true } }}" bind:handleError="handleError" bind:onControlEvent="onControlEvent" />
|
</view>
|
|
<!-- 离线状态显示 -->
|
<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>
|
</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>
|
