From 646442dc69c2bb97935fb6bbcf603bebe3cf9783 Mon Sep 17 00:00:00 2001 From: oldsheeppp Date: Thu, 24 Oct 2024 23:15:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86=E7=94=BB=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E8=BD=A8=E8=BF=B9=E7=9A=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Code/frontend/src/assets/hit0.png | Bin 0 -> 2795 bytes Code/frontend/src/pages/Detection.vue | 193 ++++++++++++------------- Code/frontend/src/pages/Monitoring.vue | 4 - 3 files changed, 91 insertions(+), 106 deletions(-) create mode 100644 Code/frontend/src/assets/hit0.png diff --git a/Code/frontend/src/assets/hit0.png b/Code/frontend/src/assets/hit0.png new file mode 100644 index 0000000000000000000000000000000000000000..cfffa80e0028c768fb3f7cd1e6395c0be94d26c0 GIT binary patch literal 2795 zcmV004R=004l4008;_004mK002@5009+P0026d000+n*IFNt00009 za7bBm000XQ000XQ0h0Lxr2qf`2XskIMF-#n4-OnFHztmw0000ObVXQnQ*UN;cVTj6 z0B~VxZgehgWpp4kE-)@NWrZ?j000UqNkleW=`_WZo6~uJ@w@i zDWs4>3Mr(JLJBFQkU|QXDiZbdJTIDKUTlMrqoV%dW1~}+zQWF|ye#Tj_5AuHT`7?< zFR*i$9br#g{3-!+m=>L};zcr_`XjBCgt(~ByxRJedDgF9U<30p>xC<$Qg~kEnO++# zcuCt7nxNG6o@Ptce)L{w{qV!qtA5n_Cgk_i)d=R#e_{Rc)`%#fR@S%VLF=7d8OL%=(N~+l{+AB|5#lQ26}J8 zLaSn}^)B)gSrxG=23hYKd@QiS-4OV#s2rZBn{}HHm#7DQ2WlroLDiu1uUtC10MR#C zZ%H}oiSk`^bzeVxC(1nJ8rTJ%Wp6Y;W=}j{+(;~<-d#&YPgOb0~h{sc<= zxg61k0uByBX-0E(OK|llm8F|tDESwZ#l0#)9x+!!UQ}LsD*AjL0{-I~Hx1~s3%%CJ z79|-~?$&p(91>Ug=7;>;>ryHWw0VTKmr6{jZr7y3(#{SnJd#7|_4N5A`rPIkZyao= z-E}PJytaj0Nn{`S)wiJdP2g#VVyQrB$zVRyY}O(=K>jgo_~&3fUu#MS4f?U#pmv%) ze%TRiAukbK{b0dSy83>2H516Z`n3Bm?Y@|G0=j@w3<#?4ppRQ1!I@p8fp-6h0`o~d z7_|t}M)DGoL3Q)y*oTN!tmxw|WyisG_MU5XA#lg>CNjE($YBmcGeN1v%c&p*@l zVl6Cmy6_=`%L+27IZQ^vhrhd&P6Ooc#EQPoo_KcDx9FHgS&NXTRUogrgt6|VP3CZl zHutgLU7(Qwv2DHU&We(l1hBrj2<86dQa%mhhU$*umX6d%BY+9)kP5UQ?So9sYYO;R^79VoA!>(fV{W}Dy1gRY;v_p zgKiIT_ViYb92#s7T_s9l|M0QwH47l}dmIvbT$4)!L~dmA@52(`&d*On!lSO|(m=ay zw7bTZYj2Qx!jt2m&&_vp5)79@#~Bi&TZA z*gGX+yu3vB#9-(&NVv&G&O|`lr{!RZ%1gXx{;KXv%~~NE+DP6k73orVF(gdtKq21y zwdA+)-q(fsZJwg!N#({LI+@e>GRS+xMM_q%5ciH&SPsY2S47DpBhcchAASz1=d0Ob&&A~*E4Bgyxp|@j#Rj(RDi9Ag>2%)W+?xDCecI%Ikq4>J3L48 z=YW8_WbTBNOfT|z{yDH-JYY(scuL;r3#Q5?O!{xGiKPL;pJLLhBj216O*hjdK&HRx zR&IF3H@z}#1N3EWU^c{_Ffy}i!yF|~!W6mLt>x4g8Gmp5M6#Kg=)OzeZ2-lbTFk|=JCd-MENSZfod{t(Z= zL*z0*r^6hrs(6FP#aG_K+aRxri$>;mSk`;(NlW`C@}gTwOm0K?;g#&OTV4I8K|BQV zujO!hqgZuENYuLCKqpCN}^PC;tyv&gjN03HC7tXLGEy`rTs$dEo=P? zcXglS-G+YY)3nmLT|7?~Q?~)x4jf~qfq7U6yqiT0rBdFKZ$uJ_i=cXmsNsh;X`sz+ zCP^4VIFjS152LRMn!HjX5c0ut7NWN$B+4aoy`SP&FJYkUFZ@cLZVDQzC^?}!FJ)&Ck^QN zZQ9QjgQ<6$kLV>I`5-UjC2pR7GAa>wjma)rB?o6MjDItWw`;6UX%H*amsEMDe43`| zTeNVCYhV{p=CQcINx0F*$X~{hZK7Vl{R(>QaOvj)TfqIg&E!p>mZ#(kOwatlHSk!V zMEvz*hpy4ec)I9PSS^LCvBYuj<%rAk+*OhhN^`7$R@y=OMS_QBZDz-X5Q1 zgI!TNQcIMqMZR+mDsnI9LC89!xXb@-<^R^8cl~xl3oF=4qTDJ7hUYUdX;kGla32b+ z*O%P-?MQcBqg4`R8zBsXu*K+o4LaXVFn=%qzL~swrA7!^{%?ccdeX_N&LS5s4b9c0 zylhT|z*+L0SxZ-N5~8u994`7bXYI`R<|>JS#C>cvLUjGn_K5B=5@082w*pOyEbsxH xr{D{xLJBFQkU|P6q>w@iDWs4>nv
@@ -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)