feat: 点位校验

src/components/header/index.vue

@@ -3,7 +3,7 @@
         <div v-if="project">{{ project.projectName }}</div>
         <div class="sync">
             <button @click="onCancel">取消</button>
-            <button type="submit" @click="onSubmit">同步</button>
+            <button type="submit" @click="onSubmit" :class="{ active: points.p1 && points.p2 }">同步</button>
         </div>
     </header>
     <header v-else>
@@ -29,6 +29,14 @@
         </div>
         <Login v-if="showLogin" @close="showLogin = false" @user="info => (user = info)" />
     </header>
+    <footer v-if="props.showAdjust">
+        <h4>为场景设置关联位置</h4>
+        <div>请选择位置，确认左右视图中的场景在同一位置后，单击右侧按钮将其设为关联位置。</div>
+        <div class="points">
+            <button @click="onSetP1" :class="{ active: points.p1 }">设为P1</button>
+            <button @click="onSetP2" :class="{ active: points.p2 }">设为P2</button>
+        </div>
+    </footer>
 </template>
 <script setup>
 import { ref, defineProps, onMounted } from 'vue'
@@ -37,11 +45,24 @@ import browser from '@/utils/browser'
 import Login from './Login'
 const props = defineProps({
     project: Object,
-    showAdjust:Boolean
+    showAdjust: Boolean,
 })
+const emits = defineEmits(['update'])
 
 const user = ref(null)
+const points = ref({ p1: null, p2: null })
 const showLogin = ref(false)
+
+const onSetP1 = () => {
+    points.value.p1 = { id: 0, position: { x: 1, y: 1, z: 1 } }
+    emits('update','p1')
+
+}
+const onSetP2 = () => {
+    points.value.p2 = { id: 0, position: { x: 1, y: 1, z: 1 } }
+    emits('update','p2')
+}
+
 const getUserInfo = () => {
     http.post(`smart-site/getUserInfo`)
         .then(response => {
@@ -58,8 +79,9 @@ const getUserInfo = () => {
         })
         .catch(() => {})
 }
-const onLogout = ()=>[
-    http.post(`smart-site/fdLogout`)
+const onLogout = () => [
+    http
+        .post(`smart-site/fdLogout`)
         .then(response => {
             if (response.success) {
                 localStorage.removeItem('token')
@@ -69,21 +91,24 @@ const onLogout = ()=>[
                 user.value = null
             }
         })
-        .catch(() => {})
-    
+        .catch(() => {}),
 ]
-const onCancel = () =>{
-    window.location.href = window.location.href.replace('&adjust','')
+const onCancel = () => {
+    window.location.href = window.location.href.replace('&adjust', '')
 }
-const onSubmit =()=>{
-    http.post(`smart-site/fdLogout`)
+const onSubmit = () => {
+    http.post(`smart-site/project/updatePanos`, {
+        projet_id: props.project.projectId,
+        panos: JSON.stringify(points.value),
+    })
         .then(response => {
             if (response.success) {
-                window.location.href = window.location.href.replace('&adjust','&split')
+                window.location.href = window.location.href.replace('&adjust', '&split')
             }
         })
         .catch(() => {})
 }
+
 onMounted(() => {
     if (localStorage.getItem('token')) {
         getUserInfo()
@@ -106,6 +131,48 @@ header {
     align-items: center;
     font-size: 16px;
 }
+footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 90px;
+    color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(4px);
+    background: rgba(27, 27, 28, 0.8);
+    z-index: 99999;
+    padding: 20px 24px;
+    h4 {
+        font-size: 20px;
+        margin: 0;
+        padding: 0;
+        color: #fff;
+        margin-bottom: 14px;
+    }
+    .points {
+        position: absolute;
+        top: 20px;
+        right: 0;
+        bottom: 20px;
+        display: flex;
+        align-items: center;
+        button {
+            cursor: pointer;
+            outline: none;
+            color: #0076f6;
+            margin-right: 24px;
+            width: 160px;
+            height: 36px;
+            background: transparent;
+            border: 1px solid #0076f6;
+            border-radius: 4px;
+            &.active {
+                background: #0076f6;
+                color: #fff;
+            }
+        }
+    }
+}
 .user {
     position: absolute;
     top: 0;
@@ -155,8 +222,8 @@ header {
             border-width: 0 0 5px 5px;
             border-style: solid;
         }
-        &:hover{
-            .menu{
+        &:hover {
+            .menu {
                 display: block;
             }
         }
@@ -187,13 +254,13 @@ header {
                 border-radius: 4px;
                 box-shadow: 0 0 4px #333;
                 padding: 0 15px;
-                margin-top: 15px
+                margin-top: 15px;
             }
             li {
                 height: 45px;
                 line-height: 45px;
                 text-align: center;
-                &.split{
+                &.split {
                     width: 100%;
                     height: 1px;
                     background-color: rgba(255, 255, 255, 0.16);
@@ -202,25 +269,31 @@ header {
         }
     }
 }
-.sync{
+.sync {
     position: absolute;
     right: 0;
     top: 0;
     height: 100%;
     display: flex;
     align-items: center;
-    button{
+    button {
         cursor: pointer;
         width: 90px;
         height: 35px;
-        background:#313131 ;
+        background: #313131;
         color: #fff;
         border: none;
         outline: none;
         border-radius: 4px;
         margin-right: 10px;
-        &[type=submit]{
-            background: #0076F6;
+        &[type='submit'] {
+            background: #0076f6;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+        &[type='submit'].active {
+            opacity: 1;
+            pointer-events: all;
         }
     }
 }

src/pages/Viewer.vue

@@ -1,5 +1,5 @@
 <template>
-    <AppHeader v-show="!fscChecked" :project="project" :show-adjust="showAdjust" />
+    <AppHeader v-show="!fscChecked" :project="project" :show-adjust="showAdjust" @update="onPointsUpdate" />
     <article>
         <main>
             <div class="split" v-if="source">
@@ -13,6 +13,16 @@
                         <div class="iconfont icon-show_plane" :class="{ active: mode == 1 }" @click="onModeChange(1)"></div>
                     </div>
                 </div>
+                <div class="points" v-if="showAdjust">
+                    <div :class="{active:points.p1}">
+                        <i class="iconfont" :class="[points.p1?'icon-positioning01':'icon-positioning02']"></i>
+                        <span>P1</span>
+                    </div>
+                    <div :class="{active:points.p2}">
+                        <i class="iconfont" :class="[points.p2?'icon-positioning01':'icon-positioning02']"></i>
+                        <span>P2</span>
+                    </div>
+                </div>
             </div>
             <div class="split" v-if="target">
                 <iframe ref="targetFrame" :src="targetURL" frameborder="0" @load="onLoadTarget"></iframe>
@@ -21,6 +31,16 @@
                         <calendar name="target" :value="targetDate" :highlighted="targetDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
                     </div>
                 </div>
+                <div class="points" v-if="showAdjust">
+                    <div :class="{active:points.p1}">
+                        <i class="iconfont" :class="[points.p1?'icon-positioning01':'icon-positioning02']"></i>
+                        <span>P1</span>
+                    </div>
+                    <div :class="{active:points.p2}">
+                        <i class="iconfont" :class="[points.p2?'icon-positioning01':'icon-positioning02']"></i>
+                        <span>P2</span>
+                    </div>
+                </div>
             </div>
             <div class="model">
                 <div class="bim" :class="{ active: bimChecked }" v-show="!fscChecked">
@@ -40,7 +60,6 @@
             </div>
         </main>
     </article>
-    <AppFooter v-if="showAdjust" />
 </template>
 
 <script setup>
@@ -48,7 +67,6 @@ import { ref, onMounted, computed, nextTick } from 'vue'
 import { http } from '@/utils/request'
 import browser from '@/utils/browser'
 import AppHeader from '@/components/header'
-import AppFooter from '@/components/footer'
 import Calendar from '@/components/calendar'
 import sync, { loadSourceScene, loadTargetScene } from '@/utils/sync'
 
@@ -69,7 +87,7 @@ const mode = ref(0)
 const source = ref(null)
 const target = ref(null)
 const project = ref(null)
-
+const points = ref({p1:false,p2:false})
 
 const scenes = computed(() => {
     if (!project.value) {
@@ -154,7 +172,6 @@ const targetDays = computed(() => {
     }
 })
 
-
 const onLoadSource = () => {
     if (bimChecked.value && !dbsChecked.value) {
         // BIM单屏模式
@@ -351,6 +368,10 @@ const onFscChecked = () => {
     }
 }
 
+const onPointsUpdate = type =>{
+    points.value[type] = true
+}
+
 onMounted(() => {
     const projectId = browser.valueFromUrl('projectId') || 1
     http.get(`smart-site/project/info?projectId=${projectId}`)
@@ -433,6 +454,40 @@ main {
         &:last-child {
             margin-left: 0;
         }
+
+        .points {
+            position: absolute;
+            left: 50%;
+            top: 64px;
+            z-index: 9999;
+            display: flex;
+            transform: translateX(-50%);
+
+            div {
+                margin-left: 20px;
+                width: 70px;
+                height: 88px;
+                background: rgba(27, 27, 28, 0.8);
+                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1);
+                border-radius: 8px 8px 8px 8px;
+                opacity: 1;
+                border: 1px solid #000000;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                &.active{
+                    color: #0076f6;
+                }
+                i {
+                    font-size: 24px;
+                }
+                span {
+                    font-size: 16px;
+                    margin-top: 10px;
+                }
+            }
+        }
     }
     .model {
         position: absolute;