|
|
@@ -13,47 +13,44 @@
|
|
|
<div class="info_box">
|
|
|
<div class="info blueBG">
|
|
|
<span>项目总数</span>
|
|
|
- <!-- <span>{{ count }}</span> -->
|
|
|
- <span>{{ 15130 }}</span>
|
|
|
+ <span>{{ allCourse }}</span>
|
|
|
</div>
|
|
|
<div class="info blueBG">
|
|
|
<span>本月新增项目环比</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ "80%" }}</span>
|
|
|
+ <span v-if="loginCountMonthArray.length">{{
|
|
|
+ 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>
|
|
|
+ <span v-else>0</span>
|
|
|
</div>
|
|
|
<div class="info blueBG">
|
|
|
<span>模板项目总数</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ 18 }}</span>
|
|
|
+ <span>{{ courseTemplate }}</span>
|
|
|
</div>
|
|
|
<div class="info blueBG">
|
|
|
<span>本月新增项目总数</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ 18 }}</span>
|
|
|
+ <span v-if="loginCountMonthArray.length">{{
|
|
|
+ loginCountMonthArray[loginCountMonthArray.length - 1].course
|
|
|
+ }}</span>
|
|
|
+ <span v-else>0</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <TeaFre style="height: calc(100% - 140px)"></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 }" @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 }" @click="skType = 1"
|
|
|
+ style="cursor: pointer; padding: 0 0 5px 0">
|
|
|
+ 作业数量
|
|
|
</div>
|
|
|
- <el-select v-model="cType" class="selectBox" style="width: 110px">
|
|
|
+ <!-- <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,114 +60,90 @@
|
|
|
<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>
|
|
|
- <div class="info_box" v-if="!oType">
|
|
|
- <div class="info blueBG">
|
|
|
- <span>开展频次</span>
|
|
|
- <!-- <span>{{ count }}</span> -->
|
|
|
- <span>{{ 15130 }}</span>
|
|
|
+ <div class="info_box" v-if="skType == 1">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
+ <span>作业数量</span>
|
|
|
+ <span>{{ worksCount }}</span>
|
|
|
</div>
|
|
|
- <div class="info blueBG">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
<span>项目开展总数</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ "80%" }}</span>
|
|
|
+ <span>{{ haveWorksCourse }}</span>
|
|
|
</div>
|
|
|
- <div class="info blueBG">
|
|
|
- <span>项目平均开展次数</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ 18 }}</span>
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
+ <span>项目平均作业数量</span>
|
|
|
+ <span>{{
|
|
|
+ !worksCount ? 0 : (worksCount / haveWorksCourse).toFixed(0)
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="info_box" v-if="oType">
|
|
|
- <div class="info blueBG">
|
|
|
+ <div class="info_box" v-if="skType == 0">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
<span>累计时长</span>
|
|
|
- <!-- <span>{{ count }}</span> -->
|
|
|
- <span>{{ 15130 }}</span>
|
|
|
+ <span>{{ 132 }}</span>
|
|
|
</div>
|
|
|
- <div class="info blueBG">
|
|
|
- <span>开展项目总数</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ "80%" }}</span>
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
+ <span>项目开展总数</span>
|
|
|
+ <span>{{ haveWorksCourse }}</span>
|
|
|
</div>
|
|
|
- <div class="info blueBG">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
<span>项目平均时长</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
<span>{{ 18 }}</span>
|
|
|
</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">
|
|
|
+ <div class="dataBox" style="height: calc(100% - 110px);">
|
|
|
+ <ToolUse style="height: calc(100%)" v-if="skType == 1" :worksYearArray="worksYearArray"></ToolUse>
|
|
|
+ <Bar style="height: calc(100%)" v-if="skType == 0"></Bar>
|
|
|
+ <!-- <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>
|
|
|
<div class="center">
|
|
|
<div class="top">
|
|
|
<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 }" @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 }" @click="courseType = 1"
|
|
|
+ style="cursor: pointer; padding: 0 0 5px 0">
|
|
|
项目总数增幅
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dataBox">
|
|
|
- <CateRank
|
|
|
- v-if="courseType == 0"
|
|
|
- style="height: calc(100%)"
|
|
|
- ></CateRank>
|
|
|
- <CourseNum
|
|
|
- v-if="courseType == 1"
|
|
|
- style="height: calc(100%)"
|
|
|
- ></CourseNum>
|
|
|
+ <CateRank v-if="courseType == 0" style="height: calc(100%)"></CateRank>
|
|
|
+ <CourseNum v-if="courseType == 1" style="height: calc(100%)"></CourseNum>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
<div class="titleBox" style="justify-content: space-between">
|
|
|
<div class="title">项目开展情况</div>
|
|
|
- <div
|
|
|
- v-if="!shType"
|
|
|
- style="
|
|
|
+ <!-- <div v-if="!shType" style="
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: nowrap;
|
|
|
align-items: center;
|
|
|
- "
|
|
|
- >
|
|
|
+ ">
|
|
|
<el-select v-model="cType8" class="selectBox" style="width: 110px">
|
|
|
<el-option label="全部年级" value="全部年级"></el-option>
|
|
|
</el-select>
|
|
|
<el-select v-model="cType9" class="selectBox" style="width: 110px">
|
|
|
<el-option label="全部学科" value="全部学科"></el-option>
|
|
|
</el-select>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-if="shType"
|
|
|
- style="
|
|
|
+ </div> -->
|
|
|
+ <!-- <div v-if="shType" style="
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: nowrap;
|
|
|
align-items: center;
|
|
|
- "
|
|
|
- >
|
|
|
+ ">
|
|
|
<el-select v-model="cType1" class="selectBox" style="width: 110px">
|
|
|
<el-option label="全部年级" value="全部年级"></el-option>
|
|
|
</el-select>
|
|
|
@@ -180,36 +153,29 @@
|
|
|
<el-select v-model="cType3" class="selectBox" style="width: 110px">
|
|
|
<el-option label="全部主题" value="全部主题"></el-option>
|
|
|
</el-select>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<div class="dataBox">
|
|
|
- <CourseTime
|
|
|
- v-if="!shType"
|
|
|
- style="height: calc(100% - 30px)"
|
|
|
- ></CourseTime>
|
|
|
+ <CourseTime v-if="!shType" style="height: calc(100% - 30px)"></CourseTime>
|
|
|
<div class="info_box" v-if="shType">
|
|
|
- <div class="info blueBG">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
<span>项目实施总数</span>
|
|
|
- <!-- <span>{{ count }}</span> -->
|
|
|
- <span>{{ 15130 }}</span>
|
|
|
+ <span>{{ haveWorksCourse }}</span>
|
|
|
</div>
|
|
|
- <div class="info blueBG">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
<span>平台实施项目占比</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ "80%" }}</span>
|
|
|
+ <span>{{ haveWorksCourse && allCourse ? (haveWorksCourse / allCourse * 100).toFixed(0) + '%' : 0 + '%' }}</span>
|
|
|
</div>
|
|
|
- <div class="info blueBG">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
<span>项目平均任务数量</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ 18 }}</span>
|
|
|
+ <span>{{ taskCount && allCourse ? (taskCount / allCourse).toFixed(0) : 0 }}</span>
|
|
|
</div>
|
|
|
- <div class="info blueBG">
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
<span>项目平均作业数量</span>
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
- <span>{{ 18 }}</span>
|
|
|
+ <span>{{ worksCount && allCourse ? (worksCount / allCourse).toFixed(0) : 0 }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <WorkNum v-if="shType"></WorkNum>
|
|
|
+ <WorkNum v-if="shType" style="height: calc(100% - 105px)" :workNumList="workNumList"></WorkNum>
|
|
|
<div class="otherCss">
|
|
|
<div v-if="!shType">转换为散点图</div>
|
|
|
<div v-if="shType">转换为堆积柱状图</div>
|
|
|
@@ -223,50 +189,32 @@
|
|
|
<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 }" @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 }" @click="toolType = 1"
|
|
|
+ style="cursor: pointer; padding: 0 0 5px 0">
|
|
|
工具使用
|
|
|
</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="
|
|
|
+ </el-select> -->
|
|
|
+ <!-- <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>
|
|
|
@@ -277,17 +225,11 @@
|
|
|
<el-option label="一年级" value="一年级"></el-option>
|
|
|
<el-option label="二年级" value="二年级"></el-option>
|
|
|
</el-select>
|
|
|
- </div>
|
|
|
+ </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" :toolArray="toolList"></ToolChart>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
@@ -295,7 +237,8 @@
|
|
|
<div class="title">项目学科分布</div>
|
|
|
</div>
|
|
|
<div class="dataBox">
|
|
|
- <WorkTime style="height: calc(100% - 72px)" v-if="xtType"></WorkTime>
|
|
|
+ <subjuect style="height: calc(100% - 30px)" v-if="!xtType"></subjuect>
|
|
|
+ <WorkTime style="height: calc(100% - 30px)" v-if="xtType" :personArray="personList"></WorkTime>
|
|
|
<div class="otherCss">
|
|
|
<div v-if="!xtType">转换为人员协同</div>
|
|
|
<div v-if="xtType">转换为学科协同</div>
|
|
|
@@ -320,6 +263,7 @@ import WorkTime from "./chartList/workTime.vue";
|
|
|
import Bar from "./chartList/bar.vue";
|
|
|
import CourseNum from "./chartList/courseNum.vue";
|
|
|
import ToolChart from "./chartList/toolChart.vue";
|
|
|
+import subjuect from "./chartList/subjuect.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
TeaFre,
|
|
|
@@ -332,6 +276,7 @@ export default {
|
|
|
Bar,
|
|
|
CourseNum,
|
|
|
ToolChart,
|
|
|
+ subjuect
|
|
|
},
|
|
|
props: {
|
|
|
oid: {
|
|
|
@@ -362,6 +307,15 @@ export default {
|
|
|
oType: false,
|
|
|
shType: false,
|
|
|
xtType: false,
|
|
|
+ allCourse: 0,
|
|
|
+ courseTemplate: 0,
|
|
|
+ loginCountMonthArray: [],
|
|
|
+ haveWorksCourse: 0,
|
|
|
+ worksCount: 0,
|
|
|
+ workNumList: [],
|
|
|
+ taskCount: 0,
|
|
|
+ toolList: [],
|
|
|
+ personList: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -377,6 +331,9 @@ export default {
|
|
|
xtEchart() {
|
|
|
this.xtType = !this.xtType;
|
|
|
},
|
|
|
+ format(percentage) {
|
|
|
+ return percentage + '%';
|
|
|
+ },
|
|
|
getData() {
|
|
|
this.isLoading = true;
|
|
|
let params = [
|
|
|
@@ -391,6 +348,197 @@ export default {
|
|
|
this.isLoading = false;
|
|
|
let _grade = res.data[0]; //赛道
|
|
|
let _subject = res.data[1]; //主题
|
|
|
+ this.allCourse = res.data[2][0].count; //课程总数
|
|
|
+ let _timeCourse = res.data[3]; //查询半年内全部课程
|
|
|
+ this.courseTemplate = res.data[4][0].count; //查询模板课程总数
|
|
|
+
|
|
|
+ //将数据根据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;
|
|
|
+
|
|
|
+ this.haveWorksCourse = res.data[5][0].count; //项目开展总数
|
|
|
+ this.worksCount = res.data[6][0].count; //作业数量
|
|
|
+
|
|
|
+ let worksArray = res.data[7];//一年内提交的作业
|
|
|
+ let worksYearArray = []
|
|
|
+ for (var i = Month; i > Month - 12; i--) {
|
|
|
+ if (i <= 0) {
|
|
|
+ worksYearArray.push({
|
|
|
+ Year: Year - 1,
|
|
|
+ Month: 12 + i,
|
|
|
+ mon: 0,
|
|
|
+ tue: 0,
|
|
|
+ wed: 0,
|
|
|
+ thur: 0,
|
|
|
+ fri: 0,
|
|
|
+ sat: 0,
|
|
|
+ sun: 0,
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ worksYearArray.push({
|
|
|
+ Month: i,
|
|
|
+ Year: Year,
|
|
|
+ mon: 0,
|
|
|
+ tue: 0,
|
|
|
+ wed: 0,
|
|
|
+ thur: 0,
|
|
|
+ fri: 0,
|
|
|
+ sat: 0,
|
|
|
+ sun: 0,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ worksYearArray = worksYearArray.reverse()
|
|
|
+ for (var i = 0; i < worksArray.length; i++) {
|
|
|
+ let _date = new Date(worksArray[i].create_at)
|
|
|
+ var _month = _date.getMonth() + 1
|
|
|
+ var _year = _date.getFullYear()
|
|
|
+ var _day = _date.getDay()
|
|
|
+ let dayArray = ['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat']
|
|
|
+ for (var j = 0; j < worksYearArray.length; j++) {
|
|
|
+ if (_month == worksYearArray[j].Month && _year == worksYearArray[j].Year) {
|
|
|
+ worksYearArray[j][dayArray[_day]]++
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(worksYearArray);
|
|
|
+ this.worksYearArray = worksYearArray
|
|
|
+
|
|
|
+
|
|
|
+ let _workCourse = res.data[8]; //带作业的课程
|
|
|
+ let _taskCount = 0 //任务数量
|
|
|
+ var toolAllArray = [
|
|
|
+ { name: "电子白板", value: 0 },
|
|
|
+ { name: "思维导图", value: 0 },
|
|
|
+ { name: "表格", value: 0 },
|
|
|
+ { name: "文档", value: 0 },
|
|
|
+ { name: "资源库", value: 0 },
|
|
|
+ { name: "拍照", value: 0 },
|
|
|
+ { name: "投票", value: 0 },
|
|
|
+ { name: "CocoPi", value: 0 },
|
|
|
+ { name: "其他", value: 0 },
|
|
|
+ ];
|
|
|
+ var twoPerson = 0,threePerson = 0,fivePerson = 0,sevenPerson = 0;
|
|
|
+ let personList = []
|
|
|
+ var wList = [];
|
|
|
+ for (var i = 0; i < _workCourse.length; i++) {
|
|
|
+ if (!wList[_workCourse[i].courseId]) {
|
|
|
+ wList[_workCourse[i].courseId] = {
|
|
|
+ cid: _workCourse[i].courseId,
|
|
|
+ title: _workCourse[i].title,
|
|
|
+ task: 0,
|
|
|
+ work: 0,
|
|
|
+ };
|
|
|
+ let chapters = JSON.parse(_workCourse[i].chapters);
|
|
|
+ for (var j = 0; j < chapters.length; j++) {
|
|
|
+ if (wList[_workCourse[i].courseId].task == 0) {
|
|
|
+ wList[_workCourse[i].courseId].task =
|
|
|
+ chapters[j].chapterInfo[0].taskJson.length;
|
|
|
+ } else {
|
|
|
+ wList[_workCourse[i].courseId].task +=
|
|
|
+ chapters[j].chapterInfo[0].taskJson.length;
|
|
|
+ }
|
|
|
+ _taskCount += chapters[j].chapterInfo[0].taskJson.length;
|
|
|
+ let _taskJson = chapters[j].chapterInfo[0].taskJson
|
|
|
+ for (
|
|
|
+ var k = 0;
|
|
|
+ k < _taskJson.length;
|
|
|
+ k++
|
|
|
+ ) {
|
|
|
+ for (
|
|
|
+ var q = 0;
|
|
|
+ q <
|
|
|
+ _taskJson[k].toolArray.length;
|
|
|
+ q++
|
|
|
+ ) {
|
|
|
+ if(_taskJson[k].toolArray[q].tool == 1){
|
|
|
+ toolAllArray[0].value++;
|
|
|
+ }else if(_taskJson[k].toolArray[q].tool == 3){
|
|
|
+ toolAllArray[1].value++;
|
|
|
+ }else if(_taskJson[k].toolArray[q].tool == 48){
|
|
|
+ toolAllArray[2].value++;
|
|
|
+ }else if(_taskJson[k].toolArray[q].tool == 52){
|
|
|
+ toolAllArray[3].value++;
|
|
|
+ }else if(_taskJson[k].toolArray[q].tool == 51){
|
|
|
+ toolAllArray[4].value++;
|
|
|
+ }else if(_taskJson[k].toolArray[q].tool == 54){
|
|
|
+ toolAllArray[5].value++;
|
|
|
+ }else if(_taskJson[k].toolArray[q].tool == 56){
|
|
|
+ toolAllArray[6].value++;
|
|
|
+ }else if(_taskJson[k].toolArray[q].tool == 57){
|
|
|
+ toolAllArray[7].value++;
|
|
|
+ }else{
|
|
|
+ toolAllArray[8].value++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(_workCourse[i].course_teacher){
|
|
|
+ if(_workCourse[i].course_teacher.split(',').length <= 2){
|
|
|
+ twoPerson++
|
|
|
+ }else if(4 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 2){
|
|
|
+ threePerson++;
|
|
|
+ }else if(6 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 4){
|
|
|
+ fivePerson++;
|
|
|
+ }else if(_workCourse[i].course_teacher.split(',').length >= 7){
|
|
|
+ sevenPerson++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (var i = 0; i < _workCourse.length; i++) {
|
|
|
+ let a = Object.keys(wList);
|
|
|
+ for (var j = 0; j < Object.keys(wList).length; j++) {
|
|
|
+ if (_workCourse[i].courseId == wList[a[j]].cid && _workCourse[i].id) {
|
|
|
+ wList[a[j]].work++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var workNumList = Object.values(wList).map((item) => [
|
|
|
+ item.task,
|
|
|
+ item.work,
|
|
|
+ item.title,
|
|
|
+ item.cid,
|
|
|
+ ]);
|
|
|
+ this.workNumList = workNumList;
|
|
|
+ this.taskCount = _taskCount
|
|
|
+ this.toolList = toolAllArray;
|
|
|
+ personList.push({ name:"2人以下",value: twoPerson },{ name:"3-4人",value: threePerson },{ name:"5-6人",value: fivePerson },{ name:"7人以上",value: sevenPerson });
|
|
|
+ this.personList = personList;
|
|
|
|
|
|
this.$forceUpdate();
|
|
|
})
|
|
|
@@ -418,7 +566,7 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
-.left > .top {
|
|
|
+.left>.top {
|
|
|
width: 100%;
|
|
|
height: calc(100% / 2 - 10px);
|
|
|
background: #fff;
|
|
|
@@ -426,7 +574,7 @@ export default {
|
|
|
margin: 0 0 20px 0;
|
|
|
}
|
|
|
|
|
|
-.left > .bottom {
|
|
|
+.left>.bottom {
|
|
|
width: 100%;
|
|
|
height: calc(100% / 2 - 10px);
|
|
|
background: #fff;
|
|
|
@@ -439,7 +587,7 @@ export default {
|
|
|
margin: 0 20px;
|
|
|
}
|
|
|
|
|
|
-.center > .top {
|
|
|
+.center>.top {
|
|
|
width: 100%;
|
|
|
height: calc(100% / 5 * 3 - 10px);
|
|
|
background: #fff;
|
|
|
@@ -447,7 +595,7 @@ export default {
|
|
|
margin: 0 0 20px 0;
|
|
|
}
|
|
|
|
|
|
-.center > .bottom {
|
|
|
+.center>.bottom {
|
|
|
width: 100%;
|
|
|
height: calc(100% / 5 * 2 - 10px);
|
|
|
background: #fff;
|
|
|
@@ -459,7 +607,7 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
-.right > .top {
|
|
|
+.right>.top {
|
|
|
width: 100%;
|
|
|
height: calc(100% / 2 - 10px);
|
|
|
background: #fff;
|
|
|
@@ -467,7 +615,7 @@ export default {
|
|
|
margin: 0 0 20px 0;
|
|
|
}
|
|
|
|
|
|
-.right > .bottom {
|
|
|
+.right>.bottom {
|
|
|
width: 100%;
|
|
|
height: calc(100% / 2 - 10px);
|
|
|
background: #fff;
|
|
|
@@ -512,43 +660,38 @@ export default {
|
|
|
padding: 0 10px;
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
+
|
|
|
.teaMiddle {
|
|
|
width: calc(100% / 3 - 10px);
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
@@ -558,17 +701,18 @@ export default {
|
|
|
width: 50%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.selectBox {
|
|
|
width: 80px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
-.selectBox >>> .el-input__inner {
|
|
|
+.selectBox>>>.el-input__inner {
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
|
|
|
-.selectBox >>> .el-input__icon {
|
|
|
+.selectBox>>>.el-input__icon {
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
|
|
|
@@ -580,7 +724,7 @@ export default {
|
|
|
margin: 0 0 0 15px;
|
|
|
}
|
|
|
|
|
|
-.timeDiv > div {
|
|
|
+.timeDiv>div {
|
|
|
margin-right: 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
@@ -598,16 +742,19 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
+
|
|
|
.otherImg {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
margin: 0 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.otherImg > img {
|
|
|
+
|
|
|
+.otherImg>img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.allBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -616,10 +763,12 @@ export default {
|
|
|
flex-wrap: nowrap;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.allBox_left {
|
|
|
width: 30%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.allBox_right {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
@@ -638,13 +787,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;
|
|
|
@@ -655,9 +804,9 @@ 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;
|
|
|
@@ -671,19 +820,19 @@ export default {
|
|
|
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: 14px;
|
|
|
/* margin: 0 0 0 20px; */
|
|
|
color: #565e6a;
|
|
|
@@ -692,9 +841,9 @@ export default {
|
|
|
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; */
|
|
|
}
|
