Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
547467b1 1 parent 0ce4aa9a

细节调整

Inline Side-by-side
Showing 5 changed files with 304 additions and 83 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 13:24:19 4 + * @LastEditTime: 2023-07-10 15:12:29
5 * @FilePath: /map-demo/index.html 5 * @FilePath: /map-demo/index.html
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -19,8 +19,11 @@ ...@@ -19,8 +19,11 @@
19 <script type="module" src="/src/main.js"></script> 19 <script type="module" src="/src/main.js"></script>
20 <script type="text/javascript"> 20 <script type="text/javascript">
21 window._AMapSecurityConfig = { 21 window._AMapSecurityConfig = {
22 - serviceHost:'https://oa-dev.onwall.cn/_AMapService', 22 + securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
23 } 23 }
24 + // window._AMapSecurityConfig = {
25 + // serviceHost:'https://oa-dev.onwall.cn/_AMapService',
26 + // }
24 </script> 27 </script>
25 <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>
26 </body> 29 </body>
......
1 +const testInfo = {
2 + id: 'warn',
3 + name: '预警',
4 + icon: [
5 + 'https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E8%AD%A602.png',
6 + 'https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E8%AD%A601.png',
7 + ],
8 + list: [
9 + {
10 + name: '厢房',
11 + position: [120.58704, 31.313773],
12 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
13 + details: [
14 + {
15 + id: '0',
16 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
17 + name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
18 + code: 'Y0218',
19 + event_name: '火警1', // 事件名称
20 + eq_name: '烟感', // 设备名称
21 + eq_model: '感烟火灾探测器', // 设备型号
22 + eq_address: '2-1-25', // 回路地址号
23 + alert_type: '火警',
24 + datetime: '2021-12-22 16:39:42',
25 + type: 'fire',
26 + cctv_url: '', // 监控链接
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:
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', // 预案链接
163 + notice_url: '1', // 通知链接
164 + handle_url: '1', // 处理链接
165 + },
166 + ],
167 + window_type: 'warn',
168 + },
169 + {
170 + name: '休息室',
171 + position: [120.588012, 31.314519],
172 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
173 + details: [
174 + {
175 + id: '0',
176 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
177 + name: '三慧楼楼顶',
178 + code: 'Y0218',
179 + event_name: '水警1', // 事件名称
180 + eq_name: '液位', // 设备名称
181 + eq_model: '传感器', // 设备型号
182 + eq_address: '1-1-64', // 回路地址号
183 + alert_type: '',
184 + alarm_num: '1.61m', // 报警侑
185 + set_num: '1.2m-1.6m', // 设定值
186 + datetime: '2021-12-22 16:39:42',
187 + type: 'water',
188 + cctv_url: '', // 监控链接
189 + 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', // 通知链接
220 + handle_url: '1', // 处理链接
221 + },
222 + ],
223 + window_type: 'warn',
224 + },
225 + ],
226 +};
227 +
228 +export default testInfo;
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
8 <span>{{ item.name }}</span> 8 <span>{{ item.name }}</span>
9 </div> 9 </div>
10 </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: 1.5rem;"> 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;" /> 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;" /> 13 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
14 - </div> 14 + </div> -->
15 <div v-for="(item, index) in info?.details" :key="index"> 15 <div v-for="(item, index) in info?.details" :key="index">
16 <div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div> 16 <div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
17 <div v-if="isActive === index && item.audio" class="info-control"> 17 <div v-if="isActive === index && item.audio" class="info-control">
...@@ -163,7 +163,7 @@ export default { ...@@ -163,7 +163,7 @@ export default {
163 // 滚动状态 163 // 滚动状态
164 this.nav_scroll = false; 164 this.nav_scroll = false;
165 // 清空播放计时 165 // 清空播放计时
166 - this.play_timer = null; 166 + clearInterval(this.play_timer)
167 }, 167 },
168 showDetail() { 168 showDetail() {
169 this.show_popup = true; 169 this.show_popup = true;
...@@ -216,6 +216,7 @@ export default { ...@@ -216,6 +216,7 @@ export default {
216 this.audio.pause(); 216 this.audio.pause();
217 this.is_play = false; 217 this.is_play = false;
218 this.changeAudioStatus('pause'); 218 this.changeAudioStatus('pause');
219 + clearInterval(this.play_timer)
219 }, 220 },
220 goToUrl(url) { 221 goToUrl(url) {
221 location.href = this.info.details[this.isActive].url; 222 location.href = this.info.details[this.isActive].url;
...@@ -223,10 +224,12 @@ export default { ...@@ -223,10 +224,12 @@ export default {
223 handleTitle (index) { 224 handleTitle (index) {
224 this.isActive = index; 225 this.isActive = index;
225 this.voice_pause() 226 this.voice_pause()
226 - // 标题滚动 227 + // // 标题滚动
227 - if (index === 2 && this.info.details.length > 3) { 228 + // if (index === 2 && this.info.details.length > 3) {
228 - this.handleNavScroll() 229 + // this.handleNavScroll()
229 - } 230 + // }
231 + clearInterval(this.play_timer)
232 + this.play_time = this.info.details[this.isActive].audio_time;
230 }, 233 },
231 handleNavScroll () { // 滚动标题 234 handleNavScroll () { // 滚动标题
232 this.nav_scroll = !this.nav_scroll; 235 this.nav_scroll = !this.nav_scroll;
...@@ -376,7 +379,7 @@ export default { ...@@ -376,7 +379,7 @@ export default {
376 text-align: left; 379 text-align: left;
377 380
378 .item { 381 .item {
379 - width: 33.333%; 382 + width: 30%;
380 flex-shrink: 0; 383 flex-shrink: 0;
381 color: #888; 384 color: #888;
382 font-size: 1.1rem; 385 font-size: 1.1rem;
......
...@@ -3,25 +3,36 @@ ...@@ -3,25 +3,36 @@
3 <div class="info-window-warn-wrapper"> 3 <div class="info-window-warn-wrapper">
4 <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }"> 4 <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
5 <div class="hideScrollBar info-window-title"> 5 <div class="hideScrollBar info-window-title">
6 - <div class="checked item"> 6 + <!-- <div class="checked item">
7 <span>{{ warn_info.name }}</span> 7 <span>{{ warn_info.name }}</span>
8 </div> 8 </div>
9 <div style="width: 66.66%; text-align: right; margin-bottom: 0.75rem; display: inline-block; color: #888; font-size: 0.9rem;"> 9 <div style="width: 66.66%; text-align: right; margin-bottom: 0.75rem; display: inline-block; color: #888; font-size: 0.9rem;">
10 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B8@2x.png" size="1.25rem" 10 <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B8@2x.png" size="1.25rem"
11 color="#FFF" style="vertical-align: sub;" />&nbsp; <span>烟感异常</span> 11 color="#FFF" style="vertical-align: sub;" />&nbsp; <span>烟感异常</span>
12 + </div> -->
13 + <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
14 + :class="[isActive === index ? 'checked' : '', 'item']">
15 + <span>
16 + {{ item.event_name }}
17 + </span>
12 </div> 18 </div>
13 </div> 19 </div>
20 + <!-- <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1rem;">
21 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
22 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
23 + </div> -->
14 <div> 24 <div>
15 <div style="width: 80%; float: left; color: #888; line-height: 1.75;"> 25 <div style="width: 80%; float: left; color: #888; line-height: 1.75;">
16 - <div>编号: {{ warn_info.code }}</div> 26 + <div>建筑: {{ warn_info.name }}</div>
17 - <div>状态: {{ warn_info.status }}</div> 27 + <div>设备名称：{{ warn_info.eq_name }}</div>
18 - <div> 28 + <div>设备型号：{{ warn_info.eq_model }}</div>
19 - <!-- <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%97%B6%E9%97%B4@2x.png" size="1.5rem" 29 + <div>回路地址号：{{ warn_info.eq_address }}</div>
20 - color="#FFF" style="vertical-align: sub;" /> --> 30 + <div v-if="warn_info.type === 'fire'">类型：{{ warn_info.alert_type }}</div>
21 - {{ warn_info.datetime }} 31 + <div v-if="warn_info.type === 'water'">报警值：{{ warn_info.alarm_num }}</div>
22 - </div> 32 + <div v-if="warn_info.type === 'water'">设定值：{{ warn_info.set_num }}</div>
33 + <div>报警时间：{{ warn_info.datetime }}</div>
23 </div> 34 </div>
24 - <div class="info-control"> 35 + <div v-if="warn_info.cctv_url" class="info-control">
25 <div class="control-play"> 36 <div class="control-play">
26 <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"
27 color="#FFF" style="margin-top: 0.5rem;" /> 38 color="#FFF" style="margin-top: 0.5rem;" />
...@@ -31,17 +42,17 @@ ...@@ -31,17 +42,17 @@
31 </div> 42 </div>
32 </div> 43 </div>
33 <div class="van-hairline--top warn-button-wrapper"> 44 <div class="van-hairline--top warn-button-wrapper">
34 - <div v-if="warn_info.case_url" @click="goTo(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)" style="text-align: center; margin-top: 1rem;">
35 <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 <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;
36 <span style="color: #AB8F57; font-size: 1rem;">预案</span> 47 <span style="color: #AB8F57; font-size: 1rem;">预案</span>
37 </div> 48 </div>
38 <div v-if="warn_span1" class="van-hairline--right f-line"></div> 49 <div v-if="warn_span1" class="van-hairline--right f-line"></div>
39 - <div v-if="warn_info.notice_url" @click="goTo(warn_info.notice_url)" style="text-align: center; margin-top: 1rem;"> 50 + <div v-if="warn_info.notice_url" @click="goToList(warn_info.id)" style="text-align: center; margin-top: 1rem;">
40 <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; 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;
41 <span style="color: #AB8F57; font-size: 1rem;">通知</span> 52 <span style="color: #AB8F57; font-size: 1rem;">通知</span>
42 </div> 53 </div>
43 <div v-if="warn_span2" class="van-hairline--right f-line"></div> 54 <div v-if="warn_span2" class="van-hairline--right f-line"></div>
44 - <div v-if="warn_info.handle_url" @click="goTo(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;"> 55 + <div v-if="warn_info.handle_url" @click="goToHandle(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;">
45 <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; 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;
46 <span style="color: #AB8F57; font-size: 1rem;">处理</span> 57 <span style="color: #AB8F57; font-size: 1rem;">处理</span>
47 </div> 58 </div>
...@@ -232,8 +243,15 @@ export default { ...@@ -232,8 +243,15 @@ export default {
232 this.audio.pause(); 243 this.audio.pause();
233 this.is_play = false; 244 this.is_play = false;
234 }, 245 },
235 - goTo(url) { 246 + goToCase(url) {
236 - console.warn(url); 247 + if (url) {
248 + location.href = url;
249 + }
250 + },
251 + goToList(id) {
252 + console.warn(id);
253 + },
254 + goToHandle(url) {
237 // if (url) { 255 // if (url) {
238 // location.href = url; 256 // location.href = url;
239 // } 257 // }
...@@ -241,17 +259,18 @@ export default { ...@@ -241,17 +259,18 @@ export default {
241 handleTitle(index) { 259 handleTitle(index) {
242 this.isActive = index; 260 this.isActive = index;
243 this.voice_pause() 261 this.voice_pause()
244 - // 标题滚动 262 + // // 标题滚动
245 - if (index === 2 && this.info.details.length > 3) { 263 + // if (index === 2 && this.info.details.length > 3) {
246 - this.handleNavScroll() 264 + // this.handleNavScroll()
247 - } 265 + // }
266 + this.warn_info = this.info.details[index]
248 }, 267 },
249 handleNavScroll() { // 滚动标题 268 handleNavScroll() { // 滚动标题
250 this.nav_scroll = !this.nav_scroll; 269 this.nav_scroll = !this.nav_scroll;
251 if (this.nav_scroll) { 270 if (this.nav_scroll) {
252 setTimeout(() => { 271 setTimeout(() => {
253 $('.info-window-title').animate({ 272 $('.info-window-title').animate({
254 - scrollLeft: $('.info-window-title').outerWidth() 273 + scrollLeft: $('.info-window-title .item').outerWidth() * 3
255 }, 1000); 274 }, 1000);
256 }, 100); 275 }, 100);
257 } else { 276 } else {
...@@ -387,7 +406,7 @@ export default { ...@@ -387,7 +406,7 @@ export default {
387 text-align: left; 406 text-align: left;
388 407
389 .item { 408 .item {
390 - width: 33.333%; 409 + width: 30%;
391 flex-shrink: 0; 410 flex-shrink: 0;
392 color: #888; 411 color: #888;
393 font-size: 1.1rem; 412 font-size: 1.1rem;
...@@ -432,4 +451,13 @@ export default { ...@@ -432,4 +451,13 @@ export default {
432 } 451 }
433 } 452 }
434 453
454 +.hideScrollBar::-webkit-scrollbar {
455 + display: none;
456 +}
457 +
458 +.hideScrollBar {
459 + -ms-overflow-style: none;
460 + overflow: -moz-scrollbars-none;
461 +}
462 +
435 </style> 463 </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-10 13:31:34 4 + * @LastEditTime: 2023-07-10 16:38:30
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -92,6 +92,7 @@ ...@@ -92,6 +92,7 @@
92 // import { mapState } from 'vuex' 92 // import { mapState } from 'vuex'
93 import coord from '@/common/map_data' 93 import coord from '@/common/map_data'
94 import map_max from '@/common/max' 94 import map_max from '@/common/max'
95 +import map_alert from '@/common/alert'
95 import _ from 'lodash'; 96 import _ from 'lodash';
96 import $ from 'jquery'; 97 import $ from 'jquery';
97 //引入定义的信息窗组件 98 //引入定义的信息窗组件
...@@ -234,55 +235,7 @@ export default { ...@@ -234,55 +235,7 @@ export default {
234 const code = this.$route.query.id; 235 const code = this.$route.query.id;
235 // const code = '362800'; 236 // const code = '362800';
236 const { data } = await mapAPI({i: code}); 237 const { data } = await mapAPI({i: code});
237 - const temp = { 238 + data.list = data.list.concat(map_alert);
238 - id: 'warn',
239 - name: '预警',
240 - icon: [
241 - 'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
242 - 'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
243 - ],
244 - list: [
245 - {
246 - name: '预警演示1',
247 - position: [120.58704, 31.313773],
248 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
249 - details: [
250 - {
251 - name: '预警演示',
252 - code: 'Y0218',
253 - note: '烟感异常',
254 - status: '异常',
255 - datetime: '2021-12-22 16:39:42',
256 - cctv_url: '', // 监控链接
257 - case_url: '1', // 预案链接
258 - notice_url: '1', // 通知链接
259 - handle_url: '1', // 处理链接
260 - },
261 - ],
262 - window_type: 'warn',
263 - },
264 - {
265 - name: '预警演示2',
266 - position: [120.588012, 31.314519],
267 - icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
268 - details: [
269 - {
270 - name: '预警演示',
271 - code: 'Y0218',
272 - note: '烟感异常',
273 - status: '异常',
274 - datetime: '2021-12-22 16:39:42',
275 - cctv_url: '', // 监控链接
276 - case_url: '1', // 预案链接
277 - notice_url: '1', // 通知链接
278 - handle_url: '1', // 处理链接
279 - },
280 - ],
281 - window_type: 'warn',
282 - },
283 - ],
284 - }
285 - data.list = data.list.concat(temp);
286 this.navBarList = data.list; // 底部导航条 239 this.navBarList = data.list; // 底部导航条
287 this.mapTiles = data.level; // 获取图层 240 this.mapTiles = data.level; // 获取图层
288 this.navKey = data.list[0]['id']; // 默认选中 第一个 id 241 this.navKey = data.list[0]['id']; // 默认选中 第一个 id
...@@ -380,12 +333,18 @@ export default { ...@@ -380,12 +333,18 @@ export default {
380 const entity_info = this.navBarList.filter(item => item.id === id)[0]['list']; 333 const entity_info = this.navBarList.filter(item => item.id === id)[0]['list'];
381 this.markerSum = []; 334 this.markerSum = [];
382 _.each(entity_info, (x, i) => { 335 _.each(entity_info, (x, i) => {
336 + let marker_icon = '';
337 + if (entity_info[i].window_type === 'warn' && entity_info[i].details.length === 1) { // 如果是预警类型并且内部预警项目只有一个取details第一个icon
338 + marker_icon = entity_info[i].details[0]['icon'];
339 + } else {
340 + marker_icon = entity_info[i].icon;
341 + }
383 var marker = new AMap.ElasticMarker({ 342 var marker = new AMap.ElasticMarker({
384 position: entity_info[i].position, 343 position: entity_info[i].position,
385 zooms: [17, 19], 344 zooms: [17, 19],
386 styles: [{ 345 styles: [{
387 icon: { 346 icon: {
388 - img: entity_info[i].icon, 347 + img: marker_icon, // 标记点图标
389 size: [28, 28], // 可见区域的大小 348 size: [28, 28], // 可见区域的大小
390 anchor: 'bottom-center', // 锚点 349 anchor: 'bottom-center', // 锚点
391 fitZoom: 14, // 最合适的级别 350 fitZoom: 14, // 最合适的级别
......