smsb-web-develop/src/views/device/detail/components/DownloadProgress.vue

<template>
  <div class="c-progress-list">
    <div
      v-for="file in files"
      :key="file.id"
      class="l-flex--row c-progress-list__item"
    >
      <div class="l-flex__none c-progress-list__type" />
      <div class="l-flex__auto l-flex--col">
        <div class="c-progress-list__info">
          <div class="l-flex__auto c-progress-list__name u-ellipsis">{{ file.name }}</div>
          <div class="l-flex__none c-progress-list__tip">{{ file.tip }}</div>
          <div class="l-flex__none c-progress-list__icon">
            <template v-if="file.complete">
              <i
                v-if="file.success"
                class="el-icon-success u-color--success"
              />
              <i
                v-else
                class="el-icon-error u-color--error"
              />
            </template>
          </div>
        </div>
        <el-progress
          :class="[file.status]"
          :percentage="file.percentage"
          :stroke-width="2"
          :show-text="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  addListener,
  removeListener
} from '../monitor'

export default {
  name: 'DownloadProgress',
  data () {
    return {
      files: []
    }
  },
  created () {
    addListener('download', this.onUpdate)
  },
  beforeDestroy () {
    removeListener('download', this.onUpdate)
  },
  methods: {
    onUpdate (files) {
      this.files = files
    }
  }
}
</script>

<style lang="scss" scoped>
.c-progress-list {
  display: flex;
  flex-direction: column;
  overflow: auto;

  &__item {
    padding: 6px 16px 6px 0;
    color: $gray--dark;
    border-bottom: 1px solid $gray--light;

    &:first-child {
      border-top: 1px solid $gray--light;
    }
  }

  &__type {
    margin-right: $spacing;
  }

  &__info {
    display: flex;
    align-items: flex-end;
    padding-bottom: 6px;
    line-height: 1;
  }

  &__name {
    min-width: 0;
    color: $gray--dark;
    font-size: 16px;
  }

  &__tip {
    min-width: 90px;
    padding-left: 10px;
    font-size: 12px;
    text-align: right;
  }

  &__icon {
    width: 50px;
    text-align: right;
  }

  .is-processing {
    ::v-deep {
      .el-progress-bar__outer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-size: 3em 3em;
        background-image: linear-gradient(
          90deg,
          transparent 0em,
          transparent 1em,
          $blue 1em,
          $blue 2em,
          transparent 2em,
          transparent 3em,
          $blue 3em
        );
        animation: move 0.3s linear infinite;
      }

      .el-progress-bar__inner {
        background-color: $blue;
      }
    }
  }
}

@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 3em 0;
  }
}
</style>