CaiYuanYiTiHua/src/views/sys/exception/Converge/SearchComponent.vue

<template>
    <div class="search-container">
        <div class="search-input"> 
            <a-input placeholder="请输入图斑号或位置" v-model:value="keyword" allow-clear  @blur="onInputBlue"></a-input>
        </div>
        <div class="search-button" @click="searchArea">
            <img src="/public/statistical/search-btn.png" alt="">
        </div>
        <div class="search-result-container" v-if="showSearchResult">
            <div class="result-item" v-for="(item,index) in searchResult" @click="toPosition(item)">
                <div class="search-icon">
                    <img src="/public/statistical/search-icon.png" alt="">
                </div>
                <div class="level-0">{{item.id}}</div>
                <div class="level-1">{{item.county}}</div>
                <div class="level-2">{{item.street}}</div>
            </div>
            <a-empty v-if="searchResult.length == 0" />
        </div>
        <div class="filter-container">
            <div class="filter-name">{{currentFilter}}</div>
            <div class="filter-icon" @click="handlerChangeFilterOptions">
                <CaretDownOutlined />
            </div>
            <div class="filter-item-container" v-if="showFilterOptions">
                <div class="filter-item" v-for="(item,index) in filters" :key="index" @click="handlerCheckedFilter(item.name)">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref,onMounted,defineExpose,defineEmits,watch} from "vue";
import {CaretDownOutlined,CaretUpOutlined} from "@ant-design/icons-vue";
import axios from 'axios'
import { getLoadDroneCaseInfoDetail,getPolygonCenter } from '@/api/tiankongdi/index.ts';
const emits = defineEmits(["toPosition","handlerFilter"])
import { WktToGeojson } from "@/components/MapboxMaps/src/WktGeojsonTransform";
 async function toPosition(item){
    if(item.location){
        emits("toPosition",item);
    }else{
        let filter = "\"case_no\"=\'"+item.id+"\'";
        let point = await getPolygonCenter({tablename:"view_drone_shp_data",filter:filter})
        console.log(point);
        if(point.length>0){
            try{
                let geojson = WktToGeojson(point[0].centroid_point)
                item.location = geojson.coordinates;
                emits("toPosition",item);
            }catch(e){
                
            }
        }
    }
}
const searchResult = ref([
    {
        id:"FNJ132520107511158",
        county:"兰陵县",
        street:"鲁城镇"
    },{
        id:"FNJ132520107511158",
        county:"兰陵县",
        street:"鲁城镇"
    },{
        id:"FNJ132520107511158",
        county:"兰陵县",
        street:"鲁城镇"
    },{
        id:"FNJ132520107511158",
        county:"兰陵县",
        street:"鲁城镇"
    }
])

const filters = ref([
    {
        name:"全部"
    },
    {
        name:"违法",
    },{
        name:"合法",
    },{
        name:"其他",
    },{
        name:"补办手续",
    },{
        name:"拆除复耕",
    },
])

const showSearchResult = ref(false);
const showFilterOptions = ref(false);
const currentFilter = ref("全部")

function handlerChangeFilterOptions(){
    showFilterOptions.value = !showFilterOptions.value
}

function handlerCheckedFilter(item){
    currentFilter.value = item
    showFilterOptions.value = false;
    emits("handlerFilter",item);
}

// 
onMounted(()=>{
    
})

function onInputFocus(){
    showSearchResult.value = true;
}

function onInputBlue(){
    showSearchResult.value = false;
}

const keyword = ref("");

async function searchArea() {

    if(keyword.value.match(/^-?\d+$/)){
        let res = await getLoadDroneCaseInfoDetail({caseNo:keyword.value,page:1,limit:10});
        searchResult.value = [];
        res?.items?.forEach((item,index)=>{
            let obj = {
                id:item.caseno,
                county:item.countyname,
                street:item.streetname,
                location:null
            }
            searchResult.value.push(obj);
        });
        showSearchResult.value = true;
    }else{
        // 地名搜索
        axios.get(
            "https://restapi.amap.com/v5/place/text?&key=ee7f561fae9249aeb971bcc661083438&keywords="+keyword.value+"&region=371300&citylimit=true&page_num=1&page_size=10"
            ).then((res) => {
            if (res.data.info == "OK") {
                searchResult.value = [];
                res.data?.pois?.forEach((item,index)=>{
                    let obj = {
                        id:item.name,
                        county:item.cityname,
                        street:item.adname,
                        location:item.location?.split(",")
                    }
                    searchResult.value.push(obj);
                })
                showSearchResult.value = true;
            }
        });
    }

}

watch(()=>keyword.value,
(newVal)=>{
    if(!newVal){
        showSearchResult.value = false;
        searchResult.value = []
    }
})
// 抛出函数
defineExpose({

});

</script>

<style type="less" scoped>
.search-container{
    width:100%;
    height:100%;
    display:flex;
    background-image: url("/public/statistical/search-bg.png");
    background-size:100% 100%;
    border-top-right-radius: 8px;
    position:relative;
    .search-input{
        flex:auto;
        height:100%;
    }
    .search-button{
        width:62px;
        height: 36px;
        border-top-right-radius: 8px;
        background:#0A62C6;
        text-align: center;
        line-height: 36px;
        cursor:pointer;
    }
    .search-result-container{
        width:100%;
        position:absolute;
        top:36px;
        left:0px;
        background:rgba(11, 39, 68,0.8);
        border:1px solid #0A62C6;
        border-top:0px;
        padding:8px 0px;
        .result-item{
            width:100%;
            height:38px;
            color:#E1ECF8;
            display:flex;
            line-height:38px;
            padding:0px 12px;
            font-size:14px;
            .search-icon{
                width:28px;
                height:36px;
            }
            .level-0{
                max-width:180px;
                overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
            }
            .level-1{
                margin:0px 6px;
            }
            &:hover{
                cursor:pointer;
                background:#0F3863;
            }
        }
    }

    .filter-container{
        position:absolute;
        top:0px;
        right:-120px;
        width:100px;
        border-radius: 6px;
        height:36px;
        background:#0A62C6;
        line-height: 36px;
        color:#fff;
        display:flex;
        cursor:pointer;
        .filter-name{
            width:70px;
            text-align:center;
            padding:0px 2px;
            font-size:14px;
            position:relative;
            &::after{
                content:"";
                width:2px;
                height: 22px;
                position:absolute;
                top:7px;
                right:0px;
                background:#0751A5;
            }
        }
        .filter-icon{
            width:30px;
            line-height:38px;
            text-align: center;
        }
        .filter-item-container{
            width:100%;
            position:absolute;
            background:rgba(11, 39, 68,0.8);
            border:1px solid #0A62C6;
            top:36px;
            left:0px;
            .filter-item{
                height:36px;
                text-align:center;
                &:hover{
                    cursor:pointer;
                    background:#0F3863;
                }
            }
        }
    }
}

::v-deep .mapboxgl-ctrl-logo{
    display: none!important;
}

::v-deep .ant-input{
    background:none;
    border:0px;
    color:#5E90E1;
    line-height:30px;
    text-indent:8px;
    outline: none;
    &::placeholder {
        color: #5E90E1;
      }
}


::v-deep .ant-input-affix-wrapper{
    background:none;
    border:0px;
    color:#5E90E1;
    line-height:30px;
    text-indent:8px;
    outline: none;

}

::v-deep .anticon svg{
    color:#fff!important;
}

::v-deep .ant-input::placeholder {
    color: #5E90E1;
  }

::v-deep .ant-empty-description{
    color:#fff;
}
</style>