点击放大样式

src/views/VideoStream.vue

@@ -18,16 +18,13 @@
     <!-- 中间手机区域 -->
     <div class="content" @click.self="selectedDevice = 999">
       <div v-if="isImg" class="video-container" v-for="(device, index) in deviceInformation" :key="device.deviceId">
-        <div class="video-canvas" :class="{ active: selectedDevice === index }" :style="imgWH(index)"
+        <div class="video-canvas" :class="{ active: selectedDevice === index }" :style="getCanvasStyle(index)"
           @click="selectDevice(index)">
-          <img class="stream" :style="imgWH(index)" :src="'http://localhost:' + device.screenPort" />
-
-          <!-- 选中时显示；把down/up都放这里 -->
-          <canvas v-show="selectedDevice === index" class="overlay" :style="imgWH(index)"
+          <img class="stream" :src="'http://localhost:' + device.screenPort" />
+          <canvas v-show="selectedDevice === index" class="overlay"
             @mousedown.stop="(e) => onCanvasDown(device.deviceId, e, index)"
             @mouseup.stop="(e) => onCanvasUp(device.deviceId, e, index)"
-            @mousemove.stop="(e) => onCanvasMove(device.deviceId, e, index)">
-          </canvas>
+            @mousemove.stop="(e) => onCanvasMove(device.deviceId, e, index)" />
         </div>
         <div class="input-info" v-show="selectedDevice == index">
 
@@ -109,7 +106,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, onBeforeUnmount, watch, inject } from "vue";
+import { ref, onMounted, onUnmounted, onBeforeUnmount, watch, inject, computed } from "vue";
 import { useRouter } from 'vue-router';
 import {
   setphoneXYinfo, getphoneXYinfo, getUser,
@@ -376,7 +373,7 @@ let scheduleState = (() => {
 
 let scheduleTimer = null      // 轮询定时器句柄
 const scheduleTickMs = 30_000 // 每 30s 检查一次是否到切换点
-let scheduleEnabled = ref(true)    // 需要时可手动关闭调度（例如“全部停止”）
+let scheduleEnabled = ref(false)    // 需要时可手动关闭调度（例如“全部停止”）
 // 弹窗
 const showScheduleDlg = ref(false)
 
@@ -400,7 +397,7 @@ function openScheduleDialog() {
 
 // 保存：校验=60 分钟 → 更新 schedulePlan → 持久化 → 重启轮询
 function saveSchedule() {
-  scheduleEnabled.value = true
+
   const total = schedAMin.value + schedBMin.value
   if (total !== 60) {
     ElMessage.error('两个片段相加必须等于 60 分钟')
@@ -421,7 +418,7 @@ function saveSchedule() {
   localStorage.setItem('SCHEDULE_STATE', JSON.stringify(scheduleState))
 
   // 若启用则重启轮询
-  if (scheduleEnabled.value) startScheduleLoop()
+  startScheduleLoop()
 
   showScheduleDlg.value = false
   ElMessage.success('已保存定时调度')
@@ -430,10 +427,36 @@ function saveSchedule() {
 const selectedDevice = ref(null)
 
 // —— 显示尺寸固定为 320x720；未选中缩略为 THUMB_SCALE 倍 ——
+// 尺寸与排布
 const BASE_W = 320
 const BASE_H = 720
 const THUMB_SCALE = 0.6
+const PER_ROW = 3
 
+// 底行上移的位移量：720*(1-0.6)=288
+const BOTTOM_SHIFT = Math.round(BASE_H * (1 - THUMB_SCALE)) // 288
+
+// 是否至少有两行
+const hasTwoRows = computed(() => deviceInformation.value.length > PER_ROW)
+
+// 真正的“底行”判定：必须有两行以上才成立
+const isBottomRow = (index) => {
+  if (!hasTwoRows.value) return false
+  const lastRow = Math.floor((deviceInformation.value.length - 1) / PER_ROW)
+  return Math.floor(index / PER_ROW) === lastRow
+}
+
+// 统一给 .video-canvas 返回 transform（缩略/放大/底行上移）
+function getCanvasStyle(index) {
+  const isSelected = selectedDevice.value === index
+  if (!isSelected) {
+    return { transform: `scale(${THUMB_SCALE})` }
+  }
+  // 选中：默认正常放大；若在底行且至少两行 -> 先上移再放大
+  return isBottomRow(index)
+    ? { transform: `translateY(-${BOTTOM_SHIFT}px) scale(1)` }
+    : { transform: 'scale(1)' }
+}
 // 当前选中的卡片：选中=1倍，未选中=缩略比例
 const imgWH = (index) => {
   const scale = (selectedDevice.value === index) ? 1 : THUMB_SCALE
@@ -787,7 +810,7 @@ onUnmounted(() => {
 })
 const getDeviceListFun = () => {
   getDeviceList().then((res) => {
-    // console.log('返回', res.length)
+    console.log('返回', res.length)
     if (res && res.length > 0 && deviceInformation.value.length !== res.length) {
       console.log("设备变更")
       deviceInformation.value = res
@@ -798,6 +821,7 @@ const getDeviceListFun = () => {
       deviceInformation.value = []
       reloadImg()
     }
+    // deviceInformation.value = ['', '', '', '', '', '',]
   }).catch((err) => {
     ElMessage.error(`IOSAI服务错误`)
 
@@ -852,16 +876,33 @@ async function uploadLogFile() {
   }
 }
 function runTask(key) {
-  if (!scheduleEnabled.value) return
   console.log('[schedule] 切换到任务:', key, printCurrentTime())
 
   forceActivate(key, () => {
     if (key === 'follow') {
-      runType.value = 'follow'
-      // 这三行保持你现有的唤起流程（弹“主播ID”输入等）
-      // showDialog.value = true
-      // dialogTitle.value = '主播ID'
-      // selectedDevice.value = 999
+
+
+      if (scheduleEnabled.value) {
+        stopAll()
+        setTimeout(() => {
+          runType.value = 'follow'
+
+          passAnchorData(
+            {
+              deviceList: deviceInformation.value.map(item => item.deviceId),
+              anchorList: [],
+              prologueList: getContentpriList(),
+              needReply: false
+            }
+          ).then((res) => {
+            hostList = []
+          })
+        }, 1000)
+
+        return
+      }
+
+      scheduleEnabled.value = true
       if (hostList.length <= 0) {
         dialogTitle.value = '主播ID';
       } else {
@@ -874,6 +915,7 @@ function runTask(key) {
       stopAll()
 
       setTimeout(() => {
+        scheduleEnabled.value = true
         runType.value = 'like'
         deviceInformation.value.forEach((item) => growAccount({ udid: item.deviceId }))
       }, 1000)
@@ -882,6 +924,7 @@ function runTask(key) {
       stopAll()
 
       setTimeout(() => {
+        scheduleEnabled.value = true
         runType.value = 'brushLive'
         deviceInformation.value.forEach((item) => watchLiveForGrowth({ udid: item.deviceId }))
       }, 1000)
@@ -891,6 +934,7 @@ function runTask(key) {
 
       setTimeout(() => {
         runType.value = 'listen'
+        scheduleEnabled.value = true
         isMonitorOn.value = true
         deviceInformation.value.forEach((item) => monitorMessages({ udid: item.deviceId }))
       }, 1000)