tianzeOrg
/
tianze_web
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

账户名称顺序调整

Browse Source
main
qinzhenpen 1 year ago
parent 7c6fe4ce1e
commit 495118da5f
1 changed files with 309 additions and 193 deletions
Show Stats Download Patch File Download Diff File

424
src/pages/Student/Home.vue
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save