视频资源表格和地图选中联动

This commit is contained in:
于秀圆 2022-09-28 16:42:35 +08:00
parent f79b43d261
commit a4259cf2d9
5 changed files with 73 additions and 17 deletions

View File

@ -1657,14 +1657,16 @@ export function MapFun(mapObj) {
features, features,
url, url,
layerName, layerName,
createPopupFun createPopupFun,
url2
) { ) {
console.log( console.log(
'_addResourceOnMapWithoutSuperMapCluster===============>', '_addResourceOnMapWithoutSuperMapCluster===============>',
features, features,
url, url,
layerName, layerName,
createPopupFun createPopupFun,
url2
) )
// 0 // 0
// if (features.length < 1) { // if (features.length < 1) {
@ -1685,14 +1687,19 @@ export function MapFun(mapObj) {
let layers = null let layers = null
// //
layers = createMarkerClusterLayer() layers = createMarkerClusterLayer()
const icon = createDefaultFeatureStyle({ const icon1 = createDefaultFeatureStyle({
img: url, img: url,
iconSize: [36, 36], iconSize: [33, 33],
})
const icon2 = createDefaultFeatureStyle({
img: url2,
iconSize: [33, 33],
}) })
features.map((feature) => { features.map((feature) => {
var bounds = map.getBounds() var bounds = map.getBounds()
// console.log("",feature.latLng); // console.log("",feature.latLng);
if ( feature.hasOwnProperty('latLng')) { if ( feature.hasOwnProperty('latLng')) {
let icon = feature.active?icon2:icon1
const marker = L.marker(feature.latLng, { icon }) const marker = L.marker(feature.latLng, { icon })
if (createPopupFun !== null) { if (createPopupFun !== null) {
marker.uuid = feature.uuid || '' marker.uuid = feature.uuid || ''
@ -1728,6 +1735,8 @@ export function MapFun(mapObj) {
} }
marker.on('click', e=>{ marker.on('click', e=>{
console.log('点位数据', e) console.log('点位数据', e)
mybus.emit('pointMarkerClick', feature)
}) })
layers.addLayer(marker) layers.addLayer(marker)
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -936,8 +936,26 @@
mapSearchParam.value.gpsX = param.gpsX mapSearchParam.value.gpsX = param.gpsX
mapSearchParam.value.gpsY = param.gpsY mapSearchParam.value.gpsY = param.gpsY
mapSearchParam.value.radius = param.radius mapSearchParam.value.radius = param.radius
selectedRowKeys.value = [] //
selectedList.value = []
getCamera() getCamera()
}) })
//
mybus.off('pointMarkerClick')
mybus.on('pointMarkerClick', (point) => {
console.log("pointMarkerClick->point", selectedList.value,point)
let check = false; //
if(selectedList.value&&selectedList.value.length>0){
selectedList.value.forEach(ele=>{
if(ele.channelCode == point.data.channelCode){
check = true;
}
})
}
let pointData = new Proxy(point.data, point);
onSelectChange(pointData,!check,'','','proxy');
})
}) })
const selectedList = ref([]) const selectedList = ref([])
const selectedRowKeys = ref([]) const selectedRowKeys = ref([])
@ -1739,9 +1757,10 @@
pagination.value.pageSize = 10 pagination.value.pageSize = 10
getCamera() getCamera()
} }
const videoClean = () => { const videoClean = () => {
selectedList.value = [] //
selectedRowKeys.value = [] // selectedList.value = []
// selectedRowKeys.value = []
videoList.value = [] videoList.value = []
current.value = 1 current.value = 1
} }
@ -1926,8 +1945,9 @@
}, },
]) ])
// const allClick = ref([]) // const allClick = ref([])
const onSelectChange = (record, selected, selectedRows, nativeEvent) => { const onSelectChange = (record, selected, selectedRows, nativeEvent,type) => {
console.log('hahhahah', record, selected, selectedRows, nativeEvent) console.log('hahhahah', record, selected, selectedRows, nativeEvent)
record = JSON.parse(JSON.stringify(record));
if (selected) { if (selected) {
if (selectedRowKeys.value.length == 1000) { if (selectedRowKeys.value.length == 1000) {
message.warning('最多只能添加1000个摄像头') message.warning('最多只能添加1000个摄像头')
@ -1936,14 +1956,17 @@
selectedRowKeys.value.push(record.channelCode || record.channelId) selectedRowKeys.value.push(record.channelCode || record.channelId)
} }
} else { } else {
selectedList.value = selectedList.value.filter( selectedList.value.forEach((ele,index)=>{
(item) => item.idtCameraChannel !== record.idtCameraChannel if(ele.channelCode == record.channelCode){
) selectedList.value.splice(index,1)
}
})
selectedRowKeys.value.splice( selectedRowKeys.value.splice(
selectedRowKeys.value.indexOf(record.channelCode || record.channelId), selectedRowKeys.value.indexOf(record.channelCode || record.channelId),
1 1
) )
} }
mybus.emit('selectTablePoint',selectedList.value)
console.log('已选中======================>', selectedList.value) console.log('已选中======================>', selectedList.value)
} }
const onSelectAll = (selected, selectedRows, changeRows) => { const onSelectAll = (selected, selectedRows, changeRows) => {
@ -1955,9 +1978,14 @@
if (selectedRowKeys.value.length > 1000) { if (selectedRowKeys.value.length > 1000) {
message.warning('最多只能添加1000个摄像头') message.warning('最多只能添加1000个摄像头')
changeRows.map((val) => { changeRows.map((val) => {
selectedList.value = selectedList.value.filter( // selectedList.value = selectedList.value.filter(
(item) => item.idtCameraChannel !== val.idtCameraChannel // (item) => item.idtCameraChannel !== val.idtCameraChannel
) // )
selectedList.value.forEach((ele,index)=>{
if(ele.channelCode == record.channelCode){
selectedList.value.splice(index,1)
}
})
selectedRowKeys.value.splice( selectedRowKeys.value.splice(
selectedRowKeys.value.indexOf(val.channelCode || val.channelId), selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
1 1
@ -1976,6 +2004,7 @@
}) })
} }
console.log('heiheiheiehiehei', selected, selectedRows, changeRows) console.log('heiheiheiehiehei', selected, selectedRows, changeRows)
mybus.emit('selectTablePoint',selectedList.value)
} }
// tab // tab

View File

@ -125,6 +125,7 @@
gpsY: '', gpsY: '',
radius: '', radius: '',
}, },
pointAllData:[],
} }
}, },
components: { components: {
@ -158,6 +159,20 @@
this.mapSearchParam.parentId = parentId this.mapSearchParam.parentId = parentId
this.getCameraByParentId() this.getCameraByParentId()
}) })
//
mybus.off('selectTablePoint')
mybus.on('selectTablePoint', (pointlist) => {
console.log("mounted -> pointlist", pointlist)
for(let i=0;i<this.pointAllData.length;i++){
this.pointAllData[i].active = false
for(let j=0;j<pointlist.length;j++){
if(this.pointAllData[i].channelCode == pointlist[j].channelCode){
this.pointAllData[i].active = true
}
}
}
this.addResourceTomap('videoMap', this.pointAllData);
})
}, },
methods: { methods: {
selectedAddress(item, index) { selectedAddress(item, index) {
@ -244,6 +259,7 @@
} }
getCameraByCondition(paramsFather).then((res) => { getCameraByCondition(paramsFather).then((res) => {
console.log('根据parent查询摄像头', res.data.data) console.log('根据parent查询摄像头', res.data.data)
this.pointAllData = res.data.data
this.addResourceTomap('videoMap', res.data.data) this.addResourceTomap('videoMap', res.data.data)
}) })
} }
@ -357,12 +373,13 @@
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) }, latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item, data: item,
active: item.active,
type: 'videoSurveillance', type: 'videoSurveillance',
}) })
} }
}) })
console.log('上图数据', dataEvent) console.log('上图数据', dataEvent)
this.getMapPoint(dataEvent, 'videoSurveillance.png', type) this.getMapPoint(dataEvent, 'icon_camare.png', type)
}, },
getMapPoint(data, img, type) { getMapPoint(data, img, type) {
// this.hiMapFun.clearAllLayers(); // this.hiMapFun.clearAllLayers();
@ -372,7 +389,8 @@
features, features,
img, img,
type, type,
createCameraDetailsPop createCameraDetailsPop,
'icon_camare_active.png'
) )
}, },
@ -546,7 +564,7 @@
position: absolute; position: absolute;
bottom: 0.1rem; bottom: 0.1rem;
right: 0.1rem; right: 0.1rem;
z-index: 1001; z-index: 988;
cursor: pointer; cursor: pointer;
} }
.address-auto-complete-input { .address-auto-complete-input {