企业站点

pages/maps/index.vue

@@ -1,34 +1,70 @@
 <template>
 	<view class="container">
-		<map id="map" ref="map" style="width: 100%; height: calc(100vh + 50rpx);" :scale="mapScale" :markers="markers"
+		<map id="map" ref="map" style="width: 100%; height: calc(100vh + 50rpx);" :scale="mapScale"
+			:markers="filteredMarkers"
 			longitude="112.83100231396601" latitude="36.872032399813556" show-location show-compass show-scale
 			@markertap="markertap">
 		</map>
 		<view class="zdxq">
-			<view class="zdxqitem" @click="switch2Change('livestock')">
+			<view class="zdxqitem" :class="{ active: activeType === 'livestock' }" @click="switch2Change('livestock')">
 				<image src="../../static/zhandian_xuqin_dingwei.png" mode=""></image>
 				<view class="textss">
 					畜禽污染监测站
 				</view>
 			</view>
-			<view class="zdxqitem" @click="switch2Change('orient')">
+			<view class="zdxqitem" :class="{ active: activeType === 'orient' }" @click="switch2Change('orient')">
 				<image src="../../static/zhandian_nongtian_dingwei.png" mode=""></image>
 				<view class="textss">
 					农田污染监测站
 				</view>
 			</view>
-			<!-- <view class="zdxqitem" @click="switch2Change('watershed')">
+			<!-- 企业点位 -->
-				<image src="../../static/zhandian_xiaoliuyu_dingwei.png" mode=""></image>
+			<view class="zdxqitem" :class="{ active: activeType === 'enterprise' }" @click="switch2Change('enterprise')">
+				<image src="../../static/qiyebzIcon.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
 				<view class="textss">
-					小流域监测站
+					企业点位
+				</view>
+			</view>
+		</view>
+
+		<!-- 企业信息弹出框 -->
+		<view class="enterprise-popup" v-if="showEnterprisePopup" @click="closePopup">
+			<view class="popup-content" @click.stop>
+				<view class="popup-header">
+					<text class="popup-title">{{ currentEnterprise.entName || '企业信息' }}</text>
+					<text class="popup-close" @click="closePopup">×</text>
+				</view>
+				<view class="popup-body">
+					<view class="info-item">
+						<text class="label">企业简称：</text>
+						<text class="value">{{ currentEnterprise.entShortName || '-' }}</text>
+					</view>
+					<view class="info-item">
+						<text class="label">负责人：</text>
+						<text class="value">{{ currentEnterprise.entCharge || '-' }}</text>
+					</view>
+					<view class="info-item">
+						<text class="label">统一信用代码：</text>
+						<text class="value">{{ currentEnterprise.entCredit || '-' }}</text>
+					</view>
+					<view class="info-item">
+						<text class="label">企业编号：</text>
+						<text class="value">{{ currentEnterprise.entCode || '-' }}</text>
+					</view>
+					<view class="info-item">
+						<text class="label">企业简介：</text>
+						<text class="value">{{ currentEnterprise.entIntro || '暂无简介' }}</text>
+					</view>
+					<view class="info-item">
+						<text class="label">联系电话：</text>
+						<text class="value">{{ currentEnterprise.entPhone || '暂无' }}</text>
+					</view>
+					<view class="info-item">
+						<text class="label">创建时间：</text>
+						<text class="value">{{ currentEnterprise.createTime || '-' }}</text>
 					</view>
 				</view>
-			<view class="zdxqitem" @click="switch2Change('soil')">
-				<image src="../../static/iconsheturangzs.png" mode=""></image>
-				<view class="textss">
-					长期定位监测点
 			</view>
-			</view> -->
 		</view>
 	</view>
 </template>
@@ -54,13 +90,28 @@
 				soilStationList: [],
 				allStationList: [],
 				stationTwoList: [],
-				mapCtx: null // 添加地图上下文
+				mapCtx: null,
-
+				// 企业相关
+				enterpriseList: [],
+				showEnterprisePopup: false,
+				currentEnterprise: {},
+				currentMarkerId: null,
+				maxMarkerId: 0,
+				// 当前筛选类型：'' 表示显示全部
+				activeType: ''
 			};
 		},
+		computed: {
+			// 根据 activeType 过滤要显示的 marker
+			filteredMarkers() {
+				if (!this.activeType) {
+					return this.markers;
+				}
+				return this.markers.filter(item => item.stationType === this.activeType);
+			}
+		},
 		onLoad() {},
 		onReady() {
-			// 在onReady中初始化地图上下文
 			this.mapCtx = uni.createMapContext('map', this);
 		},
 		onShow() {
@@ -75,7 +126,6 @@
 			})
 		},
 		methods: {
-			// kaihs
 			getList() {
 				this.markers = []
 				this.stationList = []
@@ -83,13 +133,16 @@
 				this.soilStationList = []
 				this.allStationList = []
 				this.stationTwoList = []
+				this.enterpriseList = []
+				this.maxMarkerId = 0
+				this.activeType = ''
 
 				uni.showLoading({
 					title: '加载中'
 				});
 
+				// 获取监测站数据
 				this.$http.get('/applet/survStationInfo/stationMap').then(res => {
-			        // 处理数据
 					this.stationList = [...res.data.data.stationInfo];
 					this.cusLocationList = [...res.data.data.cusLocation];
 					this.soilStationList = [...res.data.data.deviceList];
@@ -97,13 +150,16 @@
 					this.allStationList.push(...this.cusLocationList);
 					this.allStationList.push(...this.soilStationList);
 					this.allStationList.forEach((item, index) => {
-			            item.id = index;
+						item.id = index + 1;
 					});
 
 					this.issscd = false
 					this.isssscd = false
 					this.isSoilShow = false
 
+					// 记录已用的最大 id，避免与企业 marker 冲突
+					this.maxMarkerId = this.allStationList.length + 1;
+
 					// 渲染所有标记
 					this.enterpriseRender();
 					this.stationRender();
@@ -121,14 +177,97 @@
 					});
 					console.error('加载地图数据失败:', err);
 				})
+
+				// 获取企业列表
+				this.$http.get('/applet/wxclient/getEntList').then(res => {
+					if (res.data.data && res.data.data.result) {
+						this.enterpriseList = res.data.data.result;
+						this.renderEnterpriseMarkers();
+						this.$nextTick(() => {
+							this.ensureAllMarkersVisible();
+						});
+					}
+					uni.hideLoading();
+				}).catch(err => {
+					uni.hideLoading();
+					uni.showToast({
+						title: '企业数据加载失败',
+						icon: 'none'
+					});
+					console.error('加载企业数据失败:', err);
+				})
 			},
+
+			// 渲染企业标记（自动过滤掉无有效坐标的企业）
+			renderEnterpriseMarkers() {
+				if (!this.enterpriseList || this.enterpriseList.length === 0) {
+					console.warn('企业列表为空');
+					return;
+				}
+
+				// 过滤出有有效坐标的企业
+				const validEnterpriseList = this.enterpriseList.filter((item) => {
+					const lat = Number(item.entLat);
+					const lng = Number(item.entLong);
+					return !isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0;
+				});
+
+				const invalidCount = this.enterpriseList.length - validEnterpriseList.length;
+				if (invalidCount > 0) {
+					console.log(`已过滤 ${invalidCount} 个缺少坐标的企业`);
+				}
+
+				validEnterpriseList.forEach((item) => {
+					const lat = Number(item.entLat);
+					const lng = Number(item.entLong);
+
+					const markerId = ++this.maxMarkerId;
+
+					let iconPath = '/static/qiyebzIcon.png';
+					if (item.entMapIcon) {
+						iconPath = this.baseUrl.replace(/\/$/, '') + '/' + item.entMapIcon.replace(/^\//, '');
+					}
+
+					const markerItem = {
+						id: markerId,
+						iconPath: iconPath,
+						latitude: lat,
+						longitude: lng,
+						width: 40,
+						height: 50,
+						stationType: 'enterprise',
+						stationName: item.entName,
+						entShortName: item.entShortName,
+						entCharge: item.entCharge,
+						entCredit: item.entCredit,
+						entCode: item.entCode,
+						entIntro: item.entIntro,
+						entPhone: item.entPhone,
+						createTime: item.createTime,
+						entId: item.id,
+						joinCluster: false,
+						zIndex: this.markersZIndex++,
+						enterpriseData: item,
+						callout: {
+							content: item.entName || '企业',
+							color: '#FFFFFF',
+							fontSize: 14,
+							borderRadius: 10,
+							bgColor: '#007AFF',
+							padding: 8,
+							display: 'ALWAYS'
+						}
+					};
+
+					this.markers.push(markerItem);
+				});
+			},
+
 			ensureAllMarkersVisible() {
-			    // 确保地图上下文已初始化
 				if (!this.mapCtx) {
 					this.mapCtx = uni.createMapContext('map', this);
 				}
 
-			    // 过滤出有效的坐标点
 				const validPoints = this.markers
 					.filter(item => {
 						const lat = Number(item.latitude);
@@ -142,7 +281,6 @@
 
 				if (validPoints.length === 0) {
 					console.warn('没有有效的坐标点');
-			        // 如果有默认坐标，使用默认坐标
 					if (this.center.latitude && this.center.longitude) {
 						this.mapCtx.moveToLocation({
 							latitude: this.center.latitude,
@@ -155,17 +293,15 @@
 
 				console.log('有效坐标点数量:', validPoints.length);
 
-			    // 方法1：使用 includePoints（优先）
 				try {
 					this.mapCtx.includePoints({
 						points: validPoints,
-			            padding: [120, 120, 120, 120], // 增加边距让点位不贴边
+						padding: [120, 120, 120, 120],
 						success: () => {
 							console.log('地图视野调整成功');
 						},
 						fail: (err) => {
 							console.error('includePoints失败:', err);
-			                // 如果失败，使用备用方案
 							this.fallbackAdjustMap(validPoints);
 						}
 					});
@@ -174,7 +310,6 @@
 					this.fallbackAdjustMap(validPoints);
 				}
 
-			    // 方法2：延迟重试（确保地图完全渲染）
 				setTimeout(() => {
 					if (this.mapCtx) {
 						try {
@@ -188,7 +323,6 @@
 					}
 				}, 500);
 
-			    // 方法3：第三次重试（更长的延迟）
 				setTimeout(() => {
 					if (this.mapCtx) {
 						try {
@@ -202,11 +336,11 @@
 					}
 				}, 1000);
 			},
+
 			fallbackAdjustMap(validPoints) {
 				if (!validPoints || validPoints.length === 0) return;
 
 				try {
-			        // 计算所有点位的中心点和范围
 					const lats = validPoints.map(p => p.latitude);
 					const lngs = validPoints.map(p => p.longitude);
 
@@ -215,11 +349,9 @@
 					const minLng = Math.min(...lngs);
 					const maxLng = Math.max(...lngs);
 
-			        // 计算中心点
 					const centerLat = (minLat + maxLat) / 2;
 					const centerLng = (minLng + maxLng) / 2;
 
-			        // 计算合适的缩放级别
 					const latDiff = maxLat - minLat;
 					const lngDiff = maxLng - minLng;
 					const maxDiff = Math.max(latDiff, lngDiff);
@@ -234,7 +366,6 @@
 
 					console.log('备用方案 - 中心点:', centerLat, centerLng, '缩放:', scale);
 
-			        // 移动地图到计算出的中心位置
 					this.mapCtx.moveToLocation({
 						latitude: centerLat,
 						longitude: centerLng,
@@ -244,13 +375,13 @@
 					console.error('备用方案失败:', e);
 				}
 			},
+
 			enterpriseRender() {
 				for (let i = 0; i < this.cusLocationList.length; i++) {
 					const item = this.cusLocationList[i];
 					const lat = Number(item.stationLatitude);
 					const lng = Number(item.stationLongitude);
 
-			        // 验证坐标有效性
 					if (isNaN(lat) || isNaN(lng) || lat === 0 || lng === 0) {
 						console.warn('企业点位坐标无效:', item.stationName, lat, lng);
 						continue;
@@ -285,7 +416,6 @@
 						const lat = Number(item.stationLatitude);
 						const lng = Number(item.stationLongitude);
 
-			            // 验证坐标有效性
 						if (isNaN(lat) || isNaN(lng) || lat === 0 || lng === 0) {
 							console.warn('站房点位坐标无效:', item.stationName, lat, lng);
 							continue;
@@ -319,7 +449,6 @@
 					const lat = Number(item.latitude);
 					const lng = Number(item.longitude);
 
-			        // 验证坐标有效性
 					if (isNaN(lat) || isNaN(lng) || lat === 0 || lng === 0) {
 						console.warn('监测点位坐标无效:', item.name, lat, lng);
 						return;
@@ -366,10 +495,35 @@
 					this.markers.push(markerItem);
 				});
 			},
+
 			markertap(e) {
-				const index = e.detail.markerId
+				const index = e.detail.markerId;
-				const marker = this.markers.find(m => m.id === index);
+				const marker = this.markers.find(m => Number(m.id) === Number(index));
-				if (marker) {
+
+				if (!marker) {
+					console.warn('未找到对应的marker, ID:', index);
+					return;
+				}
+
+				// 企业点位点击 -> 弹出企业信息
+				if (marker.stationType === 'enterprise') {
+					this.currentEnterprise = marker.enterpriseData || {
+						entName: marker.stationName || '企业名称',
+						entShortName: marker.entShortName || '',
+						entCharge: marker.entCharge || '',
+						entCredit: marker.entCredit || '',
+						entCode: marker.entCode || '',
+						entIntro: marker.entIntro || '暂无简介',
+						entPhone: marker.entPhone || '暂无',
+						createTime: marker.createTime || ''
+					};
+
+					this.currentMarkerId = marker.id;
+					this.showEnterprisePopup = true;
+					return;
+				}
+
+				// 监测站逻辑
 				if (['orient', 'livestock'].includes(marker.stationType)) {
 					uni.navigateTo({
 						url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(marker))}`
@@ -379,80 +533,63 @@
 						url: `/packDetail/pages/vidio/soilindex`
 					})
 				}
-				}
 			},
-			switch2Change(name) { // 焦点显示图例
-				// 更新对应区域的状态
-				let that = this;
-				if (name === that.lastTap) {
-					that.adjustMapToFitAllMarkers();
-					that.lastTap = '';
-				} else {
-					// 聚焦到特定区域
-					that.adjustMapToRegion(name);
-					that.lastTap = name;
 
-				}
+			// 关闭企业弹窗
+			closePopup() {
+				this.showEnterprisePopup = false;
+				this.currentEnterprise = {};
+				this.currentMarkerId = null;
 			},
-			// 调整地图视野以包含所有标记点（类似setFitView效果）
+
-			adjustMapToFitAllMarkers() {
+			// 图例点击：只显示对应类型，再点一次恢复全部
-				if (this.mapCtx && this.markers.length > 0) {
+			switch2Change(name) {
-					this.mapCtx.includePoints({
+				if (this.activeType === name) {
-						points: this.markers.map(item => ({
+					// 再次点击 → 取消过滤，显示全部
-							latitude: item.latitude,
+					this.activeType = '';
-							longitude: item.longitude
+				} else {
-						})),
+					// 点击其他 → 只显示该类型
-						padding: [60, 60, 60, 60] // 上下左右的边距
+					this.activeType = name;
-					});
 				}
+
+				// 视野聚焦到当前显示的 marker
+				this.$nextTick(() => {
+					this.adjustMapToVisibleMarkers();
+				});
 			},
-			adjustMapToRegion(regionName) {
+
-				// 调整地图视野到特定区域的标记点
+			// 根据当前显示的 marker 调整视野
-				//stationType: "orient" 农田
+			adjustMapToVisibleMarkers() {
-				//stationType: "livestock" 畜禽
+				const list = this.filteredMarkers;
-				//stationType: "watershed"  小流域
+				if (!list || list.length === 0) {
-				let that = this;
+					return;
-				let points = [];
-				let markers = [];
-				if (regionName === 'orient' || regionName === 'livestock' || regionName === 'watershed') {
-					// 获取团柏河区域的所有标记点
-					markers = this.markers.filter(item => item.stationType === regionName);
-				} else if (regionName === 'soil') {
-					// 获取所有土壤设备标记点
-					markers = this.markers.filter(item => item.type === 'soil' || item.deviceType === 'soil');
 				}
-				console.log(this.markers)
+
-				if (markers.length > 0) {
+				const points = list
-					points = markers.map(item => {
+					.filter(item => {
-						item.zIndex = (that.markersZIndex++);
+						const lat = Number(item.latitude);
-						return {
+						const lng = Number(item.longitude);
-							latitude: Number(item.latitude || item.stationLatitude),
+						return !isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0;
-							longitude: Number(item.longitude || item.stationLongitude)
+					})
-						}
+					.map(item => ({
-					});
+						latitude: Number(item.latitude),
-				}
+						longitude: Number(item.longitude)
-				if (points.length > 0 && this.mapCtx) {
+					}));
+
+				if (points.length === 0 || !this.mapCtx) return;
+
 				this.mapCtx.includePoints({
 					points: points,
-						padding: [80, 110, 80, 110] // 增加边距以获得更好的显示效果
+					padding: [100, 100, 100, 100]
 				});
-				} else if (points.length === 0) {
-					// 如果没有找到对应的标记点，显示提示
-					// uni.showToast({
-					//   title: `未找到${regionName}相关的监测点`,
-					//   icon: 'none'
-					// });
 			}
-			},
 		}
 	}
 </script>
 
 <style lang="scss">
-	/* 样式保持不变 */
 	.bgimg {
 		position: fixed;
-		// z-index: -99;
 		top: 0;
 		left: 0;
 		width: 100%;
@@ -466,7 +603,6 @@
 		font-size: 24rpx;
 		text-shadow: 1rpx 2rpx 0rpx #0D1934;
 		font-weight: bold;
-		// background-image: url('@/static/zhandian_icon_nongtian_title.png');
 		background-repeat: no-repeat;
 		background-size: 100%;
 		display: flex;
@@ -481,7 +617,6 @@
 		font-size: 24rpx;
 		text-shadow: 1rpx 2rpx 0rpx #0D1934;
 		font-weight: bold;
-		// background-image: url('@/static/zhandian_icon_xuqin_title.png');
 		background-repeat: no-repeat;
 		background-size: 100%;
 		display: flex;
@@ -511,6 +646,14 @@
 		border-radius: 6rpx;
 		margin-bottom: 10rpx;
 		position: relative;
+		transition: all 0.2s ease;
+	}
+
+	/* 选中高亮 */
+	.zdxqitem.active {
+		background: rgba(0, 122, 255, 0.75);
+		border-color: #007AFF;
+		box-shadow: 0 0 12rpx rgba(0, 122, 255, 0.6);
 	}
 
 	.crildon {
@@ -555,4 +698,75 @@
 		display: flex;
 		align-items: center;
 	}
+
+	/* 企业信息弹窗样式 */
+	.enterprise-popup {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 9999;
+	}
+
+	.popup-content {
+		width: 600rpx;
+		max-height: 70vh;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.popup-header {
+		padding: 30rpx 30rpx 20rpx;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.popup-title {
+		font-size: 34rpx;
+		font-weight: bold;
+		color: #333;
+		flex: 1;
+	}
+
+	.popup-close {
+		font-size: 48rpx;
+		color: #999;
+		padding: 0 10rpx;
+		cursor: pointer;
+	}
+
+	.popup-body {
+		padding: 20rpx 30rpx;
+		overflow-y: auto;
+		flex: 1;
+	}
+
+	.info-item {
+		display: flex;
+		padding: 12rpx 0;
+		font-size: 28rpx;
+		border-bottom: 1px solid #f5f5f5;
+	}
+
+	.info-item .label {
+		color: #666;
+		width: 160rpx;
+		flex-shrink: 0;
+	}
+
+	.info-item .value {
+		color: #333;
+		flex: 1;
+		word-break: break-all;
+	}
 </style>