<template>
|
<div class="listInfo">
|
<span class="listInfo-title">降雨等级</span>
|
<div class="level-list">
|
<div v-for="item in levelList" :key="item.name" @click="handleClick(item)" class="level-item" :class="item.name == currentLevel ? 'active' : ''">
|
{{ item.name }}
|
</div>
|
</div>
|
<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
|
size="mini"
|
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="输出间隔">
|
<el-radio-group v-model="form.interval" :value="form.interval">
|
<el-radio :value="15">15分钟</el-radio>
|
<el-radio :value="30">30分钟</el-radio>
|
<el-radio :value="60">1小时</el-radio>
|
<el-radio :value="120">2小时</el-radio>
|
<el-radio :value="240">4小时</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="预警时间">
|
<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="endPlay">结束模拟</div>
|
<div class="listinfo-btn listinfo-btn-ac" @click="startPlay">开始模拟</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, onBeforeUnmount } from "vue"
|
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年一遇",
|
},
|
])
|
|
function handleClick (item) {
|
currentLevel.value = item.name
|
}
|
function endPlay () { }
|
function startPlay () {
|
createWaterPrimitive()
|
}
|
let water = null
|
function createWaterPrimitive () {
|
console.log('createWaterPrimitive')
|
if (water) {
|
water.destroy()
|
water = null
|
}
|
water = earthCtrl.analysis.createWaterSimulateGPU({
|
//isDraw: true, // 是否绘制水面
|
height: -5,
|
maxHeight: 2000,
|
coordinates: [116.59934879285792, 40.57756658974129, 0, 116.59934879285792, 40.5436798121795, 0, 116.58050836969261, 40.5436798121795, 0, 116.58050836969261, 40.57756658974129, 0]
|
})
|
water.rainfall = 10
|
// water.rainfall = 0.0001; // 调节雨量
|
// water.rainPointMax = 2.0; // 渗水阈值
|
// water.attenuation = 0.995; // 衰减
|
// water.strenght = 0.25 // 水流强度
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/infobox.css");
|
|
.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;
|
}
|
.level-list {
|
display: flex;
|
margin-top: 10px;
|
flex-wrap: wrap;
|
.level-item {
|
width: 150px;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
background: rgba(8, 75, 66, 1);
|
color: white;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
cursor: pointer;
|
border-radius: 5px;
|
&.active {
|
background: #11b6a6;
|
}
|
}
|
}
|
</style>
|
