首页搜索优化+表格优化

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
  }

 src/styles/element/index.scss

@@ -10,7 +10,7 @@
    font-size: 18px;

    tr {
      height: 38px;
      // height: 38px;
      background: rgba(35, 53, 92, 0.8) !important;
      box-sizing: border-box;

@@ -30,11 +30,11 @@

    table {
      border-collapse: separate !important;
      border-spacing: 0 10px !important;
      // border-spacing: 0 10px !important;
    }

    tr {
      height: 38px;
      // height: 38px;
      background: rgba(36, 57, 110, 0.2);
      box-sizing: border-box;
      cursor: pointer;
@@ -49,19 +49,19 @@
      td {
        padding: 0;
        height: 38px;
        line-height: 38px;
        // line-height: 38px;
        color: #D4E8F8;
        border-top: 1px solid rgba(110, 135, 197, 0.32);
        border-bottom: 1px solid rgba(110, 135, 197, 0.32);
        // border-top: 1px solid rgba(110, 135, 197, 0.32);
        // border-bottom: 1px solid rgba(110, 135, 197, 0.32);
        box-sizing: border-box;
      }

      td:first-child {
        border-left: 1px solid rgba(110, 135, 197, 0.32);
        // border-left: 1px solid rgba(110, 135, 197, 0.32);
      }

      td:last-child {
        border-right: 1px solid rgba(110, 135, 197, 0.32);
        // border-right: 1px solid rgba(110, 135, 197, 0.32);
      }
    }
  }

 src/views/pd/components/dynamicPanel.vue

@@ -168,8 +168,8 @@
onUnmounted(() => {
  clearAll()

  window.$viewer.removeLayer(dynamicVectorLayer)
  window.$viewer.removeLayer(dynamicHtmlLayer)
  window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
  window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
})
</script>


 src/views/rt/components/box/dataContent.vue

@@ -127,7 +127,7 @@

        <div class="page_box">

          <el-table empty-text="" v-if="formInline.type == 1" :data="tableData" style="width: 100%"
          <el-table border empty-text="" v-if="formInline.type == 1" :data="tableData" style="width: 100%"
            :header-cell-style="headerCellStyle" :cell-style="tableCellStyle">
            <el-table-column prop="teamName" label="救援队伍组名称" />
            <el-table-column prop="teamJob" label="救援队伍组职务" />
@@ -136,7 +136,7 @@
            <el-table-column prop="perInChaPho" label="联系电话" />
          </el-table>

          <el-table empty-text="" v-else :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle"
          <el-table border empty-text="" v-else :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle"
            :cell-style="tableCellStyle">
            <el-table-column prop="firmName" label="企业名称" />
            <el-table-column prop="perInCha" label="责任人姓名" />

 src/views/supplies/components/box/dataContent.vue

@@ -17,7 +17,7 @@

        <div class="page_box">
          <div>
            <el-table empty-text="" v-if="formInline.ownership == 1" :data="tableData">
            <el-table border empty-text="" v-if="formInline.ownership == 1" :data="tableData">
              <el-table-column prop="name" label="物资名称" />
              <el-table-column prop="personInCha" label="负责人" width="150" />
              <el-table-column prop="personInChaPhone" label="负责人电话" width="250" />
@@ -25,7 +25,7 @@
              <el-table-column prop="numUnit" label="数量" width="150" />
            </el-table>

            <el-table empty-text="" v-else :data="tableData">
            <el-table border empty-text="" v-else :data="tableData">
              <!-- <el-table-column prop="firmName" label="企业名称" /> -->
              <el-table-column prop="name" label="物资名称" />
              <!-- <el-table-column prop="personInCha" label="负责人" /> -->