From d8136d2b9065977e2607453e8fbf2e0f6b7c0158 Mon Sep 17 00:00:00 2001
From: zuoxiao <zuoxiao>
Date: 星期五, 29 八月 2025 16:59:13 +0800
Subject: [PATCH] 更新监测页面，添加分页功能以提升用户体验；修改视频列表接口调用逻辑，优化数据处理；更新样式以增强可视化效果。
---
pages/stationMonitor/stationMonitor.wxss | 244 +++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 239 insertions(+), 5 deletions(-)
diff --git a/pages/stationMonitor/stationMonitor.wxss b/pages/stationMonitor/stationMonitor.wxss
index b377ea2..941ae2a 100644
--- a/pages/stationMonitor/stationMonitor.wxss
+++ b/pages/stationMonitor/stationMonitor.wxss
@@ -48,7 +48,7 @@
position: sticky;
/* 浣跨敤sticky瀹氫綅 */
top: 0;
- z-index: 9999;
+ z-index: 999;
background-color: #fff;
/* 纭繚鑳屾櫙鑹� */
/* 鍑忓皬tabs楂樺害 */
@@ -700,16 +700,16 @@
filter: brightness(0) invert(1);
}
-/* 瑙嗛鎾斁鍣ㄥ鍣� */
+ /* 瑙嗛鎾斁鍣ㄥ鍣� */
.video-wrapper {
width: 100%;
- height: 100%;
+ height: 400rpx;
}
.video-wrapper-ezplayer {
width: 100%;
height: 100%;
-}
+}
@@ -1001,10 +1001,89 @@
transform: scale(0.98);
}
-/* 姘磋偉鏈烘暟鎹」鏍峰紡 */
+/* 娉ㄨ偉娉电姸鎬佽鏍峰紡 */
.monitoring-data .data-item.pump-status {
border-left-color: #1890ff;
background: linear-gradient(135deg, #e6f7ff 0%, #ffffff 100%);
+}
+
+/* 娉ㄨ偉娉电姸鎬佽 - 閲嶆柊璁捐涓轰袱妯″潡甯冨眬 */
+.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status {
+ display: flex !important;
+ align-items: center !important;
+ justify-content: space-between !important;
+ padding: 20rpx !important;
+ gap: 16rpx !important;
+}
+
+/* 宸︿晶妯″潡锛氬浘鏍�+鏍囩+鐘舵�佸�� */
+.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .data-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ flex: 1;
+ /* 鍏抽棴 gap锛屾敼鐢� margin 鎺у埗锛屽吋瀹规�ф洿濂� */
+ gap: 0 !important;
+ min-width: 0;
+}
+
+/* 鍙綔鐢ㄤ簬娉ㄨ偉娉电姸鎬佽锛氱敤 margin 鎺у埗 label 涓� value 鐨勯棿璺濓紝閬垮厤 gap 鍏煎鎬ч棶棰� */
+.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status.custom-pump-row .data-label {
+ display: block !important;
+ margin-bottom: 0 !important;
+ line-height: 1 !important;
+}
+.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status.custom-pump-row .data-value {
+ display: block !important;
+ margin-top: -10rpx !important;
+ line-height: 1 !important;
+}
+
+/* 宸︿晶妯″潡涓殑鐘舵�佸�兼牱寮� */
+.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .data-value {
+ font-size: 36rpx !important;
+ font-weight: 700 !important;
+ line-height: 1.2 !important;
+ margin: 0 !important;
+}
+
+/* 鐘舵�佸�兼牱寮� */
+.data-value.normal {
+ color: #52c41a;
+}
+
+.data-value.alarm {
+ color: #ff4d4f;
+}
+
+/* 鍙充晶妯″潡锛氭竻闄ゆ姤璀︽寜閽� - 鐙珛妯″潡鍦ㄥ彸杈瑰眳涓� */
+.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .clear-fault-btn {
+ background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%) !important;
+ color: white !important;
+ border: none !important;
+ border-radius: 20rpx !important;
+ padding: 12rpx 20rpx !important;
+ font-size: 24rpx !important;
+ font-weight: 500 !important;
+ box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3) !important;
+ transition: all 0.3s ease !important;
+ white-space: nowrap !important;
+ line-height: 1.2 !important;
+ height: 50rpx !important;
+ min-height: 44rpx !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ flex-shrink: 0 !important;
+ margin: 0 !important;
+ align-self: center !important;
+}
+
+/* 娓呴櫎鏁呴殰鎸夐挳婵�娲荤姸鎬� - 鍙拡瀵规敞鑲ユ车鐘舵�佽 */
+.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .clear-fault-btn:active {
+ transform: scale(0.95) !important;
+ box-shadow: 0 1rpx 4rpx rgba(255, 77, 79, 0.4) !important;
}
.monitoring-data .data-item.waste-flow {
@@ -1150,4 +1229,159 @@
width: 32rpx;
height: 32rpx;
}
+}
+
+/* 鍒嗛〉缁勪欢鏍峰紡 */
+.pagination {
+ margin: 32rpx 24rpx;
+ padding: 24rpx;
+ background: #fff;
+ border-radius: 16rpx;
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+}
+
+.pagination-info {
+ text-align: center;
+ margin-bottom: 24rpx;
+}
+
+.pagination-text {
+ font-size: 28rpx;
+ color: #666;
+ font-weight: 500;
+}
+
+.pagination-controls {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 24rpx;
+}
+
+.pagination-btn {
+ min-width: 120rpx;
+ height: 72rpx;
+ border: none;
+ border-radius: 36rpx;
+ background: linear-gradient(135deg, #0052d9 0%, #1890ff 100%);
+ color: #fff;
+ font-size: 28rpx;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s ease;
+ box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.3);
+}
+
+.pagination-btn:active {
+ transform: translateY(2rpx);
+ box-shadow: 0 2rpx 8rpx rgba(0, 82, 217, 0.4);
+}
+
+.pagination-btn.prev-btn {
+ background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+ box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
+}
+
+.pagination-btn.prev-btn:active {
+ box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.4);
+}
+
+.pagination-btn.next-btn {
+ background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
+ box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3);
+}
+
+.pagination-btn.next-btn:active {
+ box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.4);
+}
+
+/* 鍗犱綅闅愯棌鏍峰紡 */
+.pagination-btn.hidden {
+ opacity: 0.3;
+ background: #ccc !important;
+ box-shadow: none !important;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+.pagination-btn.hidden .btn-text {
+ color: #999;
+}
+
+/* 绂佺敤鐘舵�佹牱寮� */
+.pagination-btn:disabled {
+ opacity: 0.3;
+ background: #ccc !important;
+ box-shadow: none !important;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+.pagination-btn:disabled .btn-text {
+ color: #999;
+}
+
+.btn-text {
+ color: #fff;
+ font-weight: 500;
+}
+
+.page-info {
+ display: flex;
+ align-items: center;
+ gap: 8rpx;
+ padding: 16rpx 24rpx;
+ background: #f8f9fa;
+ border-radius: 24rpx;
+ border: 2rpx solid #e9ecef;
+}
+
+.page-number {
+ font-size: 32rpx;
+ color: #0052d9;
+ font-weight: 700;
+}
+
+.page-separator {
+ font-size: 24rpx;
+ color: #999;
+ font-weight: 400;
+}
+
+.total-pages {
+ font-size: 28rpx;
+ color: #666;
+ font-weight: 500;
+}
+
+/* 鍒嗛〉缁勪欢鍝嶅簲寮忎紭鍖� */
+@media (max-width: 400px) {
+ .pagination {
+ margin: 24rpx 16rpx;
+ padding: 20rpx;
+ }
+
+ .pagination-controls {
+ gap: 20rpx;
+ }
+
+ .pagination-btn {
+ min-width: 100rpx;
+ height: 64rpx;
+ font-size: 26rpx;
+ }
+
+ .page-info {
+ padding: 12rpx 20rpx;
+ }
+
+ .page-number {
+ font-size: 28rpx;
+ }
+
+ .total-pages {
+ font-size: 26rpx;
+ }
}
\ No newline at end of file
--
Gitblit v1.8.0