修改图层显示

guonan

2025-04-21 df7876b99d8e8d359909756d42e909dcc215fa38

修改图层显示

 src/components/monifangzhen/ResultAssess.vue

@@ -1,20 +1,20 @@
<template>
    <div class="left">
        <div class="left-top">
            <span>泥石流模拟危险性评估</span>
        </div>
        <div class="left-content">
            <div class="list-info">
                <span class="listInfo-title">模拟方案</span>
  <div class="left">
    <div class="left-top">
      <span>泥石流模拟危险性评估</span>
    </div>
    <div class="left-content">
      <div class="list-info">
        <span class="listInfo-title">模拟方案</span>

                <el-form :model="form" label-width="70px">
                    <el-form-item label="模拟方案">
                        <el-input placeholder="请输入内容" v-model="form.name" ></el-input>
                    </el-form-item>
                    <el-form-item label="评估区域">
                        <el-input placeholder="请输入内容" v-model="form.qy" ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="数据类型">
        <el-form :model="form" label-width="70px">
          <el-form-item label="模拟方案">
            <el-input placeholder="请输入内容" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="评估区域">
            <el-input placeholder="请输入内容" v-model="form.qy"></el-input>
          </el-form-item>
          <!-- <el-form-item label="数据类型">
                <el-select
                    
                    style="width: 100%"
@@ -25,266 +25,282 @@
                </el-select>
            </el-form-item> -->

                    <el-form-item label="创建时间" style="width: 270px">
                        <el-date-picker
                            size="small"
                            v-model="form.date"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="listinfo-btns">
                    <div class="listinfo-btn" @click="openfilie">开始评估</div>
                    <div class="listinfo-btn" @click="savefilie">保存方案</div>
                </div>
            </div>
            <div class="listInfo-title" style="margin-top: 15px">历史评估</div>
            <div class="level-list">
                <div
                    v-for="item in levelList"
                    :key="item.name"
                    @click="handleClick(item)"
                    class="level-item"
                >
                    <img style="width: 100%" src="@/assets/img/mapview/example.png" alt="" srcset="" />
                    <div class="title">
                        <div>创建时间：</div>
                        <div>2024年04月03日12:00:00</div>
                    </div>
                    <div class="title">
                        <div>评估模型：</div>
                        <div>XXX危险性评估模型</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
          <el-form-item label="创建时间" style="width: 270px">
            <el-date-picker
              size="small"
              v-model="form.date"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="listinfo-btns">
          <div class="listinfo-btn" @click="openfilie">开始评估</div>
          <div class="listinfo-btn" @click="savefilie">保存方案</div>
        </div>
      </div>
      <div class="listInfo-title" style="margin-top: 15px">历史评估</div>
      <div class="level-list">
        <div
          v-for="item in levelList"
          :key="item.name"
          @click="handleClick(item)"
          class="level-item"
        >
          <img
            style="width: 100%"
            src="@/assets/img/mapview/example.png"
            alt=""
            srcset=""
          />
          <div class="title">
            <div>创建时间：</div>
            <div>2024年04月03日12:00:00</div>
          </div>
          <div class="title">
            <div>评估模型：</div>
            <div>XXX危险性评估模型</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, onUnmounted, defineEmits } from "vue"
import { loadAreaPolygon } from '@/utils/area.js'
const emits = defineEmits(['row-click'])
const currentLevel = ref("10年一遇")
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  defineEmits,
} from "vue";
import { loadAreaPolygon } from "@/utils/area.js";
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const emits = defineEmits(["row-click"]);
const currentLevel = ref("10年一遇");
const form = ref({
    name: `孙胡沟${currentLevel.value}降雨模拟`,
    interval: 15,
    qy: "孙胡沟",
    region: "",
    jy: "",
    jg: "",
    date: "",
})
  name: `孙胡沟${currentLevel.value}降雨模拟`,
  interval: 15,
  qy: "孙胡沟",
  region: "",
  jy: "",
  jg: "",
  date: "",
});
const levelList = ref([
    {
        name: "10年一遇",
    },
    {
        name: "20年一遇",
    },
    {
        name: "50年一遇",
    },
    // {
    //     name: "100年一遇",
    // },
])
  {
    name: "10年一遇",
  },
  {
    name: "20年一遇",
  },
  {
    name: "50年一遇",
  },
  // {
  //     name: "100年一遇",
  // },
]);

let dataSource = null
let dataSource = null;
const simStore = useSimStore();

const { showDangerAssess } = storeToRefs(simStore);

function handleClick(item) {
    currentLevel.value = item.name
    showDetail.value = !showDetail.value
    emits('row-click', showDetail.value)

    addFxArea(showDetail.value)
  currentLevel.value = item.name;
  showDangerAssess.value = !showDangerAssess.value;
  //   showDangerAssess.value = true;
  emits("row-click", showDangerAssess.value);
  addFxArea(showDangerAssess.value);
}
const showDetail = ref(false)
// const showDangerAssess = ref(false);
function addFxArea(visible) {
    if (dataSource != null) {
        dataSource.show = visible
  if (dataSource != null) {
    dataSource.show = visible;

        return
    }
    // const dataSourcePromise = Cesium.GeoJsonDataSource.load('/json/fxArea.json', {
    //     stroke: Cesium.Color.YELLOW,
    //     fill: Cesium.Color.YELLOW.withAlpha(0.5),
    // })
    dataSourcePromise.then(data => {
        dataSource = data
        viewer.dataSources.add(data)
    })

    return;
  }
  const dataSourcePromise = Cesium.GeoJsonDataSource.load("/json/fxArea.json", {
    stroke: Cesium.Color.YELLOW,
    fill: Cesium.Color.YELLOW.withAlpha(0.5),
  });
  dataSourcePromise.then((data) => {
    dataSource = data;
    viewer.dataSources.add(data);
  });
}
function removeFxArea() {
    dataSource && viewer.dataSources.remove(dataSource)
  dataSource && viewer.dataSources.remove(dataSource);
}
onUnmounted(() => {
    removeFxArea()
})
  removeFxArea();
});
</script>

<style lang="less" scoped>
@import url("../../assets/css/infobox.css");

.level-list {
    overflow-y: auto;
    height: calc(100% - 270px);
  overflow-y: auto;
  height: calc(100% - 270px);

    .level-item {
        margin-top: 10px;
        width: 90%;
        height: 200px;
        text-align: center;
        /* background: rgba(8, 75, 66, 1); */
        color: white;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        border-radius: 5px;
  .level-item {
    margin-top: 10px;
    width: 90%;
    height: 200px;
    text-align: center;
    /* background: rgba(8, 75, 66, 1); */
    color: white;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;

        img {
            width: 100%;
            height: 130px;
            border-radius: 5px;
        }
    img {
      width: 100%;
      height: 130px;
      border-radius: 5px;
    }

        .title {
            display: flex;
            justify-content: space-between;
            padding: 0 15px;
        }
    .title {
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
    }

        /* &.active {
    /* &.active {
                background: #11b6a6;
            } */
    }
  }
}

.listinfo {
    padding: 10px;
  padding: 10px;
}

.listInfo-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-top: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-top: 20px;
}

.listInfo {
    font-size: 12px;
    display: flex;
    flex-direction: column;
  font-size: 12px;
  display: flex;
  flex-direction: column;

    :last-child {
        flex: 1;
        color: white !important;
    }
  :last-child {
    flex: 1;
    color: white !important;
  }

    /deep/.el-select__selected-item .el-select__placeholder {
        span {
            color: white !important;
        }
    }
  /deep/.el-select__selected-item .el-select__placeholder {
    span {
      color: white !important;
    }
  }
}

/deep/.el-form-item__label {
    color: #78cda4;
    font-size: 14px;
    // width: 84px;
  color: #78cda4;
  font-size: 14px;
  // width: 84px;
}

/deep/.el-form-item {
    margin: 10px 0px;
  margin: 10px 0px;
}

/deep/.el-input {
    width: calc(100% - 80px);
  width: calc(100% - 80px);
}

/deep/.el-input__inner {
    background: rgba(8, 75, 66, 1);
    color: white;
  background: rgba(8, 75, 66, 1);
  color: white;
}

/deep/.el-form-item__content {
    width: 100%;
  width: 100%;
}

/deep/.el-input-group__append,
.el-input-group__prepend {
    padding: 0 6px;
    background: rgba(8, 75, 66, 1) !important;
    color: #ffffff;
  padding: 0 6px;
  background: rgba(8, 75, 66, 1) !important;
  color: #ffffff;
}

/deep/.el-form-item__content .el-input-group {
    vertical-align: middle;
  vertical-align: middle;
}

/deep/.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
    width: calc(100% - 80px) !important;
    background: rgba(8, 75, 66, 1) !important;
  width: calc(100% - 80px) !important;
  background: rgba(8, 75, 66, 1) !important;
}

/deep/.el-date-editor .el-range-separator {
    color: white;
  color: white;
}

/deep/.el-range-input {
    background: transparent !important;
    color: white !important;
  background: transparent !important;
  color: white !important;
}
</style>
<style>
.el-select-dropdown {
    background: rgba(8, 75, 66, 1) !important;
    color: white !important;
  background: rgba(8, 75, 66, 1) !important;
  color: white !important;
}

.el-picker-panel__body {
    color: white !important;
  color: white !important;
}

.el-picker-panel__body div {
    background: transparent !important;
  background: transparent !important;
}

.el-picker-panel {
    background: rgba(8, 75, 66, 1) !important;
  background: rgba(8, 75, 66, 1) !important;
}

.el-select-dropdown__item {
    color: white !important;
    font-size: 12px !important;
  color: white !important;
  font-size: 12px !important;
}

.el-date-table th {
    color: white !important;
  color: white !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    color: #409eff !important;
  color: #409eff !important;
}

.el-input__wrapper {
    background: rgba(8, 75, 66, 1) !important;
    border: 2px solid #437a74 !important;
    box-shadow: none !important;
  background: rgba(8, 75, 66, 1) !important;
  border: 2px solid #437a74 !important;
  box-shadow: none !important;
}

.el-select__wrapper {
    background: rgba(8, 75, 66, 1) !important;
    border: 2px solid #437a74 !important;
    box-shadow: none !important;
  background: rgba(8, 75, 66, 1) !important;
  border: 2px solid #437a74 !important;
  box-shadow: none !important;
}
</style>

 src/components/tools/LayerTree.vue

@@ -13,13 +13,18 @@
</template>

<script setup>
import { ref, onMounted, watch, nextTick,onUnmounted } from "vue";
import { ref, onMounted, watch, nextTick, onUnmounted } from "vue";
import { createPoint, removeEntities, addTileset } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { useRoute } from "vue-router";
import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
import { checkedKeys } from "@/store/index";
import { getDuanMainData, getDevicetListData, getDistrictListData } from "@/api/index.js";
import {
  getDuanMainData,
  getDevicetListData,
  getDistrictListData,
} from "@/api/index.js";
import { init } from "echarts";

const route = useRoute();

@@ -57,42 +62,85 @@
/**
 * 初始化地图
 */
function initMap() {
  // 初始化地形数据
  let TerrainLayer = earthCtrl.factory.createTerrainLayer({
    sourceType: "ctb",
    url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
  });
  treeMap.set("地形数据", TerrainLayer);
    // 初始化模型数据
  // let modelPromise = addTileset(
  //   "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json"
  // );
  // modelPromise.then((model) => {
  //   treeMap.set("模型数据", model);
  // });
// function initMap() {
//   // 初始化地形数据
//   let TerrainLayer = earthCtrl.factory.createTerrainLayer({
//     sourceType: "ctb",
//     url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
//   });
//   treeMap.set("地形数据", TerrainLayer);
//   console.log(TerrainLayer,'aaaa')
//   // 初始化模型数据
//   // 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",
  // });
  // treeMap.set("影像数据", ImageryLayer);
//   // 初始化影像数据
//   // let ImageryLayer = earthCtrl.factory.createImageryLayer({
//   //   sourceType: "tms",
//   //   url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
//   // });
//   // treeMap.set("影像数据", ImageryLayer);
// }


// 地形数据
let TerrainLayer = null;
async function initMap() {
  try {
    // 初始化地形数据（使用await等待Promise解析）
    TerrainLayer = await earthCtrl.factory.createTerrainLayer({
      sourceType: "ctb",
      url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
    });

    treeMap.set("地形数据", TerrainLayer);
  } catch (error) {
    console.error("初始化失败:", error);
  }
}

/**
 * 处理复选框状态变化
 */
// 应用初始化时预先加载
// 影像数据初始
let ImageryLayer = null;
async function initImageryLayer() {
  ImageryLayer = await earthCtrl.factory.createImageryLayer({
    sourceType: "tms",
    url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
  });
}

function handleCheckChange(data, checked, indeterminate) {
  const label = data.label;
  if (label === "地形数据") {
    if (checked) {
      initMap();
      treeMap.set("地形数据", TerrainLayer);
      toggleLayerVisible("地形数据", true); // 显示影像数据
    } else {
      const layer = treeMap.get("地形数据");
      if (layer) {
        toggleLayerVisible("地形数据", false); // 隐藏影像数据
        TerrainLayer.removeFromMap(); // 从 Map 中移除
        console.log("影像数据已移除");
      }
    }
  }
  if (label === "影像数据") {
    if (checked) {
      // 加载影像数据
      console.log("开始加载影像数据...");
      let ImageryLayer = earthCtrl.factory.createImageryLayer({
        sourceType: "tms",
        url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
      });
      initImageryLayer();
      // // 加载影像数据
      // console.log("开始加载影像数据...");
      // ImageryLayer = earthCtrl.factory.createImageryLayer({
      //   sourceType: "tms",
      //   url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
      // });
      treeMap.set("影像数据", ImageryLayer);
      toggleLayerVisible("影像数据", true); // 显示影像数据
    } else {
@@ -114,13 +162,15 @@
        "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json"
      );

      modelPromise.then((model) => {
        console.log("模型数据加载完成");
        treeMap.set("模型数据", model); // 将模型数据存储到 treeMap
        toggleLayerVisible("模型数据", true); // 显示模型数据
      }).catch((error) => {
        console.error("模型数据加载失败:", error);
      });
      modelPromise
        .then((model) => {
          console.log("模型数据加载完成");
          treeMap.set("模型数据", model); // 将模型数据存储到 treeMap
          toggleLayerVisible("模型数据", true); // 显示模型数据
        })
        .catch((error) => {
          console.error("模型数据加载失败:", error);
        });
    } else {
      // 隐藏模型数据
      toggleLayerVisible("模型数据", false);
@@ -162,7 +212,7 @@
      console.log(`Setting entity show to:`, checked);
      entity.show = checked;
    });
  } else if (entityList && typeof entityList.show !== 'undefined') {
  } else if (entityList && typeof entityList.show !== "undefined") {
    console.log(`Setting layer show to:`, checked);
    entityList.show = checked;
  } else {
@@ -178,7 +228,7 @@
 */
const getDevicetList = async () => {
  await getDevicetListData().then((res) => {
    console.log(res.data, 'devicetList.value2');
    console.log(res.data, "devicetList.value2");
    devicetList.value = res.data;
  });
};
@@ -312,10 +362,7 @@
      toggleLayerVisible("孙胡沟隐患点", false);
      toggleLayerVisible("孙胡沟断面", false);
    } else if (path == "/mnfz") {
      treeRef.value.setCheckedKeys(
        defaultKeys.concat("孙胡沟断面"),
        false
      );
      treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟断面"), false);
      toggleLayerVisible("孙胡沟断面", false);
      toggleLayerVisible("孙胡沟隐患点", false);
      toggleLayerVisible("综合监测设备信息", false);
@@ -348,4 +395,4 @@
  height: 200px;
  z-index: 99;
}
</style>
</style>

 src/views/mnfz.vue

@@ -1,9 +1,23 @@
<template>
  <Left @start="startSimulate" @end="endSimulate" />
  <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" v-if="rightRiverShow" />
  <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="rightRiverShow"
  />
  <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>

@@ -22,12 +36,10 @@
import danger from "@/assets/img/left/danger.png";
import { checkedKeys } from "@/store/index";


import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { rightRiverShow } = storeToRefs(simStore);


const waterSimulateParams = ref({});
const showWaterSimulate = ref(false);
@@ -37,9 +49,6 @@
const isFinish = ref(true);

const treeMap = new Map();




// 提供方法给所有子组件
provide("simulateActions", {
@@ -107,7 +116,7 @@
    });
    await Promise.all(loadPromises);
    setupRowClickListener(dataSources);
  } catch (error) { }
  } catch (error) {}
}
// 清除隐患点
function removeDataSources() {