4dkankan_bim/src/components/files/index.vue

<template>
    <transition name="slide-right" mode="in-out">
        <div class="files" v-if="showFiles">
            <div class="info">
                <button @click="onAdd">添加标注</button>
                <div>
                    已添加的标注（<span>{{ tags.length }}</span
                    >）
                </div>
            </div>
            <div class="list">
                <ul>
                    <li v-for="tag in tags" @click="onClick(tag)" :class="{ active: notify?.sid == tag.sid }">
                        <div class="title"><i></i>{{ tag.title }}</div>
                        <div class="more" @click.stop="onShowMore(tag)">
                            <i class="iconfont icon-more"></i>
                            <div v-if="showMoreSid == tag.id" v-click-outside="onOutside">
                                <div @click.stop="onMoreHandler('modify', tag)">编辑</div>
                                <div @click.stop="onMoreHandler('delete', tag)">删除</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="exit">
                <button type="button" @click="emits('exit')">退出</button>
            </div>
        </div>
    </transition>
    <transition name="slide-up" mode="in-out">
        <div class="toolbar" v-if="showToolbar">
            <button type="button" @click="onAddCancel">取消</button>
            <button type="submit" @click="onAddConfirm">确定</button>
        </div>
    </transition>
</template>
<script setup>
import { ref, inject, watchEffect } from 'vue'
import { http } from '@/utils/request'

let editTag = null
let tempTag = null

const props = defineProps(['show'])
const emits = defineEmits(['add', 'exit'])

const showFiles = ref(false)
const showToolbar = ref(false)
const showMoreSid = ref('')
const tags = inject('tags')
const notify = inject('notify')
const isEdit = inject('isEdit')
const onClick = tag => {
    notify.value = tag //{ event: 'focus', sid: props.tag.sid, tag: props.tag }
}
const onAdd = () => {
    if (window.kankan) {
        window.kankan.TagManager.editor.then(editor => {
            editor.enter()
            showFiles.value = false
            showToolbar.value = true
        })
    } else {
        window.laser.then(sdk => {
            sdk.addMouseDownEvent(e => {
                if (showToolbar.value == false) {
                    return
                }
                if (e.button == 2) {
                    const info3d = sdk.scene.getPointByScreen({ x: e.clientX, y: e.clientY })
                    const info2d = sdk.scene.getScreenByPoint(info3d.position)
                    if (editTag) {
                        tempTag = {}
                        tempTag.x = editTag.x
                        tempTag.y = editTag.y
                        tempTag.visible = editTag.visible
                        tempTag.position = new THREE.Vector3(editTag.position.x, editTag.position.y, editTag.position.z)

                        editTag.x = info2d.pos.x
                        editTag.y = info2d.pos.y
                        editTag.visible = info2d.trueSide
                        editTag.position = info3d.position
                    } else {
                        const tag = {
                            panoId: '0',
                            createTime: 1658223413176,
                            icon: 'R7PTZK233714.png',
                            x: info2d.pos.x,
                            y: info2d.pos.y,
                            position: info3d.position,
                            media: { link: [{ src: 'https://test.4dkankan.com/#/scene' }] },
                            type: 'link',
                            title: '链接热点',
                            content: '',
                            sid: Date.now().toString(),
                            visible: info2d.trueSide,
                            __temp: true,
                        }
                        let index = tags.value.findIndex(item => item.__temp == true)
                        if (index != -1) {
                            tags.value.splice(index, 1)
                        }
                        tags.value.push(tag)
                    }
                }
            })
        })

        showFiles.value = false
        showToolbar.value = true
    }
}
const onAddCancel = () => {
    showFiles.value = true
    showToolbar.value = false
    if (window.kankan) {
        if (isEdit.value) {
            kankan.TagManager.edit.exit()
        } else {
            kankan.TagManager.editor.then(editor => editor.exit())
        }
    } else {
        let index = tags.value.findIndex(item => item.__temp == true)
        if (index != -1) {
            tags.value.splice(index, 1)
        }
    }

    if (tempTag) {
        let tag = tags.value.find(item => item.sid == editTag.sid)
        tag.x = tempTag.x
        tag.y = tempTag.y
        tag.visible = tempTag.visible
        tag.position = tempTag.position
    }
    editTag = null
    tempTag = null
    isEdit.value = false
}
const onAddConfirm = () => {
    showFiles.value = true
    showToolbar.value = false
    if (window.kankan) {
        const tag = kankan.TagManager.edit.confirm()
        console.log(tag)
        if (tag) {
            if (!isEdit.value) {
                tag.icon = ''
                tag.__temp = true
                tags.value.push(tag)
            }
            notify.value = tag
        }
        // kankan.TagManager.editor.then(editor => {
        //     var tag = editor.confirm()

        //     if (tag) {
        //         tag.icon = ''
        //         tag.__temp = true
        //         tags.value.push(tag)
        //         notify.value = tag
        //         isEdit.value = true
        //     }
        // })
    } else {
        let tag = tags.value.find(item => item.__temp == true)
        if (tag) {
            delete tag.__temp
        }
    }
    editTag = null
    tempTag = null
}
const onOutside = () => {
    if (showMoreSid.value) {
        showMoreSid.value = ''
    }
}
const onShowMore = tag => {
    showMoreSid.value = tag.id
}
const onMoreHandler = (type, tag) => {
    if (type == 'modify') {
        editTag = tags.value.find(item => item.sid == tag.sid)
        showFiles.value = false
        showToolbar.value = true
        isEdit.value = true
        // window.kankan.TagManager.editor.then(editor => {
        //     editor.enter()
        // })

        window.kankan.TagManager.focusBeforeModify(editTag.sid)
    } else if (type == 'delete') {
        http.post(`smart-site/marking/del`, {
            markingId: tag.id,
        }).then(response => {
            if (response.success) {
                let index = tags.value.findIndex(item => item.sid == tag.sid)
                if (index != -1) {
                    tags.value.splice(index, 1)
                }
            }
        })
    }
    showMoreSid.value = ''
}
const onTagFocus = tag => {
    //tid.
}
watchEffect(() => {
    showFiles.value = props.show
})
</script>
<style lang="scss" scoped>
button {
    width: 100px;
    height: 34px;
    border: none;
    outline: none;
    border-radius: 4px;
    font-size: 14px;
    background: transparent;
    transition: all 0.3s ease;
    border: solid 1px rgb(0, 118, 246);
    color: rgb(0, 118, 246);
    margin: 0;
    padding: 0;
    &[type='submit'] {
        background: rgb(0, 118, 246);
        color: #fff;
    }
}
.files {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding: 10px 0;
    top: 57px;
    right: 0;
    bottom: 0;
    width: 240px;
    background: rgba(27, 27, 28, 0.8);
    z-index: 1000;
    .info {
        padding: 10px;
        div {
            font-size: 16px;
            font-weight: bold;
            color: #999999;
            margin-top: 20px;
            padding-top: 20px;
            border-top: solid 1px rgba(255, 255, 255, 0.16);
            span {
                color: rgb(0, 118, 246);
                font-weight: normal;
            }
        }
        button {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: rgba(255, 255, 255, 0.4);
            &:hover {
                border-color: #fff;
                color: #fff;
            }
        }
    }
    .list {
        flex: 1;
    }
    .exit {
        padding: 0 10px;
        button {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: rgba(255, 255, 255, 0.4);
            &:hover {
                border-color: #fff;
                color: #fff;
            }
        }
    }

    .add {
        padding-bottom: 20px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.16);
        button {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: rgba(255, 255, 255, 0.4);
            &:hover {
                border-color: #fff;
                color: #fff;
            }
        }
    }
}
.toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: rgba(27, 27, 28, 0.8);
    pointer-events: all;
    z-index: 1000;
    transition: all 0.3s ease;
    button {
        width: 160px;
        margin: 0 10px;
    }
}
li {
    cursor: pointer;
    height: 44px;
    padding: 10px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    &.active {
        background-color: rgba(0, 118, 246, 0.1);
    }
    .title {
    }
    .more {
        position: relative;
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
            > div {
                display: block;
            }
        }
        i {
            font-size: 14px;
        }
        > div {
            min-width: 82px;
            background: #222121;
            border-radius: 4px;
            border: 1px solid #000;
            backdrop-filter: blur(4px);
            position: absolute;
            right: 6px;
            top: 26px;
            z-index: 100;
            div {
                text-align: center;
                height: 32px;
                line-height: 32px;
                &:hover {
                    background-color: rgb(0, 118, 246, 0.1);
                }
            }
        }
    }
    &:hover {
        background-color: rgb(0, 118, 246, 0.1);
    }
}

.slide-right-enter-active,
.slide-right-leave-active {
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.slide-right-enter-from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-right-enter {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-up-enter-active,
.slide-up-leave-active {
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.slide-up-enter-from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}
.slide-up-enter {
    opacity: 1;
    transform: translate3d(0, -100%, 0);
}
.slide-up-leave-active {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}
</style>