首页信息总览列表滚动

vpp-ui/src/views/vpp/xndc/modules/left-top.vue

@@ -1,43 +1,99 @@
 <template>
   <div class="table-wrapper">
     <div class="table-box">
-      <!--      <div class="title"-->
-      <!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
-      <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
-      <!--      </div>-->
-      <el-table
-        :cell-style="{border:0,color:'#fff'}"
-        :data="tableData"
-        :header-cell-style="{color:'#fff'}"
-        :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
-        :show-header="false"
-        size="mini"
-        style="background: none;margin-top: -1%; font-size: 15px"
-      >
-        <el-table-column label="信息" prop="info">
-          <template slot-scope="scope">
-            <div style="height: 25px">
-              <img :height="20" :width="20" alt=""
-                   src="../../../../assets/vpp/images/shape1.png"
-                   style="position:absolute;top: 8px">
-              <img :height="25" :width="535"
-                   alt=""
-                   src="../../../../assets/vpp/images/bg/bg-table-row.png" style="position:absolute;left: 35px">
-              <span style="position:absolute;top:8px;left: 43px">{{ scope.row }}</span>
-            </div>
+      <div class="el-table1">
+        <el-table
+          :cell-style="{border:0,color:'#fff'}"
+          :header-cell-style="{color:'#fff'}"
+          :row-style="{background:'none'}"
+          size="mini"
+          style="background: none;margin-top: -1%; font-size: 15px"
+          :show-header="false"
+
+        >
+          <template slot="empty">
+            <span></span>
           </template>
-        </el-table-column>
-      </el-table>
+          <el-table-column label="信息" prop="info">
+            <template slot-scope="scope">
+              <div style="height: 25px">
+                <img :height="20" :width="20" alt=""
+                     src="../../../../assets/vpp/images/shape1.png"
+                     style="position:absolute;top: 8px">
+                <img :height="25" :width="535"
+                     alt=""
+                     src="../../../../assets/vpp/images/bg/bg-table-row.png" style="position:absolute;left: 35px">
+                <span style="position:absolute;top:8px;left: 43px">{{ scope.row }}</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <vue-seamless-scroll :data="tableData" class="warp" :class-option="classOption">
+          <el-table
+            :cell-style="{border:0,color:'#fff'}"
+            :data="tableData"
+            :header-cell-style="{color:'#fff'}"
+            :row-style="{background:'none'}"
+            class="el-table2"
+            size="mini"
+            style="background: none;margin-top: -1%; font-size: 15px"
+            :show-header="false"
+          >
+            <el-table-column label="信息" prop="info">
+              <template slot-scope="scope">
+                <div style="height: 25px">
+                  <img :height="20" :width="20" alt=""
+                       src="../../../../assets/vpp/images/shape1.png"
+                       style="position:absolute;top: 8px">
+                  <img :height="25" :width="535"
+                       alt=""
+                       src="../../../../assets/vpp/images/bg/bg-table-row.png" style="position:absolute;left: 35px">
+                  <span style="position:absolute;top:8px;left: 43px">{{ scope.row }}</span>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </vue-seamless-scroll>
+      </div>
+
+
+<!--      <el-table-->
+<!--        :cell-style="{border:0,color:'#fff'}"-->
+<!--        :data="tableData"-->
+<!--        :header-cell-style="{color:'#fff'}"-->
+<!--        :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"-->
+<!--        :show-header="false"-->
+<!--        size="mini"-->
+<!--        style="background: none;margin-top: -1%; font-size: 15px"-->
+<!--      >-->
+<!--        <el-table-column label="信息" prop="info">-->
+<!--          <template slot-scope="scope">-->
+<!--            <div style="height: 25px">-->
+<!--              <img :height="20" :width="20" alt=""-->
+<!--                   src="../../../../assets/vpp/images/shape1.png"-->
+<!--                   style="position:absolute;top: 8px">-->
+<!--              <img :height="25" :width="535"-->
+<!--                   alt=""-->
+<!--                   src="../../../../assets/vpp/images/bg/bg-table-row.png" style="position:absolute;left: 35px">-->
+<!--              <span style="position:absolute;top:8px;left: 43px">{{ scope.row }}</span>-->
+<!--            </div>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--      </el-table>-->
+
+
     </div>
   </div>
 </template>
 
 <script>
-
+import vueSeamlessScroll from "vue-seamless-scroll";
 import {listDayAheadMessageAppend, listRealTimeMessageAppend} from "@/api/vpp/message";
 
 
 export default {
+  components: { vueSeamlessScroll },
   data() {
     return {
       table: {
@@ -54,6 +110,20 @@ export default {
       tableData2: [],
     }
   },
+  computed:{
+    classOption() {
+      return {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 500, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
   methods: {
     listDayAheadMessageAppend() {
       this.table.type = 1
@@ -62,7 +132,7 @@ export default {
         listRealTimeMessageAppend(this.table).then(rep => {
           this.tableData1 = rep.rows
           this.tableData = this.tableData1.concat(this.tableData2)
-          this.tableData = this.tableData.slice(0, 6)
+          // this.tableData = this.tableData.slice(0, 6)
         });
       });
     },
@@ -206,5 +276,44 @@ export default {
   .el-table__row > td {
     border: none;
   }
+
+  .el-table1 {
+    background-position-x: 30%;
+    background-position-y: 30%;
+    background-size: 100% 100%;
+
+  }
+  /deep/ .el-table1 .el-table{
+    background: transparent;
+  }
+  /deep/ .el-table1 .el-table__empty-block{
+    min-height: 0px;
+  }
+
+  /deep/ .el-table2 {
+    background-color:transparent;
+    background-position-x: 30%;
+    background-position-y: 30%;
+    background-size: 100% 100%;
+  }
+
+  .warp {
+    margin: 0 auto;
+    overflow: hidden;
+    height: 245px;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
 }
 </style>