yiliangyiyun-pc/src/components/ShipboardInitializationSchedule/index.vue

/*
 * @Author: Yolo
 * @Last Modified by: Yolo
 * @Last Modified time: 2020-09-03 17:26:35
 * @Last Modified time: 2020-10-28 15:01:45
 */
<template>
  <div class="schedule"
       v-if="isShowSchedule">
    <div class="img"></div>
    <div class="info"
         v-if="isShowInfo">
      <p> {{ info.title }} </p>
      <div class="info__footer">
        <el-button icon="iconfont iconchushihua"
                   @click="btnClick">
          {{ info.btnText }}
        </el-button>
      </div>
    </div>
    <div class="progress"
         v-if="!isShowInfo">
      <span>
        {{ getMessage }}
      </span>
      <div class="progress——bar"
           v-if="isProgress">
        <el-progress :percentage="progress.percentage"
                     :stroke-width="8"
                     :format="format"
                     :color="progress.color"></el-progress>
        <span :class="progress.errorMsg ? 'errorMsg' : 'msg'">
          {{ progress.errorMsg ? progress.errorMsg : progress.msg }}
        </span>
      </div>
      <div class="progress——loadding">
        <img src="./image/loading2.gif"
             v-if="isShowLoadding" />
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus, fmoney } from 'base-core-lib'
import {
  getProgressPercentage,
  getInitDb,
  getIsShowDialog
} from '@/model/indexRx'
import { mapActions } from 'vuex'
export default {
  name: 'ShipboardInitializationSchedule',
  props: {},
  data () {
    return {
      isShowSchedule: false,
      isShowInfo: true,
      isProgress: false,
      isShowLoadding: false,
      interval: '',
      reStart: '',
      info: {
        title:
          '已经完成安装船舶管理系统客户端请您点击下方按钮系统将为您准备初始化数据',
        btnText: '数据初始化'
      },
      progress: {
        initTip: '正在进行数据初始化...',
        percentage: 0,
        successTip: '数据初始化完成，正在启动服务，请稍后...',
        errorTip: '数据初始化失败，请联系赢海客服0411-66895548',
        errorMsg: '',
        color: '#409eff',
        msg: ''
      }
    }
  },
  computed: {
    /**
     * 获取提示信息
     */
    getMessage () {
      return this.progress.percentage < 100
        ? this.progress.errorMsg
          ? this.progress.errorTip
          : this.progress.initTip
        : this.progress.successTip
    }
  },
  async created () {
    this.interval ? clearInterval(this.interval) : ''
    this.init()
  },
  methods: {
    ...mapActions('user', ['setScheduleState']),
    /**
     * 初始化数据
     * @param type wait 等待重启完成 不传递为判断是否弹出相应的框体
     * @Event on-schedul 传递弹出窗体事件
     */
    async init (type) {
      let { status, vesselName = '', code } = await getIsShowDialog().toPromise()
      if (code * 1 === 200) {
        if (!type) {
          this.isShowSchedule = status
          this.info.title = `${vesselName}${this.info.title}`
          this.$emit('on-schedule', status)
          this.setScheduleState(status)
          if (!status) {
            this.$emit('on-restart', true)
          }
        } else {
          this.isShowSchedule = false
          this.setScheduleState(false)
          this.$emit('on-restart', true)
          this.reStart ? clearInterval(this.reStart) : ''
        }
      }
    },
    /**
     * 按钮点击事件
     */
    async btnClick () {
      let {
        code
      } = await getInitDb().toPromise()
      if (code * 1 === 200) {
        this.isShowInfo = false
        this.isProgress = !this.isShowInfo
        this.progressPercentage()
        this.$emit('click', true)
      }
    },
    async progressPercentage () {
      this.interval = setInterval(async () => {
        const {
          progressBar, type, msg
        } = await getProgressPercentage().toPromise()
        this.progress.percentage = progressBar * 1
        if (type !== 'success') {
          this.progress.errorMsg = msg
          this.progress.color = '#f56c6c'
        } else {
          this.progress.msg = msg
          this.progress.color = '#409eff'
        }
        if (progressBar >= 100) {
          this.progress.percentage = 100
          clearInterval(this.interval)
        }
      }, 3000)
    },
    /**
     * 格式化 、监听 进度
     */
    format (percentage) {
      if (percentage === 100) {
        EventBus.$emit('success', '同步成功请等待重启')
        setTimeout(() => {
          this.isProgress = false
          this.isShowLoadding = !this.isProgress
          this.reStart = setInterval(() => {
            this.init('wate')
          }, 3000)
        }, 1000)
      }
      return `${fmoney(percentage, 1, '')}%`
    }
  },
  mounted () { }
}
</script>

<style lang="scss" scoped>
.schedule {
  display: flex;
  width: 620px;
  height: 222px;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 10000;
  padding: 10px;
  background: url('./image/bg-button.png') no-repeat right bottom
    rgba(255, 255, 255, 1);
  div {
    display: inline-block;
  }
  .img {
    flex: 1;
    background: url('./image/left@2x.png') no-repeat;
    background-size: 100% 100%;
    padding: 0 20px;
  }
  .progress {
    flex: 3;
    margin: auto;
    &——bar,
    &——loadding {
      width: 100%;
    }
    &——loadding {
      text-align: center;
      padding-right: 40px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    span {
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 24px;
      font-size: 16px;
      font-family: Microsoft YaHei;
    }
    .el-progress {
      &--line {
        width: 100%;
        ::v-deep .el-progress-bar {
          &__outer {
            background: rgba(220, 233, 255, 1);
          }
        }
      }
      &-bar {
        padding-right: 55px;
      }
      &__text {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(101, 101, 101, 1);
        line-height: 24px;
      }
    }
    .errorMsg {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(249, 59, 81, 1);
      line-height: 24px;
    }

    .msg {
      font-size: 12px;
      font-weight: 400;
      line-height: 24px;
    }
  }
  .info {
    flex: 3;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;

    p {
      color: rgba(51, 51, 51, 1);
      line-height: 24px;
      margin-top: 60px;
      margin-right: 40px;
    }
    &__footer {
      width: 100%;
      text-align: center;
      button {
        width: 180px;
        height: 40px;
        border: none;
        background: linear-gradient(
          65deg,
          rgba(110, 212, 255, 1),
          rgba(33, 127, 243, 1)
        );
        border-radius: 20px;
        color: rgba(255, 255, 255, 1);
        text-shadow: -1px 0px 1px rgba(0, 18, 85, 0.4);
        ::v-deep .iconchushihua {
          color: #fff;
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>