xian_vue_new/src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue

<template>
  <div class="search-component-box">
    <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearch"
        popper-class="my-autocomplete"
        placeholder="搜索地点"
        @select="handleSelect"
        @focus="handleFocus"
        clearable
        :disabled="!canSearch" 
        :teleported="false"
    >
      <template #suffix>
        <el-icon class="el-input__icon">
          <edit />
        </el-icon>
      </template>
      <template #default="{ item }">
        <div class="value">{{ item.value }}</div>
        <span class="link">{{ item.lon?.toFixed(4) }}, {{ item.lat?.toFixed(4) }}</span>
      </template>
    </el-autocomplete>
  </div>
</template>

<script lang="ts" setup>
import { inject, onMounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import type { PointResource } from '@/types/common/useAroundAnalysisType';
import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';

// 从父组件注入搜索状态和按钮状态
const searchState = inject<ReturnType<typeof import('@/hooks/rain-earthquake/useAroundSearch').useAroundSearch>>('searchState');
const buttonState = inject<AnalysisButtonState>('analysisButtonState');

const {
  state,
  canSearch,
  querySearch,
  handleSelect: baseHandleSelect,
  handleFocus,
} = searchState!;

// 包装 handleSelect，在搜索选择后触发区域分析
const handleSelect = async (item: PointResource) => {
  await baseHandleSelect(item);
  // 飞行完成后，触发区域分析
  buttonState?.startAreaAnalysisFromSearch(item);
};

onMounted(() => {
  // 加载数据
  if (searchState) {
    handleFocus();
  }
});
</script>

<style scoped>
.search-component-box {
  position: absolute;
  top: 125px;
  right: 210px;
  z-index: 10000;
  width: 220px;
}

.search-component-box :deep(.el-input__wrapper) {
  background: rgba(60, 99, 147, 0.9) ;
  box-shadow: 0 0 0 1px rgba(160, 173, 192, 0.5) ;
  border-radius: 7px;
}

.search-component-box :deep(.el-input__inner) {
  color: #fff;
}

.search-component-box :deep(.el-input__inner::placeholder) {
  color: #9ca9b9;
}

.search-component-box :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(79, 131, 194, 0.9);
}

.search-component-box :deep(.my-autocomplete) {
  background: rgba(26, 58, 95, 0.95);
  border: 1px solid #2a3d58;
}

.search-component-box :deep(.my-autocomplete li) {
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  color: #e6edf3;
  font-size: 13px;
}

.search-component-box :deep(.my-autocomplete li .value) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.search-component-box :deep(.my-autocomplete li .link) {
  font-size: 12px;
  margin-left: 8px;
  flex-shrink: 0;
}

.search-component-box :deep(.my-autocomplete li:hover),
.search-component-box :deep(.my-autocomplete li.highlighted) {
  background: rgba(58, 112, 169, 0.7);
  color: #fff;
}
</style>