xzzn/movecheck
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:空调开关、状态

Browse Source
This commit is contained in:
吉浩茹
2025-10-09 17:22:26 +08:00
parent 4b65bea0bb
commit 279cc4a5ea
6 changed files with 518 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

572
萤石云APP对接完整指南.md
View File

@ -271,591 +271,21 @@ src/
### 1. 播放器组件 (`EzvizVideoPlayerSimple.vue`)
```vue
<template>
<view class="simple-video-player">
<!-- APP平台使用web-view -->
<web-view
v-if="webviewUrl"
:src="webviewUrl"
class="video-webview"
></web-view>
<!-- 控制按钮 -->
<view class="control-buttons" v-if="!loading && !error">
<button class="control-btn play-btn" @click="togglePlay">
{{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}
</button>
<button class="control-btn refresh-btn" @click="refresh">
🔄 刷新
</button>
</view>
</view>
</template>
<script>
export default {
name: 'EzvizVideoPlayerSimple',
data() {
return {
webviewUrl: '',
isPlaying: true,
config: null
}
},
methods: {
initEzuikit(config) {
console.log('[播放器] 初始化')
if (!config || !config.accessToken || !config.play_url) {
console.error('配置参数不完整')
return
}
this.config = config
// 构建 URL，通过 URL 参数传递配置
const token = encodeURIComponent(config.accessToken)
const url = encodeURIComponent(config.play_url)
this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
console.log('[播放器] URL已设置')
},
togglePlay() {
if (this.isPlaying) {
// 暂停：清空 URL
this.webviewUrl = ''
this.isPlaying = false
} else {
// 播放：重新加载
if (this.config) {
const token = encodeURIComponent(this.config.accessToken)
const url = encodeURIComponent(this.config.play_url)
this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
this.isPlaying = true
}
}
},
refresh() {
console.log('[播放器] 刷新')
this.webviewUrl = ''
setTimeout(() => {
if (this.config) {
const token = encodeURIComponent(this.config.accessToken)
const url = encodeURIComponent(this.config.play_url)
this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
}
}, 500)
}
}
}
</script>
```
---
### 2. iframe HTML (`ezviz-iframe.html`)
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>萤石云播放器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #1a1a1a;
position: relative;
}
#player-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
object-fit: contain; /* 保持视频比例，不变形 */
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 14px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 15px 30px;
border-radius: 8px;
z-index: 10;
}
.loading::after {
content: '';
display: block;
width: 20px;
height: 20px;
margin: 10px auto 0;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loading" id="loading">正在加载播放器...</div>
<iframe id="player-iframe" allow="autoplay; fullscreen"></iframe>
<script>
function log(message) {
console.log('[iframe播放器] ' + message);
}
// 从URL参数获取配置
function getConfig() {
const params = new URLSearchParams(window.location.search);
return {
accessToken: params.get('accessToken'),
playUrl: params.get('playUrl')
};
}
// 初始化播放器
function init() {
log('初始化开始');
const config = getConfig();
if (!config.accessToken || !config.playUrl) {
log('配置参数不完整');
document.getElementById('loading').textContent = '配置参数错误';
return;
}
log('AccessToken: ' + config.accessToken.substring(0, 20) + '...');
log('PlayUrl: ' + config.playUrl);
try {
// 使用萤石云官方iframe播放器（内存占用小）
const iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
'url=' + encodeURIComponent(config.playUrl) +
'&accessToken=' + encodeURIComponent(config.accessToken) +
'&width=100%' +
'&height=100%' +
'&autoplay=1' +
'&audio=1' +
'&controls=1';
log('iframe URL: ' + iframeUrl);
const iframe = document.getElementById('player-iframe');
iframe.src = iframeUrl;
// 隐藏loading
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
log('播放器加载完成');
}, 2000);
} catch (error) {
log('初始化失败: ' + error.message);
document.getElementById('loading').textContent = '初始化失败';
}
}
// 页面加载完成后初始化
window.onload = function() {
log('页面加载完成');
init();
};
</script>
</body>
</html>
```
---
### 3. 监控页面 (`pages/visual/index.vue`)
```vue
<template>
<view class="visual-monitoring-page">
<!-- 固定头部 -->
<view class="fixed-header">
<text class="header-title">移动式检修车间</text>
</view>
<!-- 内容区域 -->
<view class="tabbar-content">
<!-- 视频播放区域 - 保持16:9比例 -->
<view v-if="ezstate" class="video-wrapper">
<view class="video-content">
<EzvizVideoPlayer ref="playerVideoRef"></EzvizVideoPlayer>
</view>
</view>
<!-- 暂无数据 -->
<view v-else class="no-data-container">
<view class="no-data-icon">📹</view>
<text class="no-data-text">暂无监控数据</text>
</view>
<!-- 视频信息 -->
<view v-if="ezstate" class="video-info">
<view class="info-item">
<text class="info-label">📡 设备状态</text>
<text class="info-value online">在线</text>
</view>
<view class="info-item">
<text class="info-label">🎥 分辨率</text>
<text class="info-value">高清</text>
</view>
<view class="info-item">
<text class="info-label">🔊 音频</text>
<text class="info-value">开启</text>
</view>
</view>
</view>
</view>
</template>
<script>
import EzvizVideoPlayer from '@/components/EzvizVideoPlayerSimple.vue'
import tokenManager from '@/utils/ezvizTokenManager.js'
export default {
components: {
EzvizVideoPlayer
},
data() {
return {
ezstate: false
}
},
onLoad() {
console.log('监控页面加载')
this.getVideoData()
},
methods: {
async getVideoData() {
try {
// 获取 AccessToken
let accessToken
try {
accessToken = await tokenManager.getValidAccessToken()
console.log('✅ AccessToken获取成功')
} catch (error) {
console.error('❌ AccessToken获取失败，使用备用token')
accessToken = "your-backup-access-token"
}
// 配置参数
const ezuikitInfo = {
accessToken: accessToken,
play_url: "ezopen://open.ys7.com/K74237657/1.hd.live"
}
// 先启用视频状态，让组件渲染
this.ezstate = true
// 等待组件渲染完成后初始化播放器
await this.$nextTick()
// 确保ref存在后再调用
if (this.$refs.playerVideoRef) {
this.$refs.playerVideoRef.initEzuikit(ezuikitInfo)
} else {
console.error('❌ 播放器组件未找到')
}
} catch (error) {
console.error('初始化视频失败:', error)
}
}
}
}
</script>
<style lang="scss" scoped>
.visual-monitoring-page {
width: 100%;
height: 100vh;
background: #f5f6fa;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.header-title {
font-size: 32rpx;
color: white;
font-weight: bold;
}
.tabbar-content {
width: 100%;
height: calc(100vh - 100rpx - 100rpx);
margin-top: 100rpx;
padding: 30rpx;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 30rpx;
box-sizing: border-box;
}
.video-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
}
/* 视频内容区域 - 保持16:9宽高比，不变形 */
.video-content {
width: 100%;
max-width: 100%;
position: relative;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
background: #000;
/* 使用padding-top技巧保持16:9宽高比 */
&::before {
content: '';
display: block;
padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 = 56.25% */
}
/* 播放器绝对定位填充容器 */
:deep(.simple-video-player) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.no-data-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400rpx;
background: linear-gradient(135deg, #f5f7fa 0%, #e3e7f0 100%);
border-radius: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.no-data-icon {
font-size: 120rpx;
margin-bottom: 20rpx;
opacity: 0.6;
}
.no-data-text {
font-size: 32rpx;
color: #666;
}
.video-info {
display: flex;
gap: 20rpx;
padding: 20rpx 30rpx;
background: white;
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.info-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
padding: 15rpx 10rpx;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 10rpx;
}
.info-label {
font-size: 24rpx;
color: #666;
white-space: nowrap;
}
.info-value {
font-size: 26rpx;
font-weight: bold;
color: #333;
&.online {
color: #4caf50;
}
}
</style>
```
---
### 4. AccessToken 管理 (`utils/ezvizTokenManager.js`)
```javascript
// 萤石云 AccessToken 管理器
class EzvizTokenManager {
constructor() {
this.appKey = 'your-app-key'
this.appSecret = 'your-app-secret'
this.baseUrl = 'https://open.ys7.com/api/lapp'
}
// 获取有效的 AccessToken
async getValidAccessToken() {
// 1. 先从缓存读取
const cached = uni.getStorageSync('ezviz_access_token')
const expireTime = uni.getStorageSync('ezviz_token_expire')
// 2. 检查是否过期（提前1小时刷新）
const now = Date.now()
if (cached && expireTime && expireTime - now > 3600000) {
console.log('使用缓存的AccessToken')
return cached
}
// 3. 缓存失效，重新获取
console.log('重新获取AccessToken')
return await this.fetchAccessToken()
}
// 从萤石云服务器获取 AccessToken
async fetchAccessToken() {
return new Promise((resolve, reject) => {
uni.request({
url: `${this.baseUrl}/token/get`,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
appKey: this.appKey,
appSecret: this.appSecret
},
success: (res) => {
if (res.data.code === '200') {
const accessToken = res.data.data.accessToken
const expireTime = Date.now() + (res.data.data.expireTime * 1000)
// 缓存 token
uni.setStorageSync('ezviz_access_token', accessToken)
uni.setStorageSync('ezviz_token_expire', expireTime)
console.log('✅ AccessToken获取成功')
resolve(accessToken)
} else {
reject(new Error(res.data.msg || '获取AccessToken失败'))
}
},
fail: (error) => {
reject(error)
}
})
})
}
}
export default new EzvizTokenManager()
```
---
## ⚙️ 配置说明
### 1. pages.json（横屏配置）
```json
{
"pages": [
{
"path": "pages/visual/index",
"style": {
"navigationBarTitleText": "移动式检修车间",
"navigationStyle": "custom",
"pageOrientation": "landscape" // ← 横屏展示
}
}
]
}
```
---
### 2. manifest.json（内存配置）
```json
{
"app-plus": {
"compatible": {
"largeHeap": true // ← 启用大内存堆（512MB）
}
}
}
```
---
### 3. 萤石云参数说明
#### AccessToken 获取
```javascript
// API: https://open.ys7.com/api/lapp/token/get
// 方法: POST
// 参数:
{
appKey: "your-app-key",
appSecret: "your-app-secret"
}
// 返回:
{
code: "200",
data: {
accessToken: "at.xxx...",
expireTime: 7200 // 秒，默认2小时
}
}
```
#### ezopen 播放地址格式
```
ezopen://open.ys7.com/{设备序列号}/{通道号}.{清晰度}.live
@ -1223,3 +653,5 @@ onHide() {
🎉 **恭喜！萤石云APP对接完成！** 🎉