修改

src/components/course/record-form.vue

@@ -10,7 +10,6 @@
   }
 
   #timeright div {
-    height: 65px;
     color: #333333;
   }
 
@@ -18,95 +17,80 @@
     margin: 0 0 0px;
   }
 
-  .cicle1 {
+  .recordForm .cicle1 {
     position: absolute;
-    top: 0px;
-    left: -10px;
-    border-radius: 10px;
+    left: -15px;
+    border-radius: 50%;
     list-style: none;
-    width: 20px;
-    height: 20px;
-    border: 1px solid #cccccc;
+    width: 30px;
+    height: 30px;
     background: #ffffff;
+    text-align: center;
+    line-height: 30px;
+    color:#fff;
   }
 
-  .cicle2 {
-    position: absolute;
-    top: 70px;
-    left: -10px;
-    border-radius: 10px;
-    list-style: none;
-    width: 20px;
-    height: 20px;
-    border: 1px solid #cccccc;
-    background: #ffffff;
+  .cicle1:first-child {
+    top: -5px !important;
   }
 
-  .cicle3 {
-    position: absolute;
-    top: 140px;
-    left: -10px;
-    border-radius: 10px;
-    list-style: none;
-    width: 20px;
-    height: 20px;
-    border: 1px solid #cccccc;
-    background: #ffffff;
+  .recordForm .TeacherContent {
+    height: 40px;
+    line-height: 40px;
+    margin-top: 10px;
+    border-radius: 2px;
+    font-size: 12px;
+    padding-left: 20px;
+    background-color: #F0F5FB;
   }
-
-  .cicle4 {
-    position: absolute;
-    top: 210px;
-    left: -10px;
-    border-radius: 10px;
-    list-style: none;
-    width: 20px;
-    height: 20px;
-    border: 1px solid #cccccc;
-    background: #ffffff;
+  .recordForm .reCordRed{
+    color:#FDD5dc;
+    background-color: #F72E52;
+  }
+  .recordForm .reCordBlue{
+    color:#2961FE;
+    background-color: #D4DFFF;
+  }
+  .recordForm .reCordOrange{
+    color:#F28C1D;
+    background-color: #FCE8D2;
   }
-
 </style>
 <template>
   <div class="page-body">
-    <div class="page-content">
+    <div class="page-content recordForm">
       <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"
+          <q-select filled stack-label option-value="TId" @input="getRecord()" 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 class="col-10" style="margin-top:30px;display:flex;" v-if="dataList.resultList.length>0">
+          <div class="col-4" id="timeleft">
+            <div v-for="item in dataList.resultList">
+              {{item.YearStr}}-{{item.MonthStr}}-{{item.DayStr}}
             </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="timecenter">
+            <div style="height:80px;  border-left:1px solid #366595; position:absolute;  left:130px;">
+              <ul>
+                <li class="cicle1" v-for="(item,index) in dataList.resultList" :class="{'reCordRed':item.ColorType==1,'reCordBlue':item.ColorType==2,
+                'reCordOrange':item.ColorType==3}" :style="{'top':getTop(index)}">
+                  {{getFirst(item.TeacherName)}}
+                </li>
+              </ul>
             </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 class="col-4" id="timeright" style="margin-left:50px;width:80%;">
+            <div v-for="item in dataList.resultList" style="margin-bottom:10px;">
+              <p>{{item.TeacherName}}</p>
+              <div class="TeacherContent">
+                签到数{{item.CheckNum}}，缺勤数{{item.NoCheckNum}}
+              </div>
             </div>
+          </div>
         </div>
       </div>
     </div>
@@ -140,7 +124,6 @@
         },
         dataList: {},
         TeacherList: [], //关联老师下拉
-        body:'123'
       }
     },
     created() {
@@ -150,13 +133,11 @@
     },
     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;
           }
         })
@@ -171,14 +152,16 @@
             }
             this.TeacherList = res.Data;
             this.TeacherList.unshift(obj);
-            console.log(res, '数据');
           }
         })
       },
-      getFirst(val){
+      getFirst(val) {
         if (val) {
           return val.substr(0, 1);
         }
+      },
+      getTop(index) {
+        return index * 77 + 'px';
       }
     },
   }