131 lines
3.1 KiB
Vue
131 lines
3.1 KiB
Vue
<template>
|
|
<el-popover
|
|
placement="bottom-end"
|
|
title=""
|
|
trigger="click"
|
|
content=""
|
|
width="300"
|
|
v-bind="$attrs"
|
|
:visible="show"
|
|
>
|
|
<template #reference>
|
|
<slot></slot>
|
|
</template>
|
|
<template #default>
|
|
<div v-for="item in list" :key="item">
|
|
<div v-if="list.length>0 && type == item.type">
|
|
<div class="exportHeader">
|
|
<div class="name">{{item.type_desc}}</div>
|
|
<div class="status" v-if="item.status==0">{{item.msg}}</div>
|
|
<div class="finish" v-if="item.status==1"><i class="icon"><sc-icon-Finish/></i> 文件生成完成</div>
|
|
</div>
|
|
<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script>
|
|
import {eventBus} from "@/utils/eventBus"
|
|
|
|
export default {
|
|
name: "index",
|
|
props:{
|
|
size:{type: String, default: "small" },
|
|
show:{type:Boolean, default: false},
|
|
type:{type: String, default: ""}
|
|
},
|
|
watch:{
|
|
|
|
},
|
|
data(){
|
|
return{
|
|
list:[{},{},{},{},{},{},{},{}],
|
|
}
|
|
},
|
|
setup(){
|
|
|
|
},
|
|
mounted() {
|
|
// 获取新消息
|
|
eventBus.$on('sockBack', this.getWsResult);
|
|
},
|
|
unmounted() {
|
|
eventBus.$off('sockBack', this.getWsResult);
|
|
},
|
|
methods:{
|
|
getWsResult(res){
|
|
if(res.data && (res.data.type == 6 || res.data.type == 7 || res.data.type == 8 || res.data.type == 11 || res.data.type == 19 || res.data.type == 20 || res.data.type == 29 || res.data.type == 30)){
|
|
let item = {
|
|
type:res.data.type,
|
|
type_desc:res.data.type_desc,
|
|
msg:res.data.msg,
|
|
status:res.data.status,
|
|
rate:res.data.rate,
|
|
}
|
|
if(res.data.type == 6){
|
|
this.list[0] = item;
|
|
}
|
|
if(res.data.type == 7){
|
|
this.list[1] = item;
|
|
}
|
|
if(res.data.type == 8){
|
|
this.list[2] = item;
|
|
}
|
|
if(res.data.type == 11){
|
|
this.list[3] = item;
|
|
}
|
|
if(res.data.type == 19){
|
|
this.list[4] = item;
|
|
}
|
|
if(res.data.type == 20){
|
|
this.list[5] = item;
|
|
}
|
|
if(res.data.type == 29){
|
|
this.list[6] = item;
|
|
}
|
|
if(res.data.type == 30){
|
|
this.list[7] = item;
|
|
}
|
|
this.$emit('updateShow', item);
|
|
|
|
if(res.data.status==1){
|
|
this.down(res.data);
|
|
}
|
|
}
|
|
},
|
|
down(item){
|
|
const link = document.createElement('a');
|
|
link.href = item.file_url;
|
|
link.setAttribute('download', '');
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
},
|
|
exportClick(){
|
|
this.$emit('exportData');
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.exportHeader{
|
|
font-size: 12px;
|
|
display: flex;align-items: center;justify-content: space-around;
|
|
margin-bottom: 6px;
|
|
.name{width: 50%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
|
|
.status{width: 50%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
|
|
.finish{
|
|
display: flex;align-items: center;justify-content: flex-end;color: var(--el-color-success);
|
|
.icon{width: 14px;height: 14px;margin-right: 4px;}
|
|
}
|
|
}
|
|
.exportPopover :deep(.el-progress-bar__innerText){
|
|
height: 100%;
|
|
display: flex;align-items: center;justify-content: flex-end;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|