1

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

@@ -12,6 +12,11 @@
 
 <script>
 export default {
+  props: {
+    workList: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
@@ -20,28 +25,55 @@ export default {
         type: [],
       },
       option: {
+        title: {
+          text: '授课时长',
+          textStyle: {
+            fontSize: 12,
+          },
+          padding: [10, 0, 0, 10]
+        },
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
         },
         xAxis: {
           type: "value",
-          data: [0, 50, 100, 150, 200, 250],
+          boundaryGap: [0, 0.01],
         },
         yAxis: {
           type: "category",
-          data: ["五年级", "四年级", "三年级", "二年级", "一年级"],
+          // data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+          data: [],
         },
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130],
+            name: "授课时长（时）",
             type: "bar",
+            // data: [60, 110, 25, 130, 65, 80],
+            data: [],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
           },
         ],
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -51,15 +83,51 @@ export default {
         const chartObj = this.$echarts.init(
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.yAxis.data = option.xdata;
+        this.option.series[0].data = option.type;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
   },
-  watch: {},
+  watch: {
+    workList: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.ooption = {
+          xdata: [],
+          type: [],
+        };
+        let _array = newValue;
+        for (var i = 0; i < _array.length; i++) {
+          this.ooption.xdata.push(_array[i].name);
+          this.ooption.type.push(_array[i].time);
+        }
+
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          this.option.yAxis.data = this.ooption.xdata;
+          this.option.series[0].data = this.ooption.type;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
   mounted() {
-    this.setChart();
+    this.ooption = {
+      xdata: [],
+      type: [],
+    };
+    let _array = this.workList;
+    for (var i = 0; i < _array.length; i++) {
+      this.ooption.xdata.push(_array[i].name);
+      this.ooption.type.push(_array[i].time);
+    }
+    this.setChart(this.ooption);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

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

@@ -12,6 +12,12 @@
 
 <script>
 export default {
+  props: {
+    monthArray: {
+      type: Array,
+      default: [],
+    },
+  },
   data() {
     return {
       chartObj: null,
@@ -21,18 +27,18 @@ export default {
       },
       option: {
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
         },
         xAxis: {
           type: "category",
-          boundaryGap: false,
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          boundaryGap: true,
+          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
         yAxis: {
           type: "value",
         },
         grid: {
-          top: "15%",
+          top: "30",
           left: "5%",
           right: "5%",
           bottom: "5%",
@@ -40,16 +46,24 @@ export default {
         },
         series: [
           {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            // data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: [],
             type: "line",
             areaStyle: {},
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
           },
         ],
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -59,15 +73,46 @@ export default {
         const chartObj = this.$echarts.init(
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.course;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        course: [],
+      }
+      let _array = array
+      for (var i = 0; i < _array.length; i++) {
+        this.ooption.xdata.push(_array[i].Month + '月')
+        this.ooption.course.push(_array[i].course)
+      }
+
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.course;
+        this.chartObj.setOption(this.option);
+      }
+    }
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
   },
-  watch: {},
   mounted() {
-    this.setChart();
+    this.setJson(this.monthArray)
+
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

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

@@ -5,34 +5,55 @@
       <div class="top">
         <div class="titleBox" style="justify-content: space-between">
           <div class="title">基础概况</div>
-          <el-select v-model="cType7" class="selectBox" style="width: 110px">
+          <!-- <el-select v-model="cType7" class="selectBox" style="width: 110px">
             <el-option label="全部课程" value="全部课程"></el-option>
-          </el-select>
+          </el-select> -->
         </div>
         <div class="dataBox">
           <div class="info_box">
             <div class="info blueBG">
               <span>课程总数</span>
               <!-- <span>{{ count }}</span> -->
-              <span>{{ 15310 }}</span>
+              <span>{{ allCourse }}</span>
             </div>
             <div class="info blueBG">
               <span>本月新增课程环比</span>
               <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ "0.9%" }}</span>
+              <span>{{
+                loginCountMonthArray[loginCountMonthArray.length - 1].course -
+                  loginCountMonthArray[loginCountMonthArray.length - 2].course <
+                0
+                  ? 0
+                  : (
+                      (loginCountMonthArray[loginCountMonthArray.length - 1]
+                        .course -
+                        loginCountMonthArray[loginCountMonthArray.length - 2]
+                          .course) /
+                      (allCourse -
+                        loginCountMonthArray[loginCountMonthArray.length - 1]
+                          .course)
+                    ).toFixed(2) *
+                      100 +
+                    "%"
+              }}</span>
             </div>
             <div class="info blueBG">
               <span>模板课程总数</span>
               <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ 1138 }}</span>
+              <span>{{ courseTemplate }}</span>
             </div>
             <div class="info blueBG">
               <span>本月新增课程总数</span>
               <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ 18 }}</span>
+              <span>{{
+                loginCountMonthArray[loginCountMonthArray.length - 1].course
+              }}</span>
             </div>
           </div>
-          <TeaFre style="height: calc(100% - 140px)"></TeaFre>
+          <TeaFre
+            style="height: calc(100% - 140px)"
+            :monthArray="loginCountMonthArray"
+          ></TeaFre>
         </div>
       </div>
       <div class="bottom">
@@ -53,7 +74,17 @@
           >
             授课频次
           </div>
-          <el-select v-model="cType" class="selectBox" style="width: 110px">
+          <el-select
+            v-model="lType"
+            @change="typeChange1"
+            class="selectBox"
+            style="margin-left: auto"
+          >
+            <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-model="cType" class="selectBox" style="width: 110px">
             <el-option label="全部年级" value="全部年级"></el-option>
             <el-option label="一年级" value="一年级"></el-option>
             <el-option label="二年级" value="二年级"></el-option>
@@ -63,52 +94,62 @@
             <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
             <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
             <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
-          </div>
-        </div>
-        <div class="info_box" v-if="!oType">
-          <div class="info blueBG">
-            <span>授课频次</span>
-            <!-- <span>{{ count }}</span> -->
-            <span>{{ 153 }}</span>
-          </div>
-          <div class="info blueBG">
-            <span>课程开展总数</span>
-            <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ 4 }}</span>
-          </div>
-          <div class="info blueBG">
-            <span>课程平均授课次数</span>
-            <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ 4 }}</span>
-          </div>
+          </div> -->
         </div>
-        <div class="info_box" v-if="oType">
-          <div class="info blueBG">
-            <span>累计时长</span>
-            <!-- <span>{{ count }}</span> -->
-            <span>{{ 110 }}</span>
-          </div>
-          <div class="info blueBG">
-            <span>课程实施总数</span>
-            <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ 4 }}</span>
+
+        <div class="dataBox">
+          <div class="info_box" style="width: 96%" v-if="skType == 0">
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>累计时长</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ allTime }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课程实施总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ courseLength }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课程平均时长</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{
+                allTime == 0 ? 0 : (allTime / courseLength).toFixed(0)
+              }}</span>
+            </div>
           </div>
-          <div class="info blueBG">
-            <span>课程评价时长</span>
-            <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ 4 }}</span>
+          <div class="info_box" style="width: 96%" v-if="skType == 1">
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>授课频次</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ 153 }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课程开展总数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 4 }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课程平均授课次数</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{ 4 }}</span>
+            </div>
           </div>
-        </div>
-        <div class="dataBox">
-          <ToolUse style="height: calc(100% - 170px)" v-if="!oType"></ToolUse>
-          <Bar style="height: calc(100% - 170px)" v-if="oType"></Bar>
-          <div class="otherCss">
+          <Bar
+            style="height: calc(100% - 70px)"
+            v-if="skType == 0"
+            :workList="tedurArray"
+          ></Bar>
+          <ToolUse
+            style="height: calc(100% - 70px)"
+            v-if="skType == 1"
+          ></ToolUse>
+          <!-- <div class="otherCss">
             <div v-if="!oType">切换为柱状图</div>
             <div v-if="oType">切换为热力图</div>
             <div class="otherImg" @click="otherEchart">
               <img src="../../../../assets/icon/other.png" alt="" />
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -208,7 +249,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -221,7 +262,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -234,7 +275,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -247,7 +288,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -428,6 +469,21 @@ export default {
       oType: false,
       shType: false,
       xtType: false,
+      allCourse: 0,
+      courseTemplate: 0,
+      loginCountMonthArray: [],
+      lType: "grade",
+      tedurArray: [],
+      classList: [],
+      subjectList: [],
+      themeList: [],
+      allTime: 0,
+      sumTime: 0,
+      gradeLength: 0,
+      subjectLength: 0,
+      themeLength: 0,
+      courseTList: [],
+      courseLength: 0,
     };
   },
   mounted() {
@@ -443,6 +499,30 @@ export default {
     xtEchart() {
       this.xtType = !this.xtType;
     },
+    typeChange1() {
+      var a = [];
+      if (this.lType == "grade") {
+        a = this.classList;
+        this.courseLength = this.gradeLength;
+      } else if (this.lType == "subject") {
+        a = this.subjectList;
+        this.courseLength = this.subjectLength;
+      } else {
+        a = this.themeList;
+        this.courseLength = this.themeLength;
+      }
+      this.tedurArray = a;
+      var time = 0;
+      for (var i = 0; i < a.length; i++) {
+        if (a[i].time) {
+          time += a[i].time;
+        }
+      }
+      this.allTime = time;
+
+      // this.sumTime = Math.ceil(time / this.studentNum);
+      this.$forceUpdate();
+    },
     getData() {
       this.isLoading = true;
       let params = [
@@ -457,7 +537,175 @@ export default {
           this.isLoading = false;
           let _grade = res.data[0]; //年级
           let _subject = res.data[1]; //学科
-          let _course = res.data[2]; //课程
+          let _themeList = res.data[2]; //主题
+          this.allCourse = res.data[3][0].count; //课程总数
+          let _timeCourse = res.data[4]; //查询半年内全部课程
+          this.courseTemplate = res.data[5][0].count; //查询模板课程总数
+          let tList = res.data[6]; //授课时长
+          this.courseTList = tList;
+
+          //将数据根据time里面的月份分成多个数组
+          let loginCountMonthArray = [];
+          const date = new Date();
+          var Month = date.getMonth() + 1;
+          var Year = date.getFullYear();
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              loginCountMonthArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                course: 0,
+              });
+            } else {
+              loginCountMonthArray.push({
+                Month: i,
+                Year: Year,
+                course: 0,
+              });
+            }
+          }
+          loginCountMonthArray = loginCountMonthArray.reverse();
+          for (var i = 0; i < _timeCourse.length; i++) {
+            let _date = new Date(_timeCourse[i].time);
+            var _month = _date.getMonth() + 1;
+            var _year = _date.getFullYear();
+            for (var j = 0; j < loginCountMonthArray.length; j++) {
+              if (
+                _month == loginCountMonthArray[j].Month &&
+                _year == loginCountMonthArray[j].Year
+              ) {
+                loginCountMonthArray[j].course++;
+                break;
+              }
+            }
+          }
+          this.loginCountMonthArray = loginCountMonthArray;
+
+          var courseJson = Object.values(
+            tList.reduce(function (acc, obj) {
+              if (!acc[obj.courseid]) {
+                acc[obj.courseid] = { ...obj };
+                acc[obj.courseid].typeid = [acc[obj.courseid].typeid];
+              } else {
+                if (!acc[obj.courseid].typeid.includes(obj.typeid)) {
+                  acc[obj.courseid].typeid.push(obj.typeid);
+                }
+                acc[obj.courseid].text =
+                  parseInt(acc[obj.courseid].text) + parseInt(obj.text);
+              }
+              return acc;
+            }, {})
+          ).map(function (obj) {
+            var totalTime = parseInt(obj.text);
+            obj.text = (totalTime / (60 * 60)).toFixed(2);
+            return obj;
+          });
+
+          for (var i = 0; i < courseJson.length; i++) {
+            for (var j = 0; j < _grade.length; j++) {
+              if (courseJson[i].typeid.indexOf(_grade[j].id) != -1) {
+                if (_grade[j].time && courseJson[i].text) {
+                  _grade[j].time += parseInt(courseJson[i].text);
+                } else if (courseJson[i].text) {
+                  _grade[j].time = parseInt(courseJson[i].text);
+                }
+              }
+            }
+            for (var k = 0; k < _subject.length; k++) {
+              if (courseJson[i].typeid.indexOf(_subject[k].id) != -1) {
+                if (_subject[k].time && courseJson[i].text) {
+                  _subject[k].time += parseInt(courseJson[i].text);
+                } else if (courseJson[i].text) {
+                  _subject[k].time = parseInt(courseJson[i].text);
+                }
+              }
+            }
+            for (var l = 0; l < _themeList.length; l++) {
+              if (courseJson[i].typeid.indexOf(_themeList[l].id) != -1) {
+                if (_themeList[l].time && courseJson[i].text) {
+                  _themeList[l].time += parseInt(courseJson[i].text);
+                } else if (courseJson[i].text) {
+                  _themeList[l].time = parseInt(courseJson[i].text);
+                }
+              }
+            }
+          }
+
+          this.classList = _grade;
+          this.subjectList = _subject;
+          this.themeList = _themeList;
+
+          var _gradeList = [],
+            _subjectList = [],
+            _thList = [];
+          for (var i = 0; i < _grade.length; i++) {
+            _gradeList.push(_grade[i].id);
+          }
+          for (var i = 0; i < _subject.length; i++) {
+            _subjectList.push(_subject[i].id);
+          }
+          for (var i = 0; i < _themeList.length; i++) {
+            _thList.push(_themeList[i].id);
+          }
+
+          var _courseTypeList = this.courseTList;
+          var _gList = [],
+            _sList = [],
+            _tList = [];
+          for (var i = 0; i < _courseTypeList.length; i++) {
+            if (_gradeList.indexOf(_courseTypeList[i].typeid) != -1) {
+              if (_gList.length == 0) {
+                _gList.push(_courseTypeList[i].courseid);
+              } else {
+                if (_gList.indexOf(_courseTypeList[i].courseid) == -1) {
+                  _gList.push(_courseTypeList[i].courseid);
+                }
+              }
+            }
+            if (_subjectList.indexOf(_courseTypeList[i].typeid) != -1) {
+              if (_sList.length == 0) {
+                _sList.push(_courseTypeList[i].courseid);
+              } else {
+                if (_sList.indexOf(_courseTypeList[i].courseid) == -1) {
+                  _sList.push(_courseTypeList[i].courseid);
+                }
+              }
+            }
+            if (_thList.indexOf(_courseTypeList[i].typeid) != -1) {
+              if (_tList.length == 0) {
+                _tList.push(_courseTypeList[i].courseid);
+              } else {
+                if (_tList.indexOf(_courseTypeList[i].courseid) == -1) {
+                  _tList.push(_courseTypeList[i].courseid);
+                }
+              }
+            }
+          }
+
+          this.gradeLength = _gList.length;
+          this.subjectLength = _sList.length;
+          this.themeLength = _tList.length;
+
+          var a = [];
+          if (this.lType == "grade") {
+            this.tedurArray = _grade;
+            this.courseLength = _gList.length;
+          } else if (this.lType == "subject") {
+            this.tedurArray = _subject;
+            this.courseLength = _sList.length;
+          } else {
+            this.tedurArray = _themeList;
+            this.courseLength = _tList.length;
+          }
+          var time = 0;
+          a = this.tedurArray;
+          for (var i = 0; i < a.length; i++) {
+            if (a[i].time) {
+              time += a[i].time;
+            }
+          }
+          this.allTime = time;
+          // this.sumTime = Math.ceil(time / this.studentNum);
 
           this.$forceUpdate();
         })

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

@@ -227,7 +227,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -240,7 +240,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -253,7 +253,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -266,7 +266,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>

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

@@ -212,7 +212,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -225,7 +225,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -238,7 +238,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -251,7 +251,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -264,7 +264,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -277,7 +277,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>
@@ -290,7 +290,7 @@
                     :width="80"
                     type="circle"
                     :percentage="80"
-                    :stroke-width="15"
+                    :stroke-width="5"
                     :format="format"
                     color="#106BFF"
                   ></el-progress>