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>

  <!-- 搜索触发的区域选择对话框（fixed定位，相对于视口） -->
  <div v-if="searchAreaState?.showAreaDialog.value" class="search-area-dialog" :style="{ left: searchAreaState.dialogPosition.value.x + 'px', top: searchAreaState.dialogPosition.value.y + 'px' }">
    <div class="dialog-header">选择区域</div>
    <div class="dialog-content">
      <div class="radius-input-group">
        <span class="label">半径：</span>
        <input
          v-model.number="searchAreaState.areaRadius.value"
          type="number"
          class="radius-input"
          min="1"
          max="100"
        />
        <span class="unit">公里</span>
      </div>
    </div>
    <div class="dialog-footer">
      <button class="confirm-btn" @click="searchAreaState.handleAreaConfirm">确认添加</button>
      <button class="cancel-btn" @click="searchAreaState.handleAreaCancel">取消</button>
    </div>
  </div>
</template>

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

// 从父组件注入搜索区域分析状态
const searchAreaState = inject<SearchAreaAnalysisState>('searchAreaState');

const {
  state,
  canSearch,
  querySearch,
  handleSelect,
  handleFocus,
} = searchAreaState!;

onMounted(() => {
  // 加载数据
  if (searchAreaState) {
    // 通过调用 handleFocus 来加载数据
    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;
}

/* 搜索触发的区域选择对话框样式（fixed定位，相对于视口） */
.search-area-dialog {
  position: fixed;
  z-index: 100001;
  min-width: 200px; 
  padding: 0;
  background: linear-gradient(180deg, rgba(0, 60, 120, 0.95), rgba(0, 40, 80, 0.95));
  border: 2px solid #00b4ff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 180, 255, 0.3);
  color: white;
  overflow: hidden;
}

.search-area-dialog .dialog-header {
  padding: 8px 12px; 
  font-size: 16px; 
  font-weight: bold;
  text-align: center;
  color: white;
  background: linear-gradient(90deg, #00b4ff, #0080cc);
}

.search-area-dialog .dialog-content {
  padding: 10px 6px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-area-dialog .radius-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-area-dialog .radius-input-group .label,
.search-area-dialog .radius-input-group .unit {
  font-size: 14px; 
  color: white;
}

.search-area-dialog .radius-input {
  width: 50px;
  height: 30px;
  padding: 2px 5px;
  font-size: 14px;
  text-align: center;
  color: white;
  background: rgba(0, 100, 180, 0.6);
  border: 1px solid #00b4ff;
  border-radius: 3px;
  outline: none;
}

.search-area-dialog .radius-input::-webkit-inner-spin-button,
.search-area-dialog .radius-input::-webkit-outer-spin-button {
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.search-area-dialog .dialog-footer {
  display: flex;
  justify-content: center;
  gap: 8px; 
  padding: 10px 10px 8px; 
}

.search-area-dialog .confirm-btn,
.search-area-dialog .cancel-btn {
  padding: 6px 15px; 
  font-size: 14px; 
  font-weight: bold;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}

.search-area-dialog .confirm-btn {
  background: linear-gradient(180deg, #2d8a4e, #1e6b3a);
  border: 1px solid #3da862;
}

.search-area-dialog .confirm-btn:hover {
  background: linear-gradient(180deg, #3da862, #2d8a4e);
  box-shadow: 0 2px 8px rgba(45, 138, 78, 0.5);
}

.search-area-dialog .cancel-btn {
  background: linear-gradient(180deg, #c0392b, #96281b);
  border: 1px solid #e74c3c;
}

.search-area-dialog .cancel-btn:hover {
  background: linear-gradient(180deg, #e74c3c, #c0392b);
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.5);
}
</style>