diff --git a/Code/frontend/src/assets/hit0.png b/Code/frontend/src/assets/hit0.png new file mode 100644 index 0000000..cfffa80 Binary files /dev/null and b/Code/frontend/src/assets/hit0.png differ diff --git a/Code/frontend/src/pages/Detection.vue b/Code/frontend/src/pages/Detection.vue index 3c7dccd..1d5089b 100644 --- a/Code/frontend/src/pages/Detection.vue +++ b/Code/frontend/src/pages/Detection.vue @@ -79,7 +79,7 @@
@@ -96,24 +96,14 @@
- -
序号： {{currentPerson.id}}
-
行人检索ID: {{currentPerson.Person_ID}}
-
初次出现地点: {{currentPerson.location}}
-
报警类型: {{currentPerson.Alarm_type}}
-
行人类别: {{currentPerson.Person_pool}}
-
初次出现时间: {{currentPerson.time}}
-
摄像头IP: {{currentPerson.IP}}
-
处理进度: {{currentPerson.type}}
-

{{currentPerson.locus[0].lng}}

+
行人检索ID: {{currentPerson.person_id}}
+
出现地点: {{currentPerson.address}}
+
报警类型: {{currentPerson.alarm_type}}
+
行人类别: {{currentPerson.person_type}}
+
出现时间: {{currentPerson.detect_time}}
+
摄像头IP: {{currentPerson.ip_address}}
+
处理进度: {{currentPerson.process_status}}
@@ -121,13 +111,14 @@
- + + --> + + 下次检测点 @@ -166,7 +157,7 @@ import TargetPerson from '../../public/TargetPerson.json'; - import localMarkerIcon from '@/assets/TargetPerson.jpg' // 引入自定义的标注图片 + import localMarkerIcon from '@/assets/hit0.png' // 引入自定义的标注图片 import axios from 'axios'; @@ -213,7 +204,8 @@ let isLoaded = false let RecordsData = ref(null) - + let TrajectoryData = ref([]) + ///////////////////////////////////////// 表格数据的分页功能 ///////////////////////////////////////// // 每页显示的条数 let PageSize = ref(20); @@ -325,6 +317,43 @@ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + + ///////////////////////////////////////// 查看轨迹信息的弹窗数据 ///////////////////////////////////////// + // 点击查看轨迹按钮 + const handleClick = (row) => { + axios.get('http://localhost:8080/trajectory', { + params: { + id: row.trajectory_detection_id + } + }) + .then(response => { + if (response.data.code === 200) { + TrajectoryData.value = response.data.data.cameraArray; + } else { + console.error("Failed to fetch trajectory"); + } + console.log("getData", TrajectoryData); + }) + .catch(error => { + console.error('wrong:', error); + }); + + + // 这一步是将proxy对象转化为普通的对象，因为row对象是proxy对象 + currentPerson.value = JSON.parse(JSON.stringify(row)); + console.log(row); + console.log(currentPerson.value); + + // 打开弹窗:将数据转化完成之后再打开弹窗，打开弹窗之后再加载地图 + dialogVisibleLocusMap.value = true; + setTimeout(() => { + initMapMark(); + },1000); + + } + ///////////////////////////////////////// 查看轨迹信息的弹窗数据补充 ///////////////////////////////////////// + + // 引入轨迹信息 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// let locusMap; @@ -334,7 +363,8 @@ const initMapMark = () => { // 在百度地图容器中创建地图实例 locusMap = new BMapGL.Map("locusMap"); // 创建地图实例，并且与对应的容器ID值相绑定 - let point = new BMapGL.Point(104.10,30.68); // 设定地图的中心点和坐标，其中的参数分别为：经度、纬度 + // TODO: 地图中心点需要根据地点来获取 + let point = new BMapGL.Point(104.10,30.68); // 设定地图的中心点和坐标，其中的参数分别为：经度、纬度 locusMap.centerAndZoom(point, 17); // 设置中心点坐标和地图级别 locusMap.enableScrollWheelZoom(point, 35); // 允许滚轮缩放，缩放的值一般在3-19，再放大就没有效果了 // let opts = {offset: new BMap.Size(10, 10)}; // 添加左上角缩放比例尺(offset: new BMap.Size(0, 0)为比例尺的坐标位置) @@ -347,33 +377,12 @@ // map.addTileLayer(traffic); // 叠加路况图层 // map.setTrafficOn(); // 叠加路况图层处理点问题，具体查看：https://inhami.com/blogdetail/82 解决方案 - axios.get('http://localhost:8080/detection/List', { - params: { - limit: PageSize.value, - offset: 1 - } - }) - .then(response => { - if (response.data.code === 200) { - RecordsData.value = response.data.data.detectionRecord; - totalCount = response.data.data.count; - isLoaded = true; - } else { - console.error("Failed to fetch records"); - } - console.log("getData", RecordsData); - }) - .catch(error => { - console.error('wrong:', error); - }); - // 下面的过程是将地图进行轨迹的绘制 let pointLocus = []; - for (var i = 0; i < currentPerson.value.locus.length; i++) { - // console.log(currentPerson.value); - // console.log(currentPerson.value.locus[0].lng); - pointLocus.push(new BMapGL.Point(currentPerson.value.locus[i].lng, currentPerson.value.locus[i].lat)); + + for (var i = 0; i < TrajectoryData.value.length; i++) { + pointLocus.push(new BMapGL.Point(TrajectoryData.value[i].lat, TrajectoryData.value[i].lng)); } // var icons = new BMap.IconSequence(symbol, '100%', '10%',true);//设置为true，可以对轨迹进行编辑 @@ -387,41 +396,9 @@ // icons:[icons] }); - // 建议去看一下如何设置这种线条为代用箭头，好看一点 - //绘制箭头及其样式 - // 创建箭头符号 - // var symbol = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { - // scale: 0.6, // 箭头大小 - // rotation: 120, // 箭头旋转角度 - // strokeColor: '#f00', // 符号边框颜色 - // strokeWeight: 2, // 符号边框宽度 - // fillColor: '#00f', // 符号填充颜色 - // fillOpacity: 0.8 // 符号填充透明度 - - // // scale: 0.6,//图标缩放大小 - // // strokeColor:'#fff',//设置矢量图标的线填充颜色 - // // strokeWeight: 2,//设置线宽 - // }) - // // 在折线上添加箭头符号 - // pl.setStrokeStyle({symbol: symbol}); - - // 绘制轨迹 - bmaps.value = locusMap; - pls.value = pl; - locusMap.setHeading(64.5); - locusMap.setTilt(73); - // 添加动画 - trackAni = new BMapGLLib.TrackAnimation(bmaps.value, pls.value, { - overallView: true, - tilt: 30, - duration: 20000, - delay: 300 - }); - setTimeout(start(), 30000); - //for 循环处理下列问题，添加到地图当中去 - for (var i = 0; i < currentPerson.value.locus.length; i++) { - let currentPoint = new BMapGL.Point(currentPerson.value.locus[i].lng,currentPerson.value.locus[i].lat); + for (var i = 0; i < TrajectoryData.value.length; i++) { + let currentPoint = new BMapGL.Point(TrajectoryData.value[i].lat,TrajectoryData.value[i].lng); let localIcon = new BMapGL.Icon(localMarkerIcon, new BMapGL.Size(31, 64)) let localMarker = new BMapGL.Marker(currentPoint ,{ icon: localIcon }) @@ -437,7 +414,7 @@ // 创建文本标注对象 // var label = new BMap.Label('欢迎使用百度地图JSAPI GL版本', opts) - let innerLabel = "

" + currentPerson.value.locus[i].address +"

"+ currentPerson.value.locus[i].IP +"

" + let innerLabel = "

" + TrajectoryData.value[i].address +"

"+ TrajectoryData.value[i].ip +"

" let label = new BMapGL.Label(innerLabel, opts) // 自定义文本标注样式 label.setStyle({ @@ -454,7 +431,19 @@ locusMap.addOverlay(label) } - + // 绘制轨迹 + bmaps.value = locusMap; + pls.value = pl; + locusMap.setHeading(64.5); + locusMap.setTilt(73); + // 添加动画 + trackAni = new BMapGLLib.TrackAnimation(bmaps.value, pls.value, { + overallView: true, + tilt: 30, + duration: 5000, + delay: 300 + }); + setTimeout(start(), 3000); } // 开始执行轨迹的跟踪 const start = () => { @@ -540,24 +529,24 @@ } } - ///////////////////////////////////////// 查看轨迹信息的弹窗数据补充 ///////////////////////////////////////// - // 点击查看轨迹按钮 - const handleClick = (row) => { - // 这一步是将proxy对象转化为普通的对象，因为row对象是proxy对象 - currentPerson.value = JSON.parse(JSON.stringify(row)); - console.log(row); - console.log(currentPerson.value); - - // 打开弹窗:记得是将数据转化完成之后再打开弹窗，打开弹窗之后再加载地图 - dialogVisibleLocusMap.value = true; - setTimeout(() => { - initMapMark(); - },0); - - } - ///////////////////////////////////////// 查看轨迹信息的弹窗数据补充 ///////////////////////////////////////// + // 建议去看一下如何设置这种线条为代用箭头，好看一点 + //绘制箭头及其样式 + // 创建箭头符号 + // var symbol = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { + // scale: 0.6, // 箭头大小 + // rotation: 120, // 箭头旋转角度 + // strokeColor: '#f00', // 符号边框颜色 + // strokeWeight: 2, // 符号边框宽度 + // fillColor: '#00f', // 符号填充颜色 + // fillOpacity: 0.8 // 符号填充透明度 + // // scale: 0.6,//图标缩放大小 + // // strokeColor:'#fff',//设置矢量图标的线填充颜色 + // // strokeWeight: 2,//设置线宽 + // }) + // // 在折线上添加箭头符号 + // pl.setStrokeStyle({symbol: symbol}); ///////////////////////////////////////// 查看蓝丁格尔玫瑰图 ///////////////////////////////////////// diff --git a/Code/frontend/src/pages/Monitoring.vue b/Code/frontend/src/pages/Monitoring.vue index ceabeef..5e77a16 100644 --- a/Code/frontend/src/pages/Monitoring.vue +++ b/Code/frontend/src/pages/Monitoring.vue @@ -271,16 +271,12 @@ if (cameraClick.type == "folder") { for (let i = 0; i < ShowCameraData.child.length; i++) { if (cameraClick.child[i].type == "camera") { - console.log("zhaodaole", cameraClick) ShowCameraData.value.push(cameraClick) } } } else { - console.log("bushiwozhixinglea") ShowCameraData.value.push(cameraClick) } - - console.log("what we getcam", ShowCameraData.value) // Vue.set(demoData)