<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'
|
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
|
|
function handleClick(item) {
|
currentLevel.value = item.name
|
showDetail.value = !showDetail.value
|
emits('row-click', showDetail.value)
|
|
addFxArea(showDetail.value)
|
}
|
const showDetail = 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>
|
<style>
|
.el-select-dropdown {
|
background: rgba(8, 75, 66, 1) !important;
|
color: white !important;
|
}
|
|
.el-picker-panel__body {
|
color: white !important;
|
}
|
|
.el-picker-panel__body div {
|
background: transparent !important;
|
}
|
|
.el-picker-panel {
|
background: rgba(8, 75, 66, 1) !important;
|
}
|
|
.el-select-dropdown__item {
|
color: white !important;
|
font-size: 12px !important;
|
}
|
|
.el-date-table th {
|
color: white !important;
|
}
|
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
color: #409eff !important;
|
}
|
|
.el-input__wrapper {
|
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;
|
}
|
</style>
|
