56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template>
|
|
<custom-modal v-model="visible" centered :width="420" title="Processing Monitor" class="processing-monitor">
|
|
<div class="processing-monitor-content">
|
|
<div class="processing-monitor-content-bar" :style="{ width: `${350 * percent}px` }">
|
|
<span class="processing-monitor-content-bar-percent">{{ percent * 100 }}%</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 15px; font-size: 12px">{{ analysedFileName.length > 0 ? analysedFileName[0] : '' }}</div>
|
|
<div slot="custom-footer">
|
|
<a-button @click="visible = false">Cancel</a-button>
|
|
</div>
|
|
</custom-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import ModalMixin from '@/mixins/ModalMixin'
|
|
export default {
|
|
mixins: [ModalMixin],
|
|
props: {
|
|
percent: {
|
|
type: Number,
|
|
},
|
|
analysedFileName: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
watch: {
|
|
percent(newValue, oldValue) {
|
|
if (newValue == 1) {
|
|
this.visible = false
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.processing-monitor {
|
|
&-content {
|
|
width: 350px;
|
|
height: 16px;
|
|
background: url(~@/assets/images/abnormalAlarm/green-bg.png) repeat;
|
|
&-bar {
|
|
position: relative;
|
|
height: 100%;
|
|
background: url(~@/assets/images/abnormalAlarm/green.png) repeat;
|
|
&-percent {
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |