From cd5080b2e3d84c274f90bee762348be3f89e3c29 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 29 五月 2025 18:03:20 +0800
Subject: [PATCH] 修改
---
src/views/GisView.vue | 9
src/components/menu/Device.vue | 183 ++++++++++++++++++-------
src/store/simulation.js | 17 ++
src/views/yhgl.vue | 22 +-
src/views/Home.vue | 1
src/components/menu/Location.vue | 103 +++++++++-----
src/views/nav/Navigation.vue | 40 +----
7 files changed, 236 insertions(+), 139 deletions(-)
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index 01b1b31..a566a28 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -4,13 +4,30 @@
<span>鐩戞祴璁惧</span>
</div>
<div class="left-content device-content">
+ <div style="margin-left: 5px; margin-bottom: 5px">
+ <span style="color: white">鍖椾含甯傦細</span>
+ <el-select
+ @change="handleChange1"
+ v-model="selectValue1"
+ placeholder="Select"
+ size="mini"
+ style="width: 240px"
+ >
+ <el-option
+ v-for="item in BJoptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
<div style="margin-left: 5px">
<span style="color: white">閲嶇偣娌燂細</span>
<el-select
@change="handleChange"
v-model="selectValue"
placeholder="Select"
- size="large"
+ size="mini"
style="width: 240px"
>
<el-option
@@ -21,23 +38,33 @@
/>
</el-select>
</div>
- <el-tree
- :data="deviceTree"
- node-key="deviceId"
- :props="treeProps"
- @node-click="handleTreeNodeClick"
- class="device-tree"
- >
- <template #default="{ node, data }">
- <span v-if="!data.children" class="device-tree-item">
- <!-- <div class="device-item-icon"></div> -->
- <span class="device-item-text">{{ node.label }}</span>
- </span>
- <span v-else class="device-tree-category">
- {{ node.label }} ({{ data.children.length }})
- </span>
- </template>
- </el-tree>
+ <!-- 鍔犺浇閬僵灞傚拰鍐呭瀹瑰櫒 -->
+ <div class="tree-container">
+ <div v-if="isLoading" class="loading-overlay">
+ <div class="loading-content">
+ <el-icon class="loading-icon"><Loading /></el-icon>
+ <span class="loading-text">鏁版嵁鍔犺浇涓�...</span>
+ </div>
+ </div>
+
+ <el-tree
+ v-show="!isLoading"
+ :data="deviceTree"
+ node-key="deviceId"
+ :props="treeProps"
+ @node-click="handleTreeNodeClick"
+ class="device-tree"
+ >
+ <template #default="{ node, data }">
+ <span v-if="!data.children" class="device-tree-item">
+ <span class="device-item-text">{{ node.label }}</span>
+ </span>
+ <span v-else class="device-tree-category">
+ {{ node.label }} ({{ data.children.length }})
+ </span>
+ </template>
+ </el-tree>
+ </div>
</div>
</div>
</template>
@@ -50,12 +77,20 @@
import { getDeviceInfo } from "@/api/hpApi";
import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤
import { useSimStore } from "@/store/simulation";
+import { Loading } from "@element-plus/icons-vue";
+
const simStore = useSimStore();
+
+const isLoading = ref(true); // 鍒濆璁剧疆涓哄姞杞界姸鎬�
+
onMounted(async () => {
- // 鍔犺浇鎵�鏈夌殑闅愭偅鐐逛俊鎭�
- await getData();
- loadDeviceList("瀛欒儭娌�");
- initeWaterPrimitiveView();
+ try {
+ await getData();
+ await loadDeviceList(selectValue.value);
+ initeWaterPrimitiveView();
+ } finally {
+ isLoading.value = false;
+ }
});
onBeforeRouteUpdate((to, from, next) => {
@@ -81,6 +116,7 @@
}
}
);
+
const deviceListAll = ref([]);
const deviceEntities = ref([]);
const handleCleanup = () => {
@@ -111,6 +147,7 @@
// 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃
const loadDeviceList = async (areaName) => {
try {
+ isLoading.value = true;
handleCleanup();
// const res = await getDeviceInfo();
// const allDevices = res.data.pageData;
@@ -122,6 +159,8 @@
initializeDevicePoints();
} catch (error) {
console.error("鍔犺浇璁惧淇℃伅澶辫触", error);
+ } finally {
+ isLoading.value = false;
}
};
@@ -136,29 +175,18 @@
// console.log(deviceListAll.value);
};
+const selectValue1 = ref("鍖椾含甯�");
+
+const BJoptions = ref([]);
+
const selectValue = ref("瀛欒儭娌�");
const options = ref([
- {
- value: "瀛欒儭娌�",
- label: "瀛欒儭娌�",
- },
- {
- value: "楸兼按娲炲悗娌�",
- label: "楸兼按娲炲悗娌�",
- },
- {
- value: "浜庡瑗挎矡",
- label: "浜庡瑗挎矡",
- },
- {
- value: "鍖楁渤娌�",
- label: "鍖楁渤娌�",
- },
- {
- value: "榫欐硥宄潙",
- label: "榫欐硥宄潙",
- },
+ { value: "瀛欒儭娌�", label: "瀛欒儭娌�" },
+ { value: "楸兼按娲炲悗娌�", label: "楸兼按娲炲悗娌�" },
+ { value: "浜庡瑗挎矡", label: "浜庡瑗挎矡" },
+ { value: "鍖楁渤娌�", label: "鍖楁渤娌�" },
+ { value: "榫欐硥宄潙", label: "榫欐硥宄潙" },
]);
const treeProps = {
@@ -193,6 +221,7 @@
children: typeMap[typeName],
}));
});
+
function handleTreeNodeClick(data) {
// 鍙湁璁惧鑺傜偣鎵嶅鐞嗙偣鍑讳簨浠�
if (!data.children) {
@@ -209,7 +238,6 @@
}
}
</script>
-
<style lang="less" scoped>
.device {
position: absolute;
@@ -220,11 +248,67 @@
z-index: 99;
}
+.left-top {
+ height: 40px;
+ line-height: 40px;
+ color: white;
+ font-size: 16px;
+ font-weight: bold;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
.device-content {
padding: 10px;
box-sizing: border-box;
- overflow-y: auto;
height: calc(100% - 70px);
+ position: relative;
+}
+
+.tree-container {
+ position: relative;
+ height: calc(100% - 80px);
+ margin-top: 10px;
+ overflow-y: auto;
+}
+
+.loading-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ // background-color: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 100;
+ // border-radius: 4px;
+}
+
+.loading-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #fff;
+}
+
+.loading-icon {
+ font-size: 24px;
+ margin-bottom: 8px;
+ animation: rotating 2s linear infinite;
+}
+
+.loading-text {
+ font-size: 14px;
+}
+
+@keyframes rotating {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
}
.device-tree {
@@ -260,21 +344,12 @@
color: #fff;
}
-.device-item-icon {
- background: url("@/assets/img/menu/locationicon.png") no-repeat;
- background-position: 5px 5px;
- width: 30px;
- height: 30px;
- margin-right: 5px;
-}
-
.device-item-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
-// 淇濇寔鍘熸湁鐨勯�夋嫨鍣ㄦ牱寮�
:deep(.el-select__placeholder) {
color: white;
}
@@ -282,7 +357,7 @@
:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
color: white !important;
- background-color: rgb(38, 124, 124, 0.5);
+ background-color: rgba(38, 124, 124, 0.5);
}
:deep(.el-tree-node__content) {
diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue
index ce8911a..1830e67 100644
--- a/src/components/menu/Location.vue
+++ b/src/components/menu/Location.vue
@@ -5,13 +5,30 @@
</div>
<div class="left-content district-content">
+ <div style="margin-left: 5px; margin-bottom: 5px">
+ <span style="color: white">鍖椾含甯傦細</span>
+ <el-select
+ @change="handleChange1"
+ v-model="selectValue1"
+ placeholder="Select"
+ size="mini"
+ style="width: 240px"
+ >
+ <el-option
+ v-for="item in BJoptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
<div style="margin-left: 5px">
<span style="color: white">閲嶇偣娌燂細</span>
<el-select
@change="handleChange"
v-model="selectValue"
placeholder="Select"
- size="large"
+ size="mini"
style="width: 240px"
>
<el-option
@@ -24,10 +41,13 @@
</div>
<!-- 婊氬姩鍖哄煙 -->
- <div style="overflow-y: auto; height: 95%">
+ <div style="overflow-y: auto; height: 91%; position: relative">
<!-- 鍔犺浇閬僵灞� -->
<div v-if="loading" class="loading-overlay">
- <div class="spinner"></div>
+ <div class="loading-content">
+ <el-icon class="loading-icon"><Loading /></el-icon>
+ <span class="loading-text">鏁版嵁鍔犺浇涓�...</span>
+ </div>
</div>
<div
v-else
@@ -50,6 +70,8 @@
import { useSimStore } from "@/store/simulation";
import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤
import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import { Loading } from "@element-plus/icons-vue";
+
const simStore = useSimStore();
// onBeforeRouteUpdate((to, from, next) => {
// if (to.path !== "/yhgl") {
@@ -65,6 +87,10 @@
}
});
const selectValue = ref("瀛欒儭娌�");
+
+const selectValue1 = ref("鍖椾含甯�");
+
+const BJoptions = ref([]);
const options = ref([
{
@@ -187,7 +213,7 @@
onMounted(() => {
handleCleanup();
- initeWaterPrimitiveView();
+ // initeWaterPrimitiveView();
// 榛樿鍏堟鏌ヤ竴閬嶆暟鎹�
if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
filterDataByArea("瀛欒儭娌�");
@@ -199,35 +225,6 @@
</script>
<style lang="less" scoped>
-.loading-overlay {
- position: absolute;
- top: 120px;
- left: 0px;
- right: 0px;
- bottom: 10px;
- background-color: rgba(47, 44, 44, 0.5);
- /* 鍗婇�忔槑閬僵 */
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 999;
-}
-
-.spinner {
- width: 40px;
- height: 40px;
- border: 4px solid #fff;
- border-top: 4px solid transparent;
- border-radius: 50%;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- to {
- transform: rotate(360deg);
- }
-}
-
.district {
position: absolute;
width: 345px;
@@ -246,6 +243,8 @@
.district-content {
padding: 10px;
box-sizing: border-box;
+ height: calc(100% - 70px);
+ position: relative;
}
.district-item-icon {
@@ -263,12 +262,44 @@
overflow: hidden;
text-overflow: ellipsis;
}
+.loading-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ // background-color: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 100;
+ // border-radius: 4px;
+}
+
+.loading-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #fff;
+}
+
+.loading-icon {
+ font-size: 24px;
+ margin-bottom: 8px;
+ animation: rotating 2s linear infinite;
+}
.loading-text {
- color: white;
font-size: 14px;
- text-align: center;
- margin-top: 20px;
+}
+
+@keyframes rotating {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
}
/deep/ .el-select__placeholder {
diff --git a/src/store/simulation.js b/src/store/simulation.js
index 56c028e..d5c460d 100644
--- a/src/store/simulation.js
+++ b/src/store/simulation.js
@@ -82,8 +82,25 @@
}
}
+ const flyToHomeView = () => {
+ const view = {
+ destination: {
+ x: -2355432.569004413,
+ y: 4687573.191838412,
+ z: 4098726.315265574,
+ },
+ orientation: {
+ pitch: -0.9541030830183503,
+ roll: 0.00031421159527500464,
+ heading: 6.140424766644804,
+ },
+ };
+ viewer.scene.camera.flyTo(view);
+ }
+
const startYHGL = () => {
init()
+ flyToHomeView()
locationShow.value = true
}
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index 5c8a762..afd104f 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -64,7 +64,6 @@
EventBus.on("select-geom", ({ geom, flyHeight, shouldShowFill }) => {
flyToHeight.value = flyHeight;
ShowFill.value = shouldShowFill;
- console.log(ShowFill.value, "ShowFill.valueShowFill.value");
const coordsStr = geom
.replace("MULTIPOLYGON(((", "") // 鍘绘帀寮�澶�
.replace(")))", ""); // 鍘绘帀缁撳熬
@@ -141,7 +140,7 @@
hierarchy: Cesium.Cartesian3.fromDegreesArray(
geoJson.geometry.coordinates[0][0].flat()
),
- material: ShowFill
+ material: ShowFill
? Cesium.Color.RED.withAlpha(0.3) // 鍗婇�忔槑绾㈣壊濉厖
: new Cesium.ColorMaterialProperty(Cesium.Color.TRANSPARENT), // 濡傛灉涓嶉渶瑕佸～鍏咃紝鍒欎娇鐢ㄩ�忔槑鏉愯川
outline: true,
@@ -150,7 +149,7 @@
clampToGround: true, // 璐村湴鏄剧ず
},
});
-
+
previousEntities.push(polygonEntity);
// 椋炲悜涓績鐐�
@@ -399,10 +398,12 @@
});
});
}
+
+const validPaths = ["/", "/yhgl"];
watch(
() => route.fullPath,
(val) => {
- if (val != "/") {
+ if (!validPaths.includes(val)) {
// clusterLayer.dataSource.show = false
htmlEntityList.forEach((item) => {
item.show = false;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index cc0b587..cea0bbe 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -63,7 +63,6 @@
const route = useRoute();
const simStore = useSimStore();
-const backHome = ref(false);
// 鎺ユ敹鏉ヨ嚜 ComponentA 鐨勪簨浠讹紝骞舵洿鏂� isFlying
function handleBackToHome() {
diff --git a/src/views/nav/Navigation.vue b/src/views/nav/Navigation.vue
index 7685fd7..5fe09b1 100644
--- a/src/views/nav/Navigation.vue
+++ b/src/views/nav/Navigation.vue
@@ -1,23 +1,6 @@
<template>
<div class="navigation">
- <div class="navigation-contents" v-show="!simBtn">
- <div
- class="navigation-item bg1"
- :class="{ 'bg1-active': currentIndexs == 1 }"
- @click="handleClickHome(1)"
- >
- 缁煎悎灞曠ず
- </div>
- <div
- class="navigation-item bg2"
- :class="{ 'bg2-active': currentIndexs == 2 }"
- @click="handleClickHome(2)"
- style="margin-left: 15%"
- >
- 妯℃嫙浠跨湡
- </div>
- </div>
- <div class="navigation-content" v-show="simBtn">
+ <div class="navigation-content">
<div
class="navigation-item bg1"
:class="{ 'bg1-active': currentIndex == 1 }"
@@ -54,9 +37,8 @@
<script setup>
import { useRouter } from "vue-router";
import { useSimStore } from "@/store/simulation";
-import { ref,watch} from "vue";
+import { ref, watch } from "vue";
-const simBtn = ref(false);
const currentIndexs = ref(1);
const router = useRouter();
const simStore = useSimStore();
@@ -90,21 +72,13 @@
router.push(routes[index]);
};
watch(
- () => simStore.backToHome,
- (newValue) => {
- if (newValue) {
- simBtn.value = false;
- simStore.setBackToHome(false);
- }
+ () => simStore.backToHome,
+ (newValue) => {
+ if (newValue) {
+ simStore.setBackToHome(false);
}
-);
-const handleClickHome = (index) => {
- if (index === 1) {
- router.push("/");
- } else {
- simBtn.value = true;
}
-};
+);
</script>
<style lang="less" scoped>
diff --git a/src/views/yhgl.vue b/src/views/yhgl.vue
index 087e943..90953e9 100644
--- a/src/views/yhgl.vue
+++ b/src/views/yhgl.vue
@@ -1,22 +1,22 @@
<template>
- <Location />
- <Legend class="legend" />
-
+ <!-- <GisView /> -->
+ <Location />
+ <Legend class="legend" />
</template>
<script setup>
-import Location from "@/components/menu/Location.vue"
+import Location from "@/components/menu/Location.vue";
import Legend from "@/components/tools/Legend_yhgl.vue";
-
+import GisView from "./GisView.vue";
</script>
<style lang="less" scoped>
.legend {
- // background: url("@/assets/img/right/rightbg.png");
- color: white;
- position: fixed;
- bottom: 6%;
- right: 1%;
- z-index: 3333;
+ // background: url("@/assets/img/right/rightbg.png");
+ color: white;
+ position: fixed;
+ bottom: 6%;
+ right: 1%;
+ z-index: 3333;
}
@import url("../assets/css/home.css");
--
Gitblit v1.9.3