diff --git a/src/assets/image/vehicle.png b/src/assets/image/vehicle.png new file mode 100644 index 0000000..1095fc3 Binary files /dev/null and b/src/assets/image/vehicle.png differ diff --git a/src/components/zhnjCov.vue b/src/components/zhnjCov.vue index 2915d38..164accc 100644 --- a/src/components/zhnjCov.vue +++ b/src/components/zhnjCov.vue @@ -1,183 +1,5 @@ @@ -512,6 +526,9 @@ export default { markersOrient: [], markersSoil: [], markersOther: [], + markersFlowmeter: [], + markersVehicle: [], + vehicleMarkerMap: new Map(), // 存储车辆id和marker的映射 lastClickIcon: '', urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/', mapTypeFlag: true, @@ -576,9 +593,11 @@ export default { currentVehicleInfo: null, vehicleLocationMarker: null, vehicleInfoWindow: null, - agriculturalDialogVisible: false, - agriculturalVehicleData: null, - vehicleListFull: null, + // 轨迹弹窗相关 + selectedVehicle: null, + trajectoryDialogVisible: false, + // 下拉菜单控制 + isVehicleDropdownOpen: false, }; }, created() { @@ -638,9 +657,87 @@ export default { this.vehicleListData(); }, methods: { + // ==================== 危废车辆下拉菜单方法 ==================== + + // 切换下拉菜单 + toggleVehicleDropdown() { + this.isVehicleDropdownOpen = !this.isVehicleDropdownOpen; + }, + + // 显示全部点位 - 使用veLat和veLong + showAllVehiclePoints() { + // 先清除之前的所有车辆标记 + this.markersVehicle.forEach(marker => { + marker.setMap(null); + }); + this.markersVehicle = []; + this.vehicleMarkerMap.clear(); + + // 重新从vehicleList添加所有车辆点位 + let addedCount = 0; + this.vehicleList.forEach(item => { + const lat = parseFloat(item.veLat); + const lng = parseFloat(item.veLong); + + if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) { + const marker = new AMap.Marker({ + position: [lng, lat], + icon: new AMap.Icon({ + size: new AMap.Size(30, 42), + image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', + imageSize: new AMap.Size(30, 42) + }), + offset: new AMap.Pixel(-15, -42), + zIndex: 1002, + extData: { vehicleInfo: item } + }); + + // 点击标记弹出信息窗口 + marker.on('click', (e) => { + const data = e.target.getExtData(); + if (data && data.vehicleInfo) { + // 先获取车辆位置点 + const point = { + jingdu: data.vehicleInfo.veLong, + weidu: data.vehicleInfo.veLat, + createTime: data.vehicleInfo.updateTime || new Date().toISOString() + }; + this.showVehicleInfoWindow(point, data.vehicleInfo); + } + }); + + marker.setMap(this.aMap); + this.markersVehicle.push(marker); + this.vehicleMarkerMap.set(item.id, marker); + addedCount++; + } + }); + + if (addedCount > 0) { + this.aMap.setFitView(this.markersVehicle, false, [200, 500, 360, 360], 16); + this.$message.success(`显示全部 ${addedCount} 个危废车辆点位`); + } else { + this.$message.warning('暂无有效的危废车辆点位数据'); + } + this.isVehicleDropdownOpen = false; + }, + + // 关闭点位显示 + hideAllVehiclePoints() { + this.markersVehicle.forEach(marker => { + marker.setMap(null); + }); + this.markersVehicle = []; + this.vehicleMarkerMap.clear(); + // 同时清除车辆位置标记 + this.clearVehicleMarker(); + this.$message.info('已关闭危废车辆点位显示'); + this.isVehicleDropdownOpen = false; + }, + // ==================== 危废车辆位置相关方法 ==================== - // 危化车辆点击 + // 危化车辆点击 - 从下拉列表选择 handleVehicleSelect(item) { this.currentVehicleInfo = item; @@ -648,62 +745,80 @@ export default { this.clearVehicleMarker(); const vehicleName = item.vePlate || item.plateNumber || '车辆'; - - gpsRecordPage({ - pageNo: 1, - pageSize: 1000, - gpsId: item.gpsId, - }).then(res => { - - if (res.result && res.result.records && res.result.records.length > 0) { - let trackData = res.result.records; - - - // 过滤掉无效的经纬度数据 - trackData = trackData.filter(record => { - const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon); - const lat = parseFloat(record.weidu || record.latitude || record.lat); - return !isNaN(lng) && !isNaN(lat) && - lng >= -180 && lng <= 180 && - lat >= -90 && lat <= 90; - }); - - if (trackData.length === 0) { - this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`); - return; - } - - // 按时间排序，获取最新位置 - trackData.sort((a, b) => { - const timeA = a.createTime || a.server_time || a.updateTime || 0; - const timeB = b.createTime || b.server_time || b.updateTime || 0; - return new Date(timeA) - new Date(timeB); - }); - - // 只取最后一个点（最新位置） - const latestPoint = trackData[trackData.length - 1]; - - // 定位到车辆位置并添加标记 - this.locateToVehicle(latestPoint, item); - + // 如果有经纬度直接定位 + if (item.veLat && item.veLong) { + const lat = parseFloat(item.veLat); + const lng = parseFloat(item.veLong); + if (!isNaN(lat) && !isNaN(lng)) { + const point = { + jingdu: item.veLong, + weidu: item.veLat, + createTime: item.updateTime || new Date().toISOString() + }; + this.locateToVehicle(point, item); this.$message({ - message: `成功加载 ${vehicleName} 的最新位置`, + message: `定位到 ${vehicleName}`, type: 'success' }); - } else { - this.$message({ - message: `${vehicleName} 暂无位置数据`, - type: 'warning' - }); + this.isVehicleDropdownOpen = false; + return; } - }).catch(err => { - console.error('获取位置数据失败:', err); - this.$message({ - message: '获取位置数据失败，请稍后重试', - type: 'error' + } + + // 如果没有经纬度，尝试通过gpsRecordPage获取 + if (item.gpsId) { + gpsRecordPage({ + pageNo: 1, + pageSize: 1000, + gpsId: item.gpsId, + }).then(res => { + if (res.result && res.result.records && res.result.records.length > 0) { + let trackData = res.result.records; + + trackData = trackData.filter(record => { + const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon); + const lat = parseFloat(record.weidu || record.latitude || record.lat); + return !isNaN(lng) && !isNaN(lat) && + lng >= -180 && lng <= 180 && + lat >= -90 && lat <= 90; + }); + + if (trackData.length === 0) { + this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`); + return; + } + + trackData.sort((a, b) => { + const timeA = a.createTime || a.server_time || a.updateTime || 0; + const timeB = b.createTime || b.server_time || b.updateTime || 0; + return new Date(timeA) - new Date(timeB); + }); + + const latestPoint = trackData[trackData.length - 1]; + this.locateToVehicle(latestPoint, item); + + this.$message({ + message: `成功加载 ${vehicleName} 的最新位置`, + type: 'success' + }); + } else { + this.$message({ + message: `${vehicleName} 暂无位置数据`, + type: 'warning' + }); + } + }).catch(err => { + console.error('获取位置数据失败:', err); + this.$message({ + message: '获取位置数据失败，请稍后重试', + type: 'error' + }); }); - }); + } else { + this.$message.warning(`${vehicleName} 没有GPS设备ID和位置信息`); + } + this.isVehicleDropdownOpen = false; }, // 定位到车辆位置 @@ -716,17 +831,14 @@ export default { const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon); const lat = parseFloat(point.weidu || point.latitude || point.lat); - // 验证经纬度是否有效 if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) { console.error('无效的经纬度:', lng, lat); this.$message.warning('车辆位置数据无效'); return; } - // 添加车辆位置标记（普通坐标点） this.addVehicleLocationMarker(lng, lat, point, vehicleInfo); - // 平滑定位到车辆位置 this.aMap.panTo([lng, lat]); setTimeout(() => { this.aMap.setZoomAndCenter(16, [lng, lat]); @@ -735,7 +847,7 @@ export default { console.log(`定位到车辆位置: ${lng}, ${lat}`); }, - // 添加车辆位置标记（普通坐标点） + // 添加车辆位置标记 addVehicleLocationMarker(lng, lat, point, vehicleInfo) { if (isNaN(lng) || isNaN(lat)) { console.error('无效的经纬度:', lng, lat); @@ -745,9 +857,6 @@ export default { this.removeLocationMarker(); this.closeVehicleInfoWindow(); - const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆'; - - // 使用普通坐标点标记 const locationMarker = new AMap.Marker({ position: [lng, lat], icon: new AMap.Icon({ @@ -760,7 +869,6 @@ export default { extData: { point: point, vehicleInfo: vehicleInfo } }); - // 点击标记弹出信息窗口 locationMarker.on('click', (e) => { const data = e.target.getExtData(); this.showVehicleInfoWindow(data.point, data.vehicleInfo); @@ -771,118 +879,137 @@ export default { this.vehicleMarkers.push(locationMarker); }, - // 显示车辆信息窗口（深色科技风） - showVehicleInfoWindow(point, vehicleInfo) { - this.closeVehicleInfoWindow(); - - const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon); - const lat = parseFloat(point.weidu || point.latitude || point.lat); - - const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆'; - - // 使用自定义HTML，不依赖InfoWindow的默认样式 - const infoContent = ` -
-
- 🚛 - ${vehicleName} -
-
-
- 设备ID： - ${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'} + // 显示车辆信息窗口 + showVehicleInfoWindow(point, vehicleInfo) { + this.closeVehicleInfoWindow(); + + const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon); + const lat = parseFloat(point.weidu || point.latitude || point.lat); + + const vehicleName = vehicleInfo.veNotes || vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆'; + + const infoContent = ` +
+
+ 🚛 + ${vehicleName} +
+
+
+ 设备ID： + ${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'} +
+
+ 车牌号： + ${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'} +
+
+ 最新时间： + ${point.createTime || point.server_time || point.updateTime || '--'} +
+
+ 经度： + ${lng.toFixed(6)} +
+
+ 纬度： + ${lat.toFixed(6)} +
+
+
+ 📍 点击查看车辆轨迹 + → +
-
- 车牌号： - ${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'} -
-
- 最新时间： - ${point.createTime || point.server_time || point.updateTime || '--'} -
-
- 经度： - ${lng.toFixed(6)} -
-
- 纬度： - ${lat.toFixed(6)} -
-
-
- 📍 点击查看农机列表 - → -
-
- `; - - this.vehicleInfoWindow = new AMap.InfoWindow({ - content: infoContent, - offset: new AMap.Pixel(0, -35), - autoMove: true, - closeWhenClickMap: true, - isCustom: true, - }); - - if (!isNaN(lng) && !isNaN(lat)) { - this.vehicleInfoWindow.open(this.aMap, [lng, lat]); - this.vehicleMarkers.push(this.vehicleInfoWindow); - - // 添加点击事件监听 - 点击信息窗口打开农机列表 - setTimeout(() => { - const infoWindowEl = document.querySelector('.vehicle-info-window'); - if (infoWindowEl) { - infoWindowEl.addEventListener('click', (e) => { - // 防止点击内部按钮时冒泡 - if (e.target.closest('.vehicle-info-window')) { - this.openAgriculturalMachineryList(vehicleInfo, point); + `; + + this.vehicleInfoWindow = new AMap.InfoWindow({ + content: infoContent, + offset: new AMap.Pixel(0, -35), + autoMove: true, + closeWhenClickMap: true, + isCustom: true, + }); + + if (!isNaN(lng) && !isNaN(lat)) { + this.vehicleInfoWindow.open(this.aMap, [lng, lat]); + this.vehicleMarkers.push(this.vehicleInfoWindow); + + setTimeout(() => { + const infoWindowEl = document.querySelector('.vehicle-info-window'); + if (infoWindowEl) { + infoWindowEl.addEventListener('click', (e) => { + if (e.target.closest('.vehicle-info-window')) { + // 获取车辆GPS数据 + this.getVehicleGpsData(vehicleInfo); + } + }); } - }); + + const infoWindowContent = document.querySelector('.amap-info-content'); + if (infoWindowContent) { + infoWindowContent.style.background = 'transparent !important'; + infoWindowContent.style.padding = '0 !important'; + } + }, 50); + } + }, + + // 获取车辆GPS数据并打开轨迹 + getVehicleGpsData(vehicleInfo) { + if (!vehicleInfo.gpsId) { + this.$message.warning('该车辆没有GPS设备ID'); + return; } - // 覆盖InfoWindow的默认背景 - const infoWindowContent = document.querySelector('.amap-info-content'); - if (infoWindowContent) { - infoWindowContent.style.background = 'transparent !important'; - infoWindowContent.style.padding = '0 !important'; - } - }, 50); - } -}, - - // 打开智慧农机列表并传值 - openAgriculturalMachineryList(vehicleInfo, point) { - // 构建当前选中的车辆数据 + // 构建车辆数据 const vehicleData = { - vehicleInfo: vehicleInfo, - location: point, + gpsId: vehicleInfo.gpsId, + veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆', + vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--', + veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--', vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆', deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '', - latitude: point.weidu || point.latitude || point.lat || 0, - longitude: point.jingdu || point.longitude || point.lng || point.lon || 0, - extData: { - vehicleType: '危废车辆', - status: '在线', - lastUpdate: point.createTime || point.server_time || point.updateTime || new Date().toISOString() - } }; this.closeVehicleInfoWindow(); this.qcdtdialogTableVisible = false; - this.agriculturalVehicleData = vehicleData; - this.agriculturalDialogVisible = true; + this.selectedVehicle = vehicleData; + this.trajectoryDialogVisible = true; + }, + + // 打开轨迹弹窗 + openTrajectoryDialog(vehicleInfo, point) { + const vehicleData = { + gpsId: vehicleInfo.gpsId || vehicleInfo.gpsDeviceId, + veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆', + vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--', + veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--', + vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆', + deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '', + latitude: point.weidu || point.latitude || point.lat || 0, + longitude: point.jingdu || point.longitude || point.lng || point.lon || 0 + }; + + this.closeVehicleInfoWindow(); + this.qcdtdialogTableVisible = false; + + this.selectedVehicle = vehicleData; + this.trajectoryDialogVisible = true; + + console.log('打开轨迹弹窗，车辆数据:', vehicleData); }, // 关闭信息窗口 @@ -920,20 +1047,19 @@ export default { vehicleListData() { vehicleList({ pageNo: 1, - pageSize: 30, + pageSize: 100, }).then(res => { if (res.code === 200 && res.result) { - // 存储完整的返回数据 - this.vehicleListFull = res.result; - // 存储 records 数组 this.vehicleList = res.result.records || []; + // 默认显示全部点位 + this.$nextTick(() => { + this.showAllVehiclePoints(); + }); } else { this.vehicleList = []; - this.vehicleListFull = null; } }).catch(err => { this.vehicleList = []; - this.vehicleListFull = null; }); }, @@ -1118,6 +1244,7 @@ export default { this.liulDataId = e.target.getExtData() this.liulShowFlag = true }) + this.markersFlowmeter.push(marker); this.markersSoil.push(marker); } else { this.markersOther.push(marker) @@ -1365,6 +1492,9 @@ export default { let arr = []; if (this.lastClickIcon == flag) { this.lastClickIcon = '' + // 取消选中，恢复视图 + that.aMap.setFitView(null, false, [100, 400, 360, 360], 16); + return; } else { this.lastClickIcon = flag; if (flag == 'livestock') { @@ -1375,6 +1505,10 @@ export default { arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1); } else if (flag == 'soil') { arr = this.markersSoil; + } else if (flag == 'flowmeter') { + arr = this.markersFlowmeter; + } else if (flag == 'vehicle') { + arr = this.markersVehicle; } } if (arr && arr.length > 0) { @@ -1382,16 +1516,32 @@ export default { item.setzIndex((that.lastZIndex+=2)); }); that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16); + const typeNames = { + 'livestock': '畜禽污染监测站', + 'orient': '农田污染监测站', + 'watershed': '小流域监测站', + 'soil': '长期定位监测站', + 'flowmeter': '微功率雷达监测点', + 'vehicle': '危废车辆' + }; + this.$message.success(`找到 ${arr.length} 个${typeNames[flag] || '标记点'}`); } else { that.aMap.setFitView(null, false, [100, 400, 360, 360], 16); + const typeNames = { + 'livestock': '畜禽污染监测站', + 'orient': '农田污染监测站', + 'watershed': '小流域监测站', + 'soil': '长期定位监测站', + 'flowmeter': '微功率雷达监测点', + 'vehicle': '危废车辆' + }; + this.$message.warning(`暂无${typeNames[flag] || '标记点'}数据`); } - } + }, }, } - - + \ No newline at end of file