feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/views/device/components/DockControlPanel.vue

@@ -3,7 +3,7 @@
    <!-- title -->

    <!-- setting -->
    <!-- <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox> -->
    <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox>
    <!-- cmd -->
    <div class="control-cmd-wrapper">
      <div class="control-cmd-header">
@@ -19,49 +19,136 @@
            <div class="item-status">{{ cmdItem.status }}</div>
          </div>
          <div class="control-cmd-item-right">
            <el-button :disabled="!debugStatus || cmdItem.disabled" :loading="cmdItem.loading" size="small" type="primary"
              @click="sendControlCmd(cmdItem, index)">
            <el-button :disabled="!debugStatus || cmdItem.disabled" :loading="cmdItem.loading" size="small"
              type="primary" @click="sendControlCmd(cmdItem, index)">
              {{ cmdItem.operateText }}
            </el-button>
          </div>
        </div>
      </div>
      <el-divider>无人机设置</el-divider>

      <!-- 设置 0:白热,1:黑热,2:描红,3:医疗,5:彩虹 1,6:铁红,8:北极,11:熔岩,12:热铁,13:彩虹 2 -->
      <div class="control-cmd-box">
        <div class="control-cmd-item">
          <div class="control-cmd-item-left">调色盘样式</div>
          <div class="control-cmd-item-right">
            <el-select @change="changs" v-model="valueStyle" placeholder="请选择">
      <el-divider v-if="deviceInfo">无人机设置</el-divider>
      <div class="control-cmd-box" v-for="(item, index) in cameras">
        <div>
          <el-form-item label="摄像头设置">
            <el-select @change="cameraSettings($event, item)" v-model="videoValue" placeholder="请选择">
              <el-option v-for="item in videoType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="调色盘样式" v-if="videoValue == 'ir'">
            <el-select @change="changs($event, item)" v-model="valueStyle" placeholder="请选择">
              <el-option v-for="item in paletteOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="相机模式">
            <el-select @change="photoAndVideoCmdSettings($event, item)" v-model="cameraModeValue" placeholder="请选择">
              <el-option v-for="item in cameraMode" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="照片存储设置" v-if="cameraModeValue == 0">
            <el-select v-model="photo_storage_settings" collapse-tags @change="photoStorageTypeChang($event, item)"
              multiple placeholder="请选择">
              <el-option v-for="item in photoStorageType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="视频存储设置" v-if="cameraModeValue == 1">
            <el-select v-model="video_storage_settings" collapse-tags @change="videoStorageTypeChang($event, item)"
              multiple placeholder="请选择">
              <el-option v-for="item in photoStorageType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import EventBus from '@/event-bus'
import { ElMessage } from 'element-plus';
import { EBizCode, ELocalStorageKey, ERouterName } from '@/types'
import { useConnectWebSocket } from '@/hooks/use-connect-websocket'
import { getWebsocketUrl } from '@/websocket/util/config'
import { defineProps, ref, watch, reactive } from 'vue'
import { cmdList as baseCmdList } from '@/types/device-cmd'
import { useDockControl } from './use-dock-control'
import { EDockModeCode } from '@/types/device'
import { updateDeviceSettingFormModelByOsd, updateDeviceSettingInfoByOsd } from '@/utils/device-setting';
import { initDeviceSetting, initDeviceSettingFormModel } from '@/types/device-setting';
import { updateDeviceCmdInfoByOsd, updateDeviceCmdInfoByExecuteInfo } from '@/utils/device-cmd'
import { setThermalCurrentPaletteStyle } from '@/api/device-setting'

import { setThermalCurrentPaletteStyle, setPhotoStorageSet, setVideoStorageSet, getLiveStatus, setStreamsSwitch, photoAndVideoCmd } from '@/api/device-setting'
import DeviceSettingBox from './DeviceSettingBox.vue'
import Store from '@/store'
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket';
import { getWebsocketUrl } from '@/utils/websocket/config';
import EventBus from '@/utils/eventBus';
import { cloneDeep } from 'lodash';

const valueStyle = ref(0)
const cameraModeValue = ref(0)
const videoValue = ref("zoom")
const photo_storage_settings = ref([])
const video_storage_settings = ref([])



let deviceSetting = ref(cloneDeep(initDeviceSetting));
const deviceSettingFormModelFromOsd = ref(cloneDeep(initDeviceSettingFormModel));

provide('deviceSetting', deviceSetting)
provide('deviceSettingFormModelFromOsd', deviceSettingFormModelFromOsd)

// 定义一个数据videoList
const videoList = reactive([])
// 摄像头信息
let cameras = reactive([])
// let cameras = reactive([
//   {
//     camera_mode: 0,
//     liveview_world_region: {
//       bottom: 0.5515424609184265,
//       left: 0.42740535736083984,
//       right: 0.5581043362617493,
//       top: 0.42277535796165466
//     },
//     payload_index: "81-0-0",
//     photo_state: 0,
//     record_time: 0,
//     recording_state: 0,
//     remain_photo_num: 3931,
//     remain_record_duration: 0,
//     zoom_factor: 6.9999943,
//     ir_zoom_factor: 2,
//     photo_storage_settings: [
//       "vision",
//       "ir"
//     ],
//     video_storage_settings: [
//       "vision"
//     ]
//   }
// ])

// 无人机信息
let deviceInfo = ref()

// camera_mode {"0":"拍照","1":"录像","2":"智能低光","3":"全景拍照","-1":"不支持的模式"}
const cameraMode = [
  { label: '拍照', value: 0 },
  { label: '录像', value: 1 },
  { label: '智能低光', value: 2 },
  { label: '全景拍照', value: 3 },
  // { label: '不支持的模式', value: -1 },
]

// 调色盘选项数据
const paletteOptions = [
@@ -75,6 +162,22 @@
  { label: '熔岩', value: 11 },
  { label: '热铁', value: 12 },
  { label: '彩虹2', value: 13 },
]
// 视频类型 ZOOM("zoom"), WIDE("wide"), THERMAL("thermal"), NORMAL("normal"), IR("ir");
const videoType = [
  { label: '变焦', value: 'zoom' },
  { label: '广角', value: 'wide' },
  // { label: '热红外', value: 'thermal' },
  // { label: '正常', value: 'normal' },
  { label: '红外', value: 'ir' },
]
// 拍照存储类型{current, wide, zoom, ir}，可多选
const photoStorageType = [
  { label: '当前', value: 'current' },
  { label: '广角', value: 'wide' },
  { label: '变焦', value: 'zoom' },
  { label: '可见光', value: 'vision' },
  { label: '红外', value: 'ir' },
]

const props = defineProps(['sn', 'deviceInfo'])
@@ -101,18 +204,24 @@
  () => Store.state.device.videoSurveillance,
  newObj => {
    // console.log('视频类型监听中', newObj)
    // if (newObj && newObj.live_status && newObj.live_status.length) {
    //   let arr = newObj.live_status || []
    //   if (videoList.length == arr.length) {
    //     return
    //   }
    //   arr.forEach(element => {
    //      let video_id = element.video_id
    //     element.payIndex = video_id.split('/')[1].split('-')[1]
    //   })
    //   // videoList.length = 0 // 清空数组
    //   videoList.push(...arr) // 添加新元素
    // }
    if (newObj && newObj.live_status && newObj.live_status.length) {
      let arr = newObj.live_status || []
      if (videoList.length == arr.length) {
        return
      }
      arr.forEach(element => {
        let video_id = element.video_id
        element.payIndex = video_id.split('/')[1].split('-')[1]
        if (props.deviceInfo.child_sn == video_id.split('/')[0]) {
          if (element.video_type == 'normal' || element.video_type == 'thermal') {
            videoValue.value = 'wide'
          } else {
            videoValue.value = element.video_type
          }
        }
      })
      videoList.push(...arr) // 添加新元素
    }
  },
  {
    immediate: true,
@@ -124,14 +233,27 @@
watch(
  () => Store.getters.deviceState,
  value => {
    // console.log('设备状态变化', value)
    // console.log('设备状态变化', value.deviceInfo[props.deviceInfo.child_sn])
    if (props.sn && (value.currentSn === props.deviceInfo.child_sn || value.currentSn === props.deviceInfo.device_sn)) {
      debugStatus.value = value.dockInfo[props.deviceInfo.device_sn]?.basic_osd?.mode_code === EDockModeCode.Remote_Debugging
      const devices = {}
      devices['device'] = value.deviceInfo[props.deviceInfo.child_sn]
      devices['dock'] = value.dockInfo[props.deviceInfo.device_sn]
      devices['gateway'] = value.gatewayInfo
      let cameraList = value.deviceInfo[props.deviceInfo.child_sn]?.cameras || []
      cameras = cameraList
      // console.log('设备osd.cameras信息变化', cameras)
      // 判断cameras列表长度是否为0，如果为0，则不执行后续操作
      if (cameras.length > 0) {
        cameraModeValue.value = cameras[0].camera_mode
        photo_storage_settings.value = cameras[0]?.photo_storage_settings ?? [];
        video_storage_settings.value = cameras[0]?.video_storage_settings ?? [];
      }
      deviceInfo = ref(value.deviceInfo[props.deviceInfo.child_sn])
      updateDeviceCmdInfoByOsd(cmdList.value, devices)
      // by cpz
      updateDeviceSettingInfoByOsd(deviceSetting, value.deviceInfo[props.deviceInfo.child_sn]);
      updateDeviceSettingFormModelByOsd(deviceSettingFormModelFromOsd, value.deviceInfo[props.deviceInfo.child_sn])
    }
  },
  {
@@ -139,9 +261,29 @@
    deep: true,
  }
)
onMounted(() => {
  const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + props.deviceInfo.workspace_id
  // 监听ws 消息
  useConnectWebSocket(messageHandler, webSorketUrl)
  getLiveStatuss()
});

async function getLiveStatuss() {
  let result = await getLiveStatus(props.sn)
  result.data.data.live_status.forEach(item => {
    if (props.deviceInfo.child_sn == item.video_id.split('/')[0]) {
      if (item.video_type == 'normal' || item.video_type == 'thermal') {
        videoValue.value = 'wide'
      } else {
        videoValue.value = item.video_type
      }
    }
  })
}


// 远程控制开关
async function onDeviceStatusChange (status) {
async function onDeviceStatusChange(status) {
  let result = false
  if (status) {
    result = await dockDebugOnOff(props.sn, true)
@@ -160,20 +302,18 @@

const { sendDockControlCmd, dockDebugOnOff } = useDockControl()

async function sendControlCmd (cmdItem, index) {
async function sendControlCmd(cmdItem, index) {
  const params = {
    sn: props.sn,
    cmd: cmdItem.cmdKey,
    action: cmdItem.action,
  }
  const success = await sendDockControlCmd(params, true)
  if (success) {
    updateDeviceSingleCmdInfo(cmdList.value[index])
  }
}

// webSocket 监听
const messageHandler = async payload => {
  payload = JSON.parse(payload)
  if (!payload) {
    return
  }
@@ -259,21 +399,72 @@
  }
}

const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + props.deviceInfo.workspace_id
// 监听ws 消息
useConnectWebSocket(messageHandler, webSorketUrl)

// 添加 changs 方法
async function changs (value) {
async function changs(value, item) {
  const payload = {
    thermal_current_palette_style: value
    [item.payload_index]: {
      thermal_current_palette_style: value
    }
  }
  console.log('payload1111111', payload)
  console.log('deviceInfo22222222', props.sn)
  console.log('deviceInfo22222222', props.deviceInfo.workspace_id)
  console.log('payload', payload)
  let data = await setThermalCurrentPaletteStyle(props.sn, props.deviceInfo.workspace_id, payload)
  if (data.code === 0) {
    message.success('修改成功')
  if (data.data.code === 0) {
    ElMessage.success('修改成功');
  }
}
// 摄像头设置
async function cameraSettings(value, item) {
  const payload = {
    // 1581F6Q8D245U00G57GJ/81-0-0/normal-0
    video_id: props.deviceInfo.child_sn + '/' + item.payload_index + '/normal-0',
    video_type: value
  }
  let data = await setStreamsSwitch(payload)
  if (data.data.code === 0) {
    ElMessage.success('修改成功');
  }
}
// 相机模式设置
async function photoAndVideoCmdSettings(value, item) {
  // photo 0 video_start 1 video_stop
  item.camera_mode = value
  let data = await photoAndVideoCmd(props.deviceInfo.child_sn, value)
  if (data.data.code == 0) {
    ElMessage.success('修改成功');
  }
}
// 照片存储设置
async function photoStorageTypeChang(value, item) {
  // value 不能为空
  if (!value) {
    ElMessage.error('请选择存储方式');
    return;
  }
  const payload = {
    payload_index: item.payload_index,
    photo_storage_settings: value
  }
  item.photo_storage_settings = value
  let data = await setPhotoStorageSet(props.sn, payload)
  if (data.data.code == 0) {
    ElMessage.success('修改成功');
  }
}
// 视频存储设置
async function videoStorageTypeChang(value, item) {
  if (!value) {
    ElMessage.error('请选择存储方式');
    return;
  }
  const payload = {
    payload_index: item.payload_index,
    video_storage_settings: value
  }
  item.video_storage_settings = value
  let data = await setVideoStorageSet(props.sn, payload)
  if (data.data.code == 0) {
    ElMessage.success('修改成功');
  }
}
</script>
@@ -353,4 +544,4 @@
    }
  }
}
</style>
</style>