将周边分析的按钮功能和搜索功能进行拆分化设计

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

@@ -15,12 +15,20 @@
 </template>
 
 <script lang="ts" setup>
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import AroundAnalysisDetailComponent from './around-analysis/AroundAnalysisDetailComponent.vue';
-  import ButtonComponent from './around-analysis/ButtonComponent.vue';
-  import SearchComponent from './around-analysis/SearchComponent.vue';
+import { provide } from 'vue';//从Vue导入provide函数，用于依赖注入
+import { useStatusStore } from '@/stores/useStatusStore';
+import { useAnalysisButton } from '@/hooks/rain-earthquake/useAnalysisButton';
+import AroundAnalysisDetailComponent from './around-analysis/AroundAnalysisDetailComponent.vue';
+import ButtonComponent from './around-analysis/ButtonComponent.vue';
+import SearchComponent from './around-analysis/SearchComponent.vue';
 
-  const statusStore = useStatusStore();
+const statusStore = useStatusStore();
+
+// 在父组件中创建唯一的 Hook 实例,包含所有周边分析相关的状态和方法
+const analysisButtonState = useAnalysisButton();
+
+// 通过 provide 共享给所有子组件（让 TypeScript 自动推断类型）
+provide('analysisButtonState', analysisButtonState);
 </script>
 
 <style scoped></style>

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

@@ -1,7 +1,142 @@
 <template>
-  <div></div>
+  <div v-if="showAreaDialog" class="area-dialog" :style="{ left: dialogPosition.x + 'px', top: 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="radius"
+          type="number"
+          class="radius-input"
+          min="1"
+          max="100"
+        />
+        <span class="unit">公里</span>
+      </div>
+    </div>
+    <div class="dialog-footer">
+      <button class="confirm-btn" @click="handleConfirm">确认添加</button>
+      <button class="cancel-btn" @click="handleCancel">取消</button>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { inject } from 'vue';//从Vue导入inject函数，用于依赖注入
+import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
 
-<style scoped></style>
+// 从父组件注入共享状态，明确指定类型
+const analysisButtonState = inject<AnalysisButtonState>('analysisButtonState');
+
+const { 
+  showAreaDialog, 
+  radius, 
+  dialogPosition, 
+  handleConfirm, 
+  handleCancel 
+} = analysisButtonState!;//使用非空断言操作符，告诉TypeScript该值一定存在
+</script>
+
+<style scoped>
+/* 对话框容器样式 */
+.area-dialog {
+  position: absolute;
+  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;
+}
+/* 对话框标题栏样式 */
+.dialog-header {
+  padding: 8px 12px; 
+  font-size: 16px; 
+  font-weight: bold;
+  text-align: center;
+  color: white;
+  background: linear-gradient(90deg, #00b4ff, #0080cc);
+}
+
+.dialog-content {
+  padding: 10px 6px; 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.radius-input-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+ /* 标签和单位文字的样式 */
+.radius-input-group .label,
+.radius-input-group .unit {
+  font-size: 14px; 
+  color: white;
+}
+
+.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;
+}
+/* 隐藏数字输入框的上下调节按钮（针对WebKit浏览器） */
+.radius-input::-webkit-inner-spin-button,
+.radius-input::-webkit-outer-spin-button {
+  opacity: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 8px; 
+  padding: 10px 10px 8px; 
+}
+
+.confirm-btn,
+.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;
+}
+
+.confirm-btn {
+  background: linear-gradient(180deg, #2d8a4e, #1e6b3a);
+  border: 1px solid #3da862;
+}
+
+.confirm-btn:hover {
+  background: linear-gradient(180deg, #3da862, #2d8a4e);
+  box-shadow: 0 2px 8px rgba(45, 138, 78, 0.5);
+}
+
+.cancel-btn {
+  background: linear-gradient(180deg, #c0392b, #96281b);
+  border: 1px solid #e74c3c;
+}
+
+.cancel-btn:hover {
+  background: linear-gradient(180deg, #e74c3c, #c0392b);
+  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.5);
+}
+</style>

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

@@ -1,7 +1,76 @@
 <template>
-  <div></div>
+  <div class="analysis-button-box">
+    <ul class="analysis-button-ul">
+      <li v-for="(buttonItem, index) in analysisButtons" :key="index">
+        <button
+          @click="handleButtonClick(index, buttonItem.callback)"
+          :style="{
+            'background-image': `url(${selectedButtonIndex === index ? rightOrangeButton : rightBlueButton})`,
+          }"
+        >
+          {{ selectedButtonIndex === index && buttonItem.activeName ? buttonItem.activeName : buttonItem.name }}
+        </button>
+      </li>
+    </ul>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { inject } from 'vue';
+import { rightBlueButton, rightOrangeButton } from '@/assets';
+import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
 
-<style scoped></style>
+// 从父组件注入共享状态，明确指定类型
+const analysisButtonState = inject<AnalysisButtonState>('analysisButtonState');
+
+const { 
+  selectedButtonIndex, 
+  analysisButtons, 
+  handleButtonClick 
+} = analysisButtonState!;
+</script>
+
+<style scoped>
+.analysis-button-box {
+  position: absolute;
+  top: 95px;
+  right: 40px;
+  z-index: 1000;
+  width: 180px;
+  padding: 15px 0;
+  border-radius: 8px;
+}
+
+.analysis-button-ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.analysis-button-ul li {
+  margin: 15px 0 0;
+  text-align: center;
+}
+
+.analysis-button-ul li button {
+  width: 190px;
+  height: 30px;
+  padding: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  white-space: nowrap;
+  min-width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+  background-color: transparent;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: 20px center;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+}
+</style>

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

@@ -1,10 +1,105 @@
-<!-- 搜索组件 -->
 <template>
-  <div>
-    搜索
+  <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"></script>
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
 
-<style scoped></style>
+const { 
+  state, 
+  canSearch, 
+  querySearch, 
+  handleSelect, 
+  handleFocus, 
+  loadAllPointData 
+} = useAroundAnalysis();
+
+onMounted(() => {
+  loadAllPointData();
+});
+</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>