Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f08d579f 1 parent 950679dd

fix

Inline Side-by-side
Showing 5 changed files with 44 additions and 186 deletions
1 <!-- 1 <!--
2 * @Date: 2023-05-31 16:10:33 2 * @Date: 2023-05-31 16:10:33
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-10 15:12:29 4 + * @LastEditTime: 2023-07-11 13:32:02
5 * @FilePath: /map-demo/index.html 5 * @FilePath: /map-demo/index.html
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 securityJsCode:'8602057c4c8dae5bed9a240c0582c46f', 22 securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
23 } 23 }
24 // window._AMapSecurityConfig = { 24 // window._AMapSecurityConfig = {
25 - // serviceHost:'https://oa-dev.onwall.cn/_AMapService', 25 + // serviceHost: 'https://oa-dev.onwall.cn/_AMapService',
26 // } 26 // }
27 </script> 27 </script>
28 <script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer,AMap.ToolBar"></script> 28 <script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer,AMap.ToolBar"></script>
......
...@@ -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-10 17:48:24 5 + * @LastEditTime: 2023-07-11 11:01:51
6 * @FilePath: /map-demo/src/App.vue 6 * @FilePath: /map-demo/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
......
1 +/*
2 + * @Date: 2023-07-10 16:14:10
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-07-11 14:30:32
5 + * @FilePath: /map-demo/src/common/alert.js
6 + * @Description: 文件描述
7 + */
1 const testInfo = { 8 const testInfo = {
2 id: 'warn', 9 id: 'warn',
3 name: '预警', 10 name: '预警',
...@@ -7,8 +14,8 @@ const testInfo = { ...@@ -7,8 +14,8 @@ const testInfo = {
7 ], 14 ],
8 list: [ 15 list: [
9 { 16 {
10 - name: '厢房', 17 + name: '老念佛堂',
11 - position: [120.58704, 31.313773], 18 + position: [120.587586, 31.315532],
12 icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png', 19 icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
13 details: [ 20 details: [
14 { 21 {
...@@ -23,141 +30,7 @@ const testInfo = { ...@@ -23,141 +30,7 @@ const testInfo = {
23 alert_type: '火警', 30 alert_type: '火警',
24 datetime: '2021-12-22 16:39:42', 31 datetime: '2021-12-22 16:39:42',
25 type: 'fire', 32 type: 'fire',
26 - cctv_url: '', // 监控链接 33 + cctv_url: 'https://cdn.ipadbiz.cn/xys/map/oceans.mp4', // 监控链接
27 - case_url:
28 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
29 - notice_url: '1', // 通知链接
30 - handle_url: '1', // 处理链接
31 - },
32 - {
33 - id: '0',
34 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
35 - name: '三慧楼楼顶',
36 - code: 'Y0218',
37 - event_name: '水警1', // 事件名称
38 - eq_name: '液位', // 设备名称
39 - eq_model: '传感器', // 设备型号
40 - eq_address: '1-1-64', // 回路地址号
41 - alert_type: '',
42 - alarm_num: '1.61m', // 报警侑
43 - set_num: '1.2m-1.6m', // 设定值
44 - datetime: '2021-12-22 16:39:42',
45 - type: 'water',
46 - cctv_url: '', // 监控链接
47 - case_url:
48 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
49 - notice_url: '1', // 通知链接
50 - handle_url: '1', // 处理链接
51 - },
52 - {
53 - id: '0',
54 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
55 - name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
56 - code: 'Y0218',
57 - event_name: '火警3', // 事件名称
58 - eq_name: '烟感', // 设备名称
59 - eq_model: '感烟火灾探测器', // 设备型号
60 - eq_address: '2-1-25', // 回路地址号
61 - alert_type: '火警',
62 - datetime: '2021-12-22 16:39:42',
63 - type: 'fire',
64 - cctv_url: '', // 监控链接
65 - case_url:
66 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
67 - notice_url: '1', // 通知链接
68 - handle_url: '1', // 处理链接
69 - },
70 - {
71 - id: '0',
72 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
73 - name: '三慧楼楼顶',
74 - code: 'Y0218',
75 - event_name: '水警3', // 事件名称
76 - eq_name: '液位', // 设备名称
77 - eq_model: '传感器', // 设备型号
78 - eq_address: '1-1-64', // 回路地址号
79 - alert_type: '',
80 - alarm_num: '1.61m', // 报警侑
81 - set_num: '1.2m-1.6m', // 设定值
82 - datetime: '2021-12-22 16:39:42',
83 - type: 'water',
84 - cctv_url: '', // 监控链接
85 - case_url:
86 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
87 - notice_url: '1', // 通知链接
88 - handle_url: '1', // 处理链接
89 - },
90 - {
91 - id: '0',
92 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
93 - name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
94 - code: 'Y0218',
95 - event_name: '火警1', // 事件名称
96 - eq_name: '烟感', // 设备名称
97 - eq_model: '感烟火灾探测器', // 设备型号
98 - eq_address: '2-1-25', // 回路地址号
99 - alert_type: '火警',
100 - datetime: '2021-12-22 16:39:42',
101 - type: 'fire',
102 - cctv_url: '', // 监控链接
103 - case_url:
104 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
105 - notice_url: '1', // 通知链接
106 - handle_url: '1', // 处理链接
107 - },
108 - {
109 - id: '0',
110 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
111 - name: '三慧楼楼顶',
112 - code: 'Y0218',
113 - event_name: '水警1', // 事件名称
114 - eq_name: '液位', // 设备名称
115 - eq_model: '传感器', // 设备型号
116 - eq_address: '1-1-64', // 回路地址号
117 - alert_type: '',
118 - alarm_num: '1.61m', // 报警侑
119 - set_num: '1.2m-1.6m', // 设定值
120 - datetime: '2021-12-22 16:39:42',
121 - type: 'water',
122 - cctv_url: '', // 监控链接
123 - case_url:
124 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
125 - notice_url: '1', // 通知链接
126 - handle_url: '1', // 处理链接
127 - },
128 - {
129 - id: '0',
130 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
131 - name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
132 - code: 'Y0218',
133 - event_name: '火警3', // 事件名称
134 - eq_name: '烟感', // 设备名称
135 - eq_model: '感烟火灾探测器', // 设备型号
136 - eq_address: '2-1-25', // 回路地址号
137 - alert_type: '火警',
138 - datetime: '2021-12-22 16:39:42',
139 - type: 'fire',
140 - cctv_url: '', // 监控链接
141 - case_url:
142 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
143 - notice_url: '1', // 通知链接
144 - handle_url: '1', // 处理链接
145 - },
146 - {
147 - id: '0',
148 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
149 - name: '三慧楼楼顶',
150 - code: 'Y0218',
151 - event_name: '水警3', // 事件名称
152 - eq_name: '液位', // 设备名称
153 - eq_model: '传感器', // 设备型号
154 - eq_address: '1-1-64', // 回路地址号
155 - alert_type: '',
156 - alarm_num: '1.61m', // 报警侑
157 - set_num: '1.2m-1.6m', // 设定值
158 - datetime: '2021-12-22 16:39:42',
159 - type: 'water',
160 - cctv_url: '', // 监控链接
161 case_url: 34 case_url:
162 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接 35 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
163 notice_url: '1', // 通知链接 36 notice_url: '1', // 通知链接
...@@ -167,8 +40,8 @@ const testInfo = { ...@@ -167,8 +40,8 @@ const testInfo = {
167 window_type: 'warn', 40 window_type: 'warn',
168 }, 41 },
169 { 42 {
170 - name: '休息室', 43 + name: '三慧楼',
171 - position: [120.588012, 31.314519], 44 + position: [120.585574, 31.315843],
172 icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png', 45 icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
173 details: [ 46 details: [
174 { 47 {
...@@ -186,36 +59,7 @@ const testInfo = { ...@@ -186,36 +59,7 @@ const testInfo = {
186 datetime: '2021-12-22 16:39:42', 59 datetime: '2021-12-22 16:39:42',
187 type: 'water', 60 type: 'water',
188 cctv_url: '', // 监控链接 61 cctv_url: '', // 监控链接
189 - case_url: 62 + case_url: '', // 预案链接
190 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
191 - notice_url: '1', // 通知链接
192 - handle_url: '1', // 处理链接
193 - },
194 - ],
195 - window_type: 'warn',
196 - },
197 - {
198 - name: '罗汉堂',
199 - position: [120.587167, 31.314803],
200 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
201 - details: [
202 - {
203 - id: '0',
204 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
205 - name: '三慧楼楼顶',
206 - code: 'Y0218',
207 - event_name: '水警1', // 事件名称
208 - eq_name: '液位', // 设备名称
209 - eq_model: '传感器', // 设备型号
210 - eq_address: '1-1-64', // 回路地址号
211 - alert_type: '',
212 - alarm_num: '1.61m', // 报警侑
213 - set_num: '1.2m-1.6m', // 设定值
214 - datetime: '2021-12-22 16:39:42',
215 - type: 'water',
216 - cctv_url: '', // 监控链接
217 - case_url:
218 - 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
219 notice_url: '1', // 通知链接 63 notice_url: '1', // 通知链接
220 handle_url: '1', // 处理链接 64 handle_url: '1', // 处理链接
221 }, 65 },
......
...@@ -32,28 +32,33 @@ ...@@ -32,28 +32,33 @@
32 <div v-if="warn_info.type === 'water'">设定值：{{ warn_info.set_num }}</div> 32 <div v-if="warn_info.type === 'water'">设定值：{{ warn_info.set_num }}</div>
33 <div>报警时间：{{ warn_info.datetime }}</div> 33 <div>报警时间：{{ warn_info.datetime }}</div>
34 </div> 34 </div>
35 - <div v-if="warn_info.cctv_url" class="info-control"> 35 + <div v-if="warn_info.cctv_url" @click="goToWatch(warn_info.cctv_url)" class="info-control">
36 <div class="control-play"> 36 <div class="control-play">
37 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem" 37 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
38 color="#FFF" style="margin-top: 0.5rem;" /> 38 color="#FFF" style="margin-top: 0.5rem;" />
39 </div> 39 </div>
40 - <div @click="goTo(warn_info.cctv_url)">监控</div> 40 + <div>监控</div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 <div class="van-hairline--top warn-button-wrapper"> 44 <div class="van-hairline--top warn-button-wrapper">
45 - <div v-if="warn_info.case_url" @click="goToCase(warn_info.case_url)" style="text-align: center; margin-top: 1rem;"> 45 + <div v-if="warn_info.case_url" @click="goToCase(warn_info.case_url)"
46 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.25rem" color="#FFF" style="vertical-align: bottom;" />&nbsp; 46 + style="text-align: center; margin-top: 1rem;">
47 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.25rem" color="#FFF"
48 + style="vertical-align: bottom;" />&nbsp;
47 <span style="color: #AB8F57; font-size: 1rem;">预案</span> 49 <span style="color: #AB8F57; font-size: 1rem;">预案</span>
48 </div> 50 </div>
49 <div v-if="warn_span1" class="van-hairline--right f-line"></div> 51 <div v-if="warn_span1" class="van-hairline--right f-line"></div>
50 <div v-if="warn_info.notice_url" @click="goToList(warn_info.id)" style="text-align: center; margin-top: 1rem;"> 52 <div v-if="warn_info.notice_url" @click="goToList(warn_info.id)" style="text-align: center; margin-top: 1rem;">
51 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.25rem" color="#FFF" style="vertical-align: bottom;" />&nbsp; 53 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.25rem" color="#FFF"
54 + style="vertical-align: bottom;" />&nbsp;
52 <span style="color: #AB8F57; font-size: 1rem;">通知</span> 55 <span style="color: #AB8F57; font-size: 1rem;">通知</span>
53 </div> 56 </div>
54 <div v-if="warn_span2" class="van-hairline--right f-line"></div> 57 <div v-if="warn_span2" class="van-hairline--right f-line"></div>
55 - <div v-if="warn_info.handle_url" @click="goToHandle(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;"> 58 + <div v-if="warn_info.handle_url" @click="goToHandle(warn_info.handle_url)"
56 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.25rem" color="#FFF" style="vertical-align: bottom;" />&nbsp; 59 + style="text-align: center; margin-top: 1rem;">
60 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.25rem" color="#FFF"
61 + style="vertical-align: bottom;" />&nbsp;
57 <span style="color: #AB8F57; font-size: 1rem;">处理</span> 62 <span style="color: #AB8F57; font-size: 1rem;">处理</span>
58 </div> 63 </div>
59 </div> 64 </div>
...@@ -100,7 +105,7 @@ export default { ...@@ -100,7 +105,7 @@ export default {
100 mounted() { 105 mounted() {
101 }, 106 },
102 computed: { 107 computed: {
103 - warn_span1 () { 108 + warn_span1() {
104 let flag = false; 109 let flag = false;
105 if (this.warn_info.case_url) { 110 if (this.warn_info.case_url) {
106 if (this.warn_info.notice_url || this.warn_info.handle_url) { 111 if (this.warn_info.notice_url || this.warn_info.handle_url) {
...@@ -109,7 +114,7 @@ export default { ...@@ -109,7 +114,7 @@ export default {
109 } 114 }
110 return flag; 115 return flag;
111 }, 116 },
112 - warn_span2 () { 117 + warn_span2() {
113 let flag = false; 118 let flag = false;
114 if (this.warn_info.notice_url) { 119 if (this.warn_info.notice_url) {
115 if (this.warn_info.handle_url) { 120 if (this.warn_info.handle_url) {
...@@ -262,6 +267,12 @@ export default { ...@@ -262,6 +267,12 @@ export default {
262 // location.href = url; 267 // location.href = url;
263 // } 268 // }
264 }, 269 },
270 + goToWatch(url) {
271 + // this.show_popup = true;
272 + if (url) {
273 + location.href = url;
274 + }
275 + },
265 handleTitle(index) { 276 handleTitle(index) {
266 this.isActive = index; 277 this.isActive = index;
267 this.voice_pause() 278 this.voice_pause()
...@@ -451,9 +462,13 @@ export default { ...@@ -451,9 +462,13 @@ export default {
451 } 462 }
452 463
453 .warn-button-wrapper { 464 .warn-button-wrapper {
454 - margin-top: 1rem; display: flex; justify-content: space-around; 465 + margin-top: 1rem;
466 + display: flex;
467 + justify-content: space-around;
468 +
455 .f-line { 469 .f-line {
456 - text-align: center; margin-top: 1rem; 470 + text-align: center;
471 + margin-top: 1rem;
457 } 472 }
458 } 473 }
459 474
...@@ -465,5 +480,4 @@ export default { ...@@ -465,5 +480,4 @@ export default {
465 -ms-overflow-style: none; 480 -ms-overflow-style: none;
466 overflow: -moz-scrollbars-none; 481 overflow: -moz-scrollbars-none;
467 } 482 }
468 -
469 </style> 483 </style>
......
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-11 09:35:08 4 + * @LastEditTime: 2023-07-11 15:12:47
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -783,7 +783,7 @@ export default { ...@@ -783,7 +783,7 @@ export default {
783 // 点击后创建自定义信息窗口 783 // 点击后创建自定义信息窗口
784 this.setInfoWindowsWarn(item) 784 this.setInfoWindowsWarn(item)
785 // 把地图中心点设置为当前点击的标记点 785 // 把地图中心点设置为当前点击的标记点
786 - this.map.setZoomAndCenter(this.zoom, item.position); 786 + this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
787 // 787 //
788 this.show_nav_popup = false; 788 this.show_nav_popup = false;
789 // 禁止缩放 789 // 禁止缩放
......