存档代码

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

@@ -22,50 +22,36 @@
       </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';
+import type { PointResource } from '@/types/common/useAroundAnalysisType';
+import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
 
-// 从父组件注入搜索区域分析状态
-const searchAreaState = inject<SearchAreaAnalysisState>('searchAreaState');
+// 从父组件注入搜索状态和按钮状态
+const searchState = inject<ReturnType<typeof import('@/hooks/rain-earthquake/useAroundSearch').useAroundSearch>>('searchState');
+const buttonState = inject<AnalysisButtonState>('analysisButtonState');
 
 const {
   state,
   canSearch,
   querySearch,
-  handleSelect,
+  handleSelect: baseHandleSelect,
   handleFocus,
-} = searchAreaState!;
+} = searchState!;
+
+// 包装 handleSelect，在搜索选择后触发区域分析
+const handleSelect = async (item: PointResource) => {
+  await baseHandleSelect(item);
+  // 飞行完成后，触发区域分析
+  buttonState?.startAreaAnalysisFromSearch(item);
+};
 
 onMounted(() => {
   // 加载数据
-  if (searchAreaState) {
-    // 通过调用 handleFocus 来加载数据
+  if (searchState) {
     handleFocus();
   }
 });
@@ -130,106 +116,4 @@ onMounted(() => {
   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>