From e10884c242e02256dcec55bd5a3f45407b49bc4e Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 27 Sep 2022 14:51:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html               |   2 +-
 src/api/index.js                |  13 +-
 src/pages/course/list/index.vue |  61 +++++---
 src/pages/screen/index.vue      | 266 +++++++++++++++++++++++++++++---
 src/setting.js                  |   2 +-
 5 files changed, 293 insertions(+), 51 deletions(-)
diff --git a/public/index.html b/public/index.html
index 973b3ea..a886e40 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
     <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
-    <title>智信云</title>
+    <title>职站——为院校打造一站式虚拟仿真实训教学数智云平台</title>
   </head>
   <body>
     <noscript>
diff --git a/src/api/index.js b/src/api/index.js
index 98765aa..3a1a34d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,7 +1,7 @@
 import Setting from "@/setting";
 
 const host = Setting.apiBaseURL
-const host1 = 'http://192.168.31.137:9000/'
+const host1 = 'http://121.37.12.51/'
 const uploadURL = location.origin + '/'
 
 export default {
@@ -20,6 +20,7 @@ export default {
     //实验台
     curriculumDetail: `nakadai/nakadai/curriculum/curriculumDetail`, // 课程详情
     curriculumChapter: `nakadai/nakadai/curriculum/chapter/queryChaptersAndSubsections`, // 根据课程id查询章节小节,树状结构
+    queryChaptersAndSubsections: `occupationlab/occupationlab/management/edu/courseChapter/queryChaptersAndSubsections`,
     curriculumGetSubsection: `nakadai/nakadai/curriculum/subsection/getSubsection`, // 根据小节id获取预览文件地址
     getProjectBySystemId: 'occupationlab/occupationlab/projectManage/getProjectBySystemId',
     getTheMostRecentlyRunProject: 'python/python/getTheMostRecentlyRunProject',
@@ -66,11 +67,12 @@ export default {
     listClassification: `occupationlab/occupationlab/theoreticalCourseClassification/pagingQuery`,
     findByIdCourse: `occupationlab/occupationlab/theoreticalCourse/findById`,
     playRecordSave: `occupationlab/occupationlab/playRecord/save`,
+    studentLoginPreCourse: `occupationlab/occupationlab/theoreticalCourse/studentLoginPreCourse`,
 
     // 资讯
-    queryAllColumns: `${host1}occupationlab/occupationlab/information/column/queryAllColumns`, // 栏目树
-    queryArticleByCondition: `${host1}occupationlab/occupationlab/information/article/queryArticleByCondition`, // 文章列表分页条件查询
-    getArticle: `${host1}occupationlab/occupationlab/information/article/getArticle`, // 根据id查询文章
+    queryAllColumns: `occupationlab/occupationlab/information/column/queryAllColumns`, // 栏目树
+    queryArticleByCondition: `occupationlab/occupationlab/information/article/queryArticleByCondition`, // 文章列表分页条件查询
+    getArticle: `occupationlab/occupationlab/information/article/getArticle`, // 根据id查询文章
 
     // 线上赛事
     notLoggedInBeforeStudentEvents: `occupationlab/occupationlab/match/contest/notLoggedInBeforeStudentEvents`,
@@ -119,4 +121,7 @@ export default {
     studentGradeDistribution: `occupationlab/occupationlab/data/kanban/studentGradeDistribution`,
     studentAssessSchievement: `occupationlab/occupationlab/data/kanban/studentAssessSchievement`,
     overviewOfOurSchoolData: `occupationlab/occupationlab/data/kanban/overviewOfOurSchoolData`,
+    monthlyAverageOnlineTime: `occupationlab/occupationlab/data/kanban/monthlyAverageOnlineTime`,
+    courseRankings: `occupationlab/occupationlab/data/kanban/courseRankings`,
+    platformLoginStatistics: `users/users/user/platformLoginStatistics`,
 };
\ No newline at end of file
diff --git a/src/pages/course/list/index.vue b/src/pages/course/list/index.vue
index 92273f1..b879b9c 100644
--- a/src/pages/course/list/index.vue
+++ b/src/pages/course/list/index.vue
@@ -33,6 +33,10 @@
                             <img :src="item.coverUrl" alt="" />
                             <div class="title">{{ item.courseName }}</div>
                             <div class="desc" :class="{ie: core.isIE(),ie: core.isFirefox()}" v-html="item.courseIntroduction"></div>
+                            <div class="metas">
+                              <i class="el-icon-view"></i>
+                              {{ item.pageviews }}
+                            </div>
                         </li>
                     </ul>
                     <div class="pagination">
@@ -55,21 +59,17 @@
 
 <script>
 import { Loading } from "element-ui";
-import bus from "@/libs/bus";
 import Setting from "@/setting";
 export default {
     name: "course",
     data() {
         return {
+            isTourist: !!Setting.whiteList.find(e => e === this.$route.path),
             active: 0,
             tabs: [
               {
                 id: 0,
                 name: '共享课程'
-              },
-              {
-                id: 1,
-                name: '本校课程'
               }
             ],
             form: {
@@ -101,8 +101,13 @@ export default {
         };
     },
     mounted() {
-        this.getClassification(0);
-        this.getData();
+      // 登录后的课程才需要展示本校课程
+      this.isTourist || this.tabs.push({
+        id: 1,
+        name: '本校课程'
+      })
+      this.getClassification(0)
+      this.getData()
     },
     watch: {
         keyword: function(val) {
@@ -114,23 +119,24 @@ export default {
     },
     methods: {
         getData() {
-            this.loadIns = Loading.service()
-            this.$post(this.api.pageConditionalQueryCourseByStudent, {
-              ...this.form,
-              pageNum: this.page,
-              pageSize: this.pageSize,
-              courseSource: this.active,
-              keyWord: this.keyword
-            }).then(({ page }) => {
-              this.list = page.records
-              this.total = page.total
-              this.list.map(n => {
-                n.courseIntroduction = n.courseIntroduction.replace(/<img.*?(?:>|\/>)/gi, "")
-              })
-              this.loadIns.close()
-            }).catch(res => {
-              this.loadIns.close()
-            });
+          this.loadIns = Loading.service()
+          // 登录前登录后页面调的课程接口不是同一个
+          this.$post(this.api[this.isTourist ? 'studentLoginPreCourse' : 'pageConditionalQueryCourseByStudent'], {
+            ...this.form,
+            pageNum: this.page,
+            pageSize: this.pageSize,
+            courseSource: this.active,
+            keyWord: this.keyword
+          }).then(({ page }) => {
+            this.list = page.records
+            this.total = page.total
+            this.list.map(n => {
+              n.courseIntroduction = n.courseIntroduction.replace(/<img.*?(?:>|\/>)/gi, "")
+            })
+            this.loadIns.close()
+          }).catch(res => {
+            this.loadIns.close()
+          })
         },
         initData() {
             this.page = 1;
@@ -171,7 +177,7 @@ export default {
             this.getData();
         },
         toDetail(id) {
-            this.$router.push(`/course/details?id=${id}`);
+            this.$router.push(`/${this.isTourist ? 'preCourse' : 'course'}/details?id=${id}`);
         }
     }
 };
@@ -314,6 +320,11 @@ export default {
                     white-space: nowrap;
                 }
             }
+            .metas {
+              margin-top: 10px;
+              color: #a9a9a9;
+              font-size: 12px;
+            }
 
             &:hover {
                 box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
diff --git a/src/pages/screen/index.vue b/src/pages/screen/index.vue
index f0fa383..e37ae11 100644
--- a/src/pages/screen/index.vue
+++ b/src/pages/screen/index.vue
@@ -109,7 +109,7 @@
                 <img src="@/assets/img/screen/t_7.png" alt="">
                 平台登录人数
             </div>
-            <div id="chart3" class="chart t_btn9"></div>
+            <div id="chart4" class="chart t_btn9"></div>
           </div>
       </div>
       <div class="middle">
@@ -234,9 +234,9 @@
                   <img src="@/assets/img/screen/t_5.png" alt="">
                   热门理论课程排行榜
               </div>
-              <!-- <ul class="list">
-                <li v-for="(item, i) in courses" :key="i">{{ item.curriculumName }}</li>
-              </ul> -->
+              <ul class="list" style="margin-top: 45px;">
+                <li v-for="(item, i) in popularCourses" :key="i">{{ item }}</li>
+              </ul>
           </div>
           <div class="item" style="height: 630px">
             <div class="t_line_box">
@@ -272,7 +272,7 @@
                 </thead>
               </table>
             </div>
-            <div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto">
+            <div class="main_table" ref="tableWrap" style="margin-top: 0;overflow: auto">
               <table>
                 <tbody>
                   <tr v-for="(item, i) in achs" :key="i">
@@ -292,8 +292,9 @@
 </template>
 
 <script>
-import Setting from '@/setting'
+import Util from '@/libs/util'
 import * as echarts from 'echarts'
+import Setting from '@/setting'
 export default {
     data() {
         return {
@@ -312,6 +313,7 @@ export default {
           goodsSell: [],
           cryptoList: [],
           courses: [],
+          popularCourses: [],
           achs: []
         }
     },
@@ -353,6 +355,11 @@ export default {
         this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => {
           this.courses = data
         }).catch(res => {})
+        
+        // 热门理论课程排行榜
+        this.$post(this.api.courseRankings).then(({ data }) => {
+          this.popularCourses = data
+        }).catch(res => {})
 
         // 学霸排行榜
         this.$post(this.api.academicLeadersRanking).then(({ data }) => {
@@ -446,7 +453,7 @@ export default {
         }
         let chart = {}
         
-        // 平台考试数据考试统计
+        // 学生成绩分布分析
         const year = new Date().getFullYear()
         const times = []
         // 获取过去五年的上下半年日期
@@ -492,6 +499,15 @@ export default {
               bottom: '3%',
               containLabel: true
             },
+            dataZoom: [//滑动条
+              {
+                xAxisIndex: 0,//这里是从X轴的0刻度开始
+                show: false,//是否显示滑动条，不影响使用
+                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+                startValue: 0, // 从头开始。
+                endValue: 5  // 一次性展示6个。
+              }
+            ],
 						color:['#56f3f7', '#b76fff', '#5492ff', '#e51579'],
             xAxis: [
               {
@@ -563,10 +579,9 @@ export default {
           }
           chart[0] = echarts.init(document.querySelector(`#chart2`))
           chart[0].setOption(option)
-          
-          // setInterval(function () {
-          //   animateChart(chart[0], option, series)
-          // }, 1500)
+          setInterval(function () {
+            animateChart(chart[0], option, data, 5)
+          }, 3000)
         }).catch(res => {})
 
         // 学生实验课程考核成绩趋势图
@@ -662,6 +677,15 @@ export default {
                 fontSize:'12',
               }
             },
+            dataZoom: [//滑动条
+              {
+                xAxisIndex: 0,//这里是从X轴的0刻度开始
+                show: false,//是否显示滑动条，不影响使用
+                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+                startValue: 0, // 从头开始。
+                endValue: 6  // 一次性展示6个。
+              }
+            ],
             grid: {
               left: '30',
               top: '27%',
@@ -718,20 +742,222 @@ export default {
           }
           chart[1] = echarts.init(document.querySelector(`#chart5`))
           chart[1].setOption(option)
-          
-          // setInterval(function () {
-          //   animateChart(chart[0], option, series)
-          // }, 1500)
+          setInterval(function () {
+            animateChart(chart[1], option, times)
+          }, 5000)
+        }).catch(res => {})
+        
+        // 月人均在线学习时长情况
+        const date = new Date()
+        date.setMonth(date.getMonth() + 1)
+        const months = []
+        // 获取近12个月的日期
+        for (let i = 0; i < 12; i++) {
+          date.setMonth(date.getMonth() - 1)
+          const pre = date.getFullYear() + '-' + Util.formateTime(date.getMonth() + 1) + '-'
+          months.push({
+            startTime: pre + '01',
+            endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000*60*60*24).getDate()
+          })
+        }
+        this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => {
+          const option = {
+            title: {
+              text: ''
+            },
+            tooltip: {
+              trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              axisLine: {
+                lineStyle: {
+                  color: '#fff'
+                }
+              },
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  color: '#fff',
+                },
+                rotate: 60
+              },
+              data: data.map(e => e.time)
+            },
+            dataZoom: [//滑动条
+              {
+                xAxisIndex: 0,//这里是从X轴的0刻度开始
+                show: false,//是否显示滑动条，不影响使用
+                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+                startValue: 0, // 从头开始。
+                endValue: 7  // 一次性展示6个。
+              }
+            ],
+            yAxis: {
+              type: 'value',
+              axisLine: {
+                lineStyle: {
+                  color: '#fff'
+                }
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 12,
+                  color: '#fff'
+                },
+                formatter: '{value}'
+              },
+            },
+            color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
+            legend: {
+              data: ['月人均在线学习时长情况'],
+              textStyle:{
+                color: '#fff'
+              },
+              top: '8%'
+            },
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true
+            },
+            series: [
+              {
+                data: data.map(e => e.averageDuration),
+                type: 'bar',
+                barWidth: 11,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: [10, 10, 0, 0],
+                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                      offset: 0,
+                      color: "#4033F9"
+                    }, {
+                      offset: 0.8,
+                      color: "#516fff"
+                    }], false),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                  }
+                },
+                showBackground: true,
+                backgroundStyle: {
+                  color: 'rgba(180, 180, 180, 0.2)'
+                }
+              }
+            ]
+          }
+          chart[2] = echarts.init(document.querySelector(`#chart3`))
+          chart[2].setOption(option)
+          setInterval(function () {
+            animateChart(chart[2], option, data)
+          }, 1500)
+        }).catch(res => {})
+
+        // 平台登录人数
+        this.$get(this.api.platformLoginStatistics, {
+          platform: Setting.platformId
+        }).then(({ data }) => {
+          const option = {
+            tooltip: {
+              trigger: 'axis',
+            },
+            grid: {
+              left: '12%',
+              right: '5%',
+              top: '15%',
+              bottom: '30%'
+            },
+            dataZoom: [//滑动条
+              {
+                xAxisIndex: 0,//这里是从X轴的0刻度开始
+                show: false,//是否显示滑动条，不影响使用
+                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+                startValue: 0, // 从头开始。
+                endValue: 3  // 一次性展示6个。
+              }
+            ],
+            xAxis: [{
+              type: 'category',
+              axisLine: {
+                lineStyle: {
+                  color: '#57617B'
+                }
+              },
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  color: '#fff',
+                },
+                rotate: 60
+              },
+              data: data.map(e => e.today)
+            }],
+            yAxis: [{
+              type: 'value',
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#57617B'
+                }
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 12,
+                  color: '#fff'
+                },
+                formatter: '{value}'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dashed',
+                  color: ['#25CEF3']
+                }
+              }
+
+            }],
+            series: [{
+                name: '平台登录人数',
+                type: 'bar',
+                barWidth: 8,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: [10, 10, 0, 0],
+                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                      offset: 0,
+                      color: "#009AFD"
+                    }, {
+                      offset: 0.8,
+                      color: "#33DAFF"
+                    }], false),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                  }
+                },
+                data: data.map(e => e.quantity)
+              }
+            ]
+          }
+          chart[3] = echarts.init(document.querySelector(`#chart4`))
+          chart[3].setOption(option)
+          setInterval(function () {
+            animateChart(chart[3], option, data, 3)
+          }, 1500)
         }).catch(res => {})
         
         // this.scrollTable()
 
         // 监听resize事件，动态改变chart大小
-        // window.addEventListener('resize', () => {
-        //   for (let i = 0; i < 7; i++) {
-        //     chart[i] && chart[i].resize()
-        //   }
-        // })
+        window.addEventListener('resize', () => {
+          for (let i = 0; i < 4; i++) {
+            chart[i] && chart[i].resize()
+          }
+        })
       },
       // 表格滚动效果
       // scrollTable() {
diff --git a/src/setting.js b/src/setting.js
index 7894363..f6cf359 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -28,7 +28,7 @@ if (isPro) {
     host = "http://121.37.12.51/"; // 测试服
     // host = 'https://www.occupationlab.com/' // 正式服
     host = "http://192.168.31.151:9000/"; // 榕
-    host = "http://192.168.31.137:9000/"; // 赓
+    // host = "http://192.168.31.137:9000/"; // 赓
 }
 
 const Setting = {
