VPP/vpp-ui/src/views/vpp/xndc/modules/center-middle.vue

<template>
  <div class="table-wrapper">
    <div class="table-box">
      <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: {
        type: 2,
      },
      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 => {
        this.tableData = res.rows
      });
    },
    stateFormatter(row, column) {
      if (row.state == 1) {
        return "正常"
      } else if (row.state == 2) {
        return "越限"
      }
    },
    timeFormatter(row, column) {
      return this.formatDate(row.time)
    },
    formatDate(date1) {
      let date = new Date(date1);
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      const hours = ('0' + date.getHours()).slice(-2);
      const minutes = ('0' + date.getMinutes()).slice(-2);
      const seconds = ('0' + date.getSeconds()).slice(-2);
      //return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return `${hours}:${minutes}`;
    }
  },
  mounted() {
    this.listRealTimeInterFaceData()
  }
}
</script>

<style lang="less" scoped>

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4ded68;
}

@font-face {
  font-family: AliMaMa;//自定义字体名称
  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
}

.table-wrapper {
  //width: 1483px;
  //padding-left: 20px;

  .table-box {
    //min-height: 600px;
    margin-left: 6%;
    margin-top: 5%;
    width: 525px;
    background-size: cover;
  }

  /deep/ .el-form-item__label {
    color: #fff;
    //font-size: 17px;
  }

  /deep/ .el-input__inner {
    background-color: rgba(14, 73, 131);
    border: 1px solid rgb(64, 153, 255);
    //height: 34px;
    //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;
  //}

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgb(103, 118, 49) !important
  }

  /deep/ .el-col {
    padding: 0;
    display: inline-block;
    position: relative;
  }

  /deep/ .el-col:nth-child(1) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(2) {
    width: 22%;
  }

  /deep/ .el-col:nth-child(3) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(4) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(5) {
    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(../../Articles/img/xiala2.png);
  }

  /deep/ .el-input__prefix {
    right: -60px;
    padding-top: 3px;
  }

  /deep/ .el-icon-date:before {
    content: url(../../Articles/img/riqi.png);
  }

  /deep/ .el-table__header tr {
    background: url(../../../../assets/vpp/images/dialog/t-line.png) no-repeat;
    background-size: cover;
    //height: 49px;
  }

  /deep/ .el-table__body {
    //-webkit-border-vertical-spacing: 13px; // 垂直间距
  }

  /deep/ .el-form-item__content {
    text-align: left;
  }

  /deep/ .el-table, .el-table__expanded-cell {
    background-color: rgb(1, 40, 81);
  }

  /deep/ .el-table th.el-table__cell {
    background: none;
    border: 0;
  }

  .el-table::before {
    height: 0;
  }

  .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>