From bcbafaf9f0c43220b1f4f2ed510be713faea0830 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E7=A7=80=E5=9C=86?= <1393343789@qq.com> Date: Thu, 29 Sep 2022 18:19:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E8=A7=84=E5=88=99=E6=A1=86=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/api/file.js | 6 +- front/src/supermap/image/icon-poylon.png | Bin 0 -> 1765 bytes front/src/views/home/infrastructurePage.vue | 46 ++-- .../views/home/videoSurveillance/index.vue | 199 +++++++++++++----- 4 files changed, 180 insertions(+), 71 deletions(-) create mode 100644 front/src/supermap/image/icon-poylon.png diff --git a/front/src/api/file.js b/front/src/api/file.js index d7e2349d..ccb2466b 100644 --- a/front/src/api/file.js +++ b/front/src/api/file.js @@ -105,9 +105,5 @@ export function getCameraInfoByAreaId(params) { } //能力集市基础设施-摄像头 export function getCameraByCondition(params) { - return axios.get( - 'http://10.134.135.92:9537/data_service/getCamera/getCameraByCondition?' + - params, - config2 - ) + return axios.post('http://10.134.135.92:9537/data_service/getCamera/getCameraByCondition', params, config2) } diff --git a/front/src/supermap/image/icon-poylon.png b/front/src/supermap/image/icon-poylon.png new file mode 100644 index 0000000000000000000000000000000000000000..593e91f0d95308651b44c8485fb63233761174cc GIT binary patch literal 1765 zcmaJ?c~BE)98EMJauh^Cq!!oEQc%d|;7Uli5<)lvF~At92ssv#Lb7SHnt(wLi?o6w zM8OfE3XD2-P!6HCRt_nMRt53uXq9TwrlVEBD4+t}P{96Cx-+}qG4H+K@x5>MYhFya zjis|C27|GQ;IR1UNH)C|=IGZY=&MF_ScQZMkT^IM(Fj!#CPV^@ARt06OoRB4P?Gt@ zC5Vo}EOwK{3lIS}nkI(j1fdB-(8`r48-t+-X_Z28I)nfsC{3nd;9s0;#{)761HaLS zOXMnsJpnS2Ux^-`!^=M-3w zTC9>O5gDuiOo~DgycJ>K(M zdY|uq3ajHYl@Q2>)bLi77(KXDS5qh@jj4i!2&{^S;f%R1@}w{VtEI3KU@}czqXO<5 zWeN$bQG3jAxLjIKvB^i?_-l1v1B#yyu23$TitPu0$iVAeC$zBw?#yIWSW;O}20@p$qEGawQAr z!d#FGqRD`!!~NG`&uyU&GEL{Li!SEP4=GT`t59nXt_;XQZ%jf2DFPD>0n%Vl>Kv8K((&aLH*B%~y zNIZ0fcOsnqS^G}hZyABYm%W?ZkKsJa9}6Rr|5|Gw4wck}kT$rG@-q3$(`J4H*Gmt8vq!7E39nJ`?m{WyN81;1e3&T=Q!v+-(HCWI`q5HO%8@^i>y?XyEi*jB5 za!l0O@(Zpno(6}#ULAf^OOLcUdT@tJr#@DRHRF|5HBBddP>tWtusdCw#<;*kj9ogQ zCC|Fvtsh^xyy({ippD&ksLG(rUre{y(DTH0*Ztrh_dJ(-@kf_h4>yqse>OWx6V+n@ zt-iP1fCr(Pl6{9_&)_yyU|#kpq)k7WKgW(RMU4DrA^WLrbYg7!!;Z3|1Bu;WLb!8Y zM1euKXx%RT*m)>(HFzM#riAAph-}i=xx|aG>o0ZQX>3}N_I62KoBn3&_v6%p;BL7^HOWi48A?y7U<$w_>~cpmFfFLC1^y1ZgY@7hq~;4~2TWXoIf zasll;W;A{HOqV5pti8gmwII48FrcB}=M<05YV5kiJnp^%fW%AJR5uTc0re6>_Qt_U zh0K4l^hBdy##QYP`B`yo@hPK~782E?laE6jKF+#NHXL&Z&g|vxt+h)Q+dHj~3DAZ8 z&fzBd7e1Gny{R{w#@vI(N28(#yZa9B+_Bkee{ya?hnOeKt!+5StLuB4-M<}2r!`Kz zs$o;6vJG-d3aP5`MywIfskSfSrQd#SYnOw4bT8Pmq`p6|^{OLoy?Pt|j$d#rQBa@V zf=TkCrF25>Ranp1sc%wT$JZEgt!=5-)*PvE7W{E!$-C*0P4CLA`iqi#uHOo&by@Yw dVhhGD1tTa4Z!I!Ba5w#UBEn)=r$STm{{|a#r|tj% literal 0 HcmV?d00001 diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue index 41c42d55..259282eb 100644 --- a/front/src/views/home/infrastructurePage.vue +++ b/front/src/views/home/infrastructurePage.vue @@ -413,7 +413,7 @@

备选 - {{ pagination.total }} + {{ pagination.total || 0 }} 个

@@ -941,9 +941,16 @@ mapSearchParam.value.gpsX = param.gpsX mapSearchParam.value.gpsY = param.gpsY mapSearchParam.value.radius = param.radius + mapSearchParam.value.type = param.type + mapSearchParam.value.borderPolygonList = param.borderPolygonList + mapSearchParam.value.pageSize = param.type!=0?20000:10 selectedRowKeys.value = [] //清空选中的点位 selectedList.value = [] - getCamera() + + + dataSource.value = param.dataSource + pagination.value.total = param.total + // getCamera() }) //点位点击 mybus.off('pointMarkerClick') @@ -1761,6 +1768,7 @@ videoList.value = [] pagination.value.current = 1 mapSearchParam.value.pageNum = 1 + mapSearchParam.value.type = 0 pagination.value.pageSize = 10 getCamera() } @@ -1871,6 +1879,8 @@ latitude: mapSearchParam.value.gpsY || '', radius: mapSearchParam.value.radius || '', name: mapSearchParam.value.cameraName, + type: mapSearchParam.value.type, + borderPolygonList: mapSearchParam.value.borderPolygonList || [], } // todo-临时放开 // if ( @@ -1880,22 +1890,22 @@ // ) { // params.status = '' // } - let paramsFather = '' - let i = 1 - for (var key in params) { - if (params[key] === '') { - delete params[key] - } else { - if (i != 1) { - paramsFather += `&${key}=` + params[key] - i += 1 - } else if (i == 1) { - paramsFather += `${key}=` + params[key] - i += 1 - } - } - } - getCameraByCondition(paramsFather).then((res) => { + // let paramsFather = '' + // let i = 1 + // for (var key in params) { + // if (params[key] === '') { + // delete params[key] + // } else { + // if (i != 1) { + // paramsFather += `&${key}=` + params[key] + // i += 1 + // } else if (i == 1) { + // paramsFather += `${key}=` + params[key] + // i += 1 + // } + // } + // } + getCameraByCondition(params).then((res) => { dataSource.value = res.data.data pagination.value.total = res.data.count console.log('根据parent查询摄像头', res.data.data) diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue index 47002565..7660f412 100644 --- a/front/src/views/home/videoSurveillance/index.vue +++ b/front/src/views/home/videoSurveillance/index.vue @@ -65,6 +65,8 @@ data-spm-anchor-id="a313x.7781069.0.i0" > + +
{ - console.log("mounted -> pointlist", pointlist) + console.log("mounted -> pointlist", pointlist); for(let i=0;i { + const type = e.layerType + const circleLayer = e.layer + console.log('查询图层draw:created', e) + if (type === 'polygon') { + const polygonLayer = e.layer; + this.hiMap.mapObj.featureGroup.addLayer(polygonLayer); + this.hiMap.mapObj.layerGroup.set('rectangleSelectLayer', polygonLayer); + const arr = []; + const latlngs = []; //选择的坐标组 + polygonLayer._latlngs[0].map(item => { + // const bdLonLat = wgs84LL2bdLL(); + arr.push(turf.point([item.lng, item.lat])); + latlngs.push([item.lat,item.lng]) + }); + const points = turf.featureCollection(arr); + const rect = turf.convex(points); + + this.mapSearchParam.borderPolygonList = latlngs + this.mapSearchParam.type = 2 + const params = { + borderPolygonList: latlngs, + type: this.mapSearchParam.type, + } + // mybus.emit('getListByMap', params); + this.getCameraByParentId('map'); + console.log("areaSelectResource -> latlngs", latlngs) + } + }) + }, // 圈选方法 circleSelectResource() { L.drawLocal.draw.handlers.circle.tooltip.start = '请圈选区域' @@ -211,18 +257,20 @@ this.mapSearchParam.gpsX = e.layer._latlng.lng this.mapSearchParam.gpsY = e.layer._latlng.lat this.mapSearchParam.radius = radius + this.mapSearchParam.type = 1 const params = { gpsX: this.mapSearchParam.gpsX, gpsY: this.mapSearchParam.gpsY, radius: radius, + type: this.mapSearchParam.type, } - mybus.emit('getListByMap', params) - this.getCameraByParentId() + // mybus.emit('getListByMap', params) + this.getCameraByParentId('map') } } }) }, - getCameraByParentId() { + getCameraByParentId(type) { if (!this.whoShow1.itShowXiHaiAn) { debugger getCameraByParentId(this.mapSearchParam).then((res) => { @@ -236,31 +284,42 @@ this.mapSearchParam.parentId || '70be8c5b664f4bcf869d82f2e8335051', pageNum: this.mapSearchParam.pageNum, - pageSize: this.mapSearchParam.pageSize, + pageSize: this.mapSearchParam.type!=0?this.mapSearchParam.pageSize:10, name: this.mapSearchParam.cameraName || '', longitude: this.mapSearchParam.gpsX || '', latitude: this.mapSearchParam.gpsY || '', radius: this.mapSearchParam.radius || '', + type: this.mapSearchParam.type, + borderPolygonList: this.mapSearchParam.borderPolygonList || [], } - let paramsFather = '' - let i = 1 - for (var key in params) { - if (params[key] === '') { - delete params[key] - } else { - if (i != 1) { - paramsFather += `&${key}=` + params[key] - i += 1 - } else if (i == 1) { - paramsFather += `${key}=` + params[key] - i += 1 - } - } - } - getCameraByCondition(paramsFather).then((res) => { + // let paramsFather = '' + // let i = 1 + // for (var key in params) { + // if (params[key] === '') { + // delete params[key] + // } else { + // if (i != 1) { + // paramsFather += `&${key}=` + params[key] + // i += 1 + // } else if (i == 1) { + // paramsFather += `${key}=` + params[key] + // i += 1 + // } + // } + // } + getCameraByCondition(params).then((res) => { console.log('根据parent查询摄像头', res.data.data) - this.pointAllData = res.data.data - this.addResourceTomap('videoMap', res.data.data) + if(type=='map'){ + let params = this.mapSearchParam; + params.dataSource = res.data.data||0; + params.total = res.data.count||0; + mybus.emit('getListByMap', params); + } + this.pointAllData = res.data.data; + if(this.mapSearchParam.type!=0) + this.addResourceTomap('videoMap', res.data.data) + else + this.addResourceTomap('videoMap', []) //查询全部时不打点 }) } }, @@ -271,28 +330,66 @@ this.addressMatchUrl ) }, + areaMode(){ + // 转换不规则形状模式 + if(this.circleModeFlag){ + this.resetCircle(); + this.circleModeFlag = false; + } + + this.areaModeFlag = !this.areaModeFlag; + + if (this.areaModeFlag) { + // 打开不规则形状模式模式 + this.areaSelectResource() + } else { + this.resetArea(); + } + }, circleMode() { + if(this.areaModeFlag){ + this.resetArea(); + this.areaModeFlag = false; + } // 转换圈选模式 this.circleModeFlag = !this.circleModeFlag if (this.circleModeFlag) { // 打开圈选模式 this.circleSelectResource() } else { - // 关闭圈选模式，清空圈选内容，重新上图 - this.hiMapFun.removeLayerByLayerName('circlePloygonLayer') - // 重置内容 - this.mapSearchParam.gpsX = '' - this.mapSearchParam.gpsY = '' - this.mapSearchParam.radius = '' - this.getCameraByParentId() - const params = { - gpsX: this.mapSearchParam.gpsX, - gpsY: this.mapSearchParam.gpsY, - radius: this.mapSearchParam.radius, - } - mybus.emit('getListByMap', params) + this.resetCircle(); } }, + resetCircle(){ + // 关闭圈选模式，清空圈选内容，重新上图 + this.hiMapFun.removeLayerByLayerName('circlePloygonLayer') + // 重置内容 + this.mapSearchParam.gpsX = '' + this.mapSearchParam.gpsY = '' + this.mapSearchParam.radius = '' + this.mapSearchParam.type = 0; + const params = { + gpsX: this.mapSearchParam.gpsX, + gpsY: this.mapSearchParam.gpsY, + radius: this.mapSearchParam.radius, + type: this.mapSearchParam.type + } + this.getCameraByParentId('map') + // mybus.emit('getListByMap', params); + }, + resetArea(){ + // 关闭不规则形状模式模式，清空不规则形状模式内容，重新上图 + this.hiMapFun.removeLayerByLayerName('rectangleSelectLayer'); + // 重置内容 + this.mapSearchParam.borderPolygonList = []; + this.mapSearchParam.type = 0; + const params = { + borderPolygonList: this.mapSearchParam.borderPolygonList, + type: this.mapSearchParam.type + } + this.getCameraByParentId('map') + // mybus.emit('getListByMap', params); + }, //查询地址建议匹配 async searchAddressByKeyWord(queryString, cb, indexX) { this.disasterPointIndex = indexX @@ -367,17 +464,19 @@ addResourceTomap(type, data) { const dataEvent = [] - data.forEach((item) => { - const arr = [0, 0.0, '', '0', '0.0'] - if (arr.indexOf(item.gpsX) == -1) { - dataEvent.push({ - latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) }, - data: item, - active: item.active, - type: 'videoSurveillance', - }) - } - }) + if(data&&data.length>0){ + data.forEach((item) => { + const arr = [0, 0.0, '', '0', '0.0'] + if (arr.indexOf(item.gpsX) == -1) { + dataEvent.push({ + latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) }, + data: item, + active: item.active, + type: 'videoSurveillance', + }) + } + }) + } console.log('上图数据', dataEvent) this.getMapPoint(dataEvent, 'icon_camare.png', type) }, @@ -560,13 +659,17 @@ .leaflet-control-attribution { display: none; } - svg { + svg,.icon-poylon { position: absolute; bottom: 0.1rem; right: 0.1rem; z-index: 988; cursor: pointer; } + .icon-poylon { + width: 0.46rem; + bottom: 0.6rem; + } .address-auto-complete-input { width: 2.4rem; }