Update DockControlPanel.vue

GuLiMmo

2024-04-24 cff564c326af2c3c01e5f39d9c40cafe607d837c

 src/components/g-map/DockControlPanel.vue

@@ -1,43 +1,52 @@
<template>
<div class="dock-control-panel">
  <!-- title -->
  <div class="dock-control-panel-header fz16 pl5 pr5 flex-align-center flex-row flex-justify-between">
    <span>设备控制<span class="fz12 pl15">{{ props.sn}}</span></span>
    <span @click="closeControlPanel">
    <CloseOutlined />
    </span>
  </div>
  <!-- setting -->
  <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox>
  <!-- cmd -->
  <div class="control-cmd-wrapper">
    <div class="control-cmd-header">
      远程调试
      <a-switch class="debug-btn" checked-children="开" un-checked-children="关" v-model:checked="debugStatus" @change="onDeviceStatusChange"/>
  <div class="dock-control-panel">
    <!-- title -->
    <div class="dock-control-panel-header fz16 pl5 pr5 flex-align-center flex-row flex-justify-between">
      <span
        >设备控制<span class="fz12 pl15">{{ props.sn }}</span></span
      >
      <span @click="closeControlPanel">
        <CloseOutlined />
      </span>
    </div>
    <div class="control-cmd-box">
      <div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
        <div class="control-cmd-item-left">
    <!-- setting -->
    <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox>
    <!-- cmd -->
    <div class="control-cmd-wrapper">
      <div class="control-cmd-header">
        远程调试
        <a-switch
          class="debug-btn"
          checked-children="开"
          un-checked-children="关"
          v-model:checked="debugStatus"
          @change="onDeviceStatusChange" />
      </div>
      <div class="control-cmd-box">
        <div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
          <div class="control-cmd-item-left">
            <div class="item-label">{{ cmdItem.label }}</div>
            <div class="item-status">{{ cmdItem.status }}</div>
        </div>
        <div class="control-cmd-item-right">
            <a-button :disabled="!debugStatus || cmdItem.disabled" :loading="cmdItem.loading" size="small" type="primary" @click="sendControlCmd(cmdItem, index)">
            {{ cmdItem.operateText }}
          </div>
          <div class="control-cmd-item-right">
            <a-button
              :disabled="!debugStatus || cmdItem.disabled"
              :loading="cmdItem.loading"
              size="small"
              type="primary"
              @click="sendControlCmd(cmdItem, index)">
              {{ cmdItem.operateText }}
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from 'vue'
import {
  CloseOutlined
} from '@ant-design/icons-vue'
import { CloseOutlined } from '@ant-design/icons-vue'
import { useDockControl } from './use-dock-control'
import { DeviceInfoType, EDockModeCode } from '/@/types/device'
import { cmdList as baseCmdList, DeviceCmdItem } from '/@/types/device-cmd'
@@ -46,32 +55,40 @@
import DeviceSettingBox from './DeviceSettingBox.vue'

const props = defineProps<{
  sn: string,
  deviceInfo: DeviceInfoType,
  sn: string
  deviceInfo: DeviceInfoType
}>()

const store = useMyStore()
const initCmdList = baseCmdList.map(cmdItem => Object.assign({}, cmdItem))
const initCmdList = baseCmdList.map((cmdItem) => Object.assign({}, cmdItem))
const cmdList = ref(initCmdList)

// 根据机场指令执行状态更新信息
watch(() => store.state.devicesCmdExecuteInfo, (devicesCmdExecuteInfo) => {
  if (props.sn && devicesCmdExecuteInfo[props.sn]) {
    updateDeviceCmdInfoByExecuteInfo(cmdList.value, devicesCmdExecuteInfo[props.sn])
  }
}, {
  immediate: true,
  deep: true,
})
watch(
  () => store.state.devicesCmdExecuteInfo,
  (devicesCmdExecuteInfo) => {
    if (props.sn && devicesCmdExecuteInfo[props.sn]) {
      updateDeviceCmdInfoByExecuteInfo(cmdList.value, devicesCmdExecuteInfo[props.sn])
    }
  },
  {
    immediate: true,
    deep: true,
  },
)

// 根据设备osd信息更新信息
watch(() => props.deviceInfo, (value) => {
  updateDeviceCmdInfoByOsd(cmdList.value, value)
  // console.log('deviceInfo', value)
}, {
  immediate: true,
  deep: true
})
watch(
  () => props.deviceInfo,
  (value) => {
    updateDeviceCmdInfoByOsd(cmdList.value, value)
    // console.log('deviceInfo', value)
  },
  {
    immediate: true,
    deep: true,
  },
)

const emit = defineEmits(['close-control-panel'])

@@ -98,26 +115,23 @@
  }
}

const {
  sendDockControlCmd,
  dockDebugOnOff
} = useDockControl()
const { sendDockControlCmd, dockDebugOnOff } = useDockControl()

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

</script>

<style lang='scss' scoped>
.dock-control-panel{
<style lang="scss" scoped>
.dock-control-panel {
  position: absolute;
  left: calc(100% + 10px);
  top: 0px;
@@ -127,28 +141,28 @@
  color: #fff;
  border-radius: 2px;

  .dock-control-panel-header{
  .dock-control-panel-header {
    border-bottom: 1px solid #515151;
  }

  .control-cmd-wrapper{
    .control-cmd-header{
  .control-cmd-wrapper {
    .control-cmd-header {
      font-size: 14px;
      font-weight: 600;
      padding: 10px 10px 0px;

      .debug-btn{
      .debug-btn {
        margin-left: 10px;
        border:1px solid #585858;
        border: 1px solid #585858;
      }
    }

    .control-cmd-box{
    .control-cmd-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 4px 10px;
      .control-cmd-item{
      .control-cmd-item {
        width: 220px;
        height: 58px;
        display: flex;
@@ -158,11 +172,11 @@
        margin: 4px 0;
        padding: 0 8px;

        .control-cmd-item-left{
        .control-cmd-item-left {
          display: flex;
          flex-direction: column;

          .item-label{
          .item-label {
            font-weight: 700;
          }
        }