feat: 移动端

src/components/calendar/mobile.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="calendar-list" v-if="showCalendar" @click="showCalendar = false">
         <div @click.stop>
-            <van-datetime-picker v-model="props.value" type="date" title="选择时间" confirm-button-text="确定" />
+            <van-datetime-picker v-model="props.value" type="date" title="选择时间" confirm-button-text="确定" :filter="onFilter" :formatter="onFormatter" @confirm="onConfirm" @cancel="onCancel" />
         </div>
     </div>
 </template>
@@ -14,9 +14,9 @@
 import { ref, defineProps, computed } from 'vue'
 const props = defineProps({
     value: Date,
-    highlighted: Object,
+    highlighted: Array,
 })
-const emits = defineEmits(['prev', 'selected', 'next', 'pick'])
+const emits = defineEmits(['prev', 'selected', 'next'])
 const date = computed(() => {
     if (!props.value) {
         return ''
@@ -27,11 +27,37 @@ const showCalendar = ref(false)
 
 const onPickDate = () => {
     showCalendar.value = !showCalendar.value
-    if (showCalendar.value) {
-        emits('pick')
+}
+const onFormatter = (type, val) => {
+    if (type === 'year') {
+        return `${val}年`
+    }
+    if (type === 'month') {
+        return `${val}月`
+    }
+    if (type === 'day') {
+        return `${val}日`
+    }
+    return val
+}
+const onFilter = (type, options)=>{
+    const days = props.highlighted
+    if(!days.year.length){
+        return options
+    }
+    if(type == 'year') {
+        return days.year
+    }else if(type == 'month'){
+        return days.month
+    } else if(type == 'day'){
+        return days.day
     }
+    return options
+}
+const onCancel = ()=>{
+    showCalendar.value = false
 }
-const onSelected = payload => {
+const onConfirm = payload=>{
     emits('selected', { payload })
     showCalendar.value = false
 }
@@ -73,6 +99,7 @@ const onSelected = payload => {
     bottom: 0;
     height: 100vh;
     z-index: 1000;
+    background: rgba(0,0,0,0.5);
     display: flex;
     align-items: flex-end;
     justify-content: center;

src/components/header/index.vue

@@ -18,7 +18,7 @@
                     <img :src="user.head + '&x-oss-process=image/resize,m_fill,w_64,h_64/quality,q_70'" alt="" />
                     <div class="menu">
                         <ul>
-                            <li><a href="/">个人信息</a></li>
+                            <li><a href="/smarts">个人信息</a></li>
                             <li class="split"></li>
                             <li><a href="javascript:;" @click="onLogout">退出登录</a></li>
                         </ul>

src/pages/SViewer.vue

@@ -1,16 +1,22 @@
 <template>
-    <main>
-        <iframe v-if="source" :src="sourceURL" frameborder="0"></iframe>
+    <main v-if="source">
+        <iframe ref="sourceFrame" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
+        <div class="model" v-show="!showAdjust">
+            <div class="bim" :class="{ active: bimChecked, disable: project && !project.bimData }">
+                <div @click="onBimChecked">
+                    <i class="iconfont icon-BIM"></i>
+                </div>
+            </div>
+        </div>
         <div class="tools" v-show="!bimChecked">
             <div class="item-date">
-                <Calendar :value="sourceDate" />
+                <Calendar :value="sourceDate" :highlighted="sourceDays" @selected="onSelected" @prev="onPrevDate" @next="onNextDate" />
             </div>
-            <!-- <div class="item-mode" v-if="source.type == 2">
+            <div class="item-mode" v-if="source.type == 2">
                 <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>
         </div>
-        <!-- <van-datetime-picker v-model="sourceDate" :filter="onFilter" :formatter="onFormatter" type="date" title="选择时间" confirm-button-text="确定" /> -->
     </main>
 </template>
 
@@ -22,17 +28,11 @@ import Calendar from '@/components/calendar/mobile.vue'
 import sync, { loadSourceScene, loadTargetScene } from '@/utils/sync'
 
 const bimChecked = ref(null)
-
-const datepickName = ref(null)
-
 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: false, p2: false })
 
 const scenes = computed(() => {
     if (!project.value) {
@@ -48,7 +48,7 @@ const scenes = computed(() => {
 })
 const sourceURL = computed(() => {
     if (bimChecked.value) {
-        return `smart-bim.html?m=${source.value.num}`
+        return `smart-bim.html?m=${project.value.bimData.bimOssFilePath}`
     }
 
     if (source.value.type < 2) {
@@ -67,131 +67,61 @@ const sourceDate = computed(() => {
 })
 
 const sourceDays = computed(() => {
-    let dates = []
-    if (datepickName.value == 'source') {
-        if (dbsChecked.value) {
-            // 分屏模式
-            if (bimChecked.value) {
-                // BIM模式
-                dates = scenes.value.map(item => item.createTime.toDate())
-            } else {
-                // 非BIM模式
-                dates = scenes.value.filter(item => item.createTime != target.value.createTime).map(item => item.createTime.toDate())
-            }
-        } else {
-            // 非分屏模式
-            dates = scenes.value.map(item => item.createTime.toDate())
-        }
-    }
-    return {
-        dates: dates,
+    const outDays = { year: [], month: [], day: [] }
+    if (!scenes.value) {
+        return outDays
     }
-})
+    const inDays = scenes.value.map(item => item.createTime.split(' ')[0].split('-'))
 
-const onFilter = (type, options) => {
-    console.log(type, options)
-    return options
-}
-const onFormatter = (type, val) => {
-    if (type === 'year') {
-        return `${val}年`
-    }
-    if (type === 'month') {
-        return `${val}月`
-    }
-    if (type === 'day') {
-        return `${val}日`
-    }
-    return val
-}
-
-const onLoadSource = () => {
-    if (bimChecked.value && !dbsChecked.value) {
-        // BIM单屏模式
-        return
-    }
+    inDays.forEach(item => {
+        const [year, month, day] = item
+        if (outDays.year.indexOf(year) == -1) {
+            outDays.year.push(year)
+        }
+        if (outDays.month.indexOf(month) == -1) {
+            outDays.month.push(month)
+        }
+        if (outDays.day.indexOf(day) == -1) {
+            outDays.day.push(day)
+        }
+    })
 
-    loadSourceScene(sourceFrame, source.value.type < 2 ? 'kankan' : 'laser')
-}
+    return outDays
+})
 
 const onModeChange = targetMode => {
-    if (sync.sourceInst) {
-        sync.sourceInst.loaded.then(sdk => sdk.scene.changeMode(targetMode))
+    if (sourceFrame.value && sourceFrame.value.contentWindow.loaded) {
+        sourceFrame.value.contentWindow.loaded.then(sdk => sdk.scene.changeMode(targetMode))
         mode.value = targetMode
     }
 }
-const onPickDate = name => {
-    datepickName.value = name
-}
 
 const onSelected = data => {
     if (!data.payload) {
         return
     }
-    let { name, payload } = data
-    let date = payload.format('YYYY-mm-dd')
-    let dates = (name == 'source' ? sourceDays : targetDays).value.dates.map(item => item.format('YYYY-mm-dd'))
-
-    if (dates.indexOf(date) != -1) {
-        let time = payload.format('YYYY-mm-dd HH:MM')
-        let find = scenes.value.find(c => c.createTime.indexOf(time) != -1)
-        if (find) {
-            if (name == 'source') {
-                if (find.num != source.value.num) {
-                    source.value = find
-                }
-            } else {
-                if (find.num != target.value.num) {
-                    target.value = find
-                }
-            }
+    let { payload } = data
+    let time = payload.format('YYYY-mm-dd')
+    let find = scenes.value.find(c => c.createTime.indexOf(time) != -1)
+    if (find) {
+        if (find.num != source.value.num) {
+            source.value = find
         }
     }
-
-    datepickName.value = null
 }
 
 const onPrevDate = name => {
-    let scene = null
-    if (name == 'source') {
-        scene = source
-    } else {
-        scene = target
-    }
-    let index = scenes.value.findIndex(item => item.num == scene.value.num)
+    let index = scenes.value.findIndex(item => item.num == source.value.num)
     if (index == -1) {
         return
     }
     if (--index == -1) {
         index = scenes.value.length - 1
     }
-
-    if (target.value) {
-        // 分屏模式判断
-        if (name == 'source') {
-            if (scenes.value[index].createTime == target.value.createTime) {
-                index--
-            }
-        } else {
-            if (scenes.value[index].createTime == source.value.createTime) {
-                index--
-            }
-        }
-        if (index == -1) {
-            index = scenes.value.length - 1
-        }
-    }
-
-    scene.value = scenes.value[index]
+    source.value = scenes.value[index]
 }
 const onNextDate = name => {
-    let scene = null
-    if (name == 'source') {
-        scene = source
-    } else {
-        scene = target
-    }
-    let index = scenes.value.findIndex(item => item.num == scene.value.num)
+    let index = scenes.value.findIndex(item => item.num == source.value.num)
     if (index == -1) {
         return
     }
@@ -199,24 +129,7 @@ const onNextDate = name => {
         index = 0
     }
 
-    if (target.value) {
-        // 分屏模式判断
-        if (name == 'source') {
-            if (scenes.value[index].createTime == target.value.createTime) {
-                index++
-            }
-        } else {
-            if (scenes.value[index].createTime == source.value.createTime) {
-                index++
-            }
-        }
-
-        if (index > scenes.value.length - 1) {
-            index = 0
-        }
-    }
-
-    scene.value = scenes.value[index]
+    source.value = scenes.value[index]
 }
 
 // bim点击
@@ -294,6 +207,47 @@ main {
             }
         }
     }
+
+    .model {
+        position: absolute;
+        left: 15px;
+        top: 20px;
+        z-index: 1000;
+        display: flex;
+        flex-direction: column;
+        > div {
+            cursor: pointer;
+            width: 50px;
+            height: 50px;
+            margin-top: 16px;
+            background: rgba(27, 27, 28, 0.8);
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+            border-radius: 47px 47px 47px 47px;
+            border: 1px solid #000000;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            > div {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            }
+            &.active {
+                color: #0076f6;
+            }
+            &.disable {
+                opacity: 0.5;
+            }
+            i{
+                font-size:20px
+            }
+        }
+    }
 }
 </style>
 <style lang="scss">
@@ -302,28 +256,4 @@ main {
     display: flex;
     flex-direction: column;
 }
-:root {
-    --van-gray-8: rgba(255, 255, 255, 0.3);
-    --van-picker-background-color: rgba(0, 0, 0, 0.5);
-}
-// .van-picker {
-//     position: absolute;
-//     left: 0;
-//     right: 0;
-//     bottom: 0;
-// }
-.van-picker__mask {
-    display: none;
-}
-.van-picker__toolbar {
-    button {
-        font-size: 16px !important;
-        &.van-picker__confirm {
-            color: #0076f6;
-        }
-    }
-}
-.van-picker-column__item--selected {
-    color: #fff;
-}
 </style>