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