|
|
@@ -1,31 +1,57 @@
|
|
|
<template>
|
|
|
<div class="table-wrapper">
|
|
|
<div class="table-box">
|
|
|
- <el-table
|
|
|
- :cell-style="{border:0,color:'#fff'}"
|
|
|
- :data="tableData"
|
|
|
- :header-cell-style="{color:'#fff'}"
|
|
|
- :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
|
|
|
- size="mini"
|
|
|
- style="background: none;font-size: 15px"
|
|
|
- >
|
|
|
- <el-table-column align="center" label="名称" prop="name" width="100px"></el-table-column>
|
|
|
- <el-table-column :formatter="timeFormatter" align="center" label="时刻" prop="time"/>
|
|
|
- <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="100px"></el-table-column>
|
|
|
+ <el-table-column :formatter="timeFormatter" align="center" label="时刻" prop="time"/>
|
|
|
+ <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="100px"></el-table-column>
|
|
|
+ <el-table-column :formatter="timeFormatter" align="center" label="时刻" prop="time"/>
|
|
|
+ <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 {listRealTimeInterFaceData} from "@/api/vpp/ahead";
|
|
|
|
|
|
export default {
|
|
|
+ components: { vueSeamlessScroll },
|
|
|
data() {
|
|
|
return {
|
|
|
table: {
|
|
|
@@ -34,6 +60,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: {
|
|
|
listRealTimeInterFaceData() {
|
|
|
listRealTimeInterFaceData(this.table).then(res => {
|
|
|
@@ -208,5 +248,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: 175px;
|
|
|
+ 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>
|
xusl