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
/*
* @Date: 2023-06-30 16:48:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-04 17:26:20
* @LastEditTime: 2023-07-05 10:52:36
* @FilePath: /map-demo/src/common/max.js
* @Description: 文件描述
*/
......@@ -472,7 +472,7 @@ const testInfo = [
],
entity_info: [
{
name: '预警演示',
name: '预警演示1',
position: [120.58704, 31.313773],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
......@@ -490,6 +490,25 @@ const testInfo = [
],
window_type: 'warn',
},
{
name: '预警演示2',
position: [120.588012, 31.314519],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
name: '预警演示',
code: 'Y0218',
note: '烟感异常',
status: '异常',
datetime: '2021-12-22 16:39:42',
cctv_url: '', // 监控链接
case_url: '1', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
],
window_type: 'warn',
},
],
},
];
......
......@@ -30,22 +30,19 @@
</div>
</div>
</div>
<div class="van-hairline--top" style="margin-top: 1rem; display: flex; justify-content: space-around;">
<div class="van-hairline--top warn-button-wrapper">
<div v-if="warn_info.case_url" @click="goTo(warn_info.case_url)" style="text-align: center; margin-top: 1rem;">
<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;
<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;
<span style="color: #AB8F57; font-size: 1rem;">预案</span>
</div>
<div v-if="warn_span1" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div>
<div v-if="warn_span1" class="van-hairline--right f-line"></div>
<div v-if="warn_info.notice_url" @click="goTo(warn_info.notice_url)" style="text-align: center; margin-top: 1rem;">
<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;
<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;
<span style="color: #AB8F57; font-size: 1rem;">通知</span>
</div>
<div v-if="warn_span2" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div>
<div v-if="warn_span2" class="van-hairline--right f-line"></div>
<div v-if="warn_info.handle_url" @click="goTo(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;">
<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;
<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;
<span style="color: #AB8F57; font-size: 1rem;">处理</span>
</div>
</div>
......@@ -93,14 +90,22 @@ export default {
},
computed: {
warn_span1 () {
const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url]
const count = raw.filter(item => item)
return count.length > 1 ;
let flag = false;
if (this.warn_info.case_url) {
if (this.warn_info.notice_url || this.warn_info.handle_url) {
flag = true
}
}
return flag;
},
warn_span2 () {
const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url]
const count = raw.filter(item => item)
return count.length > 2;
let flag = false;
if (this.warn_info.notice_url) {
if (this.warn_info.handle_url) {
flag = true
}
}
return flag;
},
},
watch: {
......@@ -413,4 +418,11 @@ export default {
box-shadow: none;
}
.warn-button-wrapper {
margin-top: 1rem; display: flex; justify-content: space-around;
.f-line {
text-align: center; margin-top: 1rem;
}
}
</style>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-04 16:47:51
* @LastEditTime: 2023-07-05 15:43:05
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -302,6 +302,7 @@ export default {
},
setNavLayer({ key }, index) { // 选择地图图层显示
this.isActive = index;
this.navList = map_max.filter(item => item.key === key)[0]['entity_info']; // 返回默认选中项的实体信息
this.removeLayer();
this.loadMaker(key);
this.closeInfoWindow();
......@@ -310,7 +311,7 @@ export default {
this.map.setZoom(this.defaultZoom);
this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
}, 100);
this.removeNavRoute()
this.removeNavRoute();
},
loadMaker (key) {
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
......