update 页面优化

ruoyi-ui/src/assets/styles/index.scss

@@ -212,7 +212,7 @@ aside {
   }
 
   &.align-center {
-    align-content: center;
+    align-items: center;
   }
 
   &.justify-center {

ruoyi-ui/src/layout/components/Sidebar/Item.vue

@@ -21,7 +21,11 @@ export default {
     }
 
     if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
+      vnodes.push(
+        <el-tooltip slot='title' effect='dark' content={(title)} placement="bottom">
+        <span>{(title)}</span>
+        </el-tooltip>
+      )
     }
     return vnodes
   }

ruoyi-ui/src/views/benyi/assessment/history.vue

@@ -12,18 +12,23 @@
         :label="item.dictLabel"
         :name="item.dictLabel"
       >
-        <div>
+        <h2 class="result-title">综合评估结果</h2>
+        <div class="comprehensive">
           <radar-chart :psMsg="item.dictValue" />
         </div>
-        <div>
+        <h2 class="result-title">各项评估结果</h2>
-          <radar-chart_jk :psMsg="item.dictValue" />
+        <el-tabs
-        </div>
+          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 == '健康'
+                  p => p.parentId == item.dictValue && p.name == '健康'
                 )"
                 :key="itemLy.id"
               >
@@ -31,7 +36,7 @@
                 <div
                   class="block"
                   v-for="itemFzly in assessmentcontentList.filter(
-                (p) => p.parentId == itemLy.id
+                    p => p.parentId == itemLy.id
                   )"
                   :key="itemFzly.id"
                 >
@@ -41,7 +46,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"
                     >
@@ -52,7 +57,7 @@
                       <div
                         class="checkbox-content"
                         v-for="itemYs in assessmentcontentList.filter(
-                      (p) => p.parentId == itemMb.id
+                          p => p.parentId == itemMb.id
                         )"
                         :key="itemYs.id"
                       >
@@ -65,7 +70,30 @@
                 </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;

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;
@@ -262,11 +263,11 @@ export default {
         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;
+      }
+    }
+  }
+}
+@media (max-width: 768.98px) {
+  .title span {
+    font-size: 12px;
   }
 }
 </style>

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;
 }
+.el-tree{
+  max-height: calc(100vh - 180px);
+  overflow-y: auto;
+}
+.el-card {
+  max-height: calc(100vh - 130px);
+  overflow-y: auto;
+}
 </style>

ruoyi-ui/src/views/dashboard/BarChart.vue

@@ -1,8 +1,9 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}">
+  <div
-    <el-row :gutter="24">
+    class="xs-height"
-      <el-col :span="24" :xs="24">
+    :class="className"
-        <div>
+    :style="{ height: height, width: width }"
+  >
     <FullCalendar
       ref="fullCalendar"
       defaultView="dayGridMonth"
@@ -16,9 +17,6 @@
       @eventClick="handleEventClick"
     />
   </div>
-      </el-col>
-    </el-row>
-  </div>
 </template>
 
 <script>
@@ -108,6 +106,9 @@ export default {
   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);
@@ -122,8 +123,7 @@ export default {
       width: auto;
     }
   }
-  @media screen and (min-width: 769px) {
+
-  }
   .el-col {
     margin-bottom: 10px;
     text-align: center;
@@ -143,5 +143,18 @@ export default {
     }
   }
 }
+@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>
-

ruoyi-ui/src/views/index.vue

@@ -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>