diff --git a/src/assets/images/patroLog/full-src.png b/src/assets/images/patroLog/full-src.png index ad22a00..4558127 100644 --- a/src/assets/images/patroLog/full-src.png +++ b/src/assets/images/patroLog/full-src.png Binary files differ diff --git a/src/assets/images/patroLog/full-src.png b/src/assets/images/patroLog/full-src.png index ad22a00..4558127 100644 --- a/src/assets/images/patroLog/full-src.png +++ b/src/assets/images/patroLog/full-src.png Binary files differ diff --git a/src/assets/images/patroLog/play.png b/src/assets/images/patroLog/play.png index 788f95d..e93981b 100644 --- a/src/assets/images/patroLog/play.png +++ b/src/assets/images/patroLog/play.png Binary files differ diff --git a/src/assets/images/patroLog/full-src.png b/src/assets/images/patroLog/full-src.png index ad22a00..4558127 100644 --- a/src/assets/images/patroLog/full-src.png +++ b/src/assets/images/patroLog/full-src.png Binary files differ diff --git a/src/assets/images/patroLog/play.png b/src/assets/images/patroLog/play.png index 788f95d..e93981b 100644 --- a/src/assets/images/patroLog/play.png +++ b/src/assets/images/patroLog/play.png Binary files differ diff --git a/src/assets/images/patroLog/point_end.png b/src/assets/images/patroLog/point_end.png new file mode 100644 index 0000000..1d551e3 --- /dev/null +++ b/src/assets/images/patroLog/point_end.png Binary files differ diff --git a/src/assets/images/patroLog/full-src.png b/src/assets/images/patroLog/full-src.png index ad22a00..4558127 100644 --- a/src/assets/images/patroLog/full-src.png +++ b/src/assets/images/patroLog/full-src.png Binary files differ diff --git a/src/assets/images/patroLog/play.png b/src/assets/images/patroLog/play.png index 788f95d..e93981b 100644 --- a/src/assets/images/patroLog/play.png +++ b/src/assets/images/patroLog/play.png Binary files differ diff --git a/src/assets/images/patroLog/point_end.png b/src/assets/images/patroLog/point_end.png new file mode 100644 index 0000000..1d551e3 --- /dev/null +++ b/src/assets/images/patroLog/point_end.png Binary files differ diff --git a/src/assets/images/patroLog/point_start.png b/src/assets/images/patroLog/point_start.png new file mode 100644 index 0000000..504b0cf --- /dev/null +++ b/src/assets/images/patroLog/point_start.png Binary files differ diff --git a/src/assets/images/patroLog/full-src.png b/src/assets/images/patroLog/full-src.png index ad22a00..4558127 100644 --- a/src/assets/images/patroLog/full-src.png +++ b/src/assets/images/patroLog/full-src.png Binary files differ diff --git a/src/assets/images/patroLog/play.png b/src/assets/images/patroLog/play.png index 788f95d..e93981b 100644 --- a/src/assets/images/patroLog/play.png +++ b/src/assets/images/patroLog/play.png Binary files differ diff --git a/src/assets/images/patroLog/point_end.png b/src/assets/images/patroLog/point_end.png new file mode 100644 index 0000000..1d551e3 --- /dev/null +++ b/src/assets/images/patroLog/point_end.png Binary files differ diff --git a/src/assets/images/patroLog/point_start.png b/src/assets/images/patroLog/point_start.png new file mode 100644 index 0000000..504b0cf --- /dev/null +++ b/src/assets/images/patroLog/point_start.png Binary files differ diff --git a/src/assets/images/patroLog/user.png b/src/assets/images/patroLog/user.png new file mode 100644 index 0000000..12484de --- /dev/null +++ b/src/assets/images/patroLog/user.png Binary files differ diff --git a/src/assets/images/patroLog/full-src.png b/src/assets/images/patroLog/full-src.png index ad22a00..4558127 100644 --- a/src/assets/images/patroLog/full-src.png +++ b/src/assets/images/patroLog/full-src.png Binary files differ diff --git a/src/assets/images/patroLog/play.png b/src/assets/images/patroLog/play.png index 788f95d..e93981b 100644 --- a/src/assets/images/patroLog/play.png +++ b/src/assets/images/patroLog/play.png Binary files differ diff --git a/src/assets/images/patroLog/point_end.png b/src/assets/images/patroLog/point_end.png new file mode 100644 index 0000000..1d551e3 --- /dev/null +++ b/src/assets/images/patroLog/point_end.png Binary files differ diff --git a/src/assets/images/patroLog/point_start.png b/src/assets/images/patroLog/point_start.png new file mode 100644 index 0000000..504b0cf --- /dev/null +++ b/src/assets/images/patroLog/point_start.png Binary files differ diff --git a/src/assets/images/patroLog/user.png b/src/assets/images/patroLog/user.png new file mode 100644 index 0000000..12484de --- /dev/null +++ b/src/assets/images/patroLog/user.png Binary files differ diff --git a/src/views/xuncha/components/patroLogDetails.vue b/src/views/xuncha/components/patroLogDetails.vue index f4d8f2e..f973f94 100644 --- a/src/views/xuncha/components/patroLogDetails.vue +++ b/src/views/xuncha/components/patroLogDetails.vue @@ -3,6 +3,7 @@
+
@@ -102,6 +103,12 @@ import { useRouter, useRoute } from 'vue-router'; import { patrolProblemList, PatrolTaskID } from '@/api/xuncha'; import { showImagePreview } from 'vant'; +import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue'; +import WKT from 'terraformer-wkt-parser'; +import * as turf from '@turf/turf'; +import point_start from '@/assets/images/patroLog/point_start.png'; +import point_end from '@/assets/images/patroLog/point_end.png'; +import user from '@/assets/images/patroLog/user.png'; const route = useRoute(); const router = useRouter(); const allData = reactive({ @@ -112,6 +119,7 @@ detailsInfoTwo: {}, path: [], videoSrc: null, + recordPath: [], imgList: [ // { // url: 'http://42.193.7.161:9000/newfiber-standard/2023/03/14/Screenshot_2023-03-14-17-14-32-53_a2e629f0ea915b4ed11e296a059c9a12_20230314200209A029.jpg', @@ -135,6 +143,8 @@ center: '', pathData: [], planLineCenter: [], + recordTimer: null, + stept: 0, }); // 获取项目巡检记录数据 const getData = async () => { @@ -154,13 +164,86 @@ allData.detailsInfoTwo = { ...res.data, }; + console.log('res.data---', res.data); + let data = res.data; + if (!data.patrolPath) return; + allData.recordPath = data.patrolPathLngLat; + //轨迹线 + let recordLineGeojson = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + geometry: WKT.parse(data.patrolPath), + }, + ], + }; + console.log('recordLineGeojson--', recordLineGeojson); + addRecordLine(recordLineGeojson, 'recordLineGeojson'); + //起止点 + let startPointGeojson = { + type: 'FeatureCollection', + features: [turf.point([Number(data.patrolPathLngLat[0].lng), Number(data.patrolPathLngLat[0].lat)])], + }; + let endPointGeojson = { + type: 'FeatureCollection', + features: [ + turf.point([ + Number(data.patrolPathLngLat[data.patrolPathLngLat.length - 1].lng), + Number(data.patrolPathLngLat[data.patrolPathLngLat.length - 1].lat), + ]), + ], + }; + addStartAndEnd(startPointGeojson, 'point_start', point_start); + addStartAndEnd(endPointGeojson, 'point_end', point_end); + newfiberMap.map.easeTo({ + center: [Number(data.patrolPathLngLat[0].lng), Number(data.patrolPathLngLat[0].lat)], + zoom: 15, + }); } }; +//添加轨迹线 +const addRecordLine = (geojson, layerId) => { + newfiberMap.map.addSource(layerId, { + type: 'geojson', + data: geojson, + }); + newfiberMap.map.addLayer({ + id: layerId, + type: 'line', + source: layerId, + paint: { + 'line-color': 'rgba(35, 217, 110,1)', + 'line-width': 3, + }, + }); +}; +//添加轨迹起止点 +const addStartAndEnd = (geojson, layerId, Icon) => { + newfiberMap.map.loadImage(Icon, (error, image) => { + if (error) throw error; + newfiberMap.map.addImage(layerId + 'icon', image); + }); + newfiberMap.map.addSource(layerId, { + type: 'geojson', + data: geojson, + }); + newfiberMap.map.addLayer({ + id: layerId, + type: 'symbol', + source: layerId, + layout: { + 'icon-image': layerId + 'icon', + 'icon-size': 0.2, + 'icon-offset': [0, 0], + 'icon-allow-overlap': true, + }, + }); +}; //照片弹框 const clickImg = async (item) => { showImagePreview([item.url]); }; - // 全屏 const fullScreen = () => { allData.fullFlag = !allData.fullFlag; @@ -168,7 +251,33 @@ // olMap.map.resize(); }); }; +//播放 +const playLocus = () => { + if (!allData.recordPath) return; + allData.recordTimer = setInterval(() => { + if (allData.stept == allData.recordPath.length) { + clearInterval(allData.recordTimer); + return; + } + let dynamicPepoleGeojson = { + type: 'FeatureCollection', + features: [ + turf.point([Number(allData.recordPath[allData.stept].lng), Number(allData.recordPath[allData.stept].lat)]), + ], + }; + if (!newfiberMap.map.getLayer('dynamicPepoleGeojson')) { + addStartAndEnd(dynamicPepoleGeojson, 'dynamicPepoleGeojson', user); + } else { + newfiberMap.map.getSource('dynamicPepoleGeojson').setData(dynamicPepoleGeojson); + } + allData.stept += 1; + }, 100); +}; +//暂停 +const suspend = () => { + clearInterval(allData.recordTimer); +}; onMounted(() => { getData(); getDatatwo(); @@ -190,6 +299,7 @@ top: 0px; right: 45px; width: 150px; + z-index: 111; .controlDivList { display: inline-block; width: 150px;