存档代码

src/component/rain-earthquake/function-child/AroundAnalysis.vue

@@ -1,59 +1,53 @@
 <template>
   <div
-    class="around-analysis-box"
-    v-show="statusStore.functionStatus.aroundAnalysis.show"
+      class="around-analysis-box"
+      v-show="statusStore.functionStatus.aroundAnalysis.show"
   >
     <!-- 搜索组件 -->
     <SearchComponent />
 
     <!-- 按钮组件 -->
     <ButtonComponent />
-
-    <!-- 具体功能组件 -->
-    <AroundAnalysisDetailComponent />
   </div>
 
   <!-- 区域选择对话框（fixed定位，相对于视口） -->
-  <div v-if="analysisButtonState.showAreaDialog.value" class="search-area-dialog" :style="{ left: analysisButtonState.dialogPosition.x + 'px', top: analysisButtonState.dialogPosition.y + 'px' }">
+  <div v-if="aroundAnalysisState.showAreaDialog.value" class="search-area-dialog" :style="{ left: aroundAnalysisState.dialogPosition.x + 'px', top: aroundAnalysisState.dialogPosition.y + 'px' }">
     <div class="dialog-header">选择区域</div>
     <div class="dialog-content">
       <div class="radius-input-group">
         <span class="label">半径：</span>
         <input
-          v-model.number="analysisButtonState.radius.value"
-          type="number"
-          class="radius-input"
-          min="1"
-          max="100"
+            v-model.number="aroundAnalysisState.radius.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="analysisButtonState.handleConfirm">确认添加</button>
-      <button class="cancel-btn" @click="analysisButtonState.handleCancel">取消</button>
+      <button class="confirm-btn" @click="aroundAnalysisState.handleConfirm">确认添加</button>
+      <button class="cancel-btn" @click="aroundAnalysisState.handleCancel">取消</button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { provide } from 'vue';//从Vue导入provide函数，用于依赖注入
+import { provide } from 'vue';
 import { useStatusStore } from '@/stores/useStatusStore';
-import { useAroundButton } from '@/hooks/rain-earthquake/useAroundButton.ts';
-import { useAroundSearch } from '@/hooks/rain-earthquake/useAroundSearch.ts';
+import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
+import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
 import ButtonComponent from './around-analysis/ButtonComponent.vue';
 import SearchComponent from './around-analysis/SearchComponent.vue';
 
-
 const statusStore = useStatusStore();
 
 // 在父组件中创建唯一的 Hook 实例
-const analysisButtonState = useAroundButton();
-const searchState = useAroundSearch();
+const aroundAnalysisState = useAroundAnalysis();
 
 // 通过 provide 共享给所有子组件
-provide('analysisButtonState', analysisButtonState);
-provide('searchState', searchState);
+provide<AroundAnalysisState>('aroundAnalysisState', aroundAnalysisState);
 </script>
 
 <style scoped>
@@ -61,7 +55,7 @@ provide('searchState', searchState);
 .search-area-dialog {
   position: fixed;
   z-index: 100001;
-  min-width: 200px; 
+  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;
@@ -72,8 +66,8 @@ provide('searchState', searchState);
 }
 
 .search-area-dialog .dialog-header {
-  padding: 8px 12px; 
-  font-size: 16px; 
+  padding: 8px 12px;
+  font-size: 16px;
   font-weight: bold;
   text-align: center;
   color: white;
@@ -81,7 +75,7 @@ provide('searchState', searchState);
 }
 
 .search-area-dialog .dialog-content {
-  padding: 10px 6px; 
+  padding: 10px 6px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -95,7 +89,7 @@ provide('searchState', searchState);
 
 .search-area-dialog .radius-input-group .label,
 .search-area-dialog .radius-input-group .unit {
-  font-size: 14px; 
+  font-size: 14px;
   color: white;
 }
 
@@ -123,14 +117,14 @@ provide('searchState', searchState);
 .search-area-dialog .dialog-footer {
   display: flex;
   justify-content: center;
-  gap: 8px; 
-  padding: 10px 10px 8px; 
+  gap: 8px;
+  padding: 10px 10px 8px;
 }
 
 .search-area-dialog .confirm-btn,
 .search-area-dialog .cancel-btn {
-  padding: 6px 15px; 
-  font-size: 14px; 
+  padding: 6px 15px;
+  font-size: 14px;
   font-weight: bold;
   color: white;
   border: none;

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

@@ -1,14 +1,15 @@
+<!-- 按钮组件 -->
 <template>
   <div class="analysis-button-box">
     <ul class="analysis-button-ul">
-      <li v-for="(buttonItem, index) in analysisButtons" :key="index">
+      <li v-for="(buttonItem, index) in aroundAnalysisState.analysisButtons" :key="index">
         <button
-          @click="handleButtonClick(index, buttonItem.callback)"
-          :style="{
-            'background-image': `url(${selectedButtonIndex === index ? rightOrangeButton : rightBlueButton})`,
+            @click="aroundAnalysisState.handleButtonClick(index, buttonItem.callback)"
+            :style="{
+            'background-image': `url(${aroundAnalysisState.selectedButtonIndex.value === index ? rightOrangeButton : rightBlueButton})`,
           }"
         >
-          {{ selectedButtonIndex === index && buttonItem.activeName ? buttonItem.activeName : buttonItem.name }}
+          {{ aroundAnalysisState.selectedButtonIndex.value === index && buttonItem.activeName ? buttonItem.activeName : buttonItem.name }}
         </button>
       </li>
     </ul>
@@ -18,16 +19,10 @@
 <script lang="ts" setup>
 import { inject } from 'vue';
 import { rightBlueButton, rightOrangeButton } from '@/assets';
-import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
+import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
 
-// 从父组件注入共享状态，明确指定类型
-const analysisButtonState = inject<AnalysisButtonState>('analysisButtonState');
-
-const { 
-  selectedButtonIndex, 
-  analysisButtons, 
-  handleButtonClick 
-} = analysisButtonState!;
+// 从父组件注入共享的 Hook 实例
+const aroundAnalysisState = inject<AroundAnalysisState>('aroundAnalysisState')!;
 </script>
 
 <style scoped>
@@ -73,4 +68,4 @@ const {
   box-shadow: none;
   border-radius: 0;
 }
-</style>
+</style>

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

@@ -1,14 +1,15 @@
+<!-- 搜索组件 -->
 <template>
   <div class="search-component-box">
     <el-autocomplete
-        v-model="state"
-        :fetch-suggestions="querySearch"
+        v-model="aroundAnalysisState.searchState.value"
+        :fetch-suggestions="aroundAnalysisState.querySearch"
         popper-class="my-autocomplete"
         placeholder="搜索地点"
-        @select="handleSelect"
-        @focus="handleFocus"
+        @select="aroundAnalysisState.handleSelect"
+        @focus="aroundAnalysisState.handleFocus"
         clearable
-        :disabled="!canSearch" 
+        :disabled="!aroundAnalysisState.canSearch.value"
         :teleported="false"
     >
       <template #suffix>
@@ -25,36 +26,12 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onMounted } from 'vue';
+import { inject } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
-import type { PointResource } from '@/types/common/useAroundAnalysisType';
-import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
+import type { AroundAnalysisState } 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();
-  }
-});
+// 从父组件注入共享的 Hook 实例
+const aroundAnalysisState = inject<AroundAnalysisState>('aroundAnalysisState')!;
 </script>
 
 <style scoped>