admin-govern/src/views/govern/manage/gplot/popupEdit.vue

<template>
    <el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" title="编辑拓扑图信息">
        <el-form :label-width="140">
            <el-form-item label="拓扑图:" style="height: auto !important">
                <div class="gplot-content">
                    <VueDraggableResizable class-name-draggable="gplot-content-item"
                        class-name-active="gplot-content-item-active" :active="editorIndex == index" :resizable="false"
                        :parent="true" :x="item.left" :y="item.top" :w="item.width" :h="item.height"
                        @dragStart="editorIndex = index" @dragging="resize" v-for="(item, index) in pointList"
                        :key="index" :isResizable="false">
                        <div class="text" style="line-height: 20px; white-space: nowrap"
                            :style="{ color: item.name === '监测点' ? 'red' : 'black' }">
                            {{ item.name }}
                        </div>
                    </VueDraggableResizable>
                    <img :src="imgUrl" class="gplot-content"
                        style="border: 1px solid #dcdfe6; position: unset; user-select: none" draggable="false" />
                    <div>注意监测点不要移出圈</div>
                </div>
            </el-form-item>
            <el-form-item label="监测点位置:" v-if="editorIndex > -1">
                <div style="display: flex">
                    <el-select v-model.trim="pointList[editorIndex].position" placeholder="请选择" style="flex: 1"
                        @change="positionChange">
                        <el-option v-for="item in linePosition" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                    <el-button class="ml20" type="danger" @click="deletePoint" icon="el-icon-Delete">删除</el-button>
                </div>
            </el-form-item>
            <el-form-item label=" ">
                <el-button type="primary" @click="addPoint">添加监测点</el-button>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData'
import { fullUrl } from '@/utils/common'
import VueDraggableResizable from 'vue-draggable-resizable'
import { ElMessage } from 'element-plus'
import { addLineTemplate } from '@/api/cs-device-boot/lineTemplate'

defineOptions({
    name: 'govern/manage/gplot/popupEdit'
})
const tableStore = inject('tableStore') as TableStore
const editorIndex = ref(-1)
const pointList = ref<any[]>([])
const topoId = ref()
const imgUrl = ref('')
const linePosition = useDictData().getBasicData('Line_Position')

const dialogVisible = ref(false)
const open = (data: anyObj) => {
    pointList.value = data.csLineTopologyTemplateVOList.map((item: any) => {
        return {
            name: linePosition.find(item2 => {
                return item2.id == item.linePostion
            })?.name,
            position: item.linePostion,
            width: 'auto',
            height: 20,
            top: item.lng,
            left: item.lat
        }
    })
    topoId.value = data.id
    imgUrl.value = fullUrl(data.filePath)
    dialogVisible.value = true
}

const positionChange = (e: string) => {
    pointList.value[editorIndex.value].name = linePosition.find((item: any) => {
        return item.id == e
    })?.name
}
const resize = (left: number, top: number) => {
    const dom = pointList.value[editorIndex.value]
    dom.left = left
    dom.top = top
}
const addPoint = () => {
    pointList.value.push({
        name: '监测点',
        position: '',
        width: 'auto',
        height: 20,
        top: 100,
        left: 100
    })
    editorIndex.value = pointList.value.length - 1
}
const deletePoint = () => {
    pointList.value.splice(editorIndex.value, 1)
    editorIndex.value = -1
}
const submit = async () => {
    let allSelect = pointList.value.some(item => item.position === '')
    if (allSelect) {
        ElMessage.warning('请完善所有监测点位置')
        return
    }
    let arr = pointList.value.map(item => {
        return {
            linePostion: item.position,
            lat: item.left,
            lng: item.top,
            topoId: topoId.value
        }
    })
    addLineTemplate(arr).then(res => {
        ElMessage.success('保存成功')
        tableStore.index()
        dialogVisible.value = false
    })
}

defineExpose({ open })
</script>

<style lang="scss">
@import 'vue-draggable-resizable/style.css';

.gplot-content {
    position: relative;
    width: 375px;
    object-fit: cover;
    overflow: hidden;

    .gplot-content-item {
        border-color: transparent;
        cursor: move;

        &-active {
            border-color: red;
        }
    }
}
</style>