lanju-front/src/views/cs/index3.vue

<template>
  <div class="bg">
    <div class="title">白坯车间数字应用大屏</div>

    <div class="table1">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;">
          告警编号
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          告警类型
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          告警单元
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          操作
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="{...chart1TableOption,limitMoveNum:10}"
        :data="table1Data"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in table1Data"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTable">
              {{ item.no }}
            </div>
            <div
              class="scrollTable">
              {{ item.alarmInfoType === '1' ? '设备报警' : '' }}
              {{ item.alarmInfoType === '2' ? '监控单元报警' : '' }}
              {{ item.alarmInfoType === '3' ? '离线报警' : '' }}
              {{ item.alarmInfoType === '4' ? '电子围栏' : '' }}
            </div>
            <div
              class="scrollTable">
              {{ item.location }}
            </div>
            <div class="scrollTable" style="width: 25%">
              <el-button v-if="item.status === '0'" size="mini" type="primary" @click="dispose(item)">处理</el-button>
              <span v-else>已处理</span>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>

import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    Chart,
    vueSeamlessScroll,
  },
  data() {
    return {
      chart1TableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        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: 0,
        autoPlay: false,
        navigation: false
      },
      table1Data: []
    }
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="less">
.bg {
  background-image: url("~@/assets/board/cs3/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 3%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 2vw;
  color: #fff;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.scrollTable {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: 25%;
}

.table1 {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 20%;
  height: 40%;
}
</style>