From 9464e5a8d69ff40dd0fef0e02d1947de15621c24 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Mon, 18 Sep 2023 09:27:06 +0800
Subject: [PATCH] 部分样式修改、添加视频播放组件
---
src/components/g-map/DeviceSettingBox.vue | 115 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 81 insertions(+), 34 deletions(-)
diff --git a/src/components/g-map/DeviceSettingBox.vue b/src/components/g-map/DeviceSettingBox.vue
index fc0b3de..18c376c 100644
--- a/src/components/g-map/DeviceSettingBox.vue
+++ b/src/components/g-map/DeviceSettingBox.vue
@@ -1,6 +1,37 @@
<template>
<div class="device-setting-wrapper">
- <div class="device-setting-header">设备属性设置</div>
+ <!-- <div class="device-setting-header">设备属性设置</div> -->
+ <!-- 设备状态 -->
+ <!-- <div class="device-state-box flex-display flex-justify-between flex-wrap flex-align-center">
+ <div class="device-state-item flex-common flex-direction-column">
+ <div class="state-item-value">29</div>
+ <div class="state-item-label">机场搜星</div>
+ </div>
+ <div class="device-state-item flex-common flex-direction-column">
+ <div class="state-item-value">已指定</div>
+ <div class="state-item-label">指定状态</div>
+ </div>
+ <div class="device-state-item flex-common flex-direction-column">
+ <div class="state-item-value">0.0/78.2 GB</div>
+ <div class="state-item-label">机场存储</div>
+ </div>
+ <div class="device-state-item flex-common flex-direction-column">
+ <div class="state-item-value">--/-- GB</div>
+ <div class="state-item-label">飞行器存储</div>
+ </div>
+ <div class="device-state-item flex-common flex-direction-column">
+ <div class="state-item-value">24.8°C</div>
+ <div class="state-item-label">舱内温度</div>
+ </div>
+ <div class="device-state-item flex-common flex-direction-column">
+ <div class="state-item-value">99%</div>
+ <div class="state-item-label">舱内湿度</div>
+ </div>
+ <div class="device-state-item flex-common flex-direction-column">
+ <div class="state-item-value">空闲中</div>
+ <div class="state-item-label">空调状态</div>
+ </div>
+ </div> -->
<div class="device-setting-box">
<!-- 飞行器夜航灯 -->
<div class="control-setting-item">
@@ -9,16 +40,15 @@
<div class="item-status">{{ deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].value }}</div>
</div>
<div class="control-setting-item-right">
- <DeviceSettingPopover
- :visible="deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].popConfirm.visible"
+ <DeviceSettingPopover :visible="deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].popConfirm.visible"
:loading="deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].popConfirm.loading"
@confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)"
- @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)"
- >
+ @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)">
<template #formContent>
<div class="form-content">
<span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].label }}:</span>
- <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.nightLightsState" />
+ <a-switch checked-children="开" un-checked-children="关"
+ v-model:checked="deviceSettingFormModel.nightLightsState" />
</div>
</template>
<a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)">编辑</a>
@@ -32,12 +62,10 @@
<div class="item-status">{{ deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].value }}</div>
</div>
<div class="control-setting-item-right">
- <DeviceSettingPopover
- :visible="deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].popConfirm.visible"
+ <DeviceSettingPopover :visible="deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].popConfirm.visible"
:loading="deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].popConfirm.loading"
@confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)"
- @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)"
- >
+ @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)">
<template #formContent>
<div class="form-content">
<span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].label }}:</span>
@@ -56,17 +84,17 @@
<div class="item-status">{{ deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].value }}</div>
</div>
<div class="control-setting-item-right">
- <DeviceSettingPopover
- :visible="deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].popConfirm.visible"
+ <DeviceSettingPopover :visible="deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].popConfirm.visible"
:loading="deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].popConfirm.loading"
@confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)"
- @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)"
- >
+ @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)">
<template #formContent>
<div class="form-content">
<span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].label }}:</span>
- <a-switch style="margin-right: 10px;" checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.distanceLimitStatus.state" />
- <a-input-number v-model:value="deviceSettingFormModel.distanceLimitStatus.distanceLimit" :min="15" :max="8000" />
+ <a-switch style="margin-right: 10px;" checked-children="开" un-checked-children="关"
+ v-model:checked="deviceSettingFormModel.distanceLimitStatus.state" />
+ <a-input-number v-model:value="deviceSettingFormModel.distanceLimitStatus.distanceLimit" :min="15"
+ :max="8000" />
m
</div>
</template>
@@ -85,12 +113,13 @@
:visible="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].popConfirm.visible"
:loading="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].popConfirm.loading"
@confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)"
- @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)"
- >
+ @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)">
<template #formContent>
<div class="form-content">
- <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].label }}:</span>
- <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.obstacleAvoidanceHorizon" />
+ <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].label
+ }}:</span>
+ <a-switch checked-children="开" un-checked-children="关"
+ v-model:checked="deviceSettingFormModel.obstacleAvoidanceHorizon" />
</div>
</template>
<a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)">编辑</a>
@@ -108,12 +137,12 @@
:visible="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].popConfirm.visible"
:loading="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].popConfirm.loading"
@confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)"
- @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)"
- >
+ @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)">
<template #formContent>
<div class="form-content">
<span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].label }}:</span>
- <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.obstacleAvoidanceUpside" />
+ <a-switch checked-children="开" un-checked-children="关"
+ v-model:checked="deviceSettingFormModel.obstacleAvoidanceUpside" />
</div>
</template>
<a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)">编辑</a>
@@ -131,15 +160,17 @@
:visible="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].popConfirm.visible"
:loading="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].popConfirm.loading"
@confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)"
- @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)"
- >
+ @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)">
<template #formContent>
<div class="form-content">
- <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].label }}:</span>
- <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.obstacleAvoidanceDownside" />
+ <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].label
+ }}:</span>
+ <a-switch checked-children="开" un-checked-children="关"
+ v-model:checked="deviceSettingFormModel.obstacleAvoidanceDownside" />
</div>
</template>
- <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)">编辑</a>
+ <a
+ @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)">编辑</a>
</DeviceSettingPopover>
</div>
</div>
@@ -203,22 +234,38 @@
</script>
<style lang='scss' scoped>
-.device-setting-wrapper{
+.device-setting-wrapper {
border-bottom: 1px solid #515151;
- .device-setting-header{
+ .device-setting-header {
font-size: 14px;
font-weight: 600;
padding: 10px 10px 0px;
}
- .device-setting-box{
+ .device-state-box {
+ .device-state-item {
+ width: 23%;
+ .state-item-value {
+
+ }
+ .state-item-label {
+
+ }
+ }
+ }
+ .device-state-box::after {
+ content: "";
+ width: 23%;
+ }
+
+ .device-setting-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 4px 10px;
- .control-setting-item{
+ .control-setting-item {
width: 220px;
height: 58px;
display: flex;
@@ -228,11 +275,11 @@
margin: 4px 0;
padding: 0 8px;
- .control-setting-item-left{
+ .control-setting-item-left {
display: flex;
flex-direction: column;
- .item-label{
+ .item-label {
font-weight: 700;
}
}
--
Gitblit v1.9.3