From bf0eb543e2deab8a1629dd2a46f8e1cd191531e1 Mon Sep 17 00:00:00 2001 From: wangjuncheng <1> Date: 星期四, 17 七月 2025 15:22:01 +0800 Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb --- src/views/mnfz.vue | 611 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 595 insertions(+), 16 deletions(-) diff --git a/src/views/mnfz.vue b/src/views/mnfz.vue index 14940d4..6a243ed 100644 --- a/src/views/mnfz.vue +++ b/src/views/mnfz.vue @@ -1,13 +1,20 @@ <template> <Left @start="startSimulate" @end="endSimulate" /> - <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" /> + <echartInfo + :isDynamicMode="isDynamicMode" + :isFinish="isFinish" + v-if="rightRiverShow" + /> <TimeLine v-if="showWaterSimulate" @time-update="timeUpdate" @is-playing="isPlaying" :waterSimulateParams="waterSimulateParams" @playbackFinished="playbackFinished" + @end="endSimulate" + @isColorRender="isColorRender" /> + <LegendMNFZ class="legend" v-if="isShowLegend"></LegendMNFZ> <DebuffDetail v-if="showDebuffDetail" @open="openDetail" @@ -17,62 +24,524 @@ </template> <script setup> -import { ref, onMounted, onUnmounted } from "vue"; +import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎 +import { ref, onMounted, onUnmounted, provide } from "vue"; import TimeLine from "@/components/menu/TimeLine.vue"; +import LegendMNFZ from "@/components/tools/Legend_mnfz.vue"; import Left from "./left/Left.vue"; import echartInfo from "@/components/monifangzhen/echartInfo.vue"; import DebuffDetail from "@/components/tools/DebuffDetail.vue"; import DebuffTable from "@/components/tools/DebuffTable.vue"; import { getMaxInfluenceArea } from "@/api/index"; - import { createPoint, geomToGeoJSON } from "@/utils/map.js"; +import { + loadAreaPolygon, + clearAreaPolygon, + convertToGeoJson, +} from "@/utils/area"; + +import colors from "@/assets/img/left/colors3.png"; + +import danger from "@/assets/img/left/danger.png"; import { checkedKeys } from "@/store/index"; + +import { useSimStore } from "@/store/simulation"; +import { storeToRefs } from "pinia"; +import { getSafePoint } from "@/api/hpApi"; +const simStore = useSimStore(); +const { rightRiverShow } = storeToRefs(simStore); + const waterSimulateParams = ref({}); const showWaterSimulate = ref(false); const showDebuffDetail = ref(false); const showDebuffTable = ref(false); const isDynamicMode = ref(false); const isFinish = ref(true); +const isShowLegend = ref(false); + +const treeMap = new Map(); + +// 鎻愪緵鏂规硶缁欐墍鏈夊瓙缁勪欢 +provide("simulateActions", { + startSimulate, + endSimulate, +}); function startSimulate(form) { - // console.log("form", form); showWaterSimulate.value = true; + rightRiverShow.value = true; waterSimulateParams.value = form; } function endSimulate() { - // showDebuffDetail.value = true + rightRiverShow.value = false; + showDebuffDetail.value = false; + clearTrailLine(); + removeEmergencyPoints(); removeDataSources(); + showWaterSimulate.value = false; setTimeout(() => { - showWaterSimulate.value = false; isDynamicMode.value = false; - }, 2000); + // 娓呴櫎濞佽儊瀵硅薄琛ㄦ牸鍐呭 + EventBus.emit("reset-table"); + // 娓呴櫎闄嶉洦鏁版嵁鍐呭 + EventBus.emit("clear-echart"); + }, 1000); } const MaxInfluenceAreaList = ref([]); +// 鍒濆鍖� dataSources 鍏ㄥ眬鏁扮粍 const dataSources = []; -function getTimeMarkers() { - // 灏嗘敼 list鏁版嵁鐨� gemo EPSG:4548 鍧愭爣 杞负 wgs84 鍧愭爣绯荤殑 geojson 鏁版嵁 +async function getTimeMarkers() { const list = MaxInfluenceAreaList.value; - list.forEach((item, index) => { - const geosjon = geomToGeoJSON(item.geom); - Cesium.GeoJsonDataSource.load(geosjon).then((dataSource) => { + try { + const loadPromises = list.map(async (item) => { + const geojson = JSON.parse(item.geom); + const dataSource = await Cesium.GeoJsonDataSource.load(geojson); + dataSource.entities.values.forEach((entity) => { + if (!entity.properties) { + entity.properties = new Cesium.PropertyBag(); + } + entity.properties.addProperty("id", item.id); + entity.properties.addProperty("warningLevel", item.warningLevel); + entity.properties.addProperty("zoneId", item.zoneId); + entity.polygon.outlineColor = Cesium.Color.YELLOW; + entity.polygon.outline = true; + const position = Cesium.Cartesian3.fromDegrees(item.X, item.Y, item.Z); + const billboardEntity = viewer.entities.add({ + position: position, + billboard: { + image: danger, + scale: 1.0, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition( + 0, + 1500 + ), + }, + }); + dataSource.entities.add(billboardEntity); + }); viewer.dataSources.add(dataSource); dataSources.push(dataSource); }); - }); + await Promise.all(loadPromises); + setupRowClickListener(dataSources); + } catch (error) {} } +// 娓呴櫎闅愭偅鐐� function removeDataSources() { - dataSources.forEach((dataSource) => { + dataSources.forEach((dataSource, index) => { + // 閬嶅巻褰撳墠鏁版嵁婧愮殑鎵�鏈夊疄浣� + const entities = dataSource.entities.values; + entities.forEach((entity, entityIndex) => { + if (entity.billboard) { + viewer.entities.remove(entity); + } + }); viewer.dataSources.remove(dataSource); }); + dataSources.length = 0; } + +// 閬块櫓鍦烘墍锛岀豢鑹插瘜鏂囨湰 +async function addTetrahedron(visible) { + const emergencyAreaList = []; + + try { + let codesToFetch = []; + + // 鍒ゆ柇褰撳墠閫夋嫨鍖哄煙鏄惁涓衡�滃尯鈥� + if (simStore.selectedScheme.areaName.includes("鍖�")) { + // 浠� simStore.townCodeAll 涓嬁鍒拌鍖轰笅鐨勬墍鏈変埂闀� code + const townList = simStore.townCodeAll[simStore.selectedScheme.areaName]; + + // 鍋囪 townList 鏄竴涓暟缁勶紝閲岄潰姣忎釜鍏冪礌鏈� .code 瀛楁 + if (Array.isArray(townList)) { + codesToFetch = townList.map((item) => item.code); + } else { + console.warn("鏈壘鍒板搴旂殑涔¢晣鍒楄〃"); + return; + } + } else { + // 涓嶆槸鈥滃尯鈥濓紝灏变娇鐢ㄩ粯璁� code + codesToFetch = ["110116110218"]; + } + + // 骞跺彂璇锋眰鎵�鏈� code 鐨勯伩闄╃偣鏁版嵁 + const allRes = await Promise.all( + codesToFetch.map((code) => getSafePoint(code)) + ); + + // 鍚堝苟缁撴灉锛堝亣璁炬瘡涓� res.data 鏄竴涓暟缁勶級 + const allSafePoints = allRes.flatMap((res) => res.data); + + // 杞崲涓� GeoJSON锛堝鏋滄瘡涓� data 閮介渶瑕佸崟鐙鐞嗭級 + const geoJsonData = convertToGeoJson(allSafePoints); + + // 鍔犺浇搴曞眰闈㈢墖锛堝杈瑰舰锛� + const polygonEntities = await loadAreaPolygon(geoJsonData, true); + emergencyAreaList.push(...polygonEntities); + + // 娣诲姞缁胯壊瀵屾枃鏈爣娉� + const textPromises = allSafePoints.map(async (item) => { + const point = earthCtrl.factory.createRichTextPoint( + "閬块櫓鍦烘墍", + [item.lon, item.lat, 540], + { + distanceDisplayCondition: + new SmartEarth.Cesium.DistanceDisplayCondition(0, 2000), + fontColor: "#fff", + fontSize: 20, + }, + "0" + ); + emergencyAreaList.push(point); + }); + + await Promise.all(textPromises); + + // 灏嗙粨鏋滀繚瀛樺埌 treeMap + treeMap.set("閬块櫓鍦烘墍", emergencyAreaList); + } catch (error) { + console.error("鍔犺浇閬块櫓鍦烘墍澶辫触锛�", error); + } +} + +// 鍒犻櫎閬块櫓鍦烘墍鐨勫瘜鏂囨湰瀹炰綋 +function removeEmergencyPoints() { + const emergencyAreaList = treeMap.get("閬块櫓鍦烘墍"); // 鑾峰彇瀛樺偍鐨勯伩闄╁満鎵�瀹炰綋鍒楄〃 + if (emergencyAreaList && emergencyAreaList.length > 0) { + emergencyAreaList.forEach((entity) => { + if (entity && typeof entity.deleteObject === "function") { + // 濡傛灉鏈� deleteObject 鏂规硶锛屼紭鍏堣皟鐢� + entity.deleteObject(); + } else if (entity && typeof entity.clear === "function") { + // 濡傛灉鏈� clear 鏂规硶锛岃皟鐢� clear + entity.clear(); + } else if (entity && earthCtrl && earthCtrl.coreMap) { + // 娓呴櫎閬块櫓鐐圭豢鑹查潰鐗� + clearAreaPolygon(); + // 濡傛灉鏄� Cesium 瀹炰綋锛屼娇鐢� coreMap.entities.remove 绉婚櫎 + earthCtrl.coreMap.entities.remove(entity); + } + }); + treeMap.set("閬块櫓鍦烘墍", []); // 娓呯┖瀛樺偍鐨勯伩闄╁満鎵�鍒楄〃 + } +} + +// 铏氱嚎閬块櫓璺嚎 +// const position1 = [ +// { +// x: -2172867.1941179745, +// y: 4339567.67446477, +// z: 4125575.4386990573, +// }, +// { +// x: -2172867.1941179745, +// y: 4339567.67446477, +// z: 4125575.4386990573, +// }, +// { +// x: -2172700.396781143, +// y: 4339454.037139385, +// z: 4125736.906847591, +// }, +// { +// x: -2172744.4001612393, +// y: 4339361.421455601, +// z: 4125804.324253885, +// }, +// { +// x: -2172824.3311673277, +// y: 4339274.56533081, +// z: 4125844.432999503, +// }, +// { +// x: -2172822.298957661, +// y: 4339226.700024104, +// z: 4125896.451233209, +// }, +// { +// x: -2172776.0573917977, +// y: 4339194.843872361, +// z: 4125947.9581145854, +// }, +// { +// x: -2172755.2828807314, +// y: 4339149.410126468, +// z: 4125995.9286539108, +// }, +// { +// x: -2172660.9533022284, +// y: 4339085.401362197, +// z: 4126101.3750262205, +// }, +// { +// x: -2172613.460204307, +// y: 4339073.342332504, +// z: 4126134.479399525, +// }, +// { +// x: -2172583.664140033, +// y: 4339085.533980615, +// z: 4126140.3272964833, +// }, +// { +// x: -2172348.977405535, +// y: 4338967.122025027, +// z: 4126358.7532469626, +// }, +// { +// x: -2172276.019363938, +// y: 4338943.999121099, +// z: 4126416.339696519, +// }, +// { +// x: -2172178.064812976, +// y: 4338928.9482959965, +// z: 4126475.798078439, +// }, +// { +// x: -2172171.5451145098, +// y: 4338941.186930828, +// z: 4126466.425301899, +// }, +// { +// x: -2172177.9565195283, +// y: 4338940.424956708, +// z: 4126463.8688932694, +// }, +// ]; + +///////////////////////////// 娴佸厜绾块伩闄╄矾绾�///////////////////////////// +let pathLayer = null; // 瀛樺偍鍒涘缓鐨勫浘灞� +function showLine() { + // 鍒涘缓鏂板浘灞� + pathLayer = earthCtrl.factory.createPathLayer({ + url: "/json/line.json", + color: "#00FF00", + width: 12.0, + pointColor: "#FFFF73", + speed: 2, + far: 50000, + }); +} + +// 娓呴櫎閬块櫓璺嚎 +function clearTrailLine() { + if (pathLayer) { + pathLayer.clear(); + } + // if (item && typeof item.deleteObject === "function") { + // item.deleteObject(); + // } else if (item && typeof item.clear === "function") { + // item.clear(); + // } else if (item && earthCtrl && earthCtrl.coreMap) { + // earthCtrl.coreMap.entities.remove(item); + // } + // }); + pathLayer = null; +} +///////////////////////////// 娴佸厜绾块伩闄╄矾绾�///////////////////////////// +///////////////////////////// 绠ご鐗堥伩闄╄矾绾�///////////////////////////// +// let TrailLine = []; +// async function showLine() { +// const position1 = [ +// { +// x: -2172867.1941179745, +// y: 4339567.67446477, +// z: 4125575.4386990573, +// }, +// { +// x: -2172867.1941179745, +// y: 4339567.67446477, +// z: 4125575.4386990573, +// }, +// { +// x: -2172700.396781143, +// y: 4339454.037139385, +// z: 4125736.906847591, +// }, +// { +// x: -2172744.4001612393, +// y: 4339361.421455601, +// z: 4125804.324253885, +// }, +// { +// x: -2172824.3311673277, +// y: 4339274.56533081, +// z: 4125844.432999503, +// }, +// { +// x: -2172822.298957661, +// y: 4339226.700024104, +// z: 4125896.451233209, +// }, +// { +// x: -2172776.0573917977, +// y: 4339194.843872361, +// z: 4125947.9581145854, +// }, +// { +// x: -2172755.2828807314, +// y: 4339149.410126468, +// z: 4125995.9286539108, +// }, +// { +// x: -2172660.9533022284, +// y: 4339085.401362197, +// z: 4126101.3750262205, +// }, +// { +// x: -2172613.460204307, +// y: 4339073.342332504, +// z: 4126134.479399525, +// }, +// { +// x: -2172583.664140033, +// y: 4339085.533980615, +// z: 4126140.3272964833, +// }, +// { +// x: -2172348.977405535, +// y: 4338967.122025027, +// z: 4126358.7532469626, +// }, +// { +// x: -2172276.019363938, +// y: 4338943.999121099, +// z: 4126416.339696519, +// }, +// { +// x: -2172178.064812976, +// y: 4338928.9482959965, +// z: 4126475.798078439, +// }, +// { +// x: -2172171.5451145098, +// y: 4338941.186930828, +// z: 4126466.425301899, +// }, +// { +// x: -2172177.9565195283, +// y: 4338940.424956708, +// z: 4126463.8688932694, +// }, +// ]; +// const position2 = [ +// { +// x: -2171569.1995107993, +// y: 4338474.198855222, +// z: 4127198.938949332, +// }, +// { +// x: -2171596.1458028457, +// y: 4338508.014766663, +// z: 4127160.0148374927, +// }, +// { +// x: -2171663.8877153755, +// y: 4338521.115613981, +// z: 4127111.758040112, +// }, +// { +// x: -2171815.8899659193, +// y: 4338612.264105235, +// z: 4126950.0428421027, +// }, +// { +// x: -2171839.2819730053, +// y: 4338700.186548507, +// z: 4126845.712987762, +// }, +// { +// x: -2171792.4015423204, +// y: 4338769.135301243, +// z: 4126802.7938519563, +// }, +// { +// x: -2171943.7495626938, +// y: 4338851.9854133595, +// z: 4126649.5658632508, +// }, +// { +// x: -2172026.1490882114, +// y: 4338896.137127666, +// z: 4126571.6284971433, +// }, +// { +// x: -2172182.2854437083, +// y: 4338931.410179759, +// z: 4126471.0308961133, +// }, +// { +// x: -2172175.3377184337, +// y: 4338941.338674108, +// z: 4126464.288707359, +// }, +// { +// x: -2172175.3377184337, +// y: 4338941.338674108, +// z: 4126464.288707359, +// }, +// ]; +// // 瀹氫箟涓�涓嚱鏁版潵鍒涘缓杞ㄨ抗绾� +// function createTrailLine(positions, color = "#ffffff") { +// let LineInterpolation = earthCtrl.core.LineInterpolation( +// earthCtrl.coreMap, +// { +// positions: positions, +// num: 50, +// getHeight: true, +// } +// ); + +// let min = LineInterpolation.height; +// let max = min.map((item) => item + 35); + +// console.log(min, max); + +// let _TrailLine = earthCtrl.factory.createTrailLineWall( +// LineInterpolation.positions, +// { +// maximumHeights: max, +// minimumHeights: min, +// color: color, // 绾块鑹� +// url: colors, // 濡傛灉娌℃湁璁剧疆 colors锛岃鐢ㄧ函鑹叉垨鍒犻櫎姝よ +// } +// ); +// TrailLine.push(_TrailLine); +// } + +// // 鍒嗗埆鍒涘缓涓ゆ潯杞ㄨ抗绾� +// createTrailLine(position1, "#ff0000"); // 绾㈣壊杞ㄨ抗 +// createTrailLine(position2, "#0000ff"); // 钃濊壊杞ㄨ抗 +// } +// // 娓呴櫎杞ㄨ抗绾垮璞� +// function clearTrailLine() { +// TrailLine.forEach((item, index) => { +// if (item && typeof item.deleteObject === "function") { +// item.deleteObject(); +// } else if (item && typeof item.clear === "function") { +// item.clear(); +// } else if (item && earthCtrl && earthCtrl.coreMap) { +// earthCtrl.coreMap.entities.remove(item); +// } +// }); +// TrailLine = []; +// } +///////////////////////////// 绠ご鐗堥伩闄╄矾绾�///////////////////////////// + function timeUpdate(percentage) { - if (percentage > 99) { + if (percentage > 99.9) { if (showDebuffDetail.value) { return; } - checkedKeys.value = ["閬块櫓鐐�"]; + checkedKeys.value = ["閬块櫓鍦烘墍"]; showDebuffDetail.value = true; getTimeMarkers(); + addTetrahedron(); + showLine(); } } function openDetail() { @@ -95,13 +564,123 @@ function playbackFinished(val) { isFinish.value = val; } +function isColorRender(val) { + // console.log('杩欓噷鎵撳嵃鏄惁鏄剧ず姘翠綅鍥句緥鐨勫�硷細',val); + isShowLegend.value = val; +} +// 瀹氫箟鍏ㄥ眬鍙橀噺瀛樺偍褰撳墠姝e湪闂姩鐨勯潰鐗� +let flashingPolygon = null; + +// 娣诲姞浜嬩欢鐩戝惉鍣紝鎺ユ敹鏉ヨ嚜琛ㄦ牸缁勪欢鐨勪簨浠� +function setupRowClickListener(dataSources) { + if (!Array.isArray(dataSources) || dataSources.length === 0) { + return; + } + EventBus.on("row-clicked", (id) => { + const clickedEntity = findEntityById(id, dataSources); + if (clickedEntity) { + // 濡傛灉鐐瑰嚮鐨勬槸鍚屼竴涓疄浣擄紝鍒欏仠姝㈤棯鍔ㄥ苟娓呯┖閫夋嫨 + if (flashingPolygon && flashingPolygon === clickedEntity) { + stopFlashing(flashingPolygon); + flashingPolygon = null; // 娓呯┖褰撳墠閫変腑鐨勫疄浣� + return; + } + // 濡傛灉鏈夊叾浠栧疄浣撴鍦ㄩ棯鍔紝鍏堝仠姝㈠畠鐨勯棯鍔� + if (flashingPolygon && flashingPolygon !== clickedEntity) { + stopFlashing(flashingPolygon); + } + // 寮�濮嬫柊鐨勯棯鍔� + startFlashing(clickedEntity); + flashingPolygon = clickedEntity; + } else { + console.warn(`No entity found with ID: ${id}`); + } + }); +} + +// 鏍规嵁ID鏌ユ壘瀹炰綋 +function findEntityById(id, dataSources) { + if (!Array.isArray(dataSources) || dataSources.length === 0) { + return null; + } + console.log("Searching for ID:", id); + for (const dataSource of dataSources) { + const entities = dataSource.entities.values; + for (const entity of entities) { + const entityId = entity.properties?.id?.getValue(); + if (String(entityId) === String(id)) { + return entity; + } + } + } + return null; +} + +// 寮�濮嬮棯鍔ㄦ晥鏋� +function startFlashing(polygonEntity) { + // 瀛樺偍鍘熷棰滆壊 + const originalColor = polygonEntity.polygon.material.color.getValue(); + polygonEntity._originalColor = originalColor; // 灏嗗師濮嬮鑹蹭繚瀛樺埌瀹炰綋涓� + + // 鍒涘缓棰滆壊鍙樺寲鐨勫洖璋冨嚱鏁� + let isFlashing = true; // 鏍囪鏄惁姝e湪闂姩 + polygonEntity.polygon.material = new Cesium.ColorMaterialProperty( + new Cesium.CallbackProperty(() => { + if (!isFlashing) return originalColor; // 濡傛灉鍋滄闂姩锛屾仮澶嶅師濮嬮鑹� + // 鍒囨崲棰滆壊锛堜緥濡傜孩鑹插拰鍘熷棰滆壊浜ゆ浛锛� + const currentTime = Date.now(); + const flashColor = Cesium.Color.RED.withAlpha(1); // 闂姩棰滆壊 + return Math.floor(currentTime / 500) % 2 === 0 + ? flashColor + : originalColor; + }, false) + ); + + // 灏嗛棯鍔ㄧ姸鎬佷繚瀛樺埌瀹炰綋涓婏紝渚夸簬鍚庣画鎺у埗 + polygonEntity._isFlashing = isFlashing; +} + +// 鍋滄闂姩鏁堟灉 +function stopFlashing(polygonEntity) { + // 鎭㈠鍘熷棰滆壊 + const originalColor = polygonEntity._originalColor || Cesium.Color.WHITE; // 濡傛灉娌℃湁鍘熷棰滆壊锛岄粯璁や娇鐢ㄧ櫧鑹� + polygonEntity.polygon.material = new Cesium.ColorMaterialProperty( + originalColor + ); + + // 娓呯┖闂姩鐘舵�� + polygonEntity._isFlashing = false; + polygonEntity._originalColor = null; // 娓呴櫎淇濆瓨鐨勫師濮嬮鑹� +} onMounted(() => { + setupRowClickListener(); getMaxInfluenceAreaData(); }); onUnmounted(() => { endSimulate(); }); +// // 杞崲鍧愭爣绯伙紝绗涘崱灏斿潗鏍囪浆涓篧GS48 +// const positions = [[-2171569.1995107993, 4338474.198855222, 4127198.938949332]]; +// const wgs84Positions = positions.map((xyz) => { +// const cartesian = Cesium.Cartesian3.fromArray(xyz); +// const cartographic = Cesium.Cartographic.fromCartesian(cartesian); + +// // 寮у害杞搴� +// const lon = Cesium.Math.toDegrees(cartographic.longitude); +// const lat = Cesium.Math.toDegrees(cartographic.latitude); +// const height = cartographic.height; // 鍗曚綅锛氱背 + +// return [lon, lat, height]; +// }); </script> <style lang="less" scoped> @import url("../assets/css/home.css"); +.legend { + // background: url("@/assets/img/right/rightbg.png"); + color: white; + position: fixed; + bottom: 6%; + right: 20%; + z-index: 3333; +} </style> -- Gitblit v1.9.3