feat: .

src/components/files/TagEditor.vue

@@ -81,24 +81,31 @@ const onResize = () => {
     height.value = window.innerHeight - 90
 }
 onMounted(() => {
-    window.kankan.TagManager.focusTag(props.notify.sid, {
-        direction: 'left',
-        attrs: {
-            width: 450,
-            height: 400,
-        },
-    })
+    if (window.kankan) {
+        window.kankan.TagManager.focusTag(props.notify.sid, {
+            direction: 'left',
+            attrs: {
+                width: 450,
+                height: 400,
+            },
+        })
+    } else if (window.laser) {
+        window.laser.then(sdk=>{
+            sdk.scene.comToTag(props.notify.position)
+        })
+    }
+
     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,
-            }
-        })
-    })
+    // 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,11 +1,5 @@
 <template>
-    <div v-if="props.scene == 'laser'"  :data-tag-id="props.tag.sid"  class="tag-item" ref="dom">
-        <div class="tag-icon">
-            <span>{{ props.index }}</span>
-        </div>
-    </div>
     <div
-        v-else
         @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' }"
@@ -17,7 +11,6 @@
     </div>
 </template>
 <script setup>
-import { ref,onMounted } from 'vue'
 const props = defineProps({
     tag: {
         type: Object,
@@ -30,38 +23,9 @@ const props = defineProps({
 })
 const emits = defineEmits(['action'])
 
-const dom = ref(null)
-
 const onClick = () => {
     emits('action', { event: 'focus', sid: props.tag.sid, tag: props.tag })
 }
-onMounted(() => {
-    if (window.laser) {
-        window.laser.then(sdk => {
-            const posInfo = sdk.scene.getPointByScreen({ x: e.clientX, y: e.clientY })
-            sdk.addMouseDownEvent(e => {
-                if (e.button == 2) {
-                    const posInfo = sdk.scene.getPointByScreen({ x: e.clientX, y: e.clientY })
-                    const tag = {
-                        panoId: '0',
-                        createTime: 1658223413176,
-                        icon: 'R7PTZK233714.png',
-                        x: e.clientX,
-                        y: e.clientY,
-                        position: { x: -0.7253925749728442, y: -0.12276942990074809, z: 2.3097074481849633 },
-                        media: { link: [{ src: 'https://test.4dkankan.com/#/scene' }] },
-                        type: 'link',
-                        title: '链接热点',
-                        content: '',
-                        sid: 'ctKxOW233013',
-                        visible: true,
-                    }
-                    tags.value.push(tag)
-                }
-            })
-        })
-    }
-})
 </script>
 <style lang="scss" scoped>
 .tag-item {

src/components/files/TagLaserItem.vue

@@ -1,144 +0,0 @@
-<template>
-    <div :data-tag-id="props.tag.sid"  class="tag-item">
-        <div class="tag-icon">
-            <span>{{ props.index }}</span>
-        </div>
-    </div>
-</template>
-<script setup>
-const props = defineProps({
-    tag: {
-        type: Object,
-        required: true,
-    },
-    index: {
-        type: Number,
-        required: true,
-    },
-})
-console.log(props)
-const emits = defineEmits(['action'])
-
-const onClick = () => {
-    emits('action', { event: 'focus', sid: props.tag.sid, tag: props.tag })
-}
-
-</script>
-<style lang="scss" scoped>
-.tag-item {
-    cursor: pointer;
-    pointer-events: all;
-    display: none;
-    position: absolute;
-    width: 26px;
-    height: 26px;
-    margin-left: -13px;
-    margin-top: -13px;
-    z-index: 1;
-    &.active {
-        .tag-icon {
-            background-color: green;
-        }
-    }
-}
-
-.tag-item.focus {
-    z-index: 2;
-}
-.tag-item.focus .tag-body {
-    transform: translateY(-50%) scale(1);
-}
-.tag-item.fixed {
-    z-index: 3;
-}
-.tag-item.active {
-    z-index: 4;
-}
-
-.tag-item .tag-icon {
-    position: relative;
-    display: block;
-    width: 26px;
-    height: 26px;
-    border-radius: 0 50% 50% 50%;
-    border: 1px solid #fff;
-    transform: rotate(-135deg);
-    background-color: #0076f6;
-    span {
-        display: block;
-        transform: rotate(135deg);
-        margin-top: 3px;
-        margin-left: -1px;
-        text-align: center;
-    }
-}
-
-.tag-item .tag-icon.animate {
-    animation: tag-animate-zoom 3s -1s linear infinite;
-}
-
-.tag-item .tag-body {
-    position: fixed;
-    right: 0;
-    top: 50%;
-    margin-right: 70px;
-    width: 200px;
-    height: 200px;
-    transform: translateY(-50%) scale(1);
-    transform-origin: calc(100% + 40px) -50%;
-    background: rgba(27, 27, 28, 0.8);
-    border-radius: 4px;
-    min-width: 400px;
-    padding: 30px 20px;
-}
-
-.tag-item .tag-body::before {
-    content: '';
-    position: absolute;
-    width: 40px;
-    height: 100%;
-    top: 0;
-    right: -40px;
-}
-
-.tag-item .tag-body::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: -39px;
-    width: 0;
-    height: 0;
-    border-top: 15px solid transparent;
-    border-bottom: 15px solid transparent;
-    border-left: 40px solid rgba(27, 27, 28, 0.8);
-    transform: translateY(-50%);
-}
-
-@keyframes tag-animate-zoom {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(0.7);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
-.tag-item .v-enter-from,
-.tag-item .v-leave-to {
-    opacity: 0;
-    transform: translateY(50%) scale(0);
-}
-.tag-item .v-enter-active,
-.tag-item .v-leave-active {
-    will-change: transform;
-    transition: all 0.25s cubic-bezier(0.35, 0.32, 0.65, 0.63);
-}
-.tag-item .v-enter-to,
-.tag-item .v-leave-from {
-    opacity: 1;
-    transform: translateY(-50%) scale(1);
-}
-</style>

src/components/files/TagManager.vue

@@ -1,13 +1,12 @@
 <template>
     <div xui_tags_view>
-        <!-- <TagItem v-for="(tag, index) in tags" :tag="tag" :index="index + 1" @action="onAction" :class="{ active: notify && notify.sid == tag.sid }" /> -->
+        <TagItem v-for="(tag, index) in tags" :tag="tag" :index="index + 1" @action="onAction" :class="{ active: notify && notify.sid == tag.sid }" />
         <TagEditor v-if="notify" :notify="notify" @action="onAction" />
     </div>
 </template>
 <script setup>
 import { ref, watchEffect } from 'vue'
 import TagItem from './TagItem.vue'
-import TagLaserItem from './TagLaserItem.vue'
 import TagView from './TagView.vue'
 import TagEditor from './TagEditor.vue'
 
@@ -16,49 +15,7 @@ let timer = setInterval(() => {
         init(window.kankan)
         clearInterval(timer)
     } else if (window.laser) {
-        window.laser.then(sdk => {
-            watchEffect(onClean => {
-                const cleans = tags.value.map((tag, index) => {
-                    console.error(TagLaserItem, tag.position)
-                    return sdk.sceneCarry.use({
-                        components: TagLaserItem,
-                        props: {
-                            pos: tag.position,
-                            tag,
-                            index,
-                        },
-                    })
-                })
-
-                return onClean(() => {
-                    cleans.forEach(clean => clean())
-                })
-            })
-        })
-
-        window.laser.then(sdk => {
-            sdk.addMouseDownEvent(e => {
-                if (e.button == 2) {
-                    const info = sdk.scene.getPointByScreen({ x: e.clientX, y: e.clientY })
-                    const tag = {
-                        panoId: '0',
-                        createTime: 1658223413176,
-                        icon: 'R7PTZK233714.png',
-                        x: e.clientX,
-                        y: e.clientY,
-                        position: info.position,
-                        media: { link: [{ src: 'https://test.4dkankan.com/#/scene' }] },
-                        type: 'link',
-                        title: '链接热点',
-                        content: '',
-                        sid: 'ctKxOW233013',
-                        visible: true,
-                        scene: 'laser',
-                    }
-                    tags.value.push(tag)
-                }
-            })
-        })
+        initLaserTag()
         clearInterval(timer)
     }
 }, 50)
@@ -139,6 +96,58 @@ const init = sdk => {
     sdk.TagManager.load(tags.value)
 }
 
+const initLaserTag = () => {
+    window.laser.then(sdk => {
+        // watchEffect(onClean => {
+        //     const cleans = tags.value.map((tag, index) => {
+        //         return sdk.sceneCarry.use({
+        //             component: TagLaserItem,
+        //             props: {
+        //                 pos: tag.position,
+        //                 tag,
+        //                 index,
+        //             },
+        //         })
+        //     })
+
+        //     return onClean(() => {
+        //         cleans.forEach(clean => clean())
+        //     })
+        // })
+
+        sdk.scene.on('posChange', cameraPos => {
+            tags.value.forEach(tag=>{
+                const info2d = sdk.scene.getScreenByPoint(tag.position)
+                tag.x = info2d.pos.x,
+                tag.y = info2d.pos.y
+                tag.visible = info2d.trueSide
+            })
+        })
+
+        sdk.addMouseDownEvent(e => {
+            if (e.button == 2) {
+                const info3d = sdk.scene.getPointByScreen({ x: e.clientX, y: e.clientY })
+                const info2d = sdk.scene.getScreenByPoint(info3d.position)
+                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: 'ctKxOW233013',
+                    visible: info2d.trueSide,
+                }
+                tags.value.push(tag)
+            }
+        })
+    })
+}
+
 const onAction = action => {
     notify.value = action
 }

src/pages/viewer.js

@@ -37,6 +37,10 @@ String.prototype.toDate = function() {
     return new Date(this.replace(/\//g, '-').replace(' ', 'T'))
 }
 
+document.oncontextmenu = function (event){
+    return false
+}
+
 setup()
 const app = createApp(App)
 app.directive('click-outside', ClickOutSide)