hitch-sb-antd/src/views/activiti/ImageModal.vue

<template>
  <a-modal
    title="流程图"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <div>
      <img style="width: 90%" :src="image1" v-show="!showFlag" />
      <img style="width: 90%" :src="image2" v-show="showFlag"/>
    </div>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
import { getShineProImage } from '@/api/activiti/activiti'

export default {
  name: 'ActImageModal',
  data () {
    return {
      confirmLoading: false,
      showFlag: true,
      image1: '',
      timer: '',
      visible: false,
      countNum: 0,
      image2: ''
    }
  },
  mounted () {
    this.timer = setInterval(this.showImage, 1000)
  },
  methods: {
    base (id) {
      this.visible = true
      this.confirmLoading = true
      getShineProImage({ processInstanceId: id })
        .then((res) => {
          const images = res.data.images
          this.image1 = 'data:image/png;base64,' + images[0]
          this.image2 = 'data:image/png;base64,' + images[1]
          // this.timer = setInterval(this.showImage(), 1000)
        }).catch(() => {
          this.confirmLoading = false
        })
    },
    showImage () {
      if (this.countNum === 0) {
        this.showFlag = false
      } else {
        this.showFlag = true
      }
      this.countNum++
      if (this.countNum === 2) {
        this.countNum = 0
      }
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      clearInterval(this.timer)
    }
  }
}
</script>