首页告警信息滚动

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

@@ -5,6 +5,8 @@
       <!--           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>-->
+      <div @click="clickProps($event)">
+      <vue-seamless-scroll :data="tableData" class="warp" :class-option="classOption">
       <el-table
         :cell-style="{border:0,color:'rgba(255,255,255,1)'}"
         :data="tableData"
@@ -13,7 +15,6 @@
         :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
         :show-header="false"
         style="background: none;margin-top: -1%;font-size: 15px"
-        @row-click="handleRowClick"
       >
         <el-table-column align="center" label="信息" prop="info">
           <template slot-scope="scope">
@@ -35,6 +36,8 @@
           </template>
         </el-table-column>
       </el-table>
+      </vue-seamless-scroll>
+      </div>
     </div>
     <img :height="50" :width="50"
          alt="" src="../../../../assets/vpp/images/shape5.png"
@@ -93,11 +96,12 @@
 </template>
 
 <script>
-
+import vueSeamlessScroll from "vue-seamless-scroll";
 import {listRealTimePlanDataCount, listRealTimePredictDataCount} from "@/api/vpp/time";
 import {listDayAheadMessageAlarm, listRealTimeMessageAlarm} from "@/api/vpp/message";
 
 export default {
+  components: { vueSeamlessScroll },
   data() {
     return {
       form: {
@@ -116,7 +120,24 @@ export default {
       warningData: []
     }
   },
+  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: {
+    clickProps(e){
+      this.dialogShow = true
+    },
     listRealTimePlanData() {
       this.table.timeNum = 1
       listRealTimePlanDataCount(this.table).then(res => {
@@ -133,9 +154,7 @@ export default {
       listDayAheadMessageAlarm().then(res => {
         listRealTimeMessageAlarm().then(resp => {
           this.tableData = resp.rows.concat(res.rows)
-          if (this.tableData.length > 6) {
-            this.tableData = this.tableData.slice(0, 3)
-          }
+
         });
       });
     },
@@ -368,5 +387,24 @@ export default {
     display: flex;
     justify-content: space-between;
   }
+
+  .warp {
+    margin: 0 auto;
+    overflow: hidden;
+    height: 158px;
+    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>