“你大日历悬停窗口功能添加

src/pages/main/fullcalendar/calendar.vue

@@ -21,16 +21,28 @@
                 </el-col>
                 -->
                 <el-col :span="19">
-                    <div class="calendar-box">
+                    <div class="calendar-box" style="color:black">
+<!-- 日历菜单栏 -->
                         <full-calendar
                             ref="fullCalendar"
-                            style="height: 100%"
+                            style="height: 100%;color:black"
                             :options="calendarOptions"
                         >
                         </full-calendar>
                     </div>
                 </el-col>
             </el-row>
+            <!-- 悬停窗体 -->
+            <div class="over" v-if="xuanting" >
+                <!-- <button class="fr" @click="closexuan">关闭</button> -->
+                <img src="../../../assets/close.png" class="fr" @click="closexuan">
+                <img src="../../../assets/del.png" class="fr" @click="delxuan">
+                <img src="../../../assets/xiugai.png" class="fr" @click="xiuxuan">
+                <div><img src="../../../assets/POINT.png"><span class="aaaa"></span></div>
+                <div><img src="../../../assets/time.png"><span class="bbbb"></span></div>
+                <div><img src="../../../assets/steam.png"><span class="cccc"></span></div>
+                <div><img src="../../../assets/neirong.png"><span class="dddd"></span></div>
+            </div>
             <!--日程新增弹窗start-->
             <el-dialog
                 title="会议新增"
@@ -175,7 +187,13 @@
         data() {
             return {
                 activeNum: 0,
+                // fontc={
+                //     idss:[],
+                //     fcolor:[]
+                // },
+                // Colorr:"",
                 dialogVisible: false,
+                xuanting:false,
                 // meetingRoomList: [],
                 subList: [],
                 array: [],
@@ -203,6 +221,8 @@
                     },
 
                 ],
+                idx:"",
+                calEventt:{},
                 form: {
                     title: '',
                     userId: '',
@@ -256,10 +276,12 @@
                     navLinks: true,
                     // displayEventEnd: true,//所有视图显示结束时间
                     initialView: "dayGridMonth", // 设置默认显示月，可选周、日
-                    dateClick: this.handleDateClick,
-                    eventClick: this.handleEventClick,
+                    dateClick: this.handleDateClick,//点击日历
+                    eventClick: this.handleEventClick,//日历日程点击
                     eventsSet: this.handleEvents,
                     select: this.handleDateSelect,
+                    eventMouseEnter: this.eventmouseover,//鼠标滑过
+                    eventMouseLeave:this.eventmouseout,//鼠标离开
                     // timezone
                     // 设置日程
                     events: [
@@ -409,7 +431,6 @@
         mounted() {
             // 获取用户信息
             this.calendarApi = this.$refs.fullCalendar.getApi();
-
             // this.meetingRoomList = this.array.meetingRoomList;
             // console.log('this.array', this.array)
             // this.getReservationList(this.array.scheduleList0);
@@ -445,10 +466,10 @@
                     },
                     data: {isFile: "0"},
                 }).then((res) => {
-                    console.log('res====', typeof res.data)
-                    console.log(res.data)
+                    // console.log('res====', typeof res.data)
+                    // console.log(res.data)
                     this.auth = res.data;
-                    console.log("res.data", res.data)
+                    // console.log("res.data", res.data)
 
                 });
             },
@@ -456,7 +477,7 @@
                 let newArr = [];
                 this.subList = arrayData;
                 arrayData.forEach((item) => {
-                    console.log('item', item)
+                    // console.log('item', item)
                     newArr.push({
                         newBeginTime: item.begindate.split(' ')[1].substr(0,5),
                         newEndTime:  item.enddate.split(' ')[1].substr(0,5),
@@ -468,7 +489,7 @@
                     })
                 });
                 this.calendarOptions.events = newArr;
-                // console.log(newArr)
+                
                 // debugger
             },
             // 切换教室
@@ -518,6 +539,54 @@
                 let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0];
                 return newDate;
             },
+            //鼠标滑过事件
+            eventmouseover(calEvent){
+                this.idx=calEvent.event.id
+                this.calEventt=calEvent
+                console.log(this.array, '鼠标经过arr');
+                console.log(calEvent, '鼠标经过cal');
+                this.xuanting=true
+                var a=document.querySelector(".aaaa")
+                var b=document.querySelector(".bbbb")
+                var c=document.querySelector(".cccc")
+                var d=document.querySelector(".dddd")
+                var j=0
+                for(var i=0;i<this.array.length;i++){
+                    if(this.array[i].id==calEvent.event.id){
+                        j=i
+                    }
+                }
+                a.innerHTML="<span>"+this.array[j].title+"</span>"
+                b.innerHTML="<span>"+calEvent.event.startStr.substring(5,7)+"月"+
+                            calEvent.event.startStr.substring(8)+"日"+
+                            calEvent.event._def.extendedProps.newBeginTime+"-"+
+                            calEvent.event._def.extendedProps.newEndTime+"</span>"
+                c.innerHTML="<span>"+this.array[j].leaderName+"</span>"
+                d.innerHTML="<span>"+this.array[j].remark+"</span>"
+            },
+            //关闭悬停窗口
+            closexuan(){
+                this.xuanting=false
+            },
+            //悬停窗体修改按钮
+            xiuxuan(events){
+                console.log(events)
+                console.log(this.array)
+                var j=0
+                for(var i=0;i<this.array.length;i++){
+                    if(this.array[i].id==this.idx){
+                        j=i
+                    }
+                }   
+                this.calEventt.event=this.array[j]
+                var aa=this.calEventt
+                console.log(aa)
+                this.handleEventClick(aa)
+            },
+            //悬停窗体删除按钮
+            delxuan(){
+               this.savedel()
+            }, 
             // 点击日历
             handleDateClick: function (arg) {
                 if (!this.auth) {
@@ -564,6 +633,22 @@
             today() {
                 this.calendarApi.today();
             },
+            //提交删除后的数据
+            savedel(calEvent){
+                        this.$http({
+                            url: "/market/calendar/del",
+                            method: "post",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            data:{
+                                id:this.idx
+                            }
+                        }).then((res) => {
+                            // console.log(res)
+                            location.reload();
+                        });
+            },
             // 提交数据
             submitForm(formName) {
                 console.log(this.form)
@@ -712,4 +797,34 @@
     .el-row--flex.is-justify-space-between {
         justify-content: center;
     }
+    .over{position: absolute; width: 200px;height: 200px;background: #eee;  border: 1px solid black; z-index: 100;top: 300px;left:100px;opacity: 0.8; padding: 10px; border-radius: 5px;}
+    .over img{width: 20px;height: 20px;}
+    .over div{margin: 20px 0px;height: 17px;}
+    .over div img{height: 17px;}
+    .over div span{margin-left: 5px; line-height: 17px;height: 17px;}
+    .fr{float: right;}
+    // ::v-deep .fc-daygrid-event{
+    //     background-color:#ffffff !important;
+    //     border: 1px solid black  !important;
+    // }
+    // ::v-deep .fc-event-title{
+    //     // color: v-band(Color)  !important;
+    //     color: black  !important;
+    // }
+    // ::v-deep .fc-daygrid-event-harness:nth-child(odd){
+    //     color: black  !important;
+    // }
+    // ::v-deep .fc-daygrid-event-harness:nth-child(even){
+    //     color: blue  !important;
+    // }
+    // ::v-deep .fc-event-title-container:nth-child(odd){
+    //     color: black  !important;
+    // }
+    // ::v-deep .fc-event-title-container:nth-child(even){
+    //     color: blue  !important;
+    // }
+    ::v-deep .fc-sticky{
+        // color: v-band(Color)  !important;
+        color: black  !important;
+    }
 </style>

vue.config.js

@@ -93,7 +93,7 @@ module.exports = {
         proxy: {
             // 开发环境变化可注释 ⬇️⬇️
             "/market/CMK": {
-                target: "http://192.168.3.12:9114",
+                target: "http://192.168.3.129:9113",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -101,7 +101,7 @@ module.exports = {
                 },
             },
             "/market/mk": {
-                target: "http://192.168.3.12:9114",
+                target: "http://192.168.3.129:9113",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -109,7 +109,7 @@ module.exports = {
                 },
             },
             "/market/techcentergj": {
-                target: "http://192.168.3.12:9114",
+                target: "http://192.168.3.129:9113",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -117,7 +117,7 @@ module.exports = {
                 },
             },
             "/mkWangge": {
-                target: "http://192.168.3.12:9114",
+                target: "http://192.168.3.129:9113",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -135,7 +135,7 @@ module.exports = {
                 // target: 'http://192.168.0.156:9600/',
                 // target: 'http://192.168.2.170:9600/',
                 // target: 'http://192.168.2.169:9600/',
-                target: "http://192.168.0.90:9600",
+                target: "http://192.168.3.129:9600",
                 changeOrigin: true,
             },
         },