eta1.7.8 外汇日历表-页面初始化,翻译初始化

src/lang/modules/ToolBox/IndexEn.js

@@ -1,6 +1,7 @@
 import { AIQuestionEn } from "./AIQuestion";
 import { CommodityPriceChartEn } from "./CommodityPriceChart";
 import { PositionAnalysisEn } from "./PositionAnalysis";
+import { ForexCalendarEn } from "./calendar/ForexCalendar";
 
 
 export default {
@@ -8,6 +9,7 @@ export default {
     ToolBox: {
         AIQuestion:AIQuestionEn,
         CommodityPriceChart:CommodityPriceChartEn,
-        PositionAnalysis:PositionAnalysisEn
+        PositionAnalysis:PositionAnalysisEn,
+        ForexCalendar:ForexCalendarEn,
     },
 };

src/lang/modules/ToolBox/IndexZh.js

@@ -1,6 +1,7 @@
 import { AIQuestionZh } from "./AIQuestion";
 import { CommodityPriceChartZh } from "./CommodityPriceChart";
 import { PositionAnalysisZh } from "./PositionAnalysis";
+import { ForexCalendarZh } from "./calendar/ForexCalendar";
 
 
 export default {
@@ -8,6 +9,7 @@ export default {
     ToolBox: {
         AIQuestion:AIQuestionZh,
         CommodityPriceChart:CommodityPriceChartZh,
-        PositionAnalysis:PositionAnalysisZh
+        PositionAnalysis:PositionAnalysisZh,
+        ForexCalendar:ForexCalendarZh,
     },
 };

src/lang/modules/ToolBox/calendar/ForexCalendar.js

@@ -0,0 +1,6 @@
+export const ForexCalendarEn={
+    header_title:'{month} {year} Calendar'
+}
+export const ForexCalendarZh={
+    header_title:'{year}年{month}月日历表'
+}

src/lang/modules/ToolBox/calendar/commonLang.js

@@ -0,0 +1,64 @@
+export default{
+    Month:{//月份
+        1:{
+            en:'January',
+            enSort:'Jan.',
+            zh:'一月',
+        },
+        2:{
+            en:'February',
+            enSort:'Feb.',
+            zh:'二月',
+        },
+        3:{
+            en:'March',
+            enSort:'Mar.',
+            zh:'三月',
+        },
+        4:{
+            en:'April',
+            enSort:'Apr.',
+            zh:'四月',
+        },
+        5:{
+            en:'May',
+            enSort:'May.',
+            zh:'五月',
+        },
+        6:{
+            en:'June',
+            enSort:'Jun.',
+            zh:'六月',
+        },
+        7:{
+            en:'July',
+            enSort:'Jul.',
+            zh:'七月',
+        },
+        8:{
+            en:'August',
+            enSort:'Aug.',
+            zh:'八月',
+        },
+        9:{
+            en:'September',
+            enSort:'Sep.',
+            zh:'九月',
+        },
+        10:{
+            en:'October',
+            enSort:'Oct.',
+            zh:'十月',
+        },
+        11:{
+            en:'November',
+            enSort:'Nov.',
+            zh:'十一月',
+        },
+        12:{
+            en:'December',
+            enSort:'Dec.',
+            zh:'十二月',
+        },
+    }
+}

src/routes/modules/chartRoutes.js

@@ -345,6 +345,11 @@ export default [
 					pathName: "商品价格曲线",
 				}
 			},
+			{
+				path:"forexCalendar",
+				name:"外汇日历表",
+				component:()=>import('@/views/toolBox_manage/ForexCalendar.vue')
+			},
 		]
 	}
 ]

src/views/toolBox_manage/ForexCalendar.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="forex-calendar-wrap">
+        <div class="calendar-header">
+            <div class="left-select">
+                <el-button>添加事项</el-button>
+                <el-date-picker type="month" placeholder="选择月" 
+                    :clearable="false"
+                    v-model="monthValue"
+                    value-format="yyyy-MM"
+                    @change="changeMound"/>
+            </div>
+            <div class="center-title"> <!-- 当前日期 -->
+                {{ $t('ToolBox.ForexCalendar.header_title',{
+                    //中文版传字符,英文版传月份翻译
+                    month:$i18n.locale==='zh'?`${currentMonth}`:calendarTrans.Month[Number(currentMonth)||1].en,
+                    year:currentYear||'2024'}) 
+                }}</div>
+            <div class="right-select">
+                <el-select placeholder="请选择品种"></el-select>
+            </div>
+        </div>
+        <BaseCalendar
+            ref="baseCalendar"
+            @dateClick="dateClick"
+            @eventClick="eventClick"
+        ></BaseCalendar>
+    </div>
+</template>
+
+<script>
+import BaseCalendar from './components/BaseCalendar.vue';
+import calendarTrans from '@/lang/modules/ToolBox/calendar/commonLang';
+export default {
+    data() {
+        return {
+            monthValue:'',
+            calendarApi:null,
+            calendarTrans:calendarTrans
+        };
+    },
+    computed:{
+        currentYear(){//选择的年份
+            const date = this.monthValue||new Date()
+            return this.$moment(date).format('YYYY')
+        },
+        currentMonth(){//选择的月份
+            const date = this.monthValue||new Date()
+            return this.$moment(date).format('MM')
+        }
+    },
+    methods: {
+        changeMound(month){
+            const Month = month||new Date()
+            this.calendarApi.gotoDate(Month)
+        },
+        dateClick(info){
+            console.log("dateClick-info",info)
+            //打开弹窗
+        },
+        eventClick(info){
+            console.log("eventClick-info",info)
+        },
+    },
+    components: { BaseCalendar },
+    mounted(){
+        this.monthValue = this.$moment(new Date()).format('YYYY-MM')
+        this.calendarApi = this.$refs.baseCalendar.$refs.fullCalendar.getApi()
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.forex-calendar-wrap{
+    min-height: calc(100vh - 120px);
+    box-sizing: border-box;
+    padding:20px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    .calendar-header{
+        display: flex;
+        justify-content:space-between;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+}
+</style>

src/views/toolBox_manage/components/BaseCalendar.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="base-calendar-wrap">
+        <FullCalendar class="full-calendar-wrap"
+            ref="fullCalendar"
+            :options="calendarOptions"
+        >
+            <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>
+
+<script>
+import FullCalendar from "@fullcalendar/vue";
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+export default {
+    components: {FullCalendar},
+    props:{
+        showMark:{
+            type:Boolean,
+            default:true
+        },
+        markText:{
+            type:Object,
+            default:()=>{
+                return {
+                    date:'当前日期',
+                    type:'当前品种'
+                }
+            }
+        },
+        options:{
+            type:Object,
+            default:{}
+        }
+    },
+    data() {
+        return {
+            calendarOptions:{
+                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',
+                        isTextBold:true
+                    },
+                ],
+                dateClick:this.handleDateClick,
+                eventClick:this.handleEventClick
+            }
+        };
+    },
+    methods: {
+        handleDateClick(info){
+            this.$emit("dateClick",info)
+        },
+        handleEventClick(info){
+            this.$emit("eventClick",info)
+        }
+    },
+};
+</script>
+
+<style lang="scss">
+.base-calendar-wrap{
+    .full-calendar-wrap{
+        .fc-daygrid-day-top{ //日期偏左显示
+            flex-direction: row;
+        }
+        .fc-daygrid-event{
+            border-radius: 0;
+            margin:0 !important;
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+.base-calendar-wrap{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position:relative;
+    .full-calendar-wrap{
+        flex:1;
+        .popper-content{
+            cursor: pointer;
+        }
+    }
+    .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;
+    }
+}
+</style>

src/views/toolBox_manage/components/addEventDialog.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        添加事件弹窗
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>