diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js index 193041b..7ea7fc8 100644 --- a/miniprogram/pages/defineMap/defineMap.js +++ b/miniprogram/pages/defineMap/defineMap.js @@ -42,7 +42,7 @@ ], longitude: "116.627340", latitude: "39.874390", - scale: 14, + scale: 12, minScale: 2, maxScale: 22, markers: [], @@ -51,6 +51,7 @@ showActionSheet: false, filterOptions: [ { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, { name: '按位置', type: 'location' }, { name: '按井编号', type: 'wellCode' }, { name: '按井类型', type: 'wellType' }, @@ -75,15 +76,22 @@ defaultTitieText: '请输入内容', showPopupSelect: false, // 井类型选择器 }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, onLoad() { if(!app.globalData.addsuccessWellCode) { - this.fetchManhole({ // 查询井列表的参数 - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: '', // 井状态 - }); + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); } }, onShow() { @@ -100,6 +108,11 @@ } }, + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + // 获取井 fetchManhole(params, type = '') { const that = this @@ -119,8 +132,15 @@ if (res.data.code == 200) { const listResultData = res.data.data; wellList = listResultData - if(type === 'all') { // 查看所有井 + if(type === 'all' || type === 'cannotOpen' || type === 'refresh') { // 查看所有井 that.initManholeData(listResultData) + if(listResultData.length && type !== 'refresh') { + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation({ + latitude: listResultData[0].latGaode, + longitude: listResultData[0].lngGaode + }); + } } else { // 显示周围100米井 that.locateCurrentPosition() } @@ -190,15 +210,22 @@ getCalloutContent(manhole) { // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; - return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + return `${this.getStatusText(manhole.isInStall)} ${manhole.wellCode} ${manhole.wellType}`; }, getStatusText(status) { + // switch(status) { + // case '0': return '未安装'; + // case '1': return '已安装'; + // case '2': return '井打不开'; + // default: return '未知'; + // } switch(status) { - case '0': return '未安装'; - case '1': return '已安装'; - case '2': return '井打不开'; - default: return '未知'; + case '0': return '未 '; + case '1': return '已 '; + case '2': return '井打不开 '; + default: return '未知 '; } }, // 按钮点击事件处理方法 @@ -280,12 +307,27 @@ switch(type) { case 'all': // 查看所有井 // that.setData({ markers: that.data.originalMarkers }); - this.fetchManhole({ - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: '', // 井状态 - }, 'all') + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + that.fetchManhole(this.data.listQuery, type); + break; + case 'cannotOpen': // 查看全部打不开井 + // that.setData({ markers: that.data.originalMarkers }); + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '2', // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery, type); break; case 'location': // 按位置筛选 that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); @@ -309,12 +351,15 @@ // console.log('======filtered======', filtered); // that.setData({ markers: filtered }); // 由于井的状态在实时变化，因此请求接口 - that.fetchManhole({ // 查询井列表的参数 - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: types[res.tapIndex].value, // 井状态 - }) + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); } } }); @@ -355,6 +400,9 @@ } } this.onClose() + this.setData({ + listQuery: params + }) this.fetchManhole(params) }, // 点击取消按钮 @@ -386,22 +434,28 @@ isInStall: '', // 井状态 } this.onCloseSelect() + this.setData({ + listQuery: params + }) 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) - } - }, + // 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.setData({ + // listQuery: params + // }) + // this.fetchManhole(params) + // } + // }, // 点击取消按钮 onCancelSelect() { console.log('取消按钮点击'); diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js index 193041b..7ea7fc8 100644 --- a/miniprogram/pages/defineMap/defineMap.js +++ b/miniprogram/pages/defineMap/defineMap.js @@ -42,7 +42,7 @@ ], longitude: "116.627340", latitude: "39.874390", - scale: 14, + scale: 12, minScale: 2, maxScale: 22, markers: [], @@ -51,6 +51,7 @@ showActionSheet: false, filterOptions: [ { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, { name: '按位置', type: 'location' }, { name: '按井编号', type: 'wellCode' }, { name: '按井类型', type: 'wellType' }, @@ -75,15 +76,22 @@ defaultTitieText: '请输入内容', showPopupSelect: false, // 井类型选择器 }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, onLoad() { if(!app.globalData.addsuccessWellCode) { - this.fetchManhole({ // 查询井列表的参数 - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: '', // 井状态 - }); + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); } }, onShow() { @@ -100,6 +108,11 @@ } }, + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + // 获取井 fetchManhole(params, type = '') { const that = this @@ -119,8 +132,15 @@ if (res.data.code == 200) { const listResultData = res.data.data; wellList = listResultData - if(type === 'all') { // 查看所有井 + if(type === 'all' || type === 'cannotOpen' || type === 'refresh') { // 查看所有井 that.initManholeData(listResultData) + if(listResultData.length && type !== 'refresh') { + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation({ + latitude: listResultData[0].latGaode, + longitude: listResultData[0].lngGaode + }); + } } else { // 显示周围100米井 that.locateCurrentPosition() } @@ -190,15 +210,22 @@ getCalloutContent(manhole) { // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; - return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + return `${this.getStatusText(manhole.isInStall)} ${manhole.wellCode} ${manhole.wellType}`; }, getStatusText(status) { + // switch(status) { + // case '0': return '未安装'; + // case '1': return '已安装'; + // case '2': return '井打不开'; + // default: return '未知'; + // } switch(status) { - case '0': return '未安装'; - case '1': return '已安装'; - case '2': return '井打不开'; - default: return '未知'; + case '0': return '未 '; + case '1': return '已 '; + case '2': return '井打不开 '; + default: return '未知 '; } }, // 按钮点击事件处理方法 @@ -280,12 +307,27 @@ switch(type) { case 'all': // 查看所有井 // that.setData({ markers: that.data.originalMarkers }); - this.fetchManhole({ - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: '', // 井状态 - }, 'all') + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + that.fetchManhole(this.data.listQuery, type); + break; + case 'cannotOpen': // 查看全部打不开井 + // that.setData({ markers: that.data.originalMarkers }); + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '2', // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery, type); break; case 'location': // 按位置筛选 that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); @@ -309,12 +351,15 @@ // console.log('======filtered======', filtered); // that.setData({ markers: filtered }); // 由于井的状态在实时变化，因此请求接口 - that.fetchManhole({ // 查询井列表的参数 - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: types[res.tapIndex].value, // 井状态 - }) + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); } } }); @@ -355,6 +400,9 @@ } } this.onClose() + this.setData({ + listQuery: params + }) this.fetchManhole(params) }, // 点击取消按钮 @@ -386,22 +434,28 @@ isInStall: '', // 井状态 } this.onCloseSelect() + this.setData({ + listQuery: params + }) 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) - } - }, + // 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.setData({ + // listQuery: params + // }) + // this.fetchManhole(params) + // } + // }, // 点击取消按钮 onCancelSelect() { console.log('取消按钮点击'); diff --git a/miniprogram/pages/defineMap/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml index 5879144..4a2932c 100644 --- a/miniprogram/pages/defineMap/defineMap.wxml +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -1,4 +1,4 @@ - + --> + - + diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js index 193041b..7ea7fc8 100644 --- a/miniprogram/pages/defineMap/defineMap.js +++ b/miniprogram/pages/defineMap/defineMap.js @@ -42,7 +42,7 @@ ], longitude: "116.627340", latitude: "39.874390", - scale: 14, + scale: 12, minScale: 2, maxScale: 22, markers: [], @@ -51,6 +51,7 @@ showActionSheet: false, filterOptions: [ { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, { name: '按位置', type: 'location' }, { name: '按井编号', type: 'wellCode' }, { name: '按井类型', type: 'wellType' }, @@ -75,15 +76,22 @@ defaultTitieText: '请输入内容', showPopupSelect: false, // 井类型选择器 }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, onLoad() { if(!app.globalData.addsuccessWellCode) { - this.fetchManhole({ // 查询井列表的参数 - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: '', // 井状态 - }); + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); } }, onShow() { @@ -100,6 +108,11 @@ } }, + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + // 获取井 fetchManhole(params, type = '') { const that = this @@ -119,8 +132,15 @@ if (res.data.code == 200) { const listResultData = res.data.data; wellList = listResultData - if(type === 'all') { // 查看所有井 + if(type === 'all' || type === 'cannotOpen' || type === 'refresh') { // 查看所有井 that.initManholeData(listResultData) + if(listResultData.length && type !== 'refresh') { + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation({ + latitude: listResultData[0].latGaode, + longitude: listResultData[0].lngGaode + }); + } } else { // 显示周围100米井 that.locateCurrentPosition() } @@ -190,15 +210,22 @@ getCalloutContent(manhole) { // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; - return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + return `${this.getStatusText(manhole.isInStall)} ${manhole.wellCode} ${manhole.wellType}`; }, getStatusText(status) { + // switch(status) { + // case '0': return '未安装'; + // case '1': return '已安装'; + // case '2': return '井打不开'; + // default: return '未知'; + // } switch(status) { - case '0': return '未安装'; - case '1': return '已安装'; - case '2': return '井打不开'; - default: return '未知'; + case '0': return '未 '; + case '1': return '已 '; + case '2': return '井打不开 '; + default: return '未知 '; } }, // 按钮点击事件处理方法 @@ -280,12 +307,27 @@ switch(type) { case 'all': // 查看所有井 // that.setData({ markers: that.data.originalMarkers }); - this.fetchManhole({ - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: '', // 井状态 - }, 'all') + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + that.fetchManhole(this.data.listQuery, type); + break; + case 'cannotOpen': // 查看全部打不开井 + // that.setData({ markers: that.data.originalMarkers }); + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '2', // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery, type); break; case 'location': // 按位置筛选 that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); @@ -309,12 +351,15 @@ // console.log('======filtered======', filtered); // that.setData({ markers: filtered }); // 由于井的状态在实时变化，因此请求接口 - that.fetchManhole({ // 查询井列表的参数 - wellCode: '', // 井编号 - position: '', // 按位置 - wellType: '', // 井类型 - isInStall: types[res.tapIndex].value, // 井状态 - }) + that.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); } } }); @@ -355,6 +400,9 @@ } } this.onClose() + this.setData({ + listQuery: params + }) this.fetchManhole(params) }, // 点击取消按钮 @@ -386,22 +434,28 @@ isInStall: '', // 井状态 } this.onCloseSelect() + this.setData({ + listQuery: params + }) 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) - } - }, + // 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.setData({ + // listQuery: params + // }) + // this.fetchManhole(params) + // } + // }, // 点击取消按钮 onCancelSelect() { console.log('取消按钮点击'); diff --git a/miniprogram/pages/defineMap/defineMap.wxml b/miniprogram/pages/defineMap/defineMap.wxml index 5879144..4a2932c 100644 --- a/miniprogram/pages/defineMap/defineMap.wxml +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -1,4 +1,4 @@ - + --> + - + diff --git a/miniprogram/pages/defineMap/defineMap.wxss b/miniprogram/pages/defineMap/defineMap.wxss index 2a625a5..989f8df 100644 --- a/miniprogram/pages/defineMap/defineMap.wxss +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -186,4 +186,5 @@ height: 46rpx; margin-right: 10rpx; } + \ No newline at end of file