@@ -114,8 +114,8 @@ export default defineComponent({ | |||
} | |||
const handleClick = (list) => { | |||
inspectionStore.setList(list) | |||
router.push('/') | |||
inspectionStore.setList(list) | |||
} | |||
data.timer = setInterval(() => { |
@@ -198,9 +198,9 @@ export default { | |||
* @return {*} | |||
*/ | |||
const queryTaskList = async() => { | |||
task.taskList.length = 0 | |||
const res = await getMissionList(task.taskParams) | |||
if (res.code === 0) { | |||
task.taskList.length = 0 | |||
var taskCount = 0 | |||
res.data?.records?.map((item) => { | |||
if (item.type === 1) { |
@@ -346,11 +346,12 @@ export default { | |||
position: absolute; | |||
right: 20px; | |||
top: 10px; | |||
width: 407px; | |||
height: 860px; | |||
width: 427px; | |||
height: 600px; | |||
opacity: 0.85; | |||
border-radius: 1px; | |||
background: rgba(0, 0, 0, 1); | |||
background: rgb(0, 0, 0); | |||
overflow: auto; | |||
} | |||
.close-content { | |||
@@ -529,6 +530,7 @@ export default { | |||
.verify-btns { | |||
width: 100%; | |||
height: 32px; | |||
margin: 15px 0; | |||
span { | |||
width: 162px; | |||
height: 32px; |
@@ -0,0 +1,99 @@ | |||
<template> | |||
<div class="monitor"> | |||
<p class="monitor-title"> | |||
<span class="monitor-name">{{ monitorName }}</span> | |||
<span class="close-monitor" @click="closeMonitor">x</span> | |||
</p> | |||
<VideoPlayer | |||
id="monitor-video" | |||
ref="monitorVideo" | |||
style="position: absolute; top: 40px; left: 32px;" | |||
/> | |||
</div> | |||
</template> | |||
<script> | |||
import VideoPlayer from '@/components/VideoPlayer/index.vue' | |||
import { onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue' | |||
export default { | |||
name: 'MonitorVideo', | |||
components: { VideoPlayer }, | |||
props: { | |||
data: { | |||
type: Object, | |||
default: () => {} | |||
} | |||
}, | |||
emits: ['close'], | |||
setup(props, { emit }) { | |||
const monitorVideo = ref() | |||
const data = reactive({ | |||
monitorName: null | |||
}) | |||
watch(() => props.data, (value) => { | |||
if (value.flvUrl) { | |||
data.monitorName = value.cameraName | |||
monitorVideo.value?.init({ | |||
id: 'monitor-video', | |||
width: '467px', | |||
height: '260px', | |||
source: value.flvUrl, | |||
isLive: true | |||
}) | |||
} | |||
}) | |||
const closeMonitor = () => { | |||
emit('close') | |||
monitorVideo.value?.disposeVideo() | |||
} | |||
onBeforeUnmount(() => { | |||
monitorVideo.value?.disposeVideo() | |||
}) | |||
return { | |||
...toRefs(data), | |||
monitorVideo, | |||
closeMonitor | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.monitor{ | |||
width: 530px; | |||
height: 320px; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
.monitor-title { | |||
width: 100%; | |||
height: 30px; | |||
} | |||
.monitor-name { | |||
width: 400px; | |||
height: 30px; | |||
line-height: 30px; | |||
color: #fff; | |||
font-size: 14px; | |||
display: inline-block; | |||
margin-left: 10px; | |||
} | |||
.close-monitor { | |||
width: 28px; | |||
height: 28px; | |||
position: relative; | |||
color: #fff; | |||
font-size: 20px; | |||
cursor: pointer; | |||
float: right; | |||
text-align: center; | |||
line-height: 28px; | |||
} | |||
} | |||
</style> |
@@ -12,22 +12,10 @@ | |||
<problem-info :detail="problemDetail" /> | |||
</div> | |||
<!-- 物资弹框 --> | |||
<div id="suppliesOverlay" class="supplies-overlay"> | |||
<supplies-info :data="suppliesDetail" @close="hideSupplies" /> | |||
</div> | |||
<supplies-info id="suppliesOverlay" :data="suppliesDetail" @close="hideSupplies" /> | |||
<!-- 监控弹框 --> | |||
<div id="monitorOverlay" class="monitor-overlay"> | |||
<p> | |||
<span class="monitor-name">{{ montiorName }}</span> | |||
<span class="close-overlay" @click="hideMonitor">x</span> | |||
</p> | |||
<VideoPlayer | |||
id="monitor-video" | |||
ref="monitorVideo" | |||
style="position: absolute; top: 40px; left: 32px;" | |||
/> | |||
</div> | |||
<monitor-video id="monitorOverlay" :data="monitorDetail" @close="hideMonitor" /> | |||
<fire-alarm ref="Warning" :data="warningDetail" @start="handleExecute" @close="closeWarningTab" /> | |||
@@ -60,15 +48,15 @@ import { gcj02towgs84 } from '@/utils/coordinate-util.js' | |||
import AirInfo from './AirInfo.vue' | |||
import ProblemInfo from './ProblemInfo.vue' | |||
import SuppliesInfo from './SuppliesInfo.vue' | |||
import MonitorVideo from './MonitorVideo.vue' | |||
import FireAlarm from './FireAlarm.vue' | |||
import WarningDrawer from './WarningDrawer.vue' | |||
import VideoPlayer from '@/components/VideoPlayer/index.vue' | |||
import gcj02Mecator from '@/utils/map/gcj02Mecator.js' | |||
import { useInspectionStore } from '@/store/modules/inspection.js' | |||
export default { | |||
name: 'OneMap', | |||
components: { AirInfo, ProblemInfo, SuppliesInfo, VideoPlayer, FireAlarm, WarningDrawer }, | |||
components: { AirInfo, ProblemInfo, SuppliesInfo, FireAlarm, WarningDrawer, MonitorVideo }, | |||
props: { | |||
id: { | |||
type: String, | |||
@@ -76,7 +64,6 @@ export default { | |||
} | |||
}, | |||
setup(props) { | |||
const monitorVideo = ref() | |||
const Warning = ref() | |||
const inspectionStore = useInspectionStore() | |||
const data = reactive({ | |||
@@ -107,6 +94,7 @@ export default { | |||
suppliesOverlay: null, | |||
suppliesDetail: {}, | |||
monitorOverlay: null, | |||
monitorDetail: null, | |||
montiorName: null, | |||
// 预警定时器 | |||
warningTimer: null, | |||
@@ -146,22 +134,15 @@ export default { | |||
// 监控视频 | |||
if (properties.type === 'camera') { | |||
const coord = properties.geometry.flatCoordinates | |||
data.monitorDetail = properties.props | |||
data.map.addOverlay(data.monitorOverlay) | |||
data.monitorOverlay.setPosition(coord) | |||
// 设置属性 | |||
data.monitorOverlay.setProperties({ 'type': properties.type }) | |||
data.montiorName = properties.props.cameraName | |||
monitorVideo.value?.init({ | |||
id: 'monitor-video', | |||
width: '467px', | |||
height: '260px', | |||
source: properties.props.flvUrl, | |||
isLive: true | |||
}) | |||
// 设置z-index | |||
data.monitorOverlay.getElement().parentElement.style.zIndex = getMaxZOverlay() + 1 | |||
} | |||
// 监控视频 | |||
// 物资 | |||
if (properties.type === 'materials') { | |||
const coord = properties.geometry.flatCoordinates | |||
data.suppliesDetail = properties.props | |||
@@ -393,7 +374,6 @@ export default { | |||
const hideMonitor = () => { | |||
if (data.map.getOverlayById('monitor_overlay')) { | |||
data.map.removeOverlay(data.monitorOverlay) | |||
monitorVideo.value?.disposeVideo() | |||
} | |||
} | |||
@@ -431,10 +411,6 @@ export default { | |||
if (layer.getProperties().type === item.values_.type) { | |||
data.map.removeOverlay(item) | |||
} | |||
// 关闭监控 | |||
if (layer.getProperties().type === 'camera') { | |||
monitorVideo.value?.disposeVideo() | |||
} | |||
if (layer.getProperties().type === 'materials') { | |||
data.suppliesDetail = {} | |||
} | |||
@@ -713,7 +689,6 @@ export default { | |||
const removeAllOverlays = () => { | |||
data.map.removeOverlay(data.suppliesOverlay) | |||
data.map.removeOverlay(data.monitorOverlay) | |||
monitorVideo.value?.disposeVideo() | |||
} | |||
const handleExecute = async(value) => { | |||
@@ -742,7 +717,6 @@ export default { | |||
}) | |||
onBeforeUnmount(() => { | |||
monitorVideo.value?.disposeVideo() | |||
if (data.warningTimer !== null) { | |||
clearInterval(data.warningTimer) | |||
data.warningTimer = null | |||
@@ -758,7 +732,6 @@ export default { | |||
addVectorLayer, | |||
removeVectorLayer, | |||
hideSupplies, | |||
monitorVideo, | |||
hideMonitor, | |||
removeAllOverlays, | |||
removeProblemLayer, | |||
@@ -815,26 +788,6 @@ export default { | |||
background-color: rgba(0, 0, 0, 0.5); | |||
} | |||
.monitor-overlay { | |||
width: 530px; | |||
height: 320px; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
p { | |||
width: 100%; | |||
height: 30px; | |||
} | |||
} | |||
.monitor-name { | |||
width: 400px; | |||
height: 30px; | |||
line-height: 30px; | |||
color: #fff; | |||
font-size: 14px; | |||
display: inline-block; | |||
margin-left: 10px; | |||
} | |||
.close-overlay { | |||
width: 28px; | |||
height: 28px; |
@@ -83,7 +83,7 @@ export default { | |||
}, | |||
{ | |||
type: 'value', | |||
name: '高度(s)', | |||
name: '高度(m)', | |||
position: 'right', | |||
nameTextStyle: { | |||
color: 'rgba(255,255,255,1)' |
@@ -1,6 +1,6 @@ | |||
<template> | |||
<div v-show="suppliesShow" class="supplies-content"> | |||
<div v-if="suppliesShow" class="supplies-content"> | |||
<div class="supplies-title"> | |||
<p>消防物资</p> | |||
<span class="close-supplies" @click="closeSupplies" /> |
@@ -246,7 +246,9 @@ export default defineComponent({ | |||
const getUavInfo = async(id) => { | |||
const res = await uavInfo(id) | |||
if (res.code === 0) { | |||
data.uavInfo = res.data | |||
if (res.data?.length) { | |||
data.uavInfo = res.data | |||
} | |||
} | |||
} | |||
@@ -1,6 +1,6 @@ | |||
<template> | |||
<div class="basic"> | |||
<OneMap ref="Map" /> | |||
<OneMap ref="Map" @send="getDetail" /> | |||
<Extend ref="extendRef" class="extend" @send="getmessage" /> | |||
</div> | |||
</template> | |||
@@ -9,7 +9,7 @@ | |||
import { useRouter } from 'vue-router' | |||
import OneMap from './components/OneMap.vue' | |||
import Extend from './components/Extend.vue' | |||
import { ref, onMounted } from 'vue' | |||
import { ref, onMounted, watch, toRefs, reactive } from 'vue' | |||
export default { | |||
name: 'HomePage', | |||
components: { OneMap, Extend }, | |||
@@ -24,12 +24,7 @@ export default { | |||
const getmessage = (data) => { | |||
Map.value.addPonit(data) | |||
} | |||
const data = ref({ | |||
currentDroneInfo: { | |||
auth: 1, | |||
ground_station_url: 'xxxxxxxxxxxxxxx' | |||
} | |||
}) | |||
onMounted(() => { | |||
extendRef.value.handleClick(0) | |||
}) | |||
@@ -37,7 +32,6 @@ export default { | |||
// console.log(params) | |||
// } | |||
return { | |||
data, | |||
toSystem, | |||
extendRef, | |||
getmessage, |
@@ -343,36 +343,6 @@ export default defineComponent({ | |||
} | |||
}) | |||
}, 1000) | |||
// 移动要素 | |||
const moveFeature = function(event) { | |||
var lastTime | |||
const speed = Number(50) | |||
const time = event.frameState.time | |||
const elapsedTime = time - lastTime | |||
data.disdance = (data.disdance + (speed * elapsedTime) / 1e6) % 2 | |||
if (data.disdance > 1) { | |||
stopAnimation(data.trackInfo) | |||
} | |||
lastTime = time | |||
const currentCoordinate = data.trackInfo.route.getCoordinateAt( | |||
data.disdance > 1 ? 2 - data.disdance : data.disdance | |||
) | |||
data.trackInfo.position.setCoordinates(currentCoordinate) | |||
const vectorContext = getVectorContext(event) | |||
vectorContext.setStyle(styleList['geoMarker']) | |||
vectorContext.drawGeometry(data.trackInfo.position) | |||
data.mapData.render() | |||
} | |||
// 停止动画 | |||
const stopAnimation = function(trackInfo) { | |||
const { vectorLayer, geoMarker } = trackInfo | |||
data.animating = false | |||
geoMarker.setGeometry(trackInfo.position) | |||
vectorLayer.un('postrender', moveFeature) | |||
} | |||
} | |||
function handleVideoStatus(status) { |