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

<template>
    <el-dialog class="cn-operate-dialog" v-model="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="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>