| | |
| | | <template> |
| | | <div style="width: 100%; height: 100%"> |
| | | <div |
| | | class="left-top" |
| | | v-if="simStore.selectTab == '行政区划仿真'" |
| | | style="margin-top: 0px" |
| | | > |
| | | <div class="left-top" v-if="simStore.selectTab == '行政区划仿真'" style="margin-top: 0px"> |
| | | 行政区划仿真(30m精度) |
| | | </div> |
| | | <div class="left-top" v-if="simStore.selectTab == '重点区域仿真'"> |
| | |
| | | </div> |
| | | |
| | | <div class="forms" :class="{ 'no-background': !showBackground }"> |
| | | <el-form |
| | | :rules="rules" |
| | | :model="forms" |
| | | label-width="auto" |
| | | style="max-width: 600px" |
| | | > |
| | | <el-form :rules="rules" :model="forms" label-width="auto" style="max-width: 600px"> |
| | | <el-form-item label="方案名称:"> |
| | | <el-input |
| | | v-model="forms.name" |
| | | style="max-width: 600px" |
| | | placeholder="请输入方案名称" |
| | | > |
| | | <el-input v-model="forms.name" style="max-width: 600px" placeholder="请输入方案名称"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="上传参数"> |
| | | <el-upload |
| | | :on-remove="handleRemove" |
| | | v-model:file-list="forms.fileList" |
| | | class="upload-demo" |
| | | :auto-upload="false" |
| | | :multiple="false" |
| | | :on-change="handleFileChange" |
| | | :limit="1" |
| | | :on-exceed="handleExceed" |
| | | :before-upload="beforeUpload" |
| | | accept=".xlsx,.xls,.csv" |
| | | > |
| | | <el-upload :on-remove="handleRemove" v-model:file-list="forms.fileList" class="upload-demo" |
| | | :auto-upload="false" :multiple="false" :on-change="handleFileChange" :limit="1" :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="forms.fileList.length !== 0"> |
| | | <el-select |
| | | v-model="forms.intensityUnit" |
| | | placeholder="请选择雨强单位" |
| | | style="max-width: 600px" |
| | | :disabled="!!forms.intensityUnit" |
| | | > |
| | | <el-option |
| | | v-for="item in intensityOptions" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | <el-select v-model="forms.intensityUnit" placeholder="请选择雨强单位" style="max-width: 600px" |
| | | :disabled="!!forms.intensityUnit"> |
| | | <el-option v-for="item in intensityOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="行政区域:" |
| | | v-if="simStore.selectTab == '行政区划仿真'" |
| | | > |
| | | <el-select |
| | | @change="changeGeom" |
| | | v-model="forms.geom" |
| | | placeholder="请选择模拟区域" |
| | | style="max-width: 600px" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item" |
| | | /> |
| | | <el-form-item label="行政区域:" v-if="simStore.selectTab == '行政区划仿真'"> |
| | | <el-select @change="changeGeom" v-model="forms.geom" placeholder="请选择模拟区域" style="max-width: 600px"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="重点区域:" |
| | | v-if="simStore.selectTab == '重点区域仿真'" |
| | | > |
| | | <el-select |
| | | @change="changeGeom" |
| | | v-model="forms.geom" |
| | | placeholder="请选择模拟区域" |
| | | style="max-width: 600px" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item" |
| | | /> |
| | | <el-form-item label="重点区域:" v-if="simStore.selectTab == '重点区域仿真'"> |
| | | <el-select @change="changeGeom" v-model="forms.geom" placeholder="请选择模拟区域" style="max-width: 600px"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="降雨量:"> |
| | | <el-input |
| | | v-model="forms.rainfall" |
| | | style="max-width: 600px" |
| | | placeholder="请输入降雨量" |
| | | > |
| | | <el-input v-model="forms.rainfall" style="max-width: 600px" placeholder="请输入降雨量"> |
| | | <template #append>mm</template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="选择时间:"> |
| | | <el-date-picker |
| | | v-if="forms.fileList.length !== 0" |
| | | v-model="forms.hours" |
| | | type="datetime" |
| | | placeholder="请选择开始时间" |
| | | /> |
| | | <el-date-picker |
| | | v-if="forms.fileList.length == 0" |
| | | v-model="forms.hours" |
| | | type="datetimerange" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | date-format="YYYY/MM/DD ddd" |
| | | time-format="A hh:mm:ss" |
| | | @change="change" |
| | | /> |
| | | <el-date-picker v-if="forms.fileList.length !== 0" v-model="forms.hours" type="datetime" |
| | | placeholder="请选择开始时间" /> |
| | | <el-date-picker v-if="forms.fileList.length == 0" v-model="forms.hours" type="datetimerange" |
| | | start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" |
| | | time-format="A hh:mm:ss" @change="change" /> |
| | | </el-form-item> |
| | | <el-form-item label="降雨时长:"> |
| | | <el-input |
| | | disabled |
| | | v-model="forms.duration" |
| | | style="max-width: 600px" |
| | | placeholder="请输入降雨时长" |
| | | > |
| | | <el-input disabled v-model="forms.duration" style="max-width: 600px" placeholder="请输入降雨时长"> |
| | | <template #append>h</template> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="降雨强度:"> |
| | | <el-input |
| | | v-model="forms.intensity" |
| | | style="max-width: 600px" |
| | | placeholder="请输入降雨强度" |
| | | > |
| | | <el-input v-model="forms.intensity" style="max-width: 600px" placeholder="请输入降雨强度"> |
| | | <template #append>mm/h</template> |
| | | </el-input> |
| | | </el-form-item> |
| | |
| | | forms.geom = props.selectedArea; |
| | | } |
| | | await simStore.addSimCheme(forms); |
| | | // 打印拦挡坝所需要的数据 |
| | | // printDamEntities(); |
| | | resetForm(); // 只有在保存成功后才重置表单 |
| | | EventBus.emit("close-selectArea"); |
| | | } catch (error) {} |
| | | } catch (error) { } |
| | | }; |
| | | |
| | | // 重置表单 |
| | |
| | | // ElMessage.error("启动模拟失败,请稍后再试"); |
| | | } |
| | | } |
| | | // ========================================拦挡坝=============================================================== |
| | | // 获取拦挡坝数据 |
| | | function printDamEntities() { |
| | | const entities = viewer.entities.values; |
| | | const damDataList = []; |
| | | |
| | | for (let i = 0; i < entities.length; i++) { |
| | | const entity = entities[i]; |
| | | |
| | | if (entity.name && (entity.name === '栏档坝1' || entity.name === '栏档坝2')) { |
| | | damDataList.push({ |
| | | name: entity.name, |
| | | position: entity.position?._value, |
| | | heading: entity.heading?._value ?? entity.heading, |
| | | pitch: entity.pitch?._value ?? entity.pitch, |
| | | roll: entity.roll?._value ?? entity.roll, |
| | | modelScale: entity.model?.scale?._value ?? entity.model?.scale |
| | | }); |
| | | } |
| | | } |
| | | if (damDataList.length > 0) { |
| | | console.log("【栏档坝实体数据列表】:", damDataList); |
| | | deleteDamEntitiesAfterDelay(); |
| | | } else { |
| | | console.log("未找到任何名为 '栏档坝1' 或 '栏档坝2' 的实体"); |
| | | } |
| | | } |
| | | // 保存方案后定时清除新建的拦挡坝数据 |
| | | function deleteDamEntitiesAfterDelay() { |
| | | setTimeout(() => { |
| | | const entities = Array.from(viewer.entities.values); |
| | | const damsToDelete = entities.filter( |
| | | entity => entity.name === '栏档坝1' || entity.name === '栏档坝2' |
| | | ); |
| | | |
| | | damsToDelete.forEach(entity => { |
| | | viewer.entities.remove(entity); |
| | | }); |
| | | |
| | | if (damsToDelete.length > 0) { |
| | | console.log(`【已删除】共 ${damsToDelete.length} 个栏档坝实体`); |
| | | } else { |
| | | console.log("未找到任何可删除的栏档坝实体"); |
| | | } |
| | | }, 5000); |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | |
| | | margin-top: 0px; |
| | | background-image: none; |
| | | } |
| | | |
| | | /deep/ .el-input-group__append, |
| | | .el-input-group__prepend { |
| | | background-color: #084b42; |
| | | color: #fff; |
| | | } |
| | | |
| | | /deep/ .el-form-item__label { |
| | | color: #61f7d4 !important; |
| | | } |
| | | |
| | | /deep/ .el-upload-list__item-file-name { |
| | | white-space: normal; |
| | | } |