151 lines
4.9 KiB
Vue
151 lines
4.9 KiB
Vue
<template>
|
||
<div class="detail-container">
|
||
<el-form ref="formRef" :model="form" label-position="right" label-width="auto"
|
||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
|
||
<div class="form-part">
|
||
<el-row>
|
||
<h4 style="margin: 0 0 20px 0;">气象信息</h4>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="预警标题" prop="预警标题">
|
||
<el-input v-model="form.headline" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="预警时间" prop="预警时间">
|
||
<el-col :span="11">
|
||
<el-date-picker v-model="form.onset" type="date" placeholder="开始时间" style="width: 100%" />
|
||
</el-col>
|
||
<el-col :span="2" class="text-center">
|
||
<span class="text-gray-500">-</span>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-date-picker v-model="form.expires" type="date" placeholder="过期时间" style="width: 100%" />
|
||
</el-col>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="气象类型" prop="气象类型">
|
||
<el-select v-model="form.eventType" clearable placeholder="请选择">
|
||
<el-option v-for="(item, index) in [
|
||
{ label: '道路结冰', value: '道路结冰' },
|
||
{ label: '暴雪', value: '暴雪' },
|
||
{ label: '暴雨', value: '暴雨' },
|
||
]" :key="index" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="气象来源" prop="气象来源">
|
||
<el-select v-model="form.weatherSource" clearable placeholder="请选择">
|
||
<el-option v-for="(item, index) in [
|
||
{ label: '市级', value: '1' },
|
||
{ label: '部级', value: '2' },
|
||
{ label: '区县', value: '3' },
|
||
]" :key="index" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="预警等级" prop="预警等级">
|
||
<el-select v-model="form.urgency" clearable placeholder="请选择">
|
||
<el-option v-for="(item, index) in [
|
||
{ label: '1级（红色预警）', value: '1' },
|
||
{ label: '2级（橙色预警）', value: '2' },
|
||
{ label: '3级（黄色预警）', value: '3' },
|
||
{ label: '4级（蓝色预警）', value: '4' },
|
||
]" :key="index" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="风险区县" prop="风险区县">
|
||
<el-select v-model="form.areaCodes" clearable placeholder="请选择" multiple>
|
||
<el-option v-for="(item, index) in areaList" :key="index" :label="item.qxmc" :value="item.xzdm" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, watch, computed } from "vue";
|
||
import { request } from "@/utils/request";
|
||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||
const formRef = ref(null);
|
||
defineExpose({ formRef });
|
||
|
||
const props = defineProps({
|
||
form: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
|
||
const areaList = ref([])
|
||
|
||
// 获取区县列表
|
||
const getAreaList = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: '/snow-ops-platform/infrastructure-asset/counties',
|
||
method: 'get',
|
||
})
|
||
if (res.code === '00000') {
|
||
areaList.value = res.data
|
||
} else {
|
||
throw new Error(res.message)
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error(error.message)
|
||
console.log(error)
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getAreaList()
|
||
})
|
||
|
||
const rules = computed(() => {
|
||
return {
|
||
// mc: [
|
||
// {
|
||
// required: true,
|
||
// validator: (rule, value, callback) => {
|
||
// if (props.form.mc) {
|
||
// callback();
|
||
// } else {
|
||
// callback(new Error("请输入服务站名称"));
|
||
// }
|
||
// },
|
||
// trigger: "blur",
|
||
// },
|
||
// ],
|
||
};
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.form-part {
|
||
padding: 20px;
|
||
}
|
||
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
</style> |