From 3bbd9d4570015575d0f0536663e556c3a4e317bd Mon Sep 17 00:00:00 2001
From: wangxinbo <wangxinbo@corpvip.com>
Date: Sun, 22 Nov 2020 12:17:04 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/assets/styles/index.scss         |   2 +-
 .../src/layout/components/Sidebar/Item.vue    |  62 ++--
 .../src/views/benyi/assessment/history.vue    | 152 +++++----
 .../src/views/benyi/assessment/student.vue    |  60 ++--
 .../src/views/benyi/assessmentstudy/index.vue |  36 +-
 ruoyi-ui/src/views/dashboard/BarChart.vue     | 307 +++++++++---------
 ruoyi-ui/src/views/index.vue                  |  13 +-
 7 files changed, 359 insertions(+), 273 deletions(-)

diff --git a/ruoyi-ui/src/assets/styles/index.scss b/ruoyi-ui/src/assets/styles/index.scss
index 0f4846f48..e22db61a7 100644
--- a/ruoyi-ui/src/assets/styles/index.scss
+++ b/ruoyi-ui/src/assets/styles/index.scss
@@ -212,7 +212,7 @@ aside {
   }
 
   &.align-center {
-    align-content: center;
+    align-items: center;
   }
 
   &.justify-center {
diff --git a/ruoyi-ui/src/layout/components/Sidebar/Item.vue b/ruoyi-ui/src/layout/components/Sidebar/Item.vue
index 1a99d63f9..b37c0a506 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/Item.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/Item.vue
@@ -1,29 +1,33 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    }
+
+    if (title) {
+      vnodes.push(
+        <el-tooltip slot='title' effect='dark' content={(title)} placement="bottom">
+        <span>{(title)}</span>
+        </el-tooltip>
+      )
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/ruoyi-ui/src/views/benyi/assessment/history.vue b/ruoyi-ui/src/views/benyi/assessment/history.vue
index 43adbd756..41c4703fc 100644
--- a/ruoyi-ui/src/views/benyi/assessment/history.vue
+++ b/ruoyi-ui/src/views/benyi/assessment/history.vue
@@ -12,60 +12,88 @@
         :label="item.dictLabel"
         :name="item.dictLabel"
       >
-        <div>
+        <h2 class="result-title">综合评估结果</h2>
+        <div class="comprehensive">
           <radar-chart :psMsg="item.dictValue" />
         </div>
-        <div>
-          <radar-chart_jk :psMsg="item.dictValue" />
-        </div>
-        <div class="block">
-          <h2 class="block-item-title flex align-center">教育建议</h2>
-          <div
-            class="block"
-            v-for="itemLy in assessmentcontentList.filter(
-              (p) => p.parentId == item.dictValue && p.name == '健康'
-            )"
-            :key="itemLy.id"
-          >
-            {{ itemLy.name }}
-            <div
-              class="block"
-              v-for="itemFzly in assessmentcontentList.filter(
-                (p) => p.parentId == itemLy.id
-              )"
-              :key="itemFzly.id"
-            >
-              <h2 class="block-item-title flex align-center">
-                {{ itemFzly.name }}
-              </h2>
-              <ul class="block-content">
-                <li
-                  v-for="itemMb in assessmentcontentList.filter(
-                    (p) => p.parentId == itemFzly.id
+        <h2 class="result-title">各项评估结果</h2>
+        <el-tabs
+          v-model="childTab"
+          @tab-click="handleTabClick"
+        >
+          <el-tab-pane label="健康" name="one">
+            <radar-chart_jk :psMsg="item.dictValue" v-if="childTab === 'one'" />
+            <div class="block">
+              <h2 class="block-item-title flex align-center">教育建议</h2>
+              <div
+                class="block"
+                v-for="itemLy in assessmentcontentList.filter(
+                  p => p.parentId == item.dictValue && p.name == '健康'
+                )"
+                :key="itemLy.id"
+              >
+                {{ itemLy.name }}
+                <div
+                  class="block"
+                  v-for="itemFzly in assessmentcontentList.filter(
+                    p => p.parentId == itemLy.id
                   )"
-                  :key="itemMb.id"
+                  :key="itemFzly.id"
                 >
-                  <p class="block-content-title">
-                    <span class="num">{{ itemMb.sort }}. </span
-                    >{{ itemMb.name }}
-                  </p>
-                  <div
-                    class="checkbox-content"
-                    v-for="itemYs in assessmentcontentList.filter(
-                      (p) => p.parentId == itemMb.id
-                    )"
-                    :key="itemYs.id"
-                  >
-                    <p class="checkbox-item flex align-center">
-                      {{ itemYs.jyjy }}
-                    </p>
-                  </div>
-                </li>
-              </ul>
+                  <h2 class="block-item-title flex align-center">
+                    {{ itemFzly.name }}
+                  </h2>
+                  <ul class="block-content">
+                    <li
+                      v-for="itemMb in assessmentcontentList.filter(
+                        p => p.parentId == itemFzly.id
+                      )"
+                      :key="itemMb.id"
+                    >
+                      <p class="block-content-title">
+                        <span class="num">{{ itemMb.sort }}. </span
+                        >{{ itemMb.name }}
+                      </p>
+                      <div
+                        class="checkbox-content"
+                        v-for="itemYs in assessmentcontentList.filter(
+                          p => p.parentId == itemMb.id
+                        )"
+                        :key="itemYs.id"
+                      >
+                        <p class="checkbox-item flex align-center">
+                          {{ itemYs.jyjy }}
+                        </p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div>
+          </el-tab-pane>
+          <el-tab-pane label="语言" name="two">
+            <radar-chart_yy :psMsg="item.dictValue" v-if="childTab === 'two'" />
+          </el-tab-pane>
+          <el-tab-pane label="社会" name="three">
+            <radar-chart_sh
+              :psMsg="item.dictValue"
+              v-if="childTab === 'three'"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="科学" name="four">
+            <radar-chart_kx
+              :psMsg="item.dictValue"
+              v-if="childTab === 'four'"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="艺术" name="five">
+            <radar-chart_ys
+              :psMsg="item.dictValue"
+              v-if="childTab === 'five'"
+            />
+          </el-tab-pane>
+        </el-tabs>
+        <!-- <div>
           <radar-chart_yy :psMsg="item.dictValue" />
         </div>
         <div>
@@ -76,7 +104,7 @@
         </div>
         <div>
           <radar-chart_ys :psMsg="item.dictValue" />
-        </div>
+        </div> -->
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -100,7 +128,7 @@ export default {
     RadarChart_yy,
     RadarChart_sh,
     RadarChart_kx,
-    RadarChart_ys,
+    RadarChart_ys
   },
   data() {
     return {
@@ -113,6 +141,7 @@ export default {
       activeName: "",
       // 评估内容表格数据
       assessmentcontentList: [],
+      childTab: "one"
     };
   },
   created() {
@@ -127,13 +156,13 @@ export default {
   methods: {
     /** 查询幼儿未评估内容列表 */
     getNoAssessmentList() {
-      listNoAssessmentcontentByChild(this.childId).then((response) => {
+      listNoAssessmentcontentByChild(this.childId).then(response => {
         // console.log("rows:" + response.rows);
         this.assessmentcontentList = response.rows;
       });
     },
     getChild(childId) {
-      getChildByAssessment(childId).then((response) => {
+      getChildByAssessment(childId).then(response => {
         // console.log(response);
         if (response.code == "200") {
           this.childName = response.data.name;
@@ -143,7 +172,7 @@ export default {
     },
     /** 查询评估内容列表 */
     getList(childId) {
-      getAssessmentDictData(childId).then((response) => {
+      getAssessmentDictData(childId).then(response => {
         // console.log("rows:" + response.dictdata.length);
         if (response.dictdata.length > 0) {
           this.activeName = response.dictdata[0].dictLabel;
@@ -157,7 +186,10 @@ export default {
       //   this.activeName = tab.name;
       //   console.log(tab.name);
     },
-  },
+    handleTabClick(tab) {
+      this.childTab = tab.name;
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -170,6 +202,14 @@ div {
   -ms-user-select: none;
   user-select: none;
 }
+.comprehensive {
+  margin-bottom: 40px;
+}
+.result-title {
+  font-size: 18px;
+  margin-bottom: 15px;
+  text-align: center;
+}
 .title {
   padding: 10px 0;
   font-weight: 600;
@@ -231,4 +271,4 @@ div {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ruoyi-ui/src/views/benyi/assessment/student.vue b/ruoyi-ui/src/views/benyi/assessment/student.vue
index cd8e39720..3c2c908a6 100644
--- a/ruoyi-ui/src/views/benyi/assessment/student.vue
+++ b/ruoyi-ui/src/views/benyi/assessment/student.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="flex align-center justify-between">
+    <div class="flex align-center justify-between student-main-title">
       <p class="title flex align-center">
         <span>姓名：{{ this.childName }} </span>
         <span>出生日期：{{ this.childCsrq }} </span>
@@ -39,16 +39,17 @@
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane
         v-for="itemLy in assessmentcontentList.filter(
-          (p) => p.parentId == this.assessmentscope
+          p => p.parentId == this.assessmentscope
         )"
         :key="itemLy.id"
         :label="itemLy.name"
         :name="itemLy.name"
       >
-        <div v-loading="loading"
+        <div
+          v-loading="loading"
           class="block"
           v-for="itemFzly in assessmentcontentList.filter(
-            (p) => p.parentId == itemLy.id
+            p => p.parentId == itemLy.id
           )"
           :key="itemFzly.id"
         >
@@ -58,7 +59,7 @@
           <ul class="block-content">
             <li
               v-for="itemMb in assessmentcontentList.filter(
-                (p) => p.parentId == itemFzly.id
+                p => p.parentId == itemFzly.id
               )"
               :key="itemMb.id"
             >
@@ -68,7 +69,7 @@
               <div
                 class="checkbox-content"
                 v-for="itemYs in assessmentcontentList.filter(
-                  (p) => p.parentId == itemMb.id
+                  p => p.parentId == itemMb.id
                 )"
                 :key="itemYs.id"
               >
@@ -158,13 +159,13 @@ import {
   delAssessmentcontent,
   addAssessmentcontent,
   updateAssessmentcontent,
-  exportAssessmentcontent,
+  exportAssessmentcontent
 } from "@/api/benyi/assessmentcontent";
 
 import { getChildByAssessment } from "@/api/benyi/child";
 import {
   addAssessmentchild,
-  updateAssessmentchild,
+  updateAssessmentchild
 } from "@/api/benyi/assessmentchild";
 
 export default {
@@ -194,11 +195,11 @@ export default {
         name: undefined,
         iselement: undefined,
         scope: undefined,
-        sort: undefined,
+        sort: undefined
       },
       activeName: "健康",
       checked: false,
-      checkList: [],
+      checkList: []
     };
   },
   created() {
@@ -210,7 +211,7 @@ export default {
   },
   methods: {
     getChild(childId) {
-      getChildByAssessment(childId).then((response) => {
+      getChildByAssessment(childId).then(response => {
         // console.log(response);
         if (response.code == "200") {
           this.childName = response.data.name;
@@ -219,7 +220,7 @@ export default {
           this.bjmc = response.data.bjmc;
           this.classid = response.data.classid;
           this.zbjsxm = response.data.zbjsmc;
-          response.ByAssessmentchild.forEach((item) =>
+          response.ByAssessmentchild.forEach(item =>
             this.checkList.push(item.contentid)
           );
           if (response.isAssessment == "0") {
@@ -236,7 +237,7 @@ export default {
     /** 查询评估内容列表 */
     getList() {
       this.loading = true;
-      listAssessmentcontent(this.queryParams).then((response) => {
+      listAssessmentcontent(this.queryParams).then(response => {
         // console.log("rows:" + response.rows);
         this.assessmentcontentList = response.rows;
         this.loading = false;
@@ -257,16 +258,16 @@ export default {
     //   this.resetForm("form");
     // },
     /** 提交按钮 */
-    submitForm: function () {
+    submitForm: function() {
       this.$confirm("确认生成图表数据?生成后数据不能取消", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
-        callback: (action) => {
+        callback: action => {
           if (action === "confirm") {
             // console.log('按下 确定')
             var items = "";
-            this.checkList.forEach((item) => {
+            this.checkList.forEach(item => {
               //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
               items = items + item + ",";
             });
@@ -281,7 +282,7 @@ export default {
               this.form.type = "Y";
               this.form.xn = this.trem;
               this.form.scope = this.assessmentscope;
-              addAssessmentchild(this.form).then((response) => {
+              addAssessmentchild(this.form).then(response => {
                 if (response.code === 200) {
                   this.msgSuccess("评估成功");
                 }
@@ -289,7 +290,7 @@ export default {
             }
           } else {
           }
-        },
+        }
       });
     },
     handleClick(tab) {
@@ -302,8 +303,8 @@ export default {
       //   items = items + item + ",";
       // });
       // console.log(items);
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -319,9 +320,12 @@ div {
 .title {
   padding: 10px 0;
   font-weight: 600;
+  flex-wrap: wrap;
+  padding-right: 10px;
+  line-height: 20px;
   span {
     font-size: 16px;
-    padding: 2px;
+    padding: 0 4px;
     // &:nth-of-type(2) {
     //   font-size: 14px;
     //   font-weight: normal;
@@ -375,6 +379,18 @@ div {
         padding-left: 10px;
       }
     }
+    .el-checkbox {
+      display: flex;
+      white-space: normal;
+      .el-checkbox__input {
+        margin-top: 2px;
+      }
+    }
   }
 }
-</style>
\ No newline at end of file
+@media (max-width: 768.98px) {
+  .title span {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/benyi/assessmentstudy/index.vue b/ruoyi-ui/src/views/benyi/assessmentstudy/index.vue
index 3ef3510a3..3e1c5fb9c 100644
--- a/ruoyi-ui/src/views/benyi/assessmentstudy/index.vue
+++ b/ruoyi-ui/src/views/benyi/assessmentstudy/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <el-row :gutter="20" type="flex">
       <el-col :span="8" :xs="24">
         <div class="head-container">
           <el-input
@@ -11,8 +11,6 @@
             prefix-icon="el-icon-search"
             style="margin-bottom: 20px"
           />
-        </div>
-        <div class="head-container">
           <el-tree
             :data="treeOptions"
             :props="defaultProps"
@@ -43,7 +41,7 @@
 import {
   treeselectstudy,
   getAssessmentcontent,
-  getAssessmentcontentbyparentid,
+  getAssessmentcontentbyparentid
 } from "@/api/benyi/assessmentcontent";
 import { listAssessmentintroduce } from "@/api/benyi/assessmentintroduce";
 
@@ -62,19 +60,19 @@ export default {
       // 树结构
       defaultProps: {
         children: "children",
-        label: "label",
+        label: "label"
       },
       // 查询参数
       queryParams: {
-        id: undefined,
-      },
+        id: undefined
+      }
     };
   },
   watch: {
     // 根据名称筛选部门树
     name(val) {
       this.$refs.tree.filter(val);
-    },
+    }
   },
   created() {
     this.getTreeselect();
@@ -83,7 +81,7 @@ export default {
   methods: {
     /** 查询部门下拉树结构 */
     getTreeselect() {
-      treeselectstudy().then((response) => {
+      treeselectstudy().then(response => {
         this.treeOptions = response.data;
       });
     },
@@ -105,22 +103,22 @@ export default {
     },
     /**查询评估介绍 */
     getNote() {
-      listAssessmentintroduce(null).then((response) => {
+      listAssessmentintroduce(null).then(response => {
         // console.log("评估介绍:" + response.rows[0].content);
         this.note = response.rows[0].content;
       });
     },
     /** 查询一日流程任务列表 */
     getTaskList() {
-      getAssessmentcontentbyparentid(this.queryParams.id).then((response) => {
+      getAssessmentcontentbyparentid(this.queryParams.id).then(response => {
         var tmp = "";
-        response.data.forEach((element) => {
+        response.data.forEach(element => {
           tmp = tmp + element.sort + ". " + element.name + "</br>";
         });
         this.note = tmp;
       });
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -190,4 +188,12 @@ div {
   -ms-user-select: none;
   user-select: none;
 }
-</style>
\ No newline at end of file
+.el-tree{
+  max-height: calc(100vh - 180px);
+  overflow-y: auto;
+}
+.el-card {
+  max-height: calc(100vh - 130px);
+  overflow-y: auto;
+}
+</style>
diff --git a/ruoyi-ui/src/views/dashboard/BarChart.vue b/ruoyi-ui/src/views/dashboard/BarChart.vue
index f7885c126..8940512b7 100644
--- a/ruoyi-ui/src/views/dashboard/BarChart.vue
+++ b/ruoyi-ui/src/views/dashboard/BarChart.vue
@@ -1,147 +1,160 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}">
-    <el-row :gutter="24">
-      <el-col :span="24" :xs="24">
-        <div>
-          <FullCalendar
-            ref="fullCalendar"
-            defaultView="dayGridMonth"
-            locale="zh-cn" 
-            :buttonText="buttonText"
-            :plugins="calendarPlugins"
-            :events="calendarEvents"
-            :eventLimit="true"
-            :displayEventEnd="true"
-            eventLimitText="更多"
-            @eventClick="handleEventClick"
-          />
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import FullCalendar from "@fullcalendar/vue";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import listPlugin from "@fullcalendar/list";
-import { getAllSchoolCalendars } from "@/api/benyi/calendar";
-export default {
-  name: "fullcalendar_page",
-  components: {
-    FullCalendar
-  },
-  props: {
-    className: {
-      type: String,
-      default: "chart"
-    },
-    width: {
-      type: String,
-      default: "100%"
-    },
-    height: {
-      type: String,
-      default: "480px"
-    }
-  },
-  data() {
-    return {
-       header: {
-        left: "prev,next today",
-        center: "title",
-        right: "dayGridMonth, listWeek"
-      },
-      buttonText: {
-        today: "今天",
-        month: "月",
-        list: "周列表"
-      },
-      calendarPlugins: [
-        // plugins must be defined in the JS
-        dayGridPlugin,
-        //timeGridPlugin,
-        //interactionPlugin, // needed for dateClick
-        listPlugin
-      ],
-      calendarWeekends: true,
-      calendarEvents: [
-        // initial event data
-        // {
-        //   title: 'Event Now',
-        //   start: new Date(),
-        //   color: '#A61000'
-        // }
-      ],
-      calendarApi: null,
-      calendarData: [],
-      queryParams: {}
-    };
-  },
-  created() {
-    getAllSchoolCalendars(this.queryParams).then(response => {
-      this.calendarEvents = response.calendarData;
-    });
-  },
-  methods: {
-    handleEventClick(info) {
-      this.msgSuccess("活动: " + info.event.title);
-    }
-  },
-  mounted() {
-    this.calendarApi = this.$refs.fullCalendar.getApi();
-  }
-};
-</script>
-
-<style  lang="scss" scope>
-// you must include each plugins' css
-// paths prefixed with ~ signify node_modules
-@import "~@fullcalendar/core/main.css";
-@import "~@fullcalendar/daygrid/main.css";
-@import "~@fullcalendar/timegrid/main.css";
-@import "~@fullcalendar/list/main.css";
-.calendar {
-  width: 820px;
-  height: 100%;
-}
-.fc-widget-content {
-  .fc-sun,
-  .fc-sat {
-    background: rgba(245, 246, 248, 0.6);
-    //background: rgba(109, 113, 121, 0.6);
-  }
-}
-.xs-btns-style {
-  @media screen and (max-width: 768px) {
-    display: flex;
-    flex-wrap: wrap;
-    .el-col {
-      width: auto;
-    }
-  }
-  @media screen and (min-width: 769px) {
-  }
-  .el-col {
-    margin-bottom: 10px;
-    text-align: center;
-  }
-}
-.btn {
-  width: 96px;
-}
-.no-border-btn {
-  border: none;
-}
-.fc-header-toolbar {
-  @media screen and (max-width: 768px) {
-    .fc-left > .fc-today-button,
-    .fc-right > .fc-listWeek-button {
-      display: none;
-    }
-  }
-}
-</style>
-
+<template>
+  <div
+    class="xs-height"
+    :class="className"
+    :style="{ height: height, width: width }"
+  >
+    <FullCalendar
+      ref="fullCalendar"
+      defaultView="dayGridMonth"
+      locale="zh-cn"
+      :buttonText="buttonText"
+      :plugins="calendarPlugins"
+      :events="calendarEvents"
+      :eventLimit="true"
+      :displayEventEnd="true"
+      eventLimitText="更多"
+      @eventClick="handleEventClick"
+    />
+  </div>
+</template>
+
+<script>
+import FullCalendar from "@fullcalendar/vue";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import { getAllSchoolCalendars } from "@/api/benyi/calendar";
+export default {
+  name: "fullcalendar_page",
+  components: {
+    FullCalendar
+  },
+  props: {
+    className: {
+      type: String,
+      default: "chart"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "480px"
+    }
+  },
+  data() {
+    return {
+      header: {
+        left: "prev,next today",
+        center: "title",
+        right: "dayGridMonth, listWeek"
+      },
+      buttonText: {
+        today: "今天",
+        month: "月",
+        list: "周列表"
+      },
+      calendarPlugins: [
+        // plugins must be defined in the JS
+        dayGridPlugin,
+        //timeGridPlugin,
+        //interactionPlugin, // needed for dateClick
+        listPlugin
+      ],
+      calendarWeekends: true,
+      calendarEvents: [
+        // initial event data
+        // {
+        //   title: 'Event Now',
+        //   start: new Date(),
+        //   color: '#A61000'
+        // }
+      ],
+      calendarApi: null,
+      calendarData: [],
+      queryParams: {}
+    };
+  },
+  created() {
+    getAllSchoolCalendars(this.queryParams).then(response => {
+      this.calendarEvents = response.calendarData;
+    });
+  },
+  methods: {
+    handleEventClick(info) {
+      this.msgSuccess("活动: " + info.event.title);
+    }
+  },
+  mounted() {
+    this.calendarApi = this.$refs.fullCalendar.getApi();
+  }
+};
+</script>
+
+<style lang="scss" scope>
+// you must include each plugins' css
+// paths prefixed with ~ signify node_modules
+@import "~@fullcalendar/core/main.css";
+@import "~@fullcalendar/daygrid/main.css";
+@import "~@fullcalendar/timegrid/main.css";
+@import "~@fullcalendar/list/main.css";
+.calendar {
+  width: 820px;
+  height: 100%;
+}
+.fc-widget-content {
+  .fc-scroller.fc-day-grid-container {
+    height: 100% !important;
+  }
+  .fc-sun,
+  .fc-sat {
+    background: rgba(245, 246, 248, 0.6);
+    //background: rgba(109, 113, 121, 0.6);
+  }
+}
+.xs-btns-style {
+  @media screen and (max-width: 768px) {
+    display: flex;
+    flex-wrap: wrap;
+    .el-col {
+      width: auto;
+    }
+  }
+
+  .el-col {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+}
+.btn {
+  width: 96px;
+}
+.no-border-btn {
+  border: none;
+}
+.fc-header-toolbar {
+  @media screen and (max-width: 768px) {
+    .fc-left > .fc-today-button,
+    .fc-right > .fc-listWeek-button {
+      display: none;
+    }
+  }
+}
+@media (max-width: 768.98px) {
+  .xs-height {
+    height: 100% !important;
+    .fc button {
+      height: 30px;
+    }
+    .fc-toolbar h2 {
+      font-size: 16px !important;
+    }
+    .fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
+      font-size: 12px;
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index 6bf3d8414..2c866c9d7 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -13,7 +13,7 @@
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
-          <bar-chart />
+          <bar-chart/>
         </div>
       </el-col>
     </el-row>
@@ -88,6 +88,7 @@ export default {
   background-color: rgb(240, 242, 245);
   position: relative;
 
+
   .el-card.is-always-shadow {
     box-shadow: none;
     border: 0;
@@ -95,7 +96,7 @@ export default {
 
   .chart-wrapper {
     background: #fff;
-    padding: 16px 16px 0;
+    padding: 16px;
     margin-bottom: 32px;
   }
 }
@@ -113,8 +114,14 @@ export default {
 }
 
 @media (max-width: 1024px) {
-  .chart-wrapper {
+  .dashboard-editor-container .chart-wrapper {
     padding: 8px;
   }
 }
+
+@media (max-width: 768.98px) {
+  .dashboard-editor-container {
+    padding: 10px;
+  }
+}
 </style>