feat: 交互

src/components/calendar/index.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="calendar">
-        <span class="prev" @click="emits('prev',props.name)"><i class="iconfont icon-arrows_left"></i></span>
+        <span class="prev" @click="emits('prev', props.name)"><i class="iconfont icon-arrows_left"></i></span>
         <span class="cale" @click="onPickDate()">{{ value.format('YYYY-mm-dd') }}<i class="iconfont icon-date"></i></span>
-        <span class="next" @click="emits('next',props.name)"><i class="iconfont icon-arrows_right"></i></span>
+        <span class="next" @click="emits('next', props.name)"><i class="iconfont icon-arrows_right"></i></span>
         <div class="calendar-list" v-if="showCalendar" @click="showCalendar = false">
             <div @click.stop>
-                <datepicker language="zh" :inline="true" :value="value" :highlighted="highlighted" @selected="(...args) => emits('selected', {name:props.name,...args})"></datepicker>
+                <datepicker language="zh" :inline="true" :value="value" :highlighted="highlighted" @selected="onSelected"></datepicker>
             </div>
         </div>
     </div>
@@ -14,17 +14,21 @@
 import { ref, defineProps } from 'vue'
 import Datepicker from '@/components/datepicker/Datepicker'
 const props = defineProps({
-    name:String,
+    name: String,
     value: Date,
     highlighted: Object,
 })
-const emits = defineEmits(['prev', 'selected', 'next'])
-
+const emits = defineEmits(['prev', 'selected', 'next', 'pick'])
 const showCalendar = ref(false)
-const onPrevDate = () => {}
-const onNextDate = () => {}
 const onPickDate = () => {
     showCalendar.value = !showCalendar.value
+    if (showCalendar.value) {
+        emits('pick', props.name)
+    }
+}
+const onSelected =(payload)=>{
+    emits('selected', { name: props.name, payload })
+    showCalendar.value = false
 }
 </script>
 <style lang="scss" scoped>
@@ -60,8 +64,8 @@ const onPickDate = () => {
 .calendar-list {
     position: absolute;
     left: 0;
+    right: 0;
     bottom: 0;
-    width: 100vw;
     height: 100vh;
     z-index: 1000;
     display: flex;

src/components/datepicker/PickerDay.vue

@@ -305,6 +305,27 @@ export default defineComponent({
             }
             return highlighted;
         }
+
+        function getHighlightedDate(date) {
+            const h = props.highlighted;
+            if (!(h && h.includeDisabled) && isDisabledDate(date)) {
+                return false;
+            }
+            let datetime = null;
+            if (typeof h === 'undefined') {
+                return false;
+            }
+            if (typeof h.dates !== 'undefined') {
+                h.dates.forEach((d) => {
+                    if (compareDates(date, d)) {
+                        datetime = d;
+                    }
+                });
+            }
+            if(datetime){
+                return datetime
+            }
+        }
         /**
          * Returns Css Classes for a day element
          */
@@ -370,7 +391,7 @@ export default defineComponent({
             const d = props.pageDate;
             const dObj = props.useUtc
                 ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1))
-                : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes());
+                : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes(),d.getSeconds());
             if (props.mondayFirst) {
                 return getDay(dObj) > 0 ? getDay(dObj) - 1 : 6;
             }
@@ -385,12 +406,12 @@ export default defineComponent({
             // set up a new date object to the beginning of the current 'page'
             const dObj = props.useUtc
                 ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1))
-                : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes());
+                : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes(),d.getSeconds());
             const t = daysInMonth(getFullYear(dObj), getMonth(dObj));
             for (let i = 0; i < t; i += 1) {
                 tdays.push({
                     date: getDate(dObj),
-                    timestamp: dObj.getTime(),
+                    timestamp: (getHighlightedDate(dObj) || dObj).getTime(),
                     isSelected: isSelectedDate(dObj),
                     isDisabled: isDisabledDate(dObj),
                     isHighlighted: isHighlightedDate(dObj),

src/pages/LaserBim.vue

@@ -6,28 +6,26 @@
         <main>
             <div class="split" v-if="source">
                 <iframe ref="sourceFrame" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
-                <!-- <div class="tools">
-                    <div class="item-mode">
-                        <div class="iconfont icon-show_roaming_normal" :class="{ active: mode == 0 }" @click="onModeChange(0)"></div>
-                        <div class="iconfont icon-show_more" :class="{ active: mode == 1 }" @click="onModeChange(1)"></div>
-                    </div>
-                </div> -->
-                <div class="tools" v-show="!fscChecked && !bimChecked">
+                <div class="tools" v-show="!fscChecked && (dbsChecked || (!target && !bimChecked)) ">
                     <div class="item-date">
-                        <calendar name="source" :value="sourceDate" :highlighted="highlighted" @selected="onSelected" @prev="onPrevDate" @next="onNextDate"></calendar>
+                        <calendar name="source" :value="sourceDate" :highlighted="sourceDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
+                    </div>
+                    <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>
             <div class="split" v-if="target">
                 <iframe ref="targetFrame" :src="targetURL" frameborder="0" @load="onLoadTarget"></iframe>
                 <div class="tools" v-show="!fscChecked && !bimChecked">
-                    <div class="item-date">
-                        <calendar name="target" :value="targetDate" :highlighted="highlighted" @selected="onSelected" @prev="onPrevDate" @next="onNextDate"></calendar>
+                    <div class="item-date target">
+                        <calendar name="target" :value="targetDate" :highlighted="targetDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
                     </div>
                 </div>
             </div>
             <div class="model">
-                <div class="bim" :class="{ active: bimChecked, disable: true }" v-show="!fscChecked">
+                <div class="bim" :class="{ active: bimChecked }" v-show="!fscChecked">
                     <div @click="onBimChecked">
                         <i class="iconfont icon-BIM"></i>
                         <span>BIM</span>
@@ -53,6 +51,8 @@ import browser from '@/utils/browser'
 import Calendar from '@/components/calendar'
 import ConvertViews from '@/utils/ConvertViews'
 
+const views = new ConvertViews()
+
 let sourceApp = null,
     targetApp = null
 
@@ -60,11 +60,11 @@ const bimChecked = ref(null)
 const dbsChecked = ref(null)
 const fscChecked = ref(null)
 
-const views = new ConvertViews()
 const datepickName = ref(null)
-const datepickValue = ref(null)
+
 const sourceFrame = ref(null)
 const targetFrame = ref(null)
+
 const mode = ref(0)
 const source = ref(null)
 const target = ref(null)
@@ -83,7 +83,7 @@ const scenes = computed(() => {
     })
 })
 const sourceURL = computed(() => {
-    if (bimChecked.value) {
+    if (bimChecked.value && !dbsChecked.value) {
         return `smart-bim.html?m=${source.value.num}`
     }
 
@@ -110,6 +110,7 @@ const targetURL = computed(() => {
 })
 const sourceDate = computed(() => {
     if (source.value) {
+        console.log(source.value.createTime.toDate())
         return source.value.createTime.toDate()
     }
 })
@@ -119,10 +120,33 @@ const targetDate = computed(() => {
         return target.value.createTime.toDate()
     }
 })
-const highlighted = 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 targetDays = computed(() => {
     let dates = []
-    if (datepickName.value) {
-        dates = scenes.map(item => item.createTime.toDate())
+    if (datepickName.value == 'target') {
+        dates = scenes.value.filter(item => item.createTime != source.value.createTime).map(item => item.createTime.toDate())
     }
     return {
         dates: dates,
@@ -184,12 +208,19 @@ const onLoadSource = () => {
     }
 }
 const onLoadTarget = () => {
-    targetApp = targetFrame.value.contentWindow
-
-    targetApp.loaded.then(viewer => {
-        window.viewer2 = targetApp.viewer
-        initConvertView()
-    })
+    // targetApp = targetFrame.value.contentWindow
+    // targetApp.loaded.then(viewer => {
+    //     window.viewer2 = targetApp.viewer
+    //     initConvertView()
+    // })
+    
+    if(bimChecked.value){
+        // BIM 同屏
+    } else if(source.value.type <2){
+        // 四维看看同屏
+    } else{
+        // 激光同屏
+    }
 }
 
 views.addEventListener('sendCameraData', e => {
@@ -205,65 +236,35 @@ const onModeChange = targetMode => {
     }
 }
 const onPickDate = name => {
-    if (name == 'target') {
-        datepickValue.value = target.value.date.toDate()
-    } else {
-        datepickValue.value = source.value.date.toDate()
-    }
     datepickName.value = name
 }
-const onPickClose = () => {
-    datepickName.value = null
-    datepickValue.value = null
-}
-const onSelected = payload => {
-    alert(payload)
-    if (!payload) {
+
+const onSelected = data => {
+    if (!data.payload) {
         return
     }
-
-    var date = payload.format('YYYY-mm-dd')
-    var dates = highlighted.value.dates.map(item => item.format('YYYY-mm-dd'))
+    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) {
-        var find = scenes.find(c => c.date == date)
+        let time = payload.format('YYYY-mm-dd HH:MM')
+        let find = scenes.value.find(c => c.createTime.indexOf(time) != -1)
         if (find) {
-            if (datepickName.value) {
-                if (datepickName.value == 'all' || datepickName.value == 'source') {
-                    if (find.num != source.value.num) {
-                        source.value = find
-                    }
-                } else if (datepickName.value == 'target') {
-                    if (find.num != target.value.num) {
-                        target.value = find
-                    }
-                }
-            } else {
+            if (name == 'source') {
                 if (find.num != source.value.num) {
                     source.value = find
                 }
+            } else {
+                if (find.num != target.value.num) {
+                    target.value = find
+                }
             }
         }
     }
 
     datepickName.value = null
 }
-const onSplit = () => {
-    if (target.value) {
-        target.value = null
-        targetApp = null
-        views.clear()
-        return
-    }
-    let index = scenes.findIndex(item => item.num == source.value.num)
-    if (index == -1) {
-        return
-    }
-    if (++index > scenes.length - 1) {
-        index = 0
-    }
-    target.value = scenes[index]
-}
 
 const onPrevDate = name => {
     let scene = null
@@ -280,6 +281,20 @@ const onPrevDate = name => {
         index = scenes.value.length - 1
     }
 
+    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]
 }
 const onNextDate = name => {
@@ -297,6 +312,20 @@ const onNextDate = name => {
         index = 0
     }
 
+    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]
 }
 
@@ -304,6 +333,16 @@ const onNextDate = name => {
 const onBimChecked = () => {
     if (bimChecked.value) {
         bimChecked.value = false
+        if (dbsChecked.value) { // 判断是否分屏状态
+            let index = scenes.value.findIndex(item => item.num == source.value.num)
+            if (index == -1) {
+                return
+            }
+            if (++index > scenes.value.length - 1) {
+                index = 0
+            }
+            target.value = scenes.value[index]
+        }
     } else {
         bimChecked.value = true
     }
@@ -315,6 +354,8 @@ const onDbsChecked = () => {
     if (dbsChecked.value) {
         if (bimChecked.value) {
             // BIM分屏
+            source.value = scenes.value[0]
+            target.value = project.value.bimData
         } else {
             // 四维看看、激光场景分屏
             let index = scenes.value.findIndex(item => item.num == source.value.num)
@@ -369,7 +410,7 @@ onMounted(() => {
             if (response.success) {
                 project.value = response.data
                 if (project.value.sceneList.length) {
-                    source.value = project.value.sceneList[project.value.sceneList.length - 1]
+                    source.value = project.value.sceneList[0]
                 }
             } else {
                 alert('获取数据失败')
@@ -439,38 +480,15 @@ main {
         height: 100%;
     }
     .split {
+        margin-left: 2px;
         width: 100%;
         height: 100%;
         overflow: hidden;
         position: relative;
-        // .tools {
-        //     width: 100%;
-        //     padding-left: 20px;
-        //     padding-right: 20px;
-        //     justify-content: space-between;
-        //     left: 0;
-        //     transform: none;
-        //     .item-mode {
-        //         display: flex;
-        //         align-items: center;
-        //         justify-content: space-around;
-        //         height: 34px;
-        //         border-radius: 17px;
-        //         background-color: rgba(0, 0, 0, 0.3);
-        //         > div {
-        //             position: relative;
-        //             margin-left: 20px;
-        //             margin-right: 20px;
-        //             cursor: pointer;
-        //             &.active {
-        //                 color: #00c8af;
-        //             }
-        //         }
-        //         i {
-        //             font-size: 18px;
-        //         }
-        //     }
-        // }
+        &:first-child,
+        &:last-child {
+            margin-left: 0;
+        }
     }
     .model {
         position: absolute;
@@ -522,11 +540,40 @@ main {
         position: absolute;
         width: 100%;
         bottom: 40px;
-        z-index: 1000;
+        z-index: 2000;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #fff;
+        pointer-events: none;
+        > div {
+            pointer-events: all;
+        }
+
+        .item-mode {
+            height: 50px;
+            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;
+            justify-content: center;
+            align-items: center;
+            margin-left: 10px;
+            margin-right: 10px;
+            font-size: 16px;
+            padding: 0 16px;
+            div {
+                cursor: pointer;
+                font-size: 18px;
+            }
+            div:last-child {
+                margin-left: 20px;
+            }
+            div.active {
+                color: #0076f6;
+            }
+        }
     }
 }
 </style>

src/pages/laser-bim.js

@@ -1,7 +1,7 @@
 import '../assets/index.scss'
 import { createApp } from 'vue'
 import { setup } from '../utils/request'
-import App from './LaserBim'
+import App from './Viewer.vue'
 
 Date.prototype.format = function(fmt = 'YYYY-mm-dd HH:MM:SS') {
     var res = ''

vue.config.js

@@ -30,7 +30,7 @@ const config = {
     pages: {
         'smart-bim': 'src/pages/bim.js',
         'smart-laser': 'src/pages/laser.js',
-        'smart-laser-bim': 'src/pages/laser-bim.js',
+        'smart-viewer': 'src/pages/viewer.js',
     },
     css: {
         extract: false,