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