| | |
| | | |
| | | <div class="right-container"> |
| | | <div class="header"> |
| | | {{ titleEnum[dialogMode] }} |
| | | <span>{{ titleEnum[dialogMode] }}</span> |
| | | |
| | | <el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon> |
| | | </div> |
| | | |
| | | <div class="dialog-container" v-if="readonly"> |
| | | <div class="content" v-if="readonly"> |
| | | <div class="detail-title">区域详情</div> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | |
| | | <div class="detail-title">关联设备</div> |
| | | <div class="command-table-container"> |
| | | <div class="command-table-content"> |
| | | <el-table class="command-data-cockpit-table" ref="deviceTableRef" :data="deviceOptions" |
| | | <el-table class="command-table" ref="deviceTableRef" :data="deviceOptions" |
| | | row-key="id"> |
| | | <el-table-column prop="deviceName" label="设备名称" /> |
| | | <el-table-column prop="deviceType" label="类型"> |
| | |
| | | <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" |
| | | label-width="96px"> |
| | | <el-form-item label="区域名称" prop="areaName"> |
| | | <el-input class="command-data-cockpit-search-input" v-model="formData.areaName" maxlength="50" |
| | | <el-input class="command-input" v-model="formData.areaName" maxlength="50" |
| | | placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="区域位置" prop="longitude"> |
| | |
| | | <div class="val">{{ formData.areaSize || '-' }}k㎡</div> |
| | | </el-form-item> |
| | | <el-form-item label="区域类型" prop="areaType"> |
| | | <el-select class="command-data-cockpit-select" popper-class="command-data-cockpit-select-popper" |
| | | <el-select class="command-select" popper-class="command-select-popper" |
| | | v-model="formData.areaType" placeholder="请选择" clearable> |
| | | <el-option v-for="item in dictObj.areaType" :key="item.dictKey" :label="item.dictValue" |
| | | :value="item.dictKey" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="响应机制" prop="responseMechanism"> |
| | | <el-input class="command-data-cockpit-search-input" v-model="formData.responseMechanism" |
| | | <el-input class="command-input" v-model="formData.responseMechanism" |
| | | maxlength="200" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="触发条件" prop="triggerCondition"> |
| | | <el-input class="command-data-cockpit-search-input" v-model="formData.triggerCondition" |
| | | <el-input class="command-input" v-model="formData.triggerCondition" |
| | | maxlength="200" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="管控级别" prop="controlLevel"> |
| | | <el-select class="command-data-cockpit-select" popper-class="command-data-cockpit-select-popper" |
| | | <el-select class="command-select" popper-class="command-select-popper" |
| | | v-model="formData.controlLevel" placeholder="请选择" clearable> |
| | | <el-option v-for="item in dictObj.controlLevel" :key="item.dictKey" :label="item.dictValue" |
| | | :value="item.dictKey" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="可飞行时段" prop="flyDateStart"> |
| | | <el-date-picker class="command-data-cockpit-date-picker" |
| | | popper-class="command-data-cockpit-date-picker-popper" v-model="flyDateRange" |
| | | <el-date-picker class="command-date-picker" |
| | | popper-class="command-date-picker-popper" v-model="flyDateRange" |
| | | type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" |
| | | :disabled-date="disabledFlyDate" :disabled-time="disabledFlyTime" |
| | | value-format="YYYY-MM-DD HH:mm:ss" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="关联派出所" prop="policeStationId"> |
| | | <el-select class="command-data-cockpit-select" popper-class="command-data-cockpit-select-popper" |
| | | <el-select class="command-select" popper-class="command-select-popper" |
| | | v-model="formData.policeStationId" placeholder="请选择" clearable> |
| | | <el-option v-for="item in policeStationOptions" :key="item.id" :label="item.stationName" |
| | | :value="item.id" /> |
| | |
| | | 关联设备 |
| | | </div> |
| | | |
| | | <el-input class="command-data-cockpit-search-input" v-model="searchName" placeholder="请输入" |
| | | <el-input class="command-input" v-model="searchName" placeholder="请输入" |
| | | clearable></el-input> |
| | | </div> |
| | | |
| | | <el-form-item prop="deviceIds" label-width="0"> |
| | | <el-table class="command-data-cockpit-table" ref="deviceTableRef" |
| | | <el-table class="command-table" ref="deviceTableRef" |
| | | :data="deviceOptions.filter(item => item.deviceName.includes(searchName))" row-key="id" |
| | | @selection-change="handleDeviceSelectionChange"> |
| | | <el-table-column type="selection" width="55" :reserve-selection="true" /> |
| | |
| | | </el-form> |
| | | |
| | | <div class="footer"> |
| | | <el-button color="#2B2B4C" @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button color="#284FE3" v-if="!readonly" type="primary" :loading="submitting" |
| | | :disabled="submitting" @click="handleSubmit"> |
| | | 确定 |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { Close } from '@element-plus/icons-vue' |
| | | |
| | | import { computed, inject, nextTick, onMounted, ref, watch } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import { fwAreaDivideDetailApi, fwAreaDivideSubmitApi } from './partitionApi' |
| | | import { saveOperationLog } from '@ztzf/apis' |
| | | import { useRoute } from 'vue-router' |
| | | import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils' |
| | | import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue' |
| | | import { DrawPolygon } from '@/utils/cesium/DrawPolygon' |
| | |
| | | const dialogMode = ref('add') // 弹框模式 |
| | | const submitting = ref(false) // 提交中 |
| | | const readonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑场景', view: '查看场景', add: '新增场景' }) |
| | | const route = useRoute() |
| | | const titleEnum = ref({ edit: '编辑区域', view: '查看区域', add: '新增区域' }) |
| | | const flyDateRange = ref([]) // 飞行时间 |
| | | const deviceTableRef = ref(null) |
| | | const searchName = ref('') |
| | |
| | | controlLevel: fieldRules(true), |
| | | flyDateStart: fieldRules(true), |
| | | policeStationId: fieldRules(true), |
| | | deviceIds: fieldRules(true), |
| | | deviceIds: fieldRules(false), |
| | | } |
| | | |
| | | function isSameDay (left, right) { |
| | | return ( |
| | | left.getFullYear() === right.getFullYear() && |
| | | left.getMonth() === right.getMonth() && |
| | | left.getDate() === right.getDate() |
| | | ) |
| | | } |
| | | |
| | | const disabledFlyDate = time => { |
| | | const startOfToday = new Date() |
| | | startOfToday.setHours(0, 0, 0, 0) |
| | | return time.getTime() < startOfToday.getTime() |
| | | } |
| | | |
| | | const disabledFlyTime = date => { |
| | | if (!date) return {} |
| | | const now = new Date() |
| | | if (!isSameDay(date, now)) return {} |
| | | const currentHour = now.getHours() |
| | | const currentMinute = now.getMinutes() |
| | | const currentSecond = now.getSeconds() |
| | | return { |
| | | disabledHours: () => Array.from({ length: currentHour }, (_, index) => index), |
| | | disabledMinutes: hour => |
| | | hour === currentHour ? Array.from({ length: currentMinute }, (_, index) => index) : [], |
| | | disabledSeconds: (hour, minute) => |
| | | hour === currentHour && minute === currentMinute |
| | | ? Array.from({ length: currentSecond }, (_, index) => index) |
| | | : [], |
| | | } |
| | | } |
| | | |
| | | // 关闭弹框 |
| | |
| | | async function handleSubmit () { |
| | | const isValid = await formRef.value?.validate().catch(() => false) |
| | | if (!isValid) return |
| | | if (dialogMode.value === 'add' && Number(formData.value.areaSize) < 0.5) { |
| | | ElMessage.warning('区域面积不能小于0.5km²,请重新绘制') |
| | | return |
| | | } |
| | | submitting.value = true |
| | | try { |
| | | let str = [...pointList, pointList[0]].map(item => `${item.longitude} ${item.latitude}`).join(',') |
| | | formData.value.geom = `POLYGON((${str}))` |
| | | await fwAreaDivideSubmitApi(formData.value) |
| | | const actionText = dialogMode.value === 'add' ? '新增' : '编辑' |
| | | saveOperationLog({ |
| | | requestUri: route.path, |
| | | title: `${route.name || '区域划分'}-${actionText}`, |
| | | type: 1, |
| | | }) |
| | | ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功') |
| | | visible.value = false |
| | | emit('success') |