diff --git a/src/components/EnvironmentCard.vue b/src/components/EnvironmentCard.vue new file mode 100644 index 0000000..01096b0 --- /dev/null +++ b/src/components/EnvironmentCard.vue @@ -0,0 +1,302 @@ + + + + + \ No newline at end of file diff --git a/src/pages/environment/index.vue b/src/pages/environment/index.vue index 2c6d75f..83e8603 100644 --- a/src/pages/environment/index.vue +++ b/src/pages/environment/index.vue @@ -9,67 +9,40 @@ - - - - - 🌡️ - 温度 - - - {{ temperature }}°C - - - - - - - + + + + + + + + - - - - - 💧 - 湿度 - - - {{ humidity }}% - - - - - - - - - - - - - - ✨ - 洁净度 - - - {{ cleanliness > 0 ? cleanliness + 'μg/m³' : '-μg/m³' }} - - - - - - - - - - @@ -268,8 +241,12 @@ import mqttDataManager from '@/utils/mqttDataManager.js' import { manualReconnect, sendMqttData } from '@/utils/sendMqtt.js' import { thDataApi, alertApi, eventApi, wsdApi, statusApi } from '@/utils/api.js' +import EnvironmentCard from '@/components/EnvironmentCard.vue' export default { + components: { + EnvironmentCard + }, data() { return { temperature: 0, @@ -278,6 +255,9 @@ export default { temperatureProgress: 0, humidityProgress: 0, cleanlinessProgress: 0, + isTempAbnormal: false, + isHumidityAbnormal: false, + isCleanlinessAbnormal: false, lastUpdate: '暂无数据', temperatureRange: { min: 0, @@ -1514,141 +1494,7 @@ button:disabled { margin-bottom: 20rpx; } -.detail-card { - background: #ffffff; - border-radius: 8rpx; - padding: 20rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); - border: 1rpx solid #e1e5e9; - transition: box-shadow 0.2s ease; -} -.detail-card:hover { - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12); -} - -/* 断线状态样式 */ -.detail-card.disconnected { - border-color: #95a5a6 !important; - border-left-color: #95a5a6 !important; - opacity: 0.7; -} - -.detail-card.disconnected .detail-label { - color: #95a5a6; -} - -.detail-card.disconnected .detail-value { - color: #95a5a6; -} - -.detail-card.disconnected .detail-progress-fill { - background: #95a5a6 !important; -} - -/* 温度详情卡片 */ -.temperature-detail-card { - border-left: 4rpx solid #e74c3c; -} - -/* 湿度详情卡片 */ -.humidity-detail-card { - border-left: 4rpx solid #3498db; -} - -/* 洁净度详情卡片 */ -.cleanliness-detail-card { - border-left: 4rpx solid #f39c12; -} - -.detail-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16rpx; -} - -.detail-icon-container { - display: flex; - align-items: center; - gap: 12rpx; -} - -.detail-icon { - font-size: 32rpx; -} - -.detail-label { - font-size: 28rpx; - color: #2c3e50; - font-weight: 600; -} - -.detail-value-container { - display: flex; - align-items: center; - gap: 8rpx; -} - -.detail-value { - font-size: 28rpx; - // color: #34495e; - font-weight: 600; -} - -.detail-status { - width: 12rpx; - height: 12rpx; - border-radius: 50%; -} - -.detail-status.active { - background: #27ae60; -} - -.detail-status.inactive { - background: #bdc3c7; -} - -.detail-status.warning { - background: #f1c40f; -} - -.detail-progress-bar { - height: 16rpx; - background: #ecf0f1; - border-radius: 8rpx; - overflow: hidden; - margin-bottom: 12rpx; -} - -.detail-progress-fill { - height: 100%; - border-radius: 8rpx; - transition: width 0.3s ease; -} - -.temperature-progress { - background: #e74c3c; -} - -.humidity-progress { - background: #3498db; -} - -.cleanliness-progress { - background: #f39c12; -} - -.detail-range { - display: flex; - justify-content: flex-end; -} - -.detail-range-text { - font-size: 24rpx; - color: #7f8c8d; -} /* 空调目标参数设置样式 */ .air-conditioner-settings { @@ -2235,9 +2081,7 @@ button:disabled { margin-top: 90rpx; /* 调整小屏幕下的顶部间距，增加距离 */ } - .detail-card { - padding: 16rpx; - } + .air-conditioner-settings { padding: 16rpx; diff --git a/src/pages/visual/index.vue b/src/pages/visual/index.vue index e6d74b2..917782c 100644 --- a/src/pages/visual/index.vue +++ b/src/pages/visual/index.vue @@ -64,38 +64,8 @@ export default { iframeUrl: '', // H5平台使用 webviewUrl: '', // APP平台使用 // 设备配置 - playUrl: "ezopen://open.ys7.com/FT1718031/1.hd.live", + playUrl: "ezopen://open.ys7.com/GE9147469/1.hd.live", accessToken: '', - cameraStatus: { - text: '离线', - class: 'offline' - }, - recordingStatus: { - text: '未录制', - class: 'inactive' - }, - qualityIndex: 1, - qualityOptions: ['低', '中', '高', '超高清'], - durationIndex: 2, - durationOptions: ['5分钟', '10分钟', '30分钟', '1小时', '持续录制'], - autoSave: true, - historyList: [ - { - time: '2025-09-29 15:45:33', - duration: '10:30', - size: '125MB' - }, - { - time: '2025-09-29 14:20:15', - duration: '5:45', - size: '68MB' - }, - { - time: '2025-09-29 13:10:22', - duration: '15:20', - size: '189MB' - } - ] } }, onLoad() { @@ -140,7 +110,7 @@ export default { async checkDevice() { console.log('🔍 开始检查设备状态...') - const playUrl = "ezopen://open.ys7.com/FT1718031/1.hd.live" + const playUrl = "ezopen://open.ys7.com/GE9147469/1.hd.live" uni.showLoading({ title: '检查设备中...' diff --git a/src/static/html/1ezviz-iframe.html b/src/static/html/1ezviz-iframe.html deleted file mode 100644 index 5a43f23..0000000 --- a/src/static/html/1ezviz-iframe.html +++ /dev/null @@ -1,371 +0,0 @@ - - - - - - 萤石云播放器 - - - -
正在加载播放器...
- - - -
-
-
监控已暂停
-
-
- - - - - - - - diff --git a/src/static/html/ezviz-iframe.html b/src/static/html/ezviz-iframe.html index 965328a..187ba26 100644 --- a/src/static/html/ezviz-iframe.html +++ b/src/static/html/ezviz-iframe.html @@ -18,11 +18,29 @@ width: 100%; height: 100vh; } + + /* 优化按钮样式 */ + .demo { + /* padding: 0 12px; */ + } + .btn { + display: block; + width: 100%; + padding: 10px 14px; + border: none; + border-radius: 8px; + font-size: 16px; + cursor: pointer; + /* margin-top: 12px; */ + margin-bottom: 10px; + background-color: #fff; + } -
+
+
-``` - ---- - -### 3. 组件引用错误 - -**症状：** -```javascript -Cannot read properties of undefined (reading 'initEzuikit') -``` - -**原因分析：** -```javascript -// ❌ 错误代码 -this.$nextTick(() => { - this.$refs.playerVideoRef.initEzuikit(config) // ref不存在！ -}) -this.ezstate = true // 这时才开始渲染 - -// 问题：ezstate=false时，组件不在DOM中，ref是undefined -``` - -**解决方案：** -```javascript -// ✅ 正确代码 -// 1. 先渲染组件 -this.ezstate = true - -// 2. 等待Vue更新DOM -await this.$nextTick() - -// 3. 安全调用（添加检查） -if (this.$refs.playerVideoRef) { - this.$refs.playerVideoRef.initEzuikit(config) -} else { - console.error('播放器组件未找到') -} -``` - ---- - -### 4. 视频画面变形 - -**症状：** -- 视频能播放 -- 画面被拉伸或压缩 -- 不是原始比例 - -**检查代码：** -```scss -// ❌ 错误：直接设置固定高度 -.video-content { - width: 100%; - height: 100vh; // 会导致变形！ -} - -// ✅ 正确：使用padding-top保持16:9 -.video-content { - width: 100%; - position: relative; - - &::before { - content: ''; - display: block; - padding-top: 56.25%; /* 16:9比例 */ - } - - :deep(.simple-video-player) { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} -``` - -**其他比例参考：** -```scss -/* 16:9 */ padding-top: 56.25%; -/* 4:3 */ padding-top: 75%; -/* 1:1 */ padding-top: 100%; -/* 21:9 */ padding-top: 42.86%; -``` - ---- - -### 5. 加载很慢 - -**症状：** -- 长时间显示"正在加载..." -- 超过10秒没反应 - -**排查步骤：** - -```javascript -// ✅ 1. 测试网络速度 -uni.request({ - url: 'https://open.ys7.com', - success: (res) => { - console.log('萤石云连接正常') - }, - fail: (err) => { - console.error('网络异常:', err) - } -}) - -// ✅ 2. 切换清晰度 -// 高清 → 标清 -play_url: "ezopen://open.ys7.com/K74237657/1.sd.live" - -// ✅ 3. 检查设备状态 -import deviceChecker from '@/utils/ezvizDeviceChecker.js' -const result = await deviceChecker.comprehensiveCheck(play_url) -console.log('设备状态:', result) -``` - -**优化方案：** -```javascript -// 方案1: 预加载AccessToken -onLoad() { - // 提前获取token - tokenManager.getValidAccessToken() -} - -// 方案2: 添加超时处理 -setTimeout(() => { - if (this.loading) { - this.error = true - this.errorText = '加载超时，请重试' - } -}, 15000) // 15秒超时 - -// 方案3: 使用标清 -play_url: "ezopen://open.ys7.com/K74237657/1.sd.live" -``` - ---- - -## 🛠 调试工具 - -### 1. Chrome 远程调试 - -```bash -# ① 启用ADB调试 -adb devices - -# ② 在Chrome中打开 -chrome://inspect/#devices - -# ③ 找到WebView进程，点击inspect -``` - -### 2. ADB 日志查看 - -```bash -# 查看所有日志 -adb logcat - -# 只看错误 -adb logcat *:E - -# 过滤关键字 -adb logcat | grep -i "chromium\|console\|memory" - -# 查看崩溃日志 -adb logcat | grep -i "fatal\|crash" -``` - -### 3. 控制台调试 - -```javascript -// 在Vue组件中 -console.log('[调试] 初始化配置:', config) -console.log('[调试] ref存在:', !!this.$refs.playerVideoRef) -console.log('[调试] ezstate:', this.ezstate) - -// 在HTML中 - -``` - ---- - -## 📋 完整检查清单 - -### 部署前检查 - -``` -□ 萤石云账号配置 - □ AppKey已配置 - □ AppSecret已配置 - □ 设备序列号正确 - □ 验证码正确 - -□ 文件完整性 - □ EzvizVideoPlayerSimple.vue 存在 - □ ezviz-iframe.html 存在 - □ ezvizTokenManager.js 存在 - □ pages.json 配置正确 - □ manifest.json 配置正确 - -□ 代码正确性 - □ 使用iframe方案（非SDK） - □ 组件调用顺序正确 - □ 16:9比例设置正确 - □ 横屏配置正确 - -□ 功能测试 - □ AccessToken获取成功 - □ 视频能正常播放 - □ 播放/暂停功能正常 - □ 刷新功能正常 - □ 切换摄像头正常 -``` - -### 运行时检查 - -``` -□ 网络连接正常 -□ AccessToken未过期 -□ 设备在线 -□ 内存占用<200MB -□ 无崩溃 -□ 画面不变形 -□ 音频正常 -``` - ---- - -## 🆘 紧急修复 - -### 快速恢复（5分钟） - -如果系统完全不能用，按以下步骤快速恢复： - -```javascript -// ① 清除所有缓存 -uni.clearStorageSync() - -// ② 使用备用Token（临时） -const backupConfig = { - accessToken: "at.4dd7o6hgdb9ywl9c283g0hj27e789uru-2a5ejk6tkf-19b1cb1-azyfqm3a", - play_url: "ezopen://open.ys7.com/K74237657/1.sd.live" // 标清 -} - -// ③ 重启APP -// 在 APP.vue 的 onLaunch 中清除缓存 -onLaunch() { - console.log('APP启动，清除缓存') - uni.clearStorageSync() -} -``` - ---- - -## 📞 获取帮助 - -### 查看日志位置 - -``` -✅ Vue组件日志：开发者工具 Console -✅ APP日志：adb logcat -✅ web-view日志：Chrome inspect -✅ 萤石云日志：萤石云控制台 -``` - -### 常用命令 - -```bash -# 连接设备 -adb devices - -# 查看日志 -adb logcat | grep -i "console" - -# 清除APP数据 -adb shell pm clear 包名 - -# 重启APP -adb shell am force-stop 包名 -adb shell am start 包名/.MainActivity -``` - ---- - -## 🔗 相关文档 - -- 📖 [完整指南](./萤石云APP对接完整指南.md) -- 📝 [快速参考](./README-萤石云对接.md) -- 🌐 [萤石云API文档](https://open.ys7.com/doc/) - ---- - -**最后更新：** 2025-10-06 -**版本：** v1.0 - ---- - -💡 **提示：** 90%的问题都是 AccessToken 过期或配置错误导致的！ -