kev/Drawer/drawer-htmlroot/components/WellGroupEditDialog.vue

<template>
    <!-- <teleport to="body"> -->
    <el-dialog v-model="visible" class="frame" title="井组编辑" @close="close" :close-on-click-modal="false" :width="800"
        :modal="false" :style="{ height: '620px' }" :destroy-on-close="true" draggable>
        <div class="canvas-render">
            <WellRecommend ref="wrRef" :tokenKey="currentTokenKey" :showRight="false" />
        </div>
        <template #footer>
            <div class="oper">
                <el-button type="primary" :icon="Select" @click="handleConfirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- </teleport> -->
</template>
<script setup>
import { Select } from "@element-plus/icons-vue";
import { STORAGE_KEYS } from '~/utils/storageKeys';
import { LRUCache } from 'lru-cache';
import { useWebSocket } from '@/composables/useWebSocket'

const { messages, onMessage, send } = useWebSocket();
// 当前页图件token的 key
const currentTokenKey = STORAGE_KEYS.WELL_GROUP_EDIT_TOKEN;
const parentTokenKey = STORAGE_KEYS.WELL_RECOMMAND_TOKEN;

// const cmdid = 'wellgroupedit_cmd';

const EXPIRE_TIME = 5 * 60 * 1000;// 5 分钟

const cache = new LRUCache({
    max: 1000,      // 最多 1000 个条目
    ttl: EXPIRE_TIME // 5 分钟过期
});

const wrRef = ref(null);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    parentToken: {
        type: String,
        default: ''
    },
    wellGroupData: {
        type: Object
    }
})

const groupData = computed(() => props.wellGroupData)


const emit = defineEmits(['update:modelValue']);

const unsubscribe = onMessage((data) => {
    try {
        if (!data) return; // 如果没有新消息，直接返回

        const json = JSON.parse(data);

        // console.log("Edit 判断:", json.cmdID, currentTokenKey);

        if (json.cmdID && json.cmdID !== currentTokenKey) {
            return;
        }
        const evtType = json.type;

        const msgId = `${evtType}-${json.dateTime}`;
        if (cache.has(msgId)) {
            return;
        }
        cache.set(msgId, true);

        console.log("收到数据：", json);

        switch (evtType) {
            case COMMAND.NEW_TOKEN:
                localStorage.setItem(currentTokenKey, json.drawerToken);
                console.log("收到编辑井组回应 NEW_TOKEN：", json);
                break;
            case COMMAND.REDRAW:

                console.log("收到编辑井组回应 REDRAW:", json);
                // emitter.emit(EMIT_COMMAND.EDIT_REDRAW, json);
                break;
        }
    } finally {
    }
});


// 状态
const visible = ref(props.modelValue)

// 监听 v-model
watch(() => props.modelValue, (val) => {
    visible.value = val;
    if (visible.value) {
        nextTick(() => {
            sendCommand();
        });
    }
})

// onMounted(() => {
//     sendCommand();
// });

const sendCommand = () => {
    // console.log("父token：", props.parentToken, "\r\n井组数据：", groupData.value)
    const rect = wrRef.value.getCanvasSize();
    // console.log("rect:", rect.width, rect.height);
    const token = generateGUID();
    const obj = { parentToken: props.parentToken, data: groupData.value.ElementData, token: token, width: rect.width, height: rect.height };
    // console.log("发送编辑井组命令：", COMMAND.EDIT_WELL_GROUP, obj);
    send(COMMAND.EDIT_WELL_GROUP, obj, token, currentTokenKey)
}


// 控制显隐
function close() {
    visible.value = false
    unsubscribe();
    emit('update:modelValue', false)
}

const handleConfirm = () => {
    const token = localStorage.getItem(currentTokenKey);
    send(COMMAND.SAVE_FILE, {}, token, parentTokenKey);
    close();
}

onMounted(() => {
    nextTick();
});

onUnmounted(() => {
    unsubscribe();
});
</script>
<style scoped>
/* 解决拖动失效问题 */
:deep(.el-overlay-dialog) {
    pointer-events: none;
}

/* 设置 dialog 整体尺寸 */
:deep(.frame .el-dialog) {
    width: 1000px !important;
    height: 700px;
    /* margin-top: 100px; */
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

/* Header 保持默认高度 */
:deep(.frame .el-dialog__header) {
    flex: 0 0 auto;
    /* padding: 10px 20px; */
    border-bottom: 1px solid #eee;
    cursor: move;
}

.canvas-render {
    flex: 1;
    width: 100%;
    height: 500px;
    overflow: hidden;
    padding: 0;
    margin-top: 5px;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Footer 固定高度 */
:deep(.frame .el-dialog__footer) {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.oper {
    display: flex;
    justify-content: flex-end;
    /* margin-top: 10px; */
    margin-right: 10px;
    /* margin-bottom: 0; */
}
</style>