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

<template>
    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' title='编辑拓扑图信息'>
        <el-form>
            <el-form-item label='拓扑图:' style='height: auto !important;'>
                <div class='gplot-content'>
                    <img :src='imgUrl' class='gplot-content' style='border: 1px solid #dcdfe6' />
<!--                    <VueDraggableResizable-->
<!--                        :isActive='editorIndex == index'-->
<!--                        :h='item.height'-->
<!--                        :w='item.width'-->
<!--                        :x='item.left'-->
<!--                        :y='item.top'-->
<!--                        @dragging='resize(index, $event)'-->
<!--                        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' }"-->
<!--                            @click.stop='textClick(item, index)'-->
<!--                        >-->
<!--                            {{ item.name }}-->
<!--                        </div>-->
<!--                    </VueDraggableResizable>-->
                    <div>注意监测点不要移出圈</div>
                </div>
            </el-form-item>
        </el-form>
        <el-form v-if='editorIndex > -1'>
            <el-form-item label='监测点位置:'>
                <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.value'
                            :label='item.label'
                            :value='item.value'
                        ></el-option>
                    </el-select>
                    <el-button class='ml20' type='danger' size='mini' @click='deletePoint' icon='el-icon-delete'>
                        删除
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-form>
            <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'
defineOptions({
    name: 'govern/manage/gplot/popupEdit',
})
const tableStore = inject('tableStore') as TableStore
const editorIndex = ref(-1)
const pointList = ref([])
const topoId = ref()
const imgUrl = ref('')
const linePosition = useDictData().getBasicData('Line_Position')


const dialogVisible = ref(false)
const open = (data?: anyObj) => {
    pointList.value = data.fullUrl
    topoId.value = data.id
    imgUrl.value = fullUrl(data.filePath)
    dialogVisible.value = true
}
const textClick = () => {
}
const positionChange = () => {
}
const resize = (index, newRect) => {
    if (!newRect) return
    const dom = pointList.value[index]
    dom.top = newRect.top
    dom.left = newRect.left
}
const addPoint = () => {
}
const deletePoint = () => {
}
const submit = async () => {

}

defineExpose({ open })
</script>

<style lang='scss'>

.gplot-content {
    width: 375px;
    object-fit: cover;
}
</style>