diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-marker.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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.config.json b/miniprogram/project.config.json index 0d82855..5b31ab6 100644 --- a/miniprogram/project.config.json +++ b/miniprogram/project.config.json @@ -40,5 +40,6 @@ "tabIndent": "insertSpaces", "tabSize": 4 }, - "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html" + "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "simulatorPluginLibVersion": {} } \ No newline at end of file diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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.config.json b/miniprogram/project.config.json index 0d82855..5b31ab6 100644 --- a/miniprogram/project.config.json +++ b/miniprogram/project.config.json @@ -40,5 +40,6 @@ "tabIndent": "insertSpaces", "tabSize": 4 }, - "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html" + "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "simulatorPluginLibVersion": {} } \ No newline at end of file diff --git a/miniprogram/project.private.config.json b/miniprogram/project.private.config.json index 0a98cb0..8f109f9 100644 --- a/miniprogram/project.private.config.json +++ b/miniprogram/project.private.config.json @@ -9,6 +9,27 @@ "miniprogram": { "list": [ { + "name": "pages/login/login", + "pathName": "pages/login/login", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "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": "", diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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.config.json b/miniprogram/project.config.json index 0d82855..5b31ab6 100644 --- a/miniprogram/project.config.json +++ b/miniprogram/project.config.json @@ -40,5 +40,6 @@ "tabIndent": "insertSpaces", "tabSize": 4 }, - "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html" + "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "simulatorPluginLibVersion": {} } \ No newline at end of file diff --git a/miniprogram/project.private.config.json b/miniprogram/project.private.config.json index 0a98cb0..8f109f9 100644 --- a/miniprogram/project.private.config.json +++ b/miniprogram/project.private.config.json @@ -9,6 +9,27 @@ "miniprogram": { "list": [ { + "name": "pages/login/login", + "pathName": "pages/login/login", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "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": "", diff --git a/project.config.json b/project.config.json index dfc3b7f..3732d91 100644 --- a/project.config.json +++ b/project.config.json @@ -27,7 +27,7 @@ }, "appid": "wx79419f886f8c77ef", "projectname": "constructionApp", - "libVersion": "2.8.1", + "libVersion": "3.8.6", "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "cloudfunctionTemplateRoot": "cloudfunctionTemplate/", diff --git a/miniprogram/app.js b/miniprogram/app.js index 163c743..a737c8b 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -18,12 +18,14 @@ // this.globalData = {} }, globalData: { - httpsUrl: "https://logapi.smartlog.work/", // 正式域名 - // httpsUrl: "https://grey.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, nickName:"", userName:"", + currentUserName:"", role:"", // 角色，是管理用户还是普通用户 isConfigProject: '', // 管理用户是否配置了选择项目，，1 是【选择项目】，'0'否，【不选择项目】， devcode:"", 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/addNew.png b/miniprogram/images/addNew.png new file mode 100644 index 0000000..654768e --- /dev/null +++ b/miniprogram/images/addNew.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/gpsNew.png b/miniprogram/images/gpsNew.png new file mode 100644 index 0000000..5469f94 --- /dev/null +++ b/miniprogram/images/gpsNew.png Binary files differ diff --git a/miniprogram/images/gray-marker.png b/miniprogram/images/gray-marker.png new file mode 100644 index 0000000..ab8f593 --- /dev/null +++ b/miniprogram/images/gray-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/minusNew.png b/miniprogram/images/minusNew.png new file mode 100644 index 0000000..6db0fe7 --- /dev/null +++ b/miniprogram/images/minusNew.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/refresh.png b/miniprogram/images/refresh.png new file mode 100644 index 0000000..057304e --- /dev/null +++ b/miniprogram/images/refresh.png Binary files differ diff --git a/miniprogram/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..42f5f47 100644 --- a/miniprogram/pages/addDevice/addDevice.js +++ b/miniprogram/pages/addDevice/addDevice.js @@ -172,7 +172,7 @@ 'form.project': app.globalData.selectProjectName, 'projectName': app.globalData.selectProjectName, }) - console.log('ppp', that.data.form.project); + console.log('-----------------------3333', options); //=========初始化表单内容为上次填写值========== // var cacheForms = wx.getStorageSync('cacheList') // if (cacheForms) { @@ -187,33 +187,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) + }) + } + }) + } }) - } - }) + } //获取井类型下拉列表 @@ -263,6 +265,11 @@ }; personArr.push(person); } + personArr.push({ + text: app.globalData.currentUserName, + value: app.globalData.currentUserName + }); + that.setData({ personoption1: personArr }) @@ -335,13 +342,31 @@ }) // 粘贴经纬度 - this.paste() - + if(options.fromPage !== 'defineMap') { + this.paste() + } // 处理备注的默认 var description = 'form.description'; that.setData({ [description]: installTypeMap[that.data.form.installType] }) + console.log('options', options); + if(options.fromPage === 'defineMap') { // 从自定义地图页面跳转过来 + console.log('-09999999999', app.globalData.currentUserName); + that.setData({ + 'form.wellType': options.wellType, // 井类型 + 'form.wellcode': options.wellCode, // 井编号 + 'form.position': options.position, // 位置 + 'form.devicetype': '井盖状态监测仪', // 设备类型 + 'form.installperson': app.globalData.currentUserName, + 'form.project': '2025-NBJ', // 所属项目 + 'form.latitude': parseFloat(options.latitude).toFixed(6), + 'form.longitude': parseFloat(options.longitude).toFixed(6), + latitude: parseFloat(options.latitude).toFixed(6), + longitude: parseFloat(options.longitude).toFixed(6), + }) + } + }, @@ -661,13 +686,20 @@ wx.showModal({ content: '提交成功，是否返回？', success: function (res) { - //用于回显 - wx.setStorageSync('cacheList', that.data.form) + console.log('用户点击了返回') + //用于回显 + console.log('lll', that.data.form); + wx.setStorageSync('cacheList', that.data.form) //提交成功后提示用户操作 if (res.confirm) { - wx.switchTab({ - url: '../earth/earth' - }) + // wx.switchTab({ + // url: '../earth/earth' + // }) + console.log('lleeel', that.data.form); + app.globalData.addsuccessWellCode = that.data.form.wellcode + wx.navigateBack({ // 返回上一页 + delta: 1 + }); } else { //这里是点击了取消以后 console.log('用户点击取消') } diff --git a/miniprogram/pages/applog/applog.js b/miniprogram/pages/applog/applog.js index 5535c2f..6ee50da 100644 --- a/miniprogram/pages/applog/applog.js +++ b/miniprogram/pages/applog/applog.js @@ -172,7 +172,7 @@ //删除事件 delItem: function (e) { - console.log(app.globalData.role, ']]]]]]]'); + console.log(app.globalData.role, ']]]]]]]'); if(app.globalData.role!='repair'){ wx.showToast({ icon: 'none', diff --git a/miniprogram/pages/defineMap copy/defineMap.js b/miniprogram/pages/defineMap copy/defineMap.js new file mode 100644 index 0000000..7b3243b --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.js @@ -0,0 +1,391 @@ +var app = getApp(); +const wellTypes = [ + {label: '雨水井', value: '1'}, + {label: '污水井', value: '2'}, + {label: '燃气井', value: '3'}, + {label: '热力井', value: '4'}, + {label: '电力井', value: '5'}, + {label: '通信井', value: '6'}, + {label: '给水井', value: '7'}, + {label: '公安井', value: '8'}, + {label: '环卫井', value: '9'}, + {label: '交通井', value: '10'}, + {label: '路灯井', value: '11'}, + {label: '市政井', value: '12'}, + {label: '有线电视井', value: '13'}, + {label: '园林绿化井', value: '14'}, + {label: '其他', value: '15'}, + {label: '消防井', value: '16'}, + {label: '监控井', value: '17'}, +] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: 116.397228, + latitude: 39.907501, + scale: 14, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + showActionSheet: false, + filterOptions: [ + { name: '查看所有', type: 'all' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + wellList: [], // 井列表 + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + onLoad() { + this.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '0', // 井状态 + }); + }, + + // 获取井 + fetchManhole(params) { + const that = this + console.log('请求井列表', params); + wx.showLoading({ + title: '获取闸井信息中', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.request({ + method: "POST", + url: app.globalData.httpsUrl + "appDeviceAdd/getAppWellList", + data: params, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + if (res.data.code == 200) { + const listResultData = res.data.data; + that.setData({ + wellList: res.data.data, + }) + that.initManholeData(listResultData) + } + }, + fail(err) { + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + // iconPath: that.getMarkerIcon(manhole.isInStall), + width: 30, + height: 30, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status); + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + }, + + getStatusText(status) { + switch(status) { + case '0': return '未安装'; + case '1': return '已安装'; + case '2': return '井打不开'; + default: return '未知'; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击标记点 + onMarkerTap(e) { + // ========================================================= + console.log('点击marker', e); + const markerId = e.markerId; + console.log('Marker tapped:', markerId); + // 先隐藏所有气泡 + const markers = this.data.markers.map(marker => { + marker.callout.display = 'BYCLICK'; + // marker.zIndex = 0 + return marker; + }); + + // 找到被点击的marker并显示其气泡 + const index = markers.findIndex(marker => marker.id === markerId); + if (index !== -1) { + this.setData({ + activeMarker: markers[index], + }); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId + }); + } + // ========================================================= + }, + + zoomIn() { + if (this.data.scale < this.data.maxScale) { + this.setData({ + scale: this.data.scale + 1 + }); + } + }, + + zoomOut() { + if (this.data.scale > this.data.minScale) { + this.setData({ + scale: this.data.scale - 1 + }); + } + }, + + // ----------------------------------------------筛选--------------------------------------------- + showFilterPicker() { + this.setData({ + showActionSheet: true + }); + }, + + // 关闭选择器 + hideActionSheet() { + this.setData({ + showActionSheet: false + }); + }, + + onFilterSelect(e) { + console.log('点击选择器', e); + const { type } = e.currentTarget.dataset; + this.setData({popupType: type }); + this.handleFilter(type); + this.hideActionSheet(); + }, + + handleFilter(type) { + const that = this + console.log('筛选类型：popupType', that.data.popupType); + switch(type) { + case 'all': // 查看所有井 + // that.setData({ markers: that.data.originalMarkers }); + this.fetchManhole({ + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + }) + break; + case 'location': // 按位置筛选 + that.setData({defaultTitieText: '请输入位置', defaultText: '请输入位置', showPopup: true }); + break; + case 'wellCode': // 按照井编号筛选 + that.setData({defaultTitieText: '请输入井编号', defaultText: '请输入井编号', showPopup: true }); + break; + case 'wellType': // 按井类型 + that.showPopupSelect() + break; + case 'status': + wx.showActionSheet({ + itemList: ['井打不开', '已安装', '未安装'], + success: (res) => { + if (!res.cancel) { + const types = [{label: '井打不开', value: '2'}, {label: '已安装', value: '1'}, {label: '未安装', value: '0'}]; + // 前端做筛选 + // const filtered = that.data.originalMarkers.filter( + // marker => marker.manholeInfo.isInStall === types[res.tapIndex].value + // ); + // console.log('======filtered======', filtered); + // that.setData({ markers: filtered }); + // 由于井的状态在实时变化，因此请求接口 + that.fetchManhole({ // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }) + } + } + }); + break; + } + }, + // --------------------------------popup相关方法-------------------------------------------- + // 打开popup + showPopup() { + this.setData({ showPopup: true }); + }, + // 关闭popup + onClose() { + this.setData({ showPopup: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + onConfirm() { + let params + console.log('确认按钮点击', this.data.inputValue); + console.log('当前筛选的类型', this.data.popupType); + if(this.data.popupType === 'location') { + params = { + wellCode: '', // 井编号 + position: this.data.inputValue, // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } else if(this.data.popupType === 'wellCode') { + params = { + wellCode: this.data.inputValue, // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + } + } + this.onClose() + this.fetchManhole(params) + }, + // 点击取消按钮 + onCancel() { + console.log('取消按钮点击'); + this.setData({ showPopup: false }); + }, + + // --------------------------------------------筛选井类型相关方法---------------------------------- + // 打开popup + showPopupSelect() { + this.setData({ showPopupSelect: true }); + }, + // 关闭popup + onCloseSelect() { + this.setData({ showPopupSelect: false }); + }, + // 输入内容 + onInput(e) { + this.setData({ inputValue: e.detail }); + }, + // 点击确认按钮 + confirmSelectWellType: function (e) { + console.log('确认选择井类型', e); + const params = { + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: e.detail.index + 1 + '', // 井类型 + isInStall: '', // 井状态 + } + this.onCloseSelect() + this.fetchManhole(params) + }, + // 点击确认按钮 + onConfirmSelect() { + console.log('确认按钮点击', this.data.inputValue); + this.setData({ showPopupSelect: false }); + if(this.data.popupType === 'location') { + const params = { + wellCode: this.data.inputValue, // 井编号 + position: this.data.inputValue, // 按位置 + wellType: this.data.inputValue, // 井类型 + isInStall: this.data.inputValue, // 井状态 + } + this.fetchManhole(params) + } + }, + // 点击取消按钮 + onCancelSelect() { + console.log('取消按钮点击'); + this.setData({ showPopupSelect: false }); + }, + + // --------------------------------------------新建设备---------------------------------- + createDevice() { + console.log('当前选中的设备', this.data.activeMarker); + wx.navigateTo({ + url: `../addDevice/addDevice?fromPage=defineMap&latitude=${this.data.activeMarker.latitude}&longitude=${this.data.activeMarker.longitude}&position=${this.data.activeMarker.manholeInfo.position}&wellCode=${this.data.activeMarker.manholeInfo.wellCode}&wellType=${this.data.activeMarker.manholeInfo.wellType}` + }) + } +}) + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.json b/miniprogram/pages/defineMap copy/defineMap.json new file mode 100644 index 0000000..0a5371d --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.json @@ -0,0 +1,13 @@ +{ + "usingComponents": { + "van-field": "../../miniprogram_npm/@vant/weapp/field", + "van-popup": "../../miniprogram_npm/@vant/weapp/popup", + "van-search": "../../miniprogram_npm/@vant/weapp/search", + "van-button": "../../miniprogram_npm/@vant/weapp/button/index", + "popup": "@vant/weapp/popup/index", + "van-picker": "@vant/weapp/picker/index" + }, + "navigationBarTitleText": "地图" + } + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxml b/miniprogram/pages/defineMap copy/defineMap.wxml new file mode 100644 index 0000000..3d7347c --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxml @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{item.name}} + + 取消 + + + + + + {{wellTypes[fromIndex].label}} + + + + + + + + + + {{defaultTitieText}} + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/pages/defineMap copy/defineMap.wxss b/miniprogram/pages/defineMap copy/defineMap.wxss new file mode 100644 index 0000000..49e8347 --- /dev/null +++ b/miniprogram/pages/defineMap copy/defineMap.wxss @@ -0,0 +1,183 @@ +.container { + width: 100%; + height: 100%; + position: relative; + } + + .map-controls { + position: fixed; + right: 30rpx; + top: 45%; + display: flex; + flex-direction: column; + gap: 20rpx; + z-index: 100; + } + + .control-btn { + width: 80rpx; + height: 80rpx; + border-radius: 40rpx; + background-color: rgba(255, 255, 255, 0.9); + border: 1rpx solid #ddd; + font-size: 48rpx; + color: #333; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + padding: 0; + } + + .action-sheet-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + z-index: 200; + } + + .action-sheet { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border-top-left-radius: 20rpx; + border-top-right-radius: 20rpx; + z-index: 201; + overflow: hidden; + } + + .action-sheet-title { + padding: 24rpx; + text-align: center; + font-size: 28rpx; + color: #999; + background-color: #f8f8f8; + } + + .action-sheet-item { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #333; + border-bottom: 1rpx solid #eee; + } + + .action-sheet-cancel { + padding: 32rpx; + text-align: center; + font-size: 32rpx; + color: #007aff; + background-color: #f8f8f8; + margin-top: 10rpx; + } + + .popup-content { + padding: 40rpx 30rpx; + width: 600rpx; + } + + .popup-title { + display: block; + text-align: center; + font-size: 32rpx; + font-weight: bold; + margin-bottom: 30rpx; + } + + .btn-group { + display: flex; + justify-content: space-around; + margin-top: 40rpx; + } + + .cancel-btn, .confirm-btn { + width: 240rpx; + height: 80rpx; + line-height: 80rpx; + text-align: center; + border-radius: 40rpx; + } + + .cancel-btn { + border: 1rpx solid #ccc; + color: #333; + } + + .confirm-btn { + background-color: #1989fa; + color: white; + } + + .custom-callout { + position: absolute; + background-color: #616161; + color: #fff; + padding: 10px; + border-radius: 6px; + font-size: 14px; + z-index: 100; + } + + .callout-content { + text-align: left; + } + + .callout-button { + margin-top: 10px; + } + + .filter-btn { + position: fixed; + right: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .create-btn { + position: fixed; + right: 30rpx; + bottom: 180rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(0, 87, 255, 0.7); + border-radius: 40rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 600; + color: #fff; + z-index: 100; + } + + + .filter-btn-content { + display: flex; + align-items: center; + justify-content: center; + } + + .filter-icon { + width: 46rpx; + height: 46rpx; + margin-right: 10rpx; + } + \ No newline at end of file diff --git a/miniprogram/pages/defineMap/defineMap.js b/miniprogram/pages/defineMap/defineMap.js new file mode 100644 index 0000000..155167f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.js @@ -0,0 +1,640 @@ +import Toast from '@vant/weapp/toast/toast'; +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'}, +] +let wellList = [] +Page({ + data: { + wellTypeList: [ + '雨水井', + '污水井', + '燃气井', + '热力井', + '电力井', + '通信井', + '给水井', + '公安井', + '环卫井', + '交通井', + '路灯井', + '市政井', + '有线电视井', + '园林绿化井', + '其他', + '消防井', + '监控井' + ], + longitude: "116.627340", + latitude: "39.874390", + scale: 17, + minScale: 2, + maxScale: 22, + markers: [], + activeMarkerId: null, + activeMarker: null, + activeMarkerWellCode: null, + showActionSheet: false, + filterOptions: [ + { name: '查看全部井', type: 'all' }, + { name: '查看全部打不开井', type: 'cannotOpen' }, + { name: '按位置', type: 'location' }, + { name: '按井编号', type: 'wellCode' }, + { name: '按井类型', type: 'wellType' }, + { name: '按井状态', type: 'status' } + ], + originalMarkers: [], // 存储原始数据用于筛选 + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + position7: { + left: '46%', + top: '46%', + }, + // -----------------------弹出框-------------------- + showPopup: false, + popupType: '', + inputValue: '', + defaultText: '请输入内容', + defaultTitieText: '请输入内容', + showPopupSelect: false, // 井类型选择器 + }, + + preventDefault(e) { + // 不执行任何操作，阻止事件冒泡 + }, + + onLoad() { + if(!app.globalData.addsuccessWellCode) { + this.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: '', // 井状态 + }, + }) + this.fetchManhole(this.data.listQuery); + } +}, + onShow() { + if(app.globalData.addsuccessWellCode && wellList.length) { + const index = wellList.findIndex(item => item.wellCode === app.globalData.addsuccessWellCode) + if(index !== -1) { + wellList[index].isInStall = '1' + this.initManholeData(wellList) + app.globalData.addsuccessWellCode = '' + this.setData({ + activeMarker: null + }) + } + } + }, + + // 点击刷新 + refresh() { + this.fetchManhole(this.data.listQuery, 'refresh'); + }, + + // 获取井 + fetchManhole(params, type = '') { + 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; + wellList = listResultData + if(listResultData.length) { + 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() + } + // const tempList = that.filterNearbyPoints(listResultData, 39.907900661893, 116.39424858941) + // console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + // that.initManholeData(tempList) + } + else { + console.log('查询不到数据'); + wx.hideLoading() + // wx.showToast({ + // title: "未查询到数据", + // icon: 'none', + // duration: 2000, + // mask: true, // 避免与其他 mask 组件同时显示 + // }) + // } + Toast.fail('未查询到数据'); + } + } + wx.hideLoading() + }, + fail(err) { + wx.hideLoading() + + wx.showToast({ + title: "无法获取闸井相关信息！", + icon: 'none', + duration: 2000 + }) + } + }) + }, + + initManholeData(list) { + console.log('获取到的闸井信息', list); + const that = this + const markers = list.map((manhole, index) => { + return { + id: index, + longitude: manhole.lngGaode, + latitude: manhole.latGaode, + iconPath: that.getMarkerIcon(manhole.isInStall, manhole.wellType), + width: 16, + height: 16, + zIndex: 0, + callout: { + content: that.getCalloutContent(manhole), + color: '#fff', + fontSize: 13, + bgColor: '#616161', + padding: 10, + borderRadius: 6, + display: 'BYCLICK', + anchorY: -12, + borderWidth: 1, + borderColor: '#616161', + textAlign: 'left', + }, + manholeInfo: manhole + }; + }); + that.setData({ + originalMarkers: markers, + markers: markers + }); + wx.hideLoading() + }, + + getMarkerIcon(status, wellType) { + // 地图上 橙红色：井打不开2，黄色 ：已安装，蓝色1：未安装0 + console.log('获取到的icon类型', status, wellType); + if(wellType === '燃气井' || wellType === '雨水井' || wellType === '污水井') { + return '/images/gray-marker.png' + } else{ + switch(status) { + case '0': return '/images/blue-marker.png'; + case '1': return '/images/yellow-marker.png'; + case '2': return '/images/orange-marker.png'; + default: return '/images/default-marker.png'; + } + } + }, + + getCalloutContent(manhole) { + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n位置: ${manhole.coordinateX},${manhole.coordinateY}\n详细地址: ${manhole.position}`; + // return `闸井编号: ${manhole.wellCode}\n闸井类型: ${manhole.wellType}\n闸井状态: ${this.getStatusText(manhole.isInStall)}\n详细地址: ${manhole.position}`; + 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 '未知 '; + } + }, + // 按钮点击事件处理方法 + createDevice() { + console.log('气泡里面的按钮被点击'); + // 在这里可以添加按钮点击后的具体逻辑 + }, + // 点击井打不开 + notopen() { + var that = this + wx.showModal({ + content: '确定井打不开吗？', + success: function (res) { + if (res.confirm) { + if(wellList.length) { + console.log('000000000000', that.data.activeMarkerWellCode); + const index = wellList.findIndex(item => item.wellCode === that.data.activeMarkerWellCode) + if(index !== -1) { + wellList[index].isInStall = '2' + that.initManholeData(wellList) + } + } + wx.request({ + method: "post", + url: app.globalData.httpsUrl + "appDeviceAdd/changeWellState", + data: { + wellCode: that.data.activeMarker.manholeInfo.wellCode, + isInStall: '2' + }, + header: { + 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' + }, + success(res) { + }, + fail(err) { + wx.showToast({ + title: "修改井打不开状态失败", + icon: 'none', + duration: 2000 + }) + } + }) + } else { //这里是点击了取消以后 + console.log('用户点击取消') + } + } + }) + }, + // 点击标记点 + onMarkerTap(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], + }); + console.log('点击marker', markers[index]); + + markers[index].callout.display = 'ALWAYS'; + markers[index].zIndex = 100; + this.setData({ + markers: markers, + activeMarkerId: markerId, + activeMarkerWellCode: markers[index].manholeInfo.wellCode + }); + } + // ========================================================= + }, + + 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 }); + 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 }); + 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.setData({ + listQuery: { // 查询井列表的参数 + wellCode: '', // 井编号 + position: '', // 按位置 + wellType: '', // 井类型 + isInStall: types[res.tapIndex].value, // 井状态 + }, + }, type) + that.fetchManhole(this.data.listQuery); + } + } + }); + 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.setData({ + listQuery: params + }) + 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.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.setData({ + // listQuery: params + // }) + // 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}` + }) + }, + // ---------------------------------------------------------------------------------- + + /** + * 筛选用户当前位置周围指定距离内的点位数据 + * @param {Array} points - 点位数组（每条数据需包含 latGaode 和 lngGaode 字段） + * @param {number} userLat - 用户当前纬度 + * @param {number} userLng - 用户当前经度 + * @param {number} radius - 筛选半径（单位：米，默认 100 米） + * @returns {Array} 符合条件的点位数组 + */ + filterNearbyPoints(points, userLat, userLng, radius = 100) { + if (!points || !points.length || !userLat || !userLng) { + return []; // 校验参数合法性 + } + + return points.filter(point => { + // 调用距离计算函数 + const distance = this.calculateDistance(userLat, userLng, point.latGaode, point.lngGaode); + return distance <= radius; // 保留距离≤半径的点位 + }); + }, + + /** + * 计算两点间球面距离（Haversine 公式） + * @param {number} lat1 - 点1纬度 + * @param {number} lng1 - 点1经度 + * @param {number} lat2 - 点2纬度 + * @param {number} lng2 - 点2经度 + * @returns {number} 两点间距离（单位：米） + */ + calculateDistance(lat1, lng1, lat2, lng2) { + const R = 6371e3; // 地球半径（米） + const dLat = (lat2 - lat1) * Math.PI / 180; // 纬度差（弧度） + const dLng = (lng2 - lng1) * Math.PI / 180; // 经度差（弧度） + + // Haversine 公式计算中间变量 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 计算圆心角（弧度） + return R * c; // 返回距离（米） + }, + + // 点击定位 + locateCurrentPosition() { + var that = this; + that.setData({ + markers: [] + }) + //获取当前坐标（gcj02） + wx.showLoading({ + title: '正在定位', + mask: true, // 是否显示透明蒙层，防止触摸穿透 + }) + wx.getLocation({ + type: "gcj02", + altitude: true, + success: function (res) { + that.setData({ + latitude: parseFloat(res.latitude).toFixed(6), + longitude: parseFloat(res.longitude).toFixed(6), + // latitude: '39.908599446615', + // longitude: '116.391914605035', + }) + console.log('获取到当前定位', parseFloat(res.latitude), parseFloat(res.longitude)); + // 将地图中心移动到当前定位点 + const mapCtx = wx.createMapContext('map'); + mapCtx.moveToLocation(); + wx.hideLoading() + if(wellList.length) { + // const tempList = that.filterNearbyPoints(wellList, '39.908599446615', '116.391914605035') + const tempList = that.filterNearbyPoints(wellList, parseFloat(res.latitude), parseFloat(res.longitude)) + console.log('获取当前人的定位周围100米的数据',tempList.length, tempList); + if(tempList.length) { + that.initManholeData(tempList) + mapCtx.moveToLocation({ + latitude: tempList[0].latGaode, + longitude: tempList[0].lngGaode, + }); + that.setData({ + scale: 17 + }); + } else { + wx.showToast({ + title: "当前位置周围100米无闸井", + icon: 'none', + duration: 3000 + }) + } + } else { + that.fetchManhole() + } + }, + fail(err) { + wx.hideLoading() + wx.showToast({ + title: "未获取到当前定位！", + icon: 'none', + duration: 2000 + }) + } + }) + } +}) + \ 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..29cc54f --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.json @@ -0,0 +1,14 @@ +{ + "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", + "van-toast": "@vant/weapp/toast/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..500eacb --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxml @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 筛选条件 + + {{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..6d4a65c --- /dev/null +++ b/miniprogram/pages/defineMap/defineMap.wxss @@ -0,0 +1,208 @@ +.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; + } + + .refresh-btn { + position: fixed; + left: 30rpx; + bottom: 180rpx; + } + + .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; + } + + .notopen-btn { + position: fixed; + left: 30rpx; + bottom: 80rpx; + width: 220rpx; + height: 80rpx; + background-color: rgba(189, 92, 0, 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/login/login.js b/miniprogram/pages/login/login.js index 1df57b3..fd7e3b9 100644 --- a/miniprogram/pages/login/login.js +++ b/miniprogram/pages/login/login.js @@ -286,9 +286,11 @@ }, success: function (res) { if(res.data.code === 200) { - app.globalData.role = res.data.data.role === '1' ? 'repair' : 'member' + app.globalData.role = (res.data.data.role === '1' || res.data.data.role === 'repair') ? 'repair' : 'member' app.globalData.isConfigProject = res.data.data.configProject === '0' ? '0' : '1' // 在【批产】里面是否配置了选择小程序 app.globalData.userName = res.data.data.phone + app.globalData.currentUserName = res.data.data.name + console.log('=====app.globalData.currentUserName====', app.globalData.currentUserName); app.globalData.projectList = res.data.data.projects if(!app.globalData.projectList.length) { wx.showToast({ 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.config.json b/miniprogram/project.config.json index 0d82855..5b31ab6 100644 --- a/miniprogram/project.config.json +++ b/miniprogram/project.config.json @@ -40,5 +40,6 @@ "tabIndent": "insertSpaces", "tabSize": 4 }, - "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html" + "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "simulatorPluginLibVersion": {} } \ No newline at end of file diff --git a/miniprogram/project.private.config.json b/miniprogram/project.private.config.json index 0a98cb0..8f109f9 100644 --- a/miniprogram/project.private.config.json +++ b/miniprogram/project.private.config.json @@ -9,6 +9,27 @@ "miniprogram": { "list": [ { + "name": "pages/login/login", + "pathName": "pages/login/login", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "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": "", diff --git a/project.config.json b/project.config.json index dfc3b7f..3732d91 100644 --- a/project.config.json +++ b/project.config.json @@ -27,7 +27,7 @@ }, "appid": "wx79419f886f8c77ef", "projectname": "constructionApp", - "libVersion": "2.8.1", + "libVersion": "3.8.6", "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "cloudfunctionTemplateRoot": "cloudfunctionTemplate/", diff --git a/project.private.config.json b/project.private.config.json index bc95516..1100856 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -8,6 +8,13 @@ "miniprogram": { "list": [ { + "name": "pages/defineMap/defineMap", + "pathName": "pages/defineMap/defineMap", + "query": "", + "launchMode": "default", + "scene": null + }, + { "name": "pages/indexapp/indexapp", "pathName": "pages/databaseGuide/databaseGuide", "query": "",