1

src/components/pages/dataBoardNew/course/chartList/workNum.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data_body" style="height: calc(100% - 100px)">
+  <div class="data_body" style="height: calc(100% - 170px)">
     <div style="width: 100%; height: 100%">
       <div
         id="charts_canvas"

src/components/pages/dataBoardNew/course/index.vue

@@ -10,24 +10,26 @@
           </el-select>
         </div>
         <div class="dataBox">
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>课程总数</div>
-              <div>15310</div>
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>课程总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 15310 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月新增课程环比</div>
-              <div>0.9%</div>
+            <div class="info blueBG">
+              <span>本月新增课程环比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "0.9%" }}</span>
             </div>
-          </div>
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>模板课程总数</div>
-              <div>1138</div>
+            <div class="info blueBG">
+              <span>模板课程总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 1138 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月新增课程总数</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>本月新增课程总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <TeaFre style="height: calc(100% - 140px)"></TeaFre>
@@ -63,37 +65,43 @@
             <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
           </div>
         </div>
-        <div class="teafre" v-if="!oType">
-          <div class="teaLeft">
-            <div>授课频次</div>
-            <div>153</div>
+        <div class="info_box" v-if="!oType">
+          <div class="info blueBG">
+            <span>授课频次</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 153 }}</span>
           </div>
-          <div class="teaLeft">
-            <div>课程开展总数</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>课程开展总数</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 4 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>课程评价授课次数</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>课程平均授课次数</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 4 }}</span>
           </div>
         </div>
-        <div class="teafre" v-if="oType">
-          <div class="teaLeft">
-            <div>累计时长</div>
-            <div>110</div>
+        <div class="info_box" v-if="oType">
+          <div class="info blueBG">
+            <span>累计时长</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 110 }}</span>
           </div>
-          <div class="teaLeft">
-            <div>课程实施总数</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>课程实施总数</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 4 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>课程评价时长</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>课程评价时长</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 4 }}</span>
           </div>
         </div>
         <div class="dataBox">
-          <ToolUse style="height: calc(100% - 120px)" v-if="!oType"></ToolUse>
-          <Bar style="height: calc(100% - 120px)" v-if="oType"></Bar>
+          <ToolUse style="height: calc(100% - 170px)" v-if="!oType"></ToolUse>
+          <Bar style="height: calc(100% - 170px)" v-if="oType"></Bar>
           <div class="otherCss">
             <div v-if="!oType">切换为柱状图</div>
             <div v-if="oType">切换为热力图</div>
@@ -247,22 +255,26 @@
               </div>
             </div>
           </div>
-          <div class="teafre" v-if="shType">
-            <div class="teaLeft">
-              <div>平台实施课程总数</div>
-              <div>18</div>
+          <div class="info_box" v-if="shType">
+            <div class="info blueBG">
+              <span>平台实施课程总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft">
-              <div>平台实施课程占比</div>
-              <div>80%</div>
+            <div class="info blueBG">
+              <span>平台实施课程占比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "80%" }}</span>
             </div>
-            <div class="teaLeft">
-              <div>课程平均任务数量</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>课程平均任务数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>课程平均作业数量</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>课程平均作业数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <WorkNum v-if="shType"></WorkNum>
@@ -304,32 +316,46 @@
               工具使用
             </div>
           </div>
-          <el-select v-model="cType4" class="selectBox" style="width: 110px" v-if="toolType == 0">
+          <el-select
+            v-model="cType4"
+            class="selectBox"
+            style="width: 110px"
+            v-if="toolType == 0"
+          >
             <el-option label="按年级" value="按年级"></el-option>
             <el-option label="按学科" value="按学科"></el-option>
             <el-option label="按主题" value="按主题"></el-option>
           </el-select>
-          <div v-if="toolType == 1" style="
+          <div
+            v-if="toolType == 1"
+            style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
               align-items: center;
-            ">
+            "
+          >
             <el-select v-model="cType5" class="selectBox" style="width: 110px">
-            <el-option label="全部学科" value="全部学科"></el-option>
-            <el-option label="语文" value="语文"></el-option>
-            <el-option label="数学" value="数学"></el-option>
-          </el-select>
-          <el-select v-model="cType6" class="selectBox" style="width: 110px">
-            <el-option label="全部年级" value="全部年级"></el-option>
-            <el-option label="一年级" value="一年级"></el-option>
-            <el-option label="二年级" value="二年级"></el-option>
-          </el-select>
+              <el-option label="全部学科" value="全部学科"></el-option>
+              <el-option label="语文" value="语文"></el-option>
+              <el-option label="数学" value="数学"></el-option>
+            </el-select>
+            <el-select v-model="cType6" class="selectBox" style="width: 110px">
+              <el-option label="全部年级" value="全部年级"></el-option>
+              <el-option label="一年级" value="一年级"></el-option>
+              <el-option label="二年级" value="二年级"></el-option>
+            </el-select>
           </div>
         </div>
         <div class="dataBox">
-          <CourseAna style="height: calc(100% - 40px)" v-if="toolType == 0"></CourseAna>
-          <ToolChart style="height: calc(100% - 40px)" v-if="toolType == 1"></ToolChart>
+          <CourseAna
+            style="height: calc(100% - 40px)"
+            v-if="toolType == 0"
+          ></CourseAna>
+          <ToolChart
+            style="height: calc(100% - 40px)"
+            v-if="toolType == 1"
+          ></ToolChart>
         </div>
       </div>
       <div class="bottom">
@@ -385,7 +411,7 @@ export default {
   },
   data() {
     return {
-      isLoading:false,
+      isLoading: false,
       cType: "全部年级",
       cType1: "全部年级",
       cType2: "全部学科",
@@ -405,7 +431,7 @@ export default {
     };
   },
   mounted() {
-    this.getData()
+    this.getData();
   },
   methods: {
     otherEchart() {
@@ -414,7 +440,7 @@ export default {
     shEchart() {
       this.shType = !this.shType;
     },
-    xtEchart(){
+    xtEchart() {
       this.xtType = !this.xtType;
     },
     getData() {
@@ -429,9 +455,9 @@ export default {
         .post(this.$store.state.api + "selectDataBoardCourseNew", params)
         .then((res) => {
           this.isLoading = false;
-          let _grade = res.data[0] //年级
-          let _subject = res.data[1]  //学科
-          let _course = res.data[2] //课程
+          let _grade = res.data[0]; //年级
+          let _subject = res.data[1]; //学科
+          let _course = res.data[2]; //课程
 
           this.$forceUpdate();
         })
@@ -541,17 +567,6 @@ export default {
   margin-right: 10px;
 }
 
-.teafre {
-  margin: 5px 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  width: 100%;
-  justify-content: space-evenly;
-}
-
-.teaLeft,
 .teaMiddle {
   width: calc(100% / 2 - 10px);
   height: 60px;
@@ -567,13 +582,6 @@ export default {
 .teaMiddle {
   width: calc(100% / 3 - 10px);
 }
-.teaLeft {
-  width: 95%;
-  background: #f3f8fd;
-}
-.teaRigth {
-  background: #f3f8fd;
-}
 
 .cNum {
   background: linear-gradient(
@@ -704,4 +712,62 @@ export default {
 }
 .depth > div:nth-child(1) {
 }
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
+  /* align-items: flex-end; */
+}
+
+.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) {
+  font-size: 14px;
+  /* margin: 0 0 0 20px; */
+  color: #565e6a;
+  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) {
+  font-size: 24px;
+  /* font-weight: 700; */
+}
+
+.blueBG {
+  background: rgb(243, 248, 253);
+  border: 2px solid rgb(234, 246, 255);
+}
 </style>

src/components/pages/dataBoardNew/project/chartList/workNum.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data_body" style="height: calc(100% - 100px)">
+  <div class="data_body" style="height: calc(100% - 170px)">
     <div style="width: 100%; height: 100%">
       <div
         id="charts_canvas"

src/components/pages/dataBoardNew/project/index.vue

@@ -10,24 +10,26 @@
           </el-select>
         </div>
         <div class="dataBox">
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>项目总数</div>
-              <div>15310</div>
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>项目总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 15130 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月新增项目环比</div>
-              <div>0.9%</div>
+            <div class="info blueBG">
+              <span>本月新增项目环比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "80%" }}</span>
             </div>
-          </div>
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>模板项目总数</div>
-              <div>1138</div>
+            <div class="info blueBG">
+              <span>模板项目总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月新增项目总数</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>本月新增项目总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <TeaFre style="height: calc(100% - 140px)"></TeaFre>
@@ -49,7 +51,7 @@
             @click="skType = 1"
             style="cursor: pointer; padding: 0 0 5px 0"
           >
-           开展频次
+            开展频次
           </div>
           <el-select v-model="cType" class="selectBox" style="width: 110px">
             <el-option label="全部年级" value="全部年级"></el-option>
@@ -63,37 +65,43 @@
             <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
           </div>
         </div>
-        <div class="teafre" v-if="!oType">
-          <div class="teaLeft">
-            <div>开展频次</div>
-            <div>153</div>
+        <div class="info_box" v-if="!oType">
+          <div class="info blueBG">
+            <span>开展频次</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 15130 }}</span>
           </div>
-          <div class="teaLeft">
-            <div>项目开展总数</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>项目开展总数</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ "80%" }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>项目平均开展次数</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>项目平均开展次数</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 18 }}</span>
           </div>
         </div>
-        <div class="teafre" v-if="oType">
-          <div class="teaLeft">
-            <div>累计时长</div>
-            <div>110</div>
+        <div class="info_box" v-if="oType">
+          <div class="info blueBG">
+            <span>累计时长</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 15130 }}</span>
           </div>
-          <div class="teaLeft">
-            <div>开展项目总数</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>开展项目总数</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ "80%" }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>项目平均时长</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>项目平均时长</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 18 }}</span>
           </div>
         </div>
         <div class="dataBox">
-          <ToolUse style="height: calc(100% - 120px)" v-if="!oType"></ToolUse>
-          <Bar style="height: calc(100% - 120px)" v-if="oType"></Bar>
+          <ToolUse style="height: calc(100% - 170px)" v-if="!oType"></ToolUse>
+          <Bar style="height: calc(100% - 170px)" v-if="oType"></Bar>
           <div class="otherCss">
             <div v-if="!oType">切换为柱状图</div>
             <div v-if="oType">切换为热力图</div>
@@ -179,22 +187,26 @@
             v-if="!shType"
             style="height: calc(100% - 30px)"
           ></CourseTime>
-          <div class="teafre" v-if="shType">
-            <div class="teaLeft">
-              <div>项目实施总数</div>
-              <div>18</div>
+          <div class="info_box" v-if="shType">
+            <div class="info blueBG">
+              <span>项目实施总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 15130 }}</span>
             </div>
-            <div class="teaLeft">
-              <div>平台实施项目占比</div>
-              <div>80%</div>
+            <div class="info blueBG">
+              <span>平台实施项目占比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "80%" }}</span>
             </div>
-            <div class="teaLeft">
-              <div>项目平均任务数量</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>项目平均任务数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>项目平均作业数量</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>项目平均作业数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <WorkNum v-if="shType"></WorkNum>
@@ -331,7 +343,7 @@ export default {
   },
   data() {
     return {
-      isLoading:false,
+      isLoading: false,
       cType: "全部年级",
       cType1: "全部年级",
       cType2: "全部学科",
@@ -377,8 +389,8 @@ export default {
         .post(this.$store.state.api + "selectDataBoardStudentCourseNew", params)
         .then((res) => {
           this.isLoading = false;
-          let _grade = res.data[0] //赛道
-          let _subject = res.data[1]  //主题
+          let _grade = res.data[0]; //赛道
+          let _subject = res.data[1]; //主题
 
           this.$forceUpdate();
         })
@@ -488,17 +500,6 @@ export default {
   margin-right: 10px;
 }
 
-.teafre {
-  margin: 5px 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  width: 100%;
-  justify-content: space-evenly;
-}
-
-.teaLeft,
 .teaMiddle {
   width: calc(100% / 2 - 10px);
   height: 60px;
@@ -514,13 +515,6 @@ export default {
 .teaMiddle {
   width: calc(100% / 3 - 10px);
 }
-.teaLeft {
-  width: 95%;
-  background: #f3f8fd;
-}
-.teaRigth {
-  background: #f3f8fd;
-}
 
 .cNum {
   background: linear-gradient(
@@ -651,4 +645,62 @@ export default {
 }
 .depth > div:nth-child(1) {
 }
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
+  /* align-items: flex-end; */
+}
+
+.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) {
+  font-size: 14px;
+  /* margin: 0 0 0 20px; */
+  color: #565e6a;
+  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) {
+  font-size: 24px;
+  /* font-weight: 700; */
+}
+
+.blueBG {
+  background: rgb(243, 248, 253);
+  border: 2px solid rgb(234, 246, 255);
+}
 </style>

src/components/pages/dataBoardNew/school/index.vue

@@ -10,24 +10,26 @@
           </el-select>
         </div>
         <div class="dataBox">
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>用户总数</div>
-              <div>310</div>
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>用户总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 310 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月登录用户环比</div>
-              <div>0.9%</div>
+            <div class="info blueBG">
+              <span>本月登录用户环比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "0.9%" }}</span>
             </div>
-          </div>
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>本月登录用户总数</div>
-              <div>138</div>
+            <div class="info blueBG">
+              <span>本月登录用户总数</span>
+              <!-- <span>{{ loginCount }}</span> -->
+              <span>{{ 138 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月新增登录用户</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>本月新增登录用户</span>
+              <!-- <span>{{ (loginCount / count).toFixed(0) }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <loginCount style="height: calc(100% - 140px)"></loginCount>
@@ -63,24 +65,28 @@
             <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
           </div>
         </div>
-        <div class="teafre" v-if="!oType">
-          <div class="teaLeft">
-            <div>登录频次</div>
-            <div>1513</div>
+        <div class="info_box" v-if="!oType">
+          <div class="info blueBG">
+            <span>登录频次</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 1513 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>人均登录频次</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>人均登录频次</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 4 }}</span>
           </div>
         </div>
-        <div class="teafre" v-if="oType">
-          <div class="teaLeft">
-            <div>累计时长</div>
-            <div>15310</div>
+        <div class="info_box" v-if="oType">
+          <div class="info blueBG">
+            <span>累计时长</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 15310 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>人均使用时长</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>人均使用时长</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 4 }}</span>
           </div>
         </div>
         <div class="dataBox">
@@ -302,22 +308,26 @@
               </div>
             </div>
           </div>
-          <div class="teafre" v-if="shType">
-            <div class="teaLeft">
-              <div>平台实施课程总数</div>
-              <div>18</div>
+          <div class="info_box" v-if="shType">
+            <div class="info blueBG">
+              <span>平台实施课程总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft">
-              <div>平台实施课程占比</div>
-              <div>80%</div>
+            <div class="info blueBG">
+              <span>平台实施课程占比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "80%" }}</span>
             </div>
-            <div class="teaLeft">
-              <div>课程平均任务数量</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>课程平均任务数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>课程平均作业数量</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>课程平均作业数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <workNum v-if="shType"></workNum>
@@ -343,38 +353,24 @@
               align-items: center;
             "
           >
-            <el-select
-              v-model="cType4"
-              class="selectBox"
-              style="width: 110px"
-            >
+            <el-select v-model="cType4" class="selectBox" style="width: 110px">
               <el-option label="全部" value="全部"></el-option>
             </el-select>
-            <el-select
-              v-model="cType5"
-              class="selectBox"
-              style="width: 110px"
-            >
+            <el-select v-model="cType5" class="selectBox" style="width: 110px">
               <el-option label="总量占比" value="总量占比"></el-option>
             </el-select>
           </div>
         </div>
         <div class="dataBox">
-          <courseInfo
-            style="height: calc(100% - 40px)"
-          ></courseInfo>
+          <courseInfo style="height: calc(100% - 40px)"></courseInfo>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox" style="justify-content: space-between">
           <div class="title">跨学科教学情况</div>
-          <el-select
-              v-model="cType6"
-              class="selectBox"
-              style="width: 110px"
-            >
-              <el-option label="全部" value="全部"></el-option>
-            </el-select>
+          <el-select v-model="cType6" class="selectBox" style="width: 110px">
+            <el-option label="全部" value="全部"></el-option>
+          </el-select>
         </div>
         <div class="dataBox">
           <cateRank style="height: calc(100% - 72px)"></cateRank>
@@ -414,7 +410,7 @@ export default {
   },
   data() {
     return {
-      isLoading:false,
+      isLoading: false,
       cType: "全部",
       cType1: "全部年级",
       cType2: "全部活动",
@@ -451,9 +447,9 @@ export default {
         .post(this.$store.state.api + "selectDataBoardSchoolNew", params)
         .then((res) => {
           this.isLoading = false;
-          let _grade = res.data[0] //年级
-          let _subject = res.data[1]  //学科
-          let _course = res.data[2] //课程
+          let _grade = res.data[0]; //年级
+          let _subject = res.data[1]; //学科
+          let _course = res.data[2]; //课程
 
           this.$forceUpdate();
         })
@@ -557,62 +553,6 @@ export default {
   width: 100%;
 }
 
-.info_box {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  width: 90%;
-  margin: 0 auto;
-}
-
-.info_box > .info2,
-.info_box > .info3,
-.info_box > .info {
-  width: calc(50% - 10px);
-  display: flex;
-  flex-direction: column;
-  height: 60px;
-  justify-content: center;
-  padding: 0 10px;
-  box-sizing: border-box;
-  margin-bottom: 10px;
-  border-radius: 5px;
-}
-
-.info_box > .info2 {
-  width: calc(100% / 4 - 10px);
-  align-items: flex-end;
-}
-
-.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) {
-  font-size: 12px;
-  /* margin: 0 0 5px 0; */
-  color: #565e6a;
-}
-
-.info_box > .info2 > span:nth-child(2),
-.info_box > .info3 > span:nth-child(2),
-.info_box > .info > span:nth-child(2) {
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.blueBG {
-  background: linear-gradient(
-    180deg,
-    rgba(224, 234, 251, 0.2) 0%,
-    rgba(54, 130, 252, 0.3) 100%
-  );
-}
-
 .greenBG {
   background: linear-gradient(
     180deg,
@@ -681,17 +621,6 @@ export default {
   line-height: 30px;
 }
 
-.teafre {
-  margin: 5px 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  width: 100%;
-  justify-content: space-evenly;
-}
-
-.teaLeft,
 .teaMiddle {
   width: calc(100% / 2 - 10px);
   height: 60px;
@@ -707,13 +636,7 @@ export default {
 .teaMiddle {
   width: calc(100% / 3 - 10px);
 }
-.teaLeft {
-  width: 95%;
-  background: #f3f8fd;
-}
-.teaRigth {
-  background: #f3f8fd;
-}
+
 .timeDiv {
   display: flex;
   flex-direction: row;
@@ -749,4 +672,62 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
+  /* align-items: flex-end; */
+}
+
+.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) {
+  font-size: 14px;
+  /* margin: 0 0 0 20px; */
+  color: #565e6a;
+  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) {
+  font-size: 24px;
+  /* font-weight: 700; */
+}
+
+.blueBG {
+  background: rgb(243, 248, 253);
+  border: 2px solid rgb(234, 246, 255);
+}
 </style>

src/components/pages/dataBoardNew/school/workNum/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data_body" style="height: calc(100% - 100px)">
+  <div class="data_body" style="height: calc(100% - 170px)">
     <div style="width: 100%; height: 100%">
       <div
         id="charts_canvas"

src/components/pages/dataBoardNew/student/index.vue

@@ -7,24 +7,26 @@
           <div class="title">基础概况</div>
         </div>
         <div class="dataBox">
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>学生总数</div>
-              <div>310</div>
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>学生总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月登录学生用户环比</div>
-              <div>0.9%</div>
+            <div class="info blueBG">
+              <span>本月登录学生用户环比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "80%" }}</span>
             </div>
-          </div>
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>本月登录学生用户总数</div>
-              <div>138</div>
+            <div class="info blueBG">
+              <span>本月登录学生用户总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月新增登录学生用户</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>本月新增登录学生用户</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <loginCount style="height: calc(100% - 140px)"></loginCount>
@@ -60,24 +62,28 @@
             <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
           </div>
         </div>
-        <div class="teafre" v-if="!oType">
-          <div class="teaLeft">
-            <div>开展频次</div>
-            <div>153</div>
+        <div class="info_box" v-if="!oType">
+          <div class="info blueBG">
+            <span>开展频次</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 18 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>人均频次</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>人均频次</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ "80%" }}</span>
           </div>
         </div>
-        <div class="teafre" v-if="oType">
-          <div class="teaLeft">
-            <div>累计时长</div>
-            <div>15310</div>
+        <div class="info_box" v-if="oType">
+          <div class="info blueBG">
+            <span>累计时长</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 18 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>人均在线时长</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>人均在线时长</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ "80%" }}</span>
           </div>
         </div>
         <div class="dataBox">
@@ -315,14 +321,16 @@
           </div>
         </div>
         <div class="dataBox">
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>人均参与课程数</div>
-              <div>18</div>
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>人均参与课程数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>人均参与项目数</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>人均参与项目数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <loginTime style="height: calc(100% - 72px)"></loginTime>
@@ -362,7 +370,7 @@ export default {
   },
   data() {
     return {
-      isLoading:false,
+      isLoading: false,
       skType: 0,
       tType: 0,
       courseType: 0,
@@ -401,9 +409,9 @@ export default {
         .post(this.$store.state.api + "selectDataBoardStudentNew", params)
         .then((res) => {
           this.isLoading = false;
-          let _grade = res.data[0] //年级
-          let _subject = res.data[1]  //学科
-          let _course = res.data[2] //课程
+          let _grade = res.data[0]; //年级
+          let _subject = res.data[1]; //学科
+          let _course = res.data[2]; //课程
 
           this.$forceUpdate();
         })
@@ -512,63 +520,6 @@ export default {
   width: 100%;
 }
 
-.info_box {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  width: 90%;
-  margin: 0 auto;
-}
-
-.info_box > .info2,
-.info_box > .info3,
-.info_box > .info {
-  width: calc(50% - 10px);
-  display: flex;
-  flex-direction: column;
-  height: 60px;
-  justify-content: center;
-  padding: 0 10px;
-  box-sizing: border-box;
-  margin-bottom: 10px;
-  border-radius: 5px;
-}
-
-.info_box > .info2 {
-  width: calc(100% / 4 - 10px);
-  align-items: flex-end;
-  margin-right: 10px;
-}
-
-.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) {
-  font-size: 12px;
-  /* margin: 0 0 5px 0; */
-  color: #565e6a;
-}
-
-.info_box > .info2 > span:nth-child(2),
-.info_box > .info3 > span:nth-child(2),
-.info_box > .info > span:nth-child(2) {
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.blueBG {
-  background: linear-gradient(
-    180deg,
-    rgba(224, 234, 251, 0.2) 0%,
-    rgba(54, 130, 252, 0.3) 100%
-  );
-}
-
 .greenBG {
   background: linear-gradient(
     180deg,
@@ -616,17 +567,7 @@ export default {
 .selectBox >>> .el-input__icon {
   line-height: 30px;
 }
-.teafre {
-  margin: 5px 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  width: 100%;
-  justify-content: space-evenly;
-}
 
-.teaLeft,
 .teaMiddle {
   width: calc(100% / 2 - 10px);
   height: 60px;
@@ -642,13 +583,7 @@ export default {
 .teaMiddle {
   width: calc(100% / 3 - 10px);
 }
-.teaLeft {
-  width: 95%;
-  background: #f3f8fd;
-}
-.teaRigth {
-  background: #f3f8fd;
-}
+
 .timeDiv {
   display: flex;
   flex-direction: row;
@@ -721,4 +656,62 @@ export default {
 }
 .depth > div:nth-child(1) {
 }
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
+  /* align-items: flex-end; */
+}
+
+.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) {
+  font-size: 14px;
+  /* margin: 0 0 0 20px; */
+  color: #565e6a;
+  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) {
+  font-size: 24px;
+  /* font-weight: 700; */
+}
+
+.blueBG {
+  background: rgb(243, 248, 253);
+  border: 2px solid rgb(234, 246, 255);
+}
 </style>

src/components/pages/dataBoardNew/teacher/index.vue

@@ -7,24 +7,26 @@
           <div class="title">基础概况</div>
         </div>
         <div class="dataBox">
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>教师总数</div>
-              <div>310</div>
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>教师总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月登录教师用户环比</div>
-              <div>0.9%</div>
+            <div class="info blueBG">
+              <span>本月登录教师用户环比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ "80%" }}</span>
             </div>
-          </div>
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>本月登录教师用户总数</div>
-              <div>138</div>
+            <div class="info blueBG">
+              <span>本月登录教师用户总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>本月新增登录教师用户</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>本月新增登录教师用户</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
           </div>
           <TeaFre style="height: calc(100% - 150px)"></TeaFre>
@@ -57,24 +59,28 @@
             <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
           </div>
         </div>
-        <div class="teafre" v-if="!oType">
-          <div class="teaLeft">
-            <div>开展频次</div>
-            <div>153</div>
+        <div class="info_box" v-if="!oType">
+          <div class="info blueBG">
+            <span>开展频次</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 18 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>人均使用频次</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>人均使用频次</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ "80%" }}</span>
           </div>
         </div>
-        <div class="teafre" v-if="oType">
-          <div class="teaLeft">
-            <div>累计时长</div>
-            <div>15310</div>
+        <div class="info_box" v-if="oType">
+          <div class="info blueBG">
+            <span>累计时长</span>
+            <!-- <span>{{ count }}</span> -->
+            <span>{{ 18 }}</span>
           </div>
-          <div class="teaLeft teaRigth">
-            <div>人均在线时长</div>
-            <div>4</div>
+          <div class="info blueBG">
+            <span>人均在线时长</span>
+            <!-- <span>{{ weekCount }}</span> -->
+            <span>{{ 4 }}</span>
           </div>
         </div>
         <div class="dataBox">
@@ -156,14 +162,8 @@
           </div>
         </div>
         <div class="dataBox">
-          <TeaData
-            v-if="courseType == 0"
-            style="height: calc(100%)"
-          ></TeaData>
-          <FunPlot
-            v-if="courseType == 1"
-            style="height: calc(100%)"
-          ></FunPlot>
+          <TeaData v-if="courseType == 0" style="height: calc(100%)"></TeaData>
+          <FunPlot v-if="courseType == 1" style="height: calc(100%)"></FunPlot>
         </div>
       </div>
       <div class="bottom">
@@ -342,14 +342,16 @@
           </div>
         </div>
         <div class="dataBox">
-          <div class="teafre">
-            <div class="teaLeft">
-              <div>人均参与课程数</div>
-              <div>18</div>
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>人均参与课程数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 18 }}</span>
             </div>
-            <div class="teaLeft teaRigth">
-              <div>人均参与项目数</div>
-              <div>18</div>
+            <div class="info blueBG">
+              <span>人均参与项目数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 4 }}</span>
             </div>
           </div>
           <WorkTime style="height: calc(100% - 72px)"></WorkTime>
@@ -389,7 +391,7 @@ export default {
   },
   data() {
     return {
-      isLoading:false,
+      isLoading: false,
       skType: 0,
       tType: 0,
       tType1: 0,
@@ -425,9 +427,9 @@ export default {
         .post(this.$store.state.api + "selectDataBoardTeacherNew", params)
         .then((res) => {
           this.isLoading = false;
-          let _grade = res.data[0] //年级
-          let _subject = res.data[1]  //学科
-          let _course = res.data[2] //课程
+          let _grade = res.data[0]; //年级
+          let _subject = res.data[1]; //学科
+          let _course = res.data[2]; //课程
 
           this.$forceUpdate();
         })
@@ -538,17 +540,6 @@ export default {
   margin-right: 10px;
 }
 
-.teafre {
-  margin: 5px 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  width: 100%;
-  justify-content: space-evenly;
-}
-
-.teaLeft,
 .teaMiddle {
   width: calc(100% / 2 - 10px);
   height: 60px;
@@ -564,13 +555,7 @@ export default {
 .teaMiddle {
   width: calc(100% / 3 - 10px);
 }
-.teaLeft {
-  width: 95%;
-  background: #f3f8fd;
-}
-.teaRigth {
-  background: #f3f8fd;
-}
+
 .timeDiv {
   display: flex;
   flex-direction: row;
@@ -696,4 +681,62 @@ export default {
 .selectBox >>> .el-input__icon {
   line-height: 30px;
 }
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
+  /* align-items: flex-end; */
+}
+
+.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) {
+  font-size: 14px;
+  /* margin: 0 0 0 20px; */
+  color: #565e6a;
+  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) {
+  font-size: 24px;
+  /* font-weight: 700; */
+}
+
+.blueBG {
+  background: rgb(243, 248, 253);
+  border: 2px solid rgb(234, 246, 255);
+}
 </style>