排班列表

src/views/vehicle/vehicleSchedulManage/index.vue

@@ -91,7 +91,7 @@
       </div>
       <!--车辆排班-->
       <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
-      <div style="display: flex;">
+      <div style="display: flex;margin-bottom: 20px;">
         <span class="tip-co bg-1"></span><span>租房车</span>
         <span class="tip-co bg-5"></span><span>房车游</span>
         <span class="tip-co bg-4"></span><span>展览</span>
@@ -99,29 +99,31 @@
         <span class="tip-co bg-7"></span><span>预约中</span>
         <span class="tip-co bg-8"></span><span>禁用</span>
       </div>
-      <div style="position: relative;padding: 10px;padding-left: 0;width: 100%;overflow-x:auto;" v-if="currentMonth">
-        <div style="display: flex;">
-          <div class="day-title" style="min-width: 200px;max-width:200px;background: #eef1f6;">日期（{{currentMonth}}~{{nextMonth}}月）</div>
-          <div class="day-title" style="background: #eef1f6;" v-for="item in  tempDayList" :key="item.day" ><span>{{item.day}}</span></div>
-        </div>
-        <div  v-for="item in list" :key="item.id" style="display: flex;">
-          <div class="v-list" style="display: inline-block;" @click="toVehicleRecords(item)">
-            <div style="color: #bfcbd9;font-size: 14px;">
-              现在位置：{{item.parkCompanyName}}
+      <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
+                style="width: 100%;cursor: pointer;" class="schedul-tb">
+        <el-table-column width="220" align="center" :label="firstTime">
+          <template scope="scope">
+            <div @click="toVehicleRecords(scope.row)">
+              <div style="color: #bfcbd9;font-size: 14px;">
+                现在位置：{{scope.row.parkCompanyName}}
+              </div>
+              <div>{{scope.row.numberPlate}}<img src="../../../assets/images/detail.png" style="width: 15px;margin-left: 10px;"/></div>
+              <div style="color: #bfcbd9;font-size: 14px;">{{scope.row.vehicleModel?scope.row.vehicleModel.name:''}}</div>
             </div>
-            <div>{{item.numberPlate}}<img src="../../../assets/images/detail.png" style="width: 15px;margin-left: 10px;"/></div>
-            <div style="color: #bfcbd9;font-size: 14px;">{{item.vehicleModel?item.vehicleModel.name:''}}</div>
-          </div>
-          <div class="day-title flex-jca-fdc" style="padding: 0;" v-for="iitem in  item.temp" :key="iitem.day" >
-            <!--@click="ii.bg?toShowDialog(item, iitem, ii):''"-->
-            <div v-for="ii in  iitem.children" :key="ii.time" class="ii-day" :class="ii.bg" @click="toShowDialog(item, iitem, ii)">
-              <span v-if="ii.timeEtr=='00'" style="position: absolute;color: rgb(255, 255, 255);left: -18px;top: 60px;">{{ii.timeEtr}}</span>
-              <span v-else style="position: absolute;color: #fff;top: -17px;right: 0;">{{ii.timeEtr}}</span>
-              <span style="position: absolute;color: #fff;z-index: 11;">{{ii.timeStr}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="60" align="center" :label="item.day" v-for="item in  tempDayList" :key="item.day">
+          <template scope="scope">
+            <div v-for="iitem in  scope.row.temp" :key="iitem.day" v-if="iitem.time == item.time">
+              <div v-for="ii in  iitem.children"  :key="ii.time" :data-ii="ii.time" :data-endhour="ii.endhour" class="ii-day" :class="ii.bg" @click="toShowDialog(scope.row, iitem, ii)">
+                <span v-if="ii.timeEtr == '00'" style="position: absolute;color: #fff;left: -20px;bottom: 0">{{ii.timeEtr}}</span>
+                <span v-else style="position: absolute;color: #fff;top: -24px;right: 0;">{{ii.timeEtr}}</span>
+                <span style="position: absolute;color: #fff;z-index: 11;left: 0;">{{ii.timeStr}}</span>
+              </div>
             </div>
-          </div>
-        </div>
-      </div>
+          </template>
+        </el-table-column>
+      </el-table>
       <div v-show="!listLoading" class="pagination-container">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
@@ -149,6 +151,9 @@
     flex-direction: column;
     justify-content: space-around;
   }
+  .schedul-tb .el-table .cell{
+    padding: 0;
+  }
   .tip-co{
     padding: 10px;
     margin-right: 10px;
@@ -177,8 +182,9 @@
     background: #d7d7d7;
   }
   .ii-day{
-    height: 4.16%;
-    position: relative;
+    height: 3px;
+    width: 60px;
+    margin-left: -19px;
   }
   .day-title{
     border-right:1px solid #bfcbd9;
@@ -369,6 +375,7 @@
     data() {
       return {
         animate: false,
+        firstTime: "",//排期表-第一个字段名称
         marqueeList: [],
         modalTitle: "创建",
         BASE_API: process.env.BASE_API,
@@ -385,6 +392,7 @@
         list: null,
         total: null,
         listLoading: true,
+        endTime: "",//结束时间为0点时有值
         listQuery: {
           page: 1,
           limit: 10,
@@ -429,6 +437,7 @@
       } else {
         this.nextMonth = 1;
       }
+      this.firstTime = "日期("+this.currentMonth+"~"+this.nextMonth+")"
       this.getTempDayList();
       this.mar = setInterval(this.showMarquee, 2000);
       getAll()
@@ -847,6 +856,7 @@
       setColor(){
         let temp = [];
         this.list.map(function(item){
+          let endTime = '';
           item.temp.map(function(ttemp){
             let children = [];
             let tt = "";//yyyy-MM-dd hh:mm:ss
@@ -878,6 +888,13 @@
                   if(iitem.bookEndDate == tt){
                     if (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4){
                       pp.timeEtr = h;
+                      if(h == "00"){
+                        let cc = new Date(tt);
+                        console.log(cc);
+                        let te = cc.getTime()-24*60*60;
+                        endTime = timestamp2Date(te).substring(0, 13) +":00:00";
+                        console.log(endTime);
+                      }
                     }
                     pp.bg = "";
                   }
@@ -888,32 +905,17 @@
             ttemp.children = children
           });
         });
+        console.log(this.list);
       },
      /**
       * tempDayList
       **/
       getTempDayList(){
         let temp = [];
-        let list = this.list;
-        let currentMonth = getCurrentMonth();
         for(let i = 0; i < 30; i++){
           let t = [];
           let tymd = getymdTimeByDay(i);
-          let children = [];
-          let tt = "";//yyyy-MM-dd hh:mm:ss
-          let h = "";
-          let bg = "";
-          for(let ii = 0; ii < 24; ii ++) {
-            if (ii < 10) {
-              h = "0" + ii;
-              tt = tymd + " 0" + ii + ":00:00";
-            } else {
-              tt = tymd + " " + ii + ":00:00";
-              h = ii;
-            }
-            children.push({time: tt, h: h, bg: bg});
-          }
-          temp.push({day: getTimeByDay(i), month: getMonth(i), children: children});
+          temp.push({day: getTimeByDay(i), month: getMonth(i), time: tymd});
         }
         this.tempDayList = temp;
       },