视频资源表格和地图选中联动
This commit is contained in:
parent
f79b43d261
commit
a4259cf2d9
|
@ -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 |
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue