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

修改组件中hooks和store的调用方式

Browse Source
This commit is contained in:
wzy-warehouse
2026-05-07 12:53:25 +08:00
parent 2ab1b7da7c
commit 68715dea2b
32 changed files with 350 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/rain-earthquake/basic/DebrisFlowComponent.vue
+16 -13
View File
@@ -3,7 +3,7 @@
<div>
<!-- 加载泥石流隐患点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && debrisFlowPoints.length > 0"
v-if="useStatus.appLoadingCompleted && debrisFlowPoints.length > 0"
:base-points="debrisFlowPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.debrisFlowHiddenPointId"
@@ -15,11 +15,11 @@
<InformationBox
:data="debrisFlowPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().debrisFlowHiddenPoint.loading"
v-if="useLoadingInformation.debrisFlowHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().debrisFlowHiddenPoint.id"
:key="useLoadingInformation.debrisFlowHiddenPoint.id"
/>
</div>
</template>
@@ -44,15 +44,18 @@
const debrisFlowPoints = ref<Point[]>([]);
const useStatus = useStatusStore();
const useLoadingInformation = useLoadingInformationStore();
const useLoadingResource = useLoadingResourceStore();
const { field, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const debrisFlowPointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
// 加载泥石流隐患点数据
$api.hiddenDangerSpots
.getBasePoints(HiddenDangerPointTypeMap[PointType.DEBRIS_FLOW])
@@ -62,13 +65,13 @@
// 监听id变化
watch(
() => useLoadingInformationStore().debrisFlowHiddenPoint.id,
() => useLoadingInformation.debrisFlowHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取泥石流隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
const clickObject = useLoadingInformation.clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
@@ -76,7 +79,7 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().debrisFlowHiddenPoint.id
useLoadingInformation.debrisFlowHiddenPoint.id
);
// 更新数据
@@ -92,7 +95,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().debrisFlowHiddenPoint.loading = true;
useLoadingInformation.debrisFlowHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
@@ -101,19 +104,19 @@
// 监听显示隐藏
watch(
() => useStatusStore().poiLayers.showDebrisFlowHiddenPoint.show,
() => useStatus.poiLayers.showDebrisFlowHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示泥石流隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.DEBRIS_FLOW_HIDDEN_POINT
).ids
);
} else {
// 隐藏泥石流隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.DEBRIS_FLOW_HIDDEN_POINT
).ids
);
src/component/rain-earthquake/basic/FlashFloodComponent.vue
+16 -13
View File
@@ -3,7 +3,7 @@
<div>
<!-- 加载山洪隐患点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && flashFloodPoints.length > 0"
v-if="useStatus.appLoadingCompleted && flashFloodPoints.length > 0"
:base-points="flashFloodPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.flashFloodHiddenPointId"
@@ -15,11 +15,11 @@
<InformationBox
:data="flashFloodPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().flashFloodHiddenPoint.loading"
v-if="useLoadingInformation.flashFloodHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().flashFloodHiddenPoint.id"
:key="useLoadingInformation.flashFloodHiddenPoint.id"
/>
</div>
</template>
@@ -44,15 +44,18 @@
const flashFloodPoints = ref<Point[]>([]);
const useStatus = useStatusStore();
const useLoadingInformation = useLoadingInformationStore();
const useLoadingResource = useLoadingResourceStore();
const { field, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const flashFloodPointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
// 加载山洪隐患点数据
$api.hiddenDangerSpots
.getBasePoints(HiddenDangerPointTypeMap[PointType.FLASH_FLOOD])
@@ -62,13 +65,13 @@
// 监听id变化
watch(
() => useLoadingInformationStore().flashFloodHiddenPoint.id,
() => useLoadingInformation.flashFloodHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取山洪隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
const clickObject = useLoadingInformation.clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
@@ -76,7 +79,7 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().flashFloodHiddenPoint.id
useLoadingInformation.flashFloodHiddenPoint.id
);
// 更新数据
@@ -92,7 +95,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().flashFloodHiddenPoint.loading = true;
useLoadingInformation.flashFloodHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
@@ -101,19 +104,19 @@
// 监听显示隐藏
watch(
() => useStatusStore().poiLayers.showFlashFloodHiddenPoint.show,
() => useStatus.poiLayers.showFlashFloodHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示山洪隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.FLASH_FLOOD_HIDDEN_POINT
).ids
);
} else {
// 隐藏山洪隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.FLASH_FLOOD_HIDDEN_POINT
).ids
);
src/component/rain-earthquake/basic/LandslideComponent.vue
+16 -13
View File
@@ -3,7 +3,7 @@
<div>
<!-- 加载滑坡隐患点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && landslidePoints.length > 0"
v-if="useStatus.appLoadingCompleted && landslidePoints.length > 0"
:base-points="landslidePoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.landslideHiddenPointId"
@@ -15,11 +15,11 @@
<InformationBox
:data="landslidePointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().landslideHiddenPoint.loading"
v-if="useLoadingInformation.landslideHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().landslideHiddenPoint.id"
:key="useLoadingInformation.landslideHiddenPoint.id"
/>
</div>
</template>
@@ -44,15 +44,18 @@
const landslidePoints = ref<Point[]>([]);
const useStatus = useStatusStore();
const useLoadingInformation = useLoadingInformationStore();
const useLoadingResource = useLoadingResourceStore();
const { field, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const landslidePointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
// 加载滑坡隐患点数据
$api.hiddenDangerSpots
.getBasePoints(HiddenDangerPointTypeMap[PointType.LANDSLIDE])
@@ -62,13 +65,13 @@
// 监听id变化
watch(
() => useLoadingInformationStore().landslideHiddenPoint.id,
() => useLoadingInformation.landslideHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取滑坡隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
const clickObject = useLoadingInformation.clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
@@ -76,7 +79,7 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().landslideHiddenPoint.id
useLoadingInformation.landslideHiddenPoint.id
);
// 更新数据
@@ -92,7 +95,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().landslideHiddenPoint.loading = true;
useLoadingInformation.landslideHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
@@ -101,19 +104,19 @@
// 监听显示隐藏
watch(
() => useStatusStore().poiLayers.showLandslideHiddenPoint.show,
() => useStatus.poiLayers.showLandslideHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示滑坡隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.LANDSLIDE_HIDDEN_POINT
).ids
);
} else {
// 隐藏滑坡隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.LANDSLIDE_HIDDEN_POINT
).ids
);
src/component/rain-earthquake/basic/RiskPointComponent.vue
+14 -10
View File
@@ -3,7 +3,7 @@
<div>
<!-- 加载风险点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && riskPoints.length > 0"
v-if="useStatus.appLoadingCompleted && riskPoints.length > 0"
:base-points="riskPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.riskPointId"
@@ -15,11 +15,11 @@
<InformationBox
:data="riskPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().riskPoint.loading"
v-if="useLoadingInformation.riskPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().riskPoint.id"
:key="useLoadingInformation.riskPoint.id"
/>
</div>
</template>
@@ -40,6 +40,10 @@
const riskPoints = ref<Point[]>([]);
const useStatus = useStatusStore();
const useLoadingInformation = useLoadingInformationStore();
const useLoadingResource = useLoadingResourceStore();
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
@@ -54,13 +58,13 @@
// 监听id变化
watch(
() => useLoadingInformationStore().riskPoint.id,
() => useLoadingInformation.riskPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取风险点数据
const clickObject = useLoadingInformationStore().clickObject;
const clickObject = useLoadingInformation.clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
@@ -68,7 +72,7 @@
}
const res = await $api.riskSpots.getPointDetailById(
useLoadingInformationStore().riskPoint.id
useLoadingInformation.riskPoint.id
);
// 更新数据
@@ -83,7 +87,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().riskPoint.loading = true;
useLoadingInformation.riskPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
@@ -92,17 +96,17 @@
// 监听显示隐藏风险点
watch(
() => useStatusStore().mapLayers.riskPointShow.show,
() => useStatus.mapLayers.riskPointShow.show,
(newValue: boolean) => {
if (newValue) {
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.RISK_POINT
).ids
);
} else {
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.RISK_POINT
).ids
);
src/component/rain-earthquake/basic/WaterLoggingComponent.vue
+16 -13
View File
@@ -4,7 +4,7 @@
<!-- 加载内涝隐患点 -->
<LoadingPoints
v-if="
useStatusStore().appLoadingCompleted && waterLoggingPoints.length > 0
useStatus.appLoadingCompleted && waterLoggingPoints.length > 0
"
:base-points="waterLoggingPoints"
:get-disaster-icon="getDisasterIcon"
@@ -17,11 +17,11 @@
<InformationBox
:data="waterLoggingPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().waterLoggingHiddenPoint.loading"
v-if="useLoadingInformation.waterLoggingHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().waterLoggingHiddenPoint.id"
:key="useLoadingInformation.waterLoggingHiddenPoint.id"
/>
</div>
</template>
@@ -46,15 +46,18 @@
const waterLoggingPoints = ref<Point[]>([]);
const useStatus = useStatusStore();
const useLoadingInformation = useLoadingInformationStore();
const useLoadingResource = useLoadingResourceStore();
const { field, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const waterLoggingPointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
// 加载内涝隐患点数据
$api.hiddenDangerSpots
.getBasePoints(HiddenDangerPointTypeMap[PointType.WATER_LOGGING])
@@ -64,13 +67,13 @@
// 监听id变化
watch(
() => useLoadingInformationStore().waterLoggingHiddenPoint.id,
() => useLoadingInformation.waterLoggingHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取内涝隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
const clickObject = useLoadingInformation.clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
@@ -78,7 +81,7 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().waterLoggingHiddenPoint.id
useLoadingInformation.waterLoggingHiddenPoint.id
);
// 更新数据
@@ -94,7 +97,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().waterLoggingHiddenPoint.loading = true;
useLoadingInformation.waterLoggingHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
@@ -103,19 +106,19 @@
// 监听显示隐藏
watch(
() => useStatusStore().poiLayers.showWaterLoggingHiddenPoint.show,
() => useStatus.poiLayers.showWaterLoggingHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示内涝隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.WATER_LOGGING_HIDDEN_POINT
).ids
);
} else {
// 隐藏内涝隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
useLoadingResource.getLoadingResource(
LoadingResource.WATER_LOGGING_HIDDEN_POINT
).ids
);