From 495118da5f92fa8f19f8da6428d0e93158a44a0a Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Fri, 22 Mar 2024 14:50:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A6=E6=88=B7=E5=90=8D=E7=A7=B0=E9=A1=BA?=
=?UTF-8?q?=E5=BA=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/Student/Home.vue | 502 +++++++++++++++++++++++--------------
1 file changed, 309 insertions(+), 193 deletions(-)
diff --git a/src/pages/Student/Home.vue b/src/pages/Student/Home.vue
index e1fab80..6aa55fd 100644
--- a/src/pages/Student/Home.vue
+++ b/src/pages/Student/Home.vue
@@ -11,7 +11,7 @@
</el-row>
<el-divider></el-divider>
<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-col>
@@ -25,7 +25,7 @@
</el-row>
<el-divider></el-divider>
<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-col>
@@ -43,19 +43,32 @@
<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-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" >
+ <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
+ :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">
+ <template v-if="myAppsList.length <= 0">
<el-row style="height: 177px;">
<el-empty :imageSize="60" description="暂无应用"></el-empty>
</el-row>
@@ -63,7 +76,11 @@
</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-image
+ class="next_pre_img"
+ :src="next"
+ @click="next_app"
+ ></el-image>
</el-col>
</el-row>
</el-row>
@@ -79,33 +96,70 @@
<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-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" >
+ <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)">
+ <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-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">
+ <template v-if="courseList.length <= 0">
<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>
</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-image
+ class="next_pre_img"
+ :src="next"
+ @click="next_course"
+ ></el-image>
</el-col>
</el-row>
</el-row>
@@ -113,16 +167,16 @@
</el-row>
<!-- 公告信息 :list="noticeList"-->
- <Notice :borderShow="false" :pagingShow="true"></Notice>
+ <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"; //广告
+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: {
@@ -131,101 +185,120 @@ export default {
},
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:[]}
+ 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() {
-
- },
+ created() {},
mounted() {
- this.$post("/api/student/index.do").then((ret) => {
- if(ret.code == 0){
+ 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; //资产信息
+ this.myAppsList = this.myAppsListALL.slice(0, 3); //截取我的应用前三
+ this.courseList = this.courseListALL.slice(0, 2); //截取我的课程前二
+ if (!this.$isEmpty(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; //收益比较信息
- 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] = {
data: ret.data.lineMap.yList[i],
- type: 'line',
- areaStyle: {},
-
- }
+ type: "line",
+ areaStyle: {}
+ };
}
}
- setTimeout(()=>{
+ setTimeout(() => {
this.loadPieChart();
this.loadBrokenLine();
- },200);
+ }, 200);
}
});
// this.myAppsList = this.myAppsListALL.slice(0,3); //截取我的应用前三
// this.courseList = this.courseListALL.slice(0,2); //截取我的课程前三
},
methods: {
- loadPieChart(){ //饼状图
+ loadPieChart() {
+ //饼状图
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;
let option = {
title: {
- text: '资产结构图',
+ text: "资产结构图"
// subtext: 'Fake Data',
// left: 'center'
},
tooltip: {
- trigger: 'item'
+ trigger: "item"
},
legend: {
- orient: 'vertical',
- type: 'scroll',
- right: '0',
+ orient: "vertical",
+ type: "scroll",
+ right: "0",
top: 26,
selectedMode: true, //是否能够点击
- formatter: (name,d) =>{
+ formatter: (name, d) => {
let info = name;
- try{
- this.pieMapsInfo.forEach(function(item,i){
- if(item.name == name){
- throw new Error(item.name + " " +item.value);
+ try {
+ this.pieMapsInfo.forEach(function(item, i) {
+ if (item.name == name) {
+ throw new Error(item.name + " " + item.value);
}
});
- } catch(e) {
+ } catch (e) {
info = e.message;
}
return info;
- },
+ }
},
series: [
{
- name: '资产账户信息',
- type: 'pie',
- radius: '50%',
- center: ['40%', '50%'],
+ name: "资产账户信息",
+ type: "pie",
+ radius: "50%",
+ center: ["40%", "50%"],
data: this.pieMapsInfo,
// data: [
// { value: 5000, name: '现金账户 5000' },
@@ -240,7 +313,7 @@ export default {
itemStyle: {
shadowBlur: 10,
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实例
- var myChart = echarts.init(document.getElementById('echarts_box'));
+ var myChart = echarts.init(document.getElementById("echarts_box"));
// 3. 使用刚指定的配置项和数据，显示图表
- myChart.setOption(option)
+ myChart.setOption(option);
},
- loadBrokenLine(){ //折线图
+ loadBrokenLine() {
+ //折线图
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;
- console.log(this.lineMapInfo)
+ console.log(this.lineMapInfo);
let option = {
title: {
- text: '收益率比较',
+ text: "收益率比较"
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross',
+ type: "cross",
label: {
- backgroundColor: '#6a7985'
+ backgroundColor: "#6a7985"
}
},
- formatter: (params) =>{
- let tetx=['基准收益率 (HS300)','总资产收益率']
+ 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/>";
+ params.forEach(function(item, i) {
+ info +=
+ tetx[i] + " : " + Number(item.value).toFixed(2) + "%" + "<br/>";
});
return info;
}
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
data: this.lineMapInfo.xList
},
yAxis: {
- type: 'value'
+ type: "value"
},
series: this.lineMapInfo.yList
// [
@@ -301,149 +376,190 @@ export default {
// ]
};
// 1. 基于准备好的dom，初始化echarts实例
- var myChart = echarts.init(document.getElementById('echarts_line'));
+ var myChart = echarts.init(document.getElementById("echarts_line"));
// 3. 使用刚指定的配置项和数据，显示图表
- myChart.setOption(option)
+ myChart.setOption(option);
},
- pre_app(){ //上一个应用
- if(this.myAppsListALL.length <= 3){
+ pre_app() {
+ //上一个应用
+ if (this.myAppsListALL.length <= 3) {
return;
}
- this.start_app_num --;
- if(this.start_app_num < 0){
+ 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){
+ 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));
+ this.myAppsList = this.myAppsList.concat(
+ this.myAppsListALL.slice(0, 3 - num)
+ );
}
},
- next_app(){ //下一个应用
- if(this.myAppsListALL.length <= 3){
+ next_app() {
+ //下一个应用
+ if (this.myAppsListALL.length <= 3) {
return;
}
- this.start_app_num ++;
- if(this.start_app_num == this.myAppsListALL.length){
+ 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){
+ 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));
+ 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);
+ } else {
+ this.myAppsList = this.myAppsListALL.slice(
+ this.start_app_num,
+ this.start_app_num + 3
+ );
}
},
- pre_course(){ //上一个课程
- if(this.courseListALL.length <= 2){
+ pre_course() {
+ //上一个课程
+ if (this.courseListALL.length <= 2) {
return;
}
- this.start_course_num --;
- if(this.start_course_num < 0){
+ 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){
+ 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));
+ this.courseList = this.courseList.concat(
+ this.courseListALL.slice(0, 2 - num)
+ );
}
},
- next_course(){ //下一个课程
- if(this.courseListALL.length <= 2){
+ next_course() {
+ //下一个课程
+ if (this.courseListALL.length <= 2) {
return;
}
- this.start_course_num ++;
- if(this.start_course_num == this.courseListALL.length){
+ 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){
+ 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));
+ 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);
+ } 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}});
+ 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;
- }
+<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;
}
- .class_row{
- margin-bottom: 20px;
+ .wdkc_img {
+ width: 300px;
+ height: 150px;
}
- .next_pre{
- display: flex;
- justify-content:center;
- align-items:center;
- height: 177px;
+ .wdkc_c {
+ width: 300px;
+ p {
+ margin: 0;
+ }
}
- .next_pre_img{
- width: 40px;
- cursor: pointer;
+ .el-divider--horizontal {
+ margin: 0;
}
- .yinyong_img{
- width: 120px;
- height: 122px;
- cursor: pointer;
- border-radius: 10px;
+ .class_img {
+ float: left;
+ margin-right: 10px;
}
- .wdon{
- width: 10px;height: 10px;background-color: red;border-radius: 50%;
- float: left;margin-top: 5px;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;
- }
+ //宽度大于等于
+ @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 -->