kecheng

src/layout/index/mainData.vue

@@ -0,0 +1,172 @@
+<template>
+  <div id="mainData">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="beijing">
+          <el-row type="flex">
+            <el-col :span="4" v-for="(i, index) in arrange" :key="index" @click.native="changeLesson(i)">
+              <el-row style="text-align:center">
+                <el-col :span="24">{{ i.day }}</el-col>
+                <el-col :span="24">{{ i.date | getMD }}</el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-col :span="24" class="top">
+            <el-col :span="12" class="time">时间</el-col>
+            <el-col :span="12" class="date">
+              <el-col :span="24"> {{ today.date }}</el-col>
+              <el-col :span="24">{{ today.day }}</el-col>
+            </el-col>
+          </el-col>
+          <template v-if="lesson">
+            <el-col :span="24" class="context" v-for="(item, index) in lesson" :key="index">
+              <el-col :span="12" class="contexttime">
+                <span>{{ item.time }}</span>
+              </el-col>
+              <el-col :span="12" class="contextclass">
+                <p>{{ item.subname }}</p>
+                <p class="title" @click="click(item)">{{ item.teaname }}</p>
+              </el-col>
+              <el-col :span="24">
+                <p></p>
+              </el-col>
+            </el-col>
+            <!-- <el-col :span="24" class="context" v-if="lesson.subname">
+              <el-col :span="12" class="contexttime">
+                <span>11:30—13:30</span>
+              </el-col>
+              <el-col :span="12" class="contextclass">
+                <p></p>
+                <p>午餐+休息</p>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="context">
+              <el-col :span="12" class="contexttime">
+                <span>11:30—4:30</span>
+              </el-col>
+              <el-col :span="12" class="contextclass">
+                <p>{{ lesson.subname }}</p>
+                <p>{{ lesson.teaname }}</p>
+              </el-col>
+              <el-col :span="24">
+                <p></p>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="context" v-if="lesson.subname">
+              <el-col :span="12" class="contexttime">
+                <span>16:30—17:30</span>
+              </el-col>
+              <el-col :span="12" class="contextclass">
+                <p></p>
+                <p>晚餐</p>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="context">
+              <el-col :span="12" class="contexttime">
+                <span>17:30 — 19:45</span>
+              </el-col>
+              <el-col :span="12" class="contextclass">
+                <p></p>
+                <p>{{ lesson.lastLesson }}</p>
+              </el-col>
+            </el-col> -->
+          </template>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'mainData',
+  props: {
+    lesson: null,
+    today: null,
+    arrange: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    changeLesson(date) {
+      this.$emit('getLesson', date);
+    },
+
+    click(item) {
+      console.log(item);
+      this.$router.push({ path: 'teacherscore/index', query: { teaid: item.teaid, lessonid: item._id } });
+    },
+  },
+  filters: {
+    getMD(date) {
+      let arr = date.split('-');
+      //${arr[1]}-
+      return `${arr[2]}`;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  text-align: center;
+  padding: 7px 0 0 0;
+}
+.beijing {
+  background-color: #eee;
+  min-height: 700px;
+}
+.top {
+  margin: 20px 0 0 0;
+}
+/deep/.el-button {
+  border-radius: 11px;
+  padding: 10px 10px 10px 10px;
+}
+.time {
+  background-color: #ffffff;
+  height: 70px;
+  font-size: 16px;
+  padding: 0px 0px 0 50px;
+  line-height: 60px;
+  color: #222222;
+}
+.date {
+  background-color: #ffffff;
+  height: 70px;
+  font-size: 16px;
+
+  line-height: 30px;
+  color: #222222;
+}
+.context {
+  background-color: #ffffff;
+  height: 102px;
+  width: 92%;
+  margin: 15px 15px 0 15px;
+  color: #bbbbbb;
+}
+
+.contexttime {
+  padding: 15px 20px 0 20px;
+}
+.contextclass {
+  background-color: #ffffff;
+}
+.contextclass p {
+  padding: 15px 0 0 0;
+  text-align: center;
+}
+.title {
+  color: blueviolet;
+}
+</style>

src/layout/index/tableData.vue

@@ -0,0 +1,128 @@
+<template>
+  <div id="tableData">
+    <el-row>
+      <el-col :span="24" class="title"> 2020年第{{ timeTable.term }}期高校大学生就业能力拓展训练课程表({{ timeTable.class }}) </el-col>
+      <el-col :span="24" class="tableDta">
+        <table border="1" class="table">
+          <tr>
+            <th colspan="2" class="th">
+              <i class="el-icon-timer time"></i>
+            </th>
+            <th class="th" v-for="(item, index) in timeTable.lessons" :key="index">
+              <p>({{ item.date }})</p>
+            </th>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>8:30 11:30</p>
+            </td>
+            <td class="td" v-for="(item, index) in timeTable.lessons" :key="index">
+              <p>{{ item.name }}</p>
+              <p class="teacher">{{ item.teacherid }}</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>11:30 13:30</p>
+            </td>
+            <td colspan="5" class="td">
+              <p>午餐 + 休息</p>
+            </td>
+          </tr>
+          <tr class="display">
+            <td class="td" colspan="2">
+              <p>13:30 16:30</p>
+            </td>
+            <td class="td" v-for="(item, index) in timeTable.lessons" :key="index">
+              <p>{{ item.name }}</p>
+              <p class="teacher">{{ item.teacherid }}</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>16:30 17:30</p>
+            </td>
+            <td colspan="5" class="td">
+              <p>晚餐</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="td" colspan="2">
+              <p>17:30 19:45</p>
+            </td>
+            <td class="td">
+              <p>拓展交流</p>
+            </td>
+            <td class="td">
+              <p>课程作业</p>
+              <p>小组展示</p>
+            </td>
+            <td class="td">
+              <p>课程作业</p>
+            </td>
+            <td class="td">
+              <p>课程作业</p>
+              <p>礼仪课</p>
+            </td>
+            <td class="td">
+              <p>结业仪式</p>
+              <p>(11:30-12:00)</p>
+            </td>
+          </tr>
+        </table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tableData',
+  props: {
+    timeTable: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.title {
+  padding: 10px 60px;
+  text-align: center;
+  font-size: 18px;
+}
+.table tr {
+  height: 50px;
+}
+.th {
+  width: 58px;
+  text-align: center;
+}
+.th p {
+  font-size: 12px;
+}
+.th .time {
+  font-size: 35px;
+}
+.td {
+  width: 38px;
+  text-align: center;
+}
+.td p {
+  font-size: 12px;
+}
+.td .teacher {
+  color: #ff0000;
+}
+.display td:last-child p {
+  display: none;
+}
+</style>

src/store/index.js

@@ -4,6 +4,7 @@ import login from '@frame/store/login';
 import trainplan from '@frame/store/trainplan';
 import classes from '@frame/store/classes';
 import director from '@frame/store/director';
+import lesson from "@frame/store/lesson";
 
 import * as ustate from '@frame/store/user/state';
 import * as umutations from '@frame/store/user/mutations';
@@ -18,5 +19,6 @@ export default new Vuex.Store({
     login,
     classes,
     director,
+    lesson,
   },
 });

src/views/home/index.vue

@@ -6,7 +6,7 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          主题偶
+          <mainData :lesson="lesson" :today="today" @getLesson="getLesson"></mainData>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -19,23 +19,109 @@
 <script>
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
+import mainData from '@/layout/index/mainData.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: lesson } = createNamespacedHelpers('lesson');
 export default {
   name: 'index',
   props: {},
   components: {
     NavBar,
     footInfo,
+    mainData,
   },
   data: function() {
     return {
       title: '',
       isleftarrow: '',
       navShow: true,
+      lesson: {},
+      today: {},
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    let today = this.getDay();
+    let todate = this.getDate();
+    this.$set(this.today, `date`, todate);
+    this.$set(this.today, `day`, today);
+
+    if (this.user !== undefined) {
+      this.searchInfo();
+    }
+  },
+  methods: {
+    ...lesson({ lessionInfo: 'fetch', lessionlist: 'query' }),
+    // 查询课程详情
+    async searchInfo() {
+      let classid = sessionStorage.getItem('classid');
+      const result = await this.lessionlist({ classid });
+      let lessones = {};
+      for (const val of result.data) {
+        lessones = val;
+      }
+      var lesson = lessones.lessons.find(item => item.date === this.getDate());
+      this.$set(this, `lesson`, lesson);
+      // 获取课程开始-结束日期
+      this.$set(this, `originLesson`, lessones.lessons);
+      var ress = this.originLesson.filter(item => item.date === this.date);
+      this.$set(this, `lesson`, ress);
+      lessones.lessons.sort(function(a, b) {
+        if (a.date < b.date) {
+          return -1;
+        } else if (a.date > b.date) {
+          return 1;
+        } else {
+          if (a.date < b.date) {
+            return 1;
+          } else if (a.date > b.date) {
+            return -1;
+          }
+          return 0;
+        }
+      });
+      let ltime = lessones.lessons.map((i, index) => {
+        let object = { date: i.date, day: this.getDay(i.date) };
+        if (index !== 0) return object;
+      });
+      //排序
+      var appArray = _.uniqWith(ltime, _.isEqual);
+      appArray.sort(function(a, b) {
+        if (a.date < b.date) {
+          return -1;
+        } else if (a.date > b.date) {
+          return 1;
+        } else {
+          if (a.date < b.date) {
+            return 1;
+          } else if (a.date > b.date) {
+            return -1;
+          }
+          return 0;
+        }
+      });
+      this.$set(this, `arrange`, _.compact(appArray));
+    },
+    // 获取时间
+    getDay(date = new Date()) {
+      var str = '星期' + '日一二三四五六'.charAt(new Date(date).getDay());
+      return str;
+    },
+    getDate(date = new Date()) {
+      let res = new Date(date)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      let arr = res.split('-');
+      arr[1] = arr[1] * 1 >= 10 ? `${arr[1]}` : `0${arr[1]}`;
+      arr[2] = arr[2] * 1 >= 10 ? `${arr[2]}` : `0${arr[2]}`;
+      return `${arr[0]}-${arr[1]}-${arr[2]}`;
+    },
+    //点击日期获取课程
+    getLesson(date) {
+      var res = this.originLesson.filter(item => item.date === date.date);
+      this.$set(this, `lesson`, res);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/index.vue

@@ -29,6 +29,7 @@
 <script>
 import NavBar from '@/layout/common/topInfo.vue';
 import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: lesson } = createNamespacedHelpers('lesson');
 const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
 const { mapActions: classes } = createNamespacedHelpers('classes');
 export default {
@@ -54,6 +55,7 @@ export default {
     this.search();
   },
   methods: {
+    ...lesson({ lessionInfo: 'fetch', lessionlist: 'query' }),
     ...trainplan(['query']),
     ...classes({ classQuery: 'query' }),
     async search() {
@@ -69,6 +71,7 @@ export default {
     },
     classBtn(index) {
       // index:班级id
+      sessionStorage.setItem('classid', index);
       this.$router.push({ path: '/home/index', query: { id: index } });
     },
   },