车辆总览状态列表添加

src/views/vehicleMent/overview/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab1">
     <div class="center1">
-      <container3 title="全厂工房作业信息" :width="1445" :height="975">
+      <container3 title="车辆总览" :width="1405" :height="975">
         <div
           style="
             width: 100%;
@@ -50,14 +50,14 @@
       </container3>
     </div>
     <div class="right1">
-      <container3 title="全厂作业明细" :width="420" :height="975">
+      <container3 title="车辆状态" :width="460" :height="975">
         <div style="max-width: 100%; max-height: 100%; overflow: hidden"></div>
         <vue-seamless-scroll
           ref="seamlessScroll"
           :data="listData"
           class="warp"
           :class-option="{
-            step: 1, // 数值越大速度滚动越快
+            step: 0, // 数值越大速度滚动越快
             limitMoveNum: scrollList1.length > 11 ? scrollList1.length : 11, // 开始无缝滚动的数据量 this.dataList.length
             hoverStop: true, // 是否开启鼠标悬停stop
             direction: 1, // 0向下 1向上 2向左 3向右
@@ -81,16 +81,6 @@
                     ><span class="text-tit">车牌号:</span
                     ><span class="text-val">{{ item.carId }}</span></el-col
                   >
-                  <el-col :span="12"
-                    ><span class="text-tit">实际名称:</span
-                    ><span class="text-val">{{ item.readName }}</span></el-col
-                  >
-                </el-row>
-                <el-row>
-                  <el-col :span="12"
-                    ><span class="text-tit">时间:</span
-                    ><span class="text-val">{{ item.createTime }}</span></el-col
-                  >
                   <el-col :span="12">
                     <span class="text-tit">车辆状态:</span>
                     <span class="text-val level1" v-if="item.status == 0"
@@ -101,6 +91,14 @@
                     >
                   </el-col>
                 </el-row>
+                <el-row>
+                  <el-col :span="24"
+                    ><span class="text-tit">时间:</span
+                    ><span class="text-val">{{
+                      parseTime(item.createTime)
+                    }}</span></el-col
+                  >
+                </el-row>
               </div>
             </li>
           </ul>
@@ -176,6 +174,10 @@ export default {
       this.scrollList1.push(obj);
       this.listData = Array(this.scrollList1.length).fill(0);
       this.$refs.seamlessScroll.reset();
+      setTimeout(() => {
+        this.$refs.seamlessScroll.$refs.wrap.scrollTop =
+          this.$refs.seamlessScroll.$refs.wrap.scrollHeight;
+      }, 0);
     },
     getUrl() {
       this.request({
@@ -214,19 +216,19 @@ export default {
       if (data.isLocationUpdate) {
         this.setDataList(data.isLocationUpdate);
       }
-      // setInterval(() => {
+      // let time = setInterval(() => {
       //   data.isLocationUpdate = Object.assign(
       //     {},
       //     this.data[Math.floor(Math.random() * 5)]
       //   );
-      //   data.isLocationUpdate["createTime"] = this.parseTime(
-      //     new Date(),
-      //     "{h}:{i}:{s}"
-      //   );
+      //   data.isLocationUpdate["createTime"] = +new Date();
+      //   if (this.scrollList1.length > 20) {
+      //     return clearInterval(time);
+      //   }
       //   if (data.isLocationUpdate) {
       //     this.setDataList(data.isLocationUpdate);
       //   }
-      // }, 3000);
+      // }, 1000);
     },
     close: function () {
       console.log("socket已经关闭");
@@ -288,7 +290,7 @@ export default {
 .right1 {
   position: absolute;
   top: 86px;
-  left: 1476px;
+  left: 1436px;
 }
 .bg_box {
   position: absolute;
@@ -301,7 +303,27 @@ export default {
 .warp {
   height: 890px;
   margin: 10px auto 0 auto;
-  overflow: hidden;
+  padding-right: 10px;
+  // overflow: hidden;
+  overflow: auto;
+  // 自定义滚动条
+  &::-webkit-scrollbar {
+    // display: none;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+    // height: 640px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 1);
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    background: rgba(241, 241, 241, 0.1);
+  }
   ul {
     width: 100%;
     height: 100%;
@@ -320,7 +342,7 @@ export default {
       }
       .item-tit {
         text-align: center;
-        width: 100px;
+        width: 140px;
         height: 80px;
         font-size: 18px;
         font-family: PingFangSC-Medium, PingFang SC;