车辆总览状态列表添加

src/views/vehicleMent/overview/components/container1/index.vue

@@ -1,102 +0,0 @@
-
-
-<template>
-  <div class="container1">
-    <div class="tit">
-      <rocketTit>{{ title }}</rocketTit>
-      <div class="datePicker">
-        <slot name="datePicker"></slot>
-      </div>
-    </div>
-    <div class="content">
-      <div class="snap">
-        <slot name="snap"></slot>
-      </div>
-
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import rocketTit from "../../../components/rocketTit/index.vue";
-
-export default {
-  name: "container1",
-  components: {
-    rocketTit,
-  },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {};
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.container1 {
-  display: flex;
-  flex-direction: column;
-  width: 537px;
-  height: 597px;
-  background-image: url(./bg.png);
-  background-size: cover;
-  color: #ffffff;
-  font-size: 16px;
-  font-family: PingFangSC-Semibold, PingFang SC;
-  font-weight: 600;
-
-  .tit {
-    padding: 16px 16px 16px 24px;
-    position: relative;
-    .datePicker {
-      position: absolute;
-      right: 16px;
-      top: 12px;
-
-      ::v-deep .el-date-editor {
-        border-radius: 0;
-        box-shadow: none !important;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        vertical-align: middle;
-        color: #fff;
-        background-color: transparent;
-        .el-range-input,
-        .el-range-separator {
-          color: #fff;
-        }
-        .el-range-editor.is-active {
-          border-color: #fff !important;
-        }
-
-        input {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
-  .content {
-    flex: 1;
-    padding: 2px;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-    .snap {
-      position: absolute;
-      top: 20px;
-      left: 25px;
-      font-weight: 300;
-    }
-  }
-}
-</style>

src/views/vehicleMent/overview/components/container2/index.vue

@@ -1,102 +0,0 @@
-
-
-<template>
-  <div class="container2">
-    <div class="tit">
-      <rocketTit>{{ title }}</rocketTit>
-      <div class="datePicker">
-        <slot name="datePicker"></slot>
-      </div>
-    </div>
-    <div class="content">
-      <div class="snap">
-        <slot name="snap"></slot>
-      </div>
-
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import rocketTit from "../../../components/rocketTit/index.vue";
-
-export default {
-  name: "container2",
-  components: {
-    rocketTit,
-  },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {};
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.container2 {
-  display: flex;
-  flex-direction: column;
-  width: 537px;
-  height: 307px;
-  background-image: url(./bg.png);
-  background-size: cover;
-  color: #ffffff;
-  font-size: 16px;
-  font-family: PingFangSC-Semibold, PingFang SC;
-  font-weight: 600;
-
-  .tit {
-    padding: 16px 16px 16px 24px;
-    position: relative;
-    .datePicker {
-      position: absolute;
-      right: 16px;
-      top: 12px;
-
-      ::v-deep .el-date-editor {
-        border-radius: 0;
-        box-shadow: none !important;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        vertical-align: middle;
-        color: #fff;
-        background-color: transparent;
-        .el-range-input,
-        .el-range-separator {
-          color: #fff;
-        }
-        .el-range-editor.is-active {
-          border-color: #fff !important;
-        }
-
-        input {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
-  .content {
-    flex: 1;
-    padding: 2px;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-    .snap {
-      position: absolute;
-      top: 20px;
-      left: 25px;
-      font-weight: 300;
-    }
-  }
-}
-</style>

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(
+      //   data.isLocationUpdate["createTime"] = +new Date();
-      //     new Date(),
+      //   if (this.scrollList1.length > 20) {
-      //     "{h}:{i}:{s}"
+      //     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;