Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
746bbc56 1 parent 85c1803f

新增场地和人员设置

Inline Side-by-side
Showing 11 changed files with 837 additions and 26 deletions
...@@ -10,14 +10,21 @@ export {} ...@@ -10,14 +10,21 @@ export {}
10 declare module '@vue/runtime-core' { 10 declare module '@vue/runtime-core' {
11 export interface GlobalComponents { 11 export interface GlobalComponents {
12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default'] 12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
13 + copy: typeof import('./src/components/InfoWindowWarn copy.vue')['default']
13 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default'] 14 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
14 InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default'] 15 InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
15 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default'] 16 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
17 + InfoWindowYard: typeof import('./src/components/InfoWindowYard.vue')['default']
16 RouterLink: typeof import('vue-router')['RouterLink'] 18 RouterLink: typeof import('vue-router')['RouterLink']
17 RouterView: typeof import('vue-router')['RouterView'] 19 RouterView: typeof import('vue-router')['RouterView']
20 + VanCell: typeof import('vant/es')['Cell']
21 + VanCellGroup: typeof import('vant/es')['CellGroup']
18 VanCol: typeof import('vant/es')['Col'] 22 VanCol: typeof import('vant/es')['Col']
19 VanDialog: typeof import('vant/es')['Dialog'] 23 VanDialog: typeof import('vant/es')['Dialog']
20 VanIcon: typeof import('vant/es')['Icon'] 24 VanIcon: typeof import('vant/es')['Icon']
25 + VanImage: typeof import('vant/es')['Image']
26 + VanImagePreview: typeof import('vant/es')['ImagePreview']
27 + VanOverlay: typeof import('vant/es')['Overlay']
21 VanPopup: typeof import('vant/es')['Popup'] 28 VanPopup: typeof import('vant/es')['Popup']
22 VanRow: typeof import('vant/es')['Row'] 29 VanRow: typeof import('vant/es')['Row']
23 } 30 }
......
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
30 "typescript": "^4.7.3", 30 "typescript": "^4.7.3",
31 "unplugin-vue-components": "^0.24.1", 31 "unplugin-vue-components": "^0.24.1",
32 "uuid": "^8.3.2", 32 "uuid": "^8.3.2",
33 + "v-viewer": "^3.0.11",
33 "vant": "^4.0.0-alpha.3", 34 "vant": "^4.0.0-alpha.3",
34 "vconsole": "^3.14.6", 35 "vconsole": "^3.14.6",
35 "video.js": "^8.3.0", 36 "video.js": "^8.3.0",
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-07-17 15:37:47 5 + * @LastEditTime: 2023-07-18 14:17:19
6 * @FilePath: /map-demo/src/App.vue 6 * @FilePath: /map-demo/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
...@@ -25,8 +25,9 @@ import { Toast } from 'vant'; ...@@ -25,8 +25,9 @@ import { Toast } from 'vant';
25 import vConsole from '@/utils/vconsole' 25 import vConsole from '@/utils/vconsole'
26 // 初始化WX环境 26 // 初始化WX环境
27 import wx from 'weixin-js-sdk' 27 import wx from 'weixin-js-sdk'
28 -// import { wxJsAPI } from '@/api/wx/config' 28 +import { wxJsAPI } from '@/api/wx/config'
29 -// import { apiList } from '@/api/wx/jsApiList.js' 29 +import { apiList } from '@/api/wx/jsApiList.js'
30 +import { wxInfo } from '@/utils/tools'
30 31
31 // 使用 include + pinia 状态管理动态缓存页面 32 // 使用 include + pinia 状态管理动态缓存页面
32 const store = mainStore() 33 const store = mainStore()
...@@ -45,15 +46,19 @@ watchEffect( ...@@ -45,15 +46,19 @@ watchEffect(
45 // }); 46 // });
46 47
47 onMounted(async () => { 48 onMounted(async () => {
48 - // const { data } = await wxJsAPI(); 49 + // 获取当前域名
49 - // data.jsApiList = apiList; 50 + if (!wxInfo().isMobile && !wxInfo().isWeiXin) {
50 - // wx.config(data); 51 + location.href = location.origin + '/f/map/' + location.hash;
51 - // wx.ready(() => { 52 + }
52 - // wx.showAllNonBaseMenuItem(); 53 + const { data } = await wxJsAPI({ url: '/f/map/#/' });
53 - // }); 54 + data.jsApiList = apiList;
54 - // wx.error((err) => { 55 + wx.config(data);
55 - // console.warn(err); 56 + wx.ready(() => {
56 - // }); 57 + wx.showAllNonBaseMenuItem();
58 + });
59 + wx.error((err) => {
60 + console.warn(err);
61 + });
57 }) 62 })
58 </script> 63 </script>
59 64
......
1 +/*
2 + * @Date: 2023-07-10 16:14:10
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-07-18 16:33:08
5 + * @FilePath: /map-demo/src/common/members.js
6 + * @Description: 文件描述
7 + */
8 +const testInfo = {
9 + id: 'members',
10 + name: '人员',
11 + icon: [
12 + 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%BA%BA%E5%91%9802@2x.png',
13 + 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%BA%BA%E5%91%9801@2x.png',
14 + ],
15 + list: [
16 + {
17 + name: '义工',
18 + position: [120.587721, 31.31423],
19 + icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%B9%89%E5%B7%A5@2x.png',
20 + details: [
21 + {
22 + id: '0',
23 + name: '王大发（慧东）',
24 + contact: '1331234567',
25 + group: '拈花堂组',
26 + },
27 + {
28 + id: '0',
29 + name: '潘苗苗',
30 + contact: '1331234567',
31 + group: '弘法部接待组',
32 + },
33 + {
34 + id: '0',
35 + name: '王大发（慧东）',
36 + contact: '1331234567',
37 + group: '拈花堂组',
38 + },
39 + {
40 + id: '0',
41 + name: '潘苗苗',
42 + contact: '1331234567',
43 + group: '弘法部接待组',
44 + },
45 + {
46 + id: '0',
47 + name: '王大发（慧东）',
48 + contact: '1331234567',
49 + group: '拈花堂组',
50 + },
51 + {
52 + id: '0',
53 + name: '潘苗苗',
54 + contact: '1331234567',
55 + group: '弘法部接待组',
56 + },
57 + {
58 + id: '0',
59 + name: '王大发（慧东）',
60 + contact: '1331234567',
61 + group: '拈花堂组',
62 + },
63 + {
64 + id: '0',
65 + name: '潘苗苗',
66 + contact: '1331234567',
67 + group: '弘法部接待组',
68 + },
69 + ],
70 + window_type: 'member',
71 + },
72 + {
73 + name: '安保人员',
74 + position: [120.585991, 31.314314],
75 + icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E4%BF%9D%E5%AE%89@2x.png',
76 + details: [
77 + {
78 + id: '0',
79 + name: '潘苗苗',
80 + contact: '1331234567',
81 + group: '弘法部接待组',
82 + },
83 + {
84 + id: '0',
85 + name: '潘苗苗',
86 + contact: '1331234567',
87 + group: '弘法部接待组',
88 + },
89 + {
90 + id: '0',
91 + name: '潘苗苗',
92 + contact: '1331234567',
93 + group: '弘法部接待组',
94 + },
95 + {
96 + id: '0',
97 + name: '潘苗苗',
98 + contact: '1331234567',
99 + group: '弘法部接待组',
100 + },
101 + {
102 + id: '0',
103 + name: '潘苗苗',
104 + contact: '1331234567',
105 + group: '弘法部接待组',
106 + },
107 + {
108 + id: '0',
109 + name: '潘苗苗',
110 + contact: '1331234567',
111 + group: '弘法部接待组',
112 + },
113 + {
114 + id: '0',
115 + name: '潘苗苗',
116 + contact: '1331234567',
117 + group: '弘法部接待组',
118 + },
119 + {
120 + id: '0',
121 + name: '潘苗苗',
122 + contact: '1331234567',
123 + group: '弘法部接待组',
124 + },
125 + {
126 + id: '0',
127 + name: '潘苗苗',
128 + contact: '1331234567',
129 + group: '弘法部接待组',
130 + },
131 + {
132 + id: '0',
133 + name: '潘苗苗',
134 + contact: '1331234567',
135 + group: '弘法部接待组',
136 + },
137 + ],
138 + window_type: 'member',
139 + },
140 + {
141 + name: '设备维修人员',
142 + position: [120.585537, 31.313794],
143 + icon: 'https://cdn.ipadbiz.cn/xys/map/icon/%E7%BB%B4%E4%BF%AE%E4%BA%BA%E5%91%98@2x.png',
144 + details: [
145 + {
146 + id: '0',
147 + name: '潘苗苗',
148 + contact: '1331234567',
149 + group: '弘法部接待组',
150 + },
151 + {
152 + id: '0',
153 + name: '潘苗苗',
154 + contact: '1331234567',
155 + group: '弘法部接待组',
156 + },
157 + ],
158 + window_type: 'member',
159 + },
160 + ],
161 +};
162 +
163 +export default testInfo;
1 +/*
2 + * @Date: 2023-07-10 16:14:10
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-07-18 16:00:25
5 + * @FilePath: /map-demo/src/common/yard.js
6 + * @Description: 文件描述
7 + */
8 +const testInfo = {
9 + id: 'yard',
10 + name: '场地',
11 + icon: [
12 + 'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B002@2x.png',
13 + 'https://cdn.ipadbiz.cn/xys/map/icon/%E5%9C%BA%E5%9C%B001@2x.png',
14 + ],
15 + list: [
16 + {
17 + name: '拈花堂',
18 + position: [120.586269, 31.313723],
19 + icon: 'https://cdn.ipadbiz.cn/space/Fg-vUZrzlULP6Ls61gRtxgaeTN-y.png',
20 + details: [
21 + {
22 + id: '0',
23 + name: '拈花堂-北厅',
24 + type: '会议室',
25 + sum: 30,
26 + manager: '西仓库运营组长',
27 + contact: '13876476873',
28 + status: '正常',
29 + note: '预订须知',
30 + img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
31 + book_url: '1', // 预定链接
32 + },
33 + ],
34 + window_type: 'yard',
35 + },
36 + {
37 + name: '静心堂',
38 + position: [120.58624, 31.313982],
39 + icon: 'https://cdn.ipadbiz.cn/space/Fg-vUZrzlULP6Ls61gRtxgaeTN-y.png',
40 + details: [
41 + {
42 + id: '0',
43 + name: '静心堂',
44 + type: '大禅堂',
45 + sum: 120,
46 + manager: '西仓库运营组长',
47 + contact: '13876476873',
48 + status: '正常',
49 + note: '预订须知',
50 + img_url: ['https://cdn.ipadbiz.cn/xys/temp/2252295669ecec014189299b385ffa87.jpg'], // 图片链接
51 + book_url: '1', // 预定链接
52 + },
53 + ],
54 + window_type: 'yard',
55 + },
56 + ],
57 +};
58 +
59 +export default testInfo;
1 +<template>
2 + <div style="position: relative;">
3 + <div class="info-window-warn-wrapper">
4 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
5 + <div class="hideScrollBar info-window-title">
6 + <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
7 + :class="[isActive === index ? 'checked' : '', 'item']">
8 + <span>{{ item.name }}</span>
9 + </div>
10 + </div>
11 + <!-- <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1rem;">
12 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
13 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
14 + </div> -->
15 + <div v-for="(item, index) in info?.details" :key="index">
16 + <div v-if="isActive === index">
17 + <div style="width: 80%; float: left; color: #888; line-height: 1.75;">
18 + <div>类型: {{ item.type }}</div>
19 + <div>容纳人数: {{ item.sum }}</div>
20 + <div>负责人: {{ item.manager }}</div>
21 + <div>联系电话: {{ item.contact }}</div>
22 + <div>状态: {{ item.status }}</div>
23 + </div>
24 + <div v-if="warn_info.img_url" class="info-control">
25 + <viewer :images="warn_info.img_url" :options="options" class="images clearfix">
26 + <template #default="scope">
27 + <van-image v-for="src in scope.images" width="100%" fit="contain" :src="src" />
28 + </template>
29 + </viewer>
30 + </div>
31 + </div>
32 + </div>
33 + </div>
34 + <div class="van-hairline--top warn-button-wrapper">
35 + <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
36 + class="van-hairline--right">
37 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E8%AF%A6%E6%83%85@2x.png" size="1.25rem" color="#FFF"
38 + style="vertical-align: sub;" />&nbsp;
39 + <span style="color: #AB8F57; font-size: 1rem;">须知</span>
40 + </div>
41 + <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
42 + class="van-hairline--right">
43 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/icon/%E9%A2%84%E5%AE%9A@2x.png" size="1.25rem" color="#FFF"
44 + style="vertical-align: sub;" />&nbsp;
45 + <span style="color: #AB8F57; font-size: 1rem;">预定</span>
46 + </div>
47 + <div @click="goToLocation()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;">
48 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
49 + style="vertical-align: sub;" />&nbsp;
50 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
51 + </div>
52 + </div>
53 + </div>
54 + <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
55 + <div class="leaflet-popup-tip"></div>
56 + </div>
57 + </div>
58 +</template>
59 +
60 +<script>
61 +import $ from 'jquery'
62 +
63 +export default {
64 + props: {
65 + infoWindow: {
66 + type: Object,
67 + default: () => { }
68 + },
69 + info: {
70 + type: Object,
71 + default: () => { }
72 + },
73 + rect: {
74 + type: Object,
75 + default: () => { }
76 + },
77 + },
78 + mounted() {
79 + },
80 + computed: {
81 + warn_span1() {
82 + let flag = false;
83 + if (this.warn_info.case_url) {
84 + if (this.warn_info.notice_url || this.warn_info.handle_url) {
85 + flag = true
86 + }
87 + }
88 + return flag;
89 + },
90 + warn_span2() {
91 + let flag = false;
92 + if (this.warn_info.notice_url) {
93 + if (this.warn_info.handle_url) {
94 + flag = true
95 + }
96 + }
97 + return flag;
98 + },
99 + },
100 + watch: {
101 + rect(val) {
102 + this.widow_info = val;
103 + },
104 + infoWindow(val) {
105 + if (val) {
106 + this.warn_info = this.info.details[0]
107 + }
108 + }
109 + },
110 + data() {
111 + return {
112 + popup_title: '',
113 + popup_content: '',
114 + video_src: '',
115 + ind: '',
116 + is_play: false,
117 + audio: new Audio(),
118 + widow_info: {},
119 + play_time: '00:00',
120 + isActive: 0,
121 + nav_scroll: false,
122 + warn_info: {},
123 + showBottom: false,
124 + img_url: '',
125 + show: false,
126 + images: ['https://picsum.photos/200/200'],
127 + options: {
128 + title: false,
129 + toolbar: false,
130 + navbar: false,
131 + }
132 + }
133 + },
134 + methods: {
135 + // 关闭
136 + close() {
137 + // 高德地图信息窗关闭的api
138 + this.infoWindow.close()
139 + // 默认选中项
140 + this.isActive = 0;
141 + // 滚动状态
142 + this.nav_scroll = false;
143 + },
144 + goToCase(url) {
145 + if (url) {
146 + location.href = url;
147 + }
148 + },
149 + goToList(id) {
150 + this.$router.push({
151 + path: '/noticeList',
152 + query: {
153 + id
154 + }
155 + })
156 + },
157 + goToHandle(url) {
158 + // if (url) {
159 + // location.href = url;
160 + // }
161 + },
162 + onClose () {
163 + window.devicePixelRatio = 1;
164 + },
165 + handleTitle(index) {
166 + this.isActive = index;
167 + // // 标题滚动
168 + // if (index === 2 && this.info.details.length > 3) {
169 + // this.handleNavScroll()
170 + // }
171 + this.warn_info = this.info.details[index]
172 + },
173 + handleNavScroll() { // 滚动标题
174 + this.nav_scroll = !this.nav_scroll;
175 + if (this.nav_scroll) {
176 + setTimeout(() => {
177 + $('.info-window-title').animate({
178 + scrollLeft: $('.info-window-title .item').outerWidth() * 3
179 + }, 1000);
180 + }, 100);
181 + } else {
182 + setTimeout(() => {
183 + $('.info-window-title').animate({
184 + scrollLeft: 0
185 + }, 1000);
186 + }, 100);
187 + }
188 + }
189 + }
190 +}
191 +</script>
192 +
193 +<style lang="less">
194 +.info-window-warn-wrapper {
195 + background: #fff;
196 + color: #333;
197 + -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
198 + box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
199 + text-align: left;
200 + border-radius: 5px;
201 + padding: 1.5rem 1.25rem;
202 + overflow: auto;
203 +
204 + .info-text {
205 + width: 100%;
206 + line-height: 1.5;
207 + float: left;
208 + color: #7A6C6C;
209 + }
210 +
211 + .info-text-audio {
212 + width: 80%;
213 + line-height: 1.5;
214 + float: left;
215 + color: #7A6C6C;
216 + }
217 +
218 + .info-control {
219 + width: 20%;
220 + float: left;
221 + text-align: center;
222 + color: #AB8F57;
223 +
224 + .control-play {
225 + text-align: center;
226 + margin-bottom: 0.5rem;
227 +
228 + i {
229 + margin-top: 0 !important;
230 + }
231 + }
232 + }
233 +
234 + // .t-popup-content {
235 + // position: relative;
236 + // width: 25rem;
237 + // padding: 0;
238 + // margin: 0;
239 + // border-radius: 0.1rem;
240 + // background: rgba(255, 255, 255, 0.9);
241 + // -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
242 + // box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
243 + // line-height: 1.4;
244 +
245 + // .view-name {
246 + // margin: 0;
247 + // padding: 0.5rem;
248 + // width: 25rem;
249 + // height: 2.5rem;
250 + // font-size: 1.2rem;
251 + // text-indent: 0.2rem;
252 + // white-space: nowrap;
253 + // text-overflow: ellipsis;
254 + // color: #5b5b5b;
255 + // -webkit-box-sizing: border-box;
256 + // box-sizing: border-box;
257 + // border-bottom: solid 1px #e8e8e8;
258 + // border-radius: 0.1rem 0.1rem 0 0;
259 + // background: #f7f7f7;
260 + // overflow: hidden;
261 + // }
262 +
263 + // .view-photo {
264 + // display: block;
265 + // float: left;
266 + // margin: 0.5rem;
267 + // height: 100%;
268 + // width: 9rem;
269 + // height: 9rem;
270 + // border-radius: 3px;
271 + // }
272 +
273 + // .introduction {
274 + // float: left;
275 + // margin: 0.2rem 0;
276 + // width: 13.5rem;
277 + // height: 6.75rem;
278 + // font-size: 0.9rem;
279 + // color: #202020;
280 + // overflow: hidden;
281 + // }
282 +
283 + // // .control-play {
284 + // // display: block;
285 + // // float: left;
286 + // // margin-right: 0.5rem;
287 + // // width: 7rem;
288 + // // height: 3rem;
289 + // // border-radius: 2px;
290 + // // background: #ffdd02 center no-repeat;
291 + // // background-size: 6.5rem 3rem;
292 + // // }
293 +
294 + // .show-details {
295 + // display: block;
296 + // float: left;
297 + // width: 7rem;
298 + // height: 3rem;
299 + // border-radius: 2px;
300 + // background: #9196a9 center no-repeat;
301 + // background-size: 6.5rem 3rem;
302 + // }
303 + // }
304 +
305 + .info-window-title {
306 + display: flex;
307 + overflow-x: scroll;
308 + overflow-y: hidden;
309 + -webkit-overflow-scrolling: touch;
310 + position: relative;
311 + text-align: left;
312 +
313 + .item {
314 + width: 30%;
315 + flex-shrink: 0;
316 + color: #888;
317 + font-size: 1.1rem;
318 + margin-bottom: 0.75rem;
319 + display: inline-block;
320 + margin-right: 0.5rem;
321 + }
322 +
323 + .checked {
324 + color: #AB8F57;
325 +
326 + span {
327 + border-bottom: 1.5px solid #AB8F57;
328 + padding-bottom: 3px;
329 + }
330 + }
331 + }
332 +}
333 +
334 +.leaflet-popup-tip-container {
335 + margin-top: -1px;
336 + width: 2rem;
337 + height: 2rem;
338 + margin-left: -20px;
339 + overflow: hidden;
340 + pointer-events: none;
341 +}
342 +
343 +.leaflet-popup-tip {
344 + width: 1rem;
345 + height: 1rem;
346 + -webkit-transform: rotate(0);
347 + transform: rotate(0);
348 + background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
349 + background-size: 1rem 1rem;
350 + box-shadow: none;
351 +}
352 +
353 +.warn-button-wrapper {
354 + margin-top: 1rem;
355 + display: flex;
356 + justify-content: space-around;
357 +
358 + .f-line {
359 + text-align: center;
360 + margin-top: 1rem;
361 + }
362 +}
363 +
364 +.hideScrollBar::-webkit-scrollbar {
365 + display: none;
366 +}
367 +
368 +.hideScrollBar {
369 + -ms-overflow-style: none;
370 + overflow: -moz-scrollbars-none;
371 +}
372 +
373 +.wrapper {
374 + display: flex;
375 + align-items: center;
376 + justify-content: center;
377 + height: 100%;
378 + }
379 +
380 + .block {
381 + width: 120px;
382 + height: 120px;
383 + background-color: #fff;
384 + }
385 +</style>
...@@ -2,12 +2,45 @@ ...@@ -2,12 +2,45 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-31 12:06:19 3 * @Date: 2022-05-31 12:06:19
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-05-30 13:12:21 5 + * @LastEditTime: 2023-07-18 14:02:08
6 * @FilePath: /map-demo/src/main.js 6 * @FilePath: /map-demo/src/main.js
7 * @Description: 7 * @Description:
8 */ 8 */
9 import { createApp } from 'vue'; 9 import { createApp } from 'vue';
10 -import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search } from 'vant'; 10 +import {
11 + Button,
12 + Image as VanImage,
13 + Col,
14 + Row,
15 + Icon,
16 + Form,
17 + Field,
18 + CellGroup,
19 + ConfigProvider,
20 + Toast,
21 + Uploader,
22 + Empty,
23 + Tab,
24 + Tabs,
25 + Overlay,
26 + NumberKeyboard,
27 + Lazyload,
28 + List,
29 + PullRefresh,
30 + Popup,
31 + Picker,
32 + Sticky,
33 + Stepper,
34 + Tag,
35 + Swipe,
36 + SwipeItem,
37 + Dialog,
38 + ActionSheet,
39 + Loading,
40 + Checkbox,
41 + Search,
42 + ImagePreview,
43 +} from 'vant';
11 import router from './router'; 44 import router from './router';
12 import App from './App.vue'; 45 import App from './App.vue';
13 // import axios from './utils/axios'; 46 // import axios from './utils/axios';
...@@ -19,13 +52,51 @@ import 'font-awesome/css/font-awesome.min.css'; ...@@ -19,13 +52,51 @@ import 'font-awesome/css/font-awesome.min.css';
19 import VueVideoPlayer from '@videojs-player/vue'; 52 import VueVideoPlayer from '@videojs-player/vue';
20 import 'video.js/dist/video-js.css'; 53 import 'video.js/dist/video-js.css';
21 54
55 +import 'viewerjs/dist/viewer.css';
56 +import VueViewer from 'v-viewer';
57 +
22 const pinia = createPinia(); 58 const pinia = createPinia();
23 const app = createApp(App); 59 const app = createApp(App);
24 60
25 app.config.globalProperties.$http = axios; // 关键语句 61 app.config.globalProperties.$http = axios; // 关键语句
26 62
27 -app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider); 63 +app
64 + .use(pinia)
65 + .use(router)
66 + .use(Button)
67 + .use(VanImage)
68 + .use(Col)
69 + .use(Row)
70 + .use(Icon)
71 + .use(Form)
72 + .use(Field)
73 + .use(CellGroup)
74 + .use(Toast)
75 + .use(Uploader)
76 + .use(Empty)
77 + .use(Tab)
78 + .use(Tabs)
79 + .use(Overlay)
80 + .use(NumberKeyboard)
81 + .use(Lazyload)
82 + .use(List)
83 + .use(PullRefresh)
84 + .use(Popup)
85 + .use(Picker)
86 + .use(Sticky)
87 + .use(Stepper)
88 + .use(Tag)
89 + .use(Swipe)
90 + .use(SwipeItem)
91 + .use(Dialog)
92 + .use(ActionSheet)
93 + .use(Loading)
94 + .use(Checkbox)
95 + .use(Search)
96 + .use(ConfigProvider)
97 + .use(ImagePreview);
28 98
29 app.use(VueVideoPlayer) 99 app.use(VueVideoPlayer)
100 +app.use(VueViewer);
30 101
31 app.mount('#app'); 102 app.mount('#app');
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-28 10:17:40 3 * @Date: 2022-05-28 10:17:40
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-07-07 11:09:02 5 + * @LastEditTime: 2023-07-18 09:47:03
6 * @FilePath: /map-demo/src/utils/axios.js 6 * @FilePath: /map-demo/src/utils/axios.js
7 * @Description: 7 * @Description:
8 */ 8 */
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-17 22:11:32 4 + * @LastEditTime: 2023-07-18 15:02:13
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -161,7 +161,7 @@ const GPS = { ...@@ -161,7 +161,7 @@ const GPS = {
161 }; 161 };
162 162
163 export default { 163 export default {
164 - components: { InfoWindow }, 164 + components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground },
165 data() { 165 data() {
166 return { 166 return {
167 map: '', 167 map: '',
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-17 22:18:51 4 + * @LastEditTime: 2023-07-18 16:48:31
5 * @FilePath: /map-demo/src/views/inner.vue 5 * @FilePath: /map-demo/src/views/inner.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -83,12 +83,46 @@ ...@@ -83,12 +83,46 @@
83 <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 --> 83 <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
84 <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect" 84 <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
85 @onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause"></InfoWindow> 85 @onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause"></InfoWindow>
86 - <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo" 86 + <!-- <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
87 :rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite> 87 :rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite>
88 <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo" 88 <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
89 - :rect="rect"></InfoWindowWarn> 89 + :rect="rect"></InfoWindowWarn> -->
90 + <InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
91 + :rect="rect"></InfoWindowYard>
90 92
91 - <audioBackground></audioBackground> 93 + <!-- <audioBackground></audioBackground> -->
94 +
95 + <van-popup v-model:show="show_member_popup" position="bottom" :overlay="true" :style="{ padding: '1rem 0', height: '80%', background: '#F7F8FA' }">
96 + <van-icon name="cross" size="1.35rem" @click="show_member_popup = false" style="float: right; color: gray; margin-right: 1rem;" />
97 + <div id="member-list" class="popup-wrapper" style="clear: both;">
98 + <div style="color: #965f13; text-align: center; margin-bottom: 1rem; font-size: 1.25rem;">
99 + {{ itemInfo.name }}
100 + </div>
101 + <div v-for="(item, index) in itemInfo.details" :key="index" style="margin-bottom: 1rem;">
102 + <!-- 临时引用演示 -->
103 + <van-cell-group inset v-show="false">
104 + <van-cell title="姓名" :value="item.name" />
105 + <van-cell title="手机号" :value="item.contact" />
106 + <van-cell title="组别" :value="item.group" />
107 + </van-cell-group>
108 + <!-- end -->
109 + <div class="van-cell-group van-cell-group--inset">
110 + <div class="van-cell">
111 + <div class="van-cell__title"> <span>姓名</span> </div>
112 + <div class="van-cell__value"> <span>{{ item.name }}</span></div>
113 + </div>
114 + <div class="van-cell">
115 + <div class="van-cell__title"> <span>手机号</span> </div>
116 + <div class="van-cell__value"> <span><a :href="'tel:' + item.contact" style="color: #965f13;">{{ item.contact }}</a></span></div>
117 + </div>
118 + <div class="van-cell">
119 + <div class="van-cell__title"><span>组别</span></div>
120 + <div class="van-cell__value"><span>{{ item.group }}</span></div>
121 + </div>
122 + </div>
123 + </div>
124 + </div>
125 + </van-popup>
92 </div> 126 </div>
93 </template> 127 </template>
94 128
...@@ -96,13 +130,15 @@ ...@@ -96,13 +130,15 @@
96 // import { mapState } from 'vuex' 130 // import { mapState } from 'vuex'
97 import coord from '@/common/map_data' 131 import coord from '@/common/map_data'
98 import map_max from '@/common/max' 132 import map_max from '@/common/max'
99 -import map_alert from '@/common/alert' 133 +import map_yard from '@/common/yard'
134 +import map_members from '@/common/members'
100 import _ from 'lodash'; 135 import _ from 'lodash';
101 import $ from 'jquery'; 136 import $ from 'jquery';
102 //引入定义的信息窗组件 137 //引入定义的信息窗组件
103 import InfoWindow from '@/components/InfoWindow' 138 import InfoWindow from '@/components/InfoWindow'
104 import InfoWindowLite from '@/components/InfoWindowLite' 139 import InfoWindowLite from '@/components/InfoWindowLite'
105 import InfoWindowWarn from '@/components/InfoWindowWarn' 140 import InfoWindowWarn from '@/components/InfoWindowWarn'
141 +import InfoWindowYard from '@/components/InfoWindowYard'
106 import audioBackground from '@/components/audioBackground' 142 import audioBackground from '@/components/audioBackground'
107 import { useRect } from '@vant/use'; 143 import { useRect } from '@vant/use';
108 144
...@@ -198,6 +234,7 @@ export default { ...@@ -198,6 +234,7 @@ export default {
198 current_route: '', 234 current_route: '',
199 current_safe_route: '', 235 current_safe_route: '',
200 show_popup: false, 236 show_popup: false,
237 + show_member_popup: false,
201 dialog_show: false, 238 dialog_show: false,
202 dialog_text: '', 239 dialog_text: '',
203 walk_route: '', 240 walk_route: '',
...@@ -213,9 +250,11 @@ export default { ...@@ -213,9 +250,11 @@ export default {
213 showInfoWindow: false, 250 showInfoWindow: false,
214 showInfoWindowLite: false, 251 showInfoWindowLite: false,
215 showInfoWindowWarn: false, 252 showInfoWindowWarn: false,
253 + showInfoWindowYard: false,
216 infoWindow: {}, 254 infoWindow: {},
217 infoWindowLite: {}, 255 infoWindowLite: {},
218 infoWindowWarn: {}, 256 infoWindowWarn: {},
257 + infoWindowYard: {},
219 itemInfo: {}, 258 itemInfo: {},
220 navBarList: [], 259 navBarList: [],
221 rect: {}, 260 rect: {},
...@@ -234,14 +273,15 @@ export default { ...@@ -234,14 +273,15 @@ export default {
234 }, 273 },
235 defaultZoom: 18, 274 defaultZoom: 18,
236 defaultCenter: [120.587382, 31.313900], 275 defaultCenter: [120.587382, 31.313900],
237 - mapTiles: [] 276 + mapTiles: [],
238 } 277 }
239 }, 278 },
240 async mounted() { 279 async mounted() {
241 const code = this.$route.query.id; 280 const code = this.$route.query.id;
242 // const code = '362800'; 281 // const code = '362800';
243 const { data } = await mapAPI({i: code}); 282 const { data } = await mapAPI({i: code});
244 - data.list = data.list.concat(map_alert); 283 + data.list = data.list.concat(map_yard);
284 + data.list = data.list.concat(map_members);
245 this.navBarList = data.list; // 底部导航条 285 this.navBarList = data.list; // 底部导航条
246 this.mapTiles = data.level; // 获取图层 286 this.mapTiles = data.level; // 获取图层
247 this.navKey = data.list[0]['id']; // 默认选中 第一个 id 287 this.navKey = data.list[0]['id']; // 默认选中 第一个 id
...@@ -302,6 +342,13 @@ export default { ...@@ -302,6 +342,13 @@ export default {
302 const rect = useRect(this.$refs.root); 342 const rect = useRect(this.$refs.root);
303 this.rect = rect; 343 this.rect = rect;
304 } 344 }
345 + },
346 + showInfoWindowYard(val) {
347 + if (val) {
348 + // 元素的大小及其相对于视口的位置
349 + const rect = useRect(this.$refs.root);
350 + this.rect = rect;
351 + }
305 } 352 }
306 }, 353 },
307 methods: { 354 methods: {
...@@ -443,12 +490,19 @@ export default { ...@@ -443,12 +490,19 @@ export default {
443 this.positionLiteMarker(entity_info[i]) 490 this.positionLiteMarker(entity_info[i])
444 } else if (entity_info[i].window_type === 'warn') { 491 } else if (entity_info[i].window_type === 'warn') {
445 this.positionWarnMarker(entity_info[i]) 492 this.positionWarnMarker(entity_info[i])
493 + } else if (entity_info[i].window_type === 'yard') {
494 + this.positionYardMarker(entity_info[i])
495 + } else if (entity_info[i].window_type === 'member') {
496 + this.positionMemberMarker(entity_info[i])
446 } 497 }
447 }) 498 })
448 // 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序 499 // 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
449 // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer) 500 // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
450 var labelsLayer = new AMap.LabelsLayer({ 501 var labelsLayer = new AMap.LabelsLayer({
451 - collision: true, 502 + zooms: [3, 20],
503 + zIndex: 1000,
504 + collision: true, // 该层内标注是否避让
505 + allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
452 }); 506 });
453 // // 将 LabelMarker 实例添加到 LabelsLayer 上 507 // // 将 LabelMarker 实例添加到 LabelsLayer 上
454 labelsLayer.add(labelMarker); 508 labelsLayer.add(labelMarker);
...@@ -831,6 +885,10 @@ export default { ...@@ -831,6 +885,10 @@ export default {
831 this.positionLiteMarker(item) 885 this.positionLiteMarker(item)
832 } else if (item.window_type === 'warn') { 886 } else if (item.window_type === 'warn') {
833 this.positionWarnMarker(item) 887 this.positionWarnMarker(item)
888 + } else if (item.window_type === 'yard') {
889 + this.positionYardMarker(item)
890 + } else if (item.window_type === 'member') {
891 + this.positionMemberMarker(item)
834 } 892 }
835 }, 893 },
836 positionMarker(item) { 894 positionMarker(item) {
...@@ -869,6 +927,30 @@ export default { ...@@ -869,6 +927,30 @@ export default {
869 zoomEnable: false 927 zoomEnable: false
870 }); 928 });
871 }, 929 },
930 + positionYardMarker(item) {
931 + // 点击后创建自定义信息窗口
932 + this.setInfoWindowsYard(item)
933 + // 把地图中心点设置为当前点击的标记点
934 + this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
935 + //
936 + this.show_nav_popup = false;
937 + // 禁止缩放
938 + this.map.setStatus({
939 + zoomEnable: false
940 + });
941 + },
942 + positionMemberMarker(item) {
943 + // 点击后出现弹框
944 + this.setInfoWindowsMember(item)
945 + // 把地图中心点设置为当前点击的标记点
946 + this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
947 + //
948 + this.show_nav_popup = false;
949 + // 禁止缩放
950 + this.map.setStatus({
951 + zoomEnable: false
952 + });
953 + },
872 setInfoWindows(item) { 954 setInfoWindows(item) {
873 // 此时需要把组件的样式设置为可见 955 // 此时需要把组件的样式设置为可见
874 this.showInfoWindow = true 956 this.showInfoWindow = true
...@@ -935,6 +1017,36 @@ export default { ...@@ -935,6 +1017,36 @@ export default {
935 // 信息窗口打开 1017 // 信息窗口打开
936 infoWindowWarn.open(this.map, item.position); 1018 infoWindowWarn.open(this.map, item.position);
937 }, 1019 },
1020 + setInfoWindowsYard(item) {
1021 + // 此时需要把组件的样式设置为可见
1022 + this.showInfoWindowYard = true
1023 + // 设置marker头部的标题信息窗口
1024 + const infoWindowYard = new AMap.InfoWindow({
1025 + // 使用自定义窗体
1026 + isCustom: true,
1027 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
1028 + content: this.$refs['infoWindowYard'].$el,
1029 + // 设置定位偏移量
1030 + offset: new AMap.Pixel(0, -30),
1031 + })
1032 + this.infoWindowYard = infoWindowYard;
1033 + this.itemInfo = item;
1034 + this.itemInfo.map = this.map;
1035 + this.itemInfo.LngLat = {
1036 + lng: this.current_lng,
1037 + lat: this.current_lat,
1038 + }
1039 + // 信息窗口打开
1040 + infoWindowYard.open(this.map, item.position);
1041 + },
1042 + setInfoWindowsMember(item) {
1043 + this.itemInfo = item;
1044 + this.show_member_popup = true;
1045 + // 列表滚动到顶部
1046 + setTimeout(() => {
1047 + $('.van-popup').animate({ scrollTop: 0 }, 100);
1048 + }, 100);
1049 + },
938 closeInfoWindow() { 1050 closeInfoWindow() {
939 if (this.showInfoWindow) { 1051 if (this.showInfoWindow) {
940 this.$refs['infoWindow'].close(); 1052 this.$refs['infoWindow'].close();
...@@ -957,6 +1069,13 @@ export default { ...@@ -957,6 +1069,13 @@ export default {
957 zoomEnable: true 1069 zoomEnable: true
958 }); 1070 });
959 } 1071 }
1072 + if (this.showInfoWindowYard) {
1073 + this.$refs['infoWindowYard'].close();
1074 + // 打开缩放
1075 + this.map.setStatus({
1076 + zoomEnable: true
1077 + });
1078 + }
960 }, 1079 },
961 onPlay (name) { 1080 onPlay (name) {
962 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 1081 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
...@@ -1221,4 +1340,5 @@ export default { ...@@ -1221,4 +1340,5 @@ export default {
1221 padding: 5px 12px; 1340 padding: 5px 12px;
1222 font-size: 0.8rem; 1341 font-size: 0.8rem;
1223 } 1342 }
1343 +
1224 </style> 1344 </style>
......
This diff could not be displayed because it is too large.