Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6d62a691 1 parent b7e8805a

fix 底部列表切换更新修复，预警样式案例新增，预警组建显示条件优化

Inline Side-by-side
Showing 3 changed files with 51 additions and 19 deletions
1 /* 1 /*
2 * @Date: 2023-06-30 16:48:58 2 * @Date: 2023-06-30 16:48:58
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-04 17:26:20 4 + * @LastEditTime: 2023-07-05 10:52:36
5 * @FilePath: /map-demo/src/common/max.js 5 * @FilePath: /map-demo/src/common/max.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -472,7 +472,7 @@ const testInfo = [ ...@@ -472,7 +472,7 @@ const testInfo = [
472 ], 472 ],
473 entity_info: [ 473 entity_info: [
474 { 474 {
475 - name: '预警演示', 475 + name: '预警演示1',
476 position: [120.58704, 31.313773], 476 position: [120.58704, 31.313773],
477 icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png', 477 icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
478 details: [ 478 details: [
...@@ -490,6 +490,25 @@ const testInfo = [ ...@@ -490,6 +490,25 @@ const testInfo = [
490 ], 490 ],
491 window_type: 'warn', 491 window_type: 'warn',
492 }, 492 },
493 + {
494 + name: '预警演示2',
495 + position: [120.588012, 31.314519],
496 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
497 + details: [
498 + {
499 + name: '预警演示',
500 + code: 'Y0218',
501 + note: '烟感异常',
502 + status: '异常',
503 + datetime: '2021-12-22 16:39:42',
504 + cctv_url: '', // 监控链接
505 + case_url: '1', // 预案链接
506 + notice_url: '1', // 通知链接
507 + handle_url: '1', // 处理链接
508 + },
509 + ],
510 + window_type: 'warn',
511 + },
493 ], 512 ],
494 }, 513 },
495 ]; 514 ];
......
...@@ -30,22 +30,19 @@ ...@@ -30,22 +30,19 @@
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 - <div class="van-hairline--top" style="margin-top: 1rem; display: flex; justify-content: space-around;"> 33 + <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;"> 34 <div v-if="warn_info.case_url" @click="goTo(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" 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;
36 - style="vertical-align: bottom;" />&nbsp;
37 <span style="color: #AB8F57; font-size: 1rem;">预案</span> 36 <span style="color: #AB8F57; font-size: 1rem;">预案</span>
38 </div> 37 </div>
39 - <div v-if="warn_span1" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div> 38 + <div v-if="warn_span1" class="van-hairline--right f-line"></div>
40 <div v-if="warn_info.notice_url" @click="goTo(warn_info.notice_url)" style="text-align: center; margin-top: 1rem;"> 39 <div v-if="warn_info.notice_url" @click="goTo(warn_info.notice_url)" style="text-align: center; margin-top: 1rem;">
41 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.25rem" color="#FFF" 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;
42 - style="vertical-align: bottom;" />&nbsp;
43 <span style="color: #AB8F57; font-size: 1rem;">通知</span> 41 <span style="color: #AB8F57; font-size: 1rem;">通知</span>
44 </div> 42 </div>
45 - <div v-if="warn_span2" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div> 43 + <div v-if="warn_span2" class="van-hairline--right f-line"></div>
46 <div v-if="warn_info.handle_url" @click="goTo(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;"> 44 <div v-if="warn_info.handle_url" @click="goTo(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;">
47 - <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.25rem" color="#FFF" 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;
48 - style="vertical-align: bottom;" />&nbsp;
49 <span style="color: #AB8F57; font-size: 1rem;">处理</span> 46 <span style="color: #AB8F57; font-size: 1rem;">处理</span>
50 </div> 47 </div>
51 </div> 48 </div>
...@@ -93,14 +90,22 @@ export default { ...@@ -93,14 +90,22 @@ export default {
93 }, 90 },
94 computed: { 91 computed: {
95 warn_span1 () { 92 warn_span1 () {
96 - const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url] 93 + let flag = false;
97 - const count = raw.filter(item => item) 94 + if (this.warn_info.case_url) {
98 - return count.length > 1 ; 95 + if (this.warn_info.notice_url || this.warn_info.handle_url) {
96 + flag = true
97 + }
98 + }
99 + return flag;
99 }, 100 },
100 warn_span2 () { 101 warn_span2 () {
101 - const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url] 102 + let flag = false;
102 - const count = raw.filter(item => item) 103 + if (this.warn_info.notice_url) {
103 - return count.length > 2; 104 + if (this.warn_info.handle_url) {
105 + flag = true
106 + }
107 + }
108 + return flag;
104 }, 109 },
105 }, 110 },
106 watch: { 111 watch: {
...@@ -413,4 +418,11 @@ export default { ...@@ -413,4 +418,11 @@ export default {
413 box-shadow: none; 418 box-shadow: none;
414 } 419 }
415 420
421 +.warn-button-wrapper {
422 + margin-top: 1rem; display: flex; justify-content: space-around;
423 + .f-line {
424 + text-align: center; margin-top: 1rem;
425 + }
426 +}
427 +
416 </style> 428 </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-04 16:47:51 4 + * @LastEditTime: 2023-07-05 15:43:05
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -302,6 +302,7 @@ export default { ...@@ -302,6 +302,7 @@ export default {
302 }, 302 },
303 setNavLayer({ key }, index) { // 选择地图图层显示 303 setNavLayer({ key }, index) { // 选择地图图层显示
304 this.isActive = index; 304 this.isActive = index;
305 + this.navList = map_max.filter(item => item.key === key)[0]['entity_info']; // 返回默认选中项的实体信息
305 this.removeLayer(); 306 this.removeLayer();
306 this.loadMaker(key); 307 this.loadMaker(key);
307 this.closeInfoWindow(); 308 this.closeInfoWindow();
...@@ -310,7 +311,7 @@ export default { ...@@ -310,7 +311,7 @@ export default {
310 this.map.setZoom(this.defaultZoom); 311 this.map.setZoom(this.defaultZoom);
311 this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter); 312 this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
312 }, 100); 313 }, 100);
313 - this.removeNavRoute() 314 + this.removeNavRoute();
314 }, 315 },
315 loadMaker (key) { 316 loadMaker (key) {
316 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 317 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
......