<template>
|
<el-dialog class="command-page-map-view-dialog" v-model="visible" :show-close="false"
|
:close-on-click-modal="false">
|
<div class="dialog-container">
|
<div class="left-container">
|
<CommonCesiumMap
|
ref="mapRef"
|
class="leftMap command-cesium"
|
:active="visible"
|
:flat-mode="false"
|
:terrain="true"
|
:layer-mode="4"
|
:boundary="false"
|
/>
|
</div>
|
|
<div class="right-container">
|
<div class="header">
|
<span>{{ titleEnum[dialogMode] }}</span>
|
|
<el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
|
</div>
|
|
<div class="content" v-if="readonly">
|
<div class="detail-title">区域详情</div>
|
<el-row>
|
<el-col :span="24">
|
<div class="label">区域名称</div>
|
<div class="val">{{ formData.areaName }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">区域位置</div>
|
<div class="val">{{ formatLocation(formData) }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">区域面积</div>
|
<div class="val">{{ formData.areaSize || '-' }}k㎡</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">区域类型</div>
|
<div class="val">{{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">触发条件</div>
|
<div class="val">
|
{{ getDictLabel(formData.triggerCondition, dictObj.triggeringCondition) }}
|
</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">响应机制</div>
|
<div class="val">{{ formData.responseMechanism }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">管控级别</div>
|
<div class="val">{{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">关联派出所</div>
|
<div class="val">{{ formData.policeStationName }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">可飞行时间段</div>
|
<div class="val">{{ formatFlyDate(formData) }}</div>
|
</el-col>
|
</el-row>
|
|
<div class="detail-title">关联设备</div>
|
<div class="command-table-container">
|
<div class="command-table-content">
|
<el-table class="command-table" ref="deviceTableRef" :data="deviceOptions"
|
row-key="id">
|
<el-table-column prop="deviceName" label="设备名称" />
|
<el-table-column prop="deviceType" label="类型">
|
<template v-slot="{ row }">
|
{{ getDictLabel(row.deviceType, dictObj.deviceType) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
|
<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-input" v-model="formData.areaName" maxlength="50"
|
placeholder="请输入" clearable />
|
</el-form-item>
|
<el-form-item label="区域位置" prop="longitude">
|
<div class="val">{{ formatLocation(formData) }}</div>
|
</el-form-item>
|
<el-form-item label="区域面积" prop="areaSize">
|
<div class="val">{{ formData.areaSize || '-' }}k㎡</div>
|
</el-form-item>
|
<el-form-item label="区域类型" prop="areaType">
|
<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-input" v-model="formData.responseMechanism"
|
maxlength="200" placeholder="请输入" clearable />
|
</el-form-item>
|
<el-form-item label="触发条件" prop="triggerCondition">
|
<el-select class="command-select" popper-class="command-select-popper"
|
v-model="formData.triggerCondition" placeholder="请选择" clearable>
|
<el-option v-for="item in dictObj.triggeringCondition" :key="item.dictKey"
|
:label="item.dictValue" :value="item.dictKey" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="管控级别" prop="controlLevel">
|
<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-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-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" />
|
</el-select>
|
</el-form-item>
|
|
<div class="search-table-container">
|
<div class="search-box">
|
<div class="label">
|
关联设备
|
</div>
|
|
<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-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-table-column prop="deviceName" label="设备名称" />
|
<el-table-column prop="deviceType" label="类型">
|
<template v-slot="{ row }">
|
{{ getDictLabel(row.deviceType, dictObj.deviceType) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
</div>
|
</el-form>
|
|
<div class="footer">
|
<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">
|
确定
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</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 '@ztzf/utils'
|
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
|
import * as turf from '@turf/turf'
|
import * as Cesium from 'cesium'
|
import { fwPoliceStationListApi } from '@/views/areaManage/precinctInfo/precinctInfoApi'
|
import { fwDeviceListApi } from '@/views/basicManage/deviceStock/fwDevice'
|
|
const initForm = () => ({
|
areaName: '', // 区域名称
|
areaSize: null, // 区域面积
|
areaType: '', // 区域类型
|
controlLevel: '', // 管控级别
|
deviceIds: '', // 关联设备ID
|
flyDateEnd: '', // 可飞行结束
|
flyDateStart: '', // 可飞行开始
|
latitude: null, // 区域中心纬度
|
longitude: null, // 区域中心经度
|
policeStationId: '', // 关联派出所id
|
responseMechanism: '', // 响应机制
|
triggerCondition: '', // 触发条件
|
})
|
|
const emit = defineEmits(['success'])
|
const formRef = ref(null) // 表单实例
|
const formData = ref(initForm()) // 表单数据
|
const visible = defineModel() // 弹框显隐
|
const dialogMode = ref('add') // 弹框模式
|
const submitting = ref(false) // 提交中
|
const readonly = computed(() => dialogMode.value === 'view')
|
const route = useRoute()
|
const titleEnum = ref({ edit: '编辑区域', view: '查看区域', add: '新增区域' })
|
const flyDateRange = ref([]) // 飞行时间
|
const deviceTableRef = ref(null)
|
const searchName = ref('')
|
const selectedDeviceRows = ref([])
|
const policeStationOptions = ref([]) // 关联派出所
|
const deviceOptions = ref([]) // 关联设备
|
const dictObj = inject('dictObj')
|
const mapRef = ref(null)
|
let viewer
|
let drawPolygonExample
|
let pointList = []
|
|
const rules = {
|
areaName: fieldRules(true, 50),
|
longitude: fieldRules(true),
|
areaType: fieldRules(true),
|
responseMechanism: fieldRules(true, 200),
|
triggerCondition: fieldRules(true, 200),
|
controlLevel: fieldRules(true),
|
flyDateStart: fieldRules(true),
|
policeStationId: 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)
|
: [],
|
}
|
}
|
|
// 关闭弹框
|
function handleCancel () {
|
visible.value = false
|
}
|
|
// 提交新增/编辑
|
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')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
watch(
|
() => flyDateRange.value,
|
() => {
|
formData.value.flyDateStart = flyDateRange.value[0] || ''
|
formData.value.flyDateEnd = flyDateRange.value[1] || ''
|
}
|
)
|
|
// 加载详情
|
async function loadDetail () {
|
if (!formData.value.id) return
|
const res = await fwAreaDivideDetailApi({ id: formData.value.id })
|
formData.value = res?.data?.data ?? initForm()
|
flyDateRange.value = [formData.value.flyDateStart, formData.value.flyDateEnd].filter(Boolean)
|
}
|
|
// 格式化区域位置
|
function formatLocation (row) {
|
if (row?.longitude == null || row?.latitude == null) return ''
|
return `${_.round(row.longitude, 6)}, ${_.round(row.latitude, 6)}`
|
}
|
|
// 格式化可飞行时间段
|
function formatFlyDate (row) {
|
if (!row?.flyDateStart && !row?.flyDateEnd) return ''
|
return `${row.flyDateStart || '-'} ~ ${row.flyDateEnd || '-'}`
|
}
|
|
// 初始化地图实例
|
function initMap () {
|
if (viewer) return
|
const map = mapRef.value?.getMap()
|
viewer = map?.viewer || null
|
}
|
|
// 绘制完成回调
|
const drawFinished = async data => {
|
pointList = _.cloneDeep(data).map(item => {
|
const val = cartesian3Convert(item, viewer)
|
return { ...val, lng: val.longitude, lat: val.latitude }
|
})
|
const polygon = turf.polygon([
|
[...pointList.map(item => [item.longitude, item.latitude]), [pointList[0].longitude, pointList[0].latitude]],
|
])
|
const center = turf.centerOfMass(polygon)
|
const areaSqm = turf.area(polygon) // 平方米
|
formData.value.areaSize = _.round(areaSqm / 1_000_000, 2) // 平方千米
|
formData.value.longitude = center.geometry.coordinates[0]
|
formData.value.latitude = center.geometry.coordinates[1]
|
}
|
|
// 新增模式绘制
|
function addPolygon () {
|
drawPolygonExample = new DrawPolygon(viewer)
|
drawPolygonExample.initHandler(viewer)
|
drawPolygonExample.subscribe('getPolygonPositions', drawFinished)
|
}
|
|
// 编辑面
|
function editPolygon () {
|
if (!formData.value?.geom) return
|
pointList = geomAnalysis(formData.value.geom)
|
drawPolygonExample?.destroy()
|
drawPolygonExample = new DrawPolygon(viewer)
|
let pointList1 = _.cloneDeep(pointList)
|
pointList1.pop()
|
drawPolygonExample.initPolygon(
|
viewer,
|
pointList.map(item => ({ lng: item.longitude, lat: item.latitude }))
|
)
|
drawPolygonExample.subscribe('getPolygonPositions', drawFinished)
|
if (pointList1.length) {
|
const result = pointList1.map(item => [item.longitude, item.latitude]).flat()
|
const tempEntity = viewer.entities?.add({
|
position: Cesium.Cartesian3.fromDegrees(result[0], result[1]),
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray(result),
|
clampToGround: true,
|
width: 1,
|
material: Cesium.Color.TRANSPARENT,
|
},
|
})
|
if (tempEntity) {
|
viewer.flyTo(tempEntity, { duration: 0 })
|
viewer.entities.remove(tempEntity)
|
}
|
}
|
}
|
|
// 查看面
|
function viewPolygon () {
|
if (!formData.value?.geom) return
|
pointList = geomAnalysis(formData.value.geom)
|
const result = pointList.map(item => [item.longitude, item.latitude]).flat()
|
const mian = viewer.entities?.add({
|
customType: 'control_group',
|
position: Cesium.Cartesian3.fromDegrees(result[0], result[1]),
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray(result),
|
clampToGround: true,
|
width: 3,
|
material: Cesium.Color.RED,
|
},
|
})
|
viewer.flyTo(mian, { duration: 0 })
|
}
|
|
// 获取派出所列表
|
async function getPoliceStationList () {
|
const res = await fwPoliceStationListApi()
|
policeStationOptions.value = res?.data?.data ?? []
|
}
|
|
// 获取设备列表
|
async function getDeviceList () {
|
if (deviceOptions.value.length) return
|
const res = await fwDeviceListApi({ isAreaSelect: 1, areaId: formData.value.id, isTrack: 1 })
|
deviceOptions.value = res?.data?.data ?? []
|
if (dialogMode.value === 'view') {
|
deviceOptions.value = deviceOptions.value.filter(item => formData.value.deviceIds.includes(item.id))
|
}
|
}
|
|
// 关联设备变更
|
function handleDeviceSelectionChange (rows) {
|
selectedDeviceRows.value = rows
|
const ids = rows.map(item => item.id)
|
formData.value.deviceIds = ids.join(',')
|
}
|
|
// 同步选择状态
|
function syncDeviceSelection () {
|
if (!deviceTableRef.value) return
|
deviceTableRef.value.clearSelection()
|
const rows = []
|
const arr = formData.value.deviceIds.split(',')
|
deviceOptions.value.forEach(row => {
|
if (arr.includes(row.id)) {
|
deviceTableRef.value.toggleRowSelection(row, true)
|
rows.push(row)
|
}
|
})
|
selectedDeviceRows.value = rows
|
}
|
|
// 打开弹框
|
async function open ({ mode, row } = {}) {
|
dialogMode.value = mode || 'add'
|
formData.value = dialogMode.value === 'add' ? initForm() : row
|
selectedDeviceRows.value = []
|
await nextTick()
|
initMap()
|
await getDeviceList()
|
if (dialogMode.value === 'add') {
|
addPolygon()
|
} else if (dialogMode.value === 'edit') {
|
await loadDetail()
|
editPolygon()
|
} else {
|
await loadDetail()
|
viewPolygon()
|
}
|
await nextTick()
|
syncDeviceSelection()
|
}
|
|
onMounted(() => {
|
getPoliceStationList()
|
getDeviceList()
|
})
|
|
defineExpose({
|
open,
|
})
|
</script>
|
|
<style scoped lang="scss"></style>
|
