feat: 热点

public/smart-viewer.html

@@ -7,7 +7,7 @@
         <link rel="icon" type="image/svg+xml" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico" />
         <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/ext/iconfont/iconfont.css" />
         <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/ext/swiper/swiper.min.css" />
-        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3693743_hxuk44ksxw9.css" />
+        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3693743_nvvps2z7q3.css" />
         <script src="<%= VUE_APP_STATIC_DIR %>/ext/mobile-detect.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/ext/base64.min.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/ext/swiper/swiper.min.js"></script>

src/components/files/TagEditor.vue

@@ -3,7 +3,7 @@
         <div class="tag-editor-content" :style="{ height: height + 'px' }">
             <header>
                 <span>新建标注</span>
-                <i class="iconfont icon-close" @click="emits('action', null)"></i>
+                <i class="iconfont icon-close" @click="onClose"></i>
             </header>
             <article>
                 <div>
@@ -31,20 +31,23 @@
                 <button @click="onSubmit">提交</button>
             </footer>
         </div>
+        <Toast v-if="showTips" type="warn" :content="showTips" :close="() => (showTips = null)" />
     </div>
 </template>
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import browser from '@/utils/browser'
+import { ref, inject, onMounted, onBeforeUnmount, watch } from 'vue'
 import { http } from '@/utils/request'
+import browser from '@/utils/browser'
+import Toast from '@/components/dialog/Toast'
 import UiArea from '../form/Area.vue'
 import UiInput from '../form/Input.vue'
 import UiMedias from '../form/medias'
 import UiSelectList from '../form/SelectList.vue'
+import { from } from 'readable-stream'
 
+const showTips = ref(null)
 const projectId = browser.valueFromUrl('projectId') || 1
-const props = defineProps(['notify'])
-const emits = defineEmits(['action'])
+const notify = inject('notify')
 const height = ref(0)
 const form = ref({
     title: '',
@@ -61,51 +64,97 @@ const data = ref({
     ],
     members: [],
 })
+const onClose = () => {
+    if (window.kankan) {
+        if (notify.value.__temp) {
+            kankan.TagManager.remove(notify.value.sid)
+        }
+    } else {
+    }
+    notify.value = null
+}
 const onSubmit = () => {
-    const tag = { ...props.notify.tag }
-    tag.title = form.value.title
-    tag.content = form.value.describe
-    tag.visiblePanos = tag.visiblePanos
-    console.log(tag)
-    // http.post(`smart-site/marking/addOrUpdate`, {
-    //     projectId,
-    //     userIds: form.value.members.map(item => item.value),
-    //     markingStatus: form.value.status,
-    //     markingTitle: form.value.title,
-    //     hotData:tag
-    // }).then(response => {
-    //     debugger
-    // })
+    if (!form.value.title) {
+        return (showTips.value = '请输入资料名称')
+    }
+    if (!form.value.status) {
+        return (showTips.value = '请选择处理状态')
+    }
+    notify.value.title = form.value.title
+    notify.value.content = form.value.describe
+    let tag = JSON.stringify(notify.value, (key, value) => {
+        if (key === 'visiblePanos') {
+            return value.map(item => item.id)
+        }
+        return value
+    })
+
+    tag = JSON.parse(tag)
+    tag.status = form.value.status
+    tag.members = form.value.members.map(item => item.value)
+    delete tag.__temp
+    http.post(`smart-site/marking/addOrUpdate`, {
+        projectId,
+        userIds: tag.members,
+        markingStatus: form.value.status,
+        markingTitle: form.value.title,
+        hotData: tag,
+    }).then(response => {
+        if (response.success) {
+            delete notify.value.__temp
+            notify.value = null
+        } else if (response.code == 4008) {
+            showTips.value = '请先登录'
+        } else {
+            showTips.value = response.message
+        }
+    })
 }
 const onResize = () => {
     height.value = window.innerHeight - 90
 }
+
 onMounted(() => {
+    http.post(`smart-site/projectTeam/select`, { projectId }).then(response => {
+        data.value.members = response.data.map(item => {
+            return {
+                text: item.nickName,
+                value: item.userId,
+            }
+        })
+
+        if (notify.value) {
+            form.value.status = String(notify.value.status || '')
+            form.value.title = notify.value.title || ''
+            form.value.describe = notify.value.content || ''
+            form.value.members = []
+            if (notify.value.members && notify.value.members.length) {
+                notify.value.members.forEach(item => {
+                    let find = data.value.members.find(c => c.value == item)
+                    if (find) {
+                        form.value.members.push(find)
+                    }
+                })
+            }
+        }
+    })
+
     if (window.kankan) {
-        window.kankan.TagManager.focusTag(props.notify.sid, {
+        window.kankan.TagManager.focusTag(notify.value.sid, {
             direction: 'left',
             attrs: {
-                width: 450,
+                width: 0,
                 height: 400,
             },
         })
     } else if (window.laser) {
-        window.laser.then(sdk=>{
-            sdk.scene.comToTag(props.notify.position)
+        window.laser.then(sdk => {
+            let pos = notify.value.tag.position
+            sdk.scene.comeToTag(new THREE.Vector3(pos.x, pos.y, pos.z))
         })
     }
-
     onResize()
     window.addEventListener('resize', onResize)
-
-    // http.post(`smart-site/projectTeam/select`, { projectId }).then(response => {
-    //     data.value.members = response.data.map(item => {
-    //         return {
-    //             text: item.userName,
-    //             value: item.userId,
-    //         }
-    //     })
-    // })
 })
 
 onBeforeUnmount(() => {

src/components/files/TagItem.vue

@@ -1,8 +1,9 @@
 <template>
     <div
+        v-if="props.tag"
         @click="onClick"
         :data-tag-id="props.tag.sid"
-        :style="{ lefts: `${props.tag.x}px`, tops: `${props.tag.y}px`, transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }"
+        :style="{ transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }"
         class="tag-item"
     >
         <div class="tag-icon">
@@ -11,6 +12,7 @@
     </div>
 </template>
 <script setup>
+import { inject } from 'vue'
 const props = defineProps({
     tag: {
         type: Object,
@@ -21,10 +23,10 @@ const props = defineProps({
         required: true,
     },
 })
-const emits = defineEmits(['action'])
 
+const notify = inject('notify')
 const onClick = () => {
-    emits('action', { event: 'focus', sid: props.tag.sid, tag: props.tag })
+    notify.value = props.tag //{ event: 'focus', sid: props.tag.sid, tag: props.tag }
 }
 </script>
 <style lang="scss" scoped>

src/components/files/TagView.vue

@@ -2,7 +2,7 @@
     <div class="tag-view">
         <div class="tag-view-content" :style="{ height: height + 'px' }">
             <header>
-                <span>场景标注名称 </span>
+                <span>场景标注名称</span>
                 <i class="iconfont icon-close" @click="emits('action', null)"></i>
             </header>
             <article>
@@ -35,10 +35,6 @@ const onResize = () => {
 onMounted(() => {
     window.kankan.TagManager.focusTag(props.notify.sid, {
         direction: 'left',
-        // attrs: {
-        //     width: 450,
-        //     height: 400,
-        // },
     })
     onResize()
     window.addEventListener('resize', onResize)

src/components/files/index.vue

@@ -1,11 +1,30 @@
 <template>
     <transition name="slide-right" mode="in-out">
         <div class="files" v-if="showFiles">
-            <ul>
-                <li>
-                    <button class="add" @click="onAdd">添加标注</button>
-                </li>
-            </ul>
+            <div class="info">
+                <button @click="onAdd">添加标注</button>
+                <div>
+                    已添加的标注（<span>{{ tags.length }}</span
+                    >）
+                </div>
+            </div>
+            <div class="list">
+                <ul>
+                    <li v-for="tag in tags">
+                        <div class="title"><i></i>{{ tag.title }}</div>
+                        <div class="more" @click="onShowMore(tag)">
+                            <i class="iconfont icon-more"></i>
+                            <div v-if="showMoreSid == tag.sid" 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">
@@ -16,13 +35,20 @@
     </transition>
 </template>
 <script setup>
-import { ref, watchEffect } from 'vue'
+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'])
+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 onAdd = () => {
     if (window.kankan) {
@@ -31,36 +57,217 @@ const onAdd = () => {
             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
-    kankan.TagManager.editor.then(editor => editor.exit())
+    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
 }
 const onAddConfirm = () => {
     showFiles.value = true
     showToolbar.value = false
-    kankan.TagManager.editor.then(editor => {
-        var tag = editor.confirm()
+    if (window.kankan) {
+        kankan.TagManager.editor.then(editor => {
+            var tag = editor.confirm()
+            if (tag) {
+                tag.icon = ''
+                tag.__temp = true
+                tags.value.push(tag)
+                notify.value = tag
+            }
+        })
+    } else {
+        let tag = tags.value.find(item => item.__temp == true)
         if (tag) {
-            kankan.TagManager.add([tag])
+            delete tag.__temp
         }
-    })
+    }
+    editTag = null
+    tempTag = null
+}
+const onOutside = () => {
+    if (showMoreSid.value) {
+        showMoreSid.value = ''
+    }
+}
+const onShowMore = tag => {
+    showMoreSid.value = tag.sid
+}
+const onMoreHandler = (type, tag) => {
+    if (type == 'modify') {
+        editTag = tags.value.find(item => item.sid == tag.sid)
+        showFiles.value = false
+        showToolbar.value = true
+    } 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;
-    height: 100%;
     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;
@@ -78,41 +285,58 @@ watchEffect(() => {
     transition: all 0.3s ease;
     button {
         width: 160px;
-        height: 34px;
-        border: none;
-        outline: none;
-        border-radius: 4px;
-        font-size: 14px;
-        background: transparent;
-        transition: all 0.3s ease;
-        color: var(--color-main-normal);
-        border: solid 1px rgb(0, 118, 246);
-        color: rgb(0, 118, 246);
         margin: 0 10px;
-        &[type='submit'] {
-            background: rgb(0, 118, 246);
-            color: #fff;
-        }
     }
 }
-ul {
-    margin: 0 10px;
-}
 li {
-    margin-top: 20px;
+    cursor: pointer;
+    height: 44px;
+    padding: 10px;
     list-style: none;
-}
-.add {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 34px;
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    color: rgba(255, 255, 255, 0.4);
-    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    .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 {
-        border-color: #fff;
-        color: #fff;
+        background-color: rgb(0, 118, 246, 0.1);
     }
 }
 

src/components/form/Input.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="control" @click="onInputerClick">
         <div class="component select" v-if="type == 'select'" v-click-outside="onOutside">
-            <div class="place" :class="{placeholder:!selecterText}">{{ selecterText || placeholder }}</div>
-            <div class="icon" :class="{up:selecterShow}">
+            <div class="place" :class="{ placeholder: !selecterText }">{{ selecterText || placeholder }}</div>
+            <div class="icon" :class="{ up: selecterShow }">
                 <i class="iconfont icon-arrows_down"></i>
             </div>
-            <div class="panel" v-show="selecterShow"  >
+            <div class="panel" v-show="selecterShow">
                 <ul>
                     <li v-for="item in data" @click.stop="onselecterChange(item)">
                         <div>{{ item.text }}</div>
@@ -23,7 +23,7 @@
     </div>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 const props = defineProps({
     type: {
         type: String,
@@ -34,7 +34,7 @@ const props = defineProps({
         default: [],
     },
     modelValue: {
-        type: [String , Number , Boolean],
+        type: [String, Number, Boolean],
         require: true,
     },
     maxlength: {
@@ -48,6 +48,7 @@ const props = defineProps({
         default: '请输入',
     },
 })
+
 const emits = defineEmits(['update:modelValue', 'change'])
 
 const selecterText = ref('')
@@ -66,9 +67,18 @@ const onselecterChange = data => {
     selecterText.value = data.text
     selecterShow.value = false
 }
-const onOutside = ()=>{
+const onOutside = () => {
     selecterShow.value = false
 }
+
+watch(props, () => {
+    if (props.type == 'select' && props.modelValue) {
+        let find = props.data.find(item => item.value == props.modelValue)
+        if (find) {
+            selecterText.value = find.text
+        }
+    }
+})
 </script>
 <style lang="scss" scoped>
 ul,
@@ -108,14 +118,14 @@ li {
 
     .select {
         cursor: pointer;
-        .place{
+        .place {
             width: 100%;
             height: 100%;
             color: #fff;
             line-height: 34px;
             text-indent: 10px;
-            &.placeholder{
-                color:#757575;
+            &.placeholder {
+                color: #757575;
             }
         }
         .panel {

src/components/form/medias/Video.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="media" v-show="media">
-
+        <video x5-video-player-type="h5-page" controlslist="nodownload" disablepictureinpicture="" webkit-playsinline="" x-webkit-airplay="" playsinline="" controls="" autoplay="" src="blob:http://test.4dkankan.com/e9d98629-af14-4a25-9a11-56026738b12a"></video>
     </div>
     <div class="placeholder" @click="file.click()" v-show="media == null">
         <div class="icon">
@@ -25,7 +25,7 @@ const onChange = e => {
 
     let file = e.target.files[0]
 
-    if (checkSizeLimitFree(file.size, 5)) {
+    if (checkSizeLimitFree(file.size, 20)) {
         let reader = new FileReader()
         reader.onload = function () {
             images.value.push(base64ToDataURL(reader.result))
@@ -93,4 +93,9 @@ onMounted(() => {
         }
     }
 }
+video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
 </style>

src/pages/Viewer.vue

@@ -4,7 +4,7 @@
         <main>
             <div class="split">
                 <iframe ref="sourceFrame" v-if="sourceURL" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
-                <div class="tools" v-if="source" v-show="!showAdjust && !fscChecked && (dbsChecked || (!target && !bimChecked))">
+                <div class="tools" v-if="source" v-show="showWidget && !showAdjust && !fscChecked && (dbsChecked || (!target && !bimChecked))">
                     <!-- <div class="item-date">
                         <calendar
                             name="source"
@@ -22,11 +22,11 @@
                         <div class="iconfont icon-show_roaming" :class="{ active: mode == 0 }" @click="onModeChange(0)"></div>
                         <div class="iconfont icon-show_plane" :class="{ active: mode == 1 }" @click="onModeChange(1)"></div>
                     </div>
-                    <div class="item-density" v-if="(source.type == 2 && mode == 1)" :class="{active:showDensity}" @click="showDensity=!showDensity">
-                        <span>{{densityType.text}}</span>
+                    <div class="item-density" v-if="source.type == 2 && mode == 1" :class="{ active: showDensity }" @click="showDensity = !showDensity">
+                        <span>{{ densityType.text }}</span>
                         <i class="iconfont icon-arrows_down"></i>
                         <ul>
-                            <li v-for="density in densityTypes" @click="onDensityChange(density)">{{density.text}}</li>
+                            <li v-for="density in densityTypes" @click="onDensityChange(density)">{{ density.text }}</li>
                         </ul>
                     </div>
                 </div>
@@ -69,7 +69,7 @@
                     </div>
                 </div>
             </div>
-            <div class="model" v-show="!showAdjust">
+            <div class="model" v-show="showWidget && !showAdjust">
                 <div class="file" :class="{ active: fileChecked, disable: fileDisable }" v-show="!fscChecked && !showBim">
                     <div @click="onFileChecked">
                         <i class="iconfont icon-note1"></i>
@@ -97,11 +97,11 @@
         </main>
     </article>
     <Toast v-if="showTips" type="warn" :content="showTips" :close="() => (showTips = null)" />
-    <Files :show="fileChecked" />
+    <Files :show="fileChecked" @exit="() => (fileChecked = false)" />
 </template>
 
 <script setup>
-import { ref, onMounted, computed, nextTick } from 'vue'
+import { ref, onMounted, computed, nextTick, provide, watch } from 'vue'
 import { http } from '@/utils/request'
 
 import browser from '@/utils/browser'
@@ -110,8 +110,14 @@ import AppHeader from '@/components/header'
 import Calendar from '@/components/calendar'
 import Files from '@/components/files'
 import TagManager from '@/components/files/TagManager'
-import sync, {  beforeChangeURL, loadSourceScene, loadTargetScene, setPanoWithBim, flyToP1P2 } from '@/utils/sync'
+import sync, { beforeChangeURL, loadSourceScene, loadTargetScene, setPanoWithBim, flyToP1P2 } from '@/utils/sync'
 const isDev = process.env.VUE_APP_TEST == 1
+
+const tags = ref([])
+const notify = ref(null)
+provide('tags', tags)
+provide('notify', notify)
+
 // 是否BIM模式
 const showBim = ref(browser.urlHasValue('bim'))
 // 是否校准模式
@@ -129,15 +135,16 @@ const sourceFrame = ref(null)
 const targetFrame = ref(null)
 
 const mode = ref(0)
+
 const source = ref(null)
 const target = ref(null)
 const project = ref(null)
 const points = ref({ p1: null, p2: null })
 
 const densityTypes = ref([
-    {type:'high',text:'高'},
-    {type:'middle',text:'中'},
-    {type:'low',text:'低'}
+    { type: 'high', text: '高' },
+    { type: 'middle', text: '中' },
+    { type: 'low', text: '低' },
 ])
 
 const densityType = ref(densityTypes.value[0])
@@ -146,6 +153,13 @@ const showTips = ref(null)
 
 const showDensity = ref(false)
 
+const showWidget = computed(() => {
+    if (fileChecked.value) {
+        return false
+    }
+    return true
+})
+
 const scenes = computed(() => {
     if (!project.value) {
         return []
@@ -198,7 +212,6 @@ const targetURL = computed(() => {
 })
 const sourceDate = computed(() => {
     if (source.value) {
-        console.log(source.value.createTime.toDate())
         return source.value.createTime.toDate()
     }
 })
@@ -241,7 +254,7 @@ const targetDays = computed(() => {
     }
 })
 
-const fileDisable = computed(()=>{
+const fileDisable = computed(() => {
     return false
 })
 
@@ -267,8 +280,9 @@ const onLoadSource = () => {
         // BIM单屏模式
         return
     }
-    if(source.value.type < 2) {
+    if (source.value.type < 2) {
         window['kankan'] = sourceFrame.value.contentWindow.app
+        window['kankan'].TagManager.load(tags.value)
     } else {
         window['laser'] = sourceFrame.value.contentWindow.loaded
     }
@@ -291,7 +305,7 @@ const onModeChange = targetMode => {
     }
 }
 
-const onDensityChange = (density)=>{
+const onDensityChange = density => {
     if (sync.sourceInst) {
         sync.sourceInst.loaded.then(sdk => {
             let data = sdk.scene.changePointDensity(density.type)
@@ -402,12 +416,10 @@ const onNextDate = name => {
     scene.value = scenes.value[index]
 }
 
-
 const onFileChecked = () => {
     fileChecked.value = !fileChecked.value
 }
 
-
 // bim点击
 const onBimChecked = () => {
     if (bimDisable.value) {
@@ -568,6 +580,20 @@ onMounted(() => {
         .catch(() => {
             showTips.value = '服务器连接失败'
         })
+
+    http.post(`smart-site/marking/list`, {
+        projectId: projectId,
+        pageNum: 1,
+        pageSize: 200,
+    }).then(response => {
+        if(response.data && response.data.list) {
+            tags.value = response.data.list.map(item=>{
+                item.hotData.visible = false
+                item.hotData.id = item.markingId
+                return item.hotData
+            })
+        }
+    })
 })
 </script>
 
@@ -764,12 +790,12 @@ main {
             margin-right: 10px;
             font-size: 16px;
             padding: 0 16px;
-            &.active{
-                ul{
+            &.active {
+                ul {
                     display: block;
                 }
-                i{
-                    transform: scale(0.8) rotate(180deg)
+                i {
+                    transform: scale(0.8) rotate(180deg);
                 }
             }
             span {
@@ -792,9 +818,9 @@ main {
                 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                 border: 1px solid #000000;
                 list-style: none;
-                li{
+                li {
                     padding: 5px 0;
-                    &:hover{
+                    &:hover {
                         color: #0076f6;
                     }
                 }

src/utils/ClickOutSide.js

@@ -5,7 +5,10 @@ export const clickOutSide = {
                 binding.value(event, el)
             }
         }
-        document.addEventListener('click', el.clickOutsideEvent)
+        setTimeout(() => {
+            document.addEventListener('click', el.clickOutsideEvent)    
+        }, 200);
+        
     },
     unmounted: function (el) {
         document.removeEventListener('click', el.clickOutsideEvent)