播放器回放版本
This commit is contained in:
吉浩茹
302
src/components/EnvironmentCard.vue
Normal file
302
src/components/EnvironmentCard.vue
Normal file
@ -0,0 +1,302 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="detail-card"
|
||||||
|
:class="[cardClass, { 'disconnected': connectionStatus === 0 }]"
|
||||||
|
@click="$emit('click')"
|
||||||
|
>
|
||||||
|
<view class="detail-header">
|
||||||
|
<view class="detail-icon-container">
|
||||||
|
<view class="detail-icon">{{ icon }}</view>
|
||||||
|
<text class="detail-label">{{ label }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-value-container">
|
||||||
|
<view class="value-unit-wrapper">
|
||||||
|
<text
|
||||||
|
class="detail-value"
|
||||||
|
:class="valueClass"
|
||||||
|
>{{ displayNumber }}</text>
|
||||||
|
<text class="detail-unit">{{ displayUnit }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view
|
||||||
|
class="detail-status"
|
||||||
|
:class="getStatusClass()"
|
||||||
|
></view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="detail-progress-bar">
|
||||||
|
<view
|
||||||
|
class="detail-progress-fill"
|
||||||
|
:class="progressClass"
|
||||||
|
:style="{ width: progress + '%' }"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'EnvironmentCard',
|
||||||
|
props: {
|
||||||
|
// 卡片类型
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
validator: value => ['temperature', 'humidity', 'cleanliness'].includes(value)
|
||||||
|
},
|
||||||
|
// 数值
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 连接状态 (0: 未连接, 1: 连接成功, 2: 异常)
|
||||||
|
connectionStatus: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 进度百分比 (0-100)
|
||||||
|
progress: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 是否超限
|
||||||
|
isOutOfRange: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 是否数据异常
|
||||||
|
isAbnormal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 根据类型返回图标
|
||||||
|
icon() {
|
||||||
|
const iconMap = {
|
||||||
|
temperature: '🌡️',
|
||||||
|
humidity: '💧',
|
||||||
|
cleanliness: '✨'
|
||||||
|
}
|
||||||
|
return iconMap[this.type]
|
||||||
|
},
|
||||||
|
// 根据类型返回标签
|
||||||
|
label() {
|
||||||
|
const labelMap = {
|
||||||
|
temperature: '温度',
|
||||||
|
humidity: '湿度',
|
||||||
|
cleanliness: '洁净度'
|
||||||
|
}
|
||||||
|
return labelMap[this.type]
|
||||||
|
},
|
||||||
|
// 显示的数值
|
||||||
|
displayNumber() {
|
||||||
|
if (this.type === 'cleanliness' && this.value <= 0) {
|
||||||
|
return '-';
|
||||||
|
}
|
||||||
|
return this.value;
|
||||||
|
},
|
||||||
|
// 显示的单位
|
||||||
|
displayUnit() {
|
||||||
|
const unitMap = {
|
||||||
|
temperature: '°C',
|
||||||
|
humidity: '%',
|
||||||
|
cleanliness: 'μg/m³'
|
||||||
|
};
|
||||||
|
return unitMap[this.type];
|
||||||
|
},
|
||||||
|
// 根据类型返回卡片类名
|
||||||
|
cardClass() {
|
||||||
|
const classMap = {
|
||||||
|
temperature: 'temperature-detail-card',
|
||||||
|
humidity: 'humidity-detail-card',
|
||||||
|
cleanliness: 'cleanliness-detail-card'
|
||||||
|
}
|
||||||
|
return classMap[this.type]
|
||||||
|
},
|
||||||
|
// 根据类型返回进度条类名
|
||||||
|
progressClass() {
|
||||||
|
const classMap = {
|
||||||
|
temperature: 'temperature-progress',
|
||||||
|
humidity: 'humidity-progress',
|
||||||
|
cleanliness: 'cleanliness-progress'
|
||||||
|
}
|
||||||
|
return classMap[this.type]
|
||||||
|
},
|
||||||
|
// 数值的类
|
||||||
|
valueClass() {
|
||||||
|
if (this.isOutOfRange) {
|
||||||
|
return 'out-of-range';
|
||||||
|
}
|
||||||
|
if (this.isAbnormal || this.connectionStatus === 2) {
|
||||||
|
return 'abnormal';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取状态点类名
|
||||||
|
getStatusClass() {
|
||||||
|
if (this.connectionStatus === 1) {
|
||||||
|
return 'active'
|
||||||
|
} else if (this.connectionStatus === 2) {
|
||||||
|
return 'warning'
|
||||||
|
} else {
|
||||||
|
return 'inactive'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 卡片基础样式 - 严格按照原样式恢复
|
||||||
|
.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;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 断线状态样式 */
|
||||||
|
&.disconnected {
|
||||||
|
border-color: #95a5a6 !important;
|
||||||
|
border-left-color: #95a5a6 !important;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头部样式
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-unit-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between; /* 改为 space-between */
|
||||||
|
gap: 4rpx;
|
||||||
|
flex-grow: 1; /* 让其填充剩余空间 */
|
||||||
|
// min-width: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&.out-of-range {
|
||||||
|
color: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.abnormal {
|
||||||
|
color: #f1c40f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-unit {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #7f8c8d;
|
||||||
|
width: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态指示器
|
||||||
|
.detail-status {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #27ae60;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inactive {
|
||||||
|
background: #bdc3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background: #f1c40f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 进度条样式
|
||||||
|
.detail-progress-bar {
|
||||||
|
height: 16rpx;
|
||||||
|
background: #ecf0f1;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 特定卡片样式 - 左侧边框颜色
|
||||||
|
.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-card.disconnected .detail-label {
|
||||||
|
color: #95a5a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card.disconnected .detail-value {
|
||||||
|
color: #95a5a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card.disconnected .detail-progress-fill {
|
||||||
|
background: #95a5a6 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -9,66 +9,39 @@
|
|||||||
<view class="tabbar-content">
|
<view class="tabbar-content">
|
||||||
<!-- 环境参数详情 -->
|
<!-- 环境参数详情 -->
|
||||||
<view class="parameter-details">
|
<view class="parameter-details">
|
||||||
<!-- 温度卡片 -->
|
<!-- 温度卡片 -->
|
||||||
<view class="detail-card temperature-detail-card" :class="{ 'disconnected': wdisConnected === 0 }" @click="navigateToParameterRecord">
|
<EnvironmentCard
|
||||||
<view class="detail-header">
|
type="temperature"
|
||||||
<view class="detail-icon-container">
|
:value="temperature"
|
||||||
<view class="detail-icon temperature-icon">🌡️</view>
|
:connection-status="wdisConnected"
|
||||||
<text class="detail-label">温度</text>
|
:progress="temperatureProgress"
|
||||||
</view>
|
:is-out-of-range="temperature > tempSettings.max || temperature < tempSettings.min"
|
||||||
<view class="detail-value-container">
|
:is-abnormal="isTempAbnormal"
|
||||||
<text class="detail-value">{{ temperature }}°C</text>
|
@click="navigateToParameterRecord"
|
||||||
<view class="detail-status" :class="wdisConnected === 1 ? 'active' : (wdisConnected === 2 ? 'warning' : 'inactive')"></view>
|
/>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="detail-progress-bar">
|
|
||||||
<view class="detail-progress-fill temperature-progress" :style="{ width: temperatureProgress + '%' }"></view>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="detail-range">
|
|
||||||
<text class="detail-range-text">{{ 0 }}°C - {{ 100 }}°C</text>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 湿度卡片 -->
|
<!-- 湿度卡片 -->
|
||||||
<view class="detail-card humidity-detail-card" :class="{ 'disconnected': sdisConnected === 0 }" @click="navigateToParameterRecord">
|
<EnvironmentCard
|
||||||
<view class="detail-header">
|
type="humidity"
|
||||||
<view class="detail-icon-container">
|
:value="humidity"
|
||||||
<view class="detail-icon humidity-icon">💧</view>
|
:connection-status="sdisConnected"
|
||||||
<text class="detail-label">湿度</text>
|
:progress="humidityProgress"
|
||||||
</view>
|
:is-out-of-range="humidity > humiditySettings.max || humidity < humiditySettings.min"
|
||||||
<view class="detail-value-container">
|
:is-abnormal="isHumidityAbnormal"
|
||||||
<text class="detail-value">{{ humidity }}%</text>
|
@click="navigateToParameterRecord"
|
||||||
<view class="detail-status" :class="sdisConnected === 1 ? 'active' : (sdisConnected === 2 ? 'warning' : 'inactive')"></view>
|
/>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="detail-progress-bar">
|
|
||||||
<view class="detail-progress-fill humidity-progress" :style="{ width: humidityProgress + '%' }"></view>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="detail-range">
|
|
||||||
<text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 洁净度卡片 -->
|
<!-- 洁净度卡片 -->
|
||||||
<view class="detail-card cleanliness-detail-card" :class="{ 'disconnected': pmisConnected === 0 }" @click="navigateToParameterRecord">
|
<EnvironmentCard
|
||||||
<view class="detail-header">
|
type="cleanliness"
|
||||||
<view class="detail-icon-container">
|
:value="cleanliness"
|
||||||
<view class="detail-icon cleanliness-icon">✨</view>
|
:connection-status="pmisConnected"
|
||||||
<text class="detail-label">洁净度</text>
|
:progress="cleanlinessProgress"
|
||||||
</view>
|
:is-out-of-range="false"
|
||||||
<view class="detail-value-container">
|
:is-abnormal="isCleanlinessAbnormal"
|
||||||
<text class="detail-value">{{ cleanliness > 0 ? cleanliness + 'μg/m³' : '-μg/m³' }}</text>
|
@click="navigateToParameterRecord"
|
||||||
<view class="detail-status" :class="pmisConnected === 1 ? 'active' : (pmisConnected === 2 ? 'warning' : 'inactive')"></view>
|
/>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="detail-progress-bar">
|
|
||||||
<view class="detail-progress-fill cleanliness-progress" :style="{ width: cleanlinessProgress + '%' }"></view>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="detail-range">
|
|
||||||
<text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 空调设置 -->
|
<!-- 空调设置 -->
|
||||||
<view class="air-conditioner-settings">
|
<view class="air-conditioner-settings">
|
||||||
@ -268,8 +241,12 @@
|
|||||||
import mqttDataManager from '@/utils/mqttDataManager.js'
|
import mqttDataManager from '@/utils/mqttDataManager.js'
|
||||||
import { manualReconnect, sendMqttData } from '@/utils/sendMqtt.js'
|
import { manualReconnect, sendMqttData } from '@/utils/sendMqtt.js'
|
||||||
import { thDataApi, alertApi, eventApi, wsdApi, statusApi } from '@/utils/api.js'
|
import { thDataApi, alertApi, eventApi, wsdApi, statusApi } from '@/utils/api.js'
|
||||||
|
import EnvironmentCard from '@/components/EnvironmentCard.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
EnvironmentCard
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
temperature: 0,
|
temperature: 0,
|
||||||
@ -278,6 +255,9 @@ export default {
|
|||||||
temperatureProgress: 0,
|
temperatureProgress: 0,
|
||||||
humidityProgress: 0,
|
humidityProgress: 0,
|
||||||
cleanlinessProgress: 0,
|
cleanlinessProgress: 0,
|
||||||
|
isTempAbnormal: false,
|
||||||
|
isHumidityAbnormal: false,
|
||||||
|
isCleanlinessAbnormal: false,
|
||||||
lastUpdate: '暂无数据',
|
lastUpdate: '暂无数据',
|
||||||
temperatureRange: {
|
temperatureRange: {
|
||||||
min: 0,
|
min: 0,
|
||||||
@ -1514,141 +1494,7 @@ button:disabled {
|
|||||||
margin-bottom: 20rpx;
|
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 {
|
.air-conditioner-settings {
|
||||||
@ -2235,9 +2081,7 @@ button:disabled {
|
|||||||
margin-top: 90rpx; /* 调整小屏幕下的顶部间距，增加距离 */
|
margin-top: 90rpx; /* 调整小屏幕下的顶部间距，增加距离 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-card {
|
|
||||||
padding: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.air-conditioner-settings {
|
.air-conditioner-settings {
|
||||||
padding: 16rpx;
|
padding: 16rpx;
|
||||||
|
|||||||
@ -64,38 +64,8 @@ export default {
|
|||||||
iframeUrl: '', // H5平台使用
|
iframeUrl: '', // H5平台使用
|
||||||
webviewUrl: '', // APP平台使用
|
webviewUrl: '', // APP平台使用
|
||||||
// 设备配置
|
// 设备配置
|
||||||
playUrl: "ezopen://open.ys7.com/FT1718031/1.hd.live",
|
playUrl: "ezopen://open.ys7.com/GE9147469/1.hd.live",
|
||||||
accessToken: '',
|
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() {
|
onLoad() {
|
||||||
@ -140,7 +110,7 @@ export default {
|
|||||||
async checkDevice() {
|
async checkDevice() {
|
||||||
console.log('🔍 开始检查设备状态...')
|
console.log('🔍 开始检查设备状态...')
|
||||||
|
|
||||||
const playUrl = "ezopen://open.ys7.com/FT1718031/1.hd.live"
|
const playUrl = "ezopen://open.ys7.com/GE9147469/1.hd.live"
|
||||||
|
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '检查设备中...'
|
title: '检查设备中...'
|
||||||
|
|||||||
@ -1,371 +0,0 @@
|
|||||||
<!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: 50%;
|
|
||||||
border: none;
|
|
||||||
display: block;
|
|
||||||
object-fit: contain; /* 保持视频比例，不变形 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 简化的控制按钮样式 */
|
|
||||||
.control-buttons {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
z-index: 999;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn {
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 25px;
|
|
||||||
padding: 12px 20px;
|
|
||||||
min-width: 100px;
|
|
||||||
min-height: 44px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
color: white;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn:active {
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-btn {
|
|
||||||
background: rgba(76, 175, 80, 0.8);
|
|
||||||
border-color: rgba(76, 175, 80, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-btn:active {
|
|
||||||
background: rgba(76, 175, 80, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn {
|
|
||||||
background: rgba(33, 150, 243, 0.8);
|
|
||||||
border-color: rgba(33, 150, 243, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:active {
|
|
||||||
background: rgba(33, 150, 243, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮图标样式 */
|
|
||||||
.btn-icon {
|
|
||||||
margin-right: 6px;
|
|
||||||
font-size: 16px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-text {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 简化的暂停占位符样式 */
|
|
||||||
.pause-placeholder {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 50%;
|
|
||||||
background: #000000;
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pause-content {
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pause-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="loading" id="loading">正在加载播放器...</div>
|
|
||||||
<iframe id="player-iframe" allow="autoplay; fullscreen"></iframe>
|
|
||||||
|
|
||||||
<!-- 暂停时的占位符 -->
|
|
||||||
<div class="pause-placeholder" id="pause-placeholder">
|
|
||||||
<div class="pause-content">
|
|
||||||
<div class="pause-title">监控已暂停</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 控制按钮 -->
|
|
||||||
<div class="control-buttons" id="control-buttons" style="display: none;">
|
|
||||||
<div class="control-btn play-btn" id="play-btn">
|
|
||||||
<span class="btn-icon" id="play-icon">▶️</span>
|
|
||||||
<span class="btn-text" id="play-text">播放</span>
|
|
||||||
</div>
|
|
||||||
<div class="control-btn refresh-btn" id="refresh-btn">
|
|
||||||
<span class="btn-icon">🔄</span>
|
|
||||||
<span class="btn-text">刷新</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 configData = getConfig();
|
|
||||||
|
|
||||||
if (!configData.accessToken || !configData.playUrl) {
|
|
||||||
log('配置参数不完整');
|
|
||||||
document.getElementById('loading').textContent = '配置参数错误';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存配置到全局变量
|
|
||||||
config = {
|
|
||||||
accessToken: configData.accessToken,
|
|
||||||
playUrl: configData.playUrl
|
|
||||||
};
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
// 设置初始播放状态
|
|
||||||
isPlaying = true;
|
|
||||||
document.getElementById('play-text').textContent = '暂停';
|
|
||||||
document.getElementById('play-icon').textContent = '⏸️';
|
|
||||||
|
|
||||||
// 隐藏loading，显示控制按钮
|
|
||||||
setTimeout(() => {
|
|
||||||
document.getElementById('loading').style.display = 'none';
|
|
||||||
document.getElementById('control-buttons').style.display = 'flex';
|
|
||||||
log('播放器加载完成，显示控制按钮');
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
log('初始化失败: ' + error.message);
|
|
||||||
document.getElementById('loading').textContent = '初始化失败';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全局状态
|
|
||||||
let isPlaying = true;
|
|
||||||
let config = null;
|
|
||||||
|
|
||||||
// 播放/暂停控制
|
|
||||||
function togglePlay() {
|
|
||||||
log('切换播放状态: ' + (isPlaying ? '暂停' : '播放'));
|
|
||||||
|
|
||||||
const iframe = document.getElementById('player-iframe');
|
|
||||||
const playText = document.getElementById('play-text');
|
|
||||||
const playIcon = document.getElementById('play-icon');
|
|
||||||
const pausePlaceholder = document.getElementById('pause-placeholder');
|
|
||||||
|
|
||||||
if (isPlaying) {
|
|
||||||
// 暂停：清空iframe，显示占位符
|
|
||||||
iframe.src = 'about:blank';
|
|
||||||
pausePlaceholder.style.display = 'flex';
|
|
||||||
playText.textContent = '播放';
|
|
||||||
playIcon.textContent = '▶️';
|
|
||||||
isPlaying = false;
|
|
||||||
log('已暂停播放，显示占位符');
|
|
||||||
} else {
|
|
||||||
// 播放：重新设置iframe URL，隐藏占位符
|
|
||||||
if (config) {
|
|
||||||
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';
|
|
||||||
|
|
||||||
iframe.src = iframeUrl;
|
|
||||||
pausePlaceholder.style.display = 'none';
|
|
||||||
playText.textContent = '暂停';
|
|
||||||
playIcon.textContent = '⏸️';
|
|
||||||
isPlaying = true;
|
|
||||||
log('已开始播放，隐藏占位符');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新播放器
|
|
||||||
function refreshPlayer() {
|
|
||||||
log('刷新播放器');
|
|
||||||
|
|
||||||
const iframe = document.getElementById('player-iframe');
|
|
||||||
const playText = document.getElementById('play-text');
|
|
||||||
const playIcon = document.getElementById('play-icon');
|
|
||||||
const pausePlaceholder = document.getElementById('pause-placeholder');
|
|
||||||
|
|
||||||
// 先清空，显示加载状态
|
|
||||||
iframe.src = 'about:blank';
|
|
||||||
pausePlaceholder.style.display = 'none';
|
|
||||||
|
|
||||||
// 延迟重新加载
|
|
||||||
setTimeout(() => {
|
|
||||||
if (config) {
|
|
||||||
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';
|
|
||||||
|
|
||||||
iframe.src = iframeUrl;
|
|
||||||
playText.textContent = '暂停';
|
|
||||||
playIcon.textContent = '⏸️';
|
|
||||||
isPlaying = true;
|
|
||||||
log('刷新完成');
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 页面加载完成后初始化
|
|
||||||
window.onload = function() {
|
|
||||||
log('页面加载完成');
|
|
||||||
|
|
||||||
// 绑定按钮事件
|
|
||||||
document.getElementById('play-btn').addEventListener('click', togglePlay);
|
|
||||||
document.getElementById('refresh-btn').addEventListener('click', refreshPlayer);
|
|
||||||
|
|
||||||
init();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页面卸载时清理资源
|
|
||||||
window.onbeforeunload = function() {
|
|
||||||
log('页面即将卸载，清理播放器资源');
|
|
||||||
try {
|
|
||||||
const iframe = document.getElementById('player-iframe');
|
|
||||||
if (iframe) {
|
|
||||||
iframe.src = 'about:blank'; // 清空iframe源
|
|
||||||
log('播放器资源已清理');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
log('清理播放器资源失败: ' + error.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页面隐藏时暂停播放
|
|
||||||
document.addEventListener('visibilitychange', function() {
|
|
||||||
if (document.hidden) {
|
|
||||||
log('页面隐藏，暂停播放');
|
|
||||||
try {
|
|
||||||
const iframe = document.getElementById('player-iframe');
|
|
||||||
if (iframe) {
|
|
||||||
iframe.style.display = 'none';
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
log('暂停播放失败: ' + error.message);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
log('页面显示，恢复播放');
|
|
||||||
try {
|
|
||||||
const iframe = document.getElementById('player-iframe');
|
|
||||||
if (iframe) {
|
|
||||||
iframe.style.display = 'block';
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
log('恢复播放失败: ' + error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -18,11 +18,29 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div className="demo">
|
<div class="demo">
|
||||||
|
<button class="btn reset-btn" onclick="resetPlayer()">刷新播放器</button>
|
||||||
<div id="video-container"></div>
|
<div id="video-container"></div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
@ -48,43 +66,28 @@
|
|||||||
// 获取配置
|
// 获取配置
|
||||||
const config = getConfig();
|
const config = getConfig();
|
||||||
|
|
||||||
// 验证参数
|
// 封装创建播放器逻辑，便于复用
|
||||||
if (!config.accessToken || !config.playUrl) {
|
function createPlayer(cfg) {
|
||||||
console.error('❌ 缺少必要参数！请在URL中提供 accessToken 和 playUrl');
|
console.log('🎬 开始创建播放器');
|
||||||
alert('缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
|
|
||||||
} else {
|
|
||||||
console.log('✅ 参数验证通过，开始创建播放器');
|
|
||||||
|
|
||||||
// 使用URL参数创建播放器
|
|
||||||
player = new EZUIKit.EZUIKitPlayer({
|
player = new EZUIKit.EZUIKitPlayer({
|
||||||
id: "video-container", // 视频容器ID
|
id: "video-container", // 视频容器ID
|
||||||
url: config.playUrl,
|
url: cfg.playUrl,
|
||||||
accessToken: config.accessToken,
|
accessToken: cfg.accessToken,
|
||||||
template: "voice", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
|
template: "mobileRec", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
|
||||||
|
|
||||||
// 官方demo token
|
|
||||||
// template: "voice",
|
|
||||||
// url: "ezopen://open.ys7.com/BC7900686/1.live",
|
|
||||||
// accessToken: "ra.84wglyar4c3r6hozd6u92ser0r854lbi-5c1dgl7mi6-1q2swlg-b0hpmwcqg",
|
|
||||||
|
|
||||||
width: width,
|
width: width,
|
||||||
height: (width * 9) / 16,
|
height: (width * 9) / 16,
|
||||||
language: "zh", // zh | en
|
language: "zh", // zh | en
|
||||||
env: {
|
// env: {
|
||||||
// https://open.ys7.com/help/1772?h=domain
|
// domain: "https://open.ys7.com",
|
||||||
// domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
|
// },
|
||||||
domain: "https://open.ys7.com",
|
// loggerOptions: {
|
||||||
},
|
// level: "INFO",
|
||||||
// 日志打印设置
|
// name: "ezuikit",
|
||||||
loggerOptions: {
|
// showTime: true,
|
||||||
level: "INFO", // INFO LOG WARN ERROR
|
// },
|
||||||
name: "ezuikit",
|
// streamInfoCBType: 1,
|
||||||
showTime: true,
|
|
||||||
},
|
|
||||||
// 视频流的信息回调类型
|
|
||||||
streamInfoCBType: 1,
|
|
||||||
staticPath: "./ezuikit_static", // 使用本地静态资源
|
staticPath: "./ezuikit_static", // 使用本地静态资源
|
||||||
// 错误处理
|
|
||||||
handleError: (error) => {
|
handleError: (error) => {
|
||||||
console.error('❌ 播放器错误:', error);
|
console.error('❌ 播放器错误:', error);
|
||||||
}
|
}
|
||||||
@ -125,6 +128,15 @@
|
|||||||
console.log('🎬 播放器初始化完成');
|
console.log('🎬 播放器初始化完成');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 验证参数并创建初始播放器
|
||||||
|
if (!config.accessToken || !config.playUrl) {
|
||||||
|
console.error('❌ 缺少必要参数！请在URL中提供 accessToken 和 playUrl');
|
||||||
|
alert('缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
|
||||||
|
} else {
|
||||||
|
console.log('✅ 参数验证通过，开始创建播放器');
|
||||||
|
createPlayer(config);
|
||||||
|
}
|
||||||
|
|
||||||
// 控制函数
|
// 控制函数
|
||||||
function fullScreen() {
|
function fullScreen() {
|
||||||
if (player) {
|
if (player) {
|
||||||
@ -176,6 +188,28 @@
|
|||||||
player = null;
|
player = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 重置播放器：销毁并重新创建
|
||||||
|
function resetPlayer() {
|
||||||
|
console.log('🔄 重置播放器：开始');
|
||||||
|
// 清空容器内容，确保干净的DOM
|
||||||
|
var container = document.getElementById('video-container');
|
||||||
|
if (container) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
}
|
||||||
|
// 销毁旧实例
|
||||||
|
destroy();
|
||||||
|
// 重新获取配置（支持URL参数变更后刷新）
|
||||||
|
var latestConfig = getConfig();
|
||||||
|
if (!latestConfig.accessToken || !latestConfig.playUrl) {
|
||||||
|
console.error('❌ 重置失败：缺少必要参数');
|
||||||
|
alert('重置失败：缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 重新创建播放器
|
||||||
|
createPlayer(latestConfig);
|
||||||
|
console.log('✅ 重置完成：播放器已重新创建');
|
||||||
|
}
|
||||||
|
|
||||||
// 页面卸载时清理
|
// 页面卸载时清理
|
||||||
window.onbeforeunload = function() {
|
window.onbeforeunload = function() {
|
||||||
destroy();
|
destroy();
|
||||||
|
|||||||
427
故障排查流程.md
427
故障排查流程.md
@ -1,427 +0,0 @@
|
|||||||
# 萤石云播放器故障排查流程
|
|
||||||
|
|
||||||
> 快速定位和解决问题
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔍 问题诊断流程图
|
|
||||||
|
|
||||||
```
|
|
||||||
视频无法播放
|
|
||||||
↓
|
|
||||||
是否显示黑屏？
|
|
||||||
├─ 是 → 检查AccessToken
|
|
||||||
│ ├─ 已过期 → 刷新Token
|
|
||||||
│ └─ 有效 → 检查设备状态
|
|
||||||
│
|
|
||||||
└─ 否 → 是否显示加载中？
|
|
||||||
├─ 是 → 检查网络
|
|
||||||
│ ├─ 网络正常 → 检查play_url格式
|
|
||||||
│ └─ 网络异常 → 修复网络
|
|
||||||
│
|
|
||||||
└─ 否 → APP是否崩溃？
|
|
||||||
├─ 是 → 查看崩溃日志
|
|
||||||
│ └─ OutOfMemoryError → 已使用iframe方案？
|
|
||||||
│ ├─ 否 → 切换到iframe方案
|
|
||||||
│ └─ 是 → 检查manifest.json
|
|
||||||
│
|
|
||||||
└─ 否 → 其他问题 → 查看详细日志
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🚨 常见错误码速查
|
|
||||||
|
|
||||||
### 1. 黑屏不播放
|
|
||||||
|
|
||||||
**症状：**
|
|
||||||
- 页面加载完成
|
|
||||||
- 显示黑色屏幕
|
|
||||||
- 无加载提示
|
|
||||||
|
|
||||||
**排查步骤：**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// ✅ 步骤1: 检查AccessToken
|
|
||||||
console.log('AccessToken:', accessToken)
|
|
||||||
console.log('Token长度:', accessToken.length) // 应该>50
|
|
||||||
|
|
||||||
// ✅ 步骤2: 检查play_url格式
|
|
||||||
console.log('PlayUrl:', play_url)
|
|
||||||
// 正确格式: ezopen://open.ys7.com/K74237657/1.hd.live
|
|
||||||
|
|
||||||
// ✅ 步骤3: 检查iframe URL
|
|
||||||
console.log('iframeUrl:', iframeUrl)
|
|
||||||
// 应该包含: https://open.ys7.com/ezopen/h5/iframe?
|
|
||||||
|
|
||||||
// ✅ 步骤4: 测试Token有效性
|
|
||||||
uni.request({
|
|
||||||
url: 'https://open.ys7.com/api/lapp/device/list',
|
|
||||||
method: 'POST',
|
|
||||||
data: { accessToken: accessToken },
|
|
||||||
success: (res) => {
|
|
||||||
console.log('Token测试结果:', res.data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
**解决方案：**
|
|
||||||
```javascript
|
|
||||||
// 方案1: 刷新Token
|
|
||||||
uni.removeStorageSync('ezviz_access_token')
|
|
||||||
const newToken = await tokenManager.getValidAccessToken()
|
|
||||||
|
|
||||||
// 方案2: 检查设备序列号
|
|
||||||
// 确认设备序列号正确，格式: K74237657
|
|
||||||
|
|
||||||
// 方案3: 切换清晰度
|
|
||||||
play_url: "ezopen://open.ys7.com/K74237657/1.sd.live" // 标清
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. APP 崩溃（OutOfMemoryError）
|
|
||||||
|
|
||||||
**症状：**
|
|
||||||
```
|
|
||||||
FATAL EXCEPTION: main
|
|
||||||
java.lang.OutOfMemoryError: Failed to allocate...
|
|
||||||
```
|
|
||||||
|
|
||||||
**检查清单：**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# ✅ 1. 确认使用iframe方案
|
|
||||||
grep -r "ezuikit.js" src/
|
|
||||||
# 如果有结果 → 错误！不应该加载本地SDK
|
|
||||||
|
|
||||||
# ✅ 2. 检查manifest.json
|
|
||||||
cat src/manifest.json | grep largeHeap
|
|
||||||
# 应该有: "largeHeap": true
|
|
||||||
|
|
||||||
# ✅ 3. 查看实际内存使用
|
|
||||||
adb shell dumpsys meminfo 包名
|
|
||||||
```
|
|
||||||
|
|
||||||
**解决方案：**
|
|
||||||
|
|
||||||
```json
|
|
||||||
// ① 确保manifest.json配置正确
|
|
||||||
{
|
|
||||||
"app-plus": {
|
|
||||||
"compatible": {
|
|
||||||
"largeHeap": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ② 使用iframe方案
|
|
||||||
// src/static/html/ezviz-iframe.html
|
|
||||||
<iframe src="https://open.ys7.com/ezopen/h5/iframe?..."></iframe>
|
|
||||||
|
|
||||||
// ③ 不要加载本地SDK
|
|
||||||
// ❌ 删除这行：<script src="ezuikit.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 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中
|
|
||||||
<script>
|
|
||||||
console.log('[iframe] 开始初始化')
|
|
||||||
console.log('[iframe] AccessToken:', accessToken.substring(0, 20))
|
|
||||||
console.log('[iframe] PlayUrl:', playUrl)
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📋 完整检查清单
|
|
||||||
|
|
||||||
### 部署前检查
|
|
||||||
|
|
||||||
```
|
|
||||||
□ 萤石云账号配置
|
|
||||||
□ 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 过期或配置错误导致的！
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user