newcpms/ui/src/views/dashboard/WarnChart.vue

<template>
  <div>
    <div class="text-container" :style="{height:height,width:width}">
      <div class="inner-container">
        <p class="text"
           v-for="(text, index) in arr"
           :key="index"
           v-on:mouseover="changeActive"
           v-on:mouseout="removeActive"
           @click="chooseWarn(text)">
          {{text}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { homeList } from "@/api/system/alarmhistory";

  const totalDuration = 2000;

  export default {
    name: "WarnChart",
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '410px'
      }
    },
    data() {
      return {
        arr: [],
        number: 0,
        // 查询参数
        queryParams: {},
      }
    },
    computed: {
      text() {
        return {
          id: this.number,
          val: this.arr[this.number]
        }
      }
    },
    created() {
      this.getList();
    },
    mounted() {
      this.startMove()
    },
    methods: {
      /** 查询报警记录管理列表 */
      getList() {
        this.loading = true;
        homeList(this.queryParams).then(response => {
          this.arr = response;
          //设置文字滚动一轮时间
          let elem = document.querySelector('.inner-container');
          let state = elem.style['animation'];
          let time = this.arr.length * 1.5 + 5
          elem.style['animation'] = 'myMove ' + time + 's linear infinite';
          //设置文字无缝滚动高度
          let param = this.arr.length * 60
          let myFirstkeyframes = "@keyframes myMove{0% {transform: translateY(200px);}100% {transform: translateY(-" + param +"px);}}";
          let style = document.createElement("style");
          style.setAttribute("type", "text/css");
          document.head.appendChild(style);
          const sheet = style.sheet;
          sheet.insertRule(myFirstkeyframes, 0);
          this.loading = false;
        });
      },
      // 鼠标移入
      changeActive() {
        let elem = document.querySelector('.inner-container');
        let state = elem.style['animationPlayState'];
        elem.style['animationPlayState'] = 'paused';
      },
      // 鼠标移出
      removeActive() {
        let elem = document.querySelector('.inner-container');
        let state = elem.style['animationPlayState'];
        elem.style['animationPlayState'] = 'running';
      },
      //点击事件
      chooseWarn(data) {
        var warnType = data.split("（")
        var type = warnType[0];
        if (type === '安全阀清单') {
          this.$router.push("/reliability/safetyvavle");
        }else if (type === "环保批文清单") {
          this.$router.push("/ehs/environapproval");
        }else if (type === "消防批文清单") {
          this.$router.push("/ehs/fireapproval");
        }else if (type === "安全批文清单") {
          this.$router.push("/ehs/safetyapproval");
        }else if (type === "故障管理跟踪") {
          this.$router.push("/reliability/list");
        }else if (type === "MSDS管理") {
          this.$router.push("/ehs/msds");
        }else if (type === "管线清单") {
          this.$router.push("/reliability/pipe");
        }else if (type === "装置程序清单") {
          this.$router.push("/document/plantproglist");
        }else if (type === "PPE发放登记") {
          this.$router.push("/affair/ppe");
        }else if (type === "压力管道" || type === "锅炉证" || type === "加氢工艺" || type === "裂化工艺") {
          this.$router.push("/training/workcertificate");
        }else if (type === "上岗证一览表") {
          this.$router.push("/training/worklicense");
        }else if (type === "灭火器") {
          this.$router.push("/ehs/fireextinguisher");
        }else if (type === "洗眼器") {
          this.$router.push("/ehs/eyewasher");
        }else if (type === "消防水带箱") {
          this.$router.push("/ehs/firehose");
        }else if (type === "消防栓") {
          this.$router.push("/ehs/firehydrant");
        }else if (type === "高压消防炮") {
          this.$router.push("/ehs/highpresfire");
        }else if (type === "自动喷淋系统") {
          this.$router.push("/ehs/autosprinkler");
        }else if (type === "消防竖管") {
          this.$router.push("/ehs/firestandpipe");
        }
      },
      startMove() {
        if (this.remove === true) {
          let timer = setTimeout(() => {
            if (this.number === 3) {
              this.number = 0;
            } else {
              this.number += 1;
            }
            this.startMove();
          }, totalDuration)
        }
      },
    },
  }
</script>

<style scoped>
  .text-container {
    line-height: 30px;
    /*border: 1px solid cornflowerblue;*/
    overflow: hidden;
  }
  .text {
    margin: 0 0 0 10px;
    cursor: pointer;  /*鼠标悬停变小手*/
    color: #ffffff;
  }
  p:hover {
    background-color: #296b9bb5;
  }
  .inner-container {
    /*animation: myMove 10s linear infinite;*/
    animation-fill-mode: forwards;
  }
  /*文字无缝滚动*/
  /*@keyframes myMove {
    0% {
      transform: translateY(200px);
    }
    100% {
      transform: translateY(-400px);
    }
  }*/
  /*文字停顿滚动*/
  @keyframes myMove2 {
    0% {
      transform: translateY(0);
    }
    10% {
      transform: translateY(-30px);
    }
    20% {
      transform: translateY(-30px);
    }
    30% {
      transform: translateY(-60px);
    }
    40% {
      transform: translateY(-60px);
    }
    50% {
      transform: translateY(-90px);
    }
    60% {
      transform: translateY(-90px);
    }
    70% {
      transform: translateY(-120px);
    }
    80% {
      transform: translateY(-120px);
    }
    90% {
      transform: translateY(-150px);
    }
    100% {
      transform: translateY(-150px);
    }
  }

</style>