<template>
|
<div class="com_weather">
|
<div class="option">
|
<div class="option-item" :style="[model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]!==1?'border:none' : '']">
|
<span class="mr10">云端天气组飞设置</span>
|
<a-switch :checkedValue="'1'" :unCheckedValue="'2'" v-model:checked="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]" @change="changeEdit" />
|
<div v-if="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]==1">
|
<p class="mt10 describe">当风速或雨量大于设置值时，将对机场的飞行器进行阻飞。</p>
|
</div>
|
<div v-else>
|
<p class="mt10 describe">关闭后，机场的阻飞仍生效。</p>
|
<p class="mt10 describe">机场的阻飞条件：</p>
|
<p class="mt10 describe">风速 (风速计) ≥12m/s 或 雨量 (雨量计) ≥大雨 </p>
|
</div>
|
</div>
|
<div class="option-item" v-if="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]=='1'">
|
<span class="mr10">天气预报</span>
|
<a-switch :checkedValue="'1'" :unCheckedValue="'2'" @change="changeEdit" v-model:checked="model.projectBlocking[blocking.WEATHERREPORTENABLE]" />
|
<p class="mt10 describe">天气阻飞将使用天气预报，同时也会使用机场风速计和雨量计数据。</p>
|
</div>
|
<div class="option-item-edit" v-if="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]=='1'">
|
<a-form ref="weatherFormRef" :model="FormWeatherModel" :rules="weatherRules">
|
<a-form-item :name="FormWeather.WINDSPEED" ref="windDevice">
|
<div class="edit-item flex-display flex-align-center flex-justify-between">
|
<div class="white-color">风速<span class="describe">(风速计) (1-12m/s)</span></div>
|
<div class="form-option flex-display flex-align-center white-color">
|
<div :class="{ w48: edit }">
|
<span v-if="!edit">{{ model.projectBlocking[FormWeather.WINDSPEED] }}</span>
|
<a-input v-else v-model:value.number="FormWeatherModel[FormWeather.WINDSPEED]"></a-input>
|
</div>
|
<span>m/s</span>
|
</div>
|
</div>
|
</a-form-item>
|
<a-form-item :name="FormWeather.WINDSPEEDREPORT" v-if="model.projectBlocking.weatherReportEnable==1">
|
<div class="edit-item flex-display flex-align-center flex-justify-between">
|
<div class="white-color">风速<span class="describe">(天气预报) (1-15m/s)</span></div>
|
<div class="form-option flex-display flex-align-center white-color">
|
<div :class="{ w48: edit }">
|
<span v-if="!edit">{{ model.projectBlocking[FormWeather.WINDSPEEDREPORT] }}</span>
|
<a-input v-else v-model:value.number="FormWeatherModel[FormWeather.WINDSPEEDREPORT]"></a-input>
|
</div>
|
<span>m/s</span>
|
</div>
|
</div>
|
</a-form-item>
|
<a-form-item :name="FormWeather.RAIN">
|
<div class="edit-item flex-display flex-align-center flex-justify-between">
|
<div class="white-color">雨量<span class="describe">(雨量计/天气预报)</span></div>
|
<div class="form-option flex-display flex-align-center white-color">
|
<div :class="{ w60: edit }">
|
<span v-if="!edit">{{ WeatherEnum[model.projectBlocking[FormWeather.RAIN]] }}</span>
|
<Select :bordered="false" :options="rainSelect" v-model='FormWeatherModel[FormWeather.RAIN]' v-else />
|
</div>
|
</div>
|
</div>
|
</a-form-item>
|
</a-form>
|
<div class="btn-group" v-if="!edit">
|
<a-button class="w96" type="primary" @click="() => edit = true">编辑</a-button>
|
</div>
|
<div class="btn-group" v-if="edit">
|
<a-button class="mr20 w96" @click="cancel">取消</a-button>
|
<a-button class='w96' type="primary" @click="submit">保存</a-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps, defineEmits } from 'vue'
|
import { cloneDeep } from 'lodash'
|
import { blocking } from '../type'
|
import { weatherRules, FormWeather, rainSelect, WeatherEnum, } from './type'
|
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
|
import Select from '/@/components/Search/Select.vue'
|
import { editProjectBlock } from '/@/api/project-page/index'
|
import { useVModel } from '/@/hooks/use-v-model'
|
import { message } from 'ant-design-vue'
|
interface FormState {
|
[FormWeather.WINDSPEEDREPORT]: number
|
[FormWeather.WINDSPEED]: number
|
[FormWeather.RAIN]: number
|
}
|
const props = defineProps({
|
modelValue: {
|
type: Object,
|
required: true
|
},
|
})
|
const route = useRoute()
|
const emit = defineEmits(['update:modelValue'])
|
const model = useVModel(props, 'modelValue', emit)
|
const edit = ref(false)
|
const weatherFormRef = ref()
|
const FormWeatherModel = ref<FormState>(cloneDeep({
|
[FormWeather.WINDSPEEDREPORT]: model.value.projectBlocking[FormWeather.WINDSPEEDREPORT],
|
[FormWeather.WINDSPEED]: model.value.projectBlocking[FormWeather.WINDSPEED],
|
[FormWeather.RAIN]: model.value.projectBlocking[FormWeather.RAIN],
|
}))
|
const submit = () => {
|
weatherFormRef.value
|
.validate()
|
.then(async () => {
|
edit.value = false
|
model.value.projectBlocking = { ...model.value.projectBlocking, ...FormWeatherModel.value }
|
if (route.query.id) {
|
const res = await editProjectBlock(model.value.projectBlocking)
|
if (res.code !== 5000) return message.error(res.message)
|
}
|
})
|
.catch((error: ValidateErrorEntity<FormState>) => {
|
console.log('error', error)
|
})
|
}
|
const changeEdit = async () => {
|
if (!route.query.id) return
|
model.value.projectBlocking = { ...model.value.projectBlocking, ...FormWeatherModel.value }
|
const res = await editProjectBlock(model.value.projectBlocking)
|
if (res.code !== 5000) return message.error(res.message)
|
}
|
const cancel = () => {
|
FormWeatherModel.value = model.value.projectBlocking
|
edit.value = false
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.com_weather {
|
padding: 16px;
|
|
.option {
|
&-item {
|
border-bottom: 1px solid #4f4f4f;
|
margin-bottom: 16px;
|
}
|
|
.form-option :deep(.ant-select-single .ant-select-selector) {
|
background-color: inherit !important;
|
color: #fff !important;
|
padding: 0 !important;
|
}
|
|
.form-option :deep(.ant-select-arrow) {
|
color: #fff;
|
}
|
|
// .form-option :deep(.)
|
}
|
}
|
</style>
|
