<template>
|
<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-select
|
|
style="width: 100%"
|
v-model="form.region"
|
placeholder="请选择活动区域"
|
>
|
<el-option v-for="region in regionList" :label="region" :value="region"></el-option>
|
</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>
|
</template>
|
|
<script setup>
|
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: "",
|
});
|
const levelList = ref([
|
{
|
name: "10年一遇",
|
},
|
{
|
name: "20年一遇",
|
},
|
{
|
name: "50年一遇",
|
},
|
// {
|
// name: "100年一遇",
|
// },
|
]);
|
|
let dataSource = null;
|
const simStore = useSimStore();
|
|
const { showDangerAssess } = storeToRefs(simStore);
|
|
function handleClick(item) {
|
currentLevel.value = item.name;
|
showDangerAssess.value = !showDangerAssess.value;
|
// showDangerAssess.value = true;
|
emits("row-click", showDangerAssess.value);
|
addFxArea(showDangerAssess.value);
|
}
|
// const showDangerAssess = ref(false);
|
function addFxArea(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);
|
});
|
}
|
function removeFxArea() {
|
dataSource && viewer.dataSources.remove(dataSource);
|
}
|
onUnmounted(() => {
|
removeFxArea();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/infobox.css");
|
|
.level-list {
|
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;
|
|
img {
|
width: 100%;
|
height: 130px;
|
border-radius: 5px;
|
}
|
|
.title {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 15px;
|
}
|
|
/* &.active {
|
background: #11b6a6;
|
} */
|
}
|
}
|
|
.listinfo {
|
padding: 10px;
|
}
|
|
.listInfo-title {
|
color: #fff;
|
font-size: 16px;
|
font-weight: 700;
|
margin-top: 20px;
|
}
|
|
.listInfo {
|
font-size: 12px;
|
display: flex;
|
flex-direction: column;
|
|
:last-child {
|
flex: 1;
|
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;
|
}
|
|
/deep/.el-form-item {
|
margin: 10px 0px;
|
}
|
|
/deep/.el-input {
|
width: calc(100% - 80px);
|
}
|
|
/deep/.el-input__inner {
|
background: rgba(8, 75, 66, 1);
|
color: white;
|
}
|
|
/deep/.el-form-item__content {
|
width: 100%;
|
}
|
|
/deep/.el-input-group__append,
|
.el-input-group__prepend {
|
padding: 0 6px;
|
background: rgba(8, 75, 66, 1) !important;
|
color: #ffffff;
|
}
|
|
/deep/.el-form-item__content .el-input-group {
|
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;
|
}
|
|
/deep/.el-date-editor .el-range-separator {
|
color: white;
|
}
|
|
/deep/.el-range-input {
|
background: transparent !important;
|
color: white !important;
|
}
|
</style>
|