Merge branch 'master' of http://gcls-git.helxsoft.cn/dsy/gcls_sys_learn_web

完成讲次详情页

.eslintrc.js

@@ -56,7 +56,7 @@ module.exports = {
     'no-extend-native': 2,
     'no-extra-bind': 2,
     'no-extra-boolean-cast': 2,
-    'no-extra-parens': 2,
+    'no-extra-parens': [2, 'functions'],
     'no-extra-semi': 2,
     'no-fallthrough': 1,
     'no-floating-decimal': 2,

src/api/liveBroadcast.js

@@ -0,0 +1,16 @@
+import { request, getRequestParameter } from '@/utils/request';
+
+/**
+ * @param {Object } cs_item_id 课次ID
+ */
+export function createEnterLiveRoomLink(Parameter) {
+  let params = getRequestParameter(
+    'live_room-live_room_dispatch-CreateEnterLiveRoomLink',
+    Parameter
+  );
+
+  return request({
+    method: 'post',
+    params
+  });
+}

src/api/table.js

@@ -5,11 +5,7 @@ import { request, getRequestParameter } from '@/utils/request';
  * @param {Object} { date_stamp } 格式化后的时间 yyy-mm-dd
  */
 export function getMyCsItemsDateTeacher(Parameter) {
-  let requestParameter = getRequestParameter('teaching-cs_item_manager-GetMyCSItems_Date_Teacher');
-  let params = {
-    Parameter
-  };
-  params = Object.assign(params, requestParameter);
+  let params = getRequestParameter('teaching-cs_item_manager-GetMyCSItems_Date_Teacher', Parameter);
 
   return request({
     method: 'post',
@@ -21,12 +17,8 @@ export function getMyCsItemsDateTeacher(Parameter) {
  * 得到课次详情（信息集合）
  * @param {Object} Parameter {id}
  */
-export function GetCSItemInfoBox(Parameter) {
-  let requestParameter = getRequestParameter('teaching-cs_item_manager-GetCSItemInfoBox');
-  let params = {
-    Parameter
-  };
-  params = Object.assign(params, requestParameter);
+export function getCSItemInfoBox(Parameter) {
+  let params = getRequestParameter('teaching-cs_item_manager-GetCSItemInfoBox', Parameter);
 
   return request({
     method: 'post',

src/common/SvgIcon/CircleProgress.vue

@@ -0,0 +1,40 @@
+<template>
+  <svg width="36px" height="36px" class="circle-progress">
+    <circle
+      r="16"
+      cy="18"
+      cx="18"
+      stroke-width="2"
+      stroke="#1ef581"
+      stroke-linejoin="round"
+      stroke-linecap="round"
+      fill="none"
+      :stroke-dashoffset="dashoffset"
+      stroke-dasharray="100"
+    ></circle>
+    <path
+      transform="rotate(90 17.999999999999996,17.406309127807614)"
+      fill="#727272"
+      d="m18.007785,17.211003c1.59375,0 2.96094,-1.42969 2.96094,-3.27344c0,-1.82031 -1.375,-3.1875 -2.96094,-3.1875c-1.59375,0 -2.96875,1.39844 -2.96875,3.20313c0.00781,1.82812 1.36719,3.25781 2.96875,3.25781zm-4.63281,6.85155l9.25781,0c1.1797,0 1.5938,-0.3437 1.5938,-1c0,-1.9062 -2.3907,-4.53124 -6.22661,-4.53124c-3.82813,0 -6.22656,2.62504 -6.22656,4.53124c0,0.6563 0.41406,1 1.60156,1z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'CircleProgress',
+  props: {
+    dashoffset: {
+      type: Number,
+      default: 0
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.circle-progress {
+  transform: rotate(-90deg);
+}
+</style>

src/main.js

@@ -6,6 +6,8 @@ import store from './store';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
+import '@/icons';
+
 import '@/styles/index.scss'; // global css
 import 'normalize.css/normalize.css';
 

src/styles/mixin.scss

@@ -3,3 +3,11 @@
   margin: 0 auto;
   padding: 30px 0 4px;
 }
+
+@mixin el-tag {
+  background-color: #e0e0e0;
+  color: #000;
+  margin-right: 10px;
+  border-radius: 20px;
+  padding: 0 20px;
+}

src/utils/request.js

@@ -58,12 +58,13 @@ service.interceptors.response.use(
  * @param {String} MethodName 请求方法名
  * @returns {Object} 返回必需的请求参数
  * */
-export function getRequestParameter(MethodName) {
+export function getRequestParameter(MethodName, Parameter) {
   return {
     MethodName,
     UserCode: store.state.user.user_code,
     UserType: store.state.user.user_type,
-    SessionID: getSessionID()
+    SessionID: getSessionID(),
+    Parameter
   };
 }
 

src/views/login/index.vue

@@ -41,7 +41,7 @@
             class="login-button"
             type="primary"
             :loading="loading"
-            @click.native.prevent="handleLogin('teacher')"
+            @click.native.prevent="handleLogin('TEACHER')"
             >教师登录</el-button
           >
         </el-col>
@@ -51,7 +51,7 @@
             class="login-button"
             type="primary"
             :loading="loading"
-            @click.native.prevent="handleLogin('student')"
+            @click.native.prevent="handleLogin('STUDENT')"
             >学员登录</el-button
           >
         </el-col>
@@ -80,7 +80,7 @@ export default {
 
     return {
       loginForm: {
-        user_name: 'teacher',
+        user_name: 'teacher1',
         password: '1234567a',
         user_type: ''
       },
@@ -114,7 +114,6 @@ export default {
             })
             .catch(() => {
               this.loading = false;
-              this.$message.error('登录失败！');
             });
         } else {
           return false;

src/views/teacher/cs_item_detail/ClassroomTask.vue

@@ -51,16 +51,13 @@
                   <span>完成情况：</span>
                   <el-row>
                     <el-col :span="20">
-                      <!-- <div class="circle-progress"><span></span></div> -->
-                      <el-progress
-                        type="circle"
-                        :percentage="10"
-                        :stroke-width="2"
-                        :width="36"
-                        color="#1EF581"
-                        :format="format"
-                      >
-                      </el-progress>
+                      <span v-for="n in 10" :key="n">
+                        <circle-progress
+                          :dashoffset="
+                            computeProgress(n, list.student_count_finish_task, list.student_count)
+                          "
+                        />
+                      </span>
                     </el-col>
                     <el-col :span="4"
                       >已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}</el-col
@@ -74,13 +71,131 @@
         <!--课中任务-->
         <el-timeline-item timestamp="课中任务" color="#F02828" placement="top">
           <el-card v-for="(list, i) in midTaskList" :key="i">
-            <h4>课堂任务</h4>
+            <el-collapse>
+              <el-collapse-item>
+                <template slot="title">
+                  <el-row class="classroom-task-title">
+                    <el-col :span="4">{{ list.name }}</el-col>
+                    <el-col :span="16" class="title-date">2021-3-23</el-col>
+                    <el-col :span="4"
+                      >已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}</el-col
+                    >
+                  </el-row>
+                </template>
+
+                <el-row>
+                  <el-col :span="24">{{ list.content }}</el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="2">课件：</el-col>
+                  <el-col :span="22">
+                    <el-tag
+                      class="courseware-tag"
+                      v-for="courseware in list.courseware_list"
+                      :key="courseware.id"
+                      type="info"
+                      >{{ courseware.name }}</el-tag
+                    >
+                  </el-col>
+                </el-row>
+
+                <el-row>
+                  <el-col :span="2">附件：</el-col>
+                  <el-col :span="22">
+                    <el-tag
+                      class="accessory-tag"
+                      v-for="(accessory, j) in list.accessory_list"
+                      :key="j"
+                      type="info"
+                    >
+                      <a :href="accessory.file_url" target="_blank">{{ accessory.file_name }}</a>
+                    </el-tag>
+                  </el-col>
+                </el-row>
+                <div>
+                  <span>完成情况：</span>
+                  <el-row>
+                    <el-col :span="20">
+                      <span v-for="n in 10" :key="n">
+                        <circle-progress
+                          :dashoffset="
+                            computeProgress(n, list.student_count_finish_task, list.student_count)
+                          "
+                        />
+                      </span>
+                    </el-col>
+                    <el-col :span="4"
+                      >已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}</el-col
+                    >
+                  </el-row>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
           </el-card>
         </el-timeline-item>
         <!--课后任务-->
         <el-timeline-item timestamp="课后任务" color="#F02828" placement="top">
           <el-card v-for="(list, i) in afterTaskList" :key="i">
-            <h4>课堂任务</h4>
+            <el-collapse>
+              <el-collapse-item>
+                <template slot="title">
+                  <el-row class="classroom-task-title">
+                    <el-col :span="4">{{ list.name }}</el-col>
+                    <el-col :span="16" class="title-date">2021-3-23</el-col>
+                    <el-col :span="4"
+                      >已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}</el-col
+                    >
+                  </el-row>
+                </template>
+
+                <el-row>
+                  <el-col :span="24">{{ list.content }}</el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="2">课件：</el-col>
+                  <el-col :span="22">
+                    <el-tag
+                      class="courseware-tag"
+                      v-for="courseware in list.courseware_list"
+                      :key="courseware.id"
+                      type="info"
+                      >{{ courseware.name }}</el-tag
+                    >
+                  </el-col>
+                </el-row>
+
+                <el-row>
+                  <el-col :span="2">附件：</el-col>
+                  <el-col :span="22">
+                    <el-tag
+                      class="accessory-tag"
+                      v-for="(accessory, j) in list.accessory_list"
+                      :key="j"
+                      type="info"
+                    >
+                      <a :href="accessory.file_url" target="_blank">{{ accessory.file_name }}</a>
+                    </el-tag>
+                  </el-col>
+                </el-row>
+                <div>
+                  <span>完成情况：</span>
+                  <el-row>
+                    <el-col :span="20">
+                      <span v-for="n in 10" :key="n">
+                        <circle-progress
+                          :dashoffset="
+                            computeProgress(n, list.student_count_finish_task, list.student_count)
+                          "
+                        />
+                      </span>
+                    </el-col>
+                    <el-col :span="4"
+                      >已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}</el-col
+                    >
+                  </el-row>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
           </el-card>
         </el-timeline-item>
       </el-timeline>
@@ -89,6 +204,8 @@
 </template>
 
 <script>
+import CircleProgress from '@/common/SvgIcon/CircleProgress';
+
 export default {
   name: 'ClassroomTask',
   props: {
@@ -111,15 +228,36 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      dashoffset: 0
+    };
+  },
+  components: {
+    CircleProgress
+  },
   methods: {
-    format() {
-      // return '<svg-icon icon-class="user-solid"></svg-icon>';
+    // 计算每个环形进度条的进度
+    computeProgress(n, finishCount, totalCount) {
+      let percentage = Math.trunc((finishCount / totalCount) * 100);
+      if (percentage === 100) {
+        return 0;
+      }
+      let surplus = percentage - n * 10;
+      if (surplus >= 10) {
+        return 0;
+      }
+      if (surplus > 0) {
+        return -100 + (percentage % 10) * 10;
+      }
+      return 100;
     }
   }
 };
 </script>
 
-<style lang="scss" scope>
+<style lang="scss">
+@import '~@/styles/mixin.scss';
 $card-radius: 18px;
 
 .classroom-task-container {
@@ -163,13 +301,10 @@ $card-radius: 18px;
           margin: 6px 0;
         }
         .courseware-tag {
-          background-color: #e0e0e0;
-          color: #000;
-          margin-right: 10px;
-          border-radius: 20px;
+          @include el-tag;
         }
         .accessory-tag {
-          @extend .courseware-tag;
+          @include el-tag;
         }
       }
     }

src/views/teacher/cs_item_detail/index.vue

@@ -21,7 +21,10 @@
           <el-col>{{ CSItemInfoBox.name }}</el-col>
         </el-row>
         <el-row class="cs-item-class-name">
-          <el-col>{{ CSItemInfoBox.class_name }}</el-col>
+          <el-col :span="20">{{ CSItemInfoBox.class_name }}</el-col>
+          <el-col :span="4">
+            <el-button plain @click.prevent="jumpLiveRoom">进入直播教室</el-button></el-col
+          >
         </el-row>
       </div>
     </div>
@@ -30,11 +33,30 @@
       :mid-task-list="CSItemInfoBox.mid_task_list"
       :after-task-list="CSItemInfoBox.after_task_list"
     />
+    <!--学习资料-->
+    <div class="learning-material">
+      <div class="learning-material-title">学习资料</div>
+      <div>
+        <el-row>
+          <el-col class="learning-material-upload" :span="24">
+            <el-upload action="/"><el-button>上传文件</el-button></el-upload>
+          </el-col>
+        </el-row>
+        <el-tag
+          class="learning-material-tag"
+          v-for="(list, i) in CSItemInfoBox.learning_material_list"
+          :key="i"
+          type="info"
+          ><a href="list.file_url" target="_blank">{{ list.file_url }}</a></el-tag
+        >
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { GetCSItemInfoBox } from '@/api/table';
+import { getCSItemInfoBox } from '@/api/table';
+import { createEnterLiveRoomLink } from '@/api/liveBroadcast';
 import ClassroomTask from './ClassroomTask';
 
 export default {
@@ -58,9 +80,16 @@ export default {
     ClassroomTask
   },
   mounted() {
-    GetCSItemInfoBox({ id: this.id }).then(response => {
+    getCSItemInfoBox({ id: this.id }).then(response => {
       this.CSItemInfoBox = Object.assign(this.CSItemInfoBox, response);
     });
+  },
+  methods: {
+    jumpLiveRoom() {
+      createEnterLiveRoomLink({ cs_item_id: this.id }).then(response => {
+        window.open(response.live_room_url, '_blank');
+      });
+    }
   }
 };
 </script>
@@ -85,7 +114,28 @@ export default {
     }
     .cs-item-class-name {
       color: #a4a4a4;
+      .el-button {
+        position: relative;
+        top: -24px;
+        right: -32px;
+      }
     }
   }
 }
+
+.learning-material {
+  &-title {
+    padding-top: 12px;
+  }
+  &-tag {
+    @include el-tag;
+
+    margin-top: 16px;
+    height: 40px;
+    line-height: 40px;
+  }
+  &-upload {
+    padding-top: 27px;
+  }
+}
 </style>

src/views/teacher/main/CurriculaManager.vue

@@ -4,44 +4,39 @@
       <el-button>搜索</el-button>
     </div>
     <div class="curricula-manager-body">
-      <el-button class="bgcolor" @click="taskstatus()">进行中</el-button>
-      <el-button class="bgcolor" @click="taskstatus()">待开始</el-button>
-      <el-button class="bgcolor" @click="taskstatus()">已结束</el-button>
+      <el-button
+        v-for="item in completion"
+        :key="item.status"
+        class="bgcolor"
+        @click="taskstatus(item.status)"
+        >{{ item.val }}</el-button
+      >
     </div>
     <div class="curricula-manager-body1">
       <div class="paixu">
         <span>排序:</span>
-
-        <div class="sortBtn" style="display: flex">
-          创建时间
-          <i class="el-icon-sort"></i>
-        </div>
-
-        <div class="sortBtn" style="display: flex">
-          编辑时间
-          <i class="el-icon-sort"></i>
-        </div>
-
-        <div class="sortBtn" style="display: flex">
-          开课时间
+        <div class="sortBtn" v-for="item in time" :key="item.id">
+          <div>{{ item.createtime }}</div>
+          <div>{{ item.bianjitime }}</div>
+          <div>{{ item.onclasstime }}</div>
           <i class="el-icon-sort"></i>
         </div>
       </div>
     </div>
-    <div class="curricula-manager-body2" style="margin-left: 850px">
+    <div class="curricula-manager-body2">
       <el-button class="bgcolor">新建课程</el-button>
     </div>
 
-    <div class="div1" style="max-height: 700px; overflow: scroll">
-      <div v-for="item in obj" :key="item.id" class="xunhuan">
+    <div class="div1">
+      <div v-for="(item, index) in obj" :key="index" class="xunhuan">
         <div class="curricula-manager-foot">
           <span>{{ item.subject }}</span>
           <span>{{ item.status }}</span>
         </div>
-        <div class="curricula-manager-foot1" style="padding: 20px 0 0 0">
+        <div class="curricula-manager-foot1">
           <span>{{ item.createtime }}</span>
-          <span style="margin-left: 10px">{{ item.onclasstime }}</span>
-          <span style="margin-left: 10px">{{ item.teacher }}</span>
+          <span class="curricula-manager-foot2">{{ item.onclasstime }}</span>
+          <span class="curricula-manager-foot2">{{ item.teacher }}</span>
         </div>
       </div>
     </div>
@@ -53,126 +48,120 @@ export default {
   name: 'CurriculaManager',
   data() {
     return {
-      ifShow: null,
+      time: [
+        {
+          id: '1',
+          createtime: '创建时间',
+          sortType: 'createtime', // 数组对象中的哪一个属性进行排序
+          order: false //升序还是降序
+        },
+        {
+          id: '2',
+          bianjitime: '编辑时间',
+          sortType: 'bianjitime',
+          order: false
+        },
+        {
+          id: '3',
+          onclasstime: '开课时间',
+          sortType: 'onclasstime',
+          order: false
+        }
+      ],
+      completion: [
+        {
+          status: '1',
+          val: '进行中'
+        },
+        {
+          status: '2',
+          val: '报名中'
+        },
+        {
+          status: '3',
+          val: '已结束'
+        }
+      ],
       obj: [
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/28',
           onclasstime: '2021/4/25',
           teacher: '张一三',
-          status: '进行中'
+          status: '1'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/12',
           onclasstime: '2021/4/23',
           teacher: '张一三',
-          status: '进行中'
+          status: '1'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/22',
           onclasstime: '2021/4/17',
           teacher: '张一三',
-          status: '进行中'
+          status: '2'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/2',
           onclasstime: '2021/4/28',
           teacher: '张一三',
-          status: '报名中'
+          status: '3'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/6',
           onclasstime: '2021/4/1',
           teacher: '张一三',
-          status: '报名中'
+          status: '2'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/19',
           onclasstime: '2021/4/9',
           teacher: '张一三',
-          status: '报名中'
+          status: '2'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/16',
           onclasstime: '2021/4/25',
           teacher: '张一三',
-          status: '报名中'
+          status: '3'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createtime: '2021/3/21',
           onclasstime: '2021/4/11',
           teacher: '张一三',
-          status: '已结束'
+          status: '1'
         }
-      ],
-      sortType: null, // 数组对象中的哪一个属性进行排序
-      order: false // 升序还是降序
+      ]
     };
   },
-  // mounted() {
-  //       jinxing().then(response => {
-  //       console.log(456)
-  //   });
-  // },
   methods: {
-    taskstatus() {
-      console.log(123);
+    taskstatus(status) {
+      console.log(status);
     }
-
-    // sort(type) {                          // 排序
-    //           this.order = !this.order;		// 更改为 升序或降序
-    //           this.sortType = type;
-    //           this.obj.sort(this.compare(type));
-    //   },
-    // 调用下面 compare 方法 并传值
-    // compare(attr) {                  // 排序方法
-    //         let that = this;
-    //         return function(a,b){
-    //                 let val1 = a[attr];
-    //                 let val2 = b[attr];
-
-    //                 if(that.order){
-    //                         if(that.sortType == 'createtime'){            // 如果是时间就转换成时间格式
-    //                                 return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));
-    //                         }else{
-    //                                 return val2 - val1;
-    //                         }
-
-    //                 }else{
-    //                         if(that.sortType == 'createtime'){
-    //                                 return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));
-    //                         }else{
-    //                                 return val1 - val2;
-    //                         }
-    //                 }
-
-    //         }
-    // }
   }
 };
 </script>
 
 <style lang="scss">
-//
-::-webkit-scrollbar {
-  //隐藏滚轮
-  display: none;
-}
 .paixu {
   display: flex;
   padding-left: 10px;
   margin-left: -30px;
   margin-bottom: -35px;
 }
+.sortBtn {
+  display: flex;
+}
 .xunhuan {
-  margin: 20px 0 20px 150px;
+  margin: 0 0 20px 150px;
   width: 800px;
   height: 100px;
   background-color: #eee;
@@ -188,6 +177,7 @@ export default {
   border: 1px solid #c4c4c4;
   border-radius: 0;
   color: #0c0c0c;
+  margin-bottom: 20px;
 }
 .curricula-manager-header .el-button {
   width: 300px;
@@ -198,7 +188,7 @@ export default {
   display: flex;
   padding-left: 0;
   margin-top: 50px;
-  margin-left: 380px;
+  margin-left: 385px;
 }
 .el-button + .el-button {
   margin-left: 0;
@@ -208,11 +198,27 @@ export default {
   margin-left: 150px;
   margin-right: 500px;
 }
-.div1 {
-  overflow: auto;
-  height: 1000px;
+.curricula-manager-body2 {
+  margin-left: 850px;
 }
 .curricula-manager-body1 span {
   padding-left: 20px;
 }
+.curricula-manager-foot1 {
+  padding: 20px 0 0 0;
+}
+.curricula-manager-foot2 {
+  margin-left: 20px;
+}
+
+/**
+  1. flex 不是那么用的!
+  2. 不要使用无意义的数字命名
+  3. 排序那的for循环重写
+  4. 没用的class删除
+  5. 不要使用拼音来命名，并且 js 命名规范 使用 小驼峰式命名法 例： bianjitime => editTime
+  6. 样式看设计稿，重写
+  7. 样式使用 scss
+  8. 命名要有意义且符合实际作用，排序命名了个 time ？？？
+*/
 </style>

vue.config.js

@@ -16,7 +16,7 @@ let proxy = {};
 if (NODE_ENV === 'development') {
   proxy = {
     [process.env.VUE_APP_BASE_API]: {
-      target: 'http://gcls.helxsoft.cn/',
+      target: 'http://gcls-learn.helxsoft.cn/',
       changeOrigin: true,
       pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: ''