|
|
<template>
|
|
|
<div class="el-TeacherHome">
|
|
|
<el-row class="class_row">
|
|
|
<el-col :span="12">
|
|
|
<el-row class="content_block">
|
|
|
<el-row class="title_head">
|
|
|
<span class="class_img">
|
|
|
<el-image class="title_img" :src="zichang"></el-image>
|
|
|
</span>
|
|
|
<span>我的资产</span>
|
|
|
</el-row>
|
|
|
<el-divider></el-divider>
|
|
|
<el-row class="echarts_row">
|
|
|
<div id="echarts_box" style="min-width: 600px;height:500px;"></div>
|
|
|
</el-row>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-row class="content_block">
|
|
|
<el-row class="title_head">
|
|
|
<span class="class_img">
|
|
|
<el-image class="title_img" :src="shouyi"></el-image>
|
|
|
</span>
|
|
|
<span>我的收益</span>
|
|
|
</el-row>
|
|
|
<el-divider></el-divider>
|
|
|
<el-row class="echarts_row">
|
|
|
<div id="echarts_line" style="min-width: 600px;height:500px;"></div>
|
|
|
</el-row>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="class_row">
|
|
|
<el-col :span="12">
|
|
|
<el-row class="content_block">
|
|
|
<el-row class="title_head">
|
|
|
<span class="class_img">
|
|
|
<el-image class="title_img" :src="yingyong"></el-image>
|
|
|
</span>
|
|
|
<span>我的应用</span>
|
|
|
</el-row>
|
|
|
<el-divider></el-divider>
|
|
|
<el-row class="pt50 pb50">
|
|
|
<el-col :span="3" class="tc next_pre">
|
|
|
<el-image class="next_pre_img" :src="pre" @click="pre_app"></el-image>
|
|
|
</el-col>
|
|
|
<el-col :span="18">
|
|
|
<el-row>
|
|
|
<template v-for="(item, index) in myAppsList" >
|
|
|
<el-col :span="8" class="tc">
|
|
|
<el-link :href="item.applicationLink" :underline="false" target="_blank">
|
|
|
<el-image class="yinyong_img" :src="$getUrl(item.thumbnailUrl)"></el-image>
|
|
|
<p class="font14 limit_line_one">{{item.applicationName}}</p>
|
|
|
</el-link>
|
|
|
</el-col>
|
|
|
</template>
|
|
|
<template v-if="myAppsList.length <=0">
|
|
|
<el-row style="height: 177px;">
|
|
|
<el-empty :imageSize="60" description="暂无应用"></el-empty>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="3" class="tc next_pre">
|
|
|
<el-image class="next_pre_img" :src="next" @click="next_app"></el-image>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-row class="content_block">
|
|
|
<el-row class="title_head">
|
|
|
<span class="class_img">
|
|
|
<el-image class="title_img" :src="wodekc"></el-image>
|
|
|
</span>
|
|
|
<span>我的课程</span>
|
|
|
</el-row>
|
|
|
<el-divider></el-divider>
|
|
|
<el-row class="pt20 pb20">
|
|
|
<el-col :span="3" class="tc next_pre" style="height: 237px;">
|
|
|
<el-image class="next_pre_img" :src="pre" @click="pre_course"></el-image>
|
|
|
</el-col>
|
|
|
<el-col :span="18">
|
|
|
<el-row>
|
|
|
<template v-for="(item, index) in courseList" >
|
|
|
<el-col :span="12" class="tc c_p">
|
|
|
<div class="wdkc_c" style="border: 1px solid #E1E1E1;margin: 0 auto;" @click="courseInon(item)">
|
|
|
<template v-if="item.teacherOpenCourseInfo">
|
|
|
<el-image class="wdkc_img" :src="$isHttp(item.teacherOpenCourseInfo.teacherOpenCourseCover)"></el-image>
|
|
|
<p class="font14 limit_line_one tl mt5 mb5 fontB ml10 mr10">{{item.teacherOpenCourseInfo.teacherOpenCourseTitle}}</p>
|
|
|
<el-row class="font14 limit_line_two tl mt5 mb10 ml10 mr10" style="height:38px;">
|
|
|
<!-- <span style="float:left;">课程简介:</span> -->
|
|
|
<el-row v-html="item.teacherOpenCourseInfo.teacherOpenCourseSummary ||''"></el-row>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</template>
|
|
|
<template v-if="courseList.length <=0">
|
|
|
<el-row style="height: 230px;">
|
|
|
<el-empty style="height: 230px;" :imageSize="60" description="暂无课程"></el-empty>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="3" class="tc next_pre" style="height: 230px;">
|
|
|
<el-image class="next_pre_img" :src="next" @click="next_course"></el-image>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 公告信息 :list="noticeList"-->
|
|
|
<Notice :borderShow="false" :pagingShow="true"></Notice>
|
|
|
<Advertisement></Advertisement>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts';
|
|
|
import jQuery from 'jquery';
|
|
|
import Notice from "../course/components/Notice"; //通知公告
|
|
|
import Advertisement from "@/components/Advertisement/index"; //广告
|
|
|
export default {
|
|
|
name: "TeacherHome",
|
|
|
components: {
|
|
|
Notice,
|
|
|
Advertisement
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
zichang:require("../../images/index/zichang@2x.png"),
|
|
|
yingyong:require("../../images/index/yingyong@2x.png"),
|
|
|
shouyi:require("../../images/home/shouyi@2x.png"),
|
|
|
wodekc:require("../../images/home/wodekc@2x.png"),
|
|
|
next:require("../../images/home/next@2x.png"),
|
|
|
pre:require("../../images/home/pre@2x.png"),
|
|
|
info:require("../../images/home/info@2x.png"),
|
|
|
myAppsListALL:[],
|
|
|
myAppsList:[],
|
|
|
start_app_num:0, //应用开始位置
|
|
|
end_app_num:3,//应用结束位置
|
|
|
courseListALL:[],
|
|
|
courseList:[],
|
|
|
start_course_num:0, //应用开始位置
|
|
|
end_course_num:3,//应用结束位置
|
|
|
userType:this.$Base64.decode(this.$ls.get(this.$getKeyInfo("userType"))), //获取用户类型
|
|
|
pieMapsInfo:[],
|
|
|
noticeList:[],
|
|
|
lineMapInfo:{xList:[],yList:[]}
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$post("/api/student/index.do").then((ret) => {
|
|
|
if(ret.code == 0){
|
|
|
this.myAppsListALL = ret.data.myApplicationList;
|
|
|
this.courseListALL = ret.data.myOpenCourseList;
|
|
|
this.noticeList = ret.data.noticeList;
|
|
|
this.myAppsList = this.myAppsListALL.slice(0,3); //截取我的应用前三
|
|
|
this.courseList = this.courseListALL.slice(0,2); //截取我的课程前二
|
|
|
if(!this.$isEmpty(ret.data.pieMaps)){
|
|
|
this.pieMapsInfo = ret.data.pieMaps; //资产信息
|
|
|
}
|
|
|
if(!this.$isEmpty(ret.data.lineMap)){
|
|
|
this.lineMapInfo = ret.data.lineMap; //收益比较信息
|
|
|
for(let i = 0;i<ret.data.lineMap.yList.length;i++){
|
|
|
this.lineMapInfo.yList[i] = {
|
|
|
data: ret.data.lineMap.yList[i],
|
|
|
type: 'line',
|
|
|
areaStyle: {},
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
setTimeout(()=>{
|
|
|
this.loadPieChart();
|
|
|
this.loadBrokenLine();
|
|
|
},200);
|
|
|
}
|
|
|
});
|
|
|
// this.myAppsList = this.myAppsListALL.slice(0,3); //截取我的应用前三
|
|
|
// this.courseList = this.courseListALL.slice(0,2); //截取我的课程前三
|
|
|
},
|
|
|
methods: {
|
|
|
loadPieChart(){ //饼状图
|
|
|
let echarts_box = document.getElementById("echarts_box");
|
|
|
var echarts_w = echarts_box.offsetWidth; // 返回元素的总宽度
|
|
|
echarts_box.style.width = echarts_w - 40;
|
|
|
let option = {
|
|
|
title: {
|
|
|
text: '资产结构图',
|
|
|
// subtext: 'Fake Data',
|
|
|
// left: 'center'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
type: 'scroll',
|
|
|
right: '0',
|
|
|
top: 26,
|
|
|
selectedMode: true, //是否能够点击
|
|
|
formatter: (name,d) =>{
|
|
|
let info = name;
|
|
|
try{
|
|
|
this.pieMapsInfo.forEach(function(item,i){
|
|
|
if(item.name == name){
|
|
|
throw new Error(item.name + " " +item.value);
|
|
|
}
|
|
|
});
|
|
|
} catch(e) {
|
|
|
info = e.message;
|
|
|
}
|
|
|
return info;
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '资产账户信息',
|
|
|
type: 'pie',
|
|
|
radius: '50%',
|
|
|
center: ['40%', '50%'],
|
|
|
data: this.pieMapsInfo,
|
|
|
// data: [
|
|
|
// { value: 5000, name: '现金账户 5000' },
|
|
|
// { value: 4365, name: '银行账户 4365' },
|
|
|
// { value: 4165, name: 'P2P账户 4165' },
|
|
|
// { value: 5165, name: '众筹账户 5165' },
|
|
|
// { value: 5565, name: '股票基金账户 5565' },
|
|
|
// { value: 3165, name: '期货投资账户 3165' },
|
|
|
// { value: 4565, name: '股权投资账户 4565' },
|
|
|
// ],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
// 1. 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('echarts_box'));
|
|
|
// 3. 使用刚指定的配置项和数据，显示图表
|
|
|
myChart.setOption(option)
|
|
|
},
|
|
|
loadBrokenLine(){ //折线图
|
|
|
let echarts_box = document.getElementById("echarts_line");
|
|
|
var echarts_w = echarts_box.offsetWidth; // 返回元素的总宽度
|
|
|
echarts_box.style.width = echarts_w - 40;
|
|
|
console.log(this.lineMapInfo)
|
|
|
let option = {
|
|
|
title: {
|
|
|
text: '收益率比较',
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
label: {
|
|
|
backgroundColor: '#6a7985'
|
|
|
}
|
|
|
},
|
|
|
formatter: (params) =>{
|
|
|
let tetx=['基准收益率 (HS300)','总资产收益率']
|
|
|
let info = params[0].name + "<br/>";
|
|
|
params.forEach(function(item,i){
|
|
|
info += tetx[i] + " : " + Number(item.value).toFixed(2) + '%'+"<br/>";
|
|
|
});
|
|
|
return info;
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: this.lineMapInfo.xList
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: this.lineMapInfo.yList
|
|
|
// [
|
|
|
// {
|
|
|
// data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
// type: 'line',
|
|
|
// areaStyle: {}
|
|
|
// },
|
|
|
// {
|
|
|
// data: [220, 332, 401, 534, 290, 330, 320],
|
|
|
// type: 'line',
|
|
|
// areaStyle: {}
|
|
|
// }
|
|
|
// ]
|
|
|
};
|
|
|
// 1. 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('echarts_line'));
|
|
|
// 3. 使用刚指定的配置项和数据，显示图表
|
|
|
myChart.setOption(option)
|
|
|
},
|
|
|
pre_app(){ //上一个应用
|
|
|
if(this.myAppsListALL.length <= 3){
|
|
|
return;
|
|
|
}
|
|
|
this.start_app_num --;
|
|
|
if(this.start_app_num < 0){
|
|
|
this.start_app_num = this.myAppsListALL.length - 1;
|
|
|
}
|
|
|
this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.start_app_num + 3);
|
|
|
if(this.myAppsList.length < 3){
|
|
|
let num = this.myAppsListALL.length - this.start_app_num;
|
|
|
this.myAppsList = this.myAppsList.concat(this.myAppsListALL.slice(0,3-num));
|
|
|
}
|
|
|
},
|
|
|
next_app(){ //下一个应用
|
|
|
if(this.myAppsListALL.length <= 3){
|
|
|
return;
|
|
|
}
|
|
|
this.start_app_num ++;
|
|
|
if(this.start_app_num == this.myAppsListALL.length){
|
|
|
this.start_app_num = 0;
|
|
|
}
|
|
|
if(this.start_app_num + 3 > this.myAppsListALL.length){ //当开始位置为0并且总数量大于3时
|
|
|
this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.myAppsListALL.length);
|
|
|
if(this.myAppsList.length < 3){
|
|
|
let num = this.myAppsListALL.length - this.start_app_num;
|
|
|
this.myAppsList = this.myAppsList.concat(this.myAppsListALL.slice(0,3-num));
|
|
|
}
|
|
|
}else{
|
|
|
this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.start_app_num + 3);
|
|
|
}
|
|
|
},
|
|
|
pre_course(){ //上一个课程
|
|
|
if(this.courseListALL.length <= 2){
|
|
|
return;
|
|
|
}
|
|
|
this.start_course_num --;
|
|
|
if(this.start_course_num < 0){
|
|
|
this.start_course_num = this.courseListALL.length - 1;
|
|
|
}
|
|
|
this.courseList = this.courseListALL.slice(this.start_course_num,this.start_course_num + 2);
|
|
|
if(this.courseList.length < 2){
|
|
|
let num = this.courseListALL.length - this.start_course_num;
|
|
|
this.courseList = this.courseList.concat(this.courseListALL.slice(0,2-num));
|
|
|
}
|
|
|
},
|
|
|
next_course(){ //下一个课程
|
|
|
if(this.courseListALL.length <= 2){
|
|
|
return;
|
|
|
}
|
|
|
this.start_course_num ++;
|
|
|
if(this.start_course_num == this.courseListALL.length){
|
|
|
this.start_course_num = 0;
|
|
|
}
|
|
|
if(this.start_course_num + 2 > this.courseListALL.length){ //当开始位置为0并且总数量大于2时
|
|
|
this.courseList = this.courseListALL.slice(this.start_course_num,this.courseListALL.length);
|
|
|
if(this.courseList.length < 2){
|
|
|
let num = this.courseListALL.length - this.start_course_num;
|
|
|
this.courseList = this.courseList.concat(this.courseListALL.slice(0,2-num));
|
|
|
}
|
|
|
}else{
|
|
|
this.courseList = this.courseListALL.slice(this.start_course_num,this.start_course_num + 2);
|
|
|
}
|
|
|
},
|
|
|
courseInon(item,index){
|
|
|
this.$ls.remove(this.$getKeyInfo('on_show'));
|
|
|
this.$router.push({name:'CourseHome',query:{teacherOpenCourseId:item.teacherOpenCourseId}});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.el-TeacherHome{
|
|
|
padding: 20px 0 0 20px;
|
|
|
.content_block{
|
|
|
background-color: #ffffff;
|
|
|
margin-right: 20px;
|
|
|
.title_head{
|
|
|
padding: 10px 20px;
|
|
|
}
|
|
|
.title_img{
|
|
|
width: 20px;
|
|
|
}
|
|
|
.wdkc_img{
|
|
|
width: 300px;
|
|
|
height: 150px;
|
|
|
}
|
|
|
.wdkc_c{
|
|
|
width: 300px;
|
|
|
p{
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
.el-divider--horizontal{
|
|
|
margin: 0;
|
|
|
}
|
|
|
.class_img{
|
|
|
float: left;margin-right: 10px;
|
|
|
}
|
|
|
.echarts_row{
|
|
|
padding: 20px;
|
|
|
}
|
|
|
}
|
|
|
.class_row{
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.next_pre{
|
|
|
display: flex;
|
|
|
justify-content:center;
|
|
|
align-items:center;
|
|
|
height: 177px;
|
|
|
}
|
|
|
.next_pre_img{
|
|
|
width: 40px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.yinyong_img{
|
|
|
width: 120px;
|
|
|
height: 122px;
|
|
|
cursor: pointer;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
.wdon{
|
|
|
width: 10px;height: 10px;background-color: red;border-radius: 50%;
|
|
|
float: left;margin-top: 5px;margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
//宽度大于等于
|
|
|
@media screen and (max-width:1710px){
|
|
|
.content_block{
|
|
|
.wdkc_img{
|
|
|
width: 250px;
|
|
|
height: 150px;
|
|
|
}
|
|
|
.wdkc_c{
|
|
|
width: 250px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|