|
@@ -13,171 +13,174 @@
|
|
|
</div>
|
|
|
</el-card>
|
|
|
<!-- 收藏夹 -->
|
|
|
- <collect v-if="tabActive == 0"></collect>
|
|
|
- <!-- 错题本 -->
|
|
|
- <mistake v-if="tabActive == 1"></mistake>
|
|
|
- <!-- 学习记录 -->
|
|
|
- <div class="record_content" v-show="tabActive == 2">
|
|
|
- <div class="record_contian">
|
|
|
- <div class="tit">数据统计(总)</div>
|
|
|
- <div style="display: flex; justify-content: space-between">
|
|
|
- <div class="count_item">
|
|
|
- <img src="" alt="" />
|
|
|
- <div class="count_intro">
|
|
|
- <p style="color: #ff974d">{{ learnInfo.videoCount }}</p>
|
|
|
- <p class="gary">共看完视频(节)</p>
|
|
|
+ <div class="content">
|
|
|
+ <collect v-if="tabActive == 0"></collect>
|
|
|
+ <!-- 错题本 -->
|
|
|
+ <mistake v-if="tabActive == 1"></mistake>
|
|
|
+ <!-- 学习记录 -->
|
|
|
+ <div class="record_content" v-show="tabActive == 2">
|
|
|
+ <div class="record_contian">
|
|
|
+ <div class="tit">数据统计(总)</div>
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <div class="count_item">
|
|
|
+ <img src="" alt="" />
|
|
|
+ <div class="count_intro">
|
|
|
+ <p style="color: #ff974d">{{ learnInfo.videoCount }}</p>
|
|
|
+ <p class="gary">共看完视频(节)</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="count_item">
|
|
|
- <img src="" alt="" />
|
|
|
- <div class="count_intro">
|
|
|
- <p style="color: #89928a">{{ learnInfo.videoMinutes }}</p>
|
|
|
- <p class="gary">共看完视频时长(分钟)</p>
|
|
|
+ <div class="count_item">
|
|
|
+ <img src="" alt="" />
|
|
|
+ <div class="count_intro">
|
|
|
+ <p style="color: #89928a">{{ learnInfo.videoMinutes }}</p>
|
|
|
+ <p class="gary">共看完视频时长(分钟)</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="count_item">
|
|
|
- <img src="" alt="" />
|
|
|
- <div class="count_intro">
|
|
|
- <p style="color: #86dcf2">{{ learnInfo.questionCount }}</p>
|
|
|
- <p class="gary">共完成习题</p>
|
|
|
+ <div class="count_item">
|
|
|
+ <img src="" alt="" />
|
|
|
+ <div class="count_intro">
|
|
|
+ <p style="color: #86dcf2">{{ learnInfo.questionCount }}</p>
|
|
|
+ <p class="gary">共完成习题</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="count_item">
|
|
|
- <img src="" alt="" />
|
|
|
- <div class="count_intro">
|
|
|
- <p style="color: #ee625c">
|
|
|
- {{
|
|
|
- learnInfo.correctPercent == "" ? 0 : learnInfo.correctPercent
|
|
|
- }}
|
|
|
- </p>
|
|
|
- <p class="gary">正确率</p>
|
|
|
+ <div class="count_item">
|
|
|
+ <img src="" alt="" />
|
|
|
+ <div class="count_intro">
|
|
|
+ <p style="color: #ee625c">
|
|
|
+ {{
|
|
|
+ learnInfo.correctPercent == "" ? 0 : learnInfo.correctPercent
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ <p class="gary">正确率</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="record_contian">
|
|
|
- <div class="tit">数据统计(周)</div>
|
|
|
- <el-form
|
|
|
- :inline="true"
|
|
|
- :model="dateForm"
|
|
|
- :rules="dateRule"
|
|
|
- ref="ruleForm"
|
|
|
- class="demo-form-inline"
|
|
|
- >
|
|
|
- <div class="date_contain">
|
|
|
- <el-form-item label="日期" prop="year">
|
|
|
- <el-select
|
|
|
- v-model="dateForm.year"
|
|
|
- placeholder="年份"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in dateYears"
|
|
|
- :key="index"
|
|
|
- :value="item"
|
|
|
- :label="item + '年'"
|
|
|
+ <div class="record_contian">
|
|
|
+ <div class="tit">数据统计(周)</div>
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ :model="dateForm"
|
|
|
+ :rules="dateRule"
|
|
|
+ ref="ruleForm"
|
|
|
+ class="demo-form-inline"
|
|
|
+ >
|
|
|
+ <div class="date_contain">
|
|
|
+ <el-form-item label="日期" prop="year">
|
|
|
+ <el-select
|
|
|
+ v-model="dateForm.year"
|
|
|
+ placeholder="年份"
|
|
|
+ size="small"
|
|
|
>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="" prop="month">
|
|
|
- <el-select
|
|
|
- v-model="dateForm.month"
|
|
|
- placeholder="月份"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in dateMonth"
|
|
|
- :key="index"
|
|
|
- :value="item"
|
|
|
- :label="item + '月'"
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in dateYears"
|
|
|
+ :key="index"
|
|
|
+ :value="item"
|
|
|
+ :label="item + '年'"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="month">
|
|
|
+ <el-select
|
|
|
+ v-model="dateForm.month"
|
|
|
+ placeholder="月份"
|
|
|
+ size="small"
|
|
|
>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="周" prop="week">
|
|
|
- <el-select
|
|
|
- v-model="dateForm.week"
|
|
|
- placeholder="第几周"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in dateWeek"
|
|
|
- :key="index"
|
|
|
- :value="item"
|
|
|
- :label="'第' + item + '周'"
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in dateMonth"
|
|
|
+ :key="index"
|
|
|
+ :value="item"
|
|
|
+ :label="item + '月'"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="周" prop="week">
|
|
|
+ <el-select
|
|
|
+ v-model="dateForm.week"
|
|
|
+ placeholder="第几周"
|
|
|
+ size="small"
|
|
|
>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in dateWeek"
|
|
|
+ :key="index"
|
|
|
+ :value="item"
|
|
|
+ :label="'第' + item + '周'"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-button
|
|
|
- style="margin-left: 24px; width: 100px; height: 40px"
|
|
|
- type="primary"
|
|
|
- icon="el-icon-search"
|
|
|
- @click="searchData"
|
|
|
- ></el-button>
|
|
|
+ <el-button
|
|
|
+ style="margin-left: 24px; width: 100px; height: 40px"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="searchData"
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div style="display: flex; justify-content: space-around">
|
|
|
+ <div style="width: 300px; height: 269px" id="echarts_quecount"></div>
|
|
|
+ <div style="width: 320px; height: 269px" id="echarts_queBySub"></div>
|
|
|
+ <div
|
|
|
+ style="width: 300px; height: 269px"
|
|
|
+ id="echarts_videocount"
|
|
|
+ ></div>
|
|
|
+ <div style="width: 320px; height: 269px" id="echarts_vidBysub"></div>
|
|
|
</div>
|
|
|
- </el-form>
|
|
|
- <div style="display: flex; justify-content: space-around">
|
|
|
- <div style="width: 300px; height: 269px" id="echarts_quecount"></div>
|
|
|
- <div style="width: 320px; height: 269px" id="echarts_queBySub"></div>
|
|
|
- <div
|
|
|
- style="width: 300px; height: 269px"
|
|
|
- id="echarts_videocount"
|
|
|
- ></div>
|
|
|
- <div style="width: 320px; height: 269px" id="echarts_vidBysub"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="record_contian">
|
|
|
- <div class="tit">学习记录</div>
|
|
|
- <div class="video_contian" v-if="videoRecord.length > 0">
|
|
|
- <div class="video_item" v-for="item in videoRecord" :key="item.id">
|
|
|
- <img :src="item.pict" alt="" />
|
|
|
- <p>{{ item.title }}</p>
|
|
|
- <p>
|
|
|
- {{ item.percent > 90 ? "已看完" : "观看" + item.percent + "%" }}
|
|
|
- </p>
|
|
|
+ <div class="record_contian">
|
|
|
+ <div class="tit">学习记录</div>
|
|
|
+ <div class="video_contian" v-if="videoRecord.length > 0">
|
|
|
+ <div class="video_item" v-for="item in videoRecord" :key="item.id">
|
|
|
+ <img :src="item.pict" alt="" />
|
|
|
+ <p>{{ item.title }}</p>
|
|
|
+ <p>
|
|
|
+ {{ item.percent > 90 ? "已看完" : "观看" + item.percent + "%" }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="empty" v-else>
|
|
|
+ <img src="@/assets/images/icon_data.png" />
|
|
|
+ <span>没有信息</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="empty" v-else>
|
|
|
- <img src="@/assets/images/icon_data.png" />
|
|
|
- <span>没有信息</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="record_contian">
|
|
|
- <div class="tit">知识点诊断记录</div>
|
|
|
- <div>
|
|
|
- <el-table :data="knowRecord" style="width: 100%">
|
|
|
- <el-table-column prop="day" label="日期"> </el-table-column>
|
|
|
- <el-table-column prop="coursename" label="科目"> </el-table-column>
|
|
|
- <el-table-column prop="knowledgeName" label="知识点" width="500">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="用时">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{
|
|
|
- scope.row.seconds != "null"
|
|
|
- ? Math.ceil(scope.row.seconds / 60) + "分钟"
|
|
|
- : scope.row.seconds
|
|
|
- }}
|
|
|
+ <div class="record_contian">
|
|
|
+ <div class="tit">知识点诊断记录</div>
|
|
|
+ <div>
|
|
|
+ <el-table :data="knowRecord" style="width: 100%">
|
|
|
+ <el-table-column prop="day" label="日期"> </el-table-column>
|
|
|
+ <el-table-column prop="coursename" label="科目"> </el-table-column>
|
|
|
+ <el-table-column prop="knowledgeName" label="知识点" width="500">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="用时">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.seconds != "null"
|
|
|
+ ? Math.ceil(scope.row.seconds / 60) + "分钟"
|
|
|
+ : scope.row.seconds
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="wrongs" label="正确率">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ (scope.row.rights / 10) * 100 }}%
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template slot="empty">
|
|
|
+ <div class="empty">
|
|
|
+ <img src="@/assets/images/icon_data.png" />
|
|
|
+ <span>没有信息</span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="wrongs" label="正确率">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ (scope.row.rights / 10) * 100 }}%
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <template slot="empty">
|
|
|
- <div class="empty">
|
|
|
- <img src="@/assets/images/icon_data.png" />
|
|
|
- <span>没有信息</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -676,11 +679,6 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: #909399;
|
|
|
}
|
|
|
-.option {
|
|
|
- padding-left: 33px;
|
|
|
- display: flex;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
.learn_container {
|
|
|
padding: 20px;
|
|
|
background: #f7f7f7;
|
|
@@ -689,13 +687,9 @@ export default {
|
|
|
.header {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
-.mis_content,
|
|
|
-.shoucan_content {
|
|
|
+.content {
|
|
|
background: #fff;
|
|
|
- padding: 32px 28px;
|
|
|
-}
|
|
|
-.record_content {
|
|
|
- padding: 32px 28px;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
.record_content .record_contian {
|
|
|
border-radius: 8px;
|
|
@@ -755,145 +749,9 @@ export default {
|
|
|
transform: translateY(50%);
|
|
|
bottom: 0;
|
|
|
}
|
|
|
-.que_item {
|
|
|
- border-radius: 1px;
|
|
|
- border: 1px solid #dedede;
|
|
|
- margin-bottom: 8px;
|
|
|
-}
|
|
|
-.que_content {
|
|
|
- padding: 12px 24px 0 33px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #4c4c4c;
|
|
|
- line-height: 27px;
|
|
|
- margin-bottom: 40px;
|
|
|
-}
|
|
|
-.que_footer {
|
|
|
- border-top: 1px solid #dedede;
|
|
|
- padding-left: 33px;
|
|
|
- overflow: hidden;
|
|
|
- padding-bottom: 23px;
|
|
|
- padding-top: 21px;
|
|
|
-}
|
|
|
-.que_footer .spans {
|
|
|
- float: left;
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #979797;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
-.que_footer .spans > span {
|
|
|
- margin-right: 20px;
|
|
|
-}
|
|
|
-.operation {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #47c6a2;
|
|
|
- line-height: 20px;
|
|
|
- justify-content: flex-end;
|
|
|
-}
|
|
|
-.operation > div {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.operation .shoucan {
|
|
|
- margin-right: 46px;
|
|
|
-}
|
|
|
-.operation .detail span {
|
|
|
- border-radius: 1px;
|
|
|
- border-bottom: 1px solid #47c6a2;
|
|
|
-}
|
|
|
-.operation .detail {
|
|
|
- margin-right: 32px;
|
|
|
-}
|
|
|
-.operation > div > img {
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-.operation .addQue {
|
|
|
- padding: 7px;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #979797;
|
|
|
- margin-right: 24px;
|
|
|
-}
|
|
|
-.info {
|
|
|
- padding: 12px 40px;
|
|
|
-}
|
|
|
-.radio_contianer > div {
|
|
|
- margin-bottom: 16px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.radio_contianer > div > span {
|
|
|
- flex-shrink: 0;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #232323;
|
|
|
- line-height: 20px;
|
|
|
- height: 20px;
|
|
|
- width: 50px;
|
|
|
-}
|
|
|
-.paper_item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 30px;
|
|
|
- margin-bottom: 40px;
|
|
|
-}
|
|
|
-.paper_item .tit {
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #343434;
|
|
|
- line-height: 22px;
|
|
|
-}
|
|
|
-.paper_item .viewCount {
|
|
|
- margin-top: 16px;
|
|
|
- color: #9f9f9f;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.paper_item .viewCount img {
|
|
|
- margin-right: 9px;
|
|
|
-}
|
|
|
-.paper_item .opera {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.paper_item .opera > div {
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.paper_item .opera .view {
|
|
|
- color: #47c6a2;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #47c6a2;
|
|
|
- padding: 6px 12px;
|
|
|
-}
|
|
|
-.paper_item .opera .download {
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #47c6a2;
|
|
|
- padding: 6px 22px;
|
|
|
- background: #47c6a2;
|
|
|
- color: white;
|
|
|
- margin: 0 24px;
|
|
|
-}
|
|
|
-.paper_item .opera > div:last-child {
|
|
|
- color: #47c6a2;
|
|
|
-}
|
|
|
-.parse {
|
|
|
- padding: 0 30px;
|
|
|
-}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.gary {
|
|
|
margin-top: 8px;
|
|
|
font-size: 16px;
|
|
@@ -908,9 +766,7 @@ export default {
|
|
|
margin-right: 16px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
-.el-card__body {
|
|
|
- padding-bottom: 0;
|
|
|
-}
|
|
|
+
|
|
|
.video_contian {
|
|
|
display: flex;
|
|
|
}
|
|
@@ -931,21 +787,4 @@ export default {
|
|
|
color: #bdbdbd;
|
|
|
}
|
|
|
</style>
|
|
|
-<style >
|
|
|
-.el-dialog__header .el-dialog__title {
|
|
|
- color: #47c6a2;
|
|
|
-}
|
|
|
-.radio_contianer .el-radio-button__inner {
|
|
|
- border-left: 1px solid #dcdfe6;
|
|
|
-}
|
|
|
-.radio_contianer .el-radio-button .el-radio-button__inner {
|
|
|
- border-radius: 16px;
|
|
|
- margin-bottom: 5px;
|
|
|
-}
|
|
|
-.radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
|
|
|
- border-radius: 16px;
|
|
|
-}
|
|
|
-.radio_contianer .el-radio-button {
|
|
|
- margin-right: 8px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+
|