From 51af02271fe8a6d3e2db7bef90df1ea5f571a173 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 21 四月 2025 13:06:07 +0800
Subject: [PATCH] change
---
src/components/monifangzhen/DangerAssess.vue | 1
src/components/monifangzhen/echartInfo.vue | 130 +++++------
src/utils/tools.js | 218 +++++++++++--------
src/eventBus.js | 5
src/views/mnfz.vue | 280 ++++++++++++++++---------
5 files changed, 366 insertions(+), 268 deletions(-)
diff --git a/src/components/monifangzhen/DangerAssess.vue b/src/components/monifangzhen/DangerAssess.vue
index 747101d..6cdeb6c 100644
--- a/src/components/monifangzhen/DangerAssess.vue
+++ b/src/components/monifangzhen/DangerAssess.vue
@@ -22,7 +22,6 @@
</template>
<script setup>
- import echartInfo from "@/components/monifangzhen/echartInfo.vue"
import Table from "../tools/Table.vue"
</script>
<style lang="less" scoped>
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index e8da721..9ea190d 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -25,70 +25,21 @@
<p style="cursor: pointer" @click="debuffClick">濞佽儊瀵硅薄</p>
<div class="echartBox">
<div class="table-container" ref="tableContainer">
- <el-table
- :data="tableData"
- style="width: 100%; font-size: 10px"
- height="100%"
- >
+ <el-table :data="tableData" style="width: 100%; font-size: 10px" height="100%" @row-click="handleRowClick">
<el-table-column label="褰卞搷鍖哄悕绉�" width="30" align="center">
<template #default="scope">
褰卞搷鍖簕{ scope.row.zoneId }}
</template>
</el-table-column>
- <el-table-column
- prop="time"
- label="褰卞搷鏃堕棿"
- width="50"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="population"
- label="浜哄憳(浜�)"
- width="23"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="room"
- label="鎴垮眿(闂�)"
- width="23"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="households"
- label="鎴锋暟(鎴�)"
- width="23"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="property"
- label="璐骇(涓囧厓)"
- width="23"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="maxDepth"
- label="鏈�澶ф按娣�(绫�)"
- width="28"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="maxVelocity"
- label="鏈�澶ф祦閫�(m/s)"
- width="35"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="raininess"
- label="闆ㄥ己(mm/h)"
- width="28"
- align="center"
- ></el-table-column>
- <el-table-column
- prop="warningLevel"
- label="棰勮绛夌骇"
- width="28"
- align="center"
- ></el-table-column>
+ <el-table-column prop="time" label="褰卞搷鏃堕棿" width="50" align="center"></el-table-column>
+ <el-table-column prop="population" label="浜哄憳(浜�)" width="23" align="center"></el-table-column>
+ <el-table-column prop="room" label="鎴垮眿(闂�)" width="23" align="center"></el-table-column>
+ <el-table-column prop="households" label="鎴锋暟(鎴�)" width="23" align="center"></el-table-column>
+ <el-table-column prop="property" label="璐骇(涓囧厓)" width="23" align="center"></el-table-column>
+ <el-table-column prop="maxDepth" label="鏈�澶ф按娣�(绫�)" width="28" align="center"></el-table-column>
+ <el-table-column prop="maxVelocity" label="鏈�澶ф祦閫�(m/s)" width="35" align="center"></el-table-column>
+ <el-table-column prop="raininess" label="闆ㄥ己(mm/h)" width="28" align="center"></el-table-column>
+ <el-table-column prop="warningLevel" label="棰勮绛夌骇" width="28" align="center"></el-table-column>
</el-table>
</div>
</div>
@@ -99,7 +50,8 @@
<script setup>
import * as echarts from "echarts";
-import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
+import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+import { ref, onMounted, onBeforeUnmount, nextTick, watch, onUnmounted } from "vue";
import dayjs from "dayjs";
import { getRainfall } from "@/api";
@@ -137,21 +89,43 @@
}
}
);
-
-// 閲嶇疆濞佽儊瀵硅薄涓殑鏁版嵁
+// 娓呴櫎鍑芥暟=====================================================================
+// 鐩戝惉浜嬩欢鎬荤嚎鐨勮嚜瀹氫箟浜嬩欢
+EventBus.on("reset-table", () => {
+ resetTable(); // 璋冪敤閲嶇疆琛ㄦ牸鐨勫嚱鏁�
+});
+EventBus.on("clear-echart", () => {
+ clearEchartData(); // 璋冪敤娓呴櫎鍑芥暟
+});
+// 娓呴櫎 echart1/2鏁版嵁鐨勫嚱鏁�
+const clearEchartData = () => {
+ if (myChart1) {
+ const currentOption = myChart1.getOption(); // 鑾峰彇褰撳墠鍥捐〃閰嶇疆
+ currentOption.series.forEach((series) => {
+ series.data = []; // 娓呯┖姣忎釜绯诲垪鐨勬暟鎹�
+ });
+ currentOption.xAxis[0].data = [];
+ myChart1.setOption(currentOption);
+ }
+ if (myChart2) {
+ const currentOption = myChart2.getOption();
+ currentOption.series.forEach((series) => {
+ series.data = [];
+ });
+ currentOption.xAxis[0].data = [];
+ myChart2.setOption(currentOption);
+ }
+};
+// 娓呴櫎濞佽儊瀵硅薄涓殑鏁版嵁
const resetTable = () => {
- // 1. 閲嶇疆琛ㄦ牸鏁版嵁
currentIndex.value = 0;
tableData.value = [];
-
- // 2. 鍋滄骞堕噸鏂板紑濮嬫暟鎹姞杞�
if (dataIntervalId) {
clearInterval(dataIntervalId);
}
startAddingData();
};
-// 鐩戝惉鐖剁粍浠朵紶閫掔殑鏁版嵁鍙樺寲
// 鐩戝惉鐖剁粍浠朵紶閫掔殑鏁版嵁鍙樺寲
watch(
() => props.isDynamicMode,
@@ -201,6 +175,12 @@
},
{ immediate: true } // 绔嬪嵆鎵ц鐩戝惉鍣�
);
+// 鐐瑰嚮鏁版嵁瀹炵幇闈㈢墖闂姩鐨勮Е鍙戝嚱鏁�
+function handleRowClick(row) {
+ console.log("Row clicked:", row);
+ // 瑙﹀彂浜嬩欢锛屽皢褰撳墠琛岀殑 ID 鍙戦�佸埌鍦板浘缁勪欢
+ EventBus.emit("row-clicked", row.id);
+}
const listData = cityData.listData;
const data = ref([
8.16, 15.38, 13.94, 9.46, 86.42, 71.32, 28.52, 25.9, 13.74, 14.54, 15.53,
@@ -1739,8 +1719,6 @@
};
const startAddingData = () => {
- console.log("Starting timer with jsonData length:", jsonData.value.length);
-
// 濡傛灉瀹氭椂鍣ㄥ凡瀛樺湪锛屽厛娓呴櫎
if (dataIntervalId) {
clearInterval(dataIntervalId);
@@ -1851,7 +1829,7 @@
const [hours, mins] = currentTime.split(':').map(Number);
let newHours = hours;
let newMins = mins + 10;
-
+
if (newMins >= 60) {
newMins = 0;
newHours += 1;
@@ -1859,7 +1837,7 @@
if (newHours >= 24) {
newHours = 0;
}
-
+
return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
};
@@ -1980,7 +1958,7 @@
},
data: data2.value,
lineStyle: {
- color: "#ffb637",
+ color: "#ffb637",
},
label: {
show: false, // 纭繚鏍囩涓嶆樉绀�
@@ -2134,7 +2112,7 @@
const [hours, mins] = currentTime.split(':').map(Number);
let newHours = hours;
let newMins = mins + 10;
-
+
if (newMins >= 60) {
newMins = 0;
newHours += 1;
@@ -2142,7 +2120,7 @@
if (newHours >= 24) {
newHours = 0;
}
-
+
return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
};
@@ -2290,7 +2268,7 @@
xAxisData.value.push(nextTime);
// 鏇存柊褰撳墠绱㈠紩
- dataIndex.value+= 2;
+ dataIndex.value += 2;
// 鏇存柊鍥捐〃
updateChart(
@@ -2390,6 +2368,10 @@
if (myChart2) myChart2.dispose();
window.removeEventListener("resize", handleResize);
});
+onUnmounted(() => {
+ EventBus.off("reset-table"); // 绉婚櫎浜嬩欢鐩戝惉
+ EventBus.off("clear-echart");
+});
</script>
<style lang="less" scoped>
diff --git a/src/eventBus.js b/src/eventBus.js
new file mode 100644
index 0000000..7ba88a9
--- /dev/null
+++ b/src/eventBus.js
@@ -0,0 +1,5 @@
+// src/eventBus.js
+import mitt from "mitt";
+
+// 鍒涘缓浜嬩欢鎬荤嚎
+export const EventBus = mitt();
\ No newline at end of file
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 733633f..57e120f 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -96,7 +96,7 @@
this.regionTerrain = earthCtrl.factory.createRegionTerrain({});
this.polygonPosition = [];
- const draw = earthCtrl.shapeTool.createDrawShapeTool(e => {
+ const draw = earthCtrl.shapeTool.createDrawShapeTool((e) => {
const polygonI = [];
for (const i of e.result) {
const ellipsoid = earthCtrl.coreMap.scene.globe.ellipsoid;
@@ -170,7 +170,7 @@
CreateLabel(pic, show) {
if (show) {
earthCtrl.factory.createSimpleGraphic(pic, {}, function (entity) {
- console.log(entity, "entity");
+ console.log(entity.polyline.positions.getValue(), "entity");
window.Viewer = earthCtrl.viewer;
//寮�鍚紪杈戝苟鍚敤灞炴�у脊绐�
earthCtrl.factory.SimpleGraphic.edit(true, {
@@ -187,7 +187,7 @@
// 姘村钩娴嬮噺
spjl() {
- earthCtrl.measure.horizontalDistance(colorAll, e => {
+ earthCtrl.measure.horizontalDistance(colorAll, (e) => {
console.log(e);
}).onEnd = () => {
console.log("姘村钩娴嬭窛宸插畬鎴�");
@@ -195,7 +195,7 @@
},
//鐩寸嚎娴嬮噺
jl() {
- earthCtrl.measure.lineDistance(colorAll, e => {
+ earthCtrl.measure.lineDistance(colorAll, (e) => {
console.log(e);
}).onEnd = () => {
console.log("鐩寸嚎娴嬮噺宸插畬鎴�");
@@ -203,7 +203,7 @@
},
// 鍨傜洿娴嬮噺
czgd() {
- earthCtrl.measure.height(colorAll, e => {
+ earthCtrl.measure.height(colorAll, (e) => {
console.log(e);
}).onEnd = () => {
console.log("鍨傜洿娴嬭窛宸插畬鎴�");
@@ -217,7 +217,7 @@
tin: true, // 鏄惁鏄剧ずtin涓夎缃�
onlyTerrain: false, // 鏄惁鍙祴閲忕簿缁嗗湴褰�
},
- e => {
+ (e) => {
console.log(e);
}
).onEnd = () => {
@@ -245,7 +245,7 @@
if (!this.viewShedTool) {
this.syfx(option);
}
- this.viewShedTool.mouseCreate().then(res => {
+ this.viewShedTool.mouseCreate().then((res) => {
callback(res);
});
},
@@ -300,7 +300,7 @@
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
polygon: Cesium.Color.fromCssColorString("#ffff0050"),
},
- e => {}
+ (e) => {}
);
},
qxcl() {
@@ -310,7 +310,7 @@
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
polygon: Cesium.Color.fromCssColorString("#ffff0050"),
},
- e => {}
+ (e) => {}
);
},
fwjcl() {
@@ -320,7 +320,7 @@
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
polygon: Cesium.Color.fromCssColorString("#ffff0050"),
},
- e => {}
+ (e) => {}
);
},
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>鍦烘櫙鎴浘<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@@ -375,12 +375,14 @@
this.earthCtrl.factory.createSimpleGraphic(
"polygon",
{ showSize: false, removeEdit: true },
- entity => {
- let postitions = entity.polygon.hierarchy.getValue().positions.reduce((obj, cur) => {
- let lonlat = this.cartesainToDegrees(cur);
- obj.push([lonlat.lng, lonlat.lat]);
- return obj;
- }, []);
+ (entity) => {
+ let postitions = entity.polygon.hierarchy
+ .getValue()
+ .positions.reduce((obj, cur) => {
+ let lonlat = this.cartesainToDegrees(cur);
+ obj.push([lonlat.lng, lonlat.lat]);
+ return obj;
+ }, []);
//澶氬彉褰㈤棴鐜�
postitions.push(postitions[0]);
let gridRadius = 0.05;
@@ -422,7 +424,7 @@
}
hexres.features.forEach((item, index) => {
if (turf.booleanContains(polygon, item)) {
- let newArr = item.geometry.coordinates[0].map(el => {
+ let newArr = item.geometry.coordinates[0].map((el) => {
return Cesium.Cartesian3.fromDegrees(el[0], el[1]);
});
//缃戞牸闈�
@@ -498,87 +500,112 @@
this.RestrictTheHeight.removeFromMap();
this.RestrictTheHeight = null;
}
- earthCtrl.factory.createSimpleGraphic("polygon", { showSize: false }, entity => {
- let arr = [];
- entity.polygon.hierarchy.getValue().positions.forEach(position => {
- let cartographic = SmartEarth.Cesium.Cartographic.fromCartesian(position);
- let lat = SmartEarth.Cesium.Math.toDegrees(cartographic.latitude);
- let lng = SmartEarth.Cesium.Math.toDegrees(cartographic.longitude);
- arr.push(lng, lat);
- });
- this.earthCtrl.viewer.entities.remove(entity);
- if (viewer.terrainProvider) {
- Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [
- Cesium.Cartographic.fromDegrees(arr[0], arr[1]),
- ]).then(updatedPositions => {
+ earthCtrl.factory.createSimpleGraphic(
+ "polygon",
+ { showSize: false },
+ (entity) => {
+ let arr = [];
+ entity.polygon.hierarchy.getValue().positions.forEach((position) => {
+ let cartographic =
+ SmartEarth.Cesium.Cartographic.fromCartesian(position);
+ let lat = SmartEarth.Cesium.Math.toDegrees(cartographic.latitude);
+ let lng = SmartEarth.Cesium.Math.toDegrees(cartographic.longitude);
+ arr.push(lng, lat);
+ });
+ this.earthCtrl.viewer.entities.remove(entity);
+ if (viewer.terrainProvider) {
+ Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [
+ Cesium.Cartographic.fromDegrees(arr[0], arr[1]),
+ ]).then((updatedPositions) => {
+ this.RestrictTheHeight = earthCtrl.analysis.createRestrictTheHeight(
+ {
+ positions: arr,
+ baseHeight: baseHeigh + updatedPositions[0].height,
+ // color: SmartEarth.Cesium.Color.GREEN.withAlpha(0.5),
+ color:
+ SmartEarth.Cesium.Color.fromCssColorString(
+ "#ff1515"
+ ).withAlpha(0.5),
+ }
+ );
+ });
+ } else {
this.RestrictTheHeight = earthCtrl.analysis.createRestrictTheHeight({
positions: arr,
- baseHeight: baseHeigh + updatedPositions[0].height,
- // color: SmartEarth.Cesium.Color.GREEN.withAlpha(0.5),
- color: SmartEarth.Cesium.Color.fromCssColorString("#ff1515").withAlpha(0.5),
+ baseHeight: baseHeigh,
+ color:
+ SmartEarth.Cesium.Color.fromCssColorString("#ff1515").withAlpha(
+ 0.5
+ ),
});
- });
- } else {
- this.RestrictTheHeight = earthCtrl.analysis.createRestrictTheHeight({
- positions: arr,
- baseHeight: baseHeigh,
- color: SmartEarth.Cesium.Color.fromCssColorString("#ff1515").withAlpha(0.5),
- });
+ }
}
- });
+ );
},
hcqfxPoint(width) {
- const pointGraphic = earthCtrl.factory.createSimpleGraphic("point", {}, entity => {
- const position = entity.position.getValue();
- const { lng, lat } = this.transformCartesianToCoord(position);
- const pointBuffer = earthCtrl.analysis.createBufferAnalysis({
- position: [lng, lat],
- color: SmartEarth.Cesium.Color.YELLOW.withAlpha(0.5),
- radius: width / 1000,
- });
- pointBuffer.initBuffer();
- this.Buffers.push(pointBuffer);
- });
+ const pointGraphic = earthCtrl.factory.createSimpleGraphic(
+ "point",
+ {},
+ (entity) => {
+ const position = entity.position.getValue();
+ const { lng, lat } = this.transformCartesianToCoord(position);
+ const pointBuffer = earthCtrl.analysis.createBufferAnalysis({
+ position: [lng, lat],
+ color: SmartEarth.Cesium.Color.YELLOW.withAlpha(0.5),
+ radius: width / 1000,
+ });
+ pointBuffer.initBuffer();
+ this.Buffers.push(pointBuffer);
+ }
+ );
},
hcqfxLine(width) {
- this.earthCtrl.factory.createSimpleGraphic("polyline", { showSize: false }, entity => {
- const positions = entity.polyline.positions.getValue();
- let coordinates = [];
- for (let i = 0; i < positions.length; i++) {
- const { lng, lat } = this.transformCartesianToCoord(positions[i]);
- coordinates.push(lng, lat);
+ this.earthCtrl.factory.createSimpleGraphic(
+ "polyline",
+ { showSize: false },
+ (entity) => {
+ const positions = entity.polyline.positions.getValue();
+ let coordinates = [];
+ for (let i = 0; i < positions.length; i++) {
+ const { lng, lat } = this.transformCartesianToCoord(positions[i]);
+ coordinates.push(lng, lat);
+ }
+ const polulineBuffer = earthCtrl.analysis.createBufferAnalysis({
+ position: coordinates,
+ color: SmartEarth.Cesium.Color.YELLOW.withAlpha(0.5),
+ radius: width / 1000,
+ });
+ polulineBuffer.initPolylineBuffer();
+ this.Buffers.push(polulineBuffer);
}
- const polulineBuffer = earthCtrl.analysis.createBufferAnalysis({
- position: coordinates,
- color: SmartEarth.Cesium.Color.YELLOW.withAlpha(0.5),
- radius: width / 1000,
- });
- polulineBuffer.initPolylineBuffer();
- this.Buffers.push(polulineBuffer);
- });
+ );
},
hcqfxPolygon(width) {
- this.earthCtrl.factory.createSimpleGraphic("polygon", { showSize: false }, entity => {
- let positions = entity.polygon.hierarchy.getValue().positions;
- let coordinates = [];
- for (let i = 0; i < positions.length; i++) {
- const { lng, lat } = this.transformCartesianToCoord(positions[i]);
+ this.earthCtrl.factory.createSimpleGraphic(
+ "polygon",
+ { showSize: false },
+ (entity) => {
+ let positions = entity.polygon.hierarchy.getValue().positions;
+ let coordinates = [];
+ for (let i = 0; i < positions.length; i++) {
+ const { lng, lat } = this.transformCartesianToCoord(positions[i]);
+ coordinates.push(lng, lat);
+ }
+ const { lng, lat } = this.transformCartesianToCoord(positions[0]);
coordinates.push(lng, lat);
+ const polygonBuffer = earthCtrl.analysis.createBufferAnalysis({
+ position: coordinates,
+ color: SmartEarth.Cesium.Color.YELLOW.withAlpha(0.5),
+ radius: width / 1000,
+ });
+ polygonBuffer.initPolylineBuffer();
+ this.Buffers.push(polygonBuffer);
}
- const { lng, lat } = this.transformCartesianToCoord(positions[0]);
- coordinates.push(lng, lat);
- const polygonBuffer = earthCtrl.analysis.createBufferAnalysis({
- position: coordinates,
- color: SmartEarth.Cesium.Color.YELLOW.withAlpha(0.5),
- radius: width / 1000,
- });
- polygonBuffer.initPolylineBuffer();
- this.Buffers.push(polygonBuffer);
- });
+ );
},
// 鍔ㄦ�佽鍩熷垎鏋�
dtsyfxPoint(callback) {
- earthCtrl.factory.createSimpleGraphic("point", {}, entity => {
+ earthCtrl.factory.createSimpleGraphic("point", {}, (entity) => {
let position = entity.position.getValue();
let coord = this.transformCartesianToCoord(position);
this.earthCtrl.viewer.entities.remove(entity);
@@ -681,9 +708,9 @@
polygonArray: [],
selectedEntity: null, //閫変腑鐨勫疄浣�
addPointToMap(row) {
- const filteArr = this.pointsArray.filter(item => item.type == row.type);
+ const filteArr = this.pointsArray.filter((item) => item.type == row.type);
if (filteArr.length > 0) {
- filteArr.forEach(item => {
+ filteArr.forEach((item) => {
item.entity.show = true;
});
return;
@@ -724,9 +751,9 @@
});
},
hidePointByType(row) {
- const filteArr = this.pointsArray.filter(item => item.type == row.type);
+ const filteArr = this.pointsArray.filter((item) => item.type == row.type);
if (filteArr.length > 0) {
- filteArr.forEach(item => {
+ filteArr.forEach((item) => {
item.entity.show = false;
});
}
@@ -744,14 +771,14 @@
callback(poiInfo);
},
setSelectedEntity(entity) {
- this.pointsArray.forEach(item => {
+ this.pointsArray.forEach((item) => {
if (item.id === entity.id) {
item.entity.billboard.image = cameraIconSel;
}
});
},
clearSelectedEntityStyle(entity) {
- this.pointsArray.forEach(item => {
+ this.pointsArray.forEach((item) => {
if (item.id === entity.id) {
item.entity.billboard.image = cameraIcon;
}
@@ -765,7 +792,7 @@
}
},
createPolygonArea(item) {
- const findItem = this.polygonArray.find(row => row.id === item.id);
+ const findItem = this.polygonArray.find((row) => row.id === item.id);
if (findItem) {
earthCtrl.viewer.flyTo(findItem.polygon);
return;
@@ -780,7 +807,9 @@
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
- var polyPositions = curPolygon.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
+ var polyPositions = curPolygon.polygon.hierarchy.getValue(
+ Cesium.JulianDate.now()
+ ).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; //涓績鐐�
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
curPolygon.position = polyCenter;
@@ -812,7 +841,7 @@
this.polygonArray.push(obj);
},
clearPoygon() {
- this.polygonArray.forEach(item => {
+ this.polygonArray.forEach((item) => {
earthCtrl.viewer.entities.remove(item.polygon);
earthCtrl.viewer.entities.remove(item.polyline);
});
@@ -855,7 +884,7 @@
if (graphic) {
graphic.clear();
}
- this.Buffers.map(item => {
+ this.Buffers.map((item) => {
item.removeFromMap();
});
this.Buffers = [];
@@ -899,7 +928,10 @@
GroupID: 0,
url: SmartEarthRootUrl + "Workers/image/waterNormals.jpg",
};
- this.analysisFlood = earthCtrl.analysis.createSubmergence(method, value => {});
+ this.analysisFlood = earthCtrl.analysis.createSubmergence(
+ method,
+ (value) => {}
+ );
},
clearFlood() {
this.analysisFlood && this.analysisFlood.endWater();
diff --git a/src/views/mnfz.vue b/src/views/mnfz.vue
index 13ba119..12afddf 100644
--- a/src/views/mnfz.vue
+++ b/src/views/mnfz.vue
@@ -1,23 +1,14 @@
<template>
<Left @start="startSimulate" @end="endSimulate" />
- <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" />
- <TimeLine
- v-if="showWaterSimulate"
- @time-update="timeUpdate"
- @is-playing="isPlaying"
- :waterSimulateParams="waterSimulateParams"
- @playbackFinished="playbackFinished"
- @end="endSimulate"
- />
- <DebuffDetail
- v-if="showDebuffDetail"
- @open="openDetail"
- @close="showDebuffDetail = false"
- />
+ <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" v-if="loadingSim" />
+ <TimeLine v-if="showWaterSimulate" @time-update="timeUpdate" @is-playing="isPlaying"
+ :waterSimulateParams="waterSimulateParams" @playbackFinished="playbackFinished" @end="endSimulate" />
+ <DebuffDetail v-if="showDebuffDetail" @open="openDetail" @close="showDebuffDetail = false" />
<DebuffTable v-if="showDebuffTable" @close="closeDebuffTable" />
</template>
<script setup>
+import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
import { ref, onMounted, onUnmounted, provide } from "vue";
import TimeLine from "@/components/menu/TimeLine.vue";
import Left from "./left/Left.vue";
@@ -26,6 +17,7 @@
import DebuffTable from "@/components/tools/DebuffTable.vue";
import { getMaxInfluenceArea } from "@/api/index";
import { createPoint, geomToGeoJSON } from "@/utils/map.js";
+import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
import colors from "@/assets/img/left/colors3.png";
import danger from "@/assets/img/left/danger.png";
@@ -36,6 +28,9 @@
const showDebuffTable = ref(false);
const isDynamicMode = ref(false);
const isFinish = ref(true);
+const loadingSim = ref(false);
+
+const treeMap = new Map();
// 鎻愪緵鏂规硶缁欐墍鏈夊瓙缁勪欢
provide("simulateActions", {
@@ -46,63 +41,138 @@
function startSimulate(form) {
// console.log("form", form);
showWaterSimulate.value = true;
+ loadingSim.value = true
waterSimulateParams.value = form;
}
function endSimulate() {
-
+ loadingSim.value = false
showDebuffDetail.value = false
clearTrailLine();
+ removeEmergencyPoints()
removeDataSources();
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 鏁版嵁鐨� geom EPSG:4326 鍧愭爣杞崲涓� WGS84 鍧愭爣绯荤殑 GeoJSON 鏁版嵁
+async function getTimeMarkers() {
const list = MaxInfluenceAreaList.value;
- list.forEach((item, index) => {
- const geojson = JSON.parse(item.geom); // 瑙ｆ瀽 geom 瀛楁涓� GeoJSON 瀵硅薄
- Cesium.GeoJsonDataSource.load(geojson).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) => {
- // entity.polygon.material = new Cesium.Color(1.0, 0.0, 0.0, 0.6); // 绾㈣壊锛�80% 涓嶉�忔槑搴�
- // entity.polygon.material = new Cesium.Color.YELLOW; // 绾㈣壊锛�80% 涓嶉�忔槑搴�
+ 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;
-
- // 浣跨敤鎻愪緵鐨� X, Y, Z 鍧愭爣浣滀负鍥炬爣浣嶇疆
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), // 鎺у埗鍙璺濈鑼冨洿 (0绫冲埌1500绫�)
+ 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
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;
}
+// 閬块櫓鐐癸紝缁胯壊瀵屾枃鏈�
+function addTetrahedron(visible) {
+ const emergencyAreaList = [];
+ // 杩欓噷鏄坊鍔犻伩闄╃偣搴曞眰闈㈢墖
+ loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
+ emergencyAreaList.push(...entities);
+ });
+ // console.log('polygon', polygon);
+
+ let list = [
+ {
+ name: "灏瑰缓鍗庡",
+ longitude: 116.593517,
+ latitude: 40.568391,
+ altitude: 528.45,
+ },
+ // {
+ // name: "鑼冩尟姹熷",
+ // longitude: 116.591059,
+ // latitude: 40.574068,
+ // altitude: 528,
+ // },
+ // {
+ // name: "鍚庡潯",
+ // longitude: 116.597975,
+ // latitude: 40.558199,
+ // altitude: 528,
+ // },
+ ];
+ // 杩欓噷鏄坊鍔犻伩闄╃偣瀵屾枃鏈珮浜樉绀�
+ list.forEach((item) => {
+ let point = earthCtrl.factory.createRichTextPoint("閬块櫓鐐�", [item.longitude, item.latitude, item.altitude - 10], {
+ distanceDisplayCondition: new SmartEarth.Cesium.DistanceDisplayCondition(0, 2000),
+ fontColor: "#ffffff",
+ fontSize: 20
+ }, "0");
+ console.log("point", point);
+ emergencyAreaList.push(point);
+ });
+ treeMap.set("閬块櫓鐐�", emergencyAreaList);
+}
+// 鍒犻櫎閬块櫓鐐圭殑瀵屾枃鏈疄浣�
+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) {
+ // 濡傛灉鏄� Cesium 瀹炰綋锛屼娇鐢� coreMap.entities.remove 绉婚櫎
+ earthCtrl.coreMap.entities.remove(entity);
+ }
+ });
+ treeMap.set("閬块櫓鐐�", []); // 娓呯┖瀛樺偍鐨勯伩闄╃偣鍒楄〃
+ }
+}
+
let TrailLine = [];
async function showLine() {
const position = [
@@ -190,67 +260,6 @@
});
TrailLine = [];
}
-// function showLine() {
-// earthCtrl.factory.createSimpleGraphic(
-// "polyline",
-// { clampToGround: true },
-// (entity) => {
-// if (entity) {
-// const position = [
-// {
-// x: -2172540.8322597803,
-// y: 4339064.62665997,
-// z: 4126183.3895281963,
-// },
-// {
-// x: -2172480.18394144,
-// y: 4339033.15167176,
-// z: 4126240.9529584926,
-// },
-// {
-// x: -2172454.114348403,
-// y: 4339020.0398392705,
-// z: 4126261.946960697,
-// },
-// {
-// x: -2172377.9670952093,
-// y: 4338976.609385458,
-// z: 4126333.862357211,
-// },
-// {
-// x: -2172299.4142002705,
-// y: 4338951.971578909,
-// z: 4126397.5205803993,
-// },
-// {
-// x: -2172245.1703274297,
-// y: 4338940.86037857,
-// z: 4126436.276389208,
-// },
-// {
-// x: -2172176.7332184147,
-// y: 4338930.525741544,
-// z: 4126477.629952572,
-// },
-// {
-// x: -2172173.8151051304,
-// y: 4338939.043883864,
-// z: 4126469.336927342,
-// },
-// {
-// x: -2172173.7151194704,
-// y: 4338939.023235937,
-// z: 4126469.4107743693,
-// },
-// ];
-// // console.log("positions", positions);
-// addWall(position, [entity]);
-
-// earthCtrl.factory.SimpleGraphic.remove(entity.id);
-// }
-// }
-// );
-// }
function timeUpdate(percentage) {
if (percentage > 99) {
if (showDebuffDetail.value) {
@@ -259,6 +268,7 @@
checkedKeys.value = ["閬块櫓鐐�"];
showDebuffDetail.value = true;
getTimeMarkers();
+ addTetrahedron();
showLine();
}
}
@@ -282,7 +292,77 @@
function playbackFinished(val) {
isFinish.value = val;
}
+// 瀹氫箟鍏ㄥ眬鍙橀噺瀛樺偍褰撳墠姝ｅ湪闂姩鐨勯潰鐗�
+let flashingPolygon = null;
+// 娣诲姞浜嬩欢鐩戝惉鍣紝鎺ユ敹鏉ヨ嚜琛ㄦ牸缁勪欢鐨勪簨浠�
+function setupRowClickListener(dataSources) {
+ if (!Array.isArray(dataSources) || dataSources.length === 0) {
+ console.error("Data sources array is undefined or empty!");
+ return;
+ }
+
+ EventBus.on("row-clicked", (id) => {
+ const clickedEntity = findEntityById(id, dataSources);
+ if (clickedEntity) {
+ if (flashingPolygon && flashingPolygon !== clickedEntity) {
+ stopFlashing(flashingPolygon);
+ }
+
+ startFlashing(clickedEntity);
+ flashingPolygon = clickedEntity;
+ } else {
+ }
+ });
+}
+function findEntityById(id, dataSources) {
+ if (!Array.isArray(dataSources) || dataSources.length === 0) {
+ console.error("Data sources array is undefined or empty!");
+ 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; // 鏍囪鏄惁姝ｅ湪闂姩
+ 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(() => {
--
Gitblit v1.9.3