diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/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 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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/earth/earth.js b/miniprogram/pages/earth/earth.js index dbae2b9..96795b9 100644 --- a/miniprogram/pages/earth/earth.js +++ b/miniprogram/pages/earth/earth.js @@ -60,6 +60,10 @@ right: '20rpx', bottom: '120rpx', }, + position9: { + right: '20rpx', + top: '280rpx', + }, }, /** @@ -419,7 +423,13 @@ wx.switchTab({ url: '../applog/applog', }) - } + }else if (9 == controlId) { + console.log('跳转地图页面'); + //跳转日志缓存页 + wx.navigateTo({ + url: '../defineMap/defineMap', + }) + } }, showPopup() { this.setData({ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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/earth/earth.js b/miniprogram/pages/earth/earth.js index dbae2b9..96795b9 100644 --- a/miniprogram/pages/earth/earth.js +++ b/miniprogram/pages/earth/earth.js @@ -60,6 +60,10 @@ right: '20rpx', bottom: '120rpx', }, + position9: { + right: '20rpx', + top: '280rpx', + }, }, /** @@ -419,7 +423,13 @@ wx.switchTab({ url: '../applog/applog', }) - } + }else if (9 == controlId) { + console.log('跳转地图页面'); + //跳转日志缓存页 + wx.navigateTo({ + url: '../defineMap/defineMap', + }) + } }, showPopup() { this.setData({ diff --git a/miniprogram/pages/earth/earth.wxml b/miniprogram/pages/earth/earth.wxml index 29cebae..9f6809f 100644 --- a/miniprogram/pages/earth/earth.wxml +++ b/miniprogram/pages/earth/earth.wxml @@ -24,6 +24,7 @@ + diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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/earth/earth.js b/miniprogram/pages/earth/earth.js index dbae2b9..96795b9 100644 --- a/miniprogram/pages/earth/earth.js +++ b/miniprogram/pages/earth/earth.js @@ -60,6 +60,10 @@ right: '20rpx', bottom: '120rpx', }, + position9: { + right: '20rpx', + top: '280rpx', + }, }, /** @@ -419,7 +423,13 @@ wx.switchTab({ url: '../applog/applog', }) - } + }else if (9 == controlId) { + console.log('跳转地图页面'); + //跳转日志缓存页 + wx.navigateTo({ + url: '../defineMap/defineMap', + }) + } }, showPopup() { this.setData({ diff --git a/miniprogram/pages/earth/earth.wxml b/miniprogram/pages/earth/earth.wxml index 29cebae..9f6809f 100644 --- a/miniprogram/pages/earth/earth.wxml +++ b/miniprogram/pages/earth/earth.wxml @@ -24,6 +24,7 @@ + diff --git a/miniprogram/pages/map/map.js b/miniprogram/pages/map/map.js new file mode 100644 index 0000000..f21041c --- /dev/null +++ b/miniprogram/pages/map/map.js @@ -0,0 +1,66 @@ +// pages/map/map.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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/earth/earth.js b/miniprogram/pages/earth/earth.js index dbae2b9..96795b9 100644 --- a/miniprogram/pages/earth/earth.js +++ b/miniprogram/pages/earth/earth.js @@ -60,6 +60,10 @@ right: '20rpx', bottom: '120rpx', }, + position9: { + right: '20rpx', + top: '280rpx', + }, }, /** @@ -419,7 +423,13 @@ wx.switchTab({ url: '../applog/applog', }) - } + }else if (9 == controlId) { + console.log('跳转地图页面'); + //跳转日志缓存页 + wx.navigateTo({ + url: '../defineMap/defineMap', + }) + } }, showPopup() { this.setData({ diff --git a/miniprogram/pages/earth/earth.wxml b/miniprogram/pages/earth/earth.wxml index 29cebae..9f6809f 100644 --- a/miniprogram/pages/earth/earth.wxml +++ b/miniprogram/pages/earth/earth.wxml @@ -24,6 +24,7 @@ + diff --git a/miniprogram/pages/map/map.js b/miniprogram/pages/map/map.js new file mode 100644 index 0000000..f21041c --- /dev/null +++ b/miniprogram/pages/map/map.js @@ -0,0 +1,66 @@ +// pages/map/map.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/miniprogram/pages/map/map.json b/miniprogram/pages/map/map.json new file mode 100644 index 0000000..3928faa --- /dev/null +++ b/miniprogram/pages/map/map.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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/earth/earth.js b/miniprogram/pages/earth/earth.js index dbae2b9..96795b9 100644 --- a/miniprogram/pages/earth/earth.js +++ b/miniprogram/pages/earth/earth.js @@ -60,6 +60,10 @@ right: '20rpx', bottom: '120rpx', }, + position9: { + right: '20rpx', + top: '280rpx', + }, }, /** @@ -419,7 +423,13 @@ wx.switchTab({ url: '../applog/applog', }) - } + }else if (9 == controlId) { + console.log('跳转地图页面'); + //跳转日志缓存页 + wx.navigateTo({ + url: '../defineMap/defineMap', + }) + } }, showPopup() { this.setData({ diff --git a/miniprogram/pages/earth/earth.wxml b/miniprogram/pages/earth/earth.wxml index 29cebae..9f6809f 100644 --- a/miniprogram/pages/earth/earth.wxml +++ b/miniprogram/pages/earth/earth.wxml @@ -24,6 +24,7 @@ + diff --git a/miniprogram/pages/map/map.js b/miniprogram/pages/map/map.js new file mode 100644 index 0000000..f21041c --- /dev/null +++ b/miniprogram/pages/map/map.js @@ -0,0 +1,66 @@ +// pages/map/map.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/miniprogram/pages/map/map.json b/miniprogram/pages/map/map.json new file mode 100644 index 0000000..3928faa --- /dev/null +++ b/miniprogram/pages/map/map.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/pages/map/map.wxml b/miniprogram/pages/map/map.wxml new file mode 100644 index 0000000..31aa4a9 --- /dev/null +++ b/miniprogram/pages/map/map.wxml @@ -0,0 +1,2 @@ + +pages/map/map.wxml \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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/earth/earth.js b/miniprogram/pages/earth/earth.js index dbae2b9..96795b9 100644 --- a/miniprogram/pages/earth/earth.js +++ b/miniprogram/pages/earth/earth.js @@ -60,6 +60,10 @@ right: '20rpx', bottom: '120rpx', }, + position9: { + right: '20rpx', + top: '280rpx', + }, }, /** @@ -419,7 +423,13 @@ wx.switchTab({ url: '../applog/applog', }) - } + }else if (9 == controlId) { + console.log('跳转地图页面'); + //跳转日志缓存页 + wx.navigateTo({ + url: '../defineMap/defineMap', + }) + } }, showPopup() { this.setData({ diff --git a/miniprogram/pages/earth/earth.wxml b/miniprogram/pages/earth/earth.wxml index 29cebae..9f6809f 100644 --- a/miniprogram/pages/earth/earth.wxml +++ b/miniprogram/pages/earth/earth.wxml @@ -24,6 +24,7 @@ + diff --git a/miniprogram/pages/map/map.js b/miniprogram/pages/map/map.js new file mode 100644 index 0000000..f21041c --- /dev/null +++ b/miniprogram/pages/map/map.js @@ -0,0 +1,66 @@ +// pages/map/map.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/miniprogram/pages/map/map.json b/miniprogram/pages/map/map.json new file mode 100644 index 0000000..3928faa --- /dev/null +++ b/miniprogram/pages/map/map.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/pages/map/map.wxml b/miniprogram/pages/map/map.wxml new file mode 100644 index 0000000..31aa4a9 --- /dev/null +++ b/miniprogram/pages/map/map.wxml @@ -0,0 +1,2 @@ + +pages/map/map.wxml \ No newline at end of file diff --git a/miniprogram/pages/map/map.wxss b/miniprogram/pages/map/map.wxss new file mode 100644 index 0000000..0864ef4 --- /dev/null +++ b/miniprogram/pages/map/map.wxss @@ -0,0 +1 @@ +/* pages/map/map.wxss */ \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..394828d 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,7 +18,8 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + // httpsUrl: "https://logapi.smartlog.work/", // 正式域名 + httpsUrl: "http://111.198.10.15:11638/", // 15 // httpsUrl: "https://grey.logapi.smartlog.work/", // 测试域名 openid: null, indexCount:1, diff --git a/miniprogram/app.json b/miniprogram/app.json index fc09168..3c1d780 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -11,7 +11,8 @@ "pages/notice/notice", "pages/validNameKeyword/validNameKeyword", "pages/signName/signName", - "pages/safeBook/safeBook" + "pages/safeBook/safeBook", + "pages/defineMap/defineMap" ], "window": { "backgroundColor": "#E6D480", diff --git a/miniprogram/images/addDevice.png b/miniprogram/images/addDevice.png new file mode 100644 index 0000000..693f070 --- /dev/null +++ b/miniprogram/images/addDevice.png Binary files differ diff --git a/miniprogram/images/blue-marker.png b/miniprogram/images/blue-marker.png new file mode 100644 index 0000000..2ab88bc --- /dev/null +++ b/miniprogram/images/blue-marker.png Binary files differ diff --git a/miniprogram/images/map.png b/miniprogram/images/map.png new file mode 100644 index 0000000..20d0071 --- /dev/null +++ b/miniprogram/images/map.png Binary files differ diff --git a/miniprogram/images/orange-marker.png b/miniprogram/images/orange-marker.png new file mode 100644 index 0000000..e9cf08c --- /dev/null +++ b/miniprogram/images/orange-marker.png Binary files differ diff --git a/miniprogram/images/search.png b/miniprogram/images/search.png new file mode 100644 index 0000000..d65bf8b --- /dev/null +++ b/miniprogram/images/search.png Binary files differ diff --git a/miniprogram/images/yellow-marker.png b/miniprogram/images/yellow-marker.png new file mode 100644 index 0000000..ace0d6b --- /dev/null +++ b/miniprogram/images/yellow-marker.png Binary files differ diff --git a/miniprogram/pages/addDevice/addDevice.js b/miniprogram/pages/addDevice/addDevice.js index 339d469..885b33f 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,16 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.position': options.position, // 位置 + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +196,35 @@ // } // var form = that.data.form //默认安装经纬度为当前位置(gcj02) - wx.getLocation({ - type: "gcj02", - altitude: true, - success: function (res) { - var longitude = 'form.longitude'; - var latitude = 'form.latitude'; - that.setData({ - [longitude]: parseFloat(res.longitude).toFixed(6), - [latitude]: parseFloat(res.latitude).toFixed(6), - longitude: parseFloat(res.longitude).toFixed(6), - latitude: parseFloat(res.latitude).toFixed(6), - }); - //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + if(options.fromPage !== 'defineMap') { wx.getLocation({ - type: "wgs84", - altitude: true, - success: function (res) { - var longitude84 = 'form.longitude84'; - var latitude84 = 'form.latitude84'; - that.setData({ - [latitude84]: parseFloat(res.latitude).toFixed(6), - [longitude84]: parseFloat(res.longitude).toFixed(6) - }) - } + type: "gcj02", + altitude: true, + success: function (res) { + var longitude = 'form.longitude'; + var latitude = 'form.latitude'; + that.setData({ + [longitude]: parseFloat(res.longitude).toFixed(6), + [latitude]: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + latitude: parseFloat(res.latitude).toFixed(6), + }); + //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误 + wx.getLocation({ + type: "wgs84", + altitude: true, + success: function (res) { + var longitude84 = 'form.longitude84'; + var latitude84 = 'form.latitude84'; + that.setData({ + [latitude84]: parseFloat(res.latitude).toFixed(6), + [longitude84]: parseFloat(res.longitude).toFixed(6) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -335,8 +346,9 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..b459b4a --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,389 @@ +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: '', // 井状态 + }); + }, + + // 获取井 + 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.coordinateX, + latitude: manhole.coordinateY, + iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + 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}`; + }, + + 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/defineMap.json b/miniprogram/pages/defineMap/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap/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/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml new file mode 100644 index 0000000..199c4f8 --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap/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/earth/earth.js b/miniprogram/pages/earth/earth.js index dbae2b9..96795b9 100644 --- a/miniprogram/pages/earth/earth.js +++ b/miniprogram/pages/earth/earth.js @@ -60,6 +60,10 @@ right: '20rpx', bottom: '120rpx', }, + position9: { + right: '20rpx', + top: '280rpx', + }, }, /** @@ -419,7 +423,13 @@ wx.switchTab({ url: '../applog/applog', }) - } + }else if (9 == controlId) { + console.log('跳转地图页面'); + //跳转日志缓存页 + wx.navigateTo({ + url: '../defineMap/defineMap', + }) + } }, showPopup() { this.setData({ diff --git a/miniprogram/pages/earth/earth.wxml b/miniprogram/pages/earth/earth.wxml index 29cebae..9f6809f 100644 --- a/miniprogram/pages/earth/earth.wxml +++ b/miniprogram/pages/earth/earth.wxml @@ -24,6 +24,7 @@ + diff --git a/miniprogram/pages/map/map.js b/miniprogram/pages/map/map.js new file mode 100644 index 0000000..f21041c --- /dev/null +++ b/miniprogram/pages/map/map.js @@ -0,0 +1,66 @@ +// pages/map/map.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/miniprogram/pages/map/map.json b/miniprogram/pages/map/map.json new file mode 100644 index 0000000..3928faa --- /dev/null +++ b/miniprogram/pages/map/map.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/pages/map/map.wxml b/miniprogram/pages/map/map.wxml new file mode 100644 index 0000000..31aa4a9 --- /dev/null +++ b/miniprogram/pages/map/map.wxml @@ -0,0 +1,2 @@ + +pages/map/map.wxml \ No newline at end of file diff --git a/miniprogram/pages/map/map.wxss b/miniprogram/pages/map/map.wxss new file mode 100644 index 0000000..0864ef4 --- /dev/null +++ b/miniprogram/pages/map/map.wxss @@ -0,0 +1 @@ +/* pages/map/map.wxss */ \ No newline at end of file diff --git a/miniprogram/project.private.config.json b/miniprogram/project.private.config.json index 0a98cb0..2183d83 100644 --- a/miniprogram/project.private.config.json +++ b/miniprogram/project.private.config.json @@ -9,6 +9,20 @@ "miniprogram": { "list": [ { + "name": "pages/defineMap/defineMap", + "pathName": "pages/defineMap/defineMap", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "pages/earth/earth", + "pathName": "pages/earth/earth", + "query": "", + "launchMode": "default", + "scene": null + }, + { "name": "", "pathName": "pages/indexapp/indexapp", "query": "",