Home Esplora Aiuto
Accedi
CocoRoboLabs
/
pbl-teacher-table
3
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

update

lsc 1 anno fa
parent
b0880a5dd1
commit
2d956a9389
40 ha cambiato i file con 727 aggiunte e 742 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 1 1
      dist/index.html
  2. 0 0
      dist/static/css/app.77dce3e782e39be143af829a02623e36.css
  3. 0 0
      dist/static/css/app.77dce3e782e39be143af829a02623e36.css.map
  4. 0 0
      dist/static/js/app.1a6c612a258f36438d0b.js
  5. 0 0
      dist/static/js/app.1a6c612a258f36438d0b.js.map
  6. 0 0
      dist/static/js/manifest.3512a67a6213c2df4180.js.map
  7. 99 0
      src/assets/css/button.css
  8. BIN
      src/assets/icon/dataCheck/djzz_icon_data.png
  9. BIN
      src/assets/icon/dataCheck/djzz_icon_data_active.png
  10. BIN
      src/assets/icon/dataCheck/ld_icon_data.png
  11. BIN
      src/assets/icon/dataCheck/ld_icon_data_active.png
  12. BIN
      src/assets/icon/dataCheck/rl_icon_data.png
  13. BIN
      src/assets/icon/dataCheck/rl_icon_data_active.png
  14. BIN
      src/assets/icon/dataCheck/sd_icon_data.png
  15. BIN
      src/assets/icon/dataCheck/sd_icon_data_active.png
  16. BIN
      src/assets/icon/dataCheck/yb_icon_data.png
  17. BIN
      src/assets/icon/dataCheck/yb_icon_data_active.png
  18. BIN
      src/assets/icon/dataCheck/zz_icon_data.png
  19. BIN
      src/assets/icon/dataCheck/zz_icon_data2.png
  20. BIN
      src/assets/icon/dataCheck/zz_icon_data2_active.png
  21. BIN
      src/assets/icon/dataCheck/zz_icon_data_active.png
  22. BIN
      src/assets/icon/test/data_title_icon.png
  23. 2 2
      src/components/pages/dataBoardNew/course/chartList/toolUse.vue
  24. 2 2
      src/components/pages/dataBoardNew/course/chartList/toolUse2.vue
  25. 183 283
      src/components/pages/dataBoardNew/course/index.vue
  26. 1 0
      src/components/pages/dataBoardNew/project/chartList/bar/teacherStudent.vue
  27. 2 2
      src/components/pages/dataBoardNew/project/chartList/toolUse.vue
  28. 61 29
      src/components/pages/dataBoardNew/project/index.vue
  29. 3 3
      src/components/pages/dataBoardNew/school/barToolUser/index.vue
  30. 216 326
      src/components/pages/dataBoardNew/school/index.vue
  31. 2 2
      src/components/pages/dataBoardNew/school/toolUser/index.vue
  32. 1 1
      src/components/pages/dataBoardNew/student/cateRank/index.vue
  33. 78 43
      src/components/pages/dataBoardNew/student/index.vue
  34. 1 1
      src/components/pages/dataBoardNew/student/studentInfo/index.vue
  35. 1 1
      src/components/pages/dataBoardNew/student/studentInfo3/index.vue
  36. 2 2
      src/components/pages/dataBoardNew/student/toolUser/index.vue
  37. 3 3
      src/components/pages/dataBoardNew/student/toolUser2/index.vue
  38. 1 1
      src/components/pages/dataBoardNew/teacher/chartList/cateRank.vue
  39. 2 2
      src/components/pages/dataBoardNew/teacher/chartList/toolUse.vue
  40. 66 38
      src/components/pages/dataBoardNew/teacher/index.vue

+ 1 - 1
dist/index.html
Vedi File 

@@ -25,7 +25,7 @@
 
       height: 100%;
 
       width: 100%;
 
       background: #e6eaf0;
 
-    }</style><link href=./static/css/app.e55cb618299a6b6cbcb2059a61510667.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3512a67a6213c2df4180.js></script><script type=text/javascript src=./static/js/vendor.920758910306febc0621.js></script><script type=text/javascript src=./static/js/app.a99e082cebb8fb524656.js></script></body></html><script>function stopSafari() {
 
+    }</style><link href=./static/css/app.77dce3e782e39be143af829a02623e36.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3512a67a6213c2df4180.js></script><script type=text/javascript src=./static/js/vendor.920758910306febc0621.js></script><script type=text/javascript src=./static/js/app.1a6c612a258f36438d0b.js></script></body></html><script>function stopSafari() {
 
     //阻止safari浏览器双击放大功能
 
     let lastTouchEnd = 0  //更新手指弹起的时间
 
     document.documentElement.addEventListener("touchstart", function (event) {

File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.77dce3e782e39be143af829a02623e36.css


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.77dce3e782e39be143af829a02623e36.css.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.1a6c612a258f36438d0b.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.1a6c612a258f36438d0b.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/manifest.3512a67a6213c2df4180.js.map


+ 99 - 0
src/assets/css/button.css
Vedi File 

@@ -330,3 +330,102 @@
 
 .test_icon_file{
 
   background-image: url('../icon/test/type_file_icon.png');
 
 }
 
+
 
+
 
+
 
+.dataBoard_check_box {
 
+  display: flex;
 
+  align-items: center;
 
+  margin: 5px auto;
 
+  width: fit-content;
 
+  height: 35px;
 
+  background: #FFFFFF8C;
 
+  border-radius: 3px;
 
+  font-size: 14px;
 
+  padding: 5px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.dataBoard_check_box>div {
 
+  height: 100%;
 
+  display: flex;
 
+  align-items: center;
 
+  padding: 0 12px;
 
+  cursor: pointer;
 
+  color: #00000099;
 
+}
 
+
 
+.dataBoard_check_box>.active {
 
+  background: #fff;
 
+}
 
+
 
+.dataBoard_check_box>.active>span {
 
+  background-image: linear-gradient(90deg, #3673E8 0%, #AD88FD 100%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+
 
+.dataBoard_check_box>.icon::before {
 
+  content: '';
 
+  width: 16px;
 
+  height: 16px;
 
+  background-size: 100% 100%;
 
+  margin-right: 5px;
 
+}
 
+
 
+.dataBoard_check_box>.rl_icon::before {
 
+  background-image: url('../icon/dataCheck/rl_icon_data.png');
 
+}
 
+
 
+.dataBoard_check_box>.yb_icon::before {
 
+  background-image: url('../icon/dataCheck/yb_icon_data.png');
 
+}
 
+
 
+.dataBoard_check_box>.zz_icon::before {
 
+  background-image: url('../icon/dataCheck/zz_icon_data.png');
 
+}
 
+
 
+.dataBoard_check_box>.zz_icon2::before {
 
+  background-image: url('../icon/dataCheck/zz_icon_data2.png');
 
+}
 
+
 
+.dataBoard_check_box>.sd_icon::before {
 
+  background-image: url('../icon/dataCheck/sd_icon_data.png');
 
+}
 
+
 
+.dataBoard_check_box>.ld_icon::before {
 
+  background-image: url('../icon/dataCheck/ld_icon_data.png');
 
+}
 
+
 
+.dataBoard_check_box>.djzz_icon::before {
 
+  background-image: url('../icon/dataCheck/djzz_icon_data.png');
 
+}
 
+
 
+
 
+.dataBoard_check_box>.active.rl_icon::before {
 
+  background-image: url('../icon/dataCheck/rl_icon_data_active.png');
 
+}
 
+
 
+.dataBoard_check_box>.active.yb_icon::before {
 
+  background-image: url('../icon/dataCheck/yb_icon_data_active.png');
 
+}
 
+
 
+.dataBoard_check_box>.active.zz_icon::before {
 
+  background-image: url('../icon/dataCheck/zz_icon_data_active.png');
 
+}
 
+
 
+.dataBoard_check_box>.active.zz_icon2::before {
 
+  background-image: url('../icon/dataCheck/zz_icon_data2_active.png');
 
+}
 
+
 
+.dataBoard_check_box>.active.sd_icon::before {
 
+  background-image: url('../icon/dataCheck/sd_icon_data_active.png');
 
+}
 
+
 
+.dataBoard_check_box>.active.ld_icon::before {
 
+  background-image: url('../icon/dataCheck/ld_icon_data_active.png');
 
+}
 
+
 
+.dataBoard_check_box>.active.djzz_icon::before {
 
+  background-image: url('../icon/dataCheck/djzz_icon_data_active.png');
 
+}

BIN
src/assets/icon/dataCheck/djzz_icon_data.png
Vedi File


BIN
src/assets/icon/dataCheck/djzz_icon_data_active.png
Vedi File


BIN
src/assets/icon/dataCheck/ld_icon_data.png
Vedi File


BIN
src/assets/icon/dataCheck/ld_icon_data_active.png
Vedi File


BIN
src/assets/icon/dataCheck/rl_icon_data.png
Vedi File


BIN
src/assets/icon/dataCheck/rl_icon_data_active.png
Vedi File


BIN
src/assets/icon/dataCheck/sd_icon_data.png
Vedi File


BIN
src/assets/icon/dataCheck/sd_icon_data_active.png
Vedi File


BIN
src/assets/icon/dataCheck/yb_icon_data.png
Vedi File


BIN
src/assets/icon/dataCheck/yb_icon_data_active.png
Vedi File


BIN
src/assets/icon/dataCheck/zz_icon_data.png
Vedi File


BIN
src/assets/icon/dataCheck/zz_icon_data2.png
Vedi File


BIN
src/assets/icon/dataCheck/zz_icon_data2_active.png
Vedi File


BIN
src/assets/icon/dataCheck/zz_icon_data_active.png
Vedi File


BIN
src/assets/icon/test/data_title_icon.png
Vedi File


+ 2 - 2
src/components/pages/dataBoardNew/course/chartList/toolUse.vue
Vedi File 

@@ -32,7 +32,7 @@ export default {
 
           },
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -45,7 +45,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],

+ 2 - 2
src/components/pages/dataBoardNew/course/chartList/toolUse2.vue
Vedi File 

@@ -28,7 +28,7 @@ export default {
 
           }
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -41,7 +41,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],

+ 183 - 283
src/components/pages/dataBoardNew/course/index.vue
Vedi File 

@@ -21,13 +21,13 @@
 
               <span>本月新增课程环比</span>
 
               <span v-if="loginCountMonthArray.length">{{
 
                 loginCountMonthArray[loginCountMonthArray.length - 1].course > 0
 
-                  ? (
 
-                      (loginCountMonthArray[loginCountMonthArray.length - 1]
 
-                        .course /
 
-                        allCourse) *
 
-                      100
 
-                    ).toFixed(0) + "%"
 
-                  : 0
 
+                ? (
 
+                  (loginCountMonthArray[loginCountMonthArray.length - 1]
 
+                    .course /
 
+                    allCourse) *
 
+                  100
 
+                ).toFixed(0) + "%"
 
+                : 0
 
               }}</span>
 
               <!-- <span>{{ weekCount }}</span> -->
 
               <!-- <span v-if="loginCountMonthArray.length">{{
 
@@ -50,49 +50,27 @@
 
               }}</span>
 
             </div>
 
           </div>
 
-          <TeaFre
 
-            style="height: calc(100% - 140px)"
 
-            :monthArray="loginCountMonthArray"
 
-          ></TeaFre>
 
+          <TeaFre style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></TeaFre>
 
         </div>
 
       </div>
 
       <div class="bottom">
 
         <div class="titleBox">
 
-          <div
 
-            class="title"
 
-            :class="{ isClick: skType == 0 }"
 
-            @click="skType = 0"
 
-            style="cursor: pointer; padding: 0 0 5px 0"
 
-          >
 
+          <div class="title" :class="{ isClick: skType == 0, noClick: skType != 0 }" @click="skType = 0"
 
+            style="cursor: pointer; padding: 0 0 5px 0">
 
             授课时长
 
           </div>
 
-          <div
 
-            class="title"
 
-            :class="{ isClick: skType == 1 }"
 
-            @click="skType = 1"
 
-            style="cursor: pointer; padding: 0 0 5px 0"
 
-          >
 
+          <div class="title" :class="{ isClick: skType == 1, noClick: skType != 1 }" @click="skType = 1"
 
+            style="cursor: pointer; padding: 0 0 5px 0">
 
             作业数量
 
           </div>
 
-          <el-select
 
-            v-if="skType == 0"
 
-            v-model="lType"
 
-            @change="typeChange1"
 
-            class="selectBox"
 
-            style="margin-left: auto"
 
-          >
 
+          <el-select v-if="skType == 0" v-model="lType" @change="typeChange1" class="selectBox" style="margin-left: auto">
 
             <!-- <el-option label="全部" value="all"></el-option> -->
 
             <el-option label="年级" value="grade"></el-option>
 
             <el-option label="主题" value="theme"></el-option>
 
             <el-option label="学科" value="subject"></el-option>
 
           </el-select>
 
-          <el-select
 
-            v-if="skType == 1"
 
-            v-model="lType1"
 
-            @change="typeChange2"
 
-            class="selectBox"
 
-            style="margin-left: auto"
 
-          >
 
+          <el-select v-if="skType == 1" v-model="lType1" @change="typeChange2" class="selectBox"
 
+            style="margin-left: auto">
 
             <!-- <el-option label="全部" value="all"></el-option> -->
 
             <el-option label="年级" value="grade"></el-option>
 
             <el-option label="主题" value="theme"></el-option>
 
@@ -150,28 +128,14 @@
 
               }}</span>
 
             </div>
 
           </div>
 
-          <Bar
 
-            style="height: calc(100% - 100px)"
 
-            v-if="skType == 0 && !oType"
 
-            :workList="tedurArray"
 
-          ></Bar>
 
-          <ToolUse2
 
-            style="height: calc(100% - 100px)"
 
-            v-if="skType == 0 && oType"
 
-            :Josn="courseWorksCountYearArray2"
 
-          ></ToolUse2>
 
-
 
-          <ToolUse
 
-            style="height: calc(100% - 100px)"
 
-            v-if="skType == 1 && !oType2"
 
-            :Josn="courseWorksCountYearArray"
 
-          ></ToolUse>
 
-          <Bar2
 
-            style="height: calc(100% - 100px)"
 
-            v-if="skType == 1 && oType2"
 
-            :workList="tedurArray2"
 
-          ></Bar2>
 
-          <div class="otherCss" v-if="skType == 0">
 
+          <Bar style="height: calc(100% - 120px)" v-if="skType == 0 && !oType" :workList="tedurArray"></Bar>
 
+          <ToolUse2 style="height: calc(100% - 120px)" v-if="skType == 0 && oType" :Josn="courseWorksCountYearArray2">
 
+          </ToolUse2>
 
+
 
+          <ToolUse style="height: calc(100% - 120px)" v-if="skType == 1 && !oType2" :Josn="courseWorksCountYearArray">
 
+          </ToolUse>
 
+          <Bar2 style="height: calc(100% - 120px)" v-if="skType == 1 && oType2" :workList="tedurArray2"></Bar2>
 
+          <!-- <div class="otherCss" v-if="skType == 0">
 
             <div v-if="!oType">切换为热力图</div>
 
             <div v-if="oType">切换为柱状图</div>
 
             <div class="otherImg" @click="otherEchart">
 
@@ -184,6 +148,14 @@
 
             <div class="otherImg" @click="otherEchart2">
 
               <img src="../../../../assets/icon/other.png" alt="" />
 
             </div>
 
+          </div> -->
 
+          <div class="dataBoard_check_box" v-if="skType == 0">
 
+            <div class="icon zz_icon2" :class="{ active: !oType }" @click="oType = false"><span>柱状图</span></div>
 
+            <div class="icon rl_icon" :class="{ active: oType }" @click="oType = true"><span>热力图</span></div>
 
+          </div>
 
+          <div class="dataBoard_check_box" v-if="skType == 1">
 
+            <div class="icon zz_icon2" :class="{ active: oType2 }" @click="oType2 = true"><span>柱状图</span></div>
 
+            <div class="icon rl_icon" :class="{ active: !oType2 }" @click="oType2 = false"><span>热力图</span></div>
 
           </div>
 
         </div>
 
       </div>
 
@@ -192,20 +164,12 @@
 
       <div class="top">
 
         <div class="courseCenterTop">
 
           <div class="titleBox">
 
-            <div
 
-              class="title"
 
-              :class="{ isClick: courseType == 0 }"
 
-              @click="courseType = 0"
 
-              style="cursor: pointer; padding: 0 0 5px 0"
 
-            >
 
+            <div class="title" :class="{ isClick: courseType == 0, noClick: courseType != 0 }" @click="courseType = 0"
 
+              style="cursor: pointer; padding: 0 0 5px 0">
 
               课程分布
 
             </div>
 
-            <div
 
-              class="title"
 
-              :class="{ isClick: courseType == 1 }"
 
-              @click="courseType = 1"
 
-              style="cursor: pointer; padding: 0 0 5px 0"
 
-            >
 
+            <div class="title" :class="{ isClick: courseType == 1, noClick: courseType != 1 }" @click="courseType = 1"
 
+              style="cursor: pointer; padding: 0 0 5px 0">
 
               课程总数变化
 
             </div>
 
           </div>
 
@@ -215,16 +179,8 @@
 
         </div>
 
 
         <div class="dataBox">
 
-          <CateRank
 
-            v-if="courseType == 0"
 
-            style="height: calc(100% - 10px)"
 
-            :courseArray="courseArray"
 
-          ></CateRank>
 
-          <CourseNum
 
-            v-if="courseType == 1"
 
-            style="height: calc(100%)"
 
-            :weekCourse2="weekCourse2"
 
-          ></CourseNum>
 
+          <CateRank v-if="courseType == 0" style="height: calc(100% - 10px)" :courseArray="courseArray"></CateRank>
 
+          <CourseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse2"></CourseNum>
 
         </div>
 
       </div>
 
       <div class="bottom">
 
@@ -232,7 +188,7 @@
 
           <div class="title">课程实施程度</div>
 
         </div>
 
         <div class="dataBox">
 
-          <div class="allBox" v-if="!shType" style="height: calc(100% - 30px)">
 
+          <div class="allBox" v-if="!shType" style="height: calc(100% - 50px)">
 
             <div class="allBox_left">
 
               <CourseTime v-if="!shType" :pusaDep="pusaDep"></CourseTime>
 
             </div>
 
@@ -240,75 +196,43 @@
 
               <div class="depth">
 
                 <span>已提交作业</span>
 
                 <div>
 
-                  <el-progress
 
-                    :width="80"
 
-                    type="circle"
 
-                    :percentage="
 
-                      allCourse
 
-                        ? parseInt(
 
-                            ((haveWorksCourse / allCourse) * 100).toFixed(0)
 
-                          )
 
-                        : 0
 
-                    "
 
-                    :stroke-width="5"
 
-                    :format="format"
 
-                    color="#106BFF"
 
-                  ></el-progress>
 
+                  <el-progress :width="80" type="circle" :percentage="allCourse
 
+                      ? parseInt(
 
+                        ((haveWorksCourse / allCourse) * 100).toFixed(0)
 
+                      )
 
+                      : 0
 
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
                 </div>
 
               </div>
 
               <div class="depth">
 
                 <span>设置评价</span>
 
                 <div>
 
-                  <el-progress
 
-                    :width="80"
 
-                    type="circle"
 
-                    :percentage="
 
-                      allCourse
 
-                        ? parseInt(((evaCount / allCourse) * 100).toFixed(0))
 
-                        : 0
 
-                    "
 
-                    :stroke-width="5"
 
-                    :format="format"
 
-                    color="#106BFF"
 
-                  ></el-progress>
 
+                  <el-progress :width="80" type="circle" :percentage="allCourse
 
+                      ? parseInt(((evaCount / allCourse) * 100).toFixed(0))
 
+                      : 0
 
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
                 </div>
 
               </div>
 
               <div class="depth">
 
                 <span>已评价课程</span>
 
                 <div>
 
-                  <el-progress
 
-                    :width="80"
 
-                    type="circle"
 
-                    :percentage="
 
-                      allCourse
 
-                        ? parseInt(
 
-                            ((evaWorksCount / allCourse) * 100).toFixed(0)
 
-                          )
 
-                        : 0
 
-                    "
 
-                    :stroke-width="5"
 
-                    :format="format"
 
-                    color="#106BFF"
 
-                  ></el-progress>
 
+                  <el-progress :width="80" type="circle" :percentage="allCourse
 
+                      ? parseInt(
 
+                        ((evaWorksCount / allCourse) * 100).toFixed(0)
 
+                      )
 
+                      : 0
 
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
                 </div>
 
               </div>
 
               <div class="depth">
 
                 <span>教学评一体化</span>
 
                 <div>
 
-                  <el-progress
 
-                    :width="80"
 
-                    type="circle"
 
-                    :percentage="
 
-                      allCourse
 
-                        ? parseInt(
 
-                            ((evaWorksCount / allCourse) * 100).toFixed(0)
 
-                          )
 
-                        : 0
 
-                    "
 
-                    :stroke-width="5"
 
-                    :format="format"
 
-                    color="#106BFF"
 
-                  ></el-progress>
 
+                  <el-progress :width="80" type="circle" :percentage="allCourse
 
+                      ? parseInt(
 
+                        ((evaWorksCount / allCourse) * 100).toFixed(0)
 
+                      )
 
+                      : 0
 
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -324,8 +248,8 @@
 
               <!-- <span>{{ weekCount }}</span> -->
 
               <span>{{
 
                 isCourseCount
 
-                  ? ((isCourseCount / allCourseCount) * 100).toFixed(0) + "%"
 
-                  : "0%"
 
+                ? ((isCourseCount / allCourseCount) * 100).toFixed(0) + "%"
 
+                : "0%"
 
               }}</span>
 
             </div>
 
             <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
 
@@ -343,19 +267,18 @@
 
               }}</span>
 
             </div>
 
           </div>
 
-          <WorkNum
 
-            style="height: calc(100% - 95px)"
 
-            :workNumList="workNumList"
 
-            @openCourse="openCourse"
 
-            v-if="shType"
 
-          >
 
+          <WorkNum style="height: calc(100% - 115px)" :workNumList="workNumList" @openCourse="openCourse" v-if="shType">
 
           </WorkNum>
 
-          <div class="otherCss">
 
+          <!-- <div class="otherCss">
 
             <div v-if="!shType">转换为散点图</div>
 
             <div v-if="shType">转换为漏斗图</div>
 
             <div class="otherImg" @click="shEchart">
 
               <img src="../../../../assets/icon/other.png" alt="" />
 
             </div>
 
+          </div> -->
 
+          <div class="dataBoard_check_box">
 
+            <div class="icon sd_icon" :class="{ active: shType }" @click="shType = true"><span>散点图</span></div>
 
+            <div class="icon ld_icon" :class="{ active: !shType }" @click="shType = false"><span>漏斗图</span></div>
 
           </div>
 
         </div>
 
       </div>
 
@@ -363,37 +286,22 @@
 
     <div class="right">
 
       <div class="top" style="border-radius: 5px">
 
         <div class="titleBox" style="justify-content: space-between">
 
-          <div
 
-            style="
 
+          <div style="
 
               display: flex;
 
               flex-direction: row;
 
               flex-wrap: nowrap;
 
               align-items: center;
 
-            "
 
-          >
 
-            <div
 
-              class="title"
 
-              :class="{ isClick: toolType == 0 }"
 
-              @click="toolType = 0"
 
-              style="cursor: pointer; padding: 0 0 5px 0"
 
-            >
 
+            ">
 
+            <div class="title" :class="{ isClick: toolType == 0, noClick: toolType != 0 }" @click="toolType = 0"
 
+              style="cursor: pointer; padding: 0 0 5px 0">
 
               课程占比
 
             </div>
 
-            <div
 
-              class="title"
 
-              :class="{ isClick: toolType == 1 }"
 
-              @click="toolType = 1"
 
-              style="cursor: pointer; padding: 0 0 5px 0"
 
-            >
 
+            <div class="title" :class="{ isClick: toolType == 1, noClick: toolType != 1 }" @click="toolType = 1"
 
+              style="cursor: pointer; padding: 0 0 5px 0">
 
               工具使用
 
             </div>
 
           </div>
 
-          <el-select
 
-            v-model="cType4"
 
-            @change="typeChange"
 
-            class="selectBox"
 
-            v-if="toolType == 0"
 
-          >
 
+          <el-select v-model="cType4" @change="typeChange" class="selectBox" v-if="toolType == 0">
 
             <!-- <el-option label="全部" value=""></el-option> -->
 
             <el-option label="年级" value="grade"></el-option>
 
             <el-option label="主题" value="theme"></el-option>
 
@@ -401,16 +309,8 @@
 
           </el-select>
 
         </div>
 
         <div class="dataBox">
 
-          <CourseAna
 
-            style="height: calc(100%)"
 
-            :courseNumberArray="courseNumberArray"
 
-            v-if="toolType == 0"
 
-          ></CourseAna>
 
-          <ToolChart
 
-            style="height: calc(100%)"
 
-            :toolArray="toolList"
 
-            v-if="toolType == 1"
 
-          ></ToolChart>
 
+          <CourseAna style="height: calc(100%)" :courseNumberArray="courseNumberArray" v-if="toolType == 0"></CourseAna>
 
+          <ToolChart style="height: calc(100%)" :toolArray="toolList" v-if="toolType == 1"></ToolChart>
 
         </div>
 
       </div>
 
       <div class="bottom">
 
@@ -418,16 +318,8 @@
 
           <div class="title">课程协同情况</div>
 
         </div>
 
         <div class="dataBox">
 
-          <WorkTime
 
-            style="height: calc(100% - 25px)"
 
-            :personArray="personList"
 
-            v-if="xtType"
 
-          ></WorkTime>
 
-          <Subjuect
 
-            style="height: calc(100% - 25px)"
 
-            v-if="!xtType"
 
-            :resultSubject="resultSubject"
 
-          ></Subjuect>
 
+          <WorkTime style="height: calc(100% - 25px)" :personArray="personList" v-if="xtType"></WorkTime>
 
+          <Subjuect style="height: calc(100% - 25px)" v-if="!xtType" :resultSubject="resultSubject"></Subjuect>
 
           <div class="otherCss">
 
             <div v-if="!xtType">转换为人员协同</div>
 
             <div v-if="xtType">转换为学科协同</div>
 
@@ -438,24 +330,10 @@
 
         </div>
 
       </div>
 
     </div>
 
-    <el-dialog
 
-      title="课程分布"
 
-      :visible.sync="allScreen"
 
-      :append-to-body="true"
 
-      width="100%"
 
-      :before-close="handleClose"
 
-      class="dialog_diy"
 
-    >
 
-      <CateRank
 
-        v-if="courseType == 0"
 
-        style="height: calc(100%)"
 
-        :courseArray="courseArray"
 
-      ></CateRank>
 
-      <CourseNum
 
-        v-if="courseType == 1"
 
-        style="height: calc(100%)"
 
-        :weekCourse2="weekCourse2"
 
-      ></CourseNum>
 
+    <el-dialog title="课程分布" :visible.sync="allScreen" :append-to-body="true" width="100%" :before-close="handleClose"
 
+      class="dialog_diy">
 
+      <CateRank v-if="courseType == 0" style="height: calc(100%)" :courseArray="courseArray"></CateRank>
 
+      <CourseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse2"></CourseNum>
 
     </el-dialog>
 
   </div>
 
 </template>
 
@@ -934,7 +812,7 @@ export default {
 
           : [];
 
         if (this.lType1 == "all") {
 
           if (this.allCourseWorks1[i].id) {
 
-            worksCount ++;
 
+            worksCount++;
 
           }
 
           if (haveWorksCourse.length == 0) {
 
             haveWorksCourse.push(this.allCourseWorks1[i].courseid);
 
@@ -948,7 +826,7 @@ export default {
 
         } else if (this.lType1 == "grade") {
 
           if (this.hasCommonValue(this.gradeList, _type)) {
 
             if (this.allCourseWorks1[i].id) {
 
-              worksCount ++
 
+              worksCount++
 
             }
 
             if (haveWorksCourse.length == 0) {
 
               haveWorksCourse.push(this.allCourseWorks1[i].courseid);
 
@@ -963,7 +841,7 @@ export default {
 
         } else if (this.lType1 == "subject") {
 
           if (this.hasCommonValue(this.subjectList2, _type)) {
 
             if (this.allCourseWorks1[i].id) {
 
-              worksCount ++
 
+              worksCount++
 
             }
 
             if (haveWorksCourse.length == 0) {
 
               haveWorksCourse.push(this.allCourseWorks1[i].courseid);
 
@@ -978,7 +856,7 @@ export default {
 
         } else {
 
           if (this.hasCommonValue(this.thList, _type)) {
 
             if (this.allCourseWorks1[i].id) {
 
-              worksCount ++
 
+              worksCount++
 
             }
 
             if (haveWorksCourse.length == 0) {
 
               haveWorksCourse.push(this.allCourseWorks1[i].courseid);
 
@@ -1794,20 +1672,20 @@ export default {
 
   height: 100%;
 
 }
 
 
-.left > .top {
 
+.left>.top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
 }
 
 
-.left > .bottom {
 
+.left>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1816,25 +1694,25 @@ export default {
 
 }
 
 
 .center {
 
-  width: calc(100% / 4 * 2 - 40px);
 
+  width: calc(100% / 4 * 2 - 20px);
 
   height: 100%;
 
-  margin: 0 20px;
 
+  margin: 0 10px;
 
 }
 
 
-.center > .top {
 
+.center>.top {
 
   width: 100%;
 
-  height: calc(100% / 5 * 3 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
 }
 
 
-.center > .bottom {
 
+.center>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1847,20 +1725,20 @@ export default {
 
   height: 100%;
 
 }
 
 
-.right > .top {
 
+.right>.top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 16px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
 }
 
 
-.right > .bottom {
 
+.right>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1881,6 +1759,16 @@ export default {
 
   padding: 0 15px;
 
   box-sizing: border-box;
 
   width: 100%;
 
+  position: relative;
 
+}
 
+
 
+.titleBox::after {
 
+  content: '';
 
+  position: absolute;
 
+  height: 2px;
 
+  width: calc(100% - 30px);
 
+  bottom: 0;
 
+  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
 
 }
 
 
 .allScreen {
 
@@ -1891,7 +1779,7 @@ export default {
 
   cursor: pointer;
 
 }
 
 
-.allScreen > img {
 
+.allScreen>img {
 
   width: 100%;
 
   height: 100%;
 
 }
 
@@ -1910,9 +1798,22 @@ export default {
 
 
 .title {
 
   color: #060e17;
 
-  margin-right: 10px;
 
+  margin-right: 25px;
 
+  font-weight: 700;
 
+  display: flex;
 
+  align-items: center;
 
 }
 
 
+.title::before{
 
+  content: '';
 
+  background-image: url('../../../../assets/icon/test/data_title_icon.png');
 
+  background-size: 100% 100%;
 
+  width: 20px;
 
+  height: 20px;
 
+  margin-right: 5px;
 
+}
 
+
 
+
 
 .teaMiddle {
 
   width: calc(100% / 2 - 10px);
 
   height: 60px;
 
@@ -1931,38 +1832,32 @@ export default {
 
 }
 
 
 .cNum {
 
-  background: linear-gradient(
 
-    180deg,
 
-    rgb(125, 227, 174, 0.2) 0%,
 
-    rgb(23, 196, 105, 0.3) 100%
 
-  ) !important;
 
+  background: linear-gradient(180deg,
 
+      rgb(125, 227, 174, 0.2) 0%,
 
+      rgb(23, 196, 105, 0.3) 100%) !important;
 
 }
 
 
 .tNum {
 
-  background: linear-gradient(
 
-    180deg,
 
-    rgb(174, 204, 254, 0.2) 0%,
 
-    rgb(54, 129, 252, 0.3) 100%
 
-  ) !important;
 
+  background: linear-gradient(180deg,
 
+      rgb(174, 204, 254, 0.2) 0%,
 
+      rgb(54, 129, 252, 0.3) 100%) !important;
 
 }
 
 
 .tSum {
 
-  background: linear-gradient(
 
-    180deg,
 
-    rgb(125, 227, 174, 0.2) 0%,
 
-    rgb(23, 196, 105, 0.3) 100%
 
-  ) !important;
 
+  background: linear-gradient(180deg,
 
+      rgb(125, 227, 174, 0.2) 0%,
 
+      rgb(23, 196, 105, 0.3) 100%) !important;
 
 }
 
 
-.teaLeft > div:first-child,
 
-.teaMiddle > div:first-child {
 
+.teaLeft>div:first-child,
 
+.teaMiddle>div:first-child {
 
   font-size: 12px;
 
   font-weight: 400;
 
   color: #565e6a;
 
 }
 
 
-.teaLeft > div:last-child,
 
-.teaMiddle > div:last-child {
 
+.teaLeft>div:last-child,
 
+.teaMiddle>div:last-child {
 
   font-size: 22px;
 
   font-weight: bold;
 
   color: #060e17;
 
@@ -1978,12 +1873,13 @@ export default {
 
   margin-left: 10px;
 
 }
 
 
-.selectBox >>> .el-input__inner {
 
+.selectBox>>>.el-input__inner {
 
   height: 30px;
 
   line-height: 30px;
 
+  border: 1px solid #3681FC;
 
 }
 
 
-.selectBox >>> .el-input__icon {
 
+.selectBox>>>.el-input__icon {
 
   line-height: 30px;
 
 }
 
 
@@ -1995,17 +1891,22 @@ export default {
 
   margin: 0 0 0 15px;
 
 }
 
 
-.timeDiv > div {
 
+.timeDiv>div {
 
   margin-right: 10px;
 
   cursor: pointer;
 
 }
 
 
 .isClick {
 
-  color: #1684fc;
 
-  border-bottom: 2px solid #1684fc;
 
+  /* color: #1684fc;
 
+  border-bottom: 2px solid #1684fc; */
 
   box-sizing: border-box;
 
 }
 
 
+.noClick{
 
+  font-weight: 500;
 
+  opacity: .6;
 
+}
 
+
 
 .otherCss {
 
   display: flex;
 
   flex-direction: row;
 
@@ -2021,7 +1922,7 @@ export default {
 
   cursor: pointer;
 
 }
 
 
-.otherImg > img {
 
+.otherImg>img {
 
   width: 100%;
 
   height: 100%;
 
 }
 
@@ -2058,14 +1959,13 @@ export default {
 
   justify-content: center;
 
 }
 
 
-.depth > span:nth-child(1) {
 
+.depth>span:nth-child(1) {
 
   font-size: 14px;
 
   font-weight: 700;
 
   margin: 0 0 10px;
 
 }
 
 
-.depth > div:nth-child(1) {
 
-}
 
+.depth>div:nth-child(1) {}
 
 
 .info_box {
 
   display: flex;
 
@@ -2076,89 +1976,89 @@ export default {
 
   margin: 0 auto;
 
 }
 
 
-.info_box > .info2,
 
-.info_box > .info3,
 
-.info_box > .info {
 
+.info_box>.info2,
 
+.info_box>.info3,
 
+.info_box>.info {
 
   width: calc(50% - 10px);
 
   display: flex;
 
-  flex-direction: row;
 
+  flex-direction: column-reverse;
 
   flex-wrap: nowrap;
 
   height: 60px;
 
-  justify-content: space-between;
 
-  align-items: center;
 
+  justify-content: center;
 
+  /* align-items: center; */
 
   padding: 0 10px;
 
   box-sizing: border-box;
 
   margin-bottom: 10px;
 
   border-radius: 5px;
 
 }
 
 
-.info_box > .info2 {
 
+.info_box>.info2 {
 
   width: calc(100% / 4 - 10px);
 
   /* align-items: flex-end; */
 
 }
 
 
-.info_box > .info3 {
 
+.info_box>.info3 {
 
   width: 100%;
 
   margin-bottom: 5px;
 
 }
 
 
-.info_box > .info2 > span:nth-child(1),
 
-.info_box > .info3 > span:nth-child(1),
 
-.info_box > .info > span:nth-child(1) {
 
+.info_box>.info2>span:nth-child(1),
 
+.info_box>.info3>span:nth-child(1),
 
+.info_box>.info>span:nth-child(1) {
 
   font-size: 12px;
 
   /* margin: 0 0 0 20px; */
 
   color: #565e6a;
 
-  width: 60px;
 
+  /* width: 60px; */
 
   white-space: pre-wrap;
 
   word-break: break-all;
 
 }
 
 
-.info_box > .info2 > span:nth-child(2),
 
-.info_box > .info3 > span:nth-child(2),
 
-.info_box > .info > span:nth-child(2) {
 
+.info_box>.info2>span:nth-child(2),
 
+.info_box>.info3>span:nth-child(2),
 
+.info_box>.info>span:nth-child(2) {
 
   font-size: 24px;
 
-  /* font-weight: 700; */
 
+  font-weight: 700;
 
 }
 
 
 .blueBG {
 
-  background: rgb(243, 248, 253);
 
-  border: 2px solid rgb(234, 246, 255);
 
+  /* background: rgb(243, 248, 253);
 
+  border: 2px solid rgb(234, 246, 255); */
 
 }
 
 
-.dialog_diy >>> .el-dialog {
 
+.dialog_diy>>>.el-dialog {
 
   height: 100%;
 
   margin: 0vh auto !important;
 
 }
 
 
-.dialog_diy >>> .el-dialog__header {
 
+.dialog_diy>>>.el-dialog__header {
 
   background: #454545 !important;
 
   padding: 15px 20px;
 
 }
 
 
-.dialog_diy >>> .el-dialog__body {
 
+.dialog_diy>>>.el-dialog__body {
 
   height: calc(100% - 124px);
 
   box-sizing: border-box;
 
   padding: 0px;
 
 }
 
 
-.dialog_diy >>> .el-dialog__title {
 
+.dialog_diy>>>.el-dialog__title {
 
   color: #fff;
 
 }
 
 
-.dialog_diy >>> .el-dialog__headerbtn {
 
+.dialog_diy>>>.el-dialog__headerbtn {
 
   top: 19px;
 
 }
 
 
-.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
 
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
 
   color: #fff;
 
 }
 
 
-.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
 
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
 
   color: #fff;
 
 }
 
 
-.dialog_diy >>> .el-dialog__body,
 
-.dialog_diy >>> .el-dialog__footer {
 
+.dialog_diy>>>.el-dialog__body,
 
+.dialog_diy>>>.el-dialog__footer {
 
   background: rgb(rgb(240, 242, 245));
 
   overflow: hidden;
 
 }

+ 1 - 0
src/components/pages/dataBoardNew/project/chartList/bar/teacherStudent.vue
Vedi File 

@@ -31,6 +31,7 @@ export default {
 
             },
 
             option: {
 
                 chart: {
 
+                    backgroundColor: 'rgba(0,0,0,0)',
 
                     type: 'column',
 
                     inverted: true
 
                 },

+ 2 - 2
src/components/pages/dataBoardNew/project/chartList/toolUse.vue
Vedi File 

@@ -28,7 +28,7 @@ export default {
 
           }
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -41,7 +41,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],

+ 61 - 29
src/components/pages/dataBoardNew/project/index.vue
Vedi File 

@@ -113,11 +113,11 @@
 
     <div class="center">
 
       <div class="top">
 
         <div class="titleBox">
 
-          <div class="title" :class="{ isClick: courseType == 0 }" @click="courseType = 0"
 
+          <div class="title" :class="{ isClick: courseType == 0, noClick: courseType != 0 }" @click="courseType = 0"
 
             style="cursor: pointer; padding: 0 0 5px 0">
 
             项目分布
 
           </div>
 
-          <div class="title" :class="{ isClick: courseType == 1 }" @click="courseType = 1"
 
+          <div class="title" :class="{ isClick: courseType == 1, noClick: courseType != 1 }" @click="courseType = 1"
 
             style="cursor: pointer; padding: 0 0 5px 0">
 
             项目总数增幅
 
           </div>
 
@@ -161,7 +161,7 @@
 
           </div> -->
 
         </div>
 
         <div class="dataBox">
 
-          <div v-if="!shType" style="height: calc(100% - 35px);overflow: auto;">
 
+          <div v-if="!shType" style="height: calc(100% - 55px);overflow: auto;">
 
             <!-- <barFinish style="height: calc(100% / 3 - 10px);"></barFinish> -->
 
             <!-- <barCCourse style="height: calc(100% / 3 - 10px);"></barCCourse> -->
 
             <barTeacherStudent style="height: calc(100%);" :tsArray="tsArray"></barTeacherStudent>
 
@@ -187,13 +187,17 @@
 
               <span>{{ worksCount && allCourse ? (worksCount / allCourse).toFixed(0) : 0 }}</span>
 
             </div>
 
           </div>
 
-          <WorkNum v-if="shType" style="height: calc(100% - 105px)" :workNumList="workNumList" @openCourse="openCourse"></WorkNum>
 
-          <div class="otherCss">
 
+          <WorkNum v-if="shType" style="height: calc(100% - 125px)" :workNumList="workNumList" @openCourse="openCourse"></WorkNum>
 
+          <!-- <div class="otherCss">
 
             <div v-if="!shType">转换为散点图</div>
 
             <div v-if="shType">转换为堆积柱状图</div>
 
             <div class="otherImg" @click="shEchart">
 
               <img src="../../../../assets/icon/other.png" alt="" />
 
             </div>
 
+          </div> -->
 
+          <div class="dataBoard_check_box">
 
+            <div class="icon sd_icon" :class="{ active: shType }" @click="shType = true"><span>散点图</span></div>
 
+            <div class="icon djzz_icon" :class="{ active: !shType }" @click="shType = false"><span>堆积柱状图</span></div>
 
           </div>
 
         </div>
 
       </div>
 
@@ -207,11 +211,11 @@
 
               flex-wrap: nowrap;
 
               align-items: center;
 
             ">
 
-            <div class="title" :class="{ isClick: toolType == 1 }" @click="toolType = 1"
 
+            <div class="title" :class="{ isClick: toolType == 1, noClick: toolType != 1 }" @click="toolType = 1"
 
               style="cursor: pointer; padding: 0 0 5px 0">
 
               工具使用
 
             </div>
 
-            <div class="title" :class="{ isClick: toolType == 0 }" @click="toolType = 0"
 
+            <div class="title" :class="{ isClick: toolType == 0, noClick: toolType != 0 }" @click="toolType = 0"
 
               style="cursor: pointer; padding: 0 0 5px 0">
 
               项目占比
 
             </div>
 
@@ -919,10 +923,10 @@ export default {
 
 
 .left>.top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -930,7 +934,7 @@ export default {
 
 
 .left>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -939,17 +943,17 @@ export default {
 
 }
 
 
 .center {
 
-  width: calc(100% / 4 * 2 - 40px);
 
+  width: calc(100% / 4 * 2 - 20px);
 
   height: 100%;
 
-  margin: 0 20px;
 
+  margin: 0 10px;
 
 }
 
 
 .center>.top {
 
   width: 100%;
 
-  height: calc(100% / 5 * 3 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -957,7 +961,7 @@ export default {
 
 
 .center>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -972,18 +976,18 @@ export default {
 
 
 .right>.top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 16px;
 
-  margin: 0 0 20px 0;
 
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
+  margin: 0 0 10px 0;
 
+  background: linear-gradient(180deg, 5pxrgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
 }
 
 
 .right>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -998,8 +1002,17 @@ export default {
 
   padding: 0 15px;
 
   box-sizing: border-box;
 
   width: 100%;
 
+  position: relative;
 
 }
 
 
+.titleBox::after {
 
+  content: '';
 
+  position: absolute;
 
+  height: 2px;
 
+  width: calc(100% - 30px);
 
+  bottom: 0;
 
+  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
 
+}
 
 .dataBox {
 
   height: calc(100% - 40px);
 
   width: 100%;
 
@@ -1014,9 +1027,22 @@ export default {
 
 
 .title {
 
   color: #060e17;
 
-  margin-right: 10px;
 
+  margin-right: 25px;
 
+  font-weight: 700;
 
+  display: flex;
 
+  align-items: center;
 
 }
 
 
+.title::before{
 
+  content: '';
 
+  background-image: url('../../../../assets/icon/test/data_title_icon.png');
 
+  background-size: 100% 100%;
 
+  width: 20px;
 
+  height: 20px;
 
+  margin-right: 5px;
 
+}
 
+
 
+
 
 .teaMiddle {
 
   width: calc(100% / 2 - 10px);
 
   height: 60px;
 
@@ -1079,6 +1105,7 @@ export default {
 
 .selectBox>>>.el-input__inner {
 
   height: 30px;
 
   line-height: 30px;
 
+  border: 1px solid #3681FC;
 
 }
 
 
 .selectBox>>>.el-input__icon {
 
@@ -1099,11 +1126,16 @@ export default {
 
 }
 
 
 .isClick {
 
-  color: #1684fc;
 
-  border-bottom: 2px solid #1684fc;
 
+  /* color: #1684fc;
 
+  border-bottom: 2px solid #1684fc; */
 
   box-sizing: border-box;
 
 }
 
 
+.noClick{
 
+  font-weight: 500;
 
+  opacity: .6;
 
+}
 
+
 
 .otherCss {
 
   display: flex;
 
   flex-direction: row;
 
@@ -1178,11 +1210,11 @@ export default {
 
 .info_box>.info {
 
   width: calc(50% - 10px);
 
   display: flex;
 
-  flex-direction: row;
 
+  flex-direction: column-reverse;
 
   flex-wrap: nowrap;
 
   height: 60px;
 
-  justify-content: space-between;
 
-  align-items: center;
 
+  justify-content: center;
 
+  /* align-items: center; */
 
   padding: 0 10px;
 
   box-sizing: border-box;
 
   margin-bottom: 10px;
 
@@ -1205,7 +1237,7 @@ export default {
 
   font-size: 12px;
 
   /* margin: 0 0 0 20px; */
 
   color: #565e6a;
 
-  width: 60px;
 
+  /* width: 60px; */
 
   white-space: pre-wrap;
 
   word-break: break-all;
 
 }
 
@@ -1214,11 +1246,11 @@ export default {
 
 .info_box>.info3>span:nth-child(2),
 
 .info_box>.info>span:nth-child(2) {
 
   font-size: 24px;
 
-  /* font-weight: 700; */
 
+  font-weight: 700;
 
 }
 
 
 .blueBG {
 
-  background: rgb(243, 248, 253);
 
-  border: 2px solid rgb(234, 246, 255);
 
+  /* background: rgb(243, 248, 253);
 
+  border: 2px solid rgb(234, 246, 255); */
 
 }
 
 </style>

+ 3 - 3
src/components/pages/dataBoardNew/school/barToolUser/index.vue
Vedi File 

@@ -28,7 +28,7 @@ export default {
 
           }
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -41,7 +41,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],
 
@@ -195,7 +195,7 @@ export default {
 
   height: 170px;
 
   /* height: 500px; */
 
   /* margin: 15px 5px 0 0; */
 
-  background: #fff;
 
+  /* background: #fff; */
 
   overflow: hidden;
 
   flex-shrink: 0;
 
   position: relative;

+ 216 - 326
src/components/pages/dataBoardNew/school/index.vue
Vedi File 

@@ -20,12 +20,9 @@
 
               <span>本月新增登录用户</span>
 
               <span v-if="loginCountMonthArray.length">{{
 
                 loginCountMonthArray[loginCountMonthArray.length - 1].user -
 
-                  loginCountMonthArray[loginCountMonthArray.length - 2].user <
 
-                0
 
-                  ? 0
 
-                  : loginCountMonthArray[loginCountMonthArray.length - 1].user -
 
-                    loginCountMonthArray[loginCountMonthArray.length - 2].user
 
-              }}</span>
 
+                loginCountMonthArray[loginCountMonthArray.length - 2].user < 0 ? 0 :
 
+                loginCountMonthArray[loginCountMonthArray.length - 1].user -
 
+                loginCountMonthArray[loginCountMonthArray.length - 2].user }}</span>
 
             </div>
 
             <div class="info blueBG">
 
               <span>本月登录用户总数</span>
 
@@ -37,13 +34,13 @@
 
               <span>月登录环比</span>
 
               <span v-if="loginCountMonthArray.length">{{
 
                 loginCountMonthArray[loginCountMonthArray.length - 1].user > 0
 
-                  ? (
 
-                      (loginCountMonthArray[loginCountMonthArray.length - 1]
 
-                        .user /
 
-                        allUser) *
 
-                      100
 
-                    ).toFixed(0) + "%"
 
-                  : 0
 
+                ? (
 
+                  (loginCountMonthArray[loginCountMonthArray.length - 1]
 
+                    .user /
 
+                    allUser) *
 
+                  100
 
+                ).toFixed(0) + "%"
 
+                : 0
 
               }}</span>
 
               <!-- <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].user -
 
                 loginCountMonthArray[loginCountMonthArray.length - 2].user) < 0 ? 0 :
 
@@ -52,28 +49,17 @@
 
                   loginCountMonthArray[loginCountMonthArray.length - 2].user) * 100).toFixed(0) + '%' }}</span> -->
 
             </div>
 
           </div>
 
-          <loginCount
 
-            style="height: calc(100% - 140px)"
 
-            :monthArray="loginCountMonthArray"
 
-          ></loginCount>
 
+          <loginCount style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></loginCount>
 
         </div>
 
       </div>
 
       <div class="bottom">
 
         <div class="titleBox">
 
-          <div
 
-            class="title"
 
-            :class="{ isClick: skType == 0 }"
 
-            @click="skType = 0"
 
-            style="cursor: pointer; padding: 0 0 5px 0"
 
-          >
 
+          <div class="title" :class="{ isClick: skType == 0, noClick: skType != 0 }" @click="skType = 0"
 
+            style="cursor: pointer; padding: 0 0 5px 0">
 
             在线时长
 
           </div>
 
-          <div
 
-            class="title"
 
-            :class="{ isClick: skType == 1 }"
 
-            @click="skType = 1"
 
-            style="cursor: pointer; padding: 0 0 5px 0"
 
-          >
 
+          <div class="title" :class="{ isClick: skType == 1, noClick: skType != 1 }" @click="skType = 1"
 
+            style="cursor: pointer; padding: 0 0 5px 0">
 
             登录频次
 
           </div>
 
           <!-- <el-select v-model="cType1" class="selectBox" style="width: 110px;margin-left:auto;">
 
@@ -112,33 +98,18 @@
 
             }}</span>
 
           </div>
 
         </div>
 
-        <div class="dataBox" style="height: calc(100% - 135px)">
 
+        <div class="dataBox" style="height: calc(100% - 155px)">
 
           <!-- 登录频次热力图 -->
 
-          <toolUser
 
-            style="height: calc(100%)"
 
-            v-if="skType == 1 && !oType1"
 
-            :Josn="loginCountYearArray"
 
-          ></toolUser>
 
+          <toolUser style="height: calc(100%)" v-if="skType == 1 && !oType1" :Josn="loginCountYearArray"></toolUser>
 
           <!-- 登录频次柱状图 -->
 
-          <toolUserBar
 
-            style="height: calc(100%)"
 
-            v-if="skType == 1 && oType1"
 
-            :loginArray="[teacherLoginCount, studentLoginCount]"
 
-          ></toolUserBar>
 
+          <toolUserBar style="height: calc(100%)" v-if="skType == 1 && oType1"
 
+            :loginArray="[teacherLoginCount, studentLoginCount]"></toolUserBar>
 
           <!-- 在线时长柱状图 -->
 
           <!-- <bar style="height: calc(100%)" v-if="skType == 0 && !oType" :loginArray="[teacherOnlineTime, studentOnlineTime]"></bar> -->
 
-          <loginTime
 
-            style="height: calc(100%)"
 
-            v-if="skType == 0 && !oType"
 
-            :yearArray="userOnlineTime"
 
-          ></loginTime>
 
+          <loginTime style="height: calc(100%)" v-if="skType == 0 && !oType" :yearArray="userOnlineTime"></loginTime>
 
           <!-- 在线时长热力图 -->
 
-          <barToolUser
 
-            style="height: calc(100%)"
 
-            v-if="skType == 0 && oType"
 
-            :Josn="allTimeYearArray"
 
-          ></barToolUser>
 
-          <div class="otherCss" v-if="skType == 0">
 
+          <barToolUser style="height: calc(100%)" v-if="skType == 0 && oType" :Josn="allTimeYearArray"></barToolUser>
 
+          <!-- <div class="otherCss" v-if="skType == 0">
 
             <div v-if="!oType">切换为热力图</div>
 
             <div v-if="oType">切换为仪表盘</div>
 
             <div class="otherImg" @click="otherEchart">
 
@@ -151,43 +122,37 @@
 
             <div class="otherImg" @click="otherEchart1">
 
               <img src="../../../../assets/icon/other.png" alt="" />
 
             </div>
 
-          </div>
 
+          </div> -->
 
+        </div>
 
+        <div class="dataBoard_check_box" v-if="skType == 0">
 
+          <div class="icon yb_icon" :class="{ active: !oType }" @click="oType = false"><span>仪表盘</span></div>
 
+          <div class="icon rl_icon" :class="{ active: oType }" @click="oType = true"><span>热力图</span></div>
 
+        </div>
 
+        <div class="dataBoard_check_box" v-if="skType == 1">
 
+          <div class="icon zz_icon" :class="{ active: oType1 }" @click="oType1 = true"><span>柱状图</span></div>
 
+          <div class="icon rl_icon" :class="{ active: !oType1 }" @click="oType1 = false"><span>热力图</span></div>
 
         </div>
 
       </div>
 
     </div>
 
     <div class="center">
 
       <div class="top">
 
         <div class="titleBox" style="justify-content: space-between">
 
-          <div
 
-            style="
 
+          <div style="
 
               display: flex;
 
               flex-direction: row;
 
               flex-wrap: nowrap;
 
               align-items: center;
 
-            "
 
-          >
 
-            <div
 
-              class="title"
 
-              :class="{ isClick: courseType == 0 }"
 
-              @click="courseType = 0"
 
-              style="cursor: pointer; padding: 0 0 5px 0"
 
-            >
 
+            ">
 
+            <div class="title" :class="{ isClick: courseType == 0, noClick: courseType != 0 }" @click="courseType = 0"
 
+              style="cursor: pointer; padding: 0 0 5px 0">
 
               整体分布
 
             </div>
 
-            <div
 
-              class="title"
 
-              :class="{ isClick: courseType == 1 }"
 
-              @click="courseType = 1"
 
-              style="cursor: pointer; padding: 0 0 5px 0"
 
-            >
 
+            <div class="title" :class="{ isClick: courseType == 1, noClick: courseType != 1 }" @click="courseType = 1"
 
+              style="cursor: pointer; padding: 0 0 5px 0">
 
               总量增幅
 
             </div>
 
-            <div
 
-              class="title"
 
-              :class="{ isClick: courseType == 2 }"
 
-              @click="courseType = 2"
 
-              style="cursor: pointer; padding: 0 0 5px 0"
 
-            >
 
+            <div class="title" :class="{ isClick: courseType == 2, noClick: courseType != 2 }" @click="courseType = 2"
 
+              style="cursor: pointer; padding: 0 0 5px 0">
 
               实施情况
 
             </div>
 
           </div>
 
@@ -206,16 +171,8 @@
 
           </div> -->
 
         </div>
 
         <div class="dataBox">
 
-          <teacherInfo
 
-            v-if="courseType == 0"
 
-            style="height: calc(100% - 10px)"
 
-            :courseArray="courseArray"
 
-          ></teacherInfo>
 
-          <courseNum
 
-            v-if="courseType == 1"
 
-            style="height: calc(100%)"
 
-            :weekCourse2="weekCourse2"
 
-          ></courseNum>
 
+          <teacherInfo v-if="courseType == 0" style="height: calc(100% - 10px)" :courseArray="courseArray"></teacherInfo>
 
+          <courseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse2"></courseNum>
 
           <div style="height: calc(100%)" v-if="courseType == 2">
 
             <div class="info_box" style="width: 96%">
 
               <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
 
@@ -226,8 +183,8 @@
 
                 <span>平台实施课程占比</span>
 
                 <span>{{
 
                   isCourseCount
 
-                    ? ((isCourseCount / allCourseCount) * 100).toFixed(0) + "%"
 
-                    : "0%"
 
+                  ? ((isCourseCount / allCourseCount) * 100).toFixed(0) + "%"
 
+                  : "0%"
 
                 }}</span>
 
               </div>
 
               <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
 
@@ -243,11 +200,7 @@
 
                 }}</span>
 
               </div>
 
             </div>
 
-            <workNum
 
-              style="height: calc(100% - 70px)"
 
-              :workNumList="workNumList"
 
-              @openCourse="openCourse"
 
-            ></workNum>
 
+            <workNum style="height: calc(100% - 70px)" :workNumList="workNumList" @openCourse="openCourse"></workNum>
 
           </div>
 
         </div>
 
       </div>
 
@@ -275,221 +228,141 @@
 
             <div class="depth">
 
               <span>上传课程</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.upCourseTeachers
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.upCourseTeachers / lightJson.teachers) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#106BFF"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.upCourseTeachers
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.upCourseTeachers / lightJson.teachers) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>上传项目</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.upSCourseTeachers
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.upSCourseTeachers / lightJson.teachers) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#106BFF"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.upSCourseTeachers
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.upSCourseTeachers / lightJson.teachers) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>使用工具</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.toolTeachers
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.toolTeachers / lightJson.teachers) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#106BFF"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.toolTeachers
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.toolTeachers / lightJson.teachers) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>协同合作</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.gCourseTeachers
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.gCourseTeachers / lightJson.teachers) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#106BFF"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.gCourseTeachers
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.gCourseTeachers / lightJson.teachers) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>互动交流</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.commentTeachers
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.commentTeachers / lightJson.teachers) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#106BFF"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.commentTeachers
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.commentTeachers / lightJson.teachers) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>参与课程</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.courseStudents
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.courseStudents / lightJson.students) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#53c95f"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.courseStudents
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.courseStudents / lightJson.students) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#53c95f"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>参与项目</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.scourseStudents
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.scourseStudents / lightJson.students) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#53c95f"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.scourseStudents
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.scourseStudents / lightJson.students) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#53c95f"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>使用工具</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.toolStudents
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.toolStudents / lightJson.students) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#53c95f"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.toolStudents
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.toolStudents / lightJson.students) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#53c95f"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>协同合作</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.gsCourseStudents
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.gsCourseStudents / lightJson.students) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#53c95f"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.gsCourseStudents
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.gsCourseStudents / lightJson.students) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#53c95f"></el-progress>
 
               </div>
 
             </div>
 
             <div class="depth">
 
               <span>互动交流</span>
 
               <div>
 
-                <el-progress
 
-                  :width="80"
 
-                  type="circle"
 
-                  :percentage="
 
-                    lightJson.commentStudents
 
-                      ? parseInt(
 
-                          (
 
-                            (lightJson.commentStudents / lightJson.students) *
 
-                            100
 
-                          ).toFixed(0)
 
-                        )
 
-                      : 0
 
-                  "
 
-                  :stroke-width="5"
 
-                  :format="format"
 
-                  color="#53c95f"
 
-                ></el-progress>
 
+                <el-progress :width="80" type="circle" :percentage="lightJson.commentStudents
 
+                    ? parseInt(
 
+                      (
 
+                        (lightJson.commentStudents / lightJson.students) *
 
+                        100
 
+                      ).toFixed(0)
 
+                    )
 
+                    : 0
 
+                  " :stroke-width="5" :format="format" color="#53c95f"></el-progress>
 
               </div>
 
             </div>
 
           </div>
 
@@ -507,14 +380,12 @@
 
       <div class="top" style="border-radius: 5px">
 
         <div class="titleBox" style="justify-content: space-between">
 
           <div class="title">整体分布</div>
 
-          <div
 
-            style="
 
+          <div style="
 
               display: flex;
 
               flex-direction: row;
 
               flex-wrap: nowrap;
 
               align-items: center;
 
-            "
 
-          >
 
+            ">
 
             <el-select v-model="cType" @change="typeChange" class="selectBox">
 
               <!-- <el-option label="全部" value=""></el-option> -->
 
               <el-option label="年级" value="grade"></el-option>
 
@@ -530,10 +401,7 @@
 
           </div>
 
         </div>
 
         <div class="dataBox">
 
-          <courseInfo
 
-            style="height: calc(100% - 40px)"
 
-            :courseNumberArray="courseNumberArray"
 
-          ></courseInfo>
 
+          <courseInfo style="height: calc(100% - 40px)" :courseNumberArray="courseNumberArray"></courseInfo>
 
         </div>
 
       </div>
 
       <div class="bottom">
 
@@ -544,10 +412,7 @@
 
           </el-select> -->
 
         </div>
 
         <div class="dataBox">
 
-          <cateRank
 
-            style="height: calc(100%)"
 
-            :resultSubject="resultSubject"
 
-          ></cateRank>
 
+          <cateRank style="height: calc(100%)" :resultSubject="resultSubject"></cateRank>
 
         </div>
 
       </div>
 
     </div>
 
@@ -780,7 +645,7 @@ export default {
 
           let loginCountYearArray = {};
 
           let timeArray = [];
 
           for (var i = 0; i < loginCountYear.length; i++) {
 
-            timeArray.push({time:loginCountYear[i].time,num:loginCountYear[i].usernum});
 
+            timeArray.push({ time: loginCountYear[i].time, num: loginCountYear[i].usernum });
 
           }
 
           timeArray.forEach((item) => {
 
             loginCountYearArray[item.time] = loginCountYearArray[item.time] + item.num || item.num;
 
@@ -1239,20 +1104,20 @@ export default {
 
   height: 100%;
 
 }
 
 
-.left > .top {
 
+.left>.top {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2.8 - 20px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
 }
 
 
-.left > .bottom {
 
+.left>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2.2);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1261,25 +1126,25 @@ export default {
 
 }
 
 
 .center {
 
-  width: calc(100% / 4 * 2 - 40px);
 
+  width: calc(100% / 4 * 2 - 20px);
 
   height: 100%;
 
-  margin: 0 20px;
 
+  margin: 0 10px;
 
 }
 
 
-.center > .top {
 
+.center>.top {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2.8 - 20px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
 }
 
 
-.center > .bottom {
 
+.center>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2.2);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1292,20 +1157,20 @@ export default {
 
   height: 100%;
 
 }
 
 
-.right > .top {
 
+.right>.top {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2.8 - 20px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
 }
 
 
-.right > .bottom {
 
+.right>.bottom {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2.2);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1320,11 +1185,33 @@ export default {
 
   padding: 0 15px;
 
   box-sizing: border-box;
 
   width: 100%;
 
+  position: relative;
 
+}
 
+
 
+.titleBox::after {
 
+  content: '';
 
+  position: absolute;
 
+  height: 2px;
 
+  width: calc(100% - 30px);
 
+  bottom: 0;
 
+  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
 
 }
 
 
 .title {
 
   color: #060e17;
 
-  margin-right: 10px;
 
+  margin-right: 25px;
 
+  font-weight: 700;
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.title::before {
 
+  content: '';
 
+  background-image: url('../../../../assets/icon/test/data_title_icon.png');
 
+  background-size: 100% 100%;
 
+  width: 20px;
 
+  height: 20px;
 
+  margin-right: 5px;
 
 }
 
 
 .dataBox {
 
@@ -1333,11 +1220,9 @@ export default {
 
 }
 
 
 .greenBG {
 
-  background: linear-gradient(
 
-    180deg,
 
-    rgb(211, 246, 228, 0.2) 0%,
 
-    rgb(23, 196, 105, 0.3) 100%
 
-  );
 
+  background: linear-gradient(180deg,
 
+      rgb(211, 246, 228, 0.2) 0%,
 
+      rgb(23, 196, 105, 0.3) 100%);
 
 }
 
 
 .depth_box {
 
@@ -1358,14 +1243,13 @@ export default {
 
   justify-content: center;
 
 }
 
 
-.depth > span:nth-child(1) {
 
+.depth>span:nth-child(1) {
 
   font-size: 14px;
 
   font-weight: 700;
 
   margin: 0 0 10px;
 
 }
 
 
-.depth > div:nth-child(1) {
 
-}
 
+.depth>div:nth-child(1) {}
 
 
 .course_box {
 
   display: flex;
 
@@ -1391,12 +1275,13 @@ export default {
 
   margin-left: 10px;
 
 }
 
 
-.selectBox >>> .el-input__inner {
 
+.selectBox>>>.el-input__inner {
 
   height: 30px;
 
   line-height: 30px;
 
+  border: 1px solid #3681FC;
 
 }
 
 
-.selectBox >>> .el-input__icon {
 
+.selectBox>>>.el-input__icon {
 
   line-height: 30px;
 
 }
 
 
@@ -1425,17 +1310,22 @@ export default {
 
   margin: 0 0 0 15px;
 
 }
 
 
-.timeDiv > div {
 
+.timeDiv>div {
 
   margin-right: 10px;
 
   cursor: pointer;
 
 }
 
 
 .isClick {
 
-  color: #1684fc;
 
-  border-bottom: 2px solid #1684fc;
 
+  /* color: #1684fc;
 
+  border-bottom: 2px solid #1684fc; */
 
   box-sizing: border-box;
 
 }
 
 
+.noClick {
 
+  font-weight: 500;
 
+  opacity: .6;
 
+}
 
+
 
 .otherCss {
 
   display: flex;
 
   flex-direction: row;
 
@@ -1451,7 +1341,7 @@ export default {
 
   cursor: pointer;
 
 }
 
 
-.otherImg > img {
 
+.otherImg>img {
 
   width: 100%;
 
   height: 100%;
 
 }
 
@@ -1465,53 +1355,53 @@ export default {
 
   margin: 0 auto;
 
 }
 
 
-.info_box > .info2,
 
-.info_box > .info3,
 
-.info_box > .info {
 
+.info_box>.info2,
 
+.info_box>.info3,
 
+.info_box>.info {
 
   width: calc(50% - 10px);
 
   display: flex;
 
-  flex-direction: row;
 
+  flex-direction: column-reverse;
 
   flex-wrap: nowrap;
 
   height: 60px;
 
-  justify-content: space-between;
 
-  align-items: center;
 
+  justify-content: center;
 
+  /* align-items: center; */
 
   padding: 0 10px;
 
   box-sizing: border-box;
 
   margin-bottom: 10px;
 
   border-radius: 5px;
 
 }
 
 
-.info_box > .info2 {
 
+.info_box>.info2 {
 
   width: calc(100% / 4 - 10px);
 
   /* align-items: flex-end; */
 
 }
 
 
-.info_box > .info3 {
 
+.info_box>.info3 {
 
   width: 100%;
 
   margin-bottom: 5px;
 
 }
 
 
-.info_box > .info2 > span:nth-child(1),
 
-.info_box > .info3 > span:nth-child(1),
 
-.info_box > .info > span:nth-child(1) {
 
+.info_box>.info2>span:nth-child(1),
 
+.info_box>.info3>span:nth-child(1),
 
+.info_box>.info>span:nth-child(1) {
 
   font-size: 12px;
 
   /* margin: 0 0 0 20px; */
 
   color: #565e6a;
 
-  width: 60px;
 
+  /* width: 60px; */
 
   white-space: pre-wrap;
 
   word-break: break-all;
 
 }
 
 
-.info_box > .info2 > span:nth-child(2),
 
-.info_box > .info3 > span:nth-child(2),
 
-.info_box > .info > span:nth-child(2) {
 
+.info_box>.info2>span:nth-child(2),
 
+.info_box>.info3>span:nth-child(2),
 
+.info_box>.info>span:nth-child(2) {
 
   font-size: 24px;
 
-  /* font-weight: 700; */
 
+  font-weight: 700;
 
 }
 
 
 .blueBG {
 
-  background: rgb(243, 248, 253);
 
-  border: 2px solid rgb(234, 246, 255);
 
+  /* background: rgb(243, 248, 253);
 
+  border: 2px solid rgb(234, 246, 255); */
 
 }
 
 
 .tCircleC {
 
@@ -1524,11 +1414,11 @@ export default {
 
   align-items: center;
 
 }
 
 
-.tCircleBox > span + span {
 
+.tCircleBox>span+span {
 
   margin-left: 5px;
 
 }
 
 
-.tCircleBox + .tCircleBox {
 
+.tCircleBox+.tCircleBox {
 
   margin-left: 10px;
 
 }

+ 2 - 2
src/components/pages/dataBoardNew/school/toolUser/index.vue
Vedi File 

@@ -28,7 +28,7 @@ export default {
 
           }
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -41,7 +41,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],

+ 1 - 1
src/components/pages/dataBoardNew/student/cateRank/index.vue
Vedi File 

@@ -1,6 +1,6 @@
 
 <template>
 
   <div class="data_body">
 
-    <div style="width: 100%;height: calc(100% - 15px);overflow: auto;">
 
+    <div style="width: 100%;height: calc(100% - 30px); margin-top: 15px; overflow: auto;">
 
       <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
 
         :row-class-name="tableRowClassName" class="tableClass">
 
         <el-table-column label="排行" min-width="50" align="center">

+ 78 - 43
src/components/pages/dataBoardNew/student/index.vue
Vedi File 

@@ -59,7 +59,7 @@
 
         <div class="titleBox">
 
           <div
 
             class="title"
 
-            :class="{ isClick: skType == 0 }"
 
+            :class="{ isClick: skType == 0, noClick: skType != 0 }"
 
             @click="skType = 0"
 
             style="cursor: pointer; padding: 0 0 5px 0"
 
           >
 
@@ -67,7 +67,7 @@
 
           </div>
 
           <div
 
             class="title"
 
-            :class="{ isClick: skType == 1 }"
 
+            :class="{ isClick: skType == 1, noClick: skType != 1 }"
 
             @click="skType = 1"
 
             style="cursor: pointer; padding: 0 0 5px 0"
 
           >
 
@@ -117,29 +117,29 @@
 
         </div>
 
         <div class="dataBox" style="height: calc(100% - 110px)">
 
           <toolUser
 
-            style="height: calc(100% - 30px)"
 
+            style="height: calc(100% - 50px)"
 
             v-if="skType == 1 && !oType"
 
             :Josn="loginCountYearArray"
 
           ></toolUser>
 
           <bar2
 
-            style="height: calc(100% - 30px)"
 
+            style="height: calc(100% - 50px)"
 
             v-if="skType == 1 && oType"
 
             :EloginTimeArray="EloginTimeArray2"
 
           ></bar2>
 
 
 
           <bar
 
-            style="height: calc(100% - 30px)"
 
+            style="height: calc(100% - 50px)"
 
             v-if="skType == 0 && !oType2"
 
             :EloginTimeArray="EloginTimeArray"
 
           ></bar>
 
           <toolUser2
 
-            style="height: calc(100% - 30px)"
 
+            style="height: calc(100% - 50px)"
 
             v-if="skType == 0 && oType2"
 
             :Josn="loginCountYearArray2"
 
           ></toolUser2>
 
 
-          <div class="otherCss" v-if="skType == 1">
 
+          <!-- <div class="otherCss" v-if="skType == 1">
 
             <div v-if="!oType">切换为柱状图</div>
 
             <div v-if="oType">切换为热力图</div>
 
             <div class="otherImg" @click="otherEchart">
 
@@ -153,6 +153,14 @@
 
             <div class="otherImg" @click="otherEchart2">
 
               <img src="../../../../assets/icon/other.png" alt="" />
 
             </div>
 
+          </div> -->
 
+          <div class="dataBoard_check_box" v-if="skType == 1">
 
+            <div class="icon zz_icon2" :class="{ active: oType }" @click="oType = true"><span>柱状图</span></div>
 
+            <div class="icon rl_icon" :class="{ active: !oType }" @click="oType = false"><span>热力图</span></div>
 
+          </div>
 
+          <div class="dataBoard_check_box" v-if="skType == 0">
 
+            <div class="icon zz_icon2" :class="{ active: !oType2 }" @click="oType2 = false"><span>柱状图</span></div>
 
+            <div class="icon rl_icon" :class="{ active: oType2 }" @click="oType2 = true"><span>热力图</span></div>
 
           </div>
 
         </div>
 
       </div>
 
@@ -170,7 +178,7 @@
 
           >
 
             <div
 
               class="title"
 
-              :class="{ isClick: courseType == 0 }"
 
+              :class="{ isClick: courseType == 0, noClick: courseType != 0 }"
 
               @click="courseType = 0;rankLoading = false"
 
               style="cursor: pointer; padding: 0 0 5px 0"
 
             >
 
@@ -186,7 +194,7 @@
 
             </div> -->
 
             <div
 
               class="title"
 
-              :class="{ isClick: courseType == 2 }"
 
+              :class="{ isClick: courseType == 2, noClick: courseType != 2 }"
 
               @click="checkRank()"
 
               style="cursor: pointer; padding: 0 0 5px 0"
 
             >
 
@@ -251,7 +259,7 @@
 
           >
 
             <div
 
               class="title"
 
-              :class="{ isClick: bType == 0 }"
 
+              :class="{ isClick: bType == 0, noClick: bType != 0 }"
 
               @click="bType = 0"
 
               style="cursor: pointer; padding: 0 0 5px 0"
 
             >
 
@@ -259,7 +267,7 @@
 
             </div>
 
             <div
 
               class="title"
 
-              :class="{ isClick: bType == 1 }"
 
+              :class="{ isClick: bType == 1, noClick: bType != 1 }"
 
               @click="bType = 1"
 
               style="cursor: pointer; padding: 0 0 5px 0"
 
             >
 
@@ -1144,10 +1152,10 @@ export default {
 
 
 .left > .top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -1155,7 +1163,7 @@ export default {
 
 
 .left > .bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1164,17 +1172,17 @@ export default {
 
 }
 
 
 .center {
 
-  width: calc(100% / 4 * 2 - 40px);
 
+  width: calc(100% / 4 * 2 - 20px);
 
   height: 100%;
 
-  margin: 0 20px;
 
+  margin: 0 10px;
 
 }
 
 
 .center > .top {
 
   width: 100%;
 
-  height: calc(100% / 6 * 4 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -1182,7 +1190,7 @@ export default {
 
 
 .center > .bottom {
 
   width: 100%;
 
-  height: calc(100% / 6 * 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1197,10 +1205,10 @@ export default {
 
 
 .right > .top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -1208,7 +1216,7 @@ export default {
 
 
 .right > .bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1228,11 +1236,33 @@ export default {
 
   padding: 0 15px;
 
   box-sizing: border-box;
 
   width: 100%;
 
+  position: relative;
 
+}
 
+
 
+.titleBox::after {
 
+  content: '';
 
+  position: absolute;
 
+  height: 2px;
 
+  width: calc(100% - 30px);
 
+  bottom: 0;
 
+  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
 
 }
 
 
 .title {
 
   color: #060e17;
 
-  margin-right: 10px;
 
+  margin-right: 25px;
 
+  font-weight: 700;
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.title::before{
 
+  content: '';
 
+  background-image: url('../../../../assets/icon/test/data_title_icon.png');
 
+  background-size: 100% 100%;
 
+  width: 20px;
 
+  height: 20px;
 
+  margin-right: 5px;
 
 }
 
 
 .dataBox {
 
@@ -1283,6 +1313,7 @@ export default {
 
 .selectBox >>> .el-input__inner {
 
   height: 30px;
 
   line-height: 30px;
 
+  border: 1px solid #3681FC;
 
 }
 
 
 .selectBox >>> .el-input__icon {
 
@@ -1320,11 +1351,15 @@ export default {
 
 }
 
 
 .isClick {
 
-  color: #1684fc;
 
-  border-bottom: 2px solid #1684fc;
 
+  /* color: #1684fc;
 
+  border-bottom: 2px solid #1684fc; */
 
   box-sizing: border-box;
 
 }
 
 
+.noClick{
 
+  font-weight: 500;
 
+  opacity: .6;
 
+}
 
 .otherCss {
 
   display: flex;
 
   flex-direction: row;
 
@@ -1395,52 +1430,52 @@ export default {
 
   margin: 0 auto;
 
 }
 
 
-.info_box > .info2,
 
-.info_box > .info3,
 
-.info_box > .info {
 
+.info_box>.info2,
 
+.info_box>.info3,
 
+.info_box>.info {
 
   width: calc(50% - 10px);
 
   display: flex;
 
-  flex-direction: row;
 
+  flex-direction: column-reverse;
 
   flex-wrap: nowrap;
 
   height: 60px;
 
-  justify-content: space-between;
 
-  align-items: center;
 
+  justify-content: center;
 
+  /* align-items: center; */
 
   padding: 0 10px;
 
   box-sizing: border-box;
 
   margin-bottom: 10px;
 
   border-radius: 5px;
 
 }
 
 
-.info_box > .info2 {
 
+.info_box>.info2 {
 
   width: calc(100% / 4 - 10px);
 
   /* align-items: flex-end; */
 
 }
 
 
-.info_box > .info3 {
 
+.info_box>.info3 {
 
   width: 100%;
 
   margin-bottom: 5px;
 
 }
 
 
-.info_box > .info2 > span:nth-child(1),
 
-.info_box > .info3 > span:nth-child(1),
 
-.info_box > .info > span:nth-child(1) {
 
+.info_box>.info2>span:nth-child(1),
 
+.info_box>.info3>span:nth-child(1),
 
+.info_box>.info>span:nth-child(1) {
 
   font-size: 12px;
 
   /* margin: 0 0 0 20px; */
 
   color: #565e6a;
 
-  width: 60px;
 
+  /* width: 60px; */
 
   white-space: pre-wrap;
 
   word-break: break-all;
 
 }
 
 
-.info_box > .info2 > span:nth-child(2),
 
-.info_box > .info3 > span:nth-child(2),
 
-.info_box > .info > span:nth-child(2) {
 
+.info_box>.info2>span:nth-child(2),
 
+.info_box>.info3>span:nth-child(2),
 
+.info_box>.info>span:nth-child(2) {
 
   font-size: 24px;
 
-  /* font-weight: 700; */
 
+  font-weight: 700;
 
 }
 
 
 .blueBG {
 
-  background: rgb(243, 248, 253);
 
-  border: 2px solid rgb(234, 246, 255);
 
+  /* background: rgb(243, 248, 253);
 
+  border: 2px solid rgb(234, 246, 255); */
 
 }
 
 </style>

+ 1 - 1
src/components/pages/dataBoardNew/student/studentInfo/index.vue
Vedi File 

@@ -53,7 +53,7 @@ export default {
 
                   top: '5%',
 
                   left: '5%',
 
                   right: '10%',
 
-                  bottom: '10%',
 
+                  bottom: '15%',
 
                   containLabel: true
 
               },
 
               xAxis: {

+ 1 - 1
src/components/pages/dataBoardNew/student/studentInfo3/index.vue
Vedi File 

@@ -53,7 +53,7 @@ export default {
 
                   top: '5%',
 
                   left: '5%',
 
                   right: '10%',
 
-                  bottom: '10%',
 
+                  bottom: '15%',
 
                   containLabel: true
 
               },
 
               xAxis: {

+ 2 - 2
src/components/pages/dataBoardNew/student/toolUser/index.vue
Vedi File 

@@ -28,7 +28,7 @@ export default {
 
           }
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -41,7 +41,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],

+ 3 - 3
src/components/pages/dataBoardNew/student/toolUser2/index.vue
Vedi File 

@@ -28,7 +28,7 @@ export default {
 
           }
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -41,7 +41,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],
 
@@ -195,7 +195,7 @@ export default {
 
   height: 170px;
 
   /* height: 500px; */
 
   /* margin: 15px 5px 0 0; */
 
-  background: #fff;
 
+  /* background: #fff; */
 
   overflow: hidden;
 
   flex-shrink: 0;
 
   position: relative;

+ 1 - 1
src/components/pages/dataBoardNew/teacher/chartList/cateRank.vue
Vedi File 

@@ -1,6 +1,6 @@
 
 <template>
 
   <div class="data_body">
 
-    <div style="width: 100%;height: calc(100% - 15px);overflow: auto;">
 
+    <div style="width: 100%;height: calc(100% - 30px); margin-top: 15px;overflow: auto;">
 
       <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
 
         :row-class-name="tableRowClassName" class="tableClass">
 
         <el-table-column label="排行" min-width="50" align="center">

+ 2 - 2
src/components/pages/dataBoardNew/teacher/chartList/toolUse.vue
Vedi File 

@@ -28,7 +28,7 @@ export default {
 
           }
 
         },
 
         visualMap: {
 
-          top: 35,
 
+          top: 'center',
 
           left: 10,
 
           right: 0,
 
           min: 0,
 
@@ -41,7 +41,7 @@ export default {
 
           calculable: true,
 
         },
 
         calendar: {
 
-          top: 70,
 
+          top: 'center',
 
           left: 80,
 
           right: 20,
 
           cellSize: ["auto", 15],

+ 66 - 38
src/components/pages/dataBoardNew/teacher/index.vue
Vedi File 

@@ -83,7 +83,7 @@
 
         <div class="titleBox">
 
           <div
 
             class="title"
 
-            :class="{ isClick: skType == 0 }"
 
+            :class="{ isClick: skType == 0, noClick: skType != 0 }"
 
             @click="skType = 0"
 
             style="cursor: pointer; padding: 0 0 5px 0"
 
           >
 
@@ -91,7 +91,7 @@
 
           </div>
 
           <div
 
             class="title"
 
-            :class="{ isClick: skType == 1 }"
 
+            :class="{ isClick: skType == 1, noClick: skType != 1 }"
 
             @click="skType = 1"
 
             style="cursor: pointer; padding: 0 0 5px 0"
 
           >
 
@@ -170,7 +170,7 @@
 
             >
 
               <div
 
                 class="title"
 
-                :class="{ isClick: courseType == 0 }"
 
+                :class="{ isClick: courseType == 0, noClick: courseType != 0 }"
 
                 @click="
 
                   courseType = 0;
 
                   rankLoading = false;
 
@@ -181,7 +181,7 @@
 
               </div>
 
               <div
 
                 class="title"
 
-                :class="{ isClick: courseType == 1 }"
 
+                :class="{ isClick: courseType == 1, noClick: courseType != 1 }"
 
                 @click="checkRank()"
 
                 style="cursor: pointer; padding: 0 0 5px 0"
 
               >
 
@@ -259,7 +259,7 @@
 
           >
 
             <div
 
               class="title"
 
-              :class="{ isClick: bType == 0 }"
 
+              :class="{ isClick: bType == 0, noClick: bType != 0 }"
 
               @click="bType = 0"
 
               style="cursor: pointer; padding: 0 0 5px 0"
 
             >
 
@@ -267,7 +267,7 @@
 
             </div>
 
             <div
 
               class="title"
 
-              :class="{ isClick: bType == 1 }"
 
+              :class="{ isClick: bType == 1, noClick: bType != 1 }"
 
               @click="bType = 1"
 
               style="cursor: pointer; padding: 0 0 5px 0"
 
             >
 
@@ -1338,10 +1338,10 @@ export default {
 
 
 .left > .top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -1349,7 +1349,7 @@ export default {
 
 
 .left > .bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1358,17 +1358,17 @@ export default {
 
 }
 
 
 .center {
 
-  width: calc(100% / 4 * 2 - 40px);
 
+  width: calc(100% / 4 * 2 - 20px);
 
   height: 100%;
 
-  margin: 0 20px;
 
+  margin: 0 10px;
 
 }
 
 
 .center > .top {
 
   width: 100%;
 
-  height: calc(100% / 5 * 3 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -1376,7 +1376,7 @@ export default {
 
 
 .center > .bottom {
 
   width: 100%;
 
-  height: calc(100% / 5 * 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1391,10 +1391,10 @@ export default {
 
 
 .right > .top {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.7 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
-  margin: 0 0 20px 0;
 
+  margin: 0 0 10px 0;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
   border: 2px solid #fff;
 
   box-sizing: border-box;
 
@@ -1402,7 +1402,7 @@ export default {
 
 
 .right > .bottom {
 
   width: 100%;
 
-  height: calc(100% / 2 - 10px);
 
+  height: calc(100% / 5 * 2.3 - 5px);
 
   /* background: #fff; */
 
   border-radius: 5px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
 
@@ -1417,6 +1417,16 @@ export default {
 
   padding: 0 15px;
 
   box-sizing: border-box;
 
   width: 100%;
 
+  position: relative;
 
+}
 
+
 
+.titleBox::after {
 
+  content: '';
 
+  position: absolute;
 
+  height: 2px;
 
+  width: calc(100% - 30px);
 
+  bottom: 0;
 
+  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
 
 }
 
 
 .dataBox {
 
@@ -1433,7 +1443,19 @@ export default {
 
 
 .title {
 
   color: #060e17;
 
-  margin-right: 10px;
 
+  margin-right: 25px;
 
+  font-weight: 700;
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.title::before{
 
+  content: '';
 
+  background-image: url('../../../../assets/icon/test/data_title_icon.png');
 
+  background-size: 100% 100%;
 
+  width: 20px;
 
+  height: 20px;
 
+  margin-right: 5px;
 
 }
 
 
 .teaMiddle {
 
@@ -1509,11 +1531,16 @@ export default {
 
 }
 
 
 .isClick {
 
-  color: #1684fc;
 
-  border-bottom: 2px solid #1684fc;
 
+  /* color: #1684fc;
 
+  border-bottom: 2px solid #1684fc; */
 
   box-sizing: border-box;
 
 }
 
 
+.noClick{
 
+  font-weight: 500;
 
+  opacity: .6;
 
+}
 
+
 
 .otherCss {
 
   display: flex;
 
   flex-direction: row;
 
@@ -1583,6 +1610,7 @@ export default {
 
 .selectBox >>> .el-input__inner {
 
   height: 30px;
 
   line-height: 30px;
 
+  border: 1px solid #3681FC;
 
 }
 
 
 .selectBox >>> .el-input__icon {
 
@@ -1598,52 +1626,52 @@ export default {
 
   margin: 0 auto;
 
 }
 
 
-.info_box > .info2,
 
-.info_box > .info3,
 
-.info_box > .info {
 
+.info_box>.info2,
 
+.info_box>.info3,
 
+.info_box>.info {
 
   width: calc(50% - 10px);
 
   display: flex;
 
-  flex-direction: row;
 
+  flex-direction: column-reverse;
 
   flex-wrap: nowrap;
 
   height: 60px;
 
-  justify-content: space-between;
 
-  align-items: center;
 
+  justify-content: center;
 
+  /* align-items: center; */
 
   padding: 0 10px;
 
   box-sizing: border-box;
 
   margin-bottom: 10px;
 
   border-radius: 5px;
 
 }
 
 
-.info_box > .info2 {
 
+.info_box>.info2 {
 
   width: calc(100% / 4 - 10px);
 
   /* align-items: flex-end; */
 
 }
 
 
-.info_box > .info3 {
 
+.info_box>.info3 {
 
   width: 100%;
 
   margin-bottom: 5px;
 
 }
 
 
-.info_box > .info2 > span:nth-child(1),
 
-.info_box > .info3 > span:nth-child(1),
 
-.info_box > .info > span:nth-child(1) {
 
+.info_box>.info2>span:nth-child(1),
 
+.info_box>.info3>span:nth-child(1),
 
+.info_box>.info>span:nth-child(1) {
 
   font-size: 12px;
 
   /* margin: 0 0 0 20px; */
 
   color: #565e6a;
 
-  width: 60px;
 
+  /* width: 60px; */
 
   white-space: pre-wrap;
 
   word-break: break-all;
 
 }
 
 
-.info_box > .info2 > span:nth-child(2),
 
-.info_box > .info3 > span:nth-child(2),
 
-.info_box > .info > span:nth-child(2) {
 
+.info_box>.info2>span:nth-child(2),
 
+.info_box>.info3>span:nth-child(2),
 
+.info_box>.info>span:nth-child(2) {
 
   font-size: 24px;
 
-  /* font-weight: 700; */
 
+  font-weight: 700;
 
 }
 
 
 .blueBG {
 
-  background: rgb(243, 248, 253);
 
-  border: 2px solid rgb(234, 246, 255);
 
+  /* background: rgb(243, 248, 253);
 
+  border: 2px solid rgb(234, 246, 255); */
 
 }
 
 </style>

Some files were not shown because too many files changed in this diff