<template>
|
<!-- <Viewer /> -->
|
<!-- <UeView /> -->
|
<GisView />
|
<Flow v-if="flowShow" @video-ended="flowShow = false" />
|
<Screen @showWeatherDetail="weatherShow = true" />
|
<Navigation />
|
<!-- <Left v-if="leftShow" />
|
<Right v-if="rightShow" /> -->
|
|
<Tools
|
:style="
|
rightRiverShow || showDangerAssess
|
? { right: '400px' }
|
: { right: '12px' }
|
"
|
class="tools"
|
/>
|
<!-- <Message v-if="messageShow" class="messageTool" /> -->
|
<Announcement v-show="$route.fullPath != '/'" class="announcementTool" />
|
<!-- <Location v-if="locationShow" class="locationTool" /> -->
|
<!-- <Function v-if="functionShow" class="functionTool" /> -->
|
<Table v-if="tableShow" class="tableTool" />
|
<!-- <RightRiver v-if="rightRiverShow" @close="flowShow = false" /> -->
|
<!-- <River class="plottingTool" /> -->
|
<ImagePreview v-if="showPreview" />
|
<!-- <Weather v-if="weatherShow" @close="weatherShow = false" /> -->
|
<Bar v-if="barShow" @close="barShow = false" />
|
<Detail v-if="showDetail" />
|
</template>
|
|
<script setup>
|
import { computed, onMounted, ref, getCurrentInstance } from "vue";
|
import { useRoute } from "vue-router";
|
import { useSimStore } from "@/store/simulation";
|
import { storeToRefs } from "pinia";
|
import Screen from "./Screen.vue";
|
// import Viewer from "./Viewer.vue"
|
import UeView from "./UeView.vue";
|
import Navigation from "./nav/Navigation.vue";
|
// import Left from "./left/Left.vue";
|
// import Right from "./right/Right.vue";
|
import Tools from "@/components/tools/Tools.vue";
|
// import Message from "@/components/tools/Message.vue";
|
import Announcement from "@/components/tools/Announcement.vue";
|
// import Function from "@/components/menu/Function.vue";
|
// import Location from "@/components/menu/Location.vue";
|
import Table from "@/components/tools/Table.vue";
|
import Flow from "./Flow.vue";
|
// import RightRiver from "./right/RightRiver.vue";
|
// import River from "@/components/tools/River.vue";
|
import ImagePreview from "@/components/tools/ImagePreview.vue";
|
// import Weather from "@/components/tools/Weather.vue";
|
import Bar from "@/components/tools/Bar.vue";
|
import GisView from "./GisView.vue";
|
// import Device from "@/components/menu/Device.vue";
|
import Detail from "@/components/tools/Detail.vue";
|
// import ResultAssess from "@/components/monifangzhen/ResultAssess.vue";
|
// import DangerAssess from "@/components/monifangzhen/DangerAssess.vue";
|
import { showDeviceDetail } from "@/store";
|
import { setupTokenRefresh, getDangerPoint, getAllCode } from "@/api/hpApi.js";
|
import { convertToWKT } from "@/utils/wktUtils";
|
import { getDeviceInfoSHG, getWeather } from "@/api/hpApi";
|
|
const route = useRoute();
|
const simStore = useSimStore();
|
|
// 接收来自 ComponentA 的事件，并更新 isFlying
|
function handleBackToHome() {
|
backHome.value = false;
|
}
|
// 从 store 中解构需要的状态
|
const {
|
flowShow,
|
weatherShow,
|
messageShow,
|
tableShow,
|
rightRiverShow,
|
showPreview,
|
barShow,
|
showDangerAssess,
|
} = storeToRefs(simStore);
|
const { init, startYHGL, startZHJC, startMNFZ, startMNPG } = simStore;
|
// 模拟的经纬度数组
|
const multiPolygonCoordinates = [
|
[
|
[120.123456, 30.654321],
|
[120.234567, 30.765432],
|
[120.345678, 30.876543],
|
[120.123456, 30.654321], // 闭合点
|
],
|
[
|
[121.111111, 31.222222],
|
[121.333333, 31.444444],
|
[121.555555, 31.666666],
|
[121.111111, 31.222222], // 闭合点
|
],
|
];
|
|
// 计算属性
|
const showDetail = computed(() => showDeviceDetail.value);
|
|
function groupTopWithLeafNodes(dataArray) {
|
const result = {};
|
|
function traverse(nodes, topLevelName = null) {
|
if (!Array.isArray(nodes)) return;
|
|
for (const node of nodes) {
|
const isLeaf = !node.children || node.children.length === 0;
|
|
// 如果是顶层节点，记录它的名字作为 key
|
if (!topLevelName && !isLeaf) {
|
topLevelName = node.nameChn;
|
if (!result[topLevelName]) {
|
result[topLevelName] = [];
|
}
|
}
|
|
// 如果是叶子节点，加入对应数组
|
if (isLeaf && topLevelName) {
|
result[topLevelName].push({
|
name: node.nameChn,
|
code: node.code,
|
});
|
}
|
|
// 继续递归子节点（保持当前顶层名称）
|
if (node.children && node.children.length > 0) {
|
traverse(node.children, topLevelName);
|
}
|
}
|
}
|
|
// 遍历整个大数组中的每一项（即每一个区域）
|
for (const item of dataArray) {
|
if (item && item.children && Array.isArray(item.children)) {
|
traverse([item]); // 把当前项包装成数组，方便统一处理
|
}
|
}
|
|
return result;
|
}
|
onMounted(async () => {
|
getAllCode().then((res) => {
|
// 北京市所有村以及街道code
|
simStore.townCodeAll = groupTopWithLeafNodes(res.data[0].children);
|
console.log(simStore.townCodeAll, "中科软接口获取乡镇code");
|
});
|
setupTokenRefresh(); // 获取宏图token
|
// getSimData(); //测试tr后端
|
// 获取隐患点列表（因为中科软后端接口获取加载时间较长）
|
getDangerPoint("110116110000").then((res) => {
|
simStore.DangerPoint = res.data.pageData;
|
});
|
|
getDeviceInfoSHG(null).then((res) => {
|
simStore.devices = res.data.pageData;
|
});
|
try {
|
const wktResult = convertToWKT(multiPolygonCoordinates);
|
// console.log(wktResult,'a');
|
// 输出: MULTIPOLYGON(((120.123456 30.654321,120.234567 30.765432,120.345678 30.876543,120.123456 30.654321)))
|
} catch (error) {
|
console.error(error.message);
|
}
|
});
|
// 初始化
|
init();
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../assets/css/home.css");
|
</style>
|
