吉安感知网项目-前端
张含笑
2026-01-12 ee18905acc7031555d58af67fd72745aa6e9ef90
Merge remote-tracking branch 'origin/master'
2 files modified
107 ■■■■ changed files
applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue 103 ●●●● patch | view | raw | blame | history
applications/drone-command/src/views/areaManage/precinctInfo/index.vue 4 ●●● patch | view | raw | blame | history
applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue
@@ -1,5 +1,5 @@
<template>
    <el-dialog v-model="visible" :title="titleEnum[dialogMode]" @closed="handleClosed" destroy-on-close>
    <el-dialog v-model="visible" :title="titleEnum[dialogMode]">
        <div v-if="readonly">
            <el-row>
                <el-col :span="12">
@@ -29,13 +29,8 @@
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经度" prop="longitude">
                        <el-input-number v-model="formData.longitude" max="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纬度" prop="latitude">
                        <el-input-number v-model="formData.latitude" max="50" placeholder="请输入" clearable />
                    <el-form-item label="位置" prop="longitude">
                        <el-button @click="selectLocation">{{ formData.longitude }},{{ formData.longitude }}</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
@@ -56,14 +51,24 @@
                确定
            </el-button>
        </template>
        <el-dialog v-model="visible1" title="选择位置" destroy-on-close @closed="positionClosed">
            <div class="ztzf-cesium" id="mapContainer"></div>
            <template #footer>
                <el-button @click="handleMapCancel">取消</el-button>
                <el-button type="primary" @click="handleMapConfirm">确定</el-button>
            </template>
        </el-dialog>
    </el-dialog>
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed, nextTick, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fwPoliceStationDetailApi, fwPoliceStationSubmitApi } from './precinctInfoApi'
import { fieldRules } from '@ztzf/utils'
import { PublicCesium } from '@/utils/cesium/publicCesium'
import * as Cesium from 'cesium'
const initForm = () => ({
    address: '', // 位置
@@ -77,11 +82,13 @@
const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = ref(false) // 弹框显隐
const visible = defineModel() // 弹框显隐
const visible1 = ref(false) // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false) // 提交中
const readonly = computed(() => dialogMode.value === 'view')
const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' })
const tempLocation = ref({ longitude: null, latitude: null })
const rules = {
    address: fieldRules(true, 50),
@@ -117,18 +124,86 @@
    formData.value = res?.data?.data ?? {}
}
// 关闭后重置
function handleClosed() {
    formData.value = initForm()
function LeftClickEvent(click) {
    const pos = click.position // Cartesian2 屏幕坐标
    // 屏幕坐标 -> 椭球面坐标(不考虑地形/模型)
    const cartesian3 = viewer.camera.pickEllipsoid(pos, viewer.scene.globe.ellipsoid)
    if (!cartesian3) {
        return { longitude: 112, latitude: 23 }
    }
    // 椭球面坐标 -> 经纬度
    const carto = Cesium.Cartographic.fromCartesian(cartesian3)
    const longitude = Cesium.Math.toDegrees(carto.longitude)
    const latitude = Cesium.Math.toDegrees(carto.latitude)
    tempLocation.value = { longitude, latitude }
    // 添加红点(全局仅保留一个)并渲染经纬度标签
    if (!redPointEntity) {
        redPointEntity = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
            point: {
                color: Cesium.Color.RED,
                pixelSize: 10,
            },
            label: {
                text: `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`,
                fillColor: Cesium.Color.WHITE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(0, -12),
            },
        })
    } else {
        redPointEntity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
        redPointEntity.label.text = `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
    }
}
function positionClosed() {
    redPointEntity = null
}
let viewer
let redPointEntity
async function selectLocation() {
    visible1.value = true
    await nextTick()
    const publicCesiumInstance = new PublicCesium({
        dom: 'mapContainer',
        flatMode: false,
        terrain: true,
        layerMode: 4,
        boundary: false,
    })
    publicCesiumInstance.addLeftClickEvent(null, LeftClickEvent)
    viewer = publicCesiumInstance.getViewer()
}
function handleMapCancel() {
    tempLocation.value = { longitude: null, latitude: null }
    visible1.value = false
}
function handleMapConfirm() {
    if (tempLocation.value.longitude != null && tempLocation.value.latitude != null) {
        formData.value.longitude = tempLocation.value.longitude
        formData.value.latitude = tempLocation.value.latitude
    }
    visible1.value = false
}
// 打开弹框
async function open({ mode, row } = {}) {
    dialogMode.value = mode || 'add'
    visible.value = true
    formData.value = dialogMode.value === 'add' ? initForm() : row
    dialogMode.value !== 'add' && (await loadDetail())
}
defineExpose({ open })
</script>
<style scoped lang="scss">
#mapContainer {
    width: 100%;
    height: 500px;
}
</style>
applications/drone-command/src/views/areaManage/precinctInfo/index.vue
@@ -44,7 +44,7 @@
            />
        </div>
        <FormDiaLog ref="dialogRef" @success="getList" />
        <FormDiaLog ref="dialogRef" @success="getList" v-if="diaLogVisible" v-model="diaLogVisible" />
    </basic-container>
</template>
@@ -66,6 +66,7 @@
const selectedIds = ref([]) // 勾选的ID列表
const queryParamsRef = ref(null) // 查询表单实例
const dialogRef = ref(null) // 弹框实例
const diaLogVisible = ref(false)
// 获取列表
async function getList() {
@@ -120,6 +121,7 @@
// 新增
function handleAdd() {
    diaLogVisible.value = true
    dialogRef.value?.open({ mode: 'add' })
}