无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/device/components/DeviceSettingBox.vue
@@ -57,15 +57,15 @@
                <span class="form-label"
                  >{{ deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].label }}:</span
                >
                <a-switch
                  checked-children="开"
                  un-checked-children="关"
                  v-model:checked="deviceSettingFormModel.nightLightsState"
                <el-switch
                  active-text="开"
                  inactive-text="关"
                  v-model="deviceSettingFormModel.nightLightsState"
                />
              </div>
            </template>
            <a
              @click="
              @click.stop="
                onShowPopConfirm(
                  deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey
                )
@@ -95,14 +95,15 @@
            <template #formContent>
              <div class="form-content">
                <span class="form-label"
                  >{{ deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].label }}:</span
                  >{{ deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].label }}:(m)</span
                >
                <a-input-number
                  v-model:value="deviceSettingFormModel.heightLimit"
                <el-input-number
                  size="small"
                  v-model="deviceSettingFormModel.heightLimit"
                  :min="20"
                  :max="1500"
                />
                m
              </div>
            </template>
            <a
@@ -136,14 +137,15 @@
                <span class="form-label"
                  >{{ deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].label }}:</span
                >
                <a-switch
                <el-switch
                  style="margin-right: 10px"
                  checked-children="开"
                  un-checked-children="关"
                  v-model:checked="deviceSettingFormModel.distanceLimitStatus.state"
                  active-text="开"
                  inactive-text="关"
                  v-model="deviceSettingFormModel.distanceLimitStatus.state"
                />
                <a-input-number
                  v-model:value="deviceSettingFormModel.distanceLimitStatus.distanceLimit"
                <el-input-number
                  size="small"
                  v-model="deviceSettingFormModel.distanceLimitStatus.distanceLimit"
                  :min="15"
                  :max="8000"
                />
@@ -189,10 +191,10 @@
                <span class="form-label"
                  >{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].label }}:</span
                >
                <a-switch
                  checked-children="开"
                  un-checked-children="关"
                  v-model:checked="deviceSettingFormModel.obstacleAvoidanceHorizon"
                <el-switch
                  active-text="开"
                  inactive-text="关"
                  v-model="deviceSettingFormModel.obstacleAvoidanceHorizon"
                />
              </div>
            </template>
@@ -237,10 +239,10 @@
                <span class="form-label"
                  >{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].label }}:</span
                >
                <a-switch
                  checked-children="开"
                  un-checked-children="关"
                  v-model:checked="deviceSettingFormModel.obstacleAvoidanceUpside"
                <el-switch
                  active-text="开"
                  inactive-text="关"
                  v-model="deviceSettingFormModel.obstacleAvoidanceUpside"
                />
              </div>
            </template>
@@ -287,10 +289,10 @@
                    deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].label
                  }}:</span
                >
                <a-switch
                  checked-children="开"
                  un-checked-children="关"
                  v-model:checked="deviceSettingFormModel.obstacleAvoidanceDownside"
                <el-switch
                  active-text="开"
                  inactive-text="关"
                  v-model="deviceSettingFormModel.obstacleAvoidanceDownside"
                />
              </div>
            </template>
@@ -309,39 +311,34 @@
  </div>
</template>
<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';
import { DeviceInfoType } from '@/types/device';
import { useMyStore } from '@/store';
<script setup>
import { defineProps, inject, ref, watch } from 'vue';
import { ELocalStorageKey } from '@/types'
import { cloneDeep } from 'lodash';
import {
  initDeviceSetting,
  initDeviceSettingFormModel,
  DeviceSettingKeyEnum,
} from '@/types/device-setting';
import { initDeviceSetting, initDeviceSettingFormModel, DeviceSettingKeyEnum } from '@/types/device-setting';
import {
  updateDeviceSettingInfoByOsd,
  updateDeviceSettingFormModelByOsd,
} from '@/utils/device-setting';
import { useDeviceSetting } from './use-device-setting';
import DeviceSettingPopover from './DeviceSettingPopover.vue';
import DeviceSettingPopover from './DeviceSettingPopover.vue'
const props = defineProps<{
  sn: string;
  deviceInfo: DeviceInfoType;
}>();
// const props = defineProps();
const props = defineProps(['sn', 'deviceInfo'])
const store = useMyStore();
const deviceSetting = ref(cloneDeep(initDeviceSetting));
const deviceSettingFormModelFromOsd = ref(cloneDeep(initDeviceSettingFormModel));
// const deviceSetting = ref(cloneDeep(initDeviceSetting));
// const deviceSettingFormModelFromOsd = ref(cloneDeep(initDeviceSettingFormModel));
const deviceSettingFormModel = ref(cloneDeep(initDeviceSettingFormModel)); // 真实使用的formModel
const deviceSetting = inject('deviceSetting')
const deviceSettingFormModelFromOsd = inject('deviceSettingFormModelFromOsd')
// 根据设备osd信息更新信息
watch(
  () => props.deviceInfo,
  value => {
    updateDeviceSettingInfoByOsd(deviceSetting.value, value);
    updateDeviceSettingFormModelByOsd(deviceSettingFormModelFromOsd.value, value);
    // console.log('9999',value)
    // updateDeviceSettingInfoByOsd(deviceSetting, value);
    // updateDeviceSettingFormModelByOsd(deviceSettingFormModelFromOsd, value);
    // console.log('deviceInfo', value)
  },
  {
@@ -350,19 +347,20 @@
  }
);
function onShowPopConfirm(settingKey: DeviceSettingKeyEnum) {
function onShowPopConfirm(settingKey) {
  deviceSetting.value[settingKey].popConfirm.visible = true;
  deviceSettingFormModel.value = cloneDeep(deviceSettingFormModelFromOsd.value);
}
function onCancel(settingKey: DeviceSettingKeyEnum) {
function onCancel(settingKey) {
  deviceSetting.value[settingKey].popConfirm.visible = false;
}
async function onConfirm(settingKey: DeviceSettingKeyEnum) {
async function onConfirm(settingKey,) {
  deviceSetting.value[settingKey].popConfirm.loading = true;
  const body = genDevicePropsBySettingKey(settingKey, deviceSettingFormModel.value);
  await setDeviceProps(props.sn, body);
  localStorage.setItem(ELocalStorageKey.WorkspaceId, props.deviceInfo.workspace_id)
  await setDeviceProps(props.sn, props.deviceInfo.workspace_id, body);
  deviceSetting.value[settingKey].popConfirm.loading = false;
  deviceSetting.value[settingKey].popConfirm.visible = false;
}
@@ -373,7 +371,7 @@
<style lang="scss" scoped>
.device-setting-wrapper {
  border-bottom: 1px solid #515151;
  //border-bottom: 1px solid #515151;
  .device-setting-header {
    font-size: 14px;
@@ -419,6 +417,12 @@
          font-weight: 700;
        }
      }
      .control-setting-item-right {
        .el-tooltip__trigger {
          color: #1C5CFF;
          cursor: pointer;
        }
      }
    }
  }
}