<template>
|
<div style="width: 100%; height: 100%">
|
<div class="left-top" v-if="disForm == '行政区划仿真'">
|
行政区划仿真（30m精度）
|
</div>
|
<div class="left-top" v-if="disForm == '重点区域仿真'">
|
重点区域仿真（10m精度）
|
</div>
|
<div class="forms">
|
<el-form :model="forms" label-width="auto" style="max-width: 600px">
|
<el-form-item label="上传参数">
|
<el-upload
|
v-model:file-list="forms.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"
|
:before-upload="beforeUpload"
|
accept=".xlsx,.xls,.csv"
|
>
|
<el-button type="primary">点击上传降雨数据</el-button>
|
<template #append>mm/h</template>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="行政区域:" v-if="disForm == '行政区划仿真'">
|
<el-select
|
v-model="forms.eare"
|
placeholder="Select"
|
style="max-width: 600px"
|
>
|
<el-option
|
v-for="item in cityOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="重点区域" v-if="disForm == '重点区域仿真'">
|
<el-select
|
v-model="forms.eares"
|
placeholder="Select"
|
style="max-width: 600px"
|
>
|
<el-option
|
v-for="item in earesOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="降雨量:">
|
<el-input
|
v-model="forms.rainfall"
|
style="max-width: 600px"
|
placeholder="Please input"
|
>
|
<template #append>mm</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="降雨时长:">
|
<el-input
|
v-model="forms.duration"
|
style="max-width: 600px"
|
placeholder="Please input"
|
>
|
<template #append>h</template>
|
</el-input></el-form-item
|
>
|
<el-form-item label="降雨强度:">
|
<el-input
|
v-model="forms.intensity"
|
style="max-width: 600px"
|
placeholder="Please input"
|
>
|
<template #append>mm/h</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="仿真参数:"> </el-form-item>
|
</el-form>
|
<div style="display: flex; justify-content: flex-end">
|
<el-button type="primary" @click="openSaveDialog">保存方案</el-button>
|
<el-button type="success" @click="startPlay">开始模拟</el-button>
|
</div>
|
</div>
|
|
<!-- 保存方案对话框 -->
|
<el-dialog
|
v-model="saveDialogVisible"
|
:title="dialogTitle"
|
width="50%"
|
:before-close="handleClose"
|
custom-class="custom-dialog"
|
>
|
<div class="dialog-content">
|
<p><strong>模拟类型：</strong>{{ dialogTitle }}</p>
|
<p v-if="disForm === '行政区划仿真'"><strong>行政区域：</strong>{{ forms.eare }}</p>
|
<p v-if="disForm === '重点区域仿真'"><strong>重点区域：</strong>{{ forms.eares }}</p>
|
<p><strong>降雨量：</strong>{{ forms.rainfall }} mm</p>
|
<p><strong>降雨时长：</strong>{{ forms.duration }} h</p>
|
<p><strong>降雨强度：</strong>{{ forms.intensity }} mm/h</p>
|
<!-- <p><strong>上传文件：</strong>{{ uploadedFilesText }}</p> -->
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="saveDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="confirmSave">确定保存</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { reactive, ref, computed ,watch} from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
// 定义 Props
|
const props = defineProps({
|
clickValue: String,
|
});
|
|
// 数据绑定
|
const disForm = ref(""); // 当前显示的表单类型
|
const saveDialogVisible = ref(false); // 控制保存方案对话框的显示状态
|
const forms = reactive({
|
eare: "北京市", // 行政区域
|
eares: "孙胡沟", // 重点区域
|
rainfall: "50", // 降雨量
|
duration: "5", // 降雨时长
|
intensity: "70", // 降雨强度
|
fileList: [], // 上传的文件列表
|
});
|
|
// 行政区域选项
|
const cityOptions = [
|
{ value: "北京市", label: "北京市" },
|
{ value: "东城区", label: "东城区" },
|
{ value: "西城区", label: "西城区" },
|
{ value: "朝阳区", label: "朝阳区" },
|
{ value: "海淀区", label: "海淀区" },
|
{ value: "丰台区", label: "丰台区" },
|
{ value: "石景山区", label: "石景山区" },
|
{ value: "门头沟区", label: "门头沟区" },
|
{ value: "房山区", label: "房山区" },
|
{ value: "通州区", label: "通州区" },
|
{ value: "顺义区", label: "顺义区" },
|
{ value: "昌平区", label: "昌平区" },
|
{ value: "大兴区", label: "大兴区" },
|
{ value: "怀柔区", label: "怀柔区" },
|
{ value: "平谷区", label: "平谷区" },
|
{ value: "密云区", label: "密云区" },
|
{ value: "延庆区", label: "延庆区" },
|
];
|
|
// 重点区域选项
|
const earesOptions = [
|
{ value: "孙胡沟", label: "孙胡沟" },
|
{ value: "鱼水洞后沟", label: "鱼水洞后沟" },
|
{ value: "于家西沟", label: "于家西沟" },
|
{ value: "北河沟", label: "北河沟" },
|
{ value: "龙泉峪村", label: "龙泉峪村" },
|
];
|
|
// 计算属性：获取对话框标题
|
const dialogTitle = computed(() => {
|
return disForm.value === "行政区划仿真" ? "行政区划仿真" : "重点区域仿真";
|
});
|
|
// 计算属性：获取上传文件的名称列表
|
const uploadedFilesText = computed(() => {
|
return forms.fileList.map(file => file.name).join(", ") || "无";
|
});
|
|
// 监听 Props 变化，更新当前表单类型
|
watch(
|
() => props.clickValue,
|
(newValue) => {
|
disForm.value = newValue || "行政区划仿真";
|
},
|
{ immediate: true, deep: true }
|
);
|
|
// 打开保存方案对话框
|
const openSaveDialog = () => {
|
if (
|
!forms.rainfall ||
|
!forms.duration ||
|
!forms.intensity ||
|
(disForm.value === "行政区划仿真" && !forms.eare) ||
|
(disForm.value === "重点区域仿真" && !forms.eares)
|
) {
|
ElMessage.warning("请先填写所有必填项");
|
return;
|
}
|
saveDialogVisible.value = true;
|
};
|
|
// 关闭保存方案对话框
|
const handleClose = () => {
|
saveDialogVisible.value = false;
|
};
|
|
// 确认保存
|
const confirmSave = () => {
|
console.log('保存方案成功', {
|
模拟类型: dialogTitle.value,
|
行政区域: disForm.value === "行政区划仿真" ? forms.eare : null,
|
重点区域: disForm.value === "重点区域仿真" ? forms.eares : null,
|
降雨量: `${forms.rainfall} mm`,
|
降雨时长: `${forms.duration} h`,
|
降雨强度: `${forms.intensity} mm/h`,
|
上传文件: forms.fileList.map(file => file.name),
|
});
|
ElMessage.success('方案已保存');
|
saveDialogVisible.value = false;
|
};
|
|
// 开始模拟
|
function startPlay() {
|
console.log("开始模拟按钮被点击");
|
}
|
|
// 文件上传相关方法
|
function handleRemove(file, uploadFiles) {
|
console.log(file, uploadFiles);
|
}
|
|
function handlePreview(uploadFile) {
|
console.log(uploadFile);
|
}
|
|
function handleExceed(files, uploadFiles) {
|
ElMessage.warning(
|
`The limit is 3, you selected ${files.length} files this time, add up to ${
|
files.length + uploadFiles.length
|
} totally`
|
);
|
}
|
|
const beforeUpload = (file) => {
|
const allowedTypes = [
|
"application/vnd.ms-excel",
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
"text/csv",
|
"application/csv",
|
"text/x-csv",
|
"application/x-csv",
|
"text/comma-separated-values",
|
"text/x-comma-separated-values",
|
];
|
|
const isAllowed = allowedTypes.includes(file.type);
|
const extension = file.name.split(".").pop().toLowerCase();
|
const isExtensionValid = ["xls", "xlsx", "csv"].includes(extension);
|
|
if (!isAllowed || !isExtensionValid) {
|
ElMessage.error("只能上传 Excel (.xls, .xlsx) 或 CSV 文件");
|
return false; // 阻止上传
|
}
|
|
return true; // 允许上传
|
};
|
|
function beforeRemove(uploadFile, uploadFiles) {
|
return ElMessageBox.confirm(
|
`Cancel the transfer of ${uploadFile.name} ?`
|
).then(
|
() => true,
|
() => false
|
);
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.forms {
|
background: url("@/assets/img/screen/leftbg.png");
|
margin-top: 10px;
|
width: 100%;
|
height: 100%;
|
padding: 10px 10px 0px 0px;
|
box-sizing: border-box;
|
}
|
/deep/ .el-input-group__append,
|
.el-input-group__prepend {
|
background-color: #084b42;
|
color: #fff;
|
}
|
/deep/ .el-form-item__label {
|
color: #61f7d4 !important;
|
}
|
</style>
|
