wangyawei
2025-04-18 293cc038aef227332161532621b97c987d1b1661
接入视频流
已添加1个文件
已修改2个文件
2129 ■■■■ 文件已修改
public/video/waters-1024.webm 补丁 | 查看 | 原始文档 | blame | 历史
src/components/menu/TimeLine.vue 137 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/tools/LayerTree.vue 1992 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/video/waters-1024.webm
Binary files differ
src/components/menu/TimeLine.vue
@@ -1,32 +1,21 @@
<template>
  <div class="timeline-container">
    <div class="controls">
    <!-- <div @click="endSimulate">结束模拟</div> -->
      <!-- <div @click="endSimulate">结束模拟</div> -->
      <div class="control-btn" @click="skipBackward">
        <img
          src="@/assets/img/timeline/left.png"
          class="fas fa-step-backward"
        />
        <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
      </div>
      <div class="control-btn play-btn" @click="togglePlay">
        <img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
        <img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
      </div>
      <div class="control-btn" @click="skipForward">
        <img
          src="@/assets/img/timeline/right.png"
          class="fas fa-step-forward"
        />
        <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
      </div>
      <div class="speed-control">
        <div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
        <div class="speed-menu" v-show="showSpeedMenu">
          <div
            v-for="rate in playbackRates"
            :key="rate"
            @click.capture="setPlaybackRate(rate)"
            :class="{ active: playbackRate === rate }"
          >
          <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)" :class="{ active: playbackRate === rate }">
            {{ rate }}X
          </div>
        </div>
@@ -35,35 +24,24 @@
    <div class="timeline">
      <div class="dates">
        <div
          v-for="(date, index) in visibleDates"
          :key="index"
          class="date-label"
        >
        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
          {{ formatDate(date) }}
        </div>
      </div>
      <div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
        <div
          class="timeline-progress"
          :style="{ width: progressPercentage + '%' }"
        ></div>
        <div
          class="timeline-cursor"
          :style="{ left: progressPercentage + '%' }"
        ></div>
        <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
        <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
        <div class="time-markers">
          <div
            v-for="(time, index) in timeMarkers"
            :key="index"
            class="time-marker"
          >
          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker">
            {{ time }}
          </div>
        </div>
      </div>
    </div>
    <video id="video" width="200px" height="200px" controls loop autoplay style="display: none;" crossorigin="anonymous">
      <source src="/video/waters-1024.webm" type="video/webm" />
    </video>
  </div>
</template>
@@ -71,6 +49,7 @@
import {
  ref,
  computed,
  nextTick,
  onUnmounted,
  onMounted,
  watch,
@@ -118,6 +97,7 @@
  return dayjs(props.waterSimulateParams.date[1]);
});
let playInterval = null;
let hlsEntity = null;
// 计算属性
const progressPercentage = computed(() => {
@@ -142,7 +122,37 @@
const currentTimeFormatted = computed(() => {
  return formatTime(currentTime.value);
});
// 使用视频创建Cesium实体
const createVideoEntity = () => {
  // 获取视频元素
  const videoElement = document.getElementById('video');
  if (!videoElement) {
    console.error("未找到视频元素");
    return;
  }
  // 移除可能存在的旧实体
  const existingEntity = window.earthCtrl.viewer.entities.getById('hls');
  if (existingEntity) {
    window.earthCtrl.viewer.entities.remove(existingEntity);
  }
  // 确保视频可见
  videoElement.style.display = 'block';
  // 创建新的视频实体
  hlsEntity = window.earthCtrl.viewer.entities.add({
    id: 'hls',
    rectangle: {
      coordinates: window.SmartEarth.Cesium.Rectangle.fromDegrees(
        116.546665, 40.507452, 116.7757891, 40.6834562
      ),
      material: videoElement,
      outline: true,
      outlineColor: window.SmartEarth.Cesium.Color.BLACK,
    },
  });
};
const togglePlay = () => {
  // 如果当前是停止状态且已经播放完毕,点击时重置时间
  if (!isPlaying.value && currentTime.value >= duration.value) {
@@ -153,15 +163,43 @@
  isPlaying.value = !isPlaying.value;
  emit("isPlaying", isPlaying.value);
  if (isPlaying.value) {
    startPlayback();
    // 如果是从头开始播放
    if (currentTime.value === 0) {
      emit("playbackFinished", false);
  // if (isPlaying.value) {
  //   startPlayback();
  //   // 如果是从头开始播放
  //   if (currentTime.value === 0) {
  //     emit("playbackFinished", false);
  //   }
  // } else {
  //   stopPlayback();
  // }
  // 新增代码:加视频流
  nextTick(() => {
    // 处理视频播放
    const videoElement = document.getElementById('video');
    if (videoElement) {
      if (isPlaying.value) {
        // 确保已创建视频实体
        createVideoEntity();
        // 播放视频
        videoElement.play().catch(e => {
          console.error("视频播放失败:", e);
        });
      } else {
        // 暂停视频
        videoElement.pause();
      }
    }
  } else {
    stopPlayback();
  }
    if (isPlaying.value) {
      startPlayback();
      // 如果是从头开始播放
      if (currentTime.value === 0) {
        emit("playbackFinished", false);
      }
    } else {
      stopPlayback();
    }
  });
};
const startPlayback = () => {
@@ -179,7 +217,13 @@
      emit("isPlaying", isPlaying.value); // 通知播放状态变化
      emit("playbackFinished", true); // 通知播放完成
      emit("timeUpdate", progressPercentage.value); // 更新进度条位置
      // 播放结束时暂停视频
      const videoElement = document.getElementById('video');
      if (videoElement) {
        videoElement.pause();
      }
    }
    // 暂停视频
    emit("timeUpdate", progressPercentage.value);
  }, 1000);
@@ -209,6 +253,11 @@
  playbackRate.value = rate;
  showSpeedMenu.value = false;
  // 同步视频播放速率
  const videoElement = document.getElementById('video');
  if (videoElement) {
    videoElement.playbackRate = rate;
  }
  if (isPlaying.value) {
    stopPlayback();
    startPlayback();
@@ -239,7 +288,7 @@
};
const rainFallData = ref([]);
function getRainfallData() {
function getRainfallData () {
  getRainfall().then((res) => {
    // rainFallData.value = res.data.map(item => {
    //   return dayjs(item.time).format("HH:mm")
@@ -254,7 +303,7 @@
let mockTimer = null;
let currentRainfall = ref(0.0001);
function randomMockWater() {
function randomMockWater () {
  let delay = (3 / playbackRate.value) * 1000;
  if (delay < 1000) {
    delay = 1000;
@@ -271,7 +320,7 @@
    if (rainfall && rainfall.total) {
      // console.log(rainfall.total);
      createWaterPrimitive(rainfall.total / 50000);
      //  createWaterPrimitive(rainfall.total / 50000);
    }
  }, delay);
}
src/components/tools/LayerTree.vue
@@ -1,15 +1,7 @@
<template>
    <div class="layer-tree">
        <el-tree
            ref="treeRef"
            style="max-width: 600px"
            show-checkbox
            node-key="label"
            :default-checked-keys="defaultSelectedKeys"
            @check-change="handleCheckChange"
            :data="treeData"
        />
    </div>
  <div class="layer-tree">
    <el-tree ref="treeRef" style="max-width: 600px" show-checkbox node-key="label" :default-checked-keys="defaultSelectedKeys" @check-change="handleCheckChange" :data="treeData" />
  </div>
</template>
<script setup>
@@ -22,1053 +14,1053 @@
import { getDuanMainData } from '@/api/index.js'
const route = useRoute()
const treeData = ref([
    {
        label: "三维服务",
        children: [{ label: "模型数据" }, { label: "地形数据" }, { label: "影像数据" }],
    },
    {
        label: "图层数据",
        children: [
            {
                label: "北京市隐患点",
            },
            {
                label: "孙胡沟隐患点",
            },
            // {
            //     label: "泥石流隐患点面数据",
            // },
            {
                label: "综合监测设备信息",
            },
            {
                label: "孙胡沟仿真标注地物",
            },
            {
                label: "避险点",
            },
        ],
    },
  {
    label: "三维服务",
    children: [{ label: "模型数据" }, { label: "地形数据" }, { label: "影像数据" }],
  },
  {
    label: "图层数据",
    children: [
      {
        label: "北京市隐患点",
      },
      {
        label: "孙胡沟隐患点",
      },
      // {
      //     label: "泥石流隐患点面数据",
      // },
      {
        label: "综合监测设备信息",
      },
      {
        label: "孙胡沟仿真标注地物",
      },
      {
        label: "避险点",
      },
    ],
  },
])
const treeRef = ref(null)
const treeMap = new Map()
const defaultSelectedKeys = ref(["模型数据", "影像数据", "地形数据"])
function handleCheckChange(data, checked, indeterminate) {
    const label = data.label
    const list = treeMap.get(label)
    if (list) {
        toggleLayerVisible(label, checked)
        return
    }
    switch (label) {
        case "模型数据":
            list.show = checked
            break
        case "北京市隐患点":
            console.log("北京市隐患点", checked, indeterminate)
            break
        case "孙胡沟隐患点":
            console.log("孙胡沟隐患点", checked, indeterminate)
            break
        case "泥石流隐患点面数据":
            console.log("泥石流隐患点面数据", checked, indeterminate)
            break
        case "综合监测设备信息":
            console.log("综合监测设备信息", checked, indeterminate)
            break
        case "孙胡沟仿真标注地物":
            console.log("孙胡沟仿真标注地物", checked, indeterminate)
            break
        case "避险点":
            addTetrahedron()
            break
function handleCheckChange (data, checked, indeterminate) {
  const label = data.label
  const list = treeMap.get(label)
  if (list) {
    toggleLayerVisible(label, checked)
    return
  }
  switch (label) {
    case "模型数据":
      list.show = checked
      break
    case "北京市隐患点":
      console.log("北京市隐患点", checked, indeterminate)
      break
    case "孙胡沟隐患点":
      console.log("孙胡沟隐患点", checked, indeterminate)
      break
    case "泥石流隐患点面数据":
      console.log("泥石流隐患点面数据", checked, indeterminate)
      break
    case "综合监测设备信息":
      console.log("综合监测设备信息", checked, indeterminate)
      break
    case "孙胡沟仿真标注地物":
      console.log("孙胡沟仿真标注地物", checked, indeterminate)
      break
    case "避险点":
      addTetrahedron()
      break
    }
  }
}
function initMap() {
    // let modelPromise = addTileset(
    //     `http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json`
    // )
    // modelPromise.then(model => {
    //     treeMap.set("模型数据", model)
    // })
    // let ImageryLayer = earthCtrl.factory.createImageryLayer({
    //     sourceType: "tms",
    //     url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
    // })
    let TerrainLayer = earthCtrl.factory.createTerrainLayer({
        sourceType: "ctb",
        url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
    })
    // treeMap.set("影像数据", ImageryLayer)
    treeMap.set("地形数据", TerrainLayer)
function initMap () {
  // let modelPromise = addTileset(
  //     `http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json`
  // )
  // modelPromise.then(model => {
  //     treeMap.set("模型数据", model)
  // })
  // let ImageryLayer = earthCtrl.factory.createImageryLayer({
  //     sourceType: "tms",
  //     url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
  // })
  let TerrainLayer = earthCtrl.factory.createTerrainLayer({
    sourceType: "ctb",
    url: "http://106.120.22.26:9103/gisserver/ctsserver/llmbdem",
  })
  // treeMap.set("影像数据", ImageryLayer)
  treeMap.set("地形数据", TerrainLayer)
}
const devicetList = ref([
    {
        deviceCode: "303A9016",
        deviceId: "1821067878870257666",
        deviceName: "孙胡沟(墒情)",
        dictDeviceType: "1437295822",
        latitude: 40.56476666,
        longitude: 116.5955361,
    },
    {
        deviceCode: "01303A9016",
        deviceId: "1821067850122498049",
        deviceName: "孙胡沟(墒情)",
        dictDeviceType: "14372958380",
        latitude: 40.56476666,
        longitude: 116.5955361,
    },
    {
        deviceCode: "1101161102180100010063",
        deviceId: "1554360510040182786",
        deviceName: "怀柔区琉璃庙镇孙胡沟尹家西沟雨量计0063",
        dictDeviceType: "1437295810",
        latitude: 40.556589,
        longitude: 116.579459,
    },
    {
        deviceCode: "1101161102180100194030",
        deviceId: "1554361328692826114",
        deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟编码器4030",
        dictDeviceType: "1437295815",
        latitude: 40.554272,
        longitude: 116.592583,
    },
    {
        deviceCode: "1101161102180100031041",
        deviceId: "1554360448702681089",
        deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟次声仪1041",
        dictDeviceType: "1437295832",
        latitude: 40.553236,
        longitude: 116.592304,
    },
    {
        deviceCode: "1101161102180100022007",
        deviceId: "1554360273959587842",
        deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟含水率2007",
        dictDeviceType: "1437295822",
        latitude: 40.545821,
        longitude: 116.586354,
    },
    {
        deviceCode: "1101161102180100225406",
        deviceId: "1554360478494822402",
        deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟流速仪5406",
        dictDeviceType: "1437295821",
        latitude: 40.554368,
        longitude: 116.592989,
    },
    {
        deviceCode: "1101161102180100055006",
        deviceId: "1554360276627165185",
        deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟泥位计5006",
        dictDeviceType: "1437295811",
        latitude: 40.554398,
        longitude: 116.592929,
    },
    {
        deviceCode: "1101161102180100010064",
        deviceId: "1554360452670492674",
        deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟雨量计0064",
        dictDeviceType: "1437295810",
        latitude: 40.545741,
        longitude: 116.586304,
    },
    {
        deviceCode: "1101161102180100183030",
        deviceId: "1554360533087883265",
        deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟摄像头3030",
        dictDeviceType: "1437295825",
        latitude: 40.554272,
        longitude: 116.592583,
    },
    {
        deviceCode: "1101161102180100194031",
        deviceId: "1554361328877375489",
        deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟编码器4031",
        dictDeviceType: "1437295815",
        latitude: 40.554035,
        longitude: 116.59786,
    },
    {
        deviceCode: "1101161102180100055007",
        deviceId: "1554360509775941634",
        deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟泥位计5007",
        dictDeviceType: "1437295811",
        latitude: 40.554729,
        longitude: 116.598165,
    },
    {
        deviceCode: "1101161102180100031042",
        deviceId: "1554360448916590593",
        deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟次声仪1042",
        dictDeviceType: "1437295832",
        latitude: 40.549398,
        longitude: 116.600387,
    },
    {
        deviceCode: "1101161102180100225407",
        deviceId: "1554360478658400257",
        deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟流速仪5407",
        dictDeviceType: "1437295821",
        latitude: 40.55481,
        longitude: 116.598025,
    },
    {
        deviceCode: "1101161102180100022008",
        deviceId: "1554360274165108737",
        deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟含水率2008",
        dictDeviceType: "1437295822",
        latitude: 40.544645,
        longitude: 116.596511,
    },
    {
        deviceCode: "1101161102180100183031",
        deviceId: "1554360533255655426",
        deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟摄像头3031",
        dictDeviceType: "1437295825",
        latitude: 40.554035,
        longitude: 116.59786,
    },
    {
        deviceCode: "1101161102180100010065",
        deviceId: "1554360452888596482",
        deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟雨量计0065",
        dictDeviceType: "1437295810",
        latitude: 40.543104,
        longitude: 116.59585,
    },
    {
        deviceCode: "1101161102180100031040",
        deviceId: "1554360448383913986",
        deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
        dictDeviceType: "1437295832",
        latitude: 40.563822,
        longitude: 116.592648,
    },
    {
        deviceCode: "1101161102180100010062",
        deviceId: "1554360452519497730",
        deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟雨量计0062",
        dictDeviceType: "1437295810",
        latitude: 40.558778,
        longitude: 116.586892,
    },
    {
        deviceCode: "1101160042160100010005",
        deviceId: "1554360582698110977",
        deviceName: "怀柔区雁栖镇北湾村北林大石门沟雨量计0005",
        dictDeviceType: "1437295810",
        latitude: 40.533623,
        longitude: 116.602406,
    },
  {
    deviceCode: "303A9016",
    deviceId: "1821067878870257666",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "1437295822",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
  {
    deviceCode: "01303A9016",
    deviceId: "1821067850122498049",
    deviceName: "孙胡沟(墒情)",
    dictDeviceType: "14372958380",
    latitude: 40.56476666,
    longitude: 116.5955361,
  },
  {
    deviceCode: "1101161102180100010063",
    deviceId: "1554360510040182786",
    deviceName: "怀柔区琉璃庙镇孙胡沟尹家西沟雨量计0063",
    dictDeviceType: "1437295810",
    latitude: 40.556589,
    longitude: 116.579459,
  },
  {
    deviceCode: "1101161102180100194030",
    deviceId: "1554361328692826114",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟编码器4030",
    dictDeviceType: "1437295815",
    latitude: 40.554272,
    longitude: 116.592583,
  },
  {
    deviceCode: "1101161102180100031041",
    deviceId: "1554360448702681089",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟次声仪1041",
    dictDeviceType: "1437295832",
    latitude: 40.553236,
    longitude: 116.592304,
  },
  {
    deviceCode: "1101161102180100022007",
    deviceId: "1554360273959587842",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟含水率2007",
    dictDeviceType: "1437295822",
    latitude: 40.545821,
    longitude: 116.586354,
  },
  {
    deviceCode: "1101161102180100225406",
    deviceId: "1554360478494822402",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟流速仪5406",
    dictDeviceType: "1437295821",
    latitude: 40.554368,
    longitude: 116.592989,
  },
  {
    deviceCode: "1101161102180100055006",
    deviceId: "1554360276627165185",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟泥位计5006",
    dictDeviceType: "1437295811",
    latitude: 40.554398,
    longitude: 116.592929,
  },
  {
    deviceCode: "1101161102180100010064",
    deviceId: "1554360452670492674",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟雨量计0064",
    dictDeviceType: "1437295810",
    latitude: 40.545741,
    longitude: 116.586304,
  },
  {
    deviceCode: "1101161102180100183030",
    deviceId: "1554360533087883265",
    deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟摄像头3030",
    dictDeviceType: "1437295825",
    latitude: 40.554272,
    longitude: 116.592583,
  },
  {
    deviceCode: "1101161102180100194031",
    deviceId: "1554361328877375489",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟编码器4031",
    dictDeviceType: "1437295815",
    latitude: 40.554035,
    longitude: 116.59786,
  },
  {
    deviceCode: "1101161102180100055007",
    deviceId: "1554360509775941634",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟泥位计5007",
    dictDeviceType: "1437295811",
    latitude: 40.554729,
    longitude: 116.598165,
  },
  {
    deviceCode: "1101161102180100031042",
    deviceId: "1554360448916590593",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟次声仪1042",
    dictDeviceType: "1437295832",
    latitude: 40.549398,
    longitude: 116.600387,
  },
  {
    deviceCode: "1101161102180100225407",
    deviceId: "1554360478658400257",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟流速仪5407",
    dictDeviceType: "1437295821",
    latitude: 40.55481,
    longitude: 116.598025,
  },
  {
    deviceCode: "1101161102180100022008",
    deviceId: "1554360274165108737",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟含水率2008",
    dictDeviceType: "1437295822",
    latitude: 40.544645,
    longitude: 116.596511,
  },
  {
    deviceCode: "1101161102180100183031",
    deviceId: "1554360533255655426",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟摄像头3031",
    dictDeviceType: "1437295825",
    latitude: 40.554035,
    longitude: 116.59786,
  },
  {
    deviceCode: "1101161102180100010065",
    deviceId: "1554360452888596482",
    deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟雨量计0065",
    dictDeviceType: "1437295810",
    latitude: 40.543104,
    longitude: 116.59585,
  },
  {
    deviceCode: "1101161102180100031040",
    deviceId: "1554360448383913986",
    deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
    dictDeviceType: "1437295832",
    latitude: 40.563822,
    longitude: 116.592648,
  },
  {
    deviceCode: "1101161102180100010062",
    deviceId: "1554360452519497730",
    deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟雨量计0062",
    dictDeviceType: "1437295810",
    latitude: 40.558778,
    longitude: 116.586892,
  },
  {
    deviceCode: "1101160042160100010005",
    deviceId: "1554360582698110977",
    deviceName: "怀柔区雁栖镇北湾村北林大石门沟雨量计0005",
    dictDeviceType: "1437295810",
    latitude: 40.533623,
    longitude: 116.602406,
  },
])
function initDevicePoint() {
    let list = []
function initDevicePoint () {
  let list = []
    devicetList.value.forEach(item => {
        item.type = getDictName(deviceDictList, item.dictDeviceType)
        item.name = item.type
        item.id = item.deviceId
        item.className = "device"
        item.showLabel = true
        const entity = createPoint(item)
        entity.show = false
  devicetList.value.forEach(item => {
    item.type = getDictName(deviceDictList, item.dictDeviceType)
    item.name = item.type
    item.id = item.deviceId
    item.className = "device"
    item.showLabel = true
    const entity = createPoint(item)
    entity.show = false
        list.push(entity)
    })
    treeMap.set("综合监测设备信息", list)
    list.push(entity)
  })
  treeMap.set("综合监测设备信息", list)
}
const districtList = ref([
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116020058",
        latitude: 40.56652778,
        length: 0,
        district: "琉璃庙镇孙胡沟村尹家西沟尹建燕家屋后",
        longitude: 116.5803889,
        monitor: "",
        monitorAdvice: "",
        name: "尹家西沟尹建燕家屋后崩塌隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "小型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 2,
        threatenMoney: 0,
        threatenPopulation: "3",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "崩塌",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116020078",
        latitude: 40.56497222,
        length: 0,
        district: "琉璃庙镇孙胡沟村河西于凤英家屋后",
        longitude: 116.5955278,
        monitor: "",
        monitorAdvice: "",
        name: "河西于凤英家屋后崩塌隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "小型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 4,
        threatenMoney: 0,
        threatenPopulation: "6",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "崩塌",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030041",
        latitude: 40.55369444,
        length: 0,
        district: "琉璃庙镇孙胡沟公路",
        longitude: 116.6002778,
        monitor: "",
        monitorAdvice: "",
        name: "南梁小东沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "",
        preventionLevel: "",
        preventionPlan: "定期巡查,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "小型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 0,
        threatenMoney: 0,
        threatenPopulation: "",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030015",
        latitude: 40.55277778,
        length: 0,
        district: "琉璃庙镇孙胡沟村南梁村大窑沟",
        longitude: 116.5994722,
        monitor: "",
        monitorAdvice: "",
        name: "大窑沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "已监测、已治理",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "中型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 5,
        threatenMoney: 0,
        threatenPopulation: "11",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030076",
        latitude: 40.55972222,
        length: 0,
        district: "琉璃庙镇孙胡沟村东坎大东沟",
        longitude: 116.5916667,
        monitor: "",
        monitorAdvice: "",
        name: "大东沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "已治理",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "小型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 1,
        threatenMoney: 0,
        threatenPopulation: "2",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030074",
        latitude: 40.56580556,
        length: 0,
        district: "琉璃庙镇孙胡沟村尹家西沟",
        longitude: 116.59,
        monitor: "",
        monitorAdvice: "",
        name: "尹家西沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "已监测;灾害体变化:4处坡积物垮塌,堆积至坡脚,方量约20m³。",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "中型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 7,
        threatenMoney: 0,
        threatenPopulation: "12",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030053",
        latitude: 40.57361111,
        length: 0,
        district: "琉璃庙镇孙胡沟村北大地西洼子沟",
        longitude: 116.5897222,
        monitor: "",
        monitorAdvice: "",
        name: "北大地西洼子沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "沟口正对房屋,降雨时出水量大,建议治理,汛期加强巡查",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "中型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 6,
        threatenMoney: 0,
        threatenPopulation: "10",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116020102",
        latitude: 40.55972222,
        length: 0,
        district: "琉璃庙镇孙胡沟村范家庄王秀莲家屋后",
        longitude: 116.5922222,
        monitor: "",
        monitorAdvice: "",
        name: "范家庄王秀莲家屋后崩塌隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "边坡较陡,顺向岩层,房屋靠近坡脚,建议尽快治理",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "小型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 1,
        threatenMoney: 0,
        threatenPopulation: "3",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "崩塌",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116020742",
        latitude: 40.57680556,
        length: 0,
        district: "琉璃庙镇孙胡沟村三亩地范忠田家屋后",
        longitude: 116.5887222,
        monitor: "",
        monitorAdvice: "",
        name: "三亩地范忠田家屋后崩塌隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移,更换警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "中型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 8,
        threatenMoney: 0,
        threatenPopulation: "23",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "崩塌",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030040",
        latitude: 40.56344444,
        length: 0,
        district: "琉璃庙镇孙胡沟村河西于家西沟",
        longitude: 116.5953889,
        monitor: "",
        monitorAdvice: "",
        name: "于家西沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "已监测,2018村已治理;沟口堆积扇明显,正对房屋,建议汛期加强巡查",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "中型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 18,
        threatenMoney: 0,
        threatenPopulation: "59",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030055",
        latitude: 40.55283333,
        length: 0,
        district: "琉璃庙镇孙胡沟村椴树底下东沟",
        longitude: 116.5999444,
        monitor: "",
        monitorAdvice: "",
        name: "椴树底下东沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "已治理:威胁对象重复:与110116030015重复5户11人",
        preventionLevel: "",
        preventionPlan: "定期巡查,预警转移,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "中型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 5,
        threatenMoney: 0,
        threatenPopulation: "11",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
    {
        activeStatus: "",
        areaCode: "",
        areaName: "",
        brookLength: 0,
        checkId: "",
        city: "北京市",
        codeProvince: "110116",
        county: "怀柔",
        dangerLevel: "",
        disasterStatus: "",
        drainageArea: "",
        elevation: 0,
        featureDes: "",
        groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
        hasPlan: "",
        id: "110116030054",
        latitude: 40.56166667,
        length: 0,
        district: "琉璃庙镇孙胡沟村上台子河东南沟",
        longitude: 116.5997222,
        monitor: "",
        monitorAdvice: "",
        name: "河东南沟泥石流隐患点",
        number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
        preventionDes: "已监测",
        preventionLevel: "",
        preventionPlan: "定期巡查,立警示牌",
        preventionUnit: "乡镇",
        principal: "",
        province: "北京市",
        qp: "",
        reason: "",
        responsibleUnit: "",
        riskLevel: "",
        scale: "小型",
        stableLevel: "",
        status: "",
        thickness: 0,
        threatenFamily: 0,
        threatenMoney: 0,
        threatenPopulation: "",
        threatenType: "",
        town: "琉璃庙镇",
        trigger: "",
        type: "泥石流",
        village: "孙胡沟村",
        volume: "",
        volumePotential: "",
        width: 0,
    },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020058",
    latitude: 40.56652778,
    length: 0,
    district: "琉璃庙镇孙胡沟村尹家西沟尹建燕家屋后",
    longitude: 116.5803889,
    monitor: "",
    monitorAdvice: "",
    name: "尹家西沟尹建燕家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 2,
    threatenMoney: 0,
    threatenPopulation: "3",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020078",
    latitude: 40.56497222,
    length: 0,
    district: "琉璃庙镇孙胡沟村河西于凤英家屋后",
    longitude: 116.5955278,
    monitor: "",
    monitorAdvice: "",
    name: "河西于凤英家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 4,
    threatenMoney: 0,
    threatenPopulation: "6",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030041",
    latitude: 40.55369444,
    length: 0,
    district: "琉璃庙镇孙胡沟公路",
    longitude: 116.6002778,
    monitor: "",
    monitorAdvice: "",
    name: "南梁小东沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 0,
    threatenMoney: 0,
    threatenPopulation: "",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030015",
    latitude: 40.55277778,
    length: 0,
    district: "琉璃庙镇孙胡沟村南梁村大窑沟",
    longitude: 116.5994722,
    monitor: "",
    monitorAdvice: "",
    name: "大窑沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测、已治理",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 5,
    threatenMoney: 0,
    threatenPopulation: "11",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030076",
    latitude: 40.55972222,
    length: 0,
    district: "琉璃庙镇孙胡沟村东坎大东沟",
    longitude: 116.5916667,
    monitor: "",
    monitorAdvice: "",
    name: "大东沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已治理",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 1,
    threatenMoney: 0,
    threatenPopulation: "2",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030074",
    latitude: 40.56580556,
    length: 0,
    district: "琉璃庙镇孙胡沟村尹家西沟",
    longitude: 116.59,
    monitor: "",
    monitorAdvice: "",
    name: "尹家西沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测;灾害体变化:4处坡积物垮塌,堆积至坡脚,方量约20m³。",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 7,
    threatenMoney: 0,
    threatenPopulation: "12",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030053",
    latitude: 40.57361111,
    length: 0,
    district: "琉璃庙镇孙胡沟村北大地西洼子沟",
    longitude: 116.5897222,
    monitor: "",
    monitorAdvice: "",
    name: "北大地西洼子沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "沟口正对房屋,降雨时出水量大,建议治理,汛期加强巡查",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 6,
    threatenMoney: 0,
    threatenPopulation: "10",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020102",
    latitude: 40.55972222,
    length: 0,
    district: "琉璃庙镇孙胡沟村范家庄王秀莲家屋后",
    longitude: 116.5922222,
    monitor: "",
    monitorAdvice: "",
    name: "范家庄王秀莲家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "边坡较陡,顺向岩层,房屋靠近坡脚,建议尽快治理",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 1,
    threatenMoney: 0,
    threatenPopulation: "3",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116020742",
    latitude: 40.57680556,
    length: 0,
    district: "琉璃庙镇孙胡沟村三亩地范忠田家屋后",
    longitude: 116.5887222,
    monitor: "",
    monitorAdvice: "",
    name: "三亩地范忠田家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移,更换警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 8,
    threatenMoney: 0,
    threatenPopulation: "23",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "崩塌",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030040",
    latitude: 40.56344444,
    length: 0,
    district: "琉璃庙镇孙胡沟村河西于家西沟",
    longitude: 116.5953889,
    monitor: "",
    monitorAdvice: "",
    name: "于家西沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测,2018村已治理;沟口堆积扇明显,正对房屋,建议汛期加强巡查",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 18,
    threatenMoney: 0,
    threatenPopulation: "59",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030055",
    latitude: 40.55283333,
    length: 0,
    district: "琉璃庙镇孙胡沟村椴树底下东沟",
    longitude: 116.5999444,
    monitor: "",
    monitorAdvice: "",
    name: "椴树底下东沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已治理:威胁对象重复:与110116030015重复5户11人",
    preventionLevel: "",
    preventionPlan: "定期巡查,预警转移,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "中型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 5,
    threatenMoney: 0,
    threatenPopulation: "11",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
  {
    activeStatus: "",
    areaCode: "",
    areaName: "",
    brookLength: 0,
    checkId: "",
    city: "北京市",
    codeProvince: "110116",
    county: "怀柔",
    dangerLevel: "",
    disasterStatus: "",
    drainageArea: "",
    elevation: 0,
    featureDes: "",
    groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟",
    hasPlan: "",
    id: "110116030054",
    latitude: 40.56166667,
    length: 0,
    district: "琉璃庙镇孙胡沟村上台子河东南沟",
    longitude: 116.5997222,
    monitor: "",
    monitorAdvice: "",
    name: "河东南沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测",
    preventionLevel: "",
    preventionPlan: "定期巡查,立警示牌",
    preventionUnit: "乡镇",
    principal: "",
    province: "北京市",
    qp: "",
    reason: "",
    responsibleUnit: "",
    riskLevel: "",
    scale: "小型",
    stableLevel: "",
    status: "",
    thickness: 0,
    threatenFamily: 0,
    threatenMoney: 0,
    threatenPopulation: "",
    threatenType: "",
    town: "琉璃庙镇",
    trigger: "",
    type: "泥石流",
    village: "孙胡沟村",
    volume: "",
    volumePotential: "",
    width: 0,
  },
])
function initDistrictPoint() {
    let list = []
    districtList.value.forEach(item => {
        item.showBillboard = true
        item.className = "district"
        item.type = '泥石流'
        const entity = createPoint(item)
        entity.show = false
        list.push(entity)
    })
    treeMap.set("孙胡沟隐患点", list)
function initDistrictPoint () {
  let list = []
  districtList.value.forEach(item => {
    item.showBillboard = true
    item.className = "district"
    item.type = '泥石流'
    const entity = createPoint(item)
    entity.show = false
    list.push(entity)
  })
  treeMap.set("孙胡沟隐患点", list)
}
let divPointList = []
function initDuanmianPoint() {
    getDuanMainData().then(res => {
        const duanmianList = res.data
        const list = []
        duanmianList.forEach(item => {
            item.id = item.id + item.alias
            item.name = item.alias
            item.longitude = item.lon
            item.latitude = item.lat
            item.showBillboard = false
            item.className = "district"
function initDuanmianPoint () {
  getDuanMainData().then(res => {
    const duanmianList = res.data
    const list = []
    duanmianList.forEach(item => {
      item.id = item.id + item.alias
      item.name = item.alias
      item.longitude = item.lon
      item.latitude = item.lat
      item.showBillboard = false
      item.className = "district"
            const entity = createPoint(item)
            entity.show = false
            list.push(entity)
            return
            const divPoint = earthCtrl.factory.createDivPoint(
                item.alias,
                { lon: longitude, lat: latitude },
                {
                    type: "custom",
                    offset: ["c", 60],
                    description: `
      const entity = createPoint(item)
      entity.show = false
      list.push(entity)
      return
      const divPoint = earthCtrl.factory.createDivPoint(
        item.alias,
        { lon: longitude, lat: latitude },
        {
          type: "custom",
          offset: ["c", 60],
          description: `
            <div class="divPoint-custom">
                <p>${item.alias}</p>
            </div>
          `,
                    near: 0,
                    far: 500000,
                }
            )
            divPoint.item.show = false
            console.log(divPoint)
          near: 0,
          far: 500000,
        }
      )
      divPoint.item.show = false
      console.log(divPoint)
            divPointList.push(divPoint.item)
        })
        treeMap.set("孙胡沟仿真标注地物", list)
    })
      divPointList.push(divPoint.item)
    })
    treeMap.set("孙胡沟仿真标注地物", list)
  })
}
function addTetrahedron(visible) {
    const emergencyAreaList = []
function addTetrahedron (visible) {
  const emergencyAreaList = []
    loadAreaPolygon("/json/emergency_area.geojson", true).then(entities => {
        emergencyAreaList.push(...entities)
    })
    // console.log('polygon', polygon);
  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.addTetrahedron({
            position: {
                lon: item.longitude,
                lat: item.latitude,
                height: item.altitude,
            },
            multiple: 1.0,
            scale: new SmartEarth.Cesium.Cartesian3(20, 20, 20),
        })
        console.log("point", point)
        emergencyAreaList.push(point)
  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.addTetrahedron({
      position: {
        lon: item.longitude,
        lat: item.latitude,
        height: item.altitude,
      },
      multiple: 1.0,
      scale: new SmartEarth.Cesium.Cartesian3(20, 20, 20),
    })
    console.log("point", point)
    emergencyAreaList.push(point)
    })
    treeMap.set("避险点", emergencyAreaList)
  })
  treeMap.set("避险点", emergencyAreaList)
}
function toggleLayerVisible(name, checked) {
    const entityList = treeMap.get(name)
    if (Array.isArray(entityList) && entityList.length > 0) {
        entityList.forEach(entity => {
            entity.show = checked
        })
    }
    treeMap.set(name, entityList)
function toggleLayerVisible (name, checked) {
  const entityList = treeMap.get(name)
  if (Array.isArray(entityList) && entityList.length > 0) {
    entityList.forEach(entity => {
      entity.show = checked
    })
  }
  treeMap.set(name, entityList)
}
function getData() {
    initDevicePoint()
    initDistrictPoint()
    initDuanmianPoint()
function getData () {
  initDevicePoint()
  initDistrictPoint()
  initDuanmianPoint()
}
// 通过 store 传递需要选中的key
watch(() => checkedKeys.value, (keys) => {
    if (keys && Array.isArray(keys)) {
        treeRef.value.setCheckedKeys(defaultSelectedKeys.value.concat(keys), true)
    }
  if (keys && Array.isArray(keys)) {
    treeRef.value.setCheckedKeys(defaultSelectedKeys.value.concat(keys), true)
  }
})
watch(
    () => route.fullPath,
    path => {
        const defaultKeys = defaultSelectedKeys.value
        if (path == "/yhgl") {
            treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟隐患点"), true)
            toggleLayerVisible("孙胡沟隐患点", true)
            toggleLayerVisible("综合监测设备信息", false)
            toggleLayerVisible("孙胡沟仿真标注地物", false)
  () => route.fullPath,
  path => {
    const defaultKeys = defaultSelectedKeys.value
    if (path == "/yhgl") {
      treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟隐患点"), true)
      toggleLayerVisible("孙胡沟隐患点", true)
      toggleLayerVisible("综合监测设备信息", false)
      toggleLayerVisible("孙胡沟仿真标注地物", false)
        } else if (path == "/zhjc") {
            treeRef.value.setCheckedKeys(defaultKeys.concat("综合监测设备信息"), true)
            toggleLayerVisible("综合监测设备信息", true)
            toggleLayerVisible("孙胡沟隐患点", false)
            toggleLayerVisible("孙胡沟仿真标注地物", false)
        } else if (path == "/mnfz") {
            treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟仿真标注地物"), true)
            toggleLayerVisible("孙胡沟仿真标注地物", true)
            toggleLayerVisible("孙胡沟隐患点", false)
            toggleLayerVisible("综合监测设备信息", false)
    } else if (path == "/zhjc") {
      treeRef.value.setCheckedKeys(defaultKeys.concat("综合监测设备信息"), true)
      toggleLayerVisible("综合监测设备信息", true)
      toggleLayerVisible("孙胡沟隐患点", false)
      toggleLayerVisible("孙胡沟仿真标注地物", false)
    } else if (path == "/mnfz") {
      treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟仿真标注地物"), true)
      toggleLayerVisible("孙胡沟仿真标注地物", true)
      toggleLayerVisible("孙胡沟隐患点", false)
      toggleLayerVisible("综合监测设备信息", false)
        } else {
            treeRef.value.setCheckedKeys(defaultKeys, true)
        }
    }
    } else {
      treeRef.value.setCheckedKeys(defaultKeys, true)
    }
  }
)
onMounted(() => {
    initMap()
    getData()
  initMap()
  getData()
})
onUnmounted(() => {
    viewer.entities.removeAll()
  viewer.entities.removeAll()
})
</script>
<style lang="less" scoped>
.layer-tree {
    // position: absolute;
    // top: 11%;
    // right: 25%;
    background: url("@/assets/img/tools/plotting_new.png");
    width: 200px;
    height: 200px;
    z-index: 99;
  // position: absolute;
  // top: 11%;
  // right: 25%;
  background: url("@/assets/img/tools/plotting_new.png");
  width: 200px;
  height: 200px;
  z-index: 99;
}
</style>