|
|
@@ -1,10 +1,5 @@
|
|
|
<template>
|
|
|
|
|
|
-<!--
|
|
|
- <headerBar
|
|
|
- title="遥控模拟器"
|
|
|
- />-->
|
|
|
-
|
|
|
<div class="remote-control_main-container">
|
|
|
<div class="te-c" style="color: #8C92A7">遥控器模拟器</div>
|
|
|
|
|
|
@@ -15,13 +10,21 @@
|
|
|
<el-col :span="6"><div class="button up" title="单击鼠标右键可切换配置" @click="runRight">右脚</div></el-col>
|
|
|
<el-col :span="3"></el-col>
|
|
|
</el-row>
|
|
|
- <el-row align="middle" >
|
|
|
+
|
|
|
+ <!-- 左脚配置、拍照配置、右脚配置按钮行 -->
|
|
|
+ <el-row align="middle">
|
|
|
<el-col :span="3"></el-col>
|
|
|
- <el-col :span="6"><div class="button up" :class="{ disabled: canStop }" @click="handleLeftRightClick($event, 'left')"><span style="font-size: 12px;">左脚配置</span></div></el-col>
|
|
|
- <el-col :span="6"></el-col>
|
|
|
- <el-col :span="6"><div class="button up" :class="{ disabled: canStop }" @click="handleLeftRightClick($event, 'right')"><span style="font-size: 12px;">右脚配置</span></div></el-col>
|
|
|
+ <el-col :span="6"><div class="button up" :class="{ disabled: canStop }" @click="handleLeftRightClick($event, 'left')"><span style="font-size: 12px;">左脚配置</span></div></el-col>
|
|
|
+ <!-- ========== 新增:拍照配置按钮 ========== -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="button up photo-config-btn" :class="{ disabled: canStop, active: showPhotoMenu }" @click="handlePhotoConfigClick">
|
|
|
+ <span style="font-size: 12px;">拍照配置</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6"><div class="button up" :class="{ disabled: canStop }" @click="handleLeftRightClick($event, 'right')"><span style="font-size: 12px;">右脚配置</span></div></el-col>
|
|
|
<el-col :span="3"></el-col>
|
|
|
</el-row>
|
|
|
+
|
|
|
<el-row align="middle">
|
|
|
<el-col :span="3"></el-col>
|
|
|
<el-col :span="6">
|
|
|
@@ -68,20 +71,42 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- ========== 新增:拍照配置菜单 ========== -->
|
|
|
+ <div v-if="showPhotoMenu" class="context-menu photo-menu" :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }" @click.stop>
|
|
|
+ <div class="menu-title">拍照配置</div>
|
|
|
+ <div class="menu-items">
|
|
|
+ <div
|
|
|
+ v-for="point in pointList"
|
|
|
+ :key="point.key"
|
|
|
+ class="menu-item photo-point-item"
|
|
|
+ :class="{ active: selectedPoint === point.key }"
|
|
|
+ @click="selectPhotoPoint(point.key)"
|
|
|
+ >
|
|
|
+ <span class="point-name">{{ selectedPoint === point.key ? '✓ ' : '' }}点位 {{ point.key }}</span>
|
|
|
+ <el-tag :type="point.connected ? 'success' : 'danger'" size="small">
|
|
|
+ {{ point.connected ? '已连接' : '未连接' }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 点击其他地方关闭菜单 -->
|
|
|
- <div v-if="showLeftMenu || showRightMenu" class="menu-overlay" @click="closeMenus"></div>
|
|
|
+ <div v-if="showLeftMenu || showRightMenu || showPhotoMenu" class="menu-overlay" @click="closeMenus"></div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { defineEmits, defineProps, ref } from 'vue'
|
|
|
+import { defineEmits, defineProps, ref, onMounted } from 'vue'
|
|
|
import socket from "@/stores/modules/socket";
|
|
|
-import { getTopTabs, setLeftRightConfig } from '@/apis/setting';
|
|
|
+import { getTopTabs, setLeftRightConfig, getAllUserConfigs } from '@/apis/setting';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
+import client from "@/stores/modules/client";
|
|
|
+import icpList from '@/utils/ipc';
|
|
|
|
|
|
// 初始化 WebSocket 状态管理
|
|
|
const socketStore = socket()
|
|
|
+const clientStore = client()
|
|
|
|
|
|
const props = defineProps<{
|
|
|
canStop: boolean
|
|
|
@@ -89,13 +114,90 @@ const props = defineProps<{
|
|
|
|
|
|
const emit = defineEmits(['onRemoteControl'])
|
|
|
|
|
|
-// 配置切换相关
|
|
|
+// ========== 新增:点位配置 ==========
|
|
|
+const STORAGE_KEY = 'photo_point_name'
|
|
|
+const selectedPoint = ref('A')
|
|
|
+
|
|
|
+// 相机列表和点位列表
|
|
|
+const cameraList = ref<any[]>([])
|
|
|
+const pointList = ref<{ key: string; connected: boolean; cameraName: string }[]>([])
|
|
|
+
|
|
|
+// 初始化从 localStorage 读取配置
|
|
|
+onMounted(() => {
|
|
|
+ const savedPoint = localStorage.getItem(STORAGE_KEY)
|
|
|
+ if (savedPoint && ['A', 'B', 'C'].includes(savedPoint)) {
|
|
|
+ selectedPoint.value = savedPoint
|
|
|
+ }
|
|
|
+ // 获取相机列表
|
|
|
+ fetchCameraList()
|
|
|
+})
|
|
|
+
|
|
|
+// 获取相机列表并更新点位连接状态
|
|
|
+const fetchCameraList = () => {
|
|
|
+ clientStore.ipc.invoke(icpList.camera.getCameraList).then(result => {
|
|
|
+ if (result && result.CameraLists && Array.isArray(result.CameraLists)) {
|
|
|
+ cameraList.value = result.CameraLists
|
|
|
+ updatePointConnectionStatus()
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.error('获取相机列表失败:', err)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 更新点位连接状态(仅显示已绑定相机的点位)
|
|
|
+const updatePointConnectionStatus = async () => {
|
|
|
+ let isoConfig: any = {}
|
|
|
+ try {
|
|
|
+ const result = await getAllUserConfigs({})
|
|
|
+ if (result.code == 0 && result.data?.configs?.camera_configs?.iso_config) {
|
|
|
+ isoConfig = result.data.configs.camera_configs.iso_config
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.error('获取点位配置失败:', err)
|
|
|
+ }
|
|
|
+ // 只保留已绑定相机的点位
|
|
|
+ const validPoints = Object.keys(isoConfig).filter(key => {
|
|
|
+ const config = isoConfig[key]
|
|
|
+ return config && config.CameraKey && config.CameraKey !== ''
|
|
|
+ })
|
|
|
+ if (validPoints.length === 0) {
|
|
|
+ validPoints.push('A')
|
|
|
+ }
|
|
|
+ pointList.value = validPoints.map(key => {
|
|
|
+ const cameraKey = isoConfig[key]?.CameraKey || ''
|
|
|
+ let connected = false
|
|
|
+ let cameraName = ''
|
|
|
+
|
|
|
+ if (cameraKey) {
|
|
|
+ const camera = cameraList.value.find(c => c.CameraKey === cameraKey)
|
|
|
+ if (camera) {
|
|
|
+ connected = camera.CameraStatus === true
|
|
|
+ cameraName = camera.CameraName
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return { key, connected, cameraName }
|
|
|
+ })
|
|
|
+ // 验证当前选中的点位是否有效
|
|
|
+ if (!pointList.value.some(p => p.key === selectedPoint.value)) {
|
|
|
+ selectedPoint.value = pointList.value[0]?.key || 'A'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 暴露点位给父组件
|
|
|
+defineExpose({
|
|
|
+ getSelectedPoint: () => selectedPoint.value
|
|
|
+})
|
|
|
+
|
|
|
+// ========== 配置切换相关 ==========
|
|
|
const leftConfigId = ref(0)
|
|
|
const rightConfigId = ref(0)
|
|
|
const leftTabs = ref([]) // 左脚配置选项
|
|
|
const rightTabs = ref([]) // 右脚配置选项
|
|
|
const showLeftMenu = ref(false) // 显示左脚菜单
|
|
|
const showRightMenu = ref(false) // 显示右脚菜单
|
|
|
+const showPhotoMenu = ref(false) // 显示拍照配置菜单
|
|
|
const menuPosition = ref({ x: 0, y: 0 }) // 菜单位置
|
|
|
|
|
|
const runLeft = async () => {
|
|
|
@@ -212,6 +314,35 @@ const selectConfig = async (type, configId) => {
|
|
|
const closeMenus = () => {
|
|
|
showLeftMenu.value = false
|
|
|
showRightMenu.value = false
|
|
|
+ showPhotoMenu.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// ========== 新增:拍照配置菜单相关 ==========
|
|
|
+
|
|
|
+// 点击拍照配置按钮
|
|
|
+const handlePhotoConfigClick = (event: MouseEvent) => {
|
|
|
+ if(props.canStop){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ event.preventDefault()
|
|
|
+ menuPosition.value = { x: event.clientX, y: event.clientY }
|
|
|
+
|
|
|
+ // 关闭其他菜单
|
|
|
+ showLeftMenu.value = false
|
|
|
+ showRightMenu.value = false
|
|
|
+
|
|
|
+ // 获取最新的相机列表
|
|
|
+ fetchCameraList()
|
|
|
+
|
|
|
+ showPhotoMenu.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 选择拍照点位
|
|
|
+const selectPhotoPoint = (pointKey: string) => {
|
|
|
+ selectedPoint.value = pointKey
|
|
|
+ localStorage.setItem(STORAGE_KEY, pointKey)
|
|
|
+ showPhotoMenu.value = false
|
|
|
+ ElMessage.success(`已切换到点位 ${pointKey}`)
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
@@ -320,4 +451,25 @@ const closeMenus = () => {
|
|
|
bottom: 0;
|
|
|
z-index: 1999;
|
|
|
}
|
|
|
+
|
|
|
+/* 新增:拍照配置样式 */
|
|
|
+.photo-config-btn.active {
|
|
|
+ background: url(@/assets/images/Photography/lan.png) 0px 0px no-repeat !important;
|
|
|
+ background-size: 60px 60px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.photo-menu {
|
|
|
+ min-width: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+.photo-point-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.photo-point-item .point-name {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
</style>
|