saber-community/src/components/3DMap/POIService.vue

<template>
  <dv-border-box-7 ref="container" :color="borderColor"  id="container" backgroundColor="rgba(23,65,72,0.5)" class="full">
    <div class="full center">
      <avue-input style="border-color: transparent;width: 75%" v-model="searchText" placeholder="请输入关键字"></avue-input>
      <div style="width: 25%;height: 100%;" class="center">
        <el-button @click="handleSearch" size="mini" style="font-size: 10px;background: rgba(255,255,255,0.7);color: #565656" class="click" icon="el-icon-search" ></el-button>
      </div>
    </div>
   <dv-border-box-10 ref="resultBorder" :color="borderColor" backgroundColor="rgba(23,65,72,0.7)" id="resultPanel" v-show="resultPanel" >
     <div v-if="resultType==1||resultType==2" style="width: 100%;height: 70px;color: #dddddd;font-size: 14px;font-style: italic;" class="center">
       <div class="result full center">
         {{resultType==1? '请输入关键字进行搜索 🔍' : '没有搜索到相关内容'}}
         <div class="center" style="cursor: pointer;text-decoration-line: underline;width: 70px" @click="resultPanel=false">关闭</div>
       </div>
     </div>
     <div v-if="resultType==3" style="width: 100%;height: 500px;color: white">
        <loading v-if="loading"></loading>
       <div class="center" style="width: 100%;height: 50px;justify-content: left;text-indent: 20px;">搜索结果 :  <div class="center" style="cursor: pointer;text-decoration-line: underline;width: 80%;display: inline-block">{{searchText}}</div></div>
       <div class="center" style="width: 100%;height: 400px;">
         <table style="width: 95%;height: 100%;border: #dddddd" border="1">
           <tr style="height: 50px;color: #dddddd;font-size: 14px">
             <th style="width: 25%">名称</th>
             <th style="width: 25%">类型</th>
             <th style="width: 25%">地址</th>
             <th style="width: 25%">联系方式</th>
           </tr>
           <tr @click="toTarget(item)" class="item-pointer" style="font-size: 14px;cursor: pointer" v-for="(item,index) of data['pois']">
             <td>{{item.name}}</td>
             <td>{{item.type}}</td>
             <td>{{item.address}}</td>
             <td>{{item.tel}}</td>
           </tr>
         </table>
       </div>
       <div class="center" style="width: 100%;height: 50px">
         <div class="center" style="width: 100px">总数：<span style="color: #00f9cf">{{data.count}}</span></div>
         <div class="center" style="width: 100px;cursor: pointer;text-decoration-line: underline;" v-if="currentPage!=1" @click="preSearch">上一页</div>
         <div class="center" style="width: 50px;color: #00f9cf">{{currentPage}}</div>
         <div class="center" style="width: 100px;cursor: pointer;text-decoration-line: underline;" @click="nextSearch" v-if="data.pois.length>=5">下一页</div>
         <div class="center" style="cursor: pointer;text-decoration-line: underline;width: 70px" @click="resultPanel=false">关闭</div>
       </div>
     </div>
   </dv-border-box-10>

  </dv-border-box-7>
</template>

<script>
import {Message} from "element-ui";
import Loading from "./Loading";

export default {
  name: "POIService",
  components: {Loading},
  props: {
    city: {
      type: 'String',
      default: '全国'
    },
    borderColor: {
        type: 'Array',
        default: ['rgba(16,206,250,0.5)','rgba(255,255,255,1)']
      }
  },
  mounted() {
    this.placeSearch = new this.$AMap.PlaceSearch(this.option);
  },
  watch: {
    city(){
      this.placeSearch.setCity(this.city);
    },
    resultType(){
      this.$refs['resultBorder'].initWH();
    },
    resultPanel(){
      this.$refs['resultBorder'].initWH();
    }
  },
  data(){
    return{
      loading: {},
      data: {},
      resultPanel: false,
      searchText: '',
      resultType: 1,
      placeSearch: {},
      currentPage: 1,
      option: {
        pageSize: 5,
        pageIndex: 1,
      }
    }
  },
  inject: ['screen'],
  methods: {

    toTarget(item){
      this.screen.$refs['map'].removeEntity("placeSearchLabel");
      this.screen.$refs['map'].addBillBoard(item.location.lng,item.location.lat,0,'/data/device.png',{
        scale: 0.05
      },"placeSearchLabel");
      this.screen.$refs["map"].flyToPosition(item.location.lng,item.location.lat-0.06, 2000.0,0,-20.0,0.0);
      this.resultPanel =false;
    },
   async preSearch(){
     this.currentPage--;
     this.placeSearch.setPageIndex(this.currentPage);
      this.data =await this.search();
     this.loading = false;

   },
   resize(){
     this.$refs['container'].initWH();
   },
   async nextSearch(){
     this.currentPage++;
     this.placeSearch.setPageIndex(this.currentPage);
     this.data =await this.search();
     this.loading = false;
   },
   async search(){
     this.loading = true;
     return new Promise((resolve, reject)=> {
        this.placeSearch.search(this.searchText, (status, result) => {
          if(status=='error'){
            reject(result);
          }
          resolve(result.poiList);
        })
      })
    },
   async handleSearch(){
     this.currentPage = 1;
     this.placeSearch.setPageIndex(1);
      if(this.searchText==""){
        this.resultType=1;
        this.resultPanel = true;
        return
      }
     this.resultPanel = true;
     let data = await this.search();
     this.loading = false;
     if(typeof data == 'undefined' || data['pois'].length==0){
        this.resultType=2;
        return
      }
      this.resultType=3;
      this.data = data;
    }
  }
}
</script>

<style scoped>
  .full{
    width: 100%;
    height: 100%;
  }
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .el-input__inner{
    border: none;
    color: white;
    font-size: 16px;
  }
  #container{
    /*background: linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5));*/
  }
  .click:hover{
    cursor: pointer;
    transform: translate(2px,2px);
  }
  #resultPanel{
    position: relative;width: 100%;height: auto;
    /*background: rgba(23,65,72,0.8);*/
    /*background: linear-gradient(to bottom,rgba(23,65,72,0.5),rgba(23,65,72,0.9));*/
    top: 10px;
    /*border: 1px solid white;*/
    animation: initPanel 0.5s ;
  }
  .result{
    animation: result 0.2s ;
  }
  @keyframes result {
    from{ width: 0 ;height: 0}
    to{ width: 100%}
  }
  @keyframes initPanel {
    from{ opacity: 0}
    to{ opacity: 1}
  }
  .item-pointer:hover{
    background: rgba(0,0,0,0.5);
  }
</style>