diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js index dcc4f05..a224eda 100644 --- a/miniprogram/pages/defineMap/defineMap.js +++ b/miniprogram/pages/defineMap/defineMap.js @@ -62,7 +62,6 @@ wellType: '', // 井类型 isInStall: '', // 井状态 }, - wellList: [], // 井列表 // -----------------------弹出框-------------------- showPopup: false, popupType: '', @@ -77,7 +76,7 @@ wellCode: '', // 井编号 position: '', // 按位置 wellType: '', // 井类型 - isInStall: '', // 井状态 + isInStall: '0', // 井状态 }); }, @@ -99,13 +98,15 @@ success(res) { if (res.data.code == 200) { const listResultData = res.data.data; - that.setData({ - wellList: res.data.data, - }) - that.initManholeData(listResultData) + const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + that.initManholeData(tempList) } + wx.hideLoading() }, fail(err) { + wx.hideLoading() + wx.showToast({ title: "无法获取闸井相关信息！", icon: 'none', @@ -121,8 +122,8 @@ const markers = list.map((manhole, index) => { return { id: index, - longitude: manhole.coordinateX, - latitude: manhole.coordinateY, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, iconPath: that.getMarkerIcon(manhole.isInStall), width: 30, height: 30, @@ -182,7 +183,6 @@ // 点击标记点 onMarkerTap(e) { // ========================================================= - console.log('点击marker', e); const markerId = e.markerId; console.log('Marker tapped:', markerId); // 先隐藏所有气泡 @@ -198,6 +198,7 @@ this.setData({ activeMarker: markers[index], }); + console.log('点击marker', markers[index]); markers[index].callout.display = 'ALWAYS'; markers[index].zIndex = 100; @@ -386,6 +387,50 @@ wx.navigateTo({ url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） } }) \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 394828d..bc0d8cd 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -19,8 +19,8 @@ }, globalData: { // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - httpsUrl: "http://111.198.10.15:11638/", // 15 - // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 + // httpsUrl: "http://111.198.10.15:11638/", // 15 + httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, nickName:"", diff --git a/miniprogram/images/add.png b/miniprogram/images/add.png index 7764ca3..3a0bd2e 100644 --- a/miniprogram/images/add.png +++ b/miniprogram/images/add.png Binary files differ diff --git a/miniprogram/images/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js index dcc4f05..a224eda 100644 --- a/miniprogram/pages/defineMap/defineMap.js +++ b/miniprogram/pages/defineMap/defineMap.js @@ -62,7 +62,6 @@ wellType: '', // 井类型 isInStall: '', // 井状态 }, - wellList: [], // 井列表 // -----------------------弹出框-------------------- showPopup: false, popupType: '', @@ -77,7 +76,7 @@ wellCode: '', // 井编号 position: '', // 按位置 wellType: '', // 井类型 - isInStall: '', // 井状态 + isInStall: '0', // 井状态 }); }, @@ -99,13 +98,15 @@ success(res) { if (res.data.code == 200) { const listResultData = res.data.data; - that.setData({ - wellList: res.data.data, - }) - that.initManholeData(listResultData) + const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + that.initManholeData(tempList) } + wx.hideLoading() }, fail(err) { + wx.hideLoading() + wx.showToast({ title: "无法获取闸井相关信息！", icon: 'none', @@ -121,8 +122,8 @@ const markers = list.map((manhole, index) => { return { id: index, - longitude: manhole.coordinateX, - latitude: manhole.coordinateY, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, iconPath: that.getMarkerIcon(manhole.isInStall), width: 30, height: 30, @@ -182,7 +183,6 @@ // 点击标记点 onMarkerTap(e) { // ========================================================= - console.log('点击marker', e); const markerId = e.markerId; console.log('Marker tapped:', markerId); // 先隐藏所有气泡 @@ -198,6 +198,7 @@ this.setData({ activeMarker: markers[index], }); + console.log('点击marker', markers[index]); markers[index].callout.display = 'ALWAYS'; markers[index].zIndex = 100; @@ -386,6 +387,50 @@ wx.navigateTo({ url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） } }) \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml index 199c4f8..7f80f38 100644 --- a/miniprogram/pages/defineMap/defineMap.wxml +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -7,7 +7,7 @@ bindmarkertap="onMarkerTap" style="width: 100%; height: 100vh;"> - - + + @@ -38,13 +31,13 @@