From d8136d2b9065977e2607453e8fbf2e0f6b7c0158 Mon Sep 17 00:00:00 2001
From: zuoxiao <zuoxiao>
Date: 星期五, 29 八月 2025 16:59:13 +0800
Subject: [PATCH] 更新监测页面，添加分页功能以提升用户体验；修改视频列表接口调用逻辑，优化数据处理；更新样式以增强可视化效果。
---
app.json | 2
pages/stationMonitor/stationMonitor.js | 64 +++++++++++-
utils/projectConfig.js | 4
pages/stationMonitor/stationMonitor.wxml | 35 ++++++
pages/stationMonitor/stationMonitor.wxss | 161 +++++++++++++++++++++++++++++++
5 files changed, 249 insertions(+), 17 deletions(-)
diff --git a/app.json b/app.json
index a29ee14..d88b19a 100644
--- a/app.json
+++ b/app.json
@@ -33,7 +33,7 @@
"lazyCodeLoading": "requiredComponents",
"plugins": {
"ezplayer": {
- "version": "1.0.13",
+ "version": "1.1.0",
"provider": "wxf2b3a0262975d8c2"
}
}
diff --git a/pages/stationMonitor/stationMonitor.js b/pages/stationMonitor/stationMonitor.js
index bc5b271..518c246 100644
--- a/pages/stationMonitor/stationMonitor.js
+++ b/pages/stationMonitor/stationMonitor.js
@@ -35,7 +35,12 @@
videoHeight: 400,
buttonHeight: 72,
fontSize: 26
- }
+ },
+ // 鍒嗛〉鐩稿叧鏁版嵁
+ currentPage: 1,
+ pageSize: 4,
+ totalCount: 0,
+ totalPages: 0
},
/**
@@ -358,27 +363,42 @@
return;
}
+ // 閲嶇疆鍒嗛〉鐘舵�佸苟鑾峰彇绗竴椤垫暟鎹�
this.setData({
- isLoading: true
+ currentPage: 1,
+ totalCount: 0,
+ totalPages: 0
});
// 璋冪敤鐪熷疄鎺ュ彛鑾峰彇鎽勫儚澶村垪琛�
- this.getVideoListFromApi();
+ this.getVideoListFromApi(1);
},
/**
* 浠庢帴鍙ｈ幏鍙栬棰戝垪琛�
*/
- getVideoListFromApi() {
- console.log('寮�濮嬭皟鐢� /wx/video/all 鎺ュ彛鑾峰彇瑙嗛鍒楄〃');
+ getVideoListFromApi(page = 1) {
+ console.log(`寮�濮嬭皟鐢� /wx/video/some 鎺ュ彛鑾峰彇瑙嗛鍒楄〃锛岄〉鐮侊細${page}`);
- get({url:'/wx/video/all'} )
+ this.setData({
+ currentPage: page,
+ isLoading: true
+ });
+
+ get({
+ url: '/wx/video/some',
+ data: {
+ pageCurr: page,
+ pageSize: this.data.pageSize
+ }
+ })
.then(response => {
console.log('鎺ュ彛杩斿洖鏁版嵁:', response);
if (response.success && response.code === '0001') {
- // 澶勭悊杩斿洖鐨勬憚鍍忓ご鏁版嵁
- const cameraList = response.content.map(item => {
+ // 澶勭悊杩斿洖鐨勬憚鍍忓ご鏁版嵁 - 鏂扮殑鏁版嵁缁撴瀯
+ const cameraData = response.content.obj || [];
+ const cameraList = cameraData.map(item => {
// 鏍规嵁devNo鐢熸垚RTMP URL
const channelNo = 1; // 榛樿閫氶亾鍙�
const rtmpUrl = `rtmp://open.ys7.com/${item.devNo}/${channelNo}/live`;
@@ -403,8 +423,14 @@
};
});
+ // 浠庢柊鐨勬暟鎹粨鏋勪腑鑾峰彇鍒嗛〉淇℃伅
+ const totalCount = response.content.itemTotal || 0;
+ const totalPages = response.content.pageTotal || 0;
+
this.setData({
cameraList: cameraList,
+ totalCount: totalCount,
+ totalPages: totalPages,
isLoading: false
});
@@ -1373,6 +1399,28 @@
/**
+ * 涓婁竴椤�
+ */
+ prevPage() {
+ if (this.data.currentPage <= 1) return;
+
+ const newPage = this.data.currentPage - 1;
+ console.log(`鍒囨崲鍒颁笂涓�椤�: ${newPage}`);
+ this.getVideoListFromApi(newPage);
+ },
+
+ /**
+ * 涓嬩竴椤�
+ */
+ nextPage() {
+ if (this.data.currentPage >= this.data.totalPages) return;
+
+ const newPage = this.data.currentPage + 1;
+ console.log(`鍒囨崲鍒颁笅涓�椤�: ${newPage}`);
+ this.getVideoListFromApi(newPage);
+ },
+
+ /**
* 鎵嬪姩閲嶈瘯鑾峰彇鎾斁鍦板潃
*/
retryGetHlsUrl(e) {
diff --git a/pages/stationMonitor/stationMonitor.wxml b/pages/stationMonitor/stationMonitor.wxml
index 250d87d..75a93fc 100644
--- a/pages/stationMonitor/stationMonitor.wxml
+++ b/pages/stationMonitor/stationMonitor.wxml
@@ -87,7 +87,7 @@
</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>
+ <text class="data-value">{{currentWeatherStation.uv !== null && currentWeatherStation.uv !== undefined ? currentWeatherStation.uv : '--'}} mW</text>
</view>
</view>
@@ -98,7 +98,7 @@
</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>
+ <text class="data-value">{{currentWeatherStation.light !== null && currentWeatherStation.light !== undefined ? currentWeatherStation.light : '--'}} lm</text>
</view>
</view>
@@ -480,7 +480,8 @@
<!-- 姝ｅ父鎾斁鐘舵�� -->
<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" />
+ <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>
<!-- 绂荤嚎鐘舵�佹樉绀� -->
@@ -500,6 +501,34 @@
</view>
</view>
+ <!-- 鍒嗛〉缁勪欢 -->
+ <view wx:if="{{cameraList.length > 0}}" class="pagination">
+ <view class="pagination-info">
+ <text class="pagination-text">鍏� {{totalCount}} 涓憚鍍忓ご锛屽綋鍓嶇 {{currentPage}} 椤�</text>
+ </view>
+ <view class="pagination-controls">
+ <!-- 涓婁竴椤垫寜閽� - 浣跨敤鍗犱綅闅愯棌 -->
+ <button class="pagination-btn prev-btn {{currentPage <= 1 ? 'hidden' : ''}}"
+ bind:tap="prevPage"
+ disabled="{{currentPage <= 1}}">
+ <text class="btn-text">涓婁竴椤�</text>
+ </button>
+
+ <view class="page-info">
+ <text class="page-number">{{currentPage}}</text>
+ <text class="page-separator">/</text>
+ <text class="total-pages">{{totalPages}}</text>
+ </view>
+
+ <!-- 涓嬩竴椤垫寜閽� - 浣跨敤鍗犱綅闅愯棌 -->
+ <button class="pagination-btn next-btn {{currentPage >= totalPages ? 'hidden' : ''}}"
+ bind:tap="nextPage"
+ disabled="{{currentPage >= totalPages}}">
+ <text class="btn-text">涓嬩竴椤�</text>
+ </button>
+ </view>
+ </view>
+
<!-- 鏃犳暟鎹彁绀� -->
<view wx:if="{{cameraList.length === 0}}" class="no-data">
<image class="no-data-icon" src="/images/no-data.svg" />
diff --git a/pages/stationMonitor/stationMonitor.wxss b/pages/stationMonitor/stationMonitor.wxss
index 1a34923..941ae2a 100644
--- a/pages/stationMonitor/stationMonitor.wxss
+++ b/pages/stationMonitor/stationMonitor.wxss
@@ -700,16 +700,16 @@
filter: brightness(0) invert(1);
}
-/* 瑙嗛鎾斁鍣ㄥ鍣� */
+ /* 瑙嗛鎾斁鍣ㄥ鍣� */
.video-wrapper {
width: 100%;
- height: 100%;
+ height: 400rpx;
}
.video-wrapper-ezplayer {
width: 100%;
height: 100%;
-}
+}
@@ -1229,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
diff --git a/utils/projectConfig.js b/utils/projectConfig.js
index 67c0f4c..c258661 100644
--- a/utils/projectConfig.js
+++ b/utils/projectConfig.js
@@ -25,7 +25,7 @@
MQ: {
tag: 'mq',
displayName: '姘戝嫟椤圭洰',
- operatorId: '2025033115305200006', // 缁熶竴ID鐢ㄤ簬operator鍜宑lientId
+ operatorId: '', // 缁熶竴ID鐢ㄤ簬operator鍜宑lientId
needLogin: true, // 涓嶉渶瑕佺櫥褰�
loginType: 'code', // 楠岃瘉鐮佺櫥褰�
monitor:true,//鏄惁鍙互杩涘叆缁煎悎绔欑洃娴�
@@ -52,7 +52,7 @@
operatorId: '', // 缁熶竴ID鐢ㄤ簬operator鍜宑lientId 2025041710412400006
needLogin: true, // 闇�瑕佺櫥褰�
loginType: 'code', // 璐﹀彿瀵嗙爜鐧诲綍
- monitor:false,//鏄惁鍙互杩涘叆缁煎悎绔欑洃娴�
+ monitor:true,//鏄惁鍙互杩涘叆缁煎悎绔欑洃娴�
serverId: '121',
get serverUrl() {
return SERVER_INFO.URL_121;
--
Gitblit v1.8.0