From 51acd341f87a6f884a25ef5bb729aa870fe972e4 Mon Sep 17 00:00:00 2001 From: gounaikang Date: Mon, 19 Dec 2022 17:12:08 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=87=E6=98=8E=E5=88=9B=E5=9F=8E?= =?UTF-8?q?=E5=9C=BA=E6=99=AF=E8=A7=86=E9=A2=91=E6=A0=87=E7=AD=BE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E5=8D=95=E9=80=89=EF=BC=8C=E9=81=93=E8=B7=AF=E4=BF=9D?= =?UTF-8?q?=E6=B4=81=E4=B8=AD=E9=97=B4=E5=9C=B0=E5=9B=BE=E7=9A=84=E5=8F=AF?= =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E8=AF=A6=E6=83=85=EF=BC=8C=E7=BA=BF=E7=B4=A2?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=92=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/supermap/advance-init.js | 14 ++ src/supermap/createMarkerPopup.js | 24 +++ src/views/pages/civilizedCity/index.vue | 11 ++ .../components/CauseAnalysis.vue | 33 +++- .../components/RoadIssuePop.vue | 154 ++++++++++++++++++ .../roadGovernance/components/RoadMain.vue | 53 ++++-- 6 files changed, 272 insertions(+), 17 deletions(-) create mode 100644 src/views/pages/roadGovernance/components/RoadIssuePop.vue diff --git a/src/supermap/advance-init.js b/src/supermap/advance-init.js index 10f0d8e..9cf138a 100644 --- a/src/supermap/advance-init.js +++ b/src/supermap/advance-init.js @@ -22,6 +22,7 @@ import { createSearchAddressTitlePop, createCameraDetailsPop, createRoadGovernancePop, + createRoadIssuePop, createEventListDetailsPop, createEventListDetailsPopNew, createImportantAreaPopNew, @@ -178,6 +179,18 @@ export function MapFun(mapObj) { // debugger L.popup({ className: 'roadGovernance-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) } + /** + * 添加道路工地、渣土车等详情 + * @private + */ + const _openPopupRoadIssue = function(feature) { + // debugger; + const allMapObject = { mapObj: mapObj } + const elementHtml = createRoadIssuePop(feature, allMapObject) + console.log(allMapObject) + // debugger + L.popup({ className: 'roadIssue-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } /** * 根据图层名数组移除图层 * @param layerNameArray {Array} 图层名 @@ -2109,6 +2122,7 @@ export function MapFun(mapObj) { openPopupVideoSurveillance: _openPopupVideoSurveillance, openPopupEventDetailNew: _openPopupEventDetailNew, openPopupRoadGovernance: _openPopupRoadGovernance, + openPopupRoadIssue: _openPopupRoadIssue, closeAllPopup: _closeAllPopup, addMovingMarker: _addMovingMarker, addResourceOnMapWithoutSuperMapCluster: _addResourceOnMapWithoutSuperMapCluster, diff --git a/src/supermap/createMarkerPopup.js b/src/supermap/createMarkerPopup.js index b088cd8..a28e246 100644 --- a/src/supermap/createMarkerPopup.js +++ b/src/supermap/createMarkerPopup.js @@ -30,6 +30,7 @@ import CameraDetailsPop from '@/views/pages/videoSurveillance/components/CameraD import SearchAddressTitlePop from '@/views/pages/videoSurveillance/components/SearchAddressTitlePop' import { selectByChannelCode } from '@/api/videoSurveillance/index.js' import RoadGovernancePop from '@/views/pages/roadGovernance/components/RoadGovernancePop' +import RoadIssuePop from '@/views/pages/roadGovernance/components/RoadIssuePop' import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventListDetailsPop' import EventListDetailsPopNew from '@/views/pages/civilizedCity/components/EventListDetailsPopNew' import SiteListPop from '@/views/pages/construction/components/SiteListPop' @@ -156,6 +157,28 @@ function createRoadGovernancePop(feature, allMapObject) { }) return popupDom.initDom() } +//道路污染渣土车工地等详情弹窗 +function createRoadIssuePop(feature, allMapObject) { + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature, + allMapObject: allMapObject, + } + }, + created() { + // this.allMapObject = allMapObject + // console.log('allMapObject', this.allMapObject) + // console.log('allMapObject', allMapObject) + // debugger + }, + components: { + RoadIssuePop + } + }) + return popupDom.initDom() +} // 隔离酒店弹窗 function createIsolationHotelPop(feature) { const popupDom = new Dom({ @@ -754,6 +777,7 @@ export { createCameraDetailsPop, createSearchAddressTitlePop, createRoadGovernancePop, + createRoadIssuePop, createEventListDetailsPop, createEventListDetailsPopNew, createSiteListPop, diff --git a/src/views/pages/civilizedCity/index.vue b/src/views/pages/civilizedCity/index.vue index 2e8c1de..24322d8 100644 --- a/src/views/pages/civilizedCity/index.vue +++ b/src/views/pages/civilizedCity/index.vue @@ -550,6 +550,17 @@ export default { }) }, tabChange (item) { + if(this.checkboxGroup.length > 1 ) { + let originItem = this.checkboxGroup.shift() + this.hiMapFun.removeLayerByLayerName(originItem) + this.checkStatus = '2' + this.camreaTreeIsShow = true + getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then( + (res) => { + this.camreaTree = res.data.data + } + ) + } if (this.checkboxGroup.indexOf(item.labelName) !== -1) { if (item.labelName == '全部') { this.addResourceTomap('全部', this.cameraAllData) diff --git a/src/views/pages/roadGovernance/components/CauseAnalysis.vue b/src/views/pages/roadGovernance/components/CauseAnalysis.vue index af13362..d8185b6 100644 --- a/src/views/pages/roadGovernance/components/CauseAnalysis.vue +++ b/src/views/pages/roadGovernance/components/CauseAnalysis.vue @@ -26,7 +26,8 @@ class="table" :data="buildingData" height="250" - :cell-style="{ color: '#fff', 'text-align': 'center' }" + @row-click="handleRowClick" + :cell-style="{ color: '#fff', 'text-align': 'center',cursor: 'pointer' }" :header-cell-style="{ color: '#fff', 'text-align': 'center' }" > @@ -46,7 +47,8 @@ class="table" :data="slagTruckData" height="250" - :cell-style="{ color: '#fff', 'text-align': 'center' }" + @row-click="handleRowClick" + :cell-style="{ color: '#fff', 'text-align': 'center',cursor: 'pointer' }" :header-cell-style="{ color: '#fff', 'text-align': 'center' }" > @@ -62,7 +64,8 @@ class="table" :data="sanitationTruckData" height="250" - :cell-style="{ color: '#fff', 'text-align': 'center' }" + @row-click="handleRowClick" + :cell-style="{ color: '#fff', 'text-align': 'center',cursor: 'pointer' }" :header-cell-style="{ color: '#fff', 'text-align': 'center' }" > @@ -260,6 +263,26 @@ export default { }, selectShowOnMap (type, selectStatus) { this.$emit('selectShowOnMap', type, selectStatus) + }, + handleRowClick(data) { + let type = ""; + let lat = 0 + let lng = 0 + if(this.tabsActiveName === '建筑工地') { + type = "construction" + lat = data.wd + lng = data.jd + } else if(this.tabsActiveName === '渣土车') { + type = 'slagTruck' + lat = data.latitude + lng = data.longitude + } else { + type = 'sanitationTruck' + lat = parseFloat(data.wd) + lng = parseFloat(data.jd) + } + let postData = Object.assign(data, { type, lat, lng}) + this.$emit('clueRowClick', postData) } }, created () {}, @@ -359,7 +382,9 @@ export default { .cell { font-size: 14px; } - + .el-table--enable-row-hover .el-table__body tr:hover > td { + background-color: rgba($color: #66ffff, $alpha: 0.2) !important; + } .table-title-box { display: flex; .el-checkbox { diff --git a/src/views/pages/roadGovernance/components/RoadIssuePop.vue b/src/views/pages/roadGovernance/components/RoadIssuePop.vue new file mode 100644 index 0000000..23285c7 --- /dev/null +++ b/src/views/pages/roadGovernance/components/RoadIssuePop.vue @@ -0,0 +1,154 @@ + + + + diff --git a/src/views/pages/roadGovernance/components/RoadMain.vue b/src/views/pages/roadGovernance/components/RoadMain.vue index 6ffc66b..268f7c2 100644 --- a/src/views/pages/roadGovernance/components/RoadMain.vue +++ b/src/views/pages/roadGovernance/components/RoadMain.vue @@ -76,6 +76,7 @@ :slagTruckData="slagTruckData" @close="close" @selectShowOnMap="selectShowOnMap" + @clueRowClick="handleClueRowClick" > @@ -135,6 +136,7 @@ import { import TiledMap from '@/views/pages/mapHome/components/tiledMap' import { createRoadGovernancePop, + createRoadIssuePop, createCameraDetailsPop } from '@/supermap/createMarkerPopup' import CauseAnalysis from '@/views/pages/roadGovernance/components/CauseAnalysis' @@ -417,11 +419,13 @@ export default { const arr = [0, 0.0, '', '0', '0.0'] if (arr.indexOf(item.wd) == -1) { dataEvent.push({ - latLng: { lat: Number(item.wd), lng: Number(item.jd) } + latLng: { lat: Number(item.wd), lng: Number(item.jd) }, + type: "road", + data: Object.assign(item, { type: 'construction'}) }) } }) - this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building') + this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building', createRoadIssuePop) }, // 根据经纬度和半径查询渣土车 async listSedimentTrailByPoints (data) { @@ -461,11 +465,13 @@ export default { latLng: { lat: Number(this.slagTruckData[key].latitude), lng: Number(this.slagTruckData[key].longitude) - } + }, + type: 'road', + data: Object.assign(this.slagTruckData[key], { type: 'slagTruck'}) }) } // debugger - this.hiMapFun.addPointsToMap(dataEvent, 'slagTruck.png', 'slagTruck') + this.hiMapFun.addPointsToMap(dataEvent, 'slagTruck.png', 'slagTruck', createRoadIssuePop) }, // 根据经纬度和半径查询环卫车 async listTrailSanitationByPoints (data) { @@ -505,14 +511,17 @@ export default { const arr = [0, 0.0, '', '0', '0.0'] if (arr.indexOf(item.wd) == -1) { dataEvent.push({ - latLng: { lat: Number(item.wd), lng: Number(item.jd) } + latLng: { lat: Number(item.wd), lng: Number(item.jd) }, + type: 'road', + data: Object.assign(item, { type: 'sanitationTruck'}) }) } }) this.hiMapFun.addPointsToMap( dataEvent, 'sanitationTruck.png', - 'sanitationTruck' + 'sanitationTruck', + createRoadIssuePop ) }, // 根据经纬度和半径查询摄像头 @@ -614,14 +623,17 @@ export default { latLng: { lat: Number(item.latitude), lng: Number(item.longitude) - } + }, + type: 'road', + data: Object.assign(item, { type: 'slagTruck'}) }) } }) this.hiMapFun.addPointsToMap( dataEvent, 'slagTruck.png', - 'slagTruckAll' + 'slagTruckAll', + createRoadIssuePop ) }) break @@ -632,14 +644,17 @@ export default { const arr = [0, 0.0, '', '0', '0.0'] if (arr.indexOf(item.wd) == -1) { dataEvent.push({ - latLng: { lat: Number(item.wd), lng: Number(item.jd) } + latLng: { lat: Number(item.wd), lng: Number(item.jd)}, + type: 'road', + data: Object.assign(item, { type: 'sanitationTruck'}) }) } }) this.hiMapFun.addPointsToMap( dataEvent, 'sanitationTruck.png', - 'sanitationTruckAll' + 'sanitationTruckAll', + createRoadIssuePop ) }) break @@ -650,14 +665,17 @@ export default { const arr = [0, 0.0, '', '0', '0.0'] if (arr.indexOf(item.wd) == -1) { dataEvent.push({ - latLng: { lat: Number(item.wd), lng: Number(item.jd) } + latLng: { lat: Number(item.wd), lng: Number(item.jd) }, + type: 'road', + data: Object.assign(item, { type: 'construction'}) }) } }) this.hiMapFun.addPointsToMap( dataEvent, 'building.png', - 'buildingAll' + 'buildingAll', + createRoadIssuePop ) }) break @@ -720,7 +738,7 @@ export default { const arr = [0, 0.0, '', '0', '0.0'] if (arr.indexOf(item.wd) == -1) { dataEvent.push({ - latLng: { lat: Number(item.wd), lng: Number(item.jd) } + latLng: { lat: Number(item.wd), lng: Number(item.jd) }, }) } }) @@ -751,6 +769,15 @@ export default { break } }, + // 行点击线索 + handleClueRowClick(data) { + this.hiMap.mapObj.map.flyTo({ lat: data.lat + 0.007, lng: data.lng }, 13) + const feature = { + latLng: { lat: data.lat, lng: data.lng }, + data: data + } + this.hiMapFun.openPopupRoadIssue(feature) + }, // 路网上图 roadOnMap () { this.roadData.forEach((item) => {