日前调度断面列表、联络线列表滚动

vpp-ui/src/views/vpp/rqdd/rqdddm.vue

@@ -1,32 +1,61 @@
 <template>
   <div class="table-wrapper">
     <div class="table-box">
-      <el-table
-        :cell-style="{border:0,color:'#fff',background:'none'}"
-        :data="tableData"
-        :header-cell-style="{color:'#fff'}"
-        :row-style="{background:'none'}"
-        size="mini"
-        style="font-size: 15px"
-      >
-        <el-table-column align="center" label="断面名称" prop="name" width="180px"></el-table-column>
-        <el-table-column :formatter="timeFormatter" align="center" label="时刻" prop="time">
-        </el-table-column>
-        <el-table-column align="center" label="有功" prop="ppower"></el-table-column>
-        <el-table-column align="center" label="负限" prop="limitLow"></el-table-column>
-        <el-table-column align="center" label="正限" prop="limitUp"></el-table-column>
-        <el-table-column :formatter="stateFormatter" align="center" label="区间" prop="state">
-        </el-table-column>
-      </el-table>
+      <div class="el-table1">
+        <el-table
+          :cell-style="{border:0,color:'#fff'}"
+          :header-cell-style="{color:'#fff'}"
+          :row-style="{background:'none'}"
+          size="mini"
+          style="font-size: 15px"
+        >
+          <template slot="empty">
+            <span></span>
+          </template>
+          <el-table-column align="center" label="断面名称" prop="name" width="180px"></el-table-column>
+          <el-table-column :formatter="timeFormatter" align="center" label="时刻" prop="time">
+          </el-table-column>
+          <el-table-column align="center" label="有功" prop="ppower"></el-table-column>
+          <el-table-column align="center" label="负限" prop="limitLow"></el-table-column>
+          <el-table-column align="center" label="正限" prop="limitUp"></el-table-column>
+          <el-table-column :formatter="stateFormatter" align="center" label="区间" prop="state">
+          </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="font-size: 15px"
+            :show-header="false"
+          >
+            <el-table-column align="center" label="断面名称" prop="name" width="180px"></el-table-column>
+            <el-table-column :formatter="timeFormatter" align="center" label="时刻" prop="time">
+            </el-table-column>
+            <el-table-column align="center" label="有功" prop="ppower"></el-table-column>
+            <el-table-column align="center" label="负限" prop="limitLow"></el-table-column>
+            <el-table-column align="center" label="正限" prop="limitUp"></el-table-column>
+            <el-table-column :formatter="stateFormatter" align="center" label="区间" prop="state">
+            </el-table-column>
+          </el-table>
+        </vue-seamless-scroll>
+      </div>
+
+
     </div>
   </div>
 </template>
 
 <script>
-
+import vueSeamlessScroll from "vue-seamless-scroll";
 import {listDayAheadInterFaceData} from "@/api/vpp/ahead";
 
 export default {
+  components: { vueSeamlessScroll },
   data() {
     return {
       table: {
@@ -35,6 +64,20 @@ export default {
       tableData: []
     }
   },
+  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: {
     listDayAheadInterFaceData() {
       this.table.type = 1
@@ -80,25 +123,28 @@ export default {
   background-color: #4ded68;
 }
 
-@font-face {
-  font-family: AliMaMa;//自定义字体名称
-  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
+.el-table__row > td {
+  border: none;
 }
 
+.el-table::before {
+  height: 0px;
+}
 
-/deep/ .el-table tr {
-  background: none;
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
 }
 
 .table-wrapper {
-  width: 90%;
-  height: 99%;
+  //width: 1483px;
+  //padding-left: 20px;
 
   .table-box {
     //min-height: 600px;
     margin-left: 6%;
     margin-top: 8%;
-    width: 100%;
+    width: 89%;
     height: 99%;
     background-size: cover;
   }
@@ -115,6 +161,9 @@ export default {
     //font-size: 17px;
   }
 
+  /*  /deep/ .el-table__header {
+      background: url(../Articles/img/bg1.png);
+    }*/
 
   ///deep/ .el-table th.el-table__cell.is-leaf {
   //  border-bottom: none;
@@ -124,6 +173,7 @@ export default {
     background-color: rgb(103, 118, 49) !important
   }
 
+
   /deep/ .el-col {
     padding: 0;
     display: inline-block;
@@ -150,13 +200,27 @@ export default {
     width: 15%;
   }
 
+  /deep/ .el-input__inner:nth-child(1) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 126px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 175px;
+  }
 
   /deep/ .el-icon-arrow-up {
     transform: rotateZ(0deg);
 
   }
 
-
   /deep/ .el-icon-arrow-up:before {
     content: url(../../../views/vpp/Articles/img/xiala2.png);
   }
@@ -170,46 +234,63 @@ export default {
     content: url(../Articles/img/riqi.png);
   }
 
-
-  /deep/ .el-table {
-    background: url(../Articles/img/组2460.png) no-repeat;
-    background-position-x: 30%;
-    background-position-y: 30%;
-    background-size: 100% 100%;
-    height: 95%;
+  /deep/ .el-table__header tr {
+    background: none;
     //height: 49px;
   }
 
-
-  .el-table__row > td {
-    border: none;
-  }
-
-  .el-table::before {
-    height: 0px;
-  }
-
   /deep/ .el-table th.el-table__cell {
     background: none;
     border: 0px;
   }
 
-  /deep/ .el-table tr.el-table__cell {
-    background: none;
-    border: 0px;
-  }
-
-  /deep/ .el-table .el-table__body {
-    -webkit-border-vertical-spacing: 13px; // 垂直间距
+  /deep/ .el-table__body {
+    //-webkit-border-vertical-spacing: 13px; // 垂直间距
   }
 
   /deep/ .el-form-item__content {
     text-align: left;
   }
 
-  /deep/ .el-table, .el-table__expanded-cell {
 
+  .el-table1 {
+    background: url(../Articles/img/组2460.png) no-repeat;
+    background-position-x: 30%;
+    background-position-y: 30%;
+    background-size: 100% 100%;
+    min-height: 315px;
+  }
+  /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: 275px;
+    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>

vpp-ui/src/views/vpp/rqdd/rqddllx.vue

@@ -20,7 +20,7 @@
           <el-table-column :formatter="stateFormatter" align="center" label="区间" prop="state">
           </el-table-column>
         </el-table>
-        <div class="div-relative">
+
           <vue-seamless-scroll :data="tableData" class="warp" :class-option="classOption">
             <el-table
               :cell-style="{border:0,color:'#fff'}"
@@ -41,7 +41,6 @@
               </el-table-column>
             </el-table>
           </vue-seamless-scroll>
-        </div>
       </div>