params | params | ||||
}) | }) | ||||
} | } | ||||
/** | |||||
* @description: 获取飞行轨迹列表 | |||||
* @param {*} id 任务id | |||||
* @return {*} | |||||
*/ | |||||
export function getTrackList(id) { | |||||
return request({ | |||||
url: `/inspection/track/${id}`, | |||||
method: 'GET' | |||||
}) | |||||
} | |||||
/** | |||||
* @description: 获取航线列表 | |||||
* @param {*} id 任务id | |||||
* @return {*} | |||||
*/ | |||||
export function getLineList(id) { | |||||
return request({ | |||||
url: `/inspection/line/track/${id}`, | |||||
method: 'GET' | |||||
}) | |||||
} | |||||
/** | /** | ||||
* @description: 获取问题列表 | * @description: 获取问题列表 | ||||
* @param {*} params | * @param {*} params |
<template> | <template> | ||||
<n-layout-header class="layout__header" bordered> | <n-layout-header class="layout__header" bordered> | ||||
<div class="header__logo"> | |||||
<!-- <n-image height="18" src="/logo.png" preview-disabled /> --> | |||||
汤山林场巡检管理平台 | |||||
<div class="header__title"> | |||||
<n-image width="42" height="42" src="/logo.png" preview-disabled /> | |||||
<span class="header__name">{{ platFormTitle }}</span> | |||||
</div> | </div> | ||||
<n-dropdown trigger="hover" :options="options" @select="handleSelect"> | <n-dropdown trigger="hover" :options="options" @select="handleSelect"> | ||||
import { renderIcon } from '@/utils' | import { renderIcon } from '@/utils' | ||||
import { useUserStore } from '@/store/modules/user.js' | import { useUserStore } from '@/store/modules/user.js' | ||||
import { useSettingStore } from '@/store/modules/setting.js' | import { useSettingStore } from '@/store/modules/setting.js' | ||||
import setting from '@/setting/config.js' | |||||
export default defineComponent({ | export default defineComponent({ | ||||
name: 'LayoutHeader', | name: 'LayoutHeader', | ||||
setup() { | setup() { | ||||
const router = useRouter() | const router = useRouter() | ||||
const userStore = useUserStore() | const userStore = useUserStore() | ||||
const settingStore = useSettingStore() | const settingStore = useSettingStore() | ||||
const data = reactive({ | const data = reactive({ | ||||
key: 'out', | key: 'out', | ||||
icon: renderIcon(LogoutOutlined) | icon: renderIcon(LogoutOutlined) | ||||
} | } | ||||
] | |||||
], | |||||
platFormTitle: setting.title | |||||
}) | }) | ||||
const getUserInfo = computed(() => { | const getUserInfo = computed(() => { | ||||
<style scoped> | <style scoped> | ||||
.layout__header { | .layout__header { | ||||
padding: 0 20px; | padding: 0 20px; | ||||
background: #36475D; | |||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
} | } | ||||
.header__logo{ | |||||
height: 18px; | |||||
.header__title{ | |||||
display: flex; | display: flex; | ||||
justify-content: flex-start; | |||||
align-items: center; | align-items: center; | ||||
} | } | ||||
.header__name { | |||||
font-size: 18px; | |||||
font-family: Noto Sans SC-Bold, Noto Sans SC; | |||||
font-weight: bold; | |||||
color: #FFFFFF; | |||||
margin-left: 16px; | |||||
} | |||||
.user_msg { | .user_msg { | ||||
display: flex; | display: flex; | ||||
justify-content: flex-end; | justify-content: flex-end; | ||||
height: 30px; | height: 30px; | ||||
margin-right: 10px; | margin-right: 10px; | ||||
} | } | ||||
.user_name { | |||||
color: #fff; | |||||
} | |||||
</style> | </style> |
//定义一些常量 | |||||
var x_PI = 3.14159265358979324 * 3000.0 / 180.0; | |||||
var PI = 3.1415926535897932384626; | |||||
var a = 6378245.0; | |||||
var ee = 0.00669342162296594323; | |||||
/** | |||||
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 | |||||
* 即 百度 转 谷歌、高德 | |||||
*/ | |||||
export function bd09togcj02(bd_lon, bd_lat) { | |||||
var x_pi = 3.14159265358979324 * 3000.0 / 180.0; | |||||
var x = bd_lon - 0.0065; | |||||
var y = bd_lat - 0.006; | |||||
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi); | |||||
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); | |||||
var gg_lng = z * Math.cos(theta); | |||||
var gg_lat = z * Math.sin(theta); | |||||
return [gg_lng, gg_lat] | |||||
} | |||||
/** | |||||
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换 | |||||
* 即谷歌、高德 转 百度 | |||||
*/ | |||||
export function gcj02tobd09(lng, lat) { | |||||
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI); | |||||
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI); | |||||
var bd_lng = z * Math.cos(theta) + 0.0065; | |||||
var bd_lat = z * Math.sin(theta) + 0.006; | |||||
return [bd_lng, bd_lat] | |||||
} | |||||
/** | |||||
* WGS84转GCj02 | |||||
*/ | |||||
export function wgs84togcj02(coordinate) { | |||||
let lng=parseFloat(coordinate[0]); | |||||
let lat=parseFloat(coordinate[1]); | |||||
if (out_of_china(lng, lat)) { | |||||
return [lng, lat] | |||||
} | |||||
else { | |||||
var dlat = transformlat(lng - 105.0, lat - 35.0); | |||||
var dlng = transformlng(lng - 105.0, lat - 35.0); | |||||
var radlat = lat / 180.0 * PI; | |||||
var magic = Math.sin(radlat); | |||||
magic = 1 - ee * magic * magic; | |||||
var sqrtmagic = Math.sqrt(magic); | |||||
var dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); | |||||
var dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); | |||||
var mglat = lat + dlat; | |||||
var mglng = lng + dlng; | |||||
return [mglng, mglat] | |||||
} | |||||
} | |||||
/** | |||||
* GCJ02 转换为 WGS84 | |||||
*/ | |||||
export function gcj02towgs84(lng, lat) { | |||||
if (out_of_china(lng, lat)) { | |||||
return [lng, lat] | |||||
} | |||||
else { | |||||
var dlat = transformlat(lng - 105.0, lat - 35.0); | |||||
var dlng = transformlng(lng - 105.0, lat - 35.0); | |||||
var radlat = lat / 180.0 * PI; | |||||
var magic = Math.sin(radlat); | |||||
magic = 1 - ee * magic * magic; | |||||
var sqrtmagic = Math.sqrt(magic); | |||||
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); | |||||
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); | |||||
var mglat = lat + dlat; | |||||
var mglng = lng + dlng; | |||||
return [lng * 2 - mglng, lat * 2 - mglat] | |||||
} | |||||
} | |||||
export function transformlat(lng, lat) { | |||||
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); | |||||
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; | |||||
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; | |||||
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; | |||||
return ret | |||||
} | |||||
export function transformlng(lng, lat) { | |||||
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); | |||||
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; | |||||
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; | |||||
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; | |||||
return ret | |||||
} | |||||
/** | |||||
* 判断是否在国内,不在国内则不做偏移 | |||||
*/ | |||||
export function out_of_china(lng, lat) { | |||||
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false); | |||||
} |
import axios from 'axios' | |||||
import { wgs84togcj02 } from '@/utils/coordinate-util' | |||||
export default function getDroneLine(url, map, isfitView = true) { | |||||
if (!url) return Promise.resolve(null) | |||||
const temp = url.split('//') | |||||
url = temp[temp.length - 1] | |||||
url = process.env.VUE_APP_API_BASE_URL + url | |||||
const generateMarker = () => { | |||||
const dotContainer = document.createElement('div') | |||||
dotContainer.style = 'height:16px;width:16px;background-color:#5798FF;border-radius:50%;position:relative' | |||||
const dotInner = document.createElement('div') | |||||
dotInner.style = 'height:8px;width:8px;background-color:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)' | |||||
dotContainer.appendChild(dotInner) | |||||
return dotContainer | |||||
} | |||||
return axios.get(url).then((res) => { | |||||
const text = res.data | |||||
let arr = text.split('\r\n') | |||||
arr.shift() | |||||
arr.pop() | |||||
arr = arr.map((text) => { | |||||
return text.split(/\s+/) | |||||
}) | |||||
const polylinePath = [] | |||||
// let markerArr = []; | |||||
const overlayGroup = new AMap.OverlayGroup() | |||||
for (const point of arr) { | |||||
if (point[9] !== 0) { | |||||
const coordinate = wgs84togcj02([point[9], point[8]]) | |||||
polylinePath.push(coordinate) | |||||
const marker = new AMap.Marker({ | |||||
position: new AMap.LngLat(coordinate[0], coordinate[1]), | |||||
content: generateMarker(), | |||||
anchor: 'center', | |||||
zIndex: 20 | |||||
}) | |||||
overlayGroup.addOverlay(marker) | |||||
} | |||||
} | |||||
const polyline = new AMap.Polyline({ | |||||
path: polylinePath, | |||||
strokeColor: '#5798FF', | |||||
strokeWeight: 4, | |||||
strokeStyle: 'dashed' | |||||
}) | |||||
overlayGroup.addOverlay(polyline) | |||||
map.add(overlayGroup) | |||||
if (isfitView) { | |||||
map.setFitView(overlayGroup.getOverlays(), true, [70, 100, 300, 50]) | |||||
} | |||||
return overlayGroup | |||||
}) | |||||
} |
export const handleTextToList = function(text) { | |||||
let arr = text.split('\r\n') | |||||
arr.shift() | |||||
arr.pop() | |||||
arr = arr.map((text) => { | |||||
return text.split(/\s+/) | |||||
}) | |||||
arr = arr.map(item => [item[9], item[8]]) | |||||
return arr | |||||
} |
import { getVectorContext } from 'ol/render' | import { getVectorContext } from 'ol/render' | ||||
import * as control from 'ol/control' | import * as control from 'ol/control' | ||||
import { styleList } from '../tools/style.js' | import { styleList } from '../tools/style.js' | ||||
import { getTrackList } from '@/api/task/index.js' | |||||
// 视频组件 | // 视频组件 | ||||
import VideoPlayer from '@/components/VideoPlayer/index.vue' | import VideoPlayer from '@/components/VideoPlayer/index.vue' | ||||
{ lng: '118.465591', lat: '32.020993' }, | { lng: '118.465591', lat: '32.020993' }, | ||||
{ lng: '118.365591', lat: '32.110993' }, | { lng: '118.365591', lat: '32.110993' }, | ||||
{ lng: '118.265591', lat: '32.080993' }, | { lng: '118.265591', lat: '32.080993' }, | ||||
{ lng: '118.165591', lat: '32.150993' } | |||||
{ lng: '118.165591', lat: '32.150993' }, | |||||
{ lng: '118.765591', lat: '32.150993' }, | |||||
{ lng: '118.66551', lat: '32.050993' }, | |||||
{ lng: '118.365591', lat: '32.060993' }, | |||||
{ lng: '118.265591', lat: '32.180993' }, | |||||
{ lng: '118.165591', lat: '32.050993' } | |||||
], | ], | ||||
disdance: null, | |||||
animating: null, | |||||
detailData: { | detailData: { | ||||
videoUrl: 'http://vod.play.t-aaron.com/228e844c4d18476b82627a54ccf7f4ec/1796b49c9df546ceabe30cda01ebb792-59f1f8c925e0817f19545b7d28f4eea9-fd.mp4', | videoUrl: 'http://vod.play.t-aaron.com/228e844c4d18476b82627a54ccf7f4ec/1796b49c9df546ceabe30cda01ebb792-59f1f8c925e0817f19545b7d28f4eea9-fd.mp4', | ||||
aiVideoUrl: 'http://vod.play.t-aaron.com/228e844c4d18476b82627a54ccf7f4ec/1796b49c9df546ceabe30cda01ebb792-59f1f8c925e0817f19545b7d28f4eea9-fd.mp4' | aiVideoUrl: 'http://vod.play.t-aaron.com/228e844c4d18476b82627a54ccf7f4ec/1796b49c9df546ceabe30cda01ebb792-59f1f8c925e0817f19545b7d28f4eea9-fd.mp4' | ||||
width: '400px', | width: '400px', | ||||
height: '324px', | height: '324px', | ||||
autoplay: false, | autoplay: false, | ||||
source: data.detailData.videoUrl | |||||
source: props.data.videoUrl | |||||
} | } | ||||
}) | }) | ||||
/* 获取AI视频地址 */ | /* 获取AI视频地址 */ | ||||
width: '400px', | width: '400px', | ||||
height: '324px', | height: '324px', | ||||
autoplay: false, | autoplay: false, | ||||
source: data.detailData.aiVideoUrl | |||||
source: props.data.aiVideoUrl | |||||
} | } | ||||
}) | }) | ||||
const videoRef = ref(null) | const videoRef = ref(null) | ||||
aiVideoRef.value.playVideo() | aiVideoRef.value.playVideo() | ||||
} | } | ||||
watch([() => props.visible, () => data.videoStatus], ([visible, status]) => { | |||||
if (visible) { | |||||
nextTick(() => { | |||||
if (!data.mapData) { | |||||
initMap() | |||||
initTrack(formatTradeList(data.trackList), 'route') | |||||
} | |||||
}) | |||||
} | |||||
/* 获取轨迹数据 */ | |||||
const getTrackData = async function() { | |||||
const res = await getTrackList(props.data.id) | |||||
const trackList = res.data | |||||
data.trackList = trackList | |||||
// const trackList = data.trackList | |||||
return Promise.resolve({ | |||||
trackList | |||||
}) | |||||
} | |||||
watch(() => data.videoStatus, (status) => { | |||||
if (status.status === 'ready' && status.aiStatus === 'ready') { | if (status.status === 'ready' && status.aiStatus === 'ready') { | ||||
startAllVideo() | startAllVideo() | ||||
} | } | ||||
}, { deep: true }) | }, { deep: true }) | ||||
watch(() => props.visible, (value) => { | |||||
if (value) { | |||||
if (document.getElementById('history-map')) { | |||||
initMap() | |||||
} else { | |||||
setTimeout(() => { | |||||
initMap() | |||||
getTrackData().then(res => { | |||||
if (res.trackList.length > 0) { | |||||
initTrack(formatTradeList(res.trackList), 'route') | |||||
} | |||||
}) | |||||
}, 500) | |||||
} | |||||
} | |||||
}) | |||||
/* 初始化地图 */ | /* 初始化地图 */ | ||||
const initMap = function() { | const initMap = function() { | ||||
data.mapData.addLayer(vectorLayer) | data.mapData.addLayer(vectorLayer) | ||||
data.mapView.fit(route, { padding: [50, 50, 50, 50] }) | data.mapView.fit(route, { padding: [50, 50, 50, 50] }) | ||||
vectorLayer.on('postrender', moveFeature.bind()) | vectorLayer.on('postrender', moveFeature.bind()) | ||||
function moveFeature(event) { | function moveFeature(event) { | ||||
/* 计算飞行的百分比 */ | /* 计算飞行的百分比 */ | ||||
var distance = data.videoInfo.currentTime / data.videoInfo.duration | |||||
const currentCoordinate = route.getCoordinateAt(distance) | |||||
const percent = data.videoInfo.currentTime / data.videoInfo.duration | |||||
const currentCoordinate = route.getCoordinateAt(percent) | |||||
position.setCoordinates(currentCoordinate) | position.setCoordinates(currentCoordinate) | ||||
geoMarker.setGeometry(null) | geoMarker.setGeometry(null) | ||||
const vectorContext = getVectorContext(event) | const vectorContext = getVectorContext(event) |
<div class="main_container"> | <div class="main_container"> | ||||
<div id="live-map" /> | <div id="live-map" /> | ||||
<!-- 视频播放 --> | <!-- 视频播放 --> | ||||
<div v-if="detailData?.name" class="videobox"> | |||||
<div class="videobox"> | |||||
<!-- 视频开关 --> | <!-- 视频开关 --> | ||||
<div | <div | ||||
class="flagbox" | class="flagbox" | ||||
:class="videoShow == 'back' ? 'video_show' : 'video_hidden'" | :class="videoShow == 'back' ? 'video_show' : 'video_hidden'" | ||||
> | > | ||||
<VideoPlayer :options="getVideoOptions" /> | <VideoPlayer :options="getVideoOptions" /> | ||||
<div class="flagbox">AI识别视频</div> | |||||
<VideoPlayer :options="getVideoLiveOptions" /> | <VideoPlayer :options="getVideoLiveOptions" /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { defineComponent, computed, reactive, toRefs, onMounted } from 'vue' | |||||
import { defineComponent, computed, reactive, toRefs, watch } from 'vue' | |||||
import { Map, View, Feature } from 'ol' | import { Map, View, Feature } from 'ol' | ||||
import 'ol/ol.css' | import 'ol/ol.css' | ||||
import { Tile, Vector as VectorLayer } from 'ol/layer' | import { Tile, Vector as VectorLayer } from 'ol/layer' | ||||
import { transform, fromLonLat } from 'ol/proj' | import { transform, fromLonLat } from 'ol/proj' | ||||
import { getVectorContext } from 'ol/render' | import { getVectorContext } from 'ol/render' | ||||
import VectorContext from 'ol/render/VectorContext' | import VectorContext from 'ol/render/VectorContext' | ||||
import { Draw } from 'ol/interaction' | |||||
import { toRaw } from '@vue/reactivity' | |||||
import * as control from 'ol/control' | import * as control from 'ol/control' | ||||
import { styleList } from '../tools/style.js' | import { styleList } from '../tools/style.js' | ||||
import { getTrackList, getLineList } from '@/api/task/index.js' | |||||
// 视频组件 | // 视频组件 | ||||
import VideoPlayer from '@/components/VideoPlayer/index.vue' | import VideoPlayer from '@/components/VideoPlayer/index.vue' | ||||
{ lng: '118.265591', lat: '32.080993' }, | { lng: '118.265591', lat: '32.080993' }, | ||||
{ lng: '118.165591', lat: '32.150993' }, | { lng: '118.165591', lat: '32.150993' }, | ||||
{ lng: '118.765591', lat: '32.150993' }, | { lng: '118.765591', lat: '32.150993' }, | ||||
{ lng: '118.665591', lat: '32.050993' }, | |||||
{ lng: '118.66551', lat: '32.050993' }, | |||||
{ lng: '118.365591', lat: '32.060993' }, | { lng: '118.365591', lat: '32.060993' }, | ||||
{ lng: '118.265591', lat: '32.180993' }, | { lng: '118.265591', lat: '32.180993' }, | ||||
{ lng: '118.165591', lat: '32.050993' } | { lng: '118.165591', lat: '32.050993' } | ||||
], | ], | ||||
// 轨迹数据 | // 轨迹数据 | ||||
trackList: [], | |||||
// 历史轨迹坐标数据 | |||||
trajectoryList: [ | |||||
trackList: [ | |||||
{ lng: '118.765591', lat: '32.050993' }, | { lng: '118.765591', lat: '32.050993' }, | ||||
{ lng: '118.665591', lat: '32.150993' }, | { lng: '118.665591', lat: '32.150993' }, | ||||
{ lng: '118.565591', lat: '32.070993' }, | { lng: '118.565591', lat: '32.070993' }, | ||||
const getVideoOptions = computed(() => { | const getVideoOptions = computed(() => { | ||||
return { | return { | ||||
id: 'video-live', | id: 'video-live', | ||||
width: '378px', | |||||
width: '800px', | |||||
height: '212px', | height: '212px', | ||||
source: data.detailData.pullUrl, | source: data.detailData.pullUrl, | ||||
isLive: true | isLive: true | ||||
const getVideoLiveOptions = computed(() => { | const getVideoLiveOptions = computed(() => { | ||||
return { | return { | ||||
id: 'video-live', | id: 'video-live', | ||||
width: '378px', | |||||
width: '800px', | |||||
height: '212px', | height: '212px', | ||||
source: data.detailData.pullUrl, | source: data.detailData.pullUrl, | ||||
isLive: true | isLive: true | ||||
emit('update:visible', false) | emit('update:visible', false) | ||||
} | } | ||||
onMounted(() => { | |||||
initMap() | |||||
// 加载航线 | |||||
initTrack(formatTradeList(data.lineTrajectoryList), 'lineTrackLayer', 'lineRoute') | |||||
// 加载历史轨迹和实时轨迹 | |||||
setLiveTrack(formatTradeList(data.trajectoryList)) | |||||
}) | |||||
/* 获取轨迹数据 */ | |||||
const getTrackData = async function() { | |||||
const res = await getTrackList(props.data.id) | |||||
const trackList = res.data | |||||
data.trackList = trackList | |||||
return Promise.resolve({ | |||||
trackList | |||||
}) | |||||
} | |||||
/* 获取航线数据 */ | |||||
const getLineData = async function() { | |||||
const res = await getLineList(props.data.id) | |||||
const trackList = res.data | |||||
data.lineTrajectoryList = trackList | |||||
return Promise.resolve({ | |||||
trackList | |||||
}) | |||||
} | |||||
watch(() => props.visible, (value) => { | |||||
if (value) { | |||||
if (!data.mapData) { | |||||
if (document.getElementById('live-map')) { | |||||
initMap() | |||||
// 加载机场航线 | |||||
getLineData().then(({ trackList }) => { | |||||
if (trackList.length > 0) { | |||||
initTrack(formatTradeList(data.lineTrajectoryList), 'lineTrackLayer', 'lineRoute') | |||||
} | |||||
}) | |||||
// 加载历史轨迹和实时轨迹 | |||||
getTrackData().then(({ trackList }) => { | |||||
if (trackList.length > 0) { | |||||
setLiveTrack(formatTradeList(trackList)) | |||||
} | |||||
}) | |||||
} else { | |||||
setTimeout(() => { | |||||
initMap() | |||||
// 加载机场航线 | |||||
getLineData().then(({ trackList }) => { | |||||
if (trackList.length > 0) { | |||||
initTrack(formatTradeList(trackList), 'lineTrackLayer', 'lineRoute') | |||||
} | |||||
}) | |||||
// 加载历史轨迹和实时轨迹 | |||||
getTrackData().then(({ trackList }) => { | |||||
if (trackList.length > 0) { | |||||
setLiveTrack(formatTradeList(trackList)) | |||||
} | |||||
}) | |||||
}, 500) | |||||
} | |||||
} | |||||
} else { | |||||
clearInterval(data.socket) | |||||
data.socket = null | |||||
} | |||||
}, { deep: true }) | |||||
/* 初始化地图 */ | /* 初始化地图 */ | ||||
const initMap = function() { | const initMap = function() { | ||||
type: routeType, | type: routeType, | ||||
geometry: route | geometry: route | ||||
}) | }) | ||||
const startMarker = new Feature({ | |||||
const endMarker = new Feature({ | |||||
type: 'icon', | type: 'icon', | ||||
geometry: new Point(route.getFirstCoordinate()) | |||||
geometry: new Point(route.getLastCoordinate()) | |||||
}) | }) | ||||
const position = startMarker.getGeometry().clone() | |||||
const geoMarker = new Feature({ | |||||
type: 'geoMarker', | |||||
geometry: position | |||||
}) | |||||
geoMarker.setProperties({ type: 'geoMarker' }, false) | |||||
if (data.liveTrackLayer) { | |||||
data.liveTrackLayer.setSource( | |||||
new VectorSource({ | |||||
features: [geoMarker, routeFeature] | |||||
const position = endMarker.getGeometry().clone() | |||||
if (routeType === 'route') { // 轨迹数据 | |||||
const geoMarker = new Feature({ | |||||
type: 'geoMarker', | |||||
geometry: position | |||||
}) | |||||
geoMarker.setProperties({ type: 'geoMarker' }, false) | |||||
if (data.liveTrackLayer) { | |||||
data.liveTrackLayer.setSource( | |||||
new VectorSource({ | |||||
features: [geoMarker, routeFeature] | |||||
}) | |||||
) | |||||
vectorLayer = data.liveTrackLayer | |||||
} else { | |||||
vectorLayer = new VectorLayer({ | |||||
source: new VectorSource({ | |||||
features: [geoMarker, routeFeature] | |||||
}), | |||||
style: function(feature) { | |||||
return styleList[feature.get('type')] | |||||
} | |||||
}) | }) | ||||
) | |||||
vectorLayer = data.liveTrackLayer | |||||
} else { | |||||
} | |||||
data[layer] = vectorLayer | |||||
data.mapData.addLayer(data[layer]) | |||||
data.view.fit(route, { padding: [50, 50, 50, 50] }) | |||||
return { | |||||
vectorLayer, | |||||
geoMarker, | |||||
route, | |||||
position | |||||
} | |||||
} else { // 航线数据 | |||||
vectorLayer = new VectorLayer({ | vectorLayer = new VectorLayer({ | ||||
source: new VectorSource({ | source: new VectorSource({ | ||||
features: [geoMarker, routeFeature] | |||||
features: [routeFeature] | |||||
}), | }), | ||||
style: function(feature) { | style: function(feature) { | ||||
return styleList[feature.get('type')] | return styleList[feature.get('type')] | ||||
} | } | ||||
}) | }) | ||||
} | |||||
data[layer] = vectorLayer | |||||
data.mapData.addLayer(data[layer]) | |||||
data.view.fit(route, { padding: [50, 50, 50, 50] }) | |||||
return { | |||||
vectorLayer, | |||||
geoMarker, | |||||
route, | |||||
position | |||||
} | |||||
} | |||||
/* 轨迹改变 */ | |||||
const changeTrack = (event) => { | |||||
try { | |||||
const vectorContext = getVectorContext(event) | |||||
vectorContext.setStyle(styleList['geoMarker']) | |||||
VectorContext.drawGeometry(data.trackInfo.position) | |||||
vectorContext.drawGeometry(data.trackInfo.route) | |||||
data.mapData.render() | |||||
} catch { | |||||
console.log(event) | |||||
data[layer] = vectorLayer | |||||
data.mapData.addLayer(data[layer]) | |||||
data.view.fit(route, { padding: [50, 50, 50, 50] }) | |||||
} | } | ||||
} | } | ||||
const setLiveTrack = function(hisTrackList) { | const setLiveTrack = function(hisTrackList) { | ||||
data.animating = false | data.animating = false | ||||
data.disdance = 0 | data.disdance = 0 | ||||
var changeTrack | |||||
if (hisTrackList.length > 1) { | if (hisTrackList.length > 1) { | ||||
data.trackInfo = initTrack(hisTrackList, 'liveTrackLayer', 'route') | data.trackInfo = initTrack(hisTrackList, 'liveTrackLayer', 'route') | ||||
if (data.trackInfo.vectorLayer) { | if (data.trackInfo.vectorLayer) { | ||||
} | } | ||||
} | } | ||||
/* 轨迹改变 */ | |||||
changeTrack = (event) => { | |||||
try { | |||||
const vectorContext = getVectorContext(event) | |||||
vectorContext.setStyle(styleList['geoMarker']) | |||||
VectorContext.drawGeometry(data.trackInfo.position) | |||||
vectorContext.drawGeometry(data.trackInfo.route) | |||||
data.mapData.render() | |||||
} catch { | |||||
console.log(event) | |||||
} | |||||
} | |||||
// 两秒钟获取一次数据 | // 两秒钟获取一次数据 | ||||
data.socket = setInterval(() => { | data.socket = setInterval(() => { | ||||
// getTrackdata({ inspectionId: id }).then((res) => { | |||||
// const coordinate = fromLonLat([res.data.lng, res.data.lat]) | |||||
// const unUseableCoordinate = !coordinate.every((item) => !isNaN(item)) | |||||
// if (unUseableCoordinate) return | |||||
// // 赋值动态无人机坐标 | |||||
// if (coordinate.length) { | |||||
// data.trajectoryList.lng = coordinate[0] | |||||
// data.trajectoryList.lat = coordinate[1] | |||||
// } | |||||
getTrackData().then(({ trackList }) => { | |||||
const obj = trackList[0] | |||||
const coordinate = fromLonLat([obj.lng, obj.lat]) | |||||
if (data.trackInfo) { | |||||
data.trackInfo.route.appendCoordinate(coordinate) | |||||
data.trackInfo.vectorLayer.getSource().changed() | |||||
data.trackInfo.position.setCoordinates(coordinate) | |||||
} | |||||
}) | |||||
}, 1000) | |||||
// data.trackList.push(coordinate) | |||||
// if (data.trackList.length > 1 && !data.trackInfo) { | |||||
// initTrack(data.trackList) | |||||
// } | |||||
// if (data.trackInfo) { | |||||
// data.trackInfo.route.appendCoordinate(coordinate) | |||||
// data.trackInfo.vectorLayer.getSource().changed() | |||||
// data.trackInfo.position.setCoordinates(coordinate) | |||||
// } | |||||
// }) | |||||
}, 2000) | |||||
// 移动要素 | // 移动要素 | ||||
const moveFeature = function(event) { | const moveFeature = function(event) { | ||||
var lastTime | var lastTime | ||||
} | } | ||||
} | } | ||||
/* 视频窗口展开收起 */ | |||||
const showVideo = function(value) { | |||||
data.videoShow = value | |||||
} | |||||
return { | return { | ||||
...toRefs(data), | ...toRefs(data), | ||||
getDrawerOptions, | getDrawerOptions, | ||||
handleDrawerColse, | handleDrawerColse, | ||||
getVideoOptions, | getVideoOptions, | ||||
getVideoLiveOptions | |||||
getVideoLiveOptions, | |||||
showVideo | |||||
} | } | ||||
} | } | ||||
}) | }) | ||||
} | } | ||||
/* 视频 */ | /* 视频 */ | ||||
.videobox { | .videobox { | ||||
width: 378px; | |||||
width: 800px; | |||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: flex-start; | justify-content: flex-start; | ||||
right: 10px; | right: 10px; | ||||
} | } | ||||
.flagbox { | .flagbox { | ||||
width: 378px; | |||||
width: 800px; | |||||
height: 27px; | height: 27px; | ||||
background: #fff; | background: #fff; | ||||
padding: 0 10px; | padding: 0 10px; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
.flagbox_open { | .flagbox_open { | ||||
width: 378px; | |||||
width: 800px; | |||||
animation: openbox 1s; | animation: openbox 1s; | ||||
} | } | ||||
.flaxbox_back { | .flaxbox_back { | ||||
} | } | ||||
@keyframes backbox { | @keyframes backbox { | ||||
from { | from { | ||||
width: 378px; | |||||
width: 800px; | |||||
} | } | ||||
to { | to { | ||||
width: 116px; | width: 116px; | ||||
width: 116px; | width: 116px; | ||||
} | } | ||||
to { | to { | ||||
width: 378px; | |||||
width: 800px; | |||||
} | } | ||||
} | } | ||||
.video_content { | .video_content { | ||||
width: 378px; | |||||
width: 800px; | |||||
height: 220px; | height: 220px; | ||||
position: relative; | position: relative; | ||||
} | } | ||||
opacity: 0; | opacity: 0; | ||||
} | } | ||||
} | } | ||||
.imageicon { | |||||
width: 16px; | |||||
height: 16px; | |||||
margin-right: 10px; | |||||
} | |||||
</style> | </style> |
<!-- 新增、编辑弹窗 --> | <!-- 新增、编辑弹窗 --> | ||||
<TaskModal v-if="modalShow" v-model:visible="modalShow" :type="modalType" :data="rowData" @reload="handleSearch" /> | <TaskModal v-if="modalShow" v-model:visible="modalShow" :type="modalType" :data="rowData" @reload="handleSearch" /> | ||||
<!-- 直播抽屉 --> | <!-- 直播抽屉 --> | ||||
<LiveDrawer v-if="liveDrawer" v-model:visible="liveDrawer" :data="rowData" /> | |||||
<LiveDrawer v-model:visible="liveDrawer" :data="rowData" /> | |||||
<!-- 轨迹回放 --> | <!-- 轨迹回放 --> | ||||
<DemandDrawer v-model:visible="demandDrawer" :data="rowData" /> | <DemandDrawer v-model:visible="demandDrawer" :data="rowData" /> | ||||
<!-- 问题核实 --> | <!-- 问题核实 --> | ||||
} | } | ||||
function handleChange(value) { | function handleChange(value) { | ||||
console.log(value) | |||||
const { airportId } = value | const { airportId } = value | ||||
if (data.airportId !== airportId) { | if (data.airportId !== airportId) { | ||||
if (!airportId) { | if (!airportId) { |
text: true, | text: true, | ||||
onClick: handleTaskLive.bind(null, row) | onClick: handleTaskLive.bind(null, row) | ||||
}, | }, | ||||
auth: 'basic_list' | |||||
// show: row.status === 2 | |||||
auth: 'basic_list', | |||||
show: row.status === 2 | |||||
}, | }, | ||||
{ | { | ||||
label: '轨迹', | label: '轨迹', |
search, | search, | ||||
...toRefs(table), | ...toRefs(table), | ||||
pageData: [], | pageData: [], | ||||
isReported: props.data?.reportStatus === 1 || false | |||||
isReported: props.data?.reportStatus === 0 || false | |||||
}) | }) | ||||
/** | /** |