nongxiaoyu/pages/device/device-list/detail-camera.vue

<template>
  <view class="container">
    <!-- 设备头部信息区域 -->
    <view class="device-header">
      <view class="device-info-row">
        <view class="device-name-container">
          <text class="device-name">{{ deviceInfo.name }}</text>
          <view 
            class="status-tag" 
            :class="deviceInfo.status === 1 ? 'status-online' : 'status-offline'"
          >
            <view class="status-dot" :class="{'offline-dot': deviceInfo.status === 1}"></view>
            {{ deviceInfo.status === 1 ? '在线' : '离线' }}
          </view>
        </view>
        
        <view class="refresh-btn" :class="{'refreshing': isRefreshing}" @tap="refreshData">
          <image src="/static/icons/refresh_icon.png" mode="aspectFit" style="width: 22px; height: 22px;"></image>
        </view>
      </view>
      
      <view class="device-meta-row">
        <view class="device-meta-item">
          <view class="meta-icon">
            <image src="/static/icons/device_icon.png" mode="aspectFit" style="width: 36rpx; height: 36rpx;"></image>
          </view>
          <text class="meta-label">设备编号：</text>
          <text class="meta-value">{{ deviceInfo.deviceId }}</text>
        </view>
        
        <view class="device-meta-item">
          <view class="meta-icon">
            <image src="/static/icons/location_icon.png" mode="aspectFit" style="width: 36rpx; height: 36rpx;"></image>
          </view>
          <text class="meta-label">安装位置：</text>
          <text class="meta-value">{{ deviceInfo.location }}</text>
        </view>
        
        <view class="device-meta-item">
          <view class="meta-icon">
            <image src="/static/icons/clock_icon.png" mode="aspectFit" style="width: 36rpx; height: 36rpx;"></image>
          </view>
          <text class="meta-label">最近更新：</text>
          <text class="meta-value">{{ formatDate(deviceInfo.lastUpdate) }}</text>
        </view>
      </view>
    </view>
    
    <!-- 视频预览区域 -->
    <view class="video-section">
      <view class="video-container" :class="{'fullscreen-mode': isFullscreen}">
        <image v-if="!isPlaying" src="/static/images/video-placeholder.jpg" mode="aspectFill" class="video-placeholder"></image>
        
        <!-- 使用跨平台视频播放组件 -->
        <!-- #ifdef H5 -->
        <view v-if="isPlaying" class="h5-video-wrapper">
          <Jessibuca ref="jessibucaRef" :videoUrl="getH5StreamUrl" :hasAudio="true" @error="onVideoError" />
        </view>
        <!-- #endif -->
        
        <!-- #ifdef MP-WEIXIN -->
        <live-player 
          v-if="isPlaying"
          id="videoPlayer"
          :src="getMiniProgramStreamUrl" 
          mode="live"
          :autoplay="true"
          :muted="isMuted"
          object-fit="contain"
          @statechange="onStateChange"
          @error="onVideoError"
          @fullscreenchange="onFullscreenChange"
          class="video-player"
        ></live-player>
        <!-- #endif -->
        
        <!-- 视频控制层 -->
        <view class="video-controls">
          <view class="control-row top-controls">
            <view class="signal-indicator">
              <image src="/static/icons/signal_icon.png" mode="aspectFit" style="width: 16px; height: 16px;"></image>
              <text class="signal-text">信号良好</text>
            </view>
            
            <view class="fullscreen-button" @click="toggleFullscreen">
              <image src="/static/icons/resize_icon.png" mode="aspectFit" style="width: 20px; height: 20px;"></image>
            </view>
          </view>
          
          <view class="control-row center-controls">
            <view v-if="!isPlaying" class="play-button" @click="togglePlayState">
              <image src="/static/icons/play_icon.png" mode="aspectFit" style="width: 32px; height: 32px;"></image>
            </view>
            <view v-else class="center-button-container" @click="togglePlayState">
              <view class="pause-icon">
                <image src="/static/icons/pause_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
              </view>
            </view>
          </view>
          
          <view class="control-row bottom-controls">
            <view class="video-time">{{ currentTime }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 云台控制区域 -->
    <!-- <view class="ptz-section">
      <view class="section-title">云台控制</view>
      
      <view class="ptz-container">
        // 圆形云台控制
        <view class="ptz-circle-container">
          上箭头
          <view class="ptz-arrow ptz-up" @touchstart="controlPTZ('up', true)" @touchend="controlPTZ('up', false)">
            <image src="/static/icons/arrow_up_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
          
          // 左箭头
          <view class="ptz-arrow ptz-left" @touchstart="controlPTZ('left', true)" @touchend="controlPTZ('left', false)">
            <image src="/static/icons/arrow_left_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
          
          中心拍照按钮
          <view class="ptz-center" @click="takeScreenshot">
            <image src="/static/icons/camera_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
          
          右箭头
          <view class="ptz-arrow ptz-right" @touchstart="controlPTZ('right', true)" @touchend="controlPTZ('right', false)">
            <image src="/static/icons/arrow_right_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
          
          下箭头
          <view class="ptz-arrow ptz-down" @touchstart="controlPTZ('down', true)" @touchend="controlPTZ('down', false)">
            <image src="/static/icons/arrow_down_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
        </view>
        
        底部操作按钮
        <view class="ptz-bottom-controls">
          <view class="ptz-bottom-button" @touchstart="controlZoom('out', true)" @touchend="controlZoom('out', false)">
            <image src="/static/icons/zoom01_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
          
          <view class="ptz-bottom-button" @click="resetPTZ">
            <image src="/static/icons/resetPTZ_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
          
          <view class="ptz-bottom-button" @touchstart="controlZoom('in', true)" @touchend="controlZoom('in', false)">
            <image src="/static/icons/zoom02_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
        </view>
      </view>
    </view> -->
    
    <!-- 快捷功能按钮 -->
    <!-- <view class="quick-actions">
      <view class="action-button" @click="toggleVoiceIntercom">
        <view class="action-icon">
          <image src="/static/icons/Voice_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
        </view>
        <text class="action-text">语音对讲</text>
      </view>
      
      <view class="action-button" @click="toggleMute">
        <view class="action-icon">
          <image v-if="isMuted" src="/static/icons/muted_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          <image v-else src="/static/icons/unmuted_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
        </view>
        <text class="action-text">{{ isMuted ? '取消静音' : '静音' }}</text>
      </view>
      
      <view class="action-button" @click="navigateToHistory">
        <view class="action-icon">
          <image src="/static/icons/action_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
        </view>
        <text class="action-text">视频回看</text>
      </view>
    </view> -->
    
    <!-- 告警信息列表 -->
    <view class="alerts-section">
      <view class="section-title">
        <text>告警信息</text>
        <view class="alert-badge" v-if="getUnhandledAlerts.length > 0">{{ getUnhandledAlerts.length }}</view>
      </view>
      
      <view class="alerts-list" v-if="getUnhandledAlerts.length > 0">
        <view 
          v-for="(item, index) in getUnhandledAlerts.slice(0, 3)" 
          :key="index"
          class="alert-item"
          :class="{
            'alert-urgent': item.level === 3, 
            'alert-warning': item.level === 2, 
            'alert-info': item.level === 1
          }"
        >
          <view class="alert-item-icon">
            <image v-if="item.level === 3" src="/static/icons/warning_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
            <image v-else-if="item.level === 2" src="/static/icons/info_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
            <image v-else src="/static/icons/success_icon.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
          </view>
          
          <view class="alert-item-info">
            <text class="alert-item-type">{{ item.type }}</text>
            <text class="alert-item-level">
              {{ item.level === 3 ? '紧急' : item.level === 2 ? '警告' : '提示' }}
            </text>
          </view>
          
          <view class="alert-item-time">{{ formatSmartTime(item.time) }}</view>
        </view>
      </view>
      
      <view v-else class="empty-alert">
        <text class="empty-text">暂无告警信息</text>
      </view>
    </view>
  </view>
</template>

<script>
	import { getDeviceCollectorDetail } from "@/api/services/device.js";
	import { formatSmartTime, formatDate, getFormattedTime} from '@/utils/dateUtils'
	import { isPlayableInMiniProgram, buildPlatformStreamUrls } from '@/utils/media-utils'
	import config from '@/config/config'
	// 导入Jessibuca组件
	// #ifdef H5
	import Jessibuca from '@/components/common/jessibuca.vue'
	// #endif

export default {
	components: {
	    // #ifdef H5
	    Jessibuca
	    // #endif
	  },
  data() {
    return {
      deviceInfo: {
        deviceId: '',
        name: '设备加载中...',
        status: '',
        location: '正在获取位置...',
        lastUpdate: '',
        deviceType: 'weather' ,// 默认类型，会根据API返回更新
      	deviceTypeId:null,
		    streamUrl: '',
        originalStreamUrl: 'ws://121.4.16.100:6080/rtp/34020000001110000001_34020000001320000012.live.flv',

      },
      isPlaying: false,
      isMuted: false,
      isRecording: false,
      isFullscreen: false,
      isVoiceActive: false,
      isGridView: false,
      isZoomMode: false,
      currentTime: '14:30:25',
      // 模拟历史录像数据
      recordHistory: [
        { id: 1, startTime: '今天 12:30', duration: '00:15:30', url: '' },
        { id: 2, startTime: '今天 10:15', duration: '00:05:22', url: '' },
        { id: 3, startTime: '昨天 18:45', duration: '00:30:10', url: '' },
        { id: 4, startTime: '昨天 14:20', duration: '00:10:05', url: '' }
      ],
      // 模拟告警数据
      alertHistory: [],
      livePlayerContext: null, // 小程序视频上下文
	  isRefreshing: false
    }
  },
  
  computed: {
    // 获取所有未处理的告警
    getUnhandledAlerts() {
      return this.alertHistory.filter(alert => alert.status === 0);
    },
    // 获取H5环境使用的流地址
    getH5StreamUrl() {
      // 首先尝试使用设备返回的流URL
      // if (this.deviceInfo.streamUrl) {
      //   return this.deviceInfo.streamUrl;
      // }
      
      // 如果没有设备特定的URL，则使用默认原始流
      return this.deviceInfo.originalStreamUrl || config.streamServer.wsFlvServer;
    },
    
    // 获取小程序环境使用的流地址
    getMiniProgramStreamUrl() {
      // 获取合适的小程序流地址
      const { streamServer } = config;
      
      // 如果有设备特定的RTMP流，优先使用
      if (this.deviceInfo.rtmpUrl) {
        return this.deviceInfo.rtmpUrl;
      }
      
      // 其次尝试使用HLS流
      if (this.deviceInfo.hlsUrl) {
        return this.deviceInfo.hlsUrl;
      }
      
      // 最后使用配置的默认流
      return streamServer.rtmpServer || streamServer.hlsServer;
    },
  },
  
  onReady() {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: this.deviceInfo.name
    })
    
    // 模拟更新时间
    this.startTimeUpdate()
    
    // #ifdef MP-WEIXIN
    // 创建小程序视频上下文
    this.livePlayerContext = uni.createLivePlayerContext('videoPlayer', this)
    // #endif
    
    // #ifdef H5
    // 加载Jessibuca的JS库
    this.loadJessibucaScript()
    // #endif
    
    // 监听全屏状态变化
    this.setupFullscreenListener()
    
    // 添加键盘事件监听
    this.setupKeyboardListener()
    
    // 初始化流地址
    this.initStreamUrl()
  },
  beforeUnmount() {
      // 移除全屏状态监听
      this.removeFullscreenListener()
      
      // 移除键盘事件监听
      this.removeKeyboardListener()
    },
  
  onLoad(options) {
	  uni.$once('passDeviceData', (data) => {
	      console.log('接收到数据', data);
	  		  // 如果有传入设备ID，则获取设备信息
	  		  if (data && data.deviceId) {
	  		    this.deviceInfo.deviceId = data.deviceId;
	  		    this.deviceInfo.location = data.fieldName;
	  		    this.deviceInfo.name = data.deviceName;
	  		    this.deviceInfo.status = data.status;
	  		    this.deviceInfo.deviceTypeId = data.deviceTypeId || '';
	  		    
	  		    // 加载设备详情
	  		    this.fetchDeviceInfo();
	  		  }
	    });
  },
  
  methods: {
	  formatDate,
	 formatSmartTime,
	 // 加载Jessibuca脚本
	     loadJessibucaScript() {
	       const script = document.createElement('script')
	       script.src = '/static/js/jessibuca/jessibuca.js'
	       script.onload = () => {
	         console.log('Jessibuca 脚本加载成功')
	       }
	       script.onerror = (error) => {
	         console.error('Jessibuca 脚本加载失败:', error)
	       }
	       document.head.appendChild(script)
	     },
    // 获取设备信息
    fetchDeviceInfo(deviceId) {
      // 这里应该是API请求，暂时用模拟数据
      console.log('获取设备信息：', deviceId)
	  getDeviceCollectorDetail(this.deviceInfo.deviceId)
	    .then(res => {
			if (res.data.data && res.data.code === 200) {
			  const detail = res.data.data;
			  this.deviceInfo.lastUpdate = getFormattedTime()
			  // 更新页面标题
			  uni.setNavigationBarTitle({
			    title: this.deviceInfo.name
			  });
			  // 更新告警信息
			  if (detail.alertRecordList && detail.alertRecordList.length > 0) {
			    this.alertHistory = detail.alertRecordList.map(alert => ({
			      id: alert.alertId,
			      time: alert.alertTime,
			      type: alert.alertContent,
			      status: alert.processStatus,
			      level: alert.alertLevel
			    }));
			  }
			}
		})
    },
    
    // 播放/暂停切换
    togglePlayState() {
      if (!this.isPlaying) {
        // 从未播放状态切换到播放状态
        this.isPlaying = true
        
        // #ifdef MP-WEIXIN
        // 小程序环境中，短暂延迟确保组件已加载
        setTimeout(() => {
          if (this.livePlayerContext) {
            this.livePlayerContext.play({
              success: () => {
                console.log('小程序视频播放成功')
                uni.vibrateShort()
              },
              fail: (err) => {
                console.error('小程序视频播放失败:', err)
                uni.showToast({
                  title: '视频播放失败',
                  icon: 'none'
                })
              }
            })
          }
        }, 300)
        // #endif
        
        // #ifdef H5
        // 浏览器环境中使用Jessibuca
        setTimeout(() => {
          uni.vibrateShort()
        }, 300)
        // #endif
      } else {
        // 从播放状态切换到暂停状态
        // #ifdef H5
        if (this.$refs.jessibucaRef) {
          this.$refs.jessibucaRef.pause()
        }
        // #endif
        
        // #ifdef MP-WEIXIN
        if (this.livePlayerContext) {
          this.livePlayerContext.pause()
        }
        // #endif
        
        this.isPlaying = false
        
        // 在页面上显示暂停状态
        uni.showToast({
          title: '视频已暂停',
          icon: 'none',
          duration: 1500
        })
      }
    },
    
    // 静音切换
    toggleMute() {
      this.isMuted = !this.isMuted
      
      // #ifdef H5
      if (this.$refs.jessibucaRef) {
        if (this.isMuted) {
          this.$refs.jessibucaRef.mute()
        } else {
          this.$refs.jessibucaRef.cancelMute()
        }
      }
      // #endif
      
      // #ifdef MP-WEIXIN
      // 小程序环境中直接通过属性绑定控制静音
      // #endif
    },
    
    // 全屏切换
    toggleFullscreen() {
      if (!this.isPlaying) {
        // 如果视频未播放，先开始播放
        this.togglePlayState()
        // 延迟执行全屏操作，等待视频元素加载
        setTimeout(() => {
          this.setFullscreen(true)
        }, 500)
      } else {
        this.setFullscreen(!this.isFullscreen)
      }
    },
    
    // 设置全屏状态
    setFullscreen(fullscreen) {
      this.isFullscreen = fullscreen
      
      // #ifdef H5
      // 浏览器环境
      if (this.isFullscreen) {
        // 如果是移动设备，尝试使用系统全屏
        const ua = navigator.userAgent.toLowerCase()
        const isMobile = /mobile|android|iphone|ipad/.test(ua)
        
        if (isMobile && this.$refs.jessibucaRef) {
          // 在移动设备上使用Jessibuca的全屏API
          this.$refs.jessibucaRef.fullscreenSwich()
        } else {
          // 适配屏幕尺寸
          setTimeout(() => {
            if (this.$refs.jessibucaRef) {
              this.$refs.jessibucaRef.resize()
            }
          }, 300)
        }
        
        // 锁定屏幕方向为横屏
        if (window.screen && window.screen.orientation && window.screen.orientation.lock) {
          window.screen.orientation.lock('landscape').catch(err => {
            console.error('无法锁定屏幕方向:', err)
          })
        }
      } else {
        // 退出全屏状态
        if (this.$refs.jessibucaRef) {
          // 在某些情况下需要先调用Jessibuca的退出全屏
          if (this.$refs.jessibucaRef.isFullscreen()) {
            this.$refs.jessibucaRef.fullscreenSwich()
          }
          
          // 重置视频大小
          setTimeout(() => {
            if (this.$refs.jessibucaRef) {
              this.$refs.jessibucaRef.resize()
            }
          }, 300)
        }
        
        // 解除屏幕方向锁定
        if (window.screen && window.screen.orientation && window.screen.orientation.unlock) {
          window.screen.orientation.unlock()
        }
      }
      // #endif
      
      // #ifdef MP-WEIXIN
      // 小程序环境
      if (this.livePlayerContext) {
        if (this.isFullscreen) {
          this.livePlayerContext.requestFullScreen({
            direction: 90, // 横屏
            success: () => {
              console.log('进入全屏模式成功')
            },
            fail: (err) => {
              console.error('进入全屏模式失败:', err)
            }
          })
        } else {
          this.livePlayerContext.exitFullScreen({
            success: () => {
              console.log('退出全屏模式成功')
            },
            fail: (err) => {
              console.error('退出全屏模式失败:', err)
            }
          })
        }
      }
      // #endif
    },
    
    // 截图
    takeScreenshot() {
      // #ifdef H5
      if (this.$refs.jessibucaRef && this.isPlaying) {
        this.$refs.jessibucaRef.screenshot()
        uni.showToast({
          title: '截图已保存',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '请先播放视频',
          icon: 'none'
        })
      }
      // #endif
      
      // #ifdef MP-WEIXIN
      if (this.livePlayerContext && this.isPlaying) {
        this.livePlayerContext.snapshot({
          success: (res) => {
            console.log('截图成功:', res.tempImagePath)
            // 可以保存到相册或做其他处理
            uni.saveImageToPhotosAlbum({
              filePath: res.tempImagePath,
              success: () => {
                uni.showToast({
                  title: '截图已保存到相册',
                  icon: 'success'
                })
              },
              fail: (err) => {
                console.error('保存截图失败:', err)
                uni.showToast({
                  title: '保存截图失败',
                  icon: 'none'
                })
              }
            })
          },
          fail: (err) => {
            console.error('截图失败:', err)
            uni.showToast({
              title: '截图失败',
              icon: 'none'
            })
          }
        })
      } else {
        uni.showToast({
          title: '请先播放视频',
          icon: 'none'
        })
      }
      // #endif
    },
    
    // 小程序播放器状态变化处理
    onStateChange(e) {
      console.log('播放器状态变化:', e.detail)
      const state = e.detail.code
      // 根据状态码处理
      switch (state) {
        case 2001: // 已连接服务器
          console.log('已连接服务器')
          break
        case 2002: // 已连接服务器，开始拉流
          console.log('开始拉流')
          break
        case 2003: // 网络接收到首个视频帧
          console.log('网络接收到首个视频帧')
          break
        case 2004: // 视频播放开始
          console.log('视频播放开始')
          break
        case 2005: // 视频播放进度
          console.log('视频播放进度')
          break
        case 2006: // 视频播放结束
          console.log('视频播放结束')
          this.isPlaying = false
          break
        case 2007: // 视频播放Loading
          console.log('视频播放Loading')
          break
        case 2008: // 解码器启动
          console.log('解码器启动')
          break
        case 2009: // 视频分辨率改变
          console.log('视频分辨率改变')
          break
        case -2301: // 网络断连，且重新连接亦不能恢复，播放器已停止
          console.error('网络断连，且重新连接亦不能恢复，播放器已停止')
          this.isPlaying = false
          uni.showToast({
            title: '网络断连，请重试',
            icon: 'none'
          })
          break
        case -2302: // 获取加速拉流地址失败
          console.error('获取加速拉流地址失败')
          break
        case 2101: // 当前视频帧解码失败
          console.error('当前视频帧解码失败')
          break
        case 2102: // 当前音频帧解码失败
          console.error('当前音频帧解码失败')
          break
        case 2103: // 网络断连, 已启动自动重连
          console.warn('网络断连, 已启动自动重连')
          break
        case 2104: // 网络断连, 重连中...
          console.warn('网络断连, 重连中...')
          break
        case 2105: // 网络断连, 重连成功
          console.log('网络断连, 重连成功')
          break
        case 2106: // 网络断连, 重连失败
          console.error('网络断连, 重连失败')
          break
        case 2107: // 播放器连接超时
          console.error('播放器连接超时')
          break
        case 2108: // 获取点播文件信息失败
          console.error('获取点播文件信息失败')
          break
        default:
          console.log('其他状态:', state)
      }
    },
    
    // 小程序全屏状态变化
    onFullscreenChange(e) {
      this.isFullscreen = e.detail.fullScreen
      console.log('全屏状态变化:', this.isFullscreen)
    },
    
    // 初始化流地址
    initStreamUrl() {
      const originalUrl = this.deviceInfo.originalStreamUrl
      // 使用配置中的流服务器信息
      const streamUrls = buildPlatformStreamUrls(originalUrl, {
        streamServer: config.streamServer,
        fallbackToHls: true
      })
      
      // #ifdef H5
      this.deviceInfo.streamUrl = streamUrls.h5Url
      // #endif
      
      // #ifdef MP-WEIXIN
      // 检查是否可以在小程序中播放
      if (streamUrls.miniProgramUrl) {
        this.deviceInfo.streamUrl = streamUrls.miniProgramUrl
      } else {
        // 如果没有可用的小程序播放地址，显示提示
        uni.showToast({
          title: '当前视频流不支持小程序播放',
          icon: 'none',
          duration: 3000
        })
      }
      // #endif
      
      console.log('初始化流地址:', this.deviceInfo.streamUrl)
    },
    
    // 切换九宫格视图
    toggleGridView() {
      this.isGridView = !this.isGridView
      uni.showToast({
        title: this.isGridView ? '切换到多画面模式' : '切换到单画面模式',
        icon: 'none'
      })
    },
    
    // 语音对讲
    toggleVoiceIntercom() {
      this.isVoiceActive = !this.isVoiceActive
      
      if (this.isVoiceActive) {
        uni.showToast({
          title: '语音对讲已开启',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '语音对讲已关闭',
          icon: 'none'
        })
      }
    },
    
    // 云台控制
    controlPTZ(direction, isStart) {
      // 模拟云台控制
      if (isStart) {
        console.log(`开始控制云台: ${direction}`)
        uni.vibrateShort() // 短震动反馈
      } else {
        console.log(`停止控制云台: ${direction}`)
      }
    },
    
    // 云台复位
    resetPTZ() {
      console.log('云台复位')
      uni.vibrateShort() // 短震动反馈
      uni.showToast({
        title: '云台已复位',
        icon: 'none'
      })
    },
    
    // 变焦控制
    controlZoom(type, isStart) {
      // 模拟变焦控制
      if (isStart) {
        console.log(`开始控制变焦: ${type}`)
        uni.vibrateShort() // 短震动反馈
      } else {
        console.log(`停止控制变焦: ${type}`)
      }
    },
    
    // 切换缩放模式
    toggleZoom() {
      this.isZoomMode = !this.isZoomMode
      uni.showToast({
        title: this.isZoomMode ? '进入缩放模式' : '退出缩放模式',
        icon: 'none'
      })
    },
    
    // 添加预设位
    addPreset() {
      uni.showModal({
        title: '添加预设位',
        content: '是否保存当前位置为预设位？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '预设位已保存',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 处理告警点击
    handleAlert(item) {
      uni.navigateTo({
        url: `/pages/alerts/alert-detail?alertId=${item.id}&deviceId=${this.deviceInfo.deviceId}`
      })
    },
    
    // 跳转到历史视频页面
    navigateToHistory() {
      uni.navigateTo({
        url: `/pages/video/history?deviceId=${this.deviceInfo.deviceId}`
      })
    },
    
    // 视频播放错误处理
    onVideoError(e) {
      console.error('视频播放错误:', e);
      uni.showToast({
        title: '视频加载失败，请检查网络连接',
        icon: 'none',
        duration: 2000
      });
      
      // 在H5环境，尝试重新加载或使用备用流
      // #ifdef H5
      setTimeout(() => {
        if (this.isPlaying && this.$refs.jessibucaRef) {
          console.log('尝试重新加载视频流');
          // 可以尝试使用备用流地址
          if (this.deviceInfo.originalStreamUrl !== config.streamServer.wsFlvServer) {
            this.deviceInfo.streamUrl = config.streamServer.wsFlvServer;
            this.$nextTick(() => {
              if (this.$refs.jessibucaRef) {
                this.$refs.jessibucaRef.play();
              }
            });
          }
        }
      }, 3000);
      // #endif
    },
    
    // 更新时间
    startTimeUpdate() {
      // 模拟时间更新
      setInterval(() => {
        const now = new Date()
        const hours = String(now.getHours()).padStart(2, '0')
        const minutes = String(now.getMinutes()).padStart(2, '0')
        const seconds = String(now.getSeconds()).padStart(2, '0')
        this.currentTime = `${hours}:${minutes}:${seconds}`
      }, 1000)
    },
	// 设置全屏状态监听
	    setupFullscreenListener() {
	      this.fullscreenChangeHandler = () => {
	        const isFullscreen = !!(
	          document.fullscreenElement ||
	          document.mozFullScreenElement ||
	          document.webkitFullscreenElement ||
	          document.msFullscreenElement
	        );
	        
	        if (this.isFullscreen !== isFullscreen) {
	          this.isFullscreen = isFullscreen;
	        }
	      };
	      
	      // document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
	      // document.addEventListener('webkitfullscreenchange', this.fullscreenChangeHandler);
	      // document.addEventListener('mozfullscreenchange', this.fullscreenChangeHandler);
	      // document.addEventListener('MSFullscreenChange', this.fullscreenChangeHandler);
	    },
	    
	    // 移除全屏状态监听
	    removeFullscreenListener() {
	      if (this.fullscreenChangeHandler) {
	        // document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
	        // document.removeEventListener('webkitfullscreenchange', this.fullscreenChangeHandler);
	        // document.removeEventListener('mozfullscreenchange', this.fullscreenChangeHandler);
	        // document.removeEventListener('MSFullscreenChange', this.fullscreenChangeHandler);
	      }
	    },
	    
	    // 设置键盘监听
	    setupKeyboardListener() {
	      this.keydownHandler = (event) => {
	        // ESC键退出全屏
	        if (event.key === 'Escape' && this.isFullscreen) {
	          this.setFullscreen(false);
	        }
	        
	        // F键切换全屏
	        if (event.key === 'f' || event.key === 'F') {
	          this.toggleFullscreen();
	          event.preventDefault();
	        }
	      };
	      
	      // document.addEventListener('keydown', this.keydownHandler);
	    },
	    
	    // 移除键盘监听
	    removeKeyboardListener() {
	      if (this.keydownHandler) {
	        // document.removeEventListener('keydown', this.keydownHandler);
	      }
	    }
  }
}
</script>

<style>
/* 基础样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F8FCF9;
  padding-bottom: 30rpx;
}

/* 设备头部样式 */
.device-header {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 26rpx 30rpx 30rpx;
  margin: 20rpx 30rpx 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.device-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.device-name-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.device-name {
  font-size: 34rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 10rpx;
}

.status-tag {
  padding: 4rpx 12rpx 4rpx 24rpx;
  border-radius: 30rpx;
  font-size: 22rpx;
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.status-online {
  background-color: rgba(76, 175, 80, 0.1);
  color: #3BB44A;
}

.status-offline {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
  padding-left: 24rpx;
}

.status-dot {
  position: absolute;
  width: 6rpx;
  height: 6rpx;
  background-color: #3BB44A;
  border-radius: 50%;
  top: 50%;
  left: 12rpx;
  transform: translateY(-50%);
  box-shadow: 0 0 4rpx rgba(76, 175, 80, 0.8);
  animation: blink 1.5s infinite;
  display: inline-block;
}

.status-dot.offline-dot {
  background-color: #F56C6C;
  box-shadow: 0 0 4rpx rgba(245, 108, 108, 0.8);
}

@keyframes blink {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

.device-meta-row {
  display: flex;
  flex-direction: column;
}

.device-meta-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  margin-top: 18rpx;
}

.meta-icon {
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
}

.meta-label {
  color: #999999;
  min-width: 140rpx;
  font-size: 26rpx;
}

.meta-value {
  color: #333333;
  flex: 1;
  font-size: 26rpx;
}

/* 视频预览区域 */
.video-section {
  margin: 0 30rpx 20rpx;
  position: relative;
  z-index: 1;
}

.video-container {
  position: relative;
  width: 100%;
  height: 420rpx; /* 16:9比例 */
  background-color: #000000;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.video-container.fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  z-index: 9999;
  border-radius: 0;
}

.video-container.fullscreen-mode .video-controls {
  padding: 30rpx;
}

.video-container.fullscreen-mode .top-controls,
.video-container.fullscreen-mode .bottom-controls {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-container.fullscreen-mode:hover .top-controls,
.video-container.fullscreen-mode:hover .bottom-controls {
  opacity: 1;
}

.video-player, .video-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
}

.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.top-controls {
  height: 80rpx;
}

.center-controls {
  height: 120rpx;
  justify-content: center;
  align-items: center;
}

.bottom-controls {
  height: 80rpx;
}

.signal-indicator {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 24rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
}

.signal-indicator svg {
  margin-right: 8rpx;
}

.signal-text {
  font-weight: 500;
}

.fullscreen-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transition: all 0.2s;
}

.fullscreen-button:active {
  background-color: rgba(76, 175, 80, 0.7);
  transform: scale(0.9);
}

.video-time {
  color: #FFFFFF;
  font-size: 26rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  font-weight: 500;
}

.play-button {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
  transition: all 0.2s;
  transform: scale(1);
}

.play-button:active {
  transform: scale(0.92);
  background-color: rgba(255, 255, 255, 1);
}

.center-button-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pause-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.center-button-container:active .pause-icon {
  opacity: 1;
  background-color: rgba(76, 175, 80, 0.7);
}

/* 云台控制区域 */
.ptz-section {
  margin: 0 30rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
  display: flex;
  align-items: center;
}

.alert-badge {
  background-color: #F56C6C;
  color: #FFFFFF;
  font-size: 22rpx;
  border-radius: 30rpx;
  padding: 2rpx 12rpx;
  margin-left: 12rpx;
  font-weight: normal;
  min-width: 32rpx;
  text-align: center;
}

.ptz-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.ptz-circle-container {
  position: relative;
  width: 300rpx;
  height: 300rpx;
  margin: 20rpx 0;
}

.ptz-arrow {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F0F9F0;
  border-radius: 50%;
  color: #3BB44A;
  font-size: 36rpx;
  transition: all 0.2s;
  box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.15);
}

.ptz-up {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ptz-down {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ptz-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ptz-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ptz-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F0F9F0;
  border-radius: 50%;
  color: #3BB44A;
  font-size: 36rpx;
  transition: all 0.2s;
  box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.15);
}

.ptz-arrow:active, .ptz-center:active {
  background-color: #3BB44A;
  transform-origin: center;
}

.ptz-arrow:active svg path, .ptz-center:active svg path {
  fill: #FFFFFF;
}

.ptz-up:active {
  transform: scale(0.92) translateX(-50%);
}

.ptz-down:active {
  transform: scale(0.92) translateX(-50%);
}

.ptz-left:active {
  transform: scale(0.92) translateY(-50%);
}

.ptz-right:active {
  transform: scale(0.92) translateY(-50%);
}

.ptz-center:active {
  transform: translate(-50%, -50%) scale(0.92);
}

.ptz-bottom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300rpx;
  margin-top: 30rpx;
}

.ptz-bottom-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #F0F9F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3BB44A;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.1);
}

.ptz-bottom-button:active {
  background-color: #3BB44A;
  color: #FFFFFF;
  transform: scale(0.92);
}

.ptz-bottom-button:active svg path {
  fill: #FFFFFF;
}

/* 快捷功能按钮 */
.quick-actions {
  display: flex;
  justify-content: space-evenly;
  margin: 0 30rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
}

.action-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #F0F9F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3BB44A;
  margin-bottom: 12rpx;
  transition: all 0.2s;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.1);
}

.action-icon:active {
  background-color: #3BB44A;
  transform: scale(0.92);
}

.action-icon:active svg path {
  fill: #FFFFFF;
}

.action-text {
  font-size: 24rpx;
  color: #666666;
  text-align: center;
}

/* 告警信息列表 */
.alerts-section {
  margin: 0 30rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.alerts-list {
  display: flex;
  flex-direction: column;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.alert-urgent {
  background-color: #FEF3F3;
  border-left: 4rpx solid #F56C6C;
}

.alert-warning {
  background-color: #FFF8E6;
  border-left: 4rpx solid #E6A23C;
}

.alert-info {
  background-color: #F2FAF5;
  border-left: 4rpx solid #67C23A;
}

.alert-item-icon {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.alert-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.alert-item-type {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.alert-item-level {
  font-size: 24rpx;
  color: #999999;
}

.alert-item-time {
  font-size: 24rpx;
  color: #999999;
  margin-left: 16rpx;
  min-width: 100rpx;
  text-align: right;
}

.empty-alert {
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>