smsb-web-develop/src/views/visualization/v1/SystemLoad.vue

<template>
  <Box title="系统实时负载">
    <div class="l-flex__fill l-flex--col c-load">
      <div class="l-flex c-duration u-bold">
        系统运行时长<span class="c-duration__num">{{ diffDay }}</span>天
      </div>
      <div class="l-flex__none l-flex--row c-load__header">
        <div class="l-flex__fill">服务器</div>
        <div class="l-flex__fill">CPU使用率</div>
        <div class="l-flex__fill">内存使用率</div>
        <div class="l-flex__fill">磁盘空间使用率</div>
        <div class="l-flex__fill col__net">网络</div>
        <div class="l-flex__fill">状态</div>
      </div>
      <status-wrapper v-if="!tableData.length" />
      <template v-else>
        <div class="l-flex__fill u-relative">
          <div class="c-load__list">
            <vue-seamless-scroll
              :data="tableData"
              :class-option="classOption"
            >
              <div
                v-for="item in tableData"
                :key="item.id"
                class="l-flex--row c-load__item"
              >
                <div class="l-flex__fill">
                  <auto-text
                    class="u-text--center"
                    :text="item.ip"
                  />
                </div>
                <div class="l-flex__fill item__chart l-flex--col">
                  <LineChart
                    class="l-flex__fill"
                    :list="item.cpu"
                    :color-type="0"
                  />
                </div>
                <div class="l-flex__fill item__chart l-flex--col">
                  <LineChart
                    class="l-flex__fill"
                    :list="item.memory"
                    :color-type="1"
                  />
                </div>
                <div class="l-flex__fill item__chart l-flex--col">
                  <LineChart
                    class="l-flex__fill"
                    :list="item.disk"
                    :color-type="2"
                  />
                </div>
                <div class="l-flex__fill item__chart l-flex--col col__net">
                  <LineChart
                    class="l-flex__fill"
                    :list="item.net"
                    :color-type="3"
                    unit="Kbps"
                  />
                </div>
                <div class="l-flex__fill">
                  <auto-text
                    class="u-text--center"
                    :text="item.status === 1 ? '正常' : '离线'"
                    :style="{
                      color: item.status === 1 ? '#04FF98' : '#F40645',
                    }"
                  />
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </template>
    </div>
  </Box>
</template>

<script>
import Box from './Box'
import LineChart from './LineChart'
import VueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'SystemLoad',
  components: {
    Box,
    VueSeamlessScroll,
    LineChart
  },
  props: {
    deviceList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.$count = 0
    return {
      loaded: false,
      error: false,
      classOption: {
        step: 0.5,
        hoverStop: false
      },
      initDay: '2022-1-1',
      tableData: []
    }
  },
  computed: {
    diffDay () {
      return Math.floor(
        (Date.parse(new Date()) - Date.parse(this.initDay)) / (1000 * 3600 * 24)
      )
    }
  },
  created () {
    this.initData()
  },
  methods: {
    getRandomData (value = Math.floor(50 + Math.random() * 10), limit = true) {
      let gap = Math.floor(Math.random() * 20 - 10)
      if (!limit) {
        gap *= 3
      }
      value += gap
      if (limit) {
        if (value < 0) {
          value = 10
        }
        if (value > 100) {
          value = 90
        }
      } else if (value < 0) {
        value = 10
      }
      this.$count++
      return [this.$count, value]
    },
    getChartData (num, limit) {
      const arr = [this.getRandomData(num, limit)]
      for (let index = 0; index < 30; index++) {
        arr.push(this.getRandomData(arr[index][1], limit))
      }
      return arr
    },
    initData () {
      this.loaded = true
      this.tableData = Array.from({ length: 2 }, (i, index) => {
        return {
          ip: ['主服务器', '副服务器'][index],
          cpu: this.getChartData(),
          memory: this.getChartData(),
          disk: this.getChartData(),
          net: this.getChartData(700, false),
          status: 1,
          id: index
        }
      })
      this.updateValue()
    },
    updateValue () {
      const map = ['cpu', 'memory', 'disk', 'net']
      setTimeout(() => {
        this.tableData = this.tableData.map(i => {
          for (const key of map) {
            i[key].shift()
            i[key].push(
              this.getRandomData(i[key][i[key].length - 1][1], key !== 'net')
            )
          }
          return i
        })
        this.updateValue()
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.c-load {
  &__header {
    color: #9ea9cd;
    background-color: #313a5a;
  }
  .c-duration {
    font-size: 24px;
    color: #ffffff;
    justify-content: center;
    align-items: flex-end;
    margin: 5px 0 50px;
    &__num {
      margin-left: 60px;
      margin-right: 15px;
      transform: translateY(14px);
      font-size: 72px;
      color: #00d1ff;
    }
  }
  &__list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &__header,
  &__item {
    font-size: 18px;
    line-height: 60px;
    height: 60px;
    text-align: center;
  }
  &__item {
    color: #ffffff;
    border-bottom: 1px solid #313a5a;
    height: 72px;
    line-height: 72px;
  }
  .item__chart {
    height: 100%;
  }
  .col__net {
    flex: 1 1 50px;
  }
}
</style>