外汇日历表页,横屏设置

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@fullcalendar/core": "^5.10.1",
     "@fullcalendar/interaction": "^5.10.1",
+    "@fullcalendar/daygrid": "^5.10.1",
     "@fullcalendar/timegrid": "^5.10.1",
     "@fullcalendar/vue3": "^5.10.1",
     "@vant/touch-emulator": "^1.3.2",

src/router/hzyb/index.js

@@ -67,5 +67,28 @@ export const hzybRoutes=[
                 component:() => import("@/views/hzyb/report/PreviewPDF.vue")
             }
         ]
+    },
+    //外汇日历模块
+    {
+        path:'/hzyb/forex',
+        name:'hzybForex',
+        component:()=>import("@/App.vue"),
+        children:[
+            {
+                path:'transindex', //iframe嵌套页
+                name:'hzybTransForexIndex',
+                component:()=> import("@/views/hzyb/forexCalendar/transIndex.vue")
+            },
+            {
+                path:'index', //日历页面
+                name:'hzybForexIndex',
+                component:()=> import("@/views/hzyb/forexCalendar/Index.vue")
+            },
+            {
+                path:'detail', //图表详情页
+                name:'hzybForexDetail',
+                component:()=> import("@/views/hzyb/forexCalendar/Detail.vue")
+            }
+        ]
     }
 ]

src/views/hzyb/forexCalendar/Detail.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        外汇日历详情
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/hzyb/forexCalendar/Index.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import {Popup,DatetimePicker,TreeSelect } from 'vant'
+import BaseCalendar from './components/BaseCalendar.vue'
+let baseCalendarRef = ref(null)
+function dateClick(info){
+    //页面旋转后失效
+    console.log('dateClick',info)
+}
+function eventClick(info){
+    console.log('eventClick',info)
+}
+function handleClick(e){
+    console.log('eeee',e)
+}
+let currentDate = ref(null)
+let datePickShow = ref(false)
+function dateSelectPick(){
+    console.log('日期点击')
+    datePickShow.value = true
+}
+let typePickShow = ref(false)
+let activeId = ref(0)
+let activeIndex = ref(0)
+let items = ref([
+    {
+        text:'宏观经济',
+        children:[
+            {text:'利率债',id:1},
+            {text:'汇率',id:2},
+        ]
+    }
+])
+function typeSelectPick(){
+    console.log('列表点击')
+    typePickShow.value = true
+}
+
+</script>
+
+<template>
+    <div class="forex-calendar-wrap" @click="handleClick">
+        <div class="calendar-header">
+            <span @click.stop="dateSelectPick">日期</span>
+            <span @click.stop="typeSelectPick">列表</span>
+        </div>
+        <BaseCalendar 
+            ref="baseCalendarRef"
+            @dateClick="dateClick"
+            @eventClick="eventClick"
+        ></BaseCalendar>
+        <Popup v-model:show="datePickShow" position="bottom">
+            <DatetimePicker
+                v-model="currentDate"
+                title="选择日期"
+                :columns-type="['year','month']"
+                />
+        </Popup>
+        <Popup v-model:show="typePickShow" position="bottom">
+            <TreeSelect
+                v-model:active-id="activeId"
+                v-model:main-active-index="activeIndex"
+                :items="items"
+            />
+        </Popup>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.forex-calendar-wrap{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left:0;
+    right:0;
+    top:0;
+    bottom:0;
+    .calendar-header{
+        font-size: 16px;
+    }
+}
+</style>

src/views/hzyb/forexCalendar/components/BaseCalendar.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+
+import '@fullcalendar/core/vdom'; // solve problem with Vite
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+
+const props = defineProps({
+    showMark:{
+        type:Boolean,
+        default:true
+    },
+    markText:{
+        type:Object,
+        default:{
+            date:'当前日期',
+            type:'当前品种'
+        }
+    },
+
+})
+const emit = defineEmits(["dateClick","eventClick"])
+let FullCalendarRef = ref(null)
+let calendarApi = ref(null)
+let calendarOptions = ref({
+    height:'100%',
+    locale: "zh-cn",
+    plugins: [ dayGridPlugin, interactionPlugin ],
+    initialView:'dayGridMonth',
+    headerToolbar:false,//不显示头部信息
+    weekNumberCalculation:'ISO',//从周一开始
+    dayHeaderFormat:{ //https://fullcalendar.io/docs/v5/date-formatting
+        weekday:'narrow', //头部星期显示为一 二 三...
+    },
+    dayCellContent:function(arg){ //单元格日期显示为 1 2 3...
+        return arg.date.getDate()
+    },
+    events:[{
+        id:1,
+        title:'我是默认事件', //事件名称
+        start:'2024-03-26',//日期,默认是全天事件
+        textColor:'#000',//字体颜色
+        backgroundColor:'#ffc0cb',//背景色
+        borderColor:'#ffc0cb',//边框色
+        /* extendedProps */
+        isTextBold:true,//是否加粗
+        isEdb:0,//是否为指标 0否 1指标库指标 2预测指标库指标
+        edbId:0,//指标id/code
+
+    },{
+        id:2,
+        title:'我是默认事件2名字很长很长', //事件名称
+        start:'2024-03-26',//日期,默认是全天事件
+        textColor:'#000',//字体颜色
+        backgroundColor:'#ffc0cb',//背景色
+        borderColor:'#ffc0cb',//边框色
+        /* extendedProps */
+        isTextBold:true,//是否加粗
+        isEdb:0,//是否为指标 0否 1指标库指标 2预测指标库指标
+        edbId:0,//指标id/code
+
+    },],
+    dateClick:handleDateClick,
+    eventClick:handleEventClick
+})
+function handleDateClick(info){
+    emit("dateClick",info)
+}
+function handleEventClick(info){
+    emit("eventClick",info)
+}
+
+onMounted(()=>{
+    calendarApi.value = FullCalendarRef.value.getApi()
+    console.log('FullCalendarRef',FullCalendarRef.value)
+
+})
+defineExpose({ calendarApi });
+</script>
+
+<template>
+    <div class="base-calendar-wrap">
+        <FullCalendar :options="calendarOptions" ref="FullCalendarRef" class="full-calendar-wrap">
+            <template #eventContent="arg">
+                <div class="popper-content"
+                    :style="{fontWeight:arg.event.extendedProps.isTextBold?'bold':'normal'}"
+                >
+                   {{arg.event.title||''}}
+                </div>
+            </template>
+        </FullCalendar>
+        <div class="water-mark" v-if="showMark">
+            <p>{{ markText.date }}</p>
+            <p>{{ markText.type }}</p>
+        </div>
+    </div>
+    
+</template>
+
+<style scoped lang="scss">
+.base-calendar-wrap{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position:relative;
+    .full-calendar-wrap{
+        flex: 1;
+        :deep(.fc-daygrid-day-top){ //日期偏左显示
+            flex-direction: row;
+        }
+        :deep(.fc-daygrid-event){
+            border-radius: 0;
+            margin:0 !important;
+        }
+        /* :deep(.fc-col-header){
+            width:100% !important;
+        }
+        :deep(.fc-daygrid-body){
+            width:100% !important;
+        }
+        :deep(.fc-scrollgrid-sync-table){
+            width:100% !important;
+        } */
+        :deep(.fc-daygrid-day-number){
+            font-size: 14px;
+        }
+        :deep(.fc-scrollgrid-sync-inner){
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+        }
+        :deep(.fc-daygrid-day-frame.fc-scrollgrid-sync-inner){
+            display: block;
+        }
+        :deep(.fc-col-header-cell-cushion ){
+            font-size: 14px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        :deep(.fc-scroller){
+            overflow:auto !important; //x,y轴在横屏情况下会对调,默认可滚动
+            &::-webkit-scrollbar{
+                width: 0;
+            }
+        }
+        :deep(.fc-daygrid-day-events){
+            min-height: 1em !important;
+            margin-top: 0 !important;
+        }
+        .popper-content{
+            font-size: 12px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .water-mark{
+        position: absolute;
+        top:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 64px;
+        opacity: 0.3;
+        p{
+            margin:0;
+            padding:0;
+        }
+    }
+}
+</style>

src/views/hzyb/forexCalendar/transIndex.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+//强制横屏
+const forceLandscape = (id = '.iframe-class') => {
+  const handler = () => {
+    let width = document.documentElement.clientWidth;
+    let height = document.documentElement.clientHeight;
+    let targetDom = document.querySelector(id);
+    if (!targetDom) return;
+    console.log('width?',width,'height?',height)
+    if (width > height) {
+      targetDom.style.position = 'absolute';
+      targetDom.style.width = `${width}px`;
+      targetDom.style.height = `${height}px`;
+      targetDom.style.left = `${0}px`;
+      targetDom.style.top = `${0}px`;
+      targetDom.style.transform = 'none';
+      targetDom.style.transformOrigin = '50% 50%';
+    } else {
+      targetDom.style.position = 'absolute';
+      targetDom.style.width = `${height}px`;
+      targetDom.style.height = `${width}px`;
+      targetDom.style.left = `${0 - (height - width) / 2}px`;
+      targetDom.style.top = `${(height - width) / 2}px`;
+      targetDom.style.transform = 'rotate(90deg)';
+      targetDom.style.transformOrigin = '50% 50%';
+    }
+  };
+
+  const handleResize = () => {
+    setTimeout(() => {
+      handler();
+    }, 300);
+  };
+
+  window.addEventListener('resize', handleResize);
+
+  handler();
+};
+onMounted(()=>{
+    forceLandscape()
+})
+</script>
+
+<template>
+    <!-- 直接将旋转作用在Index.vue上会导致日历插件dateClick不触发,vant组件滑动手势x,y轴相反 -->
+    <!-- 包一层,iframe为可替换元素,内部元素不受父级样式影响,但overflow-x,overflow-y判断会对调 -->
+    <iframe src="http://192.168.77.18:3000/xcx_h5/hzyb/forex/index" class="iframe-class"></iframe>
+</template>
+
+<style scoped lang="scss">
+.iframe-class{
+    border:0;
+}
+</style>