From f4d175265d2d7dee11af9ef1ad075cd223eb0abd Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 19 Apr 2025 14:15:22 +0800
Subject: [PATCH] style: 控制台样式
---
src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue | 11 +++--
src/components/CurrentTaskDetails/ControlPanel/BaseControl.vue | 1
src/components/CurrentTaskDetails/TaskDetailsLeft.vue | 34 +++++++++++-----
src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue | 7 +--
src/components/CurrentTaskDetails/TaskDetailsHead.vue | 4 +-
src/components/CurrentTaskDetails/TaskDetailsRight.vue | 1
src/components/CurrentTaskDetails/CurrentTaskDetails.vue | 4 +-
7 files changed, 37 insertions(+), 25 deletions(-)
diff --git a/src/components/CurrentTaskDetails/ControlPanel/BaseControl.vue b/src/components/CurrentTaskDetails/ControlPanel/BaseControl.vue
index b682f14..37bc32a 100644
--- a/src/components/CurrentTaskDetails/ControlPanel/BaseControl.vue
+++ b/src/components/CurrentTaskDetails/ControlPanel/BaseControl.vue
@@ -89,6 +89,7 @@
&:hover {
cursor: pointer;
+ //background: radial-gradient(circle, #5d5c5e 0%, #514f52 50%, #3d3b3d 100%);
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
}
}
diff --git a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
index d3a3604..7b9219a 100644
--- a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
+++ b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
@@ -34,7 +34,7 @@
</div>
<div class="speed">
- <el-icon class="btnIcon" @click="speed = speed + 1">
+ <el-icon class="btnIcon" @click="speed = speed === 15 ? 15 : speed + 1">
<Plus />
</el-icon>
<div>
@@ -42,7 +42,7 @@
<br />
m/s
</div>
- <el-icon class="btnIcon" @click="speed = speed - 1">
+ <el-icon class="btnIcon" @click="speed = speed === 0 ? 0 : speed - 1">
<Minus />
</el-icon>
</div>
@@ -465,7 +465,7 @@
right: 0;
width: 1400px;
height: 217px;
- background: linear-gradient(196deg, rgba(23, 23, 23, 0.11) 0%, rgba(6, 6, 6, 0.11) 100%);
+ background: rgba(31, 31, 31, 0.15);
backdrop-filter: blur(5px);
border-radius: 40px 0px 40px 40px;
display: flex;
@@ -519,10 +519,11 @@
box-shadow: 2px 4px 6px 0px rgba(0, 13, 26, 0.42);
border-radius: 8px 8px 8px 8px;
text-align: center;
- padding: 5px 0;
+ padding: 10px 0;
.btnIcon {
font-size: 20px;
+ cursor: pointer;
}
}
}
@@ -631,7 +632,7 @@
.divider {
position: absolute;
- transform: translateX(90px);
+ transform: translateX(95px);
width: 0;
height: 137px;
border: 1px solid rgba(255, 255, 255, 0.07);
diff --git a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue b/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
index c6ae4c4..e47c0e3 100644
--- a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
+++ b/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
@@ -20,9 +20,7 @@
<TaskDetailsHead />
<TaskDetailsLeft />
</template>
-
<!-- 控制面板，里面有方法需要立即执行，不可用v-if -->
- <!-- <ControlPanel />-->
<ControlPanel v-show="!isAutoControl" />
<img alt="" :src="amplifyImg" class="amplify" @click="isMaxMap = !isMaxMap" />
</div>
@@ -222,6 +220,8 @@
position: absolute;
left: 340px;
bottom: 183px;
+ width: 22px;
+ height: 22px;
}
}
</style>
diff --git a/src/components/CurrentTaskDetails/TaskDetailsHead.vue b/src/components/CurrentTaskDetails/TaskDetailsHead.vue
index d1222d4..472373b 100644
--- a/src/components/CurrentTaskDetails/TaskDetailsHead.vue
+++ b/src/components/CurrentTaskDetails/TaskDetailsHead.vue
@@ -44,8 +44,8 @@
{ index: 4, title: '经度', value: 0, unit: '°' },
{ index: 5, title: '纬度', value: 0, unit: '°' },
{ index: 6, title: '风速', value: 0, unit: 'M/s' },
- { index: 7, title: '4G信号', value: 0, unit: '' },
- { index: 8, title: 'SDR信号', value: 0, unit: '' },
+ { index: 7, title: '4G信号', value: '-', unit: '' },
+ { index: 8, title: 'SDR信号', value: '-', unit: '' },
{ index: 9, title: 'GPS搜星数', value: 0, unit: '' },
{ index: 10, title: 'RTK搜星数', value: 0, unit: '' },
{ index: 11, title: '距离机场', value: 0, unit: 'M' },
diff --git a/src/components/CurrentTaskDetails/TaskDetailsLeft.vue b/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
index 1625ddd..ec3b707 100644
--- a/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
+++ b/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
@@ -36,6 +36,7 @@
:max="cameraParams.camera_type === 'ir' ? 200 : 200"
@change="sliderChange"
/>
+ <div class="cameraZoomText">{{cameraParams.zoom_factor}}X</div>
</div>
</div>
<!-- 广播列表 -->
@@ -87,11 +88,11 @@
<script setup>
import EventBus from '@/event-bus'
-import {
- callPhotoAndVideoCmd,
- cameraParamsChangeApi,
- ptzResetModeApi,
- startVoice,
+import {
+ callPhotoAndVideoCmd,
+ cameraParamsChangeApi,
+ ptzResetModeApi,
+ startVoice,
stayAwayRiver,
getVoiceFile,
playAudio,
@@ -255,7 +256,7 @@
}
}
const tableList = ref([]);
-// 分页相关
+// 分页相关
const searchParams = ref({
sn: droneSn.value,
name: '',
@@ -363,16 +364,27 @@
.cameraZoom {
position: absolute;
- padding: 16px 0;
+ padding: 20px 0 15px 0;
left: 1600px;
top: -59px;
- width: 112px;
+ width: 90px;
height: 490px;
- background: rgba(64, 64, 64, 0.15);
+ background: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(5rem);
border-radius: 20px 20px 20px 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
.el-slider {
- height: 100%;
+ flex: 1;
+ }
+ .cameraZoomText{
+ font-family: Segoe UI, Segoe UI;
+ font-weight: 400;
+ font-size: 22px;
+ color: #ffffff;
+ margin-top: 20px;
}
}
@@ -586,7 +598,7 @@
bottom: 10px;
height: 32px;
display: flex;
-
+
:deep(.number) {
color: #EDEDED;
}
diff --git a/src/components/CurrentTaskDetails/TaskDetailsRight.vue b/src/components/CurrentTaskDetails/TaskDetailsRight.vue
index 5975a26..2a3ad92 100644
--- a/src/components/CurrentTaskDetails/TaskDetailsRight.vue
+++ b/src/components/CurrentTaskDetails/TaskDetailsRight.vue
@@ -59,6 +59,7 @@
width: 297px;
height: 1002px;
background: rgba(31, 31, 31, 0.15);
+ backdrop-filter: blur(0.5rem);
border-radius: 0px 40px 40px 0px;
display: flex;
flex-direction: column;
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
index 2463a6a..fe788c3 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
@@ -67,7 +67,7 @@
<DeviceJobDetails
v-if="isShowDeviceJobDetails"
v-model:show="isShowDeviceJobDetails"
- :wayLineJodInfoId="wayLineJodInfoId"/>
+ :wayLineJodInfoId="rowData.id"/>
</template>
<script setup>
@@ -85,7 +85,6 @@
});
const jobListData = ref([]);
const total = ref(0);
-let wayLineJodInfoId = ref('')
let isShowDeviceJobDetails = ref(false);
let isShowCurrentTaskDetails = ref(false);
@@ -113,12 +112,10 @@
let rowData = ref({});
const handleDetail = (row) => {
if (row.device_sns.length === 1){
- console.log(row)
+ rowData.value = row? row : {};
if (row.status === 2 || row.status === 1){
- rowData.value = row? row : {};
isShowCurrentTaskDetails.value = true;
} else{
- wayLineJodInfoId.value = row.id
isShowDeviceJobDetails.value = true
}
}else{
--
Gitblit v1.9.3