小程序部分，接口联调

src/api/hzyb/forexCalendar.js

@@ -45,4 +45,34 @@ export const apiGetpredictEdbInfo=params=>{
      */
 export const apiGetCalendarEventList = (params)=>{
     return get('/fe_calendar/matter/list',params)
+}
+
+/**
+ * 获取品种列表
+ * @param {*} params 
+ * @returns 
+ */
+export const apiGetPermissionList = (params)=>{
+    return get('/fe_calendar/permission/list',params)
+}
+
+/**
+ * 获取品种最新日历月份
+ * @param {Object} params 
+ * @param {Number} params.chart_permission_id 品种ID
+ * @returns 
+ */
+export const apiGetPermissionNewestDate = (params)=>{
+    return get('/fe_calendar/permission/latest_month',params)
+}
+
+/**
+     * 获取指定日期事项列表
+     * @param {Object} params 
+     * @param {Number} params.chart_permission_id 品种ID
+     * @param {String} params.matter_date "2024-03-29" 指定日期
+     * @returns
+     */
+export const apiGetDailyEventList = (params)=>{
+    return get('/fe_calendar/matter/detail',params)
 }

src/views/hzyb/forexCalendar/Index.vue

@@ -1,67 +1,227 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import {Popup,DatetimePicker,TreeSelect,Icon as VanIcon } from 'vant'
+import {Popup,DatetimePicker,TreeSelect,Icon as VanIcon,Toast } from 'vant'
+import {apiGetPermissionList,apiGetPermissionNewestDate,apiGetCalendarEventList,apiGetDailyEventList}  from '@/api/hzyb/forexCalendar.js'
+import moment from 'moment'
 import BaseCalendar from './components/BaseCalendar.vue'
+
 let baseCalendarRef = ref(null)
+let currentDay = ref('') //选择的日期
 function dateClick(info){
-    console.log('dateClick',info)
+    setEventInfo(info.dateStr)
 }
 function eventClick(info){
-    console.log('eventClick',info)
+    setEventInfo(info.event.startStr)
+}
+//事项列表
+let eventList = ref([])
+let showEventList = ref(false)
+async function setEventInfo(date){
+    if(!permissionValue.value) return Toast('请选择品种!')
+    currentDay.value = date||''
+    //获取当天的日历信息，若有事项，则打开弹窗
+    await getEventsByDay()
+    if(eventList.value.length) showEventList.value = true
 }
-function handleClick(e){
-    console.log('eeee',e)
+async function getEventsByDay(){
+    await apiGetDailyEventList({
+        chart_permission_id:Number(permissionValue.value),
+        matter_date:currentDay.value
+    }).then(res=>{
+        if(res.code!==200){
+            eventList.value=[]
+            return 
+        }
+        eventList.value = res.data||[]
+    })
 }
-let currentDate = ref(null)
+
+let monthValue = ref(null)
 let datePickShow = ref(false)
-function dateSelectPick(){
-    console.log('日期点击')
-    datePickShow.value = true
+function changeMonth(month){
+    const Month = month||new Date()
+    baseCalendarRef.value?.calendarApi.gotoDate(Month)
+    renderCalendar()
 }
+
 let typePickShow = ref(false)
 let activeId = ref(0)
 let activeIndex = ref(0)
-let items = ref([
-    {
-        text:'宏观经济',
-        children:[
-            {text:'利率债',id:1},
-            {text:'汇率',id:2},
-        ]
+let items = ref([]) //vant品种列表
+
+//选择一级品种，没用到
+function clickFirstHandle(index){}
+//选择二级品种
+function clickItemHandle({text,id}){
+    //获取到品种ID
+    if(permissionValue.value===id){
+        typePickShow.value = false
+        return 
     }
-])
-function typeSelectPick(){
-    console.log('列表点击')
-    typePickShow.value = true
+    permissionValue.value = id
+    permissionName.value = text
+    changePermission()
+}
+//获取该品种最新月份
+async function changePermission(){
+    if(!hasAuth.value) return 
+    if(!permissionValue.value) return 
+    await getPermissionNewestMonth()
+}
+async function getPermissionNewestMonth(){
+    //获取最新月份的接口
+    await apiGetPermissionNewestDate({
+        chart_permission_id:Number(permissionValue.value)
+    }).then(res=>{
+        if(res.code!==200) return 
+        monthValue.value = res.data||new Date()
+        changeMonth(monthValue.value)
+    })
 }
 
+//权限控制
+let hasAuth = ref(true)
+let noAuth = ref({
+    type:'',
+    name:'',
+    mobile:'',
+    customer_info:{}
+})
+let permissonList = ref([])
+let permissionValue = ref('') //选中的品种ID
+let permissionName = ref('') //品种名称
+function getPermissionList(){
+    apiGetPermissionList().then(res=>{
+        if(res.code===200){
+            hasAuth.value = true
+            permissonList.value = res.data||[]
+            items.value = permissonList.value.map(p=>{
+                p.text = p.chart_permission_name
+                if(p.children.length){
+                    p.children = p.children.map(c=>{
+                        c.text = c.chart_permission_name
+                        c.id = c.chart_permission_id
+                        return c
+                    })
+                }
+                return p
+            })
+        }else{
+            hasAuth.value = false
+            noAuth.value = res.data
+        }
+    })
+}
+async function renderCalendar(){
+    typePickShow.value = false
+    datePickShow.value = false
+
+    //获取当前日历的起始日期+终止日期,可能会跨月
+    const {activeStart,activeEnd} = baseCalendarRef.value?.calendarApi.view||{}
+    const res = await apiGetCalendarEventList({
+        chart_permission_id:Number(permissionValue.value),
+        start_date:moment(activeStart).format('YYYY-MM-DD'),
+        end_date:moment(activeEnd).subtract(1, 'days').format('YYYY-MM-DD'), //activeEnd到最后一天的24：00会被认为是第二天，所以取前一天
+    })
+    if(res.code!==200) return 
+    const allEventSource = baseCalendarRef.value?.calendarApi.getEventSources()||[]
+    //先清空所有eventSource，再添加
+    allEventSource.forEach(es=>es.remove())
+    //将日历表每天的事件作为一个eventSource
+    const eventList = (res.data?res.data:[]).map(dailyEvents=>{
+        const eventSource = { id:dailyEvents.Date,events:[]}
+        eventSource.events = dailyEvents.matters.map(e=>{
+            return {
+                ...e,
+                start:e.matter_date,
+                title:e.title,
+                textColor:e.font_color||'#000',
+                backgroundColor:e.filling_color||'#fff',
+                borderColor:e.filling_color||'#fff',
+            }
+        })
+        return eventSource
+    })
+    eventList.forEach(es=>{
+        baseCalendarRef.value?.calendarApi.addEventSource(es)
+    })
+}
+//跳转事项详情
+function handleClickEvent(item){
+    if(item.matter_type===1) return Toast("该事项未关联指标")
+    const {activeStart,activeEnd} = baseCalendarRef.value?.calendarApi.view||{}
+    //信息传到transIndex,在transIndex跳转
+    window.parent.postMessage({
+        path:'/hzyb/forex/detail',
+        query:{
+            startDate:moment(activeStart).format('YYYY-MM-DD'),
+            endDate:moment(activeEnd).subtract(1, 'days').format('YYYY-MM-DD'),
+            edbInfoId:item.edb_info_id,
+            permissionId:permissionValue.value,
+            token:localStorage.getItem('hzyb-token')||''
+        }
+    },'*')
+    showEventList.value = false
+}
+onMounted(()=>{
+    monthValue.value = new Date()
+    getPermissionList()
+})
 </script>
 
 <template>
-    <div class="forex-calendar-wrap" @click="handleClick">
+    <div class="forex-calendar-wrap">
         <div class="calendar-header">
-            <span @click.stop="dateSelectPick"><img src="@/assets/hzyb/chart/calendar.png">选择日期</span>
-            <span @click.stop="typeSelectPick"><van-icon name="bars" color="#E3B377" size="16"/>其他品种</span>
+            <span @click.stop="datePickShow = true"><img src="@/assets/hzyb/chart/calendar.png">选择日期</span>
+            <span @click.stop="typePickShow = true"><van-icon name="bars" color="#E3B377" size="16"/>其他品种</span>
         </div>
         <BaseCalendar 
             ref="baseCalendarRef"
+            :markText="{date:monthValue,type:permissionName||'请选择品种'}"
             @dateClick="dateClick"
             @eventClick="eventClick"
         ></BaseCalendar>
+        <!-- 选择日期 -->
         <Popup v-model:show="datePickShow" position="bottom">
             <DatetimePicker
-                v-model="currentDate"
+                v-model="monthValue"
                 title="选择日期"
-                :columns-type="['year','month']"
-                />
+                type="year-month"
+                :formatter="(type, val)=>{
+                    if (type === 'year') {
+                        return `${val}年`;
+                    } else if (type === 'month') {
+                        return `${val}月`;
+                    }
+                    return val;
+                }"
+                @confirm="changeMonth"
+                @cancel="datePickShow = false"
+            />
         </Popup>
+        <!-- 选择品种 -->
         <Popup v-model:show="typePickShow" position="bottom">
+            <!-- <div class="select-header">
+                <span class="cancel" @click="typePickShow=false">取消</span>
+                <span class="ensure" @click="changeType">确认</span>
+            </div> -->
             <TreeSelect
                 v-model:active-id="activeId"
                 v-model:main-active-index="activeIndex"
                 :items="items"
+                @click-nav="clickFirstHandle" 
+                @click-item="clickItemHandle" 
             />
         </Popup>
+        <Popup v-model:show="showEventList" position="bottom" :style="{ height: '30%' }">
+            <div class="event-list-wrap">
+                <ul class="event-list">
+                    <li class="event-item" v-for="(item,index) in eventList" :key="index" @click="handleClickEvent(item)">
+                        {{item.title}}
+                    </li>
+                </ul>
+            </div>
+        </Popup>
     </div>
 </template>
 
@@ -96,5 +256,39 @@ function typeSelectPick(){
             }
         }
     }
+    .select-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--van-picker-action-padding);
+        font-size: var(--van-picker-action-font-size);
+        height: var(--van-picker-toolbar-height);
+        .cancel {
+            color: #969799;
+        }
+        .ensure {
+            color: #576b95;
+        }
+    }
+    .van-tree-select {
+        ::v-deep(.van-sidebar-item--select:before) {
+            background-color: #E3B377;
+        }
+
+        ::v-deep(.van-tree-select__item--active) {
+            color: #E3B377;
+        }
+
+        ::v-deep(.van-tree-select__selected) {
+            position: absolute !important;
+        }
+    }
+    .event-list-wrap{
+        font-size: var(--van-picker-action-font-size);
+        padding: var(--van-padding-md);
+        .event-item{
+            margin-bottom: var(--van-padding-md);
+        }
+    }
 }
 </style>

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

@@ -5,6 +5,7 @@ import '@fullcalendar/core/vdom'; // solve problem with Vite
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
+import moment from 'moment'
 
 const props = defineProps({
     showMark:{
@@ -14,7 +15,7 @@ const props = defineProps({
     markText:{
         type:Object,
         default:{
-            date:'当前日期',
+            date:'2024-04',
             type:'当前品种'
         }
     },
@@ -36,31 +37,6 @@ let calendarOptions = ref({
     dayCellContent:function(arg){ //单元格日期显示为 1 2 3...
         return arg.date.getDate()
     },
-    events:[{
-        id:1,
-        title:'RAG Storage Pool', //事件名称
-        start:'2024-04-01',//日期,默认是全天事件
-        textColor:'#000',//字体颜色
-        backgroundColor:'#ffc0cb',//背景色
-        borderColor:'#ffc0cb',//边框色
-        /* extendedProps */
-        isTextBold:true,//是否加粗
-        isEdb:0,//是否为指标 0否 1指标库指标 2预测指标库指标
-        edbId:0,//指标id/code
-
-    },{
-        id:2,
-        title:'我是默认事件2名字很长很长', //事件名称
-        start:'2024-0-02',//日期,默认是全天事件
-        textColor:'#000',//字体颜色
-        backgroundColor:'#ffc0cb',//背景色
-        borderColor:'#ffc0cb',//边框色
-        /* extendedProps */
-        isTextBold:true,//是否加粗
-        isEdb:0,//是否为指标 0否 1指标库指标 2预测指标库指标
-        edbId:0,//指标id/code
-
-    },],
     dateClick:handleDateClick,
     eventClick:handleEventClick
 })
@@ -73,7 +49,6 @@ function handleEventClick(info){
 
 onMounted(()=>{
     calendarApi.value = FullCalendarRef.value.getApi()
-    console.log('FullCalendarRef',FullCalendarRef.value)
 
 })
 defineExpose({ calendarApi });
@@ -84,14 +59,14 @@ defineExpose({ calendarApi });
         <FullCalendar :options="calendarOptions" ref="FullCalendarRef" class="full-calendar-wrap">
             <template #eventContent="arg">
                 <div class="popper-content"
-                    :style="{fontWeight:arg.event.extendedProps.isTextBold?'bold':'normal'}"
+                    :style="{fontWeight:arg.event.extendedProps.font_bold?'bold':'normal'}"
                 >
                    {{arg.event.title||''}}
                 </div>
             </template>
         </FullCalendar>
         <div class="water-mark" v-if="showMark">
-            <p>{{ markText.date }}</p>
+            <p>{{ moment(markText.date).format("YYYY-MM") }}</p>
             <p>{{ markText.type }}</p>
         </div>
     </div>

src/views/hzyb/forexCalendar/transIndex.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
+import {useRoute,useRouter} from 'vue-router'
 //强制横屏
 const forceLandscape = (id = '.iframe-class') => {
   const handler = () => {
@@ -7,7 +8,7 @@ const forceLandscape = (id = '.iframe-class') => {
     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`;
@@ -37,8 +38,20 @@ const forceLandscape = (id = '.iframe-class') => {
 
   handler();
 };
+const router = useRouter()
+function changeRoute(msg){
+    const {path,query} = msg.data
+    router.push({
+        path,
+        query
+    })
+
+}
+const route = useRoute()
 onMounted(()=>{
+    localStorage.setItem('hzyb-token',route.query.token)
     forceLandscape()
+    window.addEventListener('message',changeRoute)
 })
 </script>