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 -->