修改图层显示

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>