Browse Source

新增授课时长功能

zengyicheng 2 years ago
parent
commit
f3ad39707d

+ 52 - 8
src/components/pages/dataBoard/course/chartList/workTime.vue

@@ -12,9 +12,18 @@
 
 <script>
 export default {
+  props: {
+    workList: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
       option: {
         tooltip: {
           trigger: "axis",
@@ -35,20 +44,21 @@ export default {
         },
         yAxis: {
           type: "category",
-          data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+          // data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+          data: [],
         },
         series: [
           {
-            name: "2011",
             type: "bar",
-            data: [60, 110, 25, 130, 65, 80],
+            // data: [60, 110, 25, 130, 65, 80],
+            data: [],
           },
         ],
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -58,14 +68,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: {
+    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.option);
+    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) {
@@ -73,9 +120,6 @@ export default {
       }
     });
   },
-  created() {
-    this.setChart();
-  },
 };
 </script>
 

+ 107 - 2
src/components/pages/dataBoard/course/index.vue

@@ -82,6 +82,11 @@
       <div class="top">
         <div class="titleBox">
           <div class="title">课程分析</div>
+          <el-select v-model="cType" @change="typeChange" class="selectBox">
+            <el-option label="年级" value="grade"></el-option>
+            <el-option label="主题" value="theme"></el-option>
+            <el-option label="学科" value="subject"></el-option>
+          </el-select>
         </div>
         <div class="dataBox">
           <CourseAna style="height: calc(100% - 40px)"></CourseAna>
@@ -90,9 +95,14 @@
       <div class="bottom">
         <div class="titleBox">
           <div class="title">授课时长</div>
+          <el-select v-model="lType" @change="typeChange1" class="selectBox">
+            <el-option label="年级" value="grade"></el-option>
+            <el-option label="主题" value="theme"></el-option>
+            <el-option label="学科" value="subject"></el-option>
+          </el-select>
         </div>
         <div class="dataBox">
-          <div class="teafre">
+          <div class="teafre" style="margin: 10px 0 0 0">
             <div class="teaLeft">
               <div>累计时长</div>
               <div>15624小时</div>
@@ -102,7 +112,10 @@
               <div>268小时</div>
             </div>
           </div>
-          <WorkTime style="height: calc(100% - 62px)"></WorkTime>
+          <WorkTime
+            style="height: calc(100% - 72px)"
+            :workList="tedurArray"
+          ></WorkTime>
         </div>
       </div>
     </div>
@@ -143,12 +156,28 @@ export default {
       groupedArrayByMonth: [],
       toolList: [],
       reInc: 0,
+      cType: "grade",
+      lType: "grade",
+      tedurArray: [],
+      classList: [],
+      subjectList: [],
+      themeList: [],
     };
   },
   mounted() {
     this.getData();
   },
   methods: {
+    typeChange(){},
+    typeChange1() {
+      if (this.lType == "grade") {
+        this.tedurArray = this.classList;
+      } else if (this.lType == "subject") {
+        this.tedurArray = this.subjectList;
+      } else {
+        this.tedurArray = this.themeList;
+      }
+    },
     getData() {
       this.isLoading = true;
       let params = [
@@ -165,6 +194,10 @@ export default {
           this.cCount = res.data[1].length;
           var workArray = res.data[0];
           var courseList = res.data[1];
+          var tList = res.data[2];
+          var classList = res.data[3]; //年级数组
+          var subjectList = res.data[4]; //学科数组
+          var themeList = res.data[5]; //主题数组
           var cList = [];
           //将数据根据time里面的月份分成多个数组
           var groupedArrayByMonth = [];
@@ -264,6 +297,65 @@ export default {
             }
           }
           this.toolList = toolAllArray;
+          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 < classList.length; j++) {
+              if (courseJson[i].typeid.indexOf(classList[j].id) != -1) {
+                if(classList[j].time && courseJson[i].text){
+                  classList[j].time += parseInt(courseJson[i].text);
+                }else if(courseJson[i].text){
+                  classList[j].time = parseInt(courseJson[i].text);
+                }
+              }
+            }
+            for (var k = 0; k < subjectList.length; k++) {
+              if (courseJson[i].typeid.indexOf(subjectList[k].id) != -1) {
+                if(subjectList[k].time && courseJson[i].text){
+                  subjectList[k].time += parseInt(courseJson[i].text);
+                }else if(courseJson[i].text){
+                  subjectList[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 = classList;
+          this.subjectList = subjectList;
+          this.themeList = themeList;
+          if (this.lType == "grade") {
+            this.tedurArray = classList;
+          } else if (this.lType == "subject") {
+            this.tedurArray = subjectList;
+          } else {
+            this.tedurArray = themeList;
+          }
         })
         .catch((err) => {
           this.isLoading = false;
@@ -457,4 +549,17 @@ export default {
   width: 50%;
   height: 100%;
 }
+.selectBox {
+  width: 80px;
+  margin-left: 10px;
+}
+
+.selectBox >>> .el-input__inner {
+  height: 30px;
+  line-height: 30px;
+}
+
+.selectBox >>> .el-input__icon {
+  line-height: 30px;
+}
 </style>

+ 1 - 4
src/components/pages/dataBoard/teacher/chartList/funPlot.vue

@@ -16,17 +16,15 @@ export default {
     return {
       chartObj: null,
       option: {
-       
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c}%",
+          formatter: "{b} : {c}%",
         },
         legend: {
           data: ["评价", "授课", "创建", "登录"],
         },
         series: [
           {
-            name: "平台使用深度",
             type: "funnel",
             left: "10%",
             top: 60,
@@ -52,7 +50,6 @@ export default {
               borderColor: "#fff",
               borderWidth: 1,
             },
-
             data: [
               { value: 20, name: "登录" },
               { value: 40, name: "创建" },

+ 7 - 7
src/components/pages/dataBoard/teacher/index.vue

@@ -93,7 +93,7 @@
                 </div>
               </div>
               <div class="depth">
-                <span>指导项目</span>
+                <span>创设项目</span>
                 <div>
                   <el-progress
                     :width="80"
@@ -106,7 +106,7 @@
                 </div>
               </div>
               <div class="depth">
-                <span>使用工具</span>
+                <span>协同合作</span>
                 <div>
                   <el-progress
                     :width="80"
@@ -119,7 +119,7 @@
                 </div>
               </div>
               <div class="depth">
-                <span>课程评价</span>
+                <span>互动交流</span>
                 <div>
                   <el-progress
                     :width="80"
@@ -132,7 +132,7 @@
                 </div>
               </div>
               <div class="depth">
-                <span>互动交流</span>
+                <span>添加目标</span>
                 <div>
                   <el-progress
                     :width="80"
@@ -145,7 +145,7 @@
                 </div>
               </div>
               <div class="depth">
-                <span>参与课程</span>
+                <span>使用工具</span>
                 <div>
                   <el-progress
                     :width="80"
@@ -158,7 +158,7 @@
                 </div>
               </div>
               <div class="depth">
-                <span>参与项目</span>
+                <span>设置评价</span>
                 <div>
                   <el-progress
                     :width="80"
@@ -171,7 +171,7 @@
                 </div>
               </div>
               <div class="depth">
-                <span>使用工具</span>
+                <span>学生评价</span>
                 <div>
                   <el-progress
                     :width="80"