libingkun/skyeyesystem
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

去掉地图加载的遮罩

Browse Source
This commit is contained in:
wxs 2026-01-29 17:34:23 +08:00
parent f203fd4ec7
commit 8554660258
3 changed files with 210 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

342
frontend/Skyeye-sys-ui/src/views/home/components/device-manage/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="twin-situation" >
<div class="twin-situation">
<!-- 资源列表 -->
<dt-card
:class="{
'resource-list': true,
'resource-list__large': isIconModeLarge
'resource-list__large': isIconModeLarge,
}"
icon="ri-send-plane-line"
title="可用资源"
@ -19,30 +19,50 @@
可用资源
</span>
</template>
<!-- <template v-slot:command>-->
<!-- <el-tooltip-->
<!-- effect="dark"-->
<!-- content="详情"-->
<!-- placement="bottom"-->
<!-- >-->
<!-- <i class="ri-eye-2-line" @click="toggleRightShow"></i>-->
<!-- </el-tooltip>-->
<!-- </template>-->
<!-- <template v-slot:command>-->
<!-- <el-tooltip-->
<!-- effect="dark"-->
<!-- content="详情"-->
<!-- placement="bottom"-->
<!-- >-->
<!-- <i class="ri-eye-2-line" @click="toggleRightShow"></i>-->
<!-- </el-tooltip>-->
<!-- </template>-->
<div class="resource-list__content">
<div v-for="item in resourceList.data" :key="item.id" class="resource-item" @click.stop="resourceClick(item)">
<span class="device-status" :class="item.status ? 'device-status__online' : ''"></span>
<div
v-for="item in resourceList.data"
:key="item.id"
class="resource-item"
@click.stop="resourceClick(item)"
>
<span
class="device-status"
:class="item.status ? 'device-status__online' : ''"
></span>
<span class="icon"><i class="ri-dv-line"></i></span>
<span class="device-name">{{item.name}}</span>
<span class="battery" :class="getDeviceBatteryClass(item.battery)" style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{item.battery}}%</span>
<span class="fly-height"><i class="ri-expand-vertical-line"></i>{{item.flyHeight}}m</span>
<span class="device-location"><i class="ri-map-pin-line"></i>{{item.lon}},{{item.lat}}</span>
<i class="iconfont icon-zhuizong device-lock" @click.stop="flyToTarget(item.lon, item.lat, item.flyHeight)"></i>
<span class="device-name">{{ item.name }}</span>
<span
class="battery"
:class="getDeviceBatteryClass(item.battery)"
style="opacity: 0"
><i class="ri-battery-saver-line"></i>{{ item.battery }}%</span
>
<span class="fly-height"
><i class="ri-expand-vertical-line"></i>{{ item.flyHeight }}m</span
>
<span class="device-location"
><i class="ri-map-pin-line"></i>{{ item.lon }},{{ item.lat }}</span
>
<i
class="iconfont icon-zhuizong device-lock"
@click.stop="flyToTarget(item.lon, item.lat, item.flyHeight)"
></i>
</div>
</div>
</dt-card>
<!-- 任务列表 -->
<!-- <dt-card
<!-- <dt-card
:class="{
'task-list': true,
'task-list__large': isIconModeLarge
@ -60,21 +80,21 @@
任务列表
</span>
</template> -->
<!-- <template v-slot:command>-->
<!-- <el-tooltip-->
<!-- effect="dark"-->
<!-- content="上传精处理图片"-->
<!-- placement="top"-->
<!-- >-->
<!-- <i class="ri-upload-2-line" @click.stop="showUpload"></i>-->
<!-- </el-tooltip>-->
<!-- </template>-->
<!--
<!-- <template v-slot:command>-->
<!-- <el-tooltip-->
<!-- effect="dark"-->
<!-- content="上传精处理图片"-->
<!-- placement="top"-->
<!-- >-->
<!-- <i class="ri-upload-2-line" @click.stop="showUpload"></i>-->
<!-- </el-tooltip>-->
<!-- </template>-->
<!--
<div class="task-list__content">
<div v-for="(item, index) in taskList.data" :key="item.id" class="task-item">
<div class="left-part">-->
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
<!-- <div class="execute-info" @click="openTaskLineDetail(item)">
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
<!-- <div class="execute-info" @click="openTaskLineDetail(item)">
<span class="execute-type-icon" :class="'execute-state-' + item.status"><i class="ri-dv-line"></i></span>
<span class="task-execute">{{ item.name }}</span>
</div>
@ -118,18 +138,21 @@
<i class="ri-repeat-line" @click.stop="reRunTask(item, index)"></i>
</el-tooltip>-->
<!-- <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
<!-- <i class="el-icon-close delete-task" @click.stop="deleteTask(item)"></i>-->
<!-- </div>
<!-- <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
<!-- <i class="el-icon-close delete-task" @click.stop="deleteTask(item)"></i>-->
<!-- </div>
</div>
</div>
</dt-card>
-->
<!-- 图片上传 -->
<pictures-upload v-if="uploadPictureInfo.visible" :visible.sync="uploadPictureInfo.visible"></pictures-upload>
<pictures-upload
v-if="uploadPictureInfo.visible"
:visible.sync="uploadPictureInfo.visible"
></pictures-upload>
<!-- 气象预警 -->
<!--
<!--
<right-slide class="weather-info-wrap">
<dt-card
:class="{
@ -168,7 +191,7 @@
-->
<!-- 雷达图 -->
<!--
<!--
<right-slide class="radar-info-wrap">
<dt-card
:class="{
@ -200,9 +223,9 @@
<right-slide class="detail-info-wrap" v-if="detailInfo.visible">
<dt-card
:class="{
'detail-info': true,
'detail-info__large': isIconModeLarge
}"
'detail-info': true,
'detail-info__large': isIconModeLarge,
}"
icon="iconfont icon-target"
title="详细信息"
v-if="detailInfo.visible"
@ -214,13 +237,29 @@
<div class="detail-info__content">
<div class="base-info">
<!-- 无人机 -->
<div class="uav-item" >
<span class="device-status" :class="getDeviceSignalClass(detailInfo.baseInfo.signal)"></span>
<div class="uav-item">
<span
class="device-status"
:class="getDeviceSignalClass(detailInfo.baseInfo.signal)"
></span>
<span class="icon"><i class="ri-dv-line"></i></span>
<span class="device-name">{{ detailInfo.baseInfo.name }}</span>
<span class="battery" :class="getDeviceBatteryClass(detailInfo.baseInfo.battery)" style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailInfo.baseInfo.battery}}%</span>
<span class="fly-height"><i class="ri-expand-vertical-line"></i>{{detailInfo.baseInfo.flyHeight}}m</span>
<span class="device-location"><i class="ri-map-pin-line"></i>{{detailInfo.baseInfo.lon}},{{detailInfo.baseInfo.lat}}</span>
<span
class="battery"
:class="getDeviceBatteryClass(detailInfo.baseInfo.battery)"
style="opacity: 0"
><i class="ri-battery-saver-line"></i
>{{ detailInfo.baseInfo.battery }}%</span
>
<span class="fly-height"
><i class="ri-expand-vertical-line"></i
>{{ detailInfo.baseInfo.flyHeight }}m</span
>
<span class="device-location"
><i class="ri-map-pin-line"></i>{{ detailInfo.baseInfo.lon }},{{
detailInfo.baseInfo.lat
}}</span
>
<i class="el-icon-info device-lock" @click="showUavMore"></i>
</div>
</div>
@ -235,21 +274,36 @@
<!-- </div>-->
<div class="picture-list">
<div>回传图像：</div>
<div v-for="item in detailInfo.pictureList" :key="item.createTime" class="picture-list-item">
<div
v-for="item in detailInfo.pictureList"
:key="item.createTime"
class="picture-list-item"
>
<div class="picture-item-image">
<el-image
style="width: 40px; height: 40px"
:src="item.url"
:preview-src-list="[item.url]">
:preview-src-list="[item.url]"
>
</el-image>
</div>
<div class="picture-item-info">
<div>拍摄任务：{{item.taskName}} | 拍摄载荷：{{item.loaderName}}</div>
<div>拍摄时间：{{item.createTime}}</div>
<div>
拍摄任务：{{ item.taskName }} | 拍摄载荷：{{
item.loaderName
}}
</div>
<div>拍摄时间：{{ item.createTime }}</div>
</div>
<div class="picture-command">
<i class="iconfont icon-dt-icon-dingwei" @click="lockHistoryPicture(item)"></i>
<i class="iconfont icon-quanjushijiao-copy" @click="toggleHistoryPicture(item)"></i>
<i
class="iconfont icon-dt-icon-dingwei"
@click="lockHistoryPicture(item)"
></i>
<i
class="iconfont icon-quanjushijiao-copy"
@click="toggleHistoryPicture(item)"
></i>
</div>
</div>
</div>
@ -257,12 +311,11 @@
</dt-card>
</right-slide>
<!-- 详情 -->
<dt-card
:class="{
'detail-uav': true,
'detail-uav__large': isIconModeLarge
'detail-uav__large': isIconModeLarge,
}"
icon="iconfont icon-target"
title="详细信息"
@ -274,59 +327,92 @@
>
<div class="detail-uav__content">
<div class="image-info">
<img :src="detailUav.baseInfo.url" alt="">
<img :src="detailUav.baseInfo.url" alt="" />
<div class="status-info">
<div>
<span :class="detailUav.baseInfo.status ? 'uav-status-online' : 'uav-status-offline'"></span>
<span>{{detailUav.baseInfo.status ? '在线' : '离线'}}</span>
<!-- <span style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailUav.baseInfo.battery}}%</span>-->
<span><i class="ri-expand-vertical-line"></i>{{detailUav.baseInfo.flyHeight}}m</span>
<!-- <span><i class="ri-expand-horizontal-line"></i>{{detailUav.baseInfo.flyWidth}}m</span>-->
<span
:class="
detailUav.baseInfo.status
? 'uav-status-online'
: 'uav-status-offline'
"
></span>
<span>{{ detailUav.baseInfo.status ? '在线' : '离线' }}</span>
<!-- <span style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailUav.baseInfo.battery}}%</span>-->
<span
><i class="ri-expand-vertical-line"></i
>{{ detailUav.baseInfo.flyHeight }}m</span
>
<!-- <span><i class="ri-expand-horizontal-line"></i>{{detailUav.baseInfo.flyWidth}}m</span>-->
</div>
<div>
<span>{{detailUav.baseInfo.longitude}}</span>
<span>{{detailUav.baseInfo.latitude}}</span>
<i class="iconfont icon-zhuizong" @click.stop="flyToTarget(detailUav.baseInfo.longitude, detailUav.baseInfo.latitude, detailUav.baseInfo.flyHeight)"></i>
<span>{{ detailUav.baseInfo.longitude }}</span>
<span>{{ detailUav.baseInfo.latitude }}</span>
<i
class="iconfont icon-zhuizong"
@click.stop="
flyToTarget(
detailUav.baseInfo.longitude,
detailUav.baseInfo.latitude,
detailUav.baseInfo.flyHeight
)
"
></i>
</div>
</div>
</div>
<div class="other-info">
<el-collapse v-model="detailUav.activeNames" @change="handleUavDetailCollapse">
<!-- <el-collapse-item title="基本信息" name="1">-->
<!-- <div class="uav-span-wrap"><span>名称：</span><span>{{detailUav.basicsInfo.name}}</span></div>-->
<!-- <div class="uav-span-wrap"><span>分组：</span><span>{{detailUav.basicsInfo.group}}</span></div>-->
<!-- </el-collapse-item>-->
<!-- <el-collapse-item title="任务信息" name="2">-->
<!-- <div class="target-task-item" v-for="item in detailUav.taskList" :key="item.id">-->
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
<!-- <div class="task-info">-->
<!-- <i :class="item.typeIcon"></i>-->
<!-- <span class="task-name">{{ item.taskName }}</span>-->
<!-- <span :class="{ 'task-finish': item.isFinish }">{{-->
<!-- item.uavCompletionName-->
<!-- }}</span>-->
<!-- </div>-->
<!-- <div class="task-time">{{item.taskTime}}</div>-->
<!-- </div>-->
<!-- </el-collapse-item>-->
<el-collapse
v-model="detailUav.activeNames"
@change="handleUavDetailCollapse"
>
<!-- <el-collapse-item title="基本信息" name="1">-->
<!-- <div class="uav-span-wrap"><span>名称：</span><span>{{detailUav.basicsInfo.name}}</span></div>-->
<!-- <div class="uav-span-wrap"><span>分组：</span><span>{{detailUav.basicsInfo.group}}</span></div>-->
<!-- </el-collapse-item>-->
<!-- <el-collapse-item title="任务信息" name="2">-->
<!-- <div class="target-task-item" v-for="item in detailUav.taskList" :key="item.id">-->
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
<!-- <div class="task-info">-->
<!-- <i :class="item.typeIcon"></i>-->
<!-- <span class="task-name">{{ item.taskName }}</span>-->
<!-- <span :class="{ 'task-finish': item.isFinish }">{{-->
<!-- item.uavCompletionName-->
<!-- }}</span>-->
<!-- </div>-->
<!-- <div class="task-time">{{item.taskTime}}</div>-->
<!-- </div>-->
<!-- </el-collapse-item>-->
<el-collapse-item title="状态信息" name="3">
<el-tabs v-model="detailUav.activeTab">
<el-tab-pane label="DEV" name="DEV">
<div class="uav-span-wrap" v-for="item in detailUav.statusInfo.dev" :key="item.name">
<span>{{item.name}}：</span>
<span>{{item.value}}{{item.unit}}</span>
<div
class="uav-span-wrap"
v-for="item in detailUav.statusInfo.dev"
:key="item.name"
>
<span>{{ item.name }}：</span>
<span>{{ item.value }}{{ item.unit }}</span>
</div>
</el-tab-pane>
<el-tab-pane label="GPS" name="GPS">
<div class="uav-span-wrap" v-for="item in detailUav.statusInfo.gps" :key="item.name">
<span>{{item.name}}：</span>
<span>{{item.value}}{{item.unit}}</span>
<div
class="uav-span-wrap"
v-for="item in detailUav.statusInfo.gps"
:key="item.name"
>
<span>{{ item.name }}：</span>
<span>{{ item.value }}{{ item.unit }}</span>
</div>
</el-tab-pane>
<el-tab-pane label="IMU" name="IMU">
<div class="uav-span-wrap" v-for="item in detailUav.statusInfo.imu" :key="item.name">
<span>{{item.name}}：</span>
<span>{{item.value}}{{item.unit}}</span>
<div
class="uav-span-wrap"
v-for="item in detailUav.statusInfo.imu"
:key="item.name"
>
<span>{{ item.name }}：</span>
<span>{{ item.value }}{{ item.unit }}</span>
</div>
</el-tab-pane>
</el-tabs>
@ -347,21 +433,36 @@
</el-collapse-item>
<el-collapse-item title="回传图像" name="5">
<div class="back-image">
<div v-for="item in detailInfo.pictureList" :key="item.time" class="picture-list-item">
<div
v-for="item in detailInfo.pictureList"
:key="item.time"
class="picture-list-item"
>
<div class="picture-item-image">
<el-image
style="width: 40px; height: 40px"
:src="item.url"
:preview-src-list="[item.url]">
:preview-src-list="[item.url]"
>
</el-image>
</div>
<div class="picture-item-info">
<div>拍摄任务：{{item.taskName}} | 拍摄载荷：{{item.loaderName}}</div>
<div>拍摄时间：{{item.time}}</div>
<div>
拍摄任务：{{ item.taskName }} | 拍摄载荷：{{
item.loaderName
}}
</div>
<div>拍摄时间：{{ item.time }}</div>
</div>
<div class="picture-command">
<i class="iconfont icon-dt-icon-dingwei" @click="lockHistoryPicture(item)"></i>
<i class="iconfont icon-quanjushijiao-copy" @click="toggleHistoryPicture(item)"></i>
<i
class="iconfont icon-dt-icon-dingwei"
@click="lockHistoryPicture(item)"
></i>
<i
class="iconfont icon-quanjushijiao-copy"
@click="toggleHistoryPicture(item)"
></i>
</div>
</div>
</div>
@ -371,7 +472,6 @@
</div>
</dt-card>
<dt-dialog
:title="taskLineDetail.title"
top="20vh"
@ -380,53 +480,25 @@
append-to-body
>
<div class="task-line-detail">
<el-table
:data="taskLineDetail.data"
height="100%"
style="width: 100%"
>
<el-table-column
type="index"
width="50">
<el-table :data="taskLineDetail.data" height="100%" style="width: 100%">
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column prop="startLon" label="起点经度"> </el-table-column>
<el-table-column prop="startLat" label="起点纬度"> </el-table-column>
<el-table-column prop="startHeight" label="起点相对高度">
</el-table-column>
<el-table-column
prop="startLon"
label="起点经度">
<el-table-column prop="startAlt" label="起点海拔高度">
</el-table-column>
<el-table-column
prop="startLat"
label="起点纬度">
<el-table-column prop="endLon" label="终点经度"> </el-table-column>
<el-table-column prop="endLat" label="终点纬度"> </el-table-column>
<el-table-column prop="endHeight" label="终点相对高度">
</el-table-column>
<el-table-column
prop="startHeight"
label="起点相对高度">
</el-table-column>
<el-table-column
prop="startAlt"
label="起点海拔高度">
</el-table-column>
<el-table-column
prop="endLon"
label="终点经度">
</el-table-column>
<el-table-column
prop="endLat"
label="终点纬度">
</el-table-column>
<el-table-column
prop="endHeight"
label="终点相对高度">
</el-table-column>
<el-table-column
prop="endAlt"
label="终点海拔高度">
<el-table-column prop="endAlt" label="终点海拔高度">
</el-table-column>
</el-table>
</div>
</dt-dialog>
<dt-loading :visible="loadingCount > 0"></dt-loading>
<!-- <dt-loading :visible="loadingCount > 0"></dt-loading> -->
</div>
</template>
<script src="./index.js"></script>

4
frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue
View File

@ -92,7 +92,7 @@
</div>
<div class="task-time">{{ item.beginTime }}</div>
</div>
<div class="right-part" >
<div class="right-part">
<el-tooltip
effect="dark"
:content="item.check ? '隐藏' : '显示'"
@ -526,7 +526,7 @@
</div>
</dt-dialog>
<dt-loading :visible="loadingCount > 0"></dt-loading>
<!-- <dt-loading :visible="loadingCount > 0"></dt-loading> -->
</div>
</template>
<script src="./index.js"></script>

2
frontend/Skyeye-sys-ui/src/views/home/index.vue
View File

@ -61,7 +61,7 @@
<info-bar v-if="menus.situation.active || menus.taskManage.active" />
<!-- 遮罩 -->
<dt-loading :visible="loadingCount > 0"></dt-loading>
<!-- <dt-loading :visible="loadingCount > 0"></dt-loading> -->
</div>
</template>
<script src="./index.js"></script>