livestock-trading/src/components/MarketRealtimeMonitor.vue

<template>
  <BaseCard title="市场实时监控">
    <div class="video-monitor-content">
      <div class="video-carousel">
        <div class="carousel-header">
          <div class="carousel-info">
            <span class="carousel-title">监控画面 ({{ currentGroup + 1 }}/{{ totalGroups }})</span>
            <div class="carousel-indicator">
              <div v-for="(group, index) in cameraGroups" :key="index" 
                   class="indicator-dot" 
                   :class="{ active: index === currentGroup }"
                   @click="switchToGroup(index)">
              </div>
            </div>
          </div>
          <div class="carousel-controls">
            <button class="carousel-btn" @click="prevGroup" title="上一组">
              ◀
            </button>
            <button class="carousel-btn" @click="toggleAutoPlay" :class="{ active: isAutoPlay }" title="自动播放">
              {{ isAutoPlay ? '⏸️' : '▶️' }}
            </button>
            <button class="carousel-btn" @click="nextGroup" title="下一组">
              ▶
            </button>
          </div>
        </div>
        
        <div class="video-grid">
          <div v-for="camera in currentCameras" :key="camera.id" class="video-item" :class="camera.status">
          <div class="video-header">
            <div class="camera-info">
              <span class="camera-name">{{ camera.name }}</span>
              <!-- <div class="status-indicator" :class="camera.status">
                <span class="status-dot"></span>
                <span class="status-text">{{ camera.statusText }}</span>
              </div> -->
            </div>
            <div class="video-controls">
              <button class="control-btn" @click="toggleFullscreen(camera.id)" title="全屏">
                📺
              </button>
              <button class="control-btn" @click="toggleRecording(camera.id)" title="录制" :class="{ recording: camera.recording }">
                {{ camera.recording ? '⏹️' : '⏺️' }}
              </button>
            </div>
          </div>
          <div class="video-screen">
            <div class="video-placeholder" :style="{ backgroundImage: `url(${camera.preview})` }">
              <div class="video-overlay">
                <div class="live-indicator" v-if="camera.status === 'online'">
                  <span class="live-dot"></span>
                  LIVE
                </div>
                <div class="offline-message" v-if="camera.status === 'offline'">
                  📵 离线
                </div>
                <div class="error-message" v-if="camera.status === 'error'">
                  ⚠️ 故障
                </div>
        </div>
        </div>
      </div>
          <div class="video-info">
            <div class="info-item">
              <span class="info-label">分辨率:</span>
              <span class="info-value">{{ camera.resolution }}</span>
            </div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </BaseCard>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import BaseCard from './BaseCard.vue'

// 摄像头数据
const cameras = ref([
  {
    id: 1,
    name: '交易大厅主区',
    status: 'online',
    statusText: '在线',
    resolution: '1920×1080',
    fps: 30,
    recording: false,
    preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMmEyYTJhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzY2NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuS6pOaYk+Wkp+WOhTwvdGV4dD48L3N2Zz4='
  },
  {
    id: 2,
    name: '牦牛展示区',
    status: 'online',
    statusText: '在线',
    resolution: '1920×1080',
    fps: 25,
    recording: true,
    preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMmEyYTJhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzY2NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPueJpueJm+WxleekuuWMujwvdGV4dD48L3N2Zz4='
  },
  {
    id: 3,
    name: '停车场入口',
    status: 'online',
    statusText: '在线',
    resolution: '1280×720',
    fps: 20,
    recording: false,
    preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMmEyYTJhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzY2NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWBnOi9puWcuuWFpeWPozwvdGV4dD48L3N2Zz4='
  },
  {
    id: 4,
    name: '安全出口',
    status: 'offline',
    statusText: '离线',
    resolution: '1280×720',
    fps: 0,
    recording: false,
    preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMWExYTFhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzU1NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWuieWFqOWHuuWPozwvdGV4dD48L3N2Zz4='
  },
  {
    id: 5,
    name: '办公区域',
    status: 'error',
    statusText: '故障',
    resolution: '1920×1080',
    fps: 0,
    recording: false,
    preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMmEyYTJhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzY2NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWKnuWFrOWMuuWfnzwvdGV4dD48L3N2Zz4='
  },
  {
    id: 6,
    name: '仓储区域',
    status: 'online',
    statusText: '在线',
    resolution: '1280×720',
    fps: 15,
    recording: false,
    preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMmEyYTJhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzY2NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuS7k+WCqOWMuuWfnzwvdGV4dD48L3N2Zz4='
  }
])

// 轮播控制
const currentGroup = ref(0)
const isAutoPlay = ref(true)
const carouselTimer = ref(null)

// 将摄像头分组，每组2个
const cameraGroups = computed(() => {
  const groups = []
  for (let i = 0; i < cameras.value.length; i += 2) {
    groups.push(cameras.value.slice(i, i + 2))
  }
  return groups
})

const totalGroups = computed(() => cameraGroups.value.length)
const currentCameras = computed(() => cameraGroups.value[currentGroup.value] || [])



// 控制功能
const toggleFullscreen = (cameraId) => {
  console.log(`全屏显示摄像头 ${cameraId}`)
  // 这里可以实现全屏功能
}

const toggleRecording = (cameraId) => {
  const camera = cameras.value.find(c => c.id === cameraId)
  if (camera && camera.status === 'online') {
    camera.recording = !camera.recording
  }
}



// 轮播控制函数
const nextGroup = () => {
  currentGroup.value = (currentGroup.value + 1) % totalGroups.value
}

const prevGroup = () => {
  currentGroup.value = currentGroup.value === 0 ? totalGroups.value - 1 : currentGroup.value - 1
}

const switchToGroup = (index) => {
  currentGroup.value = index
  resetAutoPlayTimer()
}

const toggleAutoPlay = () => {
  isAutoPlay.value = !isAutoPlay.value
  if (isAutoPlay.value) {
    startAutoPlay()
  } else {
    stopAutoPlay()
  }
}

const startAutoPlay = () => {
  if (carouselTimer.value) {
    clearInterval(carouselTimer.value)
  }
  carouselTimer.value = setInterval(() => {
    nextGroup()
  }, 10000) // 10秒切换
}

const stopAutoPlay = () => {
  if (carouselTimer.value) {
    clearInterval(carouselTimer.value)
    carouselTimer.value = null
  }
}

const resetAutoPlayTimer = () => {
  if (isAutoPlay.value) {
    stopAutoPlay()
    startAutoPlay()
  }
}

// 模拟数据更新
let updateTimer = null

const updateData = () => {
  // 模拟fps波动
  cameras.value.forEach(camera => {
    if (camera.status === 'online') {
      const baseFps = camera.fps
      camera.fps = Math.max(0, baseFps + Math.floor((Math.random() - 0.5) * 4))
    }
  })
}

onMounted(() => {
  updateTimer = setInterval(updateData, 5000)
  if (isAutoPlay.value) {
    startAutoPlay()
  }
})

onUnmounted(() => {
  if (updateTimer) {
    clearInterval(updateTimer)
  }
  stopAutoPlay()
})
</script>

<style scoped>
.video-monitor-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

.video-carousel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.carousel-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.carousel-title {
  font-size: 12px;
  color: #409EFF;
  font-weight: 600;
}

.carousel-indicator {
  display: flex;
  gap: 6px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot:hover {
  background: rgba(64, 158, 255, 0.6);
  transform: scale(1.2);
}

.indicator-dot.active {
  background: #409EFF;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.6);
}

.carousel-controls {
  display: flex;
  gap: 4px;
}

.carousel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 32px;
}

.carousel-btn:hover {
  background: rgba(64, 158, 255, 0.3);
  border-color: rgba(64, 158, 255, 0.5);
  transform: translateY(-1px);
}

.carousel-btn.active {
  background: rgba(64, 158, 255, 0.4);
  border-color: rgba(64, 158, 255, 0.6);
  color: #409EFF;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.video-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.video-item:hover {
  border-color: rgba(64, 158, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.15);
}

.video-item.online {
  border-color: rgba(103, 194, 58, 0.3);
}

.video-item.offline {
  border-color: rgba(230, 162, 60, 0.3);
}

.video-item.error {
  border-color: rgba(245, 108, 108, 0.3);
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.camera-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.camera-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-indicator.online .status-dot {
  background: #67C23A;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
}

.status-indicator.offline .status-dot {
  background: #E6A23C;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.6);
}

.status-indicator.error .status-dot {
  background: #F56C6C;
  box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
}

.status-text {
  font-size: 12px;
  color: #a0a8b8;
}

.video-controls {
  display: flex;
  gap: 4px;
}

.control-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(64, 158, 255, 0.3);
  border-color: rgba(64, 158, 255, 0.5);
}

.control-btn.recording {
  background: rgba(245, 108, 108, 0.3);
  border-color: rgba(245, 108, 108, 0.5);
}

.video-screen {
  flex: 1;
  position: relative;
  min-height: 120px;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
}

.live-indicator {
  background: rgba(245, 108, 108, 0.9);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-dot {
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  animation: blink 1s infinite;
}

.offline-message,
.error-message {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: #a0a8b8;
}

.info-value {
  font-size: 12px;
  color: #409EFF;
  font-weight: 600;
}



@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}

/* 响应式布局 */
@media (max-width: 900px) {
  .carousel-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  
  .carousel-info {
    justify-content: center;
  }
  
  .carousel-controls {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .carousel-title {
    font-size: 11px;
  }
  
  .carousel-btn {
    padding: 4px 8px;
    font-size: 11px;
    min-width: 28px;
  }
}
</style>