<template>
|
<div class="listInfo">
|
<el-form ref="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 v-model="form.region" placeholder="请选择数据类型">
|
<el-option
|
v-for="region in regionList"
|
:key="region.value"
|
:label="region.label"
|
:value="region.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="降雨数据">
|
<!-- 根据 form.region 的值动态加载组件 -->
|
<div v-if="form.region === '雨强'">
|
<el-input
|
v-model="form.yl"
|
style="width: 250px"
|
placeholder="请输入数据"
|
>
|
<template #append>mm/h</template>
|
</el-input>
|
</div>
|
<div v-else-if="form.region === '雨量'">
|
<el-input
|
v-model="form.yl"
|
style="width: 250px"
|
placeholder="请输入数据"
|
>
|
<template #append>mm</template>
|
</el-input>
|
</div>
|
<div v-else>
|
<el-upload
|
v-model:file-list="fileList"
|
class="upload-demo"
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
multiple
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:before-remove="beforeRemove"
|
:limit="3"
|
:on-exceed="handleExceed"
|
>
|
<el-button type="primary">点击上传降雨数据</el-button>
|
<template #append>mm/h</template>
|
</el-upload>
|
</div>
|
</el-form-item>
|
<el-form-item label="输出间隔">
|
<el-input placeholder="请输入内容" v-model="form.jg">
|
<template #append>s</template>
|
</el-input>
|
</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>
|
<span class="listInfo-title">模拟方案</span>
|
<scheme-card
|
@setSchemClick="setSchemClick"
|
v-bind:schemCard="list"
|
></scheme-card>
|
</div>
|
</template>
|
|
<script>
|
import schemeCard from "@/components/monifangzhen/schemeCard.vue";
|
import {
|
createWaterPrimitive,
|
destoryWaterPrimitive,
|
initeWaterPrimitiveView,
|
} from "@/utils/water";
|
|
export default {
|
components: {
|
schemeCard,
|
},
|
data() {
|
return {
|
isShow: false,
|
// regionList: cityData.listData,
|
regionList: [
|
{ label: "雨强", value: "雨强" },
|
{ label: "雨量", value: "雨量" },
|
{ label: "降雨数据", value: "降雨数据" },
|
],
|
form: {
|
v2: "",
|
qy: cityData.listData[0] || "孙胡沟",
|
region: "雨强",
|
name: "降雨强度30MM",
|
date: [new Date(2025, 1, 15), new Date(2025, 1, 16)],
|
yl: null,
|
status: "进行中",
|
jg: 3,
|
},
|
list: [
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2025-01-13 19:33:04",
|
datPath: "e:/data/hydro/11011611021801/1878767214615695362",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-01 01:59:59",
|
fileCount: 299,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1878767214431145986",
|
name: "降雨数据：房山区东江沟数据",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-30 00:00:00",
|
taskId: "1878767214615695362",
|
taskStatus: 2,
|
updateTime: "2025-01-13 19:33:04",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2025-01-10 14:33:49",
|
datPath: "e:/data/hydro/11011611021801/1877604741980196866",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-02 01:00:00",
|
fileCount: 450,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1877604741590126594",
|
name: "东江沟0729-0801",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-29 22:00:00",
|
taskId: "1877604741980196866",
|
taskStatus: 2,
|
updateTime: "2025-01-10 14:33:49",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-27 12:28:45",
|
datPath: "e:/data/hydro/11011611021801/1872499838538584065",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-02 09:00:00",
|
fileCount: 654,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1872499838278537217",
|
name: "北京市731暴雨",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-28 20:00:00",
|
taskId: "1872499838538584065",
|
taskStatus: 2,
|
updateTime: "2024-12-27 12:28:45",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-20 15:00:11",
|
datPath: "e:/data/hydro/11011611021801/1870001233680502786",
|
dataType: 0,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-12-20 06:00:00",
|
fileCount: 86,
|
fileName: "",
|
hotStart: false,
|
id: "1870001233646948354",
|
name: "雨强30mm",
|
noRainTime: 0,
|
outputPeriod: 300,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-12-20 00:00:00",
|
taskId: "1870001233680502786",
|
taskStatus: 2,
|
updateTime: "2024-12-20 15:00:11",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-19 17:34:34",
|
datPath: "e:/data/hydro/11011611021801/1869677696923045889",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-01 03:00:44",
|
fileCount: 388,
|
fileName: "截流坝雨量计0068.xls",
|
hotStart: false,
|
id: "1869677696608473090",
|
name: "截流坝数据模拟0729-0731",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-29 21:00:13",
|
taskId: "1869677696923045889",
|
taskStatus: 2,
|
updateTime: "2024-12-19 17:34:34",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-13 15:03:24",
|
datPath: "e:/data/hydro/11011611021801/1867465327392165890",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-07-31 12:00:00",
|
fileCount: 288,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1867465327106953218",
|
name: "东江沟数据模拟0729-0731",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-29 12:00:00",
|
taskId: "1867465327392165890",
|
taskStatus: 2,
|
updateTime: "2024-12-13 15:03:24",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 19:01:16",
|
datPath: "e:/data/hydro/11011611021801/1862089369491931138",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-07-31 00:00:00",
|
fileCount: 145,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1862089369462571010",
|
name: "东江沟雨量0731",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-30 00:00:00",
|
taskId: "1862089369491931138",
|
taskStatus: 2,
|
updateTime: "2024-11-28 19:01:16",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 18:47:45",
|
datPath: "e:/data/hydro/11011611021801/1862085967261270017",
|
dataType: 0,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-08-31 00:00:00",
|
fileCount: 145,
|
fileName: "",
|
hotStart: false,
|
id: "1862085967252881410",
|
name: "雨强模拟方案0830",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-08-30 00:00:00",
|
taskId: "1862085967261270017",
|
taskStatus: 2,
|
updateTime: "2024-11-28 18:47:45",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 18:39:49",
|
datPath: "e:/data/hydro/11011611021801/1862083971414294529",
|
dataType: 1,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-07-31 00:00:00",
|
fileCount: 145,
|
fileName: "",
|
hotStart: false,
|
id: "1862083971003252737",
|
name: "雨量模拟方案0730",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-07-30 00:00:00",
|
taskId: "1862083971414294529",
|
taskStatus: 2,
|
updateTime: "2024-11-28 18:39:49",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 17:26:45",
|
datPath: "e:/data/hydro/11011611021801/1862065584806100994",
|
dataType: 0,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-11-28 09:26:17",
|
fileCount: 57,
|
fileName: "",
|
hotStart: false,
|
id: "1862065584743186434",
|
name: "雨强模拟方案1128",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-11-28 00:00:00",
|
taskId: "1862065584806100994",
|
taskStatus: 2,
|
updateTime: "2024-11-28 17:26:45",
|
userId: "0",
|
},
|
],
|
schemCard: [
|
{
|
name: "降雨强度10MM",
|
date: "2025-01-15 20:22:59",
|
status: "进行中",
|
},
|
{
|
name: "降雨强度20MM",
|
date: "2025-01-15 20:22:59",
|
status: "进行中",
|
},
|
{
|
name: "降雨强度30MM",
|
date: "2025-01-15 20:22:59",
|
status: "进行中",
|
},
|
{
|
name: "降雨强度50MM",
|
date: "2025-01-15 20:22:59",
|
status: "进行中",
|
},
|
],
|
fileList: [],
|
};
|
},
|
computed: {},
|
mounted() {},
|
destroyed() {
|
destoryWaterPrimitive();
|
},
|
methods: {
|
handleRemove(file, uploadFiles) {
|
console.log(file, uploadFiles);
|
},
|
|
handlePreview(uploadFile) {
|
console.log(uploadFile);
|
},
|
|
handleExceed(files, uploadFiles) {
|
ElMessage.warning(
|
`The limit is 3, you selected ${
|
files.length
|
} files this time, add up to ${
|
files.length + uploadFiles.length
|
} totally`
|
);
|
},
|
|
beforeRemove(uploadFile, uploadFiles) {
|
return ElMessageBox.confirm(
|
`Cancel the transfer of ${uploadFile.name} ?`
|
).then(
|
() => true,
|
() => false
|
);
|
},
|
|
setSchemClick(res) {
|
console.log(res);
|
|
this.$emit("setSchemChange", res);
|
},
|
/**
|
* 打开文件选取对话框
|
* @param fn 选取文件后回调，接收event和filelist参数
|
* @param accept 文件类型
|
* @param multiple 是否多选
|
*/
|
openFilePicker({ fn, accept, multiple } = {}) {
|
const inpEle = document.createElement("input");
|
inpEle.id = `__file_${Math.trunc(Math.random() * 100000)}`;
|
inpEle.type = "file";
|
inpEle.style.display = "none";
|
// 文件类型限制
|
accept && (inpEle.accept = accept);
|
// 多选限制
|
multiple && (inpEle.multiple = multiple);
|
inpEle.addEventListener(
|
"change",
|
(event) => fn.call(inpEle, event, inpEle.files),
|
{
|
once: true,
|
}
|
);
|
inpEle.click();
|
},
|
openfilie() {
|
this.openFilePicker({
|
fn: (e, files) => {
|
console.group("获取到的文件");
|
console.log("files", files);
|
console.groupEnd();
|
},
|
});
|
},
|
savefilie() {
|
this.openFilePicker({
|
fn: (e, files) => {
|
console.group("获取到的文件");
|
console.log("files", files);
|
console.groupEnd();
|
},
|
});
|
},
|
endPlay() {
|
this.$emit("end");
|
},
|
startPlay() {
|
initeWaterPrimitiveView();
|
this.$emit("start", this.form);
|
// this.$parent.$parent.rightShow = true
|
this.$parent.$parent.flowShow = true;
|
this.isShow = !this.isShow;
|
// let desc = { func_name: "RiverDrown", visibility: this.isShow }
|
// ps.emitMessage(desc)
|
},
|
},
|
};
|
</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;
|
}
|
/deep/ .el-select__placeholder {
|
color: white;
|
}
|
/deep/ .el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
color: white !important;
|
background-color: rgb(38, 124, 124, 0.5);
|
}
|
/deep/ .el-input-number__decrease,
|
/deep/.el-input-number__increase {
|
background-color: #084b42;
|
}
|
/deep/.el-upload-list {
|
margin: 4px;
|
}
|
|
// .el-input-number {
|
// --el-border-color:background: rgba(8, 75, 66, 1) !important;
|
// color: rgba(8, 75, 66, 1);
|
// span {
|
// background: rgba(8, 75, 66, 1) !important;
|
// color: rgba(8, 75, 66, 1);
|
|
// }
|
|
// }
|
// .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>
|
