修改

src/components/course/record-form.vue

+<style>
+  #timeleft div {
+    height: 65px;
+    color: #333333;
+  }
+
+  #timecenter div {
+    height: 65px;
+    color: #333333;
+  }
+
+  #timeright div {
+    height: 65px;
+    color: #333333;
+  }
+
+  #timeright div p {
+    margin: 0 0 0px;
+  }
+
+  .cicle1 {
+    position: absolute;
+    top: 0px;
+    left: -10px;
+    border-radius: 10px;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #cccccc;
+    background: #ffffff;
+  }
+
+  .cicle2 {
+    position: absolute;
+    top: 70px;
+    left: -10px;
+    border-radius: 10px;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #cccccc;
+    background: #ffffff;
+  }
+
+  .cicle3 {
+    position: absolute;
+    top: 140px;
+    left: -10px;
+    border-radius: 10px;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #cccccc;
+    background: #ffffff;
+  }
+
+  .cicle4 {
+    position: absolute;
+    top: 210px;
+    left: -10px;
+    border-radius: 10px;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #cccccc;
+    background: #ffffff;
+  }
+
+</style>
+<template>
+  <div class="page-body">
+    <div class="page-content">
+      <div class="row wrap" style="display:flex;justify-content:flex-end">
+        <div class="col-3">
+          <q-select filled stack-label option-value="TId" @input="GetTeacherList()" option-label="TeacherName"
+            v-model="msg.TeacherId" ref="Teacher_Id" :options="TeacherList" label="关联教师" :dense="false"
+            class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
+        </div>
+      </div>
+      <div>
+        <!-- <div class="q-px-lg q-pb-md">
+          <q-timeline color="secondary">
+            <q-timeline-entry :title="item.TeacherName" subtitle="February 22, 1986" v-for="item in dataList.resultList"
+              avatar="张" :body="body" />
+          </q-timeline>
+        </div> -->
+        <div class="col-10" style="margin-top:30px;display:flex;">
+            <div class="col-4" id="timeleft">
+                <div v-for="item in dataList.resultList">
+                    {{item.YearStr}}-{{item.MonthStr}}-{{item.DayStr}}
+                </div>
+            </div>
+            <div class="col-4" id="timecenter">
+                <div style="height:70px;  border-left:1px solid #366595; position:absolute;  left:130px;">
+                    <ul>
+                        <!-- <li class="cicle1" v-for="item in dataList.resultList">
+                            {{getFirst(item.TeacherName)}}
+                        </li> -->
+                        <li class="cicle1"></li>
+                        <li class="cicle2"></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="col-4" id="timeright" style="margin-left:50px;">
+                <div v-for="item in dataList.resultList">
+                    <p>{{item.TeacherName}}</p>
+                    <p>学习1小时</p>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    getTeacherDropDownList
+  } from '../../api/school/index'
+  import {
+    GetClassPlanLogPageList
+  } from '../../api/course/class'
+  export default {
+    props: {
+      setingObj: {
+        type: Object,
+        default: null
+      }
+    },
+    components: {
+
+    },
+    data() {
+      return {
+        msg: {
+          TeacherId: 0,
+          PageIndex: 1,
+          PageSize: 12,
+          School_Id: 0,
+          ClassId: 0
+        },
+        dataList: {},
+        TeacherList: [], //关联老师下拉
+        body:'123'
+      }
+    },
+    created() {
+      this.msg.School_Id = this.setingObj.School_Id;
+      this.msg.ClassId = this.setingObj.ClassId;
+      this.getRecord();
+    },
+    mounted() {
+      this.GetTeacherList();
+      console.log(this.setingObj, 'setingObj');
+    },
+    methods: {
+      getRecord() {
+        GetClassPlanLogPageList(this.msg).then(res => {
+          if (res.Code == 1) {
+            console.log(res, '数据');
+            this.dataList = res.Data.PageData;
+          }
+        })
+      },
+      //获取教师下拉
+      GetTeacherList() {
+        getTeacherDropDownList({}).then(res => {
+          if (res.Code == 1) {
+            var obj = {
+              TId: 0,
+              TeacherName: '全部老师'
+            }
+            this.TeacherList = res.Data;
+            this.TeacherList.unshift(obj);
+            console.log(res, '数据');
+          }
+        })
+      },
+      getFirst(val){
+        if (val) {
+          return val.substr(0, 1);
+        }
+      }
+    },
+  }
+
+</script>
+<style lang="sass">
+  @import url('~assets/css/table.sass');
+
+</style>