Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5f51a51b 1 parent 4e9f9796

fix 图层搜索功能新增

Inline Side-by-side
Showing 3 changed files with 36 additions and 12 deletions
......@@ -209,7 +209,7 @@ button:focus {
.levels {
width: 90vmin;
height: 64vmin;
margin: -32vmin 0 0 -40vmin;
margin: -7rem 0 0 -40vmin;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform-style: preserve-3d;
......@@ -362,7 +362,7 @@ button:focus {
.level.level--current {
-webkit-transform: translateZ(15vmin) rotate3d(0,0,1,20deg);
/* go to center */
transform: translateZ(-15vmin) rotate3d(0,0,1,20deg);
transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
}
/* Navigation classes */
......
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-04 16:00:11
* @LastEditTime: 2023-08-04 16:57:15
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -79,11 +79,11 @@
<van-popup v-model:show="show_search_popup" position="right" :overlay="true"
:style="{ height: '100%', width: '80%', background: '#FFF' }">
<div style="background-color: #F7f8fa; padding: 1rem;">
<van-field v-model="search_value" placeholder="请输入搜索关键词" style="border-radius: 5px; padding: 0.5rem 1rem;" />
<van-field v-model="search_value" @update:model-value="onSearchUpdate" placeholder="请输入搜索关键词" style="border-radius: 5px; padding: 0.5rem 1rem;" />
</div>
<div v-for="(item, index) in search_list" :key="index" class="search_box">
<div v-for="(item, index) in search_list" :key="index" v-show="item.show" class="search_box">
<div class="search_box_title">{{ item.title }}</div>
<van-row v-for="(x, idx) in item.list" :key="idx" @click="onSearchRow(x.space)"
<van-row v-show="x.show" v-for="(x, idx) in item.list" :key="idx" @click="onSearchRow(x.space)"
style="color: #aaa; margin-bottom: 0.5rem;">
<van-col span="20">{{ x.text }}</van-col>
<van-col span="4" style="text-align: right;">{{ x.floor }}</van-col>
......@@ -116,14 +116,17 @@ export default {
{
space: 1.01,
text: '101～110室',
floor: 'L1'
floor: 'L1',
show: true,
},
{
space: 1.02,
text: '111～119室',
floor: 'L1'
floor: 'L1',
show: true,
},
],
show: true
},
{
title: '2-客房',
......@@ -131,14 +134,17 @@ export default {
{
space: 2.01,
text: '201～210室',
floor: 'L2'
floor: 'L2',
show: true,
},
{
space: 2.02,
text: '211～219室',
floor: 'L2'
floor: 'L2',
show: true,
},
],
show: true
},
]
}
......@@ -227,6 +233,24 @@ export default {
this.popup_title = item?.affix?.title;
this.popup_content = item?.affix?.content;
},
onSearchUpdate () {
this.search_list.forEach((item) => {
item.list.forEach((x) => {
if (x.text.indexOf(this.search_value) >= 0) {
x.show = true;
} else {
x.show = false;
}
});
// 如果子项里面都为空，隐藏整个项
let show_num = item.list.filter((x) => x.show === true);
if (show_num.length) {
item.show = true;
} else {
item.show = false;
}
});
}
}
}
</script>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-04 15:34:12
* @LastEditTime: 2023-08-04 16:59:15
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
......@@ -277,7 +277,7 @@ export default {
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
],
show_floor_popup: true,
show_floor_popup: false,
}
},
async mounted() {
......