gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改文件名并修改代码

Browse Source
This commit is contained in:
zxyroyy
2026-06-22 21:45:09 +08:00
parent f653067d8b
commit 51c7352a90
6 changed files with 661 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/rain-earthquake/function-child/AroundAnalysis.vue
+132 -3
View File
@@ -15,12 +15,35 @@
<!-- 脉冲点列表组件 -->
<PulsePointListComponent />
</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 { provide } from 'vue';//从Vue导入provide函数，用于依赖注入
import { useStatusStore } from '@/stores/useStatusStore';
import { useAnalysisButton } from '@/hooks/rain-earthquake/useAnalysisButton';
import { useAroundButton } from '@/hooks/rain-earthquake/useAroundButton.ts';
import { useAroundSearch } from '@/hooks/rain-earthquake/useAroundSearch.ts';
import AroundAnalysisDetailComponent from './around-analysis/AroundAnalysisDetailComponent.vue';
import ButtonComponent from './around-analysis/ButtonComponent.vue';
import SearchComponent from './around-analysis/SearchComponent.vue';
@@ -30,10 +53,116 @@ import PulsePointListComponent from './around-analysis/PulsePointListComponent.v
const statusStore = useStatusStore();
// 在父组件中创建唯一的 Hook 实例,包含所有周边分析相关的状态和方法
const analysisButtonState = useAnalysisButton();
const analysisButtonState = useAroundButton();
// 搜索触发的区域分析 Hook（在父组件中创建，确保 watch 不会被销毁）
const searchAreaState = useAroundSearch();
// 通过 provide 共享给所有子组件（让 TypeScript 自动推断类型）
provide('analysisButtonState', analysisButtonState);
provide('searchAreaState', searchAreaState);
</script>
<style scoped></style>
<style scoped>
/* 搜索触发的区域选择对话框样式（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>
src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue
+145 -15
View File
@@ -22,24 +22,52 @@
</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 { onMounted } from 'vue';
import { inject, onMounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
import type { SearchAreaAnalysisState } from '@/types/common/useAroundAnalysisType';
const {
state,
canSearch,
querySearch,
handleSelect,
handleFocus,
loadAllPointData
} = useAroundAnalysis();
// 从父组件注入搜索区域分析状态
const searchAreaState = inject<SearchAreaAnalysisState>('searchAreaState');
const {
state,
canSearch,
querySearch,
handleSelect,
handleFocus,
} = searchAreaState!;
onMounted(() => {
loadAllPointData();
// 加载数据
if (searchAreaState) {
// 通过调用 handleFocus 来加载数据
handleFocus();
}
});
</script>
@@ -76,12 +104,12 @@ onMounted(() => {
}
.search-component-box :deep(.my-autocomplete li) {
padding: 2px 6px;
padding: 2px 6px;
display: flex;
justify-content: space-between;
cursor: pointer;
color: #e6edf3;
font-size: 13px;
font-size: 13px;
}
.search-component-box :deep(.my-autocomplete li .value) {
@@ -92,7 +120,7 @@ onMounted(() => {
}
.search-component-box :deep(.my-autocomplete li .link) {
font-size: 12px;
font-size: 12px;
margin-left: 8px;
flex-shrink: 0;
}
@@ -102,4 +130,106 @@ onMounted(() => {
background: rgba(58, 112, 169, 0.7);
color: #fff;
}
</style>
/* 搜索触发的区域选择对话框样式（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>