mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 20:06:44 +08:00
左侧菜单
This commit is contained in:
zhangsir
@@ -1,84 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <div style="display:flex; padding-left:20px; width:100%">
|
||||
<div style="width:100px">完成情况</div>
|
||||
<div class="progress"><div class="msg">课程完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.course" status="warning" class="progressItem"> </el-progress> </div>
|
||||
<div class="progress" ><div class="msg">项目完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.project" status="success" class="progressItem"> </el-progress> </div>
|
||||
<div class="progress"><div class="msg">路径图完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.router" class="progressItem"> </el-progress> </div>
|
||||
|
||||
</div> -->
|
||||
<div v-if="isType == 2" class="title">
|
||||
<div class="item" style="margin-right: 19px;" :class="typeClass == 1?'item1':'item'" @click="learnType(1)">学习项目</div>
|
||||
<div class="item" :class="typeClass == 2?'item1':'item'" @click="learnType(2)">学习路径</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; padding: 12px 32px 10px 22px;">
|
||||
<div style="display: flex; justify-content: flex-start">
|
||||
<div>
|
||||
<el-select class="search-input" v-model="status" clearable placeholder="学习进度">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="未开始" value="0"></el-option>
|
||||
<el-option label="进行中" value="1"></el-option>
|
||||
<el-option label="已完成" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="padding-left: 10px"><el-input v-model="params.cmtask_name" clearable placeholder="搜索名称"></el-input></div>
|
||||
<div class="button-class" style="padding-left: 10px"><el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button></div>
|
||||
<div class="button-class" style="padding-left: 10px"><el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div>
|
||||
</div>
|
||||
<div style="margin-top: 50px;" v-if="isType == 9">
|
||||
<el-empty description="您还没有学习数据"></el-empty>
|
||||
</div>
|
||||
<!--课程列表内容-->
|
||||
<div class="uc-list" v-if="couresList.length > 0">
|
||||
<div class="uc-course" v-for="(item, idx) in couresList" @click="jumpRouter(item)" :key="idx">
|
||||
<div class="uc-course-img">
|
||||
<img :src="item.cmtask_imgurl" />
|
||||
<span class="spanname" v-if="item.cmtask_type==1">学习路径图</span>
|
||||
<span class="spanname" v-if="item.cmtask_type==2">学习项目</span>
|
||||
<!-- 类型3不显示，20230307 东吴说已确认的修改 -->
|
||||
<!-- <span class="spanname" v-if="item.cmtask_type==3">老系统必修任务</span> -->
|
||||
<div v-else>
|
||||
<!-- <div style="display:flex; padding-left:20px; width:100%">
|
||||
<div style="width:100px">完成情况</div>
|
||||
<div class="progress"><div class="msg">课程完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.course" status="warning" class="progressItem"> </el-progress> </div>
|
||||
<div class="progress" ><div class="msg">项目完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.project" status="success" class="progressItem"> </el-progress> </div>
|
||||
<div class="progress"><div class="msg">路径图完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.router" class="progressItem"> </el-progress> </div>
|
||||
|
||||
</div> -->
|
||||
<div v-if="isType == 2" class="title">
|
||||
<div class="item" style="margin-right: 19px;" :class="typeClass == 1?'item1':'item'" @click="learnType(1)">学习项目</div>
|
||||
<div class="item" :class="typeClass == 2?'item1':'item'" @click="learnType(2)">学习路径</div>
|
||||
</div>
|
||||
<div class="uc-course-info">
|
||||
<!-- 任务名称 -->
|
||||
<div class="uc-course-name one-line-ellipsis" style="cursor: pointer">
|
||||
<span v-if="item.type==10" class="uc-course-type2">录播</span>
|
||||
<span v-if="item.type==20" class="uc-course-type2">录播</span>
|
||||
<!-- <a href="/course/detail?id=" target="_blank"> {{item.name}}</a> -->
|
||||
<span v-html="item.cmtask_name"></span>
|
||||
<div style="display: flex; justify-content: space-between; padding: 12px 32px 10px 22px;">
|
||||
<div style="display: flex; justify-content: flex-start">
|
||||
<div>
|
||||
<el-select class="search-input" v-model="status" clearable placeholder="学习进度">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="未开始" value="0"></el-option>
|
||||
<el-option label="进行中" value="1"></el-option>
|
||||
<el-option label="已完成" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- <div class="uc-course-source" @click="jumpRouter(item)">来源：{{ item.cmtask_name }}</div> -->
|
||||
<div style="padding-top: 18px; " class="uc-course-text">学习进度：
|
||||
<span v-if="item.cmtask_user_status==0">未开始</span>
|
||||
<span v-if="item.cmtask_user_status==1">进行中</span>
|
||||
<span v-if="item.cmtask_user_status==2">已完成</span>
|
||||
</div>
|
||||
<!-- <div class="uc-course-time">推送时间：{{ formatsec(Number(item.updated_at) * 1000 )}}</div> -->
|
||||
<div class="uc-course-time">推送时间：{{ item.created_at}}</div>
|
||||
</div>
|
||||
<div class="uc-course-btns">
|
||||
<el-button @click="jumpRouter(item)" type="primary" size="small">开始学习</el-button>
|
||||
<div style="padding-left: 10px"><el-input v-model="params.cmtask_name" clearable placeholder="搜索名称"></el-input></div>
|
||||
<div class="button-class" style="padding-left: 10px"><el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button></div>
|
||||
<div class="button-class" style="padding-left: 10px"><el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:150px; text-align: center; margin-top:57px;" >
|
||||
<el-pagination background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:current-page="page"
|
||||
:page-size="size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
<!--课程列表内容-->
|
||||
<div class="uc-list" v-if="couresList.length > 0">
|
||||
<div class="uc-course" v-for="(item, idx) in couresList" @click="jumpRouter(item)" :key="idx">
|
||||
<div class="uc-course-img">
|
||||
<img :src="item.cmtask_imgurl" />
|
||||
<span class="spanname" v-if="item.cmtask_type==1">学习路径图</span>
|
||||
<span class="spanname" v-if="item.cmtask_type==2">学习项目</span>
|
||||
<!-- 类型3不显示，20230307 东吴说已确认的修改 -->
|
||||
<!-- <span class="spanname" v-if="item.cmtask_type==3">老系统必修任务</span> -->
|
||||
</div>
|
||||
<div class="uc-course-info">
|
||||
<!-- 任务名称 -->
|
||||
<div class="uc-course-name one-line-ellipsis" style="cursor: pointer">
|
||||
<span v-if="item.type==10" class="uc-course-type2">录播</span>
|
||||
<span v-if="item.type==20" class="uc-course-type2">录播</span>
|
||||
<!-- <a href="/course/detail?id=" target="_blank"> {{item.name}}</a> -->
|
||||
<span v-html="item.cmtask_name"></span>
|
||||
</div>
|
||||
<!-- <div class="uc-course-source" @click="jumpRouter(item)">来源：{{ item.cmtask_name }}</div> -->
|
||||
<div style="padding-top: 18px; " class="uc-course-text">学习进度：
|
||||
<span v-if="item.cmtask_user_status==0">未开始</span>
|
||||
<span v-if="item.cmtask_user_status==1">进行中</span>
|
||||
<span v-if="item.cmtask_user_status==2">已完成</span>
|
||||
</div>
|
||||
<!-- <div class="uc-course-time">推送时间：{{ formatsec(Number(item.updated_at) * 1000 )}}</div> -->
|
||||
<div class="uc-course-time">推送时间：{{ item.created_at}}</div>
|
||||
</div>
|
||||
<div class="uc-course-btns">
|
||||
<el-button @click="jumpRouter(item)" type="primary" size="small">开始学习</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:150px; text-align: center; margin-top:57px;" >
|
||||
<el-pagination background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:current-page="page"
|
||||
:page-size="size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<div v-else class="zan-wu">
|
||||
<div v-if="loading">
|
||||
<span v-if="couresList.length==0">正在加载数据...</span>
|
||||
<span v-else>查询中...</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-if="couresList.length==0">没有查询到相关内容</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<div v-else class="zan-wu">
|
||||
<div v-if="loading">
|
||||
<span v-if="couresList.length==0">正在加载数据...</span>
|
||||
<span v-else>查询中...</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-if="couresList.length==0">没有查询到相关内容</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -121,7 +126,9 @@ export default {
|
||||
handler(to, from) {
|
||||
console.log('type变化了', to.query.type);
|
||||
this.isType = to.query.type;
|
||||
this.loadBoeData();
|
||||
if(this.isType != 9){
|
||||
this.loadBoeData();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user