YZProjectCloud/yanzhu-bigscreen/src/views/machmater/processControlBar.vue

<template>
  <div @mouseover="MouseEnter" @mouseout="MouseLeave" class="process-control-bar">
    <div class="output-content" ref="process" :style="{ height: height + 'px' }">
      <div class="process-for" v-for="(item, i) in forData" :key="i">
        <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 0 5px">
          <div class="text-row1">
            <img src="/cdn/images/arr_up_green.png" width="12" height="8" />
            <span style="color: #fcbc02; font-style: italic; padding-right: 5px">No.{{ i + 1 }}</span>
            <span style="color: #c6d9fa">{{ item.name }}</span>
          </div>
          <div style="color: #6c829a" class="text-row2">
            <span style="color: #c6d9fa">{{ item.total }}</span> {{ item.unit }}
            <span>（</span>
            <span style="color: #52adf4">{{ item.yesMonitor }}</span> {{ item.unit }} / <span style="color: #4677ff">{{ item.notMonitor }}</span> {{ item.unit }}
            <span>）</span>
          </div>
        </div>
        <div style="padding-top: 8px">
          <div style="height: 6px; background: rgba(22, 203, 115, 0.1); display: flex; align-items: center">
            <div :style="{ width: item.yesWidth + '%', height: '6px', background: '#52adf4' }"></div>
            <div :style="{ width: item.notWidth + '%', height: '6px', background: '#4677ff' }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
    },
    height: {
      type: Number,
    },
    number: {
      type: Number,
    },
  },
  data() {
    return {
      forData: [],
      interval: "",
      index: 0,
    };
  },
  mounted() {
    //this.init()
  },
  methods: {
    init() {
      this.getData();
      //计划时间
    },
    getData() {
      var data = this.list;
      var max = 0;
      for (let i = 0; i < data.length; i++) {
        if (max < Number(data[i].total)) {
          max = Number(data[i].total);
        }
      }
      data.map((x) => {
        x.yesWidth = (Number(x.yesMonitor) / max) * 100;
        x.notWidth = (Number(x.notMonitor) / max) * 100;
        return x;
      });
      this.forData = data;
      this.$refs.process.scrollTop = 0;
      this.index = 0;
      this.interval = setInterval(this.scroll, 5000);
    },
    scroll() {
      let els=this.$el.querySelectorAll(".process-for");
      if(els.length==0){
        return;
      }
      let offsetHeight = els[0].offsetHeight;
      if (this.index == this.forData.length - this.number) {
        this.index = 0;
      } else {
        this.index += 1;
      }
      $(this.$refs.process).animate({ scrollTop: offsetHeight * this.index + "px" });
    },
    MouseEnter() {
      //鼠标移入停止滚动
      clearInterval(this.interval);
    },
    MouseLeave() {
      //鼠标离开继续滚动
      this.interval = setInterval(this.scroll, 5000);
    },
  },
  watch: {
    list: function (n, o) {
      this.init();
    },
  },
};
</script>

<style lang="less">
.process-control-bar {
  .process-for {
    height: 60px;
    font-size:14px;
  }
  @media (min-width: 1921px) and (max-width: 2560px) {
    .process-for {
      height: 70px;
      margin: 20px 0px;
      font-size: 18px;
    }
  }

  @media (min-width: 2561px) {
    .process-for {
      height: 80px;
      margin: 40px 0px;
      font-size: 24px;
    }
  }
}
</style>