@ -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 > - - >
<!-- < / e l - t o o l t i p > - - >
<!-- < / template > -- >
<!-- < template v -slot : command > -- >
<!-- < el -tooltip - - >
<!-- effect = "dark" -- >
<!-- content = "详情" -- >
<!-- placement = "bottom" -- >
<!-- > -- >
<!-- < i class = "ri-eye-2-line" @click ="toggleRightShow" > < / i > - - >
<!-- < / e l - t o o l t i p > - - >
<!-- < / 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 } } % < / s p a n
>
< span class = "fly-height"
> < i class = "ri-expand-vertical-line" > < / i > { { item . flyHeight } } m < / s p a n
>
< span class = "device-location"
> < i class = "ri-map-pin-line" > < / i > { { item . lon } } , { { item . lat } } < / s p a n
>
< i
class = "iconfont icon-zhuizong device-lock"
@ click . stop = "flyToTarget(item.lon, item.lat, item.flyHeight)"
> < / i >
< / div >
< / div >
< / d t - c a r d >
<!-- 任务列表 -- >
<!-- < 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 > -- >
<!-- < / e l - t o o l t i p > - - >
<!-- < / template > -- >
<!--
<!-- < template v -slot : command > -- >
<!-- < el -tooltip - - >
<!-- effect = "dark" -- >
<!-- content = "上传精处理图片" -- >
<!-- placement = "top" -- >
<!-- > -- >
<!-- < i class = "ri-upload-2-line" @click.stop ="showUpload" > < / i > -- >
<!-- < / e l - t o o l t i p > - - >
<!-- < / 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 >
< / e l - t o o l t i p > - - >
<!-- < 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 >
< / d t - c a r d >
-- >
<!-- 图片上传 -- >
< pictures -upload v-if ="uploadPictureInfo.visible" :visible.sync="uploadPictureInfo.visible" > < / pictures -upload >
< pictures -upload
v - if = "uploadPictureInfo.visible"
: visible . sync = "uploadPictureInfo.visible"
> < / p i c t u r e s - u p l o a d >
<!-- 气象预警 -- >
<!--
<!--
< 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 } } % < / s p a n
>
< span class = "fly-height"
> < i class = "ri-expand-vertical-line" > < / i
> { { detailInfo . baseInfo . flyHeight } } m < / s p a n
>
< span class = "device-location"
> < i class = "ri-map-pin-line" > < / i > { { detailInfo . baseInfo . lon } } , { {
detailInfo . baseInfo . lat
} } < / s p a n
>
< 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]"
>
< / e l - i m a g e >
< / 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 @@
< / d t - c a r d >
< / r i g h t - s l i d e >
<!-- 详情 -- >
< 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 < / s p a n
>
<!-- < 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 > -- >
<!-- < / e l - c o l l a p s e - i t e m > - - >
<!-- < 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 > -- >
<!-- < / e l - c o l l a p s e - i t e m > - - >
< 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 > -- >
<!-- < / e l - c o l l a p s e - i t e m > - - >
<!-- < 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 > -- >
<!-- < / e l - c o l l a p s e - i t e m > - - >
< 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 >
< / e l - t a b - p a n e >
< 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 >
< / e l - t a b - p a n e >
< 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 >
< / e l - t a b - p a n e >
< / e l - t a b s >
@ -347,21 +433,36 @@
< / e l - c o l l a p s e - i t e m >
< 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]"
>
< / e l - i m a g e >
< / 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 >
< / d t - c a r d >
< 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" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "startLon" label = "起点经度" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "startLat" label = "起点纬度" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "startHeight" label = "起点相对高度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "startLon"
label = "起点经度" >
< el -table -column prop = "startAlt" label = "起点海拔高度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "startLat"
label = "起点纬度" >
< el -table -column prop = "endLon" label = "终点经度" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "endLat" label = "终点纬度" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "endHeight" label = "终点相对高度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "startHeight"
label = "起点相对高度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "startAlt"
label = "起点海拔高度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "endLon"
label = "终点经度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "endLat"
label = "终点纬度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "endHeight"
label = "终点相对高度" >
< / e l - t a b l e - c o l u m n >
< el -table -column
prop = "endAlt"
label = "终点海拔高度" >
< el -table -column prop = "endAlt" label = "终点海拔高度" >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< / div >
< / d t - d i a l o g >
< dt -loading : visible = "loadingCount > 0" > < / d t - l o a d i n g >
<!-- < dt -loading : visible = "loadingCount > 0" > < / d t - l o a d i n g > - - >
< / div >
< / template >
< script src = "./index.js" > < / script >