吉安感知网项目-前端
张含笑
2026-01-21 9eb8bb59b802ceef1f52d334c8e577f2bf02c90e
applications/drone-command/src/views/detectionCountermeasure/taskSchedule/FormDiaLog.vue
@@ -1,12 +1,6 @@
<template>
   <el-dialog
      class="command-page-view-dialog"
      v-model="visible"
      :title="titleEnum[dialogMode]"
      destroy-on-close
      :close-on-click-modal="false"
      @closed="handleClosed"
   >
   <el-dialog class="command-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]" destroy-on-close
      :close-on-click-modal="false" @closed="handleClosed">
      <div v-if="readonly" class="detail-container">
         <el-row>
            <el-col :span="12">
@@ -51,92 +45,62 @@
            </el-col>
         </el-row>
      </div>
      <el-form
         v-else
         ref="formRef"
         :model="formData"
         :rules="rules"
         :disabled="readonly"
         label-width="100px"
         class="dialog-form"
      >
      <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" label-width="100px"
         class="dialog-form">
         <el-row>
            <el-col :span="12">
               <el-form-item label="设备" prop="deviceId">
                  <el-select
                     class="command-select"
                     popper-class="command-select-popper"
                     v-model="formData.deviceId"
                     placeholder="请选择"
                     clearable
                     @change="handleDeviceChange"
                  >
                     <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id" />
                  <el-select class="command-select" popper-class="command-select-popper"
                     v-model="formData.deviceId" placeholder="请选择" clearable @change="handleDeviceChange">
                     <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName"
                        :value="item.id" />
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="设备编码" prop="deviceSn">
                  <el-input
                     class="command-input"
                     v-model="formData.deviceSn"
                     disabled
                     placeholder="选择设备后自动带出"
                  />
                  <el-input class="command-input" v-model="formData.deviceSn" disabled placeholder="选择设备后自动带出" />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="设备状态">
                  <el-select class="command-select" popper-class="command-select-popper"
                     v-model="deviceStatus" disabled placeholder="选择设备后自动带出">
                     <el-option v-for="item in dictObj.deviceStatus" :key="item.dictKey" :label="item.dictValue"
                        :value="item.dictKey" />
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="场景" prop="defenseSceneId">
                  <el-select
                     class="command-select"
                     popper-class="command-select-popper"
                     v-model="formData.defenseSceneId"
                     placeholder="请选择"
                     clearable
                     @change="handleSceneChange"
                  >
                     <el-option v-for="item in sceneList" :key="item.id" :label="item.sceneName" :value="item.id" />
                  <el-select class="command-select" popper-class="command-select-popper"
                     v-model="formData.defenseSceneId" placeholder="请选择" clearable @change="handleSceneChange">
                     <el-option v-for="item in sceneList" :key="item.id" :label="item.sceneName"
                        :value="item.id" />
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="区域" prop="areaDivideId">
                  <el-select
                     class="command-select"
                     popper-class="command-select-popper"
                     v-model="formData.areaDivideId"
                     placeholder="请先选择场景"
                     clearable
                     :disabled="!formData.defenseSceneId"
                     @change="handleAreaChange"
                  >
                     <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id" />
                  <el-select class="command-select" popper-class="command-select-popper"
                     v-model="formData.areaDivideId" placeholder="请先选择场景" clearable
                     :disabled="!formData.defenseSceneId" @change="handleAreaChange">
                     <el-option v-for="item in areaList" :key="item.id" :label="item.areaName"
                        :value="item.id" />
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="调度人员" prop="dispatchUser">
                  <el-input
                     class="command-input"
                     v-model="formData.dispatchUser"
                     maxlength="50"
                     placeholder="请输入"
                     clearable
                  />
                  <el-input class="command-input" v-model="formData.dispatchUser" maxlength="50" placeholder="请输入"
                     clearable />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="调度日期" prop="dispatchDateRange">
                  <el-date-picker
                     class="command-date-picker"
                     popper-class="command-date-picker-popper"
                     v-model="formData.dispatchDateRange"
                     type="datetimerange"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                     value-format="YYYY-MM-DD HH:mm:ss"
                  />
                  <el-date-picker class="command-date-picker" popper-class="command-date-picker-popper"
                     v-model="formData.dispatchDateRange" type="datetimerange" range-separator="至"
                     start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" />
               </el-form-item>
            </el-col>
            <el-col :span="24">
@@ -144,48 +108,28 @@
                  <!--                  <el-button @click="selectLocation" style="width: 100%">-->
                  <el-button style="width: 100%">
                     {{
                        formData.longitude && formData.latitude ? `${formData.longitude}, ${formData.latitude}` : '选择区域后自动带出'
                        formData.longitude && formData.latitude ? `${formData.longitude}, ${formData.latitude}` :
                           '选择区域后自动带出'
                     }}
                  </el-button>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="调度内容" prop="dispatchContent">
                  <el-input
                     class="command-input"
                     v-model="formData.dispatchContent"
                     type="textarea"
                     :rows="3"
                     maxlength="500"
                     placeholder="请输入"
                     clearable
                  />
                  <el-input class="command-input" v-model="formData.dispatchContent" type="textarea" :rows="3"
                     maxlength="500" placeholder="请输入" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="调度结果" prop="dispatchResult">
                  <el-input
                     class="command-input"
                     v-model="formData.dispatchResult"
                     type="textarea"
                     :rows="3"
                     maxlength="500"
                     placeholder="请输入"
                     clearable
                  />
                  <el-input class="command-input" v-model="formData.dispatchResult" type="textarea" :rows="3"
                     maxlength="500" placeholder="请输入" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="处理措施" prop="disposeMeasure">
                  <el-input
                     class="command-input"
                     v-model="formData.disposeMeasure"
                     type="textarea"
                     :rows="3"
                     maxlength="500"
                     placeholder="请输入"
                     clearable
                  />
                  <el-input class="command-input" v-model="formData.disposeMeasure" type="textarea" :rows="3"
                     maxlength="500" placeholder="请输入" clearable />
               </el-form-item>
            </el-col>
         </el-row>
@@ -193,14 +137,8 @@
      <template #footer>
         <el-button color="#2B2B4C" @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>
         <el-button
            color="#284FE3"
            v-if="!readonly"
            type="primary"
            :loading="submitting"
            :disabled="submitting"
            @click="handleSubmit"
         >
         <el-button color="#284FE3" v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting"
            @click="handleSubmit">
            保存
         </el-button>
      </template>
@@ -252,6 +190,8 @@
   deviceList: { type: Array, default: () => [] },
})
const dictObj = inject('dictObj')
const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
@@ -263,6 +203,7 @@
const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' })
const tempLocation = ref({ longitude: null, latitude: null })
const areaList = ref([]) // 区域列表
const deviceStatus = ref('')
const rules = {
   deviceId: fieldRules(true),
@@ -273,21 +214,23 @@
}
// 设备选择变化处理
function handleDeviceChange(deviceId) {
function handleDeviceChange (deviceId) {
   const device = props.deviceList.find(item => item.id === deviceId)
   if (device) {
      formData.value.deviceName = device.deviceName
      formData.value.deviceSn = device.deviceSn
      formData.value.deviceStatus = device.deviceStatus
      deviceStatus.value = String(device.status)
   } else {
      formData.value.deviceName = ''
      formData.value.deviceSn = ''
      formData.value.deviceStatus = ''
      deviceStatus.value = ''
   }
}
// 场景选择变化处理
async function handleSceneChange(sceneId) {
async function handleSceneChange (sceneId) {
   formData.value.areaDivideId = ''
   if (sceneId) {
      await loadAreaList(sceneId)
@@ -296,29 +239,29 @@
   }
}
function handleAreaChange(areaId) {
function handleAreaChange (areaId) {
   const find = areaList.value.find(item => item.id === areaId)
   formData.value.longitude = find?.longitude
   formData.value.latitude = find?.latitude
}
// 加载区域列表
async function loadAreaList(sceneId) {
async function loadAreaList (sceneId) {
   const res = await fwAreaDivideListApi({ sceneId })
   areaList.value = res?.data?.data ?? []
}
// 关闭弹框
function handleCancel() {
function handleCancel () {
   visible.value = false
}
function handleClosed() {
function handleClosed () {
   formData.value = initForm()
}
// 提交新增/编辑
async function handleSubmit() {
async function handleSubmit () {
   const isValid = await formRef.value?.validate().catch(() => false)
   if (!isValid) return
   submitting.value = true
@@ -338,7 +281,7 @@
}
// 加载详情
async function loadDetail() {
async function loadDetail () {
   if (!formData.value.id) return
   const res = await fwTaskScheduleDetailApi({ id: formData.value.id })
   const data = res?.data?.data ?? {}
@@ -354,7 +297,7 @@
}
// 左键点击事件处理
function LeftClickEvent(click) {
function LeftClickEvent (click) {
   const pos = click.position
   const cartesian3 = viewer.camera.pickEllipsoid(pos, viewer.scene.globe.ellipsoid)
   if (!cartesian3) {
@@ -395,7 +338,7 @@
}
// 地图弹框关闭处理
function positionClosed() {
function positionClosed () {
   redPointEntity = null
}
@@ -403,7 +346,7 @@
let redPointEntity
// 选择位置
async function selectLocation() {
async function selectLocation () {
   visible1.value = true
   await nextTick()
   const publicCesiumInstance = new PublicCesium({
@@ -418,13 +361,13 @@
}
// 地图取消
function handleMapCancel() {
function handleMapCancel () {
   tempLocation.value = { longitude: null, latitude: null }
   visible1.value = false
}
// 地图确认
function handleMapConfirm() {
function handleMapConfirm () {
   if (tempLocation.value.longitude != null && tempLocation.value.latitude != null) {
      formData.value.longitude = _.round(tempLocation.value.longitude, 6)
      formData.value.latitude = _.round(tempLocation.value.latitude, 6)
@@ -433,7 +376,7 @@
}
// 打开弹框
async function open({ mode, row } = {}) {
async function open ({ mode, row } = {}) {
   dialogMode.value = mode || 'add'
   formData.value = dialogMode.value === 'add' ? initForm() : { ...row }
   if (dialogMode.value !== 'add') {