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

<template>
    <transition name="slide-right" mode="in-out">
        <div class="files" v-if="showFiles && !isEdit">
            <div class="info" ref="add$">
                <button @click="onAdd">{{ $t('tag.addTag') }}</button>
                <div>
                    {{ $t('tag.isAddTag') }}（<span>{{ tags.length }}</span
                    >）
                </div>
            </div>
            <div class="list" :style="`height:${listStyle};`">
                <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)">{{ $t('common.edit') }}</div>
                                <div @click.stop="onMoreHandler('delete', tag)">{{ $t('common.delete') }}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="exit" ref="exit$">
                <button type="button" @click="emits('exit')">{{ $t('common.exit') }}</button>
            </div>
        </div>
    </transition>
    <transition name="slide-up" mode="in-out">
        <div class="toolbar" v-if="showToolbar">
            <button type="button" @click="onAddCancel">{{ $t('common.cancel') }}</button>
            <button type="submit" @click="onAddConfirm">{{ $t('common.confirm') }}</button>
        </div>
    </transition>
    <ui-confirm v-if="delComfirm" @ok="handlerDel" @no="handlerDel">
        <template #content>
            <div>{{ $t('tag.deleteTagText') }}</div>
        </template>
    </ui-confirm>
    <Toast v-if="showTips" type="warn" :content="showTips" :close="() => (showTips = null)" />
</template>
<script setup>
import { ref, inject, watchEffect, onMounted, nextTick } from 'vue'
import browser from '@/utils/browser'
import { http } from '@/utils/request'
import UiConfirm from '@/components/dialog/Confirm.vue'
import Toast from '@/components/dialog/Toast'
let editTag = null
let tempTag = null
const exit$ = ref(null)
const add$ = ref(null)
const props = defineProps(['show'])
const emits = defineEmits(['add', 'exit'])
const showTips = ref(null)
const handlerDel = status => {
    if (status == 'ok') {
        http.post(`smart-site/marking/del`, {
            markingId: delComfirm.value.id,
        }).then(response => {
            if (response.success) {
                let index = tags.value.findIndex(item => item.sid == delComfirm.value.sid)
                if (index != -1) {
                    tags.value.splice(index, 1)
                }
                if (notify.value && notify.value.id == delComfirm.value.id) {
                    notify.value = null
                }
            } else {
                showTips.value = response.message
            }
            delComfirm.value = null
        })
    } else {
        delComfirm.value = null
    }
}
const delComfirm = ref(null)
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 }
}
let isAdd = false
const onAdd = () => {
    isEdit.value = true
    isAdd = true
    if (window.kankan) {
        window.kankan.TagManager.editor.then(editor => {
            editor.enter()
            showFiles.value = false
            showToolbar.value = true
        })
    } else {
        laserPosition()
        showFiles.value = false
        showToolbar.value = true
    }
}
const laserPosition = () => {
    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: null,
                        createTime: Date.now(),
                        icon: '',
                        x: info2d.pos.x,
                        y: info2d.pos.y,
                        position: info3d.position,
                        media: null,
                        type: '',
                        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)
                }
            }
        })
    })
}
const onAddCancel = () => {
    showFiles.value = true
    showToolbar.value = false
    isAdd = false
    if (window.kankan) {
        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) {
        kankan.TagManager.editor.then(editor => {
            var tag = editor.confirm()
            if (tag) {
                tag.icon = ''
                if (isAdd) {
                    tag.__temp = true
                    tag._add = true
                    isAdd = false
                }
                // tags.value.push(tag)
                notify.value = tag
                isEdit.value = true
            }
        })
    } else {
        let tag
        if (isAdd) {
            tag = tags.value.find(item => item.__temp == true)
        } else {
            tag = editTag
        }
        if (tag) {
            // delete tag.__temp

            if (tag) {
                if (isAdd) {
                    tag.__temp = true
                    // tag._add = true
                    isAdd = false
                }

                notify.value = tag
            }
        }
    }
    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') {
        if (notify.value) {
            notify.value = null
        }
        editTag = tags.value.find(item => item.sid == tag.sid)
        showFiles.value = false
        showToolbar.value = true
        isEdit.value = true

        if (window.kankan) {
            window.kankan.TagManager.focusTag(editTag.sid)
            window.kankan.TagManager.editor.then(editor => {
                editor.enter(editTag)
            })
        } else {
            laserPosition()
        }
        // window.kankan.TagManager.focusBeforeModify(editTag.sid)
    } else if (type == 'delete') {
        delComfirm.value = tag
    }
    showMoreSid.value = ''
}
const onTagFocus = tag => {
    //tid.
}
const listStyle = ref('')
watchEffect(() => {
    showFiles.value = props.show
    if (showFiles.value && !isEdit.value) {
        nextTick(() => {
            listStyle.value = `calc(100vh - ${add$.value.offsetHeight + exit$.value.offsetHeight + 60}px)`
        })
    }
})

onMounted(() => {})
</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;
        overflow-y: auto;
    }
    .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>