change

wangjuncheng

2025-04-21 51af02271fe8a6d3e2db7bef90df1ea5f571a173

change

 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>

 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>

 src/eventBus.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
// src/eventBus.js
import mitt from "mitt";

// åˆ›å»ºäº‹ä»¶æ€»çº¿
export const EventBus = mitt();

 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();

 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(() => {