新页面添加

src/views/IM/diagnosis-admin/overviewScheduling.vue

@@ -39,11 +39,21 @@
           查询
         </el-button>
       </div>
-      <FullCalendar
-        ref="fullCalendar"
-        :options="calendarOptions"
-        class="FullCalendar"
-      />
+      <div 
+        class="fullCalendar-show"
+      >
+        <FullCalendar
+          ref="fullCalendar"
+          :options="calendarOptions"
+          class="FullCalendar"
+        />
+      </div>
+      <!-- <div 
+        v-else
+        class="fullCalendar-nothing"
+      >
+        <img src="../../../assets/image/nothingData.png" alt="" >
+      </div> -->
     </div>
   </div>
 </template>
@@ -96,20 +106,10 @@
           timeZone: 'UTC',
           schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
           initialView: 'resourceTimeGridDay',
-          resources: [
-          // { id: 'a', title: 'Room A' },
-          // { id: 'b', title: 'Room B'},
-          // { id: 'c', title: 'Room C' },
-          // { id: 'd', title: 'Room D' }
-          ],
+          resources: [],
           eventColor: '#fff',
           eventBackgroundColor: '#fff',
-          events: [
-          // { id: '1', resourceId: 'a', start: '2021-11-01 14:30:00', end: '2021-11-01 15:30:00', color:'#aaccee' },
-          // { id: '2', resourceId: 'b', start: '2021-10-30 14:30:00', end: '2021-10-30 15:30:00', color:'#aaccee' },
-          // { id: '3', resourceId: 'c', start: '2021-10-30 14:30:00', end: '2021-10-30 15:30:00', color:'#aaccee' },
-          // { id: '4', resourceId: 'd', start: '2021-10-30 14:30:00', end: '2021-10-30 15:30:00', color:'#aaccee' },
-          ],
+          events: [],
           allDaySlot: false, // 周，日视图时，all-day 不显示
           slotDuration: '00:05:00',
           slotMinTime: '09:00',
@@ -123,7 +123,6 @@
             meridiem: 'short',
             hour12: false, // 设置时间为24小时
           },
-          gotoDate:this.gotoDate
         },
         workingTicketVisible: false, // 工作表票详情页面
         scrollerHeight: 0,
@@ -137,38 +136,6 @@
       this.getFirstLevelLable();
     },
     mounted() {
-    // this.calendarOptions.events = [
-    //   {
-    //     end: '2021-10-30 10:15:00',
-    //     start: '2021-10-30 10:00:00',
-    //     color:'green',
-    //     resourceId: 1007393527,
-    //   },
-    //   {
-    //     end: '2021-10-30 12:30:00',
-    //     start: '2021-10-30 11:30:00',
-    //     color:'green',
-    //     resourceId: 1007393527,
-    //   },
-    //   {
-    //     end: '2021-10-30 10:15:00',
-    //     start: '2021-10-30 10:00:00',
-    //     color:'green',
-    //     resourceId: 1007393588,
-    //   },
-    //   {
-    //     end: '2021-10-30 10:15:00',
-    //     start: '2021-10-30 10:00:00',
-    //     color:'green',
-    //     resourceId: 1000005462,
-    //   },
-    //   {
-    //     end: '2021-10-30 10:15:00',
-    //     start: '2021-10-30 10:00:00',
-    //     color:'green',
-    //     resourceId: 100925427,
-    //   },
-    // ];
     },
     methods: {
       // 通过监听expand-change事件（当展开节点发生变化时触发）获取第二层数据，组装interfaceOptions数据
@@ -212,11 +179,9 @@
         this.departmentId = value[1];
       },
       getNowDate(value) {
-        console.log(value, 'value');
         this.dateTime = value;
       },
       search() {
-        // this.calendarOptions.gotoDate(this.dateTime);
         const params = {
           dateTime: this.dateTime || null,
           departmentId: this.departmentId || null,
@@ -238,74 +203,18 @@
                   resourceId: item.doctorId,
                   end: item.endTime,
                   start: item.startTime,
-                  color: '#0d9078',
+                  color: ' #FFEDE9',
                 };
               }
             );
-            // this.calendarOptions.events = [
-            //   {
-            //     end: '2021-10-30 10:15:00',
-            //     start: '2021-10-30 10:00:00',
-            //     color:'green',
-            //     resourceId: 1007393527,
-            //   },
-            //   {
-            //     end: '2021-10-30 12:30:00',
-            //     start: '2021-10-30 11:30:00',
-            //     color:'green',
-            //     resourceId: 1007393527,
-            //   },
-            //   {
-            //     end: '2021-10-30 10:15:00',
-            //     start: '2021-10-30 10:00:00',
-            //     color:'green',
-            //     resourceId: 1007393588,
-            //   },
-            //   {
-            //     end: '2021-10-30 10:15:00',
-            //     start: '2021-10-30 10:00:00',
-            //     color:'green',
-            //     resourceId: 1000005462,
-            //   },
-            //   {
-            //     end: '2021-10-30 10:15:00',
-            //     start: '2021-10-30 10:00:00',
-            //     color:'green',
-            //     resourceId: 100925427,
-            //   },
-            // ];
             const calendarApi = this.$refs.fullCalendar.getApi();
-            calendarApi.gotoDate('2021-11-01');
-            // this.initialDate = '2021-10-30';
+            calendarApi.gotoDate(this.dateTime);
 
             console.log(this.calendarOptions.resources);
             console.log(this.calendarOptions.events);
-          // this.handleInitData(res.data.dutyWorkList);
           }
         });
       },
-      /**
-       * 点击日历日程事件
-       *
-       * info: 事件信息
-       * event是日程（事件）对象
-       * jsEvent是个javascript事件
-       * view是当前视图对象。
-       */
-      handleInitData(data) {
-        var newDate = [];
-        newDate = data;
-        newDate.forEach((item) => {
-          const dataObj = {};
-          dataObj['resourceId'] = item.doctorId;
-          dataObj['end'] = item.endTime;
-          dataObj['start'] = item.startTime;
-          dataObj['color'] = 'green';
-          this.calendarOptions.events.push(dataObj);
-        // debugger;
-        });
-        console.log(this.calendarOptions.events, 'this.calendarOptions.events');
-      },
     },
   };
 </script>
@@ -343,12 +252,27 @@
       align-items: center;
     }
   }
-
+  .fullCalendar-show{
+    // max-width: 300px !important;
+    overflow-x:scroll;
+  }
   .FullCalendar {
     background: #fff;
     padding: 20px;
   }
+  .fullCalendar-nothing{
+    background: #fff;
+    padding: 20px;
+    display: flex;
+    justify-content:  center;
+    img{
+      display: flex;
+    }
+  }
 }
+ /deep/ .fc-col-header-cell{
+      max-width: 80px !important;
+    }
 .w2 {
   /deep/.fc-prev-button {
     background: #f4f4f5;
@@ -356,6 +280,9 @@
     border: 1px solid #d9d9d9;
   }
 }
+ /deep/ .fc-timegrid-col-frame{
+    background: #fff !important;
+ }
 .w3 {
   /deep/.fc-next-button {
     background: #f4f4f5;