接口联调 暂存

src/api/forexCalendar.js

@@ -0,0 +1,43 @@
+import {get,post} from './http'
+
+/**
+ * 获取品种列表
+ * @param {*} params 
+ * @returns 
+ */
+export const apiGetPermissionList = (params)=>{
+    return get('/fe_calendar/permission/list',params)
+}
+/**
+     * 获取日期范围内事项列表
+     * @param {Object} params 
+     * @param {Number} params.chart_permission_id 品种ID
+     * @param {String} params.start_date 起始时间
+     * @param {String} params.end_date 终止时间
+     * @returns [{
+     *      Date:"2024-03-28",//事项日期
+     *      Matters:[],//事项详情
+     * }]
+     */
+export const apiGetCalendarEventList = (params)=>{
+    return get('/fe_calendar/matter/list',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)
+}
+/**
+ * 获取品种最新日历月份
+ * @param {Object} params 
+ * @param {Number} params.chart_permission_id 品种ID
+ * @returns 
+ */
+export const apiGetPermissionNewestDate = (params)=>{
+    return get('/fe_calendar/permission/latest_month',params)
+}

src/api/user.js

@@ -16,7 +16,7 @@ export const apiUserInfo=()=>{
  * @param company_name 公司名
  * @param permission 选择的权限
  * @param real_name 姓名
- * @param source 来源：我的1、活动2、图库3、研报4、问答社区5、价格驱动6、沙盘推演7、语音播报8、视频社区9、线上路演10
+ * @param source 来源：我的1、活动2、图库3、研报4、问答社区5、价格驱动6、沙盘推演7、语音播报8、视频社区9、线上路演10、事件日历11
  * @param source_agent 来源平台：1:小程序、2:小程序(pc)、3:公众号、4:官网web(pc)
  * @param from_page 来源页面: '活动列表'、'活动详情'等
  */

src/views/forexCalendar/EdbDetail.vue

@@ -1,13 +1,47 @@
 <script setup>
 import { ref, reactive } from 'vue'
+import { useRoute } from "vue-router"
+
+const route = useRoute()
+
+let url = ref('')
+function init(){
+    const {startDate,endDate,edbInfoId,matterType,permissionId} = route.query
+    const queryObj={
+        startDate,//当前月起始日
+        endDate,//当前月终止日
+        edbInfoId,//选中的指标id
+        matterType,//指标类型
+        permissionId,//品种id
+        token:localStorage.getItem('token'),
+        timestamp:new Date().getTime(),//防止缓存
+    }
+    let queryObjStr=''
+    for (const key in queryObj) {
+        if(!queryObjStr){
+                queryObjStr=`${key}=${queryObj[key]}`
+        }else{
+            queryObjStr=`${queryObjStr}&${key}=${queryObj[key]}`
+        }
+    }
+    const baseUrl = 'http://192.168.77.18:3000/xcx_h5/hzyb/forex/detail?'
+    url.value = baseUrl+queryObjStr
+}
+init()
 </script>
 
 <template>
-    <div>
-        指标详情页
+    <div class="edb-detail-pc-wrap">
+        <iframe id='iframe' :src="url"></iframe>
     </div>
 </template>
 
 <style scoped lang="scss">
-
+.edb-detail-pc-wrap{
+    iframe{
+        width: 100%;
+        height: 800px;
+        border: none;
+    }
+}
 </style>

src/views/forexCalendar/Index.vue

@@ -1,30 +1,39 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from "vue-router";
-import { ElMessage} from 'element-plus'
+import { ElMessage,ElMessageBox } from 'element-plus'
+import moment from 'moment'
 import BaseCalendar from './components/BaseCalendar.vue'
+import {apiGetPermissionList,apiGetCalendarEventList,apiGetDailyEventList,apiGetPermissionNewestDate} from '@/api/forexCalendar.js'
 
-let varietyValue = ref('汇率')
-let monthValue = ref('')
-let hasAuth = ref('true')
+//权限控制
+let hasAuth = ref(true)
+let noAuth = ref({
+    type:'',
+    name:'',
+    mobile:'',
+    customer_info:{}
+})
 
+//日历点击
+let showEventList = ref(false) //控制事项列表弹窗
+let currentDay = ref('') //选择的日期
+//日历点击事件
 function dateClick(info){
-    //查看该日期是否有事件，再打开弹窗
     setEventInfo(info.dateStr)
 }
 function eventClick(info){
     //直接打开弹窗
     setEventInfo(info.event.startStr)
 }
-function setEventInfo(date){
-    if(!varietyValue.value) return ElMessage.warning("请选择品种")
+async function setEventInfo(date){
+    if(!permissionValue.value) return ElMessage.warning("请选择品种")
     currentDay.value = date||''
-    showEventList.value = true
-
+    //获取当天的日历信息，若有事项，则打开弹窗
+    await getEventsByDay()
+    if(eventList.value.length) showEventList.value = true
 }
-let showEventList = ref(false)
-let currentDay = ref('2024-03-28') //选择的日期
-//mock
+//事项列表
 let eventList = ref([
     {
         title:'我是自定义事项', //事件名称
@@ -48,38 +57,217 @@ let eventList = ref([
         matter_type:2,
     }
 ])
+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||[]
+    })
+}
 const router = useRouter()
+//跳转事项详情
 function handleClickEvent(event){
-    console.log('event?',event)
     if(event.matter_type===1) return ElMessage("该事项未关联指标")
-    router.push('/forexCalendar/detail')
+    const {activeStart,activeEnd} = baseCalendarRef.value?.calendarApi.view||{}
+    router.push({
+        path:'/forexCalendar/detail',
+        query:{
+            startDate:moment(activeStart).format('YYYY-MM-DD'),
+            endDate:moment(activeEnd).subtract(1, 'days').format('YYYY-MM-DD'),
+            edbInfoId:event.edb_info_id,
+            matterType:event.matter_type,
+            permissionId:permissionValue.value
+        }
+    })
+}
+
+let baseCalendarRef  = ref(null) //日历api
+let monthValue = ref('') //选中的月份
+function changeMonth(month){
+    const Month = month||new Date()
+    baseCalendarRef.value?.calendarApi.gotoDate(Month)
+    renderCalendar()
+}
+let permissionValue = ref('') //选中的品种ID
+let permissonList = ref([]) //品种列表
+let cascaderRef = ref(null) //品种cascader
+let permissionName = ref('') //品种名称
+function getPermissionList(){
+    apiGetPermissionList().then(res=>{
+        if(res.code===200){
+            hasAuth.value = true
+            permissonList.value = res.data
+            /* permissionValue.value = permissonList.value[0]?.children[0]?.chart_permission_id
+            changePermission() */
+        }else{
+            hasAuth.value = false
+            noAuth.value = res.data
+        }
+    })
+}
+async function changePermission(){
+    if(!hasAuth.value) return 
+    if(!permissionValue.value) return 
+    getPermissionName()
+    await getPermissionNewestMonth()
+    //renderCalendar()
+}
+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)
+    })
+}
+function getPermissionName(){
+    console.log(cascaderRef.value.getCheckedNodes(true))
+    const node = cascaderRef.value?.getCheckedNodes(true)[0]
+    permissionName.value = node.label
+}
+//加载日历表
+async function renderCalendar(){
+    //获取当前日历的起始日期+终止日期,可能会跨月
+    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)
+    })
+}
+const handleApply=()=>{
+    if(store.state.userInfo.is_bind===0){
+        ElMessageBox({
+            title:`温馨提示`,
+            message:'为了优化您的用户体验，<br>请登录后查看更多信息！',
+            dangerouslyUseHTMLString: true,
+            center: true,
+            confirmButtonText:'去登录',
+            confirmButtonClass:'self-elmessage-confirm-btn',
+            showCancelButton:true,
+            cancelButtonText:'取消',
+            cancelButtonClass:'self-elmessage-cancel-btn'
+        }).then(res=>{
+            wx.miniProgram.reLaunch({url:'/pages/login'})
+        }).catch(()=>{})
+        return
+    }
+    if(noAuth.value.customer_info.has_apply){
+        const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
+        ElMessageBox({
+            title:`事件日历`,
+            message:htmlStr,
+            center: true,
+            dangerouslyUseHTMLString: true,
+            confirmButtonText:'知道了',
+            confirmButtonClass:'self-elmessage-confirm-btn'
+        })
+    }else{
+        if (!noAuth.value.customer_info.status || noAuth.value.customer_info.status != '流失'|| noAuth.value.customer_info.status != '关闭') {
+            console.log('跳转申请页');
+            router.push({
+                path:'/apply/permission',
+                query:{
+                    source:11,
+                    fromPage:'事件日历'
+                }
+            })
+        }else{
+            apiApplyPermission({
+                company_name:noAuth.value.customer_info.company_name,
+                real_name:noAuth.value.customer_info.name,
+                source:11,
+                from_page:'事件日历'
+            }).then(res=>{
+                console.log('主动申请成功');
+                const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
+                ElMessageBox({
+                    title:`事件日历`,
+                    message:htmlStr,
+                    center: true,
+                    dangerouslyUseHTMLString: true,
+                    confirmButtonText:'知道了',
+                    confirmButtonClass:'self-elmessage-confirm-btn'
+                })
+            })
+        }
+    }
 }
 onMounted(()=>{
-    
+    monthValue.value = moment(new Date()).format('YYYY-MM')
+    getPermissionList()
 })
 </script>
 
 <template>
     <div class="forex-calendar-wrap" v-if="hasAuth">
         <div class="calendar-header">
-            <el-select v-model="varietyValue">
-                <el-option label="1" value="1"></el-option>
-            </el-select>
-            外汇日历表
-            <el-date-picker v-model="monthValue" type="month" value-format="YYYY-MM"></el-date-picker>
+            <el-cascader :options="permissonList" 
+                ref="cascaderRef"
+                placeholder="请选择品种"
+                v-model="permissionValue"
+                :props="{
+                    expandTrigger:'hover',
+                    emitPath:false,
+                    value:'chart_permission_id',
+                    label:'chart_permission_name'
+                }"
+                style="min-width:210px;"
+                @change="changePermission"
+            ></el-cascader>
+            <el-date-picker v-model="monthValue" type="month" value-format="YYYY-MM" @change="changeMonth"></el-date-picker>
         </div>
         <BaseCalendar
+            ref="baseCalendarRef"
+            :markText="{date:monthValue,type:permissionName||'请选择品种'}"
             @dateClick="dateClick"
             @eventClick="eventClick"
         ></BaseCalendar>
     </div>
     <div class="no-auth" v-else>
-        无权限
+        <img :src="$store.state.globalImgUrls.activityNoAuth" alt="">
+        <p style="font-size:16px;margin-bottom: 0;">您暂无权限查看线上路演</p>
+        <template v-if="noAuth.type=='contact'">
+            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想查看，可以联系对口销售--{{noAuth.name}}：<span style="color:#F3A52F">{{noAuth.mobile}}</span></p>
+        </template>
+        <template v-else>
+            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想参加可以申请开通</p>
+            <div class="global-main-btn btn" @click="handleApply" style="margin-bottom: 20px;">立即申请</div>
+        </template>
     </div>
     <!-- 事项详情弹窗 -->
     <el-dialog
         v-model="showEventList"
-        :title="`${currentDay}${varietyValue}事项`"
+        :title="`${currentDay}${permissionName}事项`"
         :width="550"
         :close-on-click-modal="false"
         append-to-body
@@ -97,7 +285,7 @@ onMounted(()=>{
 
 <style scoped lang="scss">
 .forex-calendar-wrap{
-    min-height: 600px;
+    min-height: 700px;
     display: flex;
     flex-direction: column;
     .calendar-header{

src/views/forexCalendar/components/BaseCalendar.vue

@@ -22,6 +22,7 @@ const props = defineProps({
 })
 const emit = defineEmits(["dateClick","eventClick"])
 let FullCalendarRef = ref(null)
+let calendarApi = ref(null)
 let calendarOptions = ref({
     height:'100%',
     locale: "zh-cn",
@@ -35,19 +36,6 @@ let calendarOptions = ref({
     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
-
-    },],
     dateClick:handleDateClick,
     eventClick:handleEventClick
 })
@@ -57,6 +45,12 @@ function handleDateClick(info){
 function handleEventClick(info){
     emit("eventClick",info)
 }
+onMounted(()=>{
+    calendarApi.value = FullCalendarRef.value.getApi()
+    console.log('FullCalendarRef',FullCalendarRef.value)
+
+})
+defineExpose({ calendarApi });
 </script>
 
 <template>
@@ -64,7 +58,7 @@ function handleEventClick(info){
         <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>
@@ -96,6 +90,23 @@ function handleEventClick(info){
             border-radius: 0;
             margin:0 !important;
         }
+        :deep(.fc-scrollgrid){
+            border:none;
+            .fc-scrollgrid-section-header{
+                th{
+                    border:none !important;
+                }
+                .fc-col-header-cell{
+                    text-align: left;
+                }
+            }
+            .fc-scrollgrid-section-body{
+                td{
+                    border: none !important;
+                    border-left:2px solid #E3B377 !important;
+                }
+            }
+        }
     }
     .water-mark{
         position: absolute;