<template>
|
<van-floating-panel id="panel" v-model:height="height" :anchors="anchors" :content-draggable="false"
|
:height-change="setPanelChange(height)">
|
<div class="boxContent">
|
<van-search v-model="searchTitle" placeholder="请输入搜索关键词" @focus="searchFocus" @input="setSearchInput"
|
@clear="setSearchInput" @search="onSearch"> </van-search>
|
<div class="boxMenu">
|
<van-cell-group>
|
<van-cell v-for="(item, index) in searchData" :key="index" size="large" @click="setCellItemClick(item)">
|
<div class="cellItem">
|
<div v-if="item.attributes.XMMC">{{ item.attributes.XMMC }}</div>
|
<div v-else-if="item.attributes.SWLYMC">{{ item.attributes.SWLYMC }}</div>
|
<div v-else-if="item.attributes.MC">{{ item.attributes.MC }}</div>
|
<div v-else-if="item.attributes.TDQLR">{{ item.attributes.TDQLR }}</div>
|
<div v-else></div>
|
<div class="cellLeft">
|
<sourceType :parentData="item.attributes.DL"></sourceType>
|
<div class="cellMore"></div>
|
</div>
|
</div>
|
</van-cell>
|
</van-cell-group>
|
</div>
|
<!-- <template #action>
|
<div class="searchButton"
|
@click="onClickButton">搜索</div>
|
</template> -->
|
</div>
|
</van-floating-panel>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, computed, shallowRef, watch } from 'vue';
|
import { getJsonData } from '../api/api.js';
|
import { useStore } from 'vuex';
|
import mapData from '../assets/js/mapData';
|
import mapMenu from '../assets/js/mapMenu.js';
|
import sourceType from './sourceType.vue';
|
import mapLayer from '../assets/js/mapLayer.js';
|
import { showToast } from 'vant';
|
const store = useStore();
|
const searchData = ref([]);
|
const searchTitle = ref('');
|
const devceType = ref(false);
|
const anchors = [90, Math.round(0.5 * window.innerHeight), window.innerHeight - 150];
|
const height = ref(anchors[0]);
|
// 监听键盘是否显示
|
const keyboard = ref(true);
|
const setSearchDataRest = () => {
|
height.value = anchors[0];
|
searchTitle.value = '';
|
searchData.value = mapData.searchData;
|
store.state.setSearchData = false;
|
};
|
const setSearchInput = e => {
|
var val = e.target.value;
|
if (keyboard.value) {
|
height.value = 320;
|
}
|
if (val) {
|
const obj = mapData.setSearchFliter(val);
|
if (obj.length > 0) {
|
searchData.value = obj;
|
}
|
} else {
|
height.value = anchors[0];
|
searchData.value = mapData.searchData;
|
}
|
};
|
const setPanelChange = res => {
|
// 手机虚拟键盘显示高度控制
|
if (keyboard.value) {
|
if (height.value > 320) {
|
height.value = 320;
|
}
|
}
|
};
|
const setCellItemClick = res => {
|
store.state.setCellItem = res;
|
const obj = res.geometry;
|
const judgeMentData = mapData.setJudgmentData(obj);
|
if (judgeMentData) {
|
mapData.setMqpJump({
|
x: obj.coordinates[0],
|
y: obj.coordinates[1]
|
});
|
mapLayer.getlocationEntity(res);
|
} else {
|
|
showToast('该资产缺少坐标！');
|
}
|
mapMenu.setMenuChange('details');
|
};
|
watch(
|
() => store.state.setSearchData,
|
(nVal, oVal) => {
|
if (nVal) {
|
setSearchDataRest();
|
}
|
}
|
);
|
const setKeyboardChange = res => {
|
keyboard.value = res;
|
};
|
const setKeyBoardStart = () => {
|
keyboard.value = false;
|
var winHeight = $(window).height(); //获取当前页面高度
|
$(window).resize(function () {
|
var thisHeight = $(window).height();
|
if (winHeight - thisHeight > 140) {
|
//键盘弹出
|
setKeyboardChange(true);
|
} else {
|
//键盘收起
|
setKeyboardChange(false);
|
}
|
});
|
};
|
onMounted(() => {
|
keyboard.value = false;
|
const userAgent = window.navigator.userAgent;
|
const isAndroid = /Android/.test(userAgent);
|
devceType.value = isAndroid ? true : false;
|
setKeyBoardStart();
|
setSearchDataRest();
|
});
|
</script>
|
|
<style scoped lang="less">
|
.searchButton {
|
color: rgba(53, 77, 110, 1);
|
}
|
|
.boxContent {
|
width: 100%;
|
height: 100%;
|
|
display: flex;
|
flex-direction: column;
|
}
|
|
.boxMenu {
|
flex: 1;
|
overflow: auto;
|
}
|
|
.cellItem {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
color: rgba(0, 0, 0, 1);
|
text-align: left;
|
|
.cellMore {
|
width: 21px;
|
height: 21px;
|
background: url('../assets/img/more.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.cellLeft {
|
display: flex;
|
align-items: center;
|
}
|
}
|
</style>
|
