fj-dc-ui/.svn/pristine/00/00ec112ceb18aa1ab1e7c021f69120c756a19281.svn-base

<template>
    <div class="flow_chart_wrapper" id="detailImg" ref="detailImg">
       <div style="font-size: 14px;color:#ff2213;position: absolute;top:0px;left:0px;">点击流程图放大</div>
        <!-- <el-tag type="info">部交办反馈事项</el-tag>
        <i class="el-icon-right"></i>
        <el-tag type="info">业务处室新建整改</el-tag>
        <i class="el-icon-right"></i>
        <el-tag type="info">督查办整改下发</el-tag>
        <i class="el-icon-right"></i>
        <el-tag type="info">整改反馈</el-tag> -->
        <img :src="imgUrl" alt="流程图">
    </div>
</template>
<script>
import request from '@util/gw_ajax_request.js'
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
    props:{
        procInstId:{
            type: String,
            default: ''
        },
        isShow:{
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            imgUrl: ''
        }
    },
    mounted() {
        this.getFlowChart()
    },
    methods: {
        getFlowChart(){
            request.get(`/bis/insp/pblm/plist/v1/workflow/qryProcessDiagram/${this.procInstId}`).then(res=>{
                if(res.success){
                    this.imgUrl = res.data.base64ImageStr
                    this.$nextTick(function(){
                        var  ViewerDom = this.$refs.detailImg;

                        var  viewer = new Viewer(ViewerDom, {
                            // hide:function(){ //在图片消失的时候销毁viewer
                            //     viewer.destroy();
                            // }
                        })
                    });
                }
            }).catch(err=>{
                console.log(err)
            })
        },
    },
    watch:{
        procInstId(val){
            if(val){
                this.getFlowChart()
            }
        }
    }
}
</script>
<style lang="scss">
    .viewer-container{
      background: white !important;
    }
    .viewer-footer{
      background: white !important;
      .viewer-toolbar{
        background: white !important;
      }
    }

    .flow_chart_wrapper{
        width: 100%;
        margin: 0 auto;
        text-align: center;
        position: relative;
        cursor: pointer;
        img{
            width: 100%;
        }
        .el-icon-right{
            font-size: 20px;
            margin: 0 10px;
        }
        .el-tag--mini{
            height: 60px;
            padding: 20px 10px;
            font-size: 16px;
        }
        .el-tag.el-tag--info{
            color: #666;
        }
    }
</style>