更新了画地图轨迹的功能

Code/frontend/src/pages/Detection.vue

@@ -79,7 +79,7 @@
     <!-- 点击弹窗轨迹地图 -->
 	<el-dialog
 		v-model="dialogVisibleLocusMap"
-		title="asdf"
+		title="轨迹地图"
 		width="70%"
 	>
     <div style="position: relative; display: flex; flex-direction: row;  box-shadow: 0px 0px 10px rgba(0,0,0,0.2); padding:10px; border-radius: 8px;  align-items: center; background-color: rgba(128,128,128,0.2);">
@@ -96,24 +96,14 @@
 
         <div style=" height: 50vh; width: 30vh; margin-left: 2%;" >
             <div><img src="@/assets/TargetPerson.jpg" style="width: 40%; margin: 0.2%;"/></div>
-            <!-- <div style="color:rgb(255,255,255);"> <span>序号：</span> <span>{{currentPerson.id}}</span></div>
-            <div style="color:rgb(255,255,255);"><span>行人检索ID</span> <span>{{currentPerson.Person_ID}}</span></div>
-            <div style="color:rgb(255,255,255);"><span>初次出现地点</span> <span>{{currentPerson.location}}</span></div>
-            <div style="color:rgb(255,255,255);"><span>报警类型</span> <span>{{currentPerson.Alarm_type}}</span></div>
-            <div style="color:rgb(255,255,255);"><span>行人类别</span> <span>{{currentPerson.Person_pool}}</span></div>
-            <div style="color:rgb(255,255,255);"><span>初次出现时间</span> <span>{{currentPerson.time}}</span></div>
-            <div style="color:rgb(255,255,255);"><span>摄像头IP</span> <span>{{currentPerson.IP}}</span></div>
-            <div style="color:rgb(255,255,255);"><span>处理进度</span> <span>{{currentPerson.type}}</span></div> -->
-            
             <div> <span>序号：</span> <span>{{currentPerson.id}}</span></div>
-            <div><span>行人检索ID: </span> <span>{{currentPerson.Person_ID}}</span></div>
+            <div><span>行人检索ID: </span> <span>{{currentPerson.person_id}}</span></div>
-            <div><span>初次出现地点: </span> <span>{{currentPerson.location}}</span></div>
+            <div><span>出现地点: </span> <span>{{currentPerson.address}}</span></div>
-            <div><span>报警类型: </span> <span>{{currentPerson.Alarm_type}}</span></div>
+            <div><span>报警类型: </span> <span>{{currentPerson.alarm_type}}</span></div>
-            <div><span>行人类别: </span> <span>{{currentPerson.Person_pool}}</span></div>
+            <div><span>行人类别: </span> <span>{{currentPerson.person_type}}</span></div>
-            <div><span>初次出现时间: </span> <span>{{currentPerson.time}}</span></div>
+            <div><span>出现时间: </span> <span>{{currentPerson.detect_time}}</span></div>
-            <div><span>摄像头IP: </span> <span>{{currentPerson.IP}}</span></div>
+            <div><span>摄像头IP: </span> <span>{{currentPerson.ip_address}}</span></div>
-            <div><span>处理进度: </span> <span>{{currentPerson.type}}</span></div>
+            <div><span>处理进度: </span> <span>{{currentPerson.process_status}}</span></div>
-            <p>{{currentPerson.locus[0].lng}}</p>
         </div>
     </div>
         
@@ -121,13 +111,14 @@
         <!-- 使用for循环嵌套轨迹 -->
         <div style="height: 6vh; margin-top: 2%; ">
             <el-steps :active="active" finish-status="success" align-center >
-                <el-step :title="currentPerson.locus[0].lng" description="IP：192.168.205.251"/>
+                <!-- <el-step :title="currentPerson.locus[0].lng" description="IP：192.168.205.251"/>
                 <el-step title="深研院-2号楼-3楼" description="IP：192.168.205.252"/>
                 <el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/>
-                <el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/>
+                <el-step title="深研院-2号楼-室外" description="IP: 192.168.11.46"/> -->
-                <!-- <template :v-for="(item, index) in currentPerson.locus" :v-for="item in currentPerson.locus">
+                <el-step v-for="(item) in TrajectoryData"
-                    <el-step :title="item.IP" description="IP: 192.168.11.46"/>
+                            :title="item.address"
-                </template> -->
+                            :description="item.ip">
+                </el-step>
                 <!-- <el-step :title="item.IP" :description="item.lng"></el-step> -->
             </el-steps>
             <el-button type="primary" style="margin-top: 12px" @click="next">下次检测点</el-button>
@@ -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,6 +204,7 @@
     let isLoaded = false
     let RecordsData = ref(null)    
 
+    let TrajectoryData = ref([])
 
     ///////////////////////////////////////// 表格数据的分页功能 /////////////////////////////////////////
     // 每页显示的条数
@@ -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);
+        for (var i = 0; i < TrajectoryData.value.length; i++) {
-            // console.log(currentPerson.value.locus[0].lng);
+            pointLocus.push(new BMapGL.Point(TrajectoryData.value[i].lat, TrajectoryData.value[i].lng));
-            pointLocus.push(new BMapGL.Point(currentPerson.value.locus[i].lng, currentPerson.value.locus[i].lat));
         }
         
         // 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++) {
+        for (var i = 0; i < TrajectoryData.value.length; i++) {
-            let currentPoint = new BMapGL.Point(currentPerson.value.locus[i].lng,currentPerson.value.locus[i].lat);
+            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 = "<p>" + currentPerson.value.locus[i].address +"</p> <p>"+ currentPerson.value.locus[i].IP +"</p>"
+            let innerLabel = "<p>" + TrajectoryData.value[i].address +"</p> <p>"+ TrajectoryData.value[i].ip +"</p>"
             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});
 
 
     ///////////////////////////////////////// 查看蓝丁格尔玫瑰图 /////////////////////////////////////////

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)