首页搜索优化+表格优化

linwe

2024-11-15 1c7e1585cf5ad6a81f85820522a1c6a675c712e8

 src/pages/layout/components/mainSearch.vue

@@ -14,8 +14,11 @@
      @focus="onFocus"></el-input>
    <div class="page-search-value-box" v-show="isShowSearchSKValBox">
      <ul>
        <li v-for="(item, index) in searchSKValList" :key="index" @click="sKValItemClick(item)">{{ item.name }}
        <li v-if="searchSKValList.length > 0" v-for="(item, index) in searchSKValList" :key="index"
          @click="sKValItemClick(item)">{{ item.name }}
        </li>
        <!-- <li v-else>暂无数据</li> -->
        <span v-else>{{ showText }}</span>
      </ul>
    </div>
  </div>
@@ -29,12 +32,16 @@
let searchVal = ref('')
let searchSKValList = ref([])

let showText = ref('暂无数据')

const onSearch = () => {
  if (searchVal.value == '') {
    isShowSearchSKValBox = false
    // 清空
    clearPoint()
  } else {
    showText.value = '搜索中...'
    searchSKValList.value = []
    isShowSearchSKValBox = true
    getFuzzyQuery()
  }
@@ -44,8 +51,11 @@
  fuzzyQuery({
    name: searchVal.value
  }).then(res => {
    // console.log(res.data.data)
    searchSKValList.value = res.data.data
    if (res.data.data.length > 0) {
      searchSKValList.value = res.data.data
    } else {
      showText.value = '暂无数据'
    }
  })
}

@@ -102,7 +112,7 @@
    window.$viewer.flyToPosition(new DC.Position(item.lng, item.lat, 2000, 0, -90, 0))

  } else {
    console.log('已存在*******************************')
    // console.log('已存在*******************************')
    window.$viewer.removeLayer(addTileLayers[item.name])
    addTileLayers = {}
  }
@@ -171,10 +181,19 @@
    }

    ul>li:hover {
      background-color: #0e1a35;
      background-color: #949597;
    }
  }

  .page-search-value-box>ul>span {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }



  .page-search-value-box::-webkit-scrollbar {
    display: none
  }