|
@@ -1,26 +1,52 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div v-if='uploadVisible' class="uploadWarp">
|
|
|
- <el-collapse v-model="activeNames" @change="handleChange" style="position: absolute; width: 100%">
|
|
|
- <el-collapse-item title="同步中.." name="1">
|
|
|
- <div>已成功同步100个文件,共200个文件</div>
|
|
|
- <el-progress :text-inside="true" :show-text='false' :stroke-width="2" :percentage="70"></el-progress>
|
|
|
+ <el-collapse v-model="activeNames" style="position: absolute; width: 100%">
|
|
|
+ <div class="full-progress" :style="{width: percentage + '%', 'background-color': PROGRESS_BG_COLOR.success }"></div>
|
|
|
+ <el-progress :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage" class="smallProgess"></el-progress>
|
|
|
+ <i class="el-icon-close" @click="cancelUpload"></i>
|
|
|
+ <el-collapse-item :title="uploading ? '上传中...' : '上传完成'" name="1">
|
|
|
+ <div class="tip">
|
|
|
+ <span>已成功同步100个文件,共200个文件</span>
|
|
|
+ <Icon class="icon" :name="'tagCompleted'" />
|
|
|
+ </div>
|
|
|
+ <el-progress :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage"></el-progress>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
</div>
|
|
|
+ <Modal
|
|
|
+ :show="modalStatusTip"
|
|
|
+ title="警告"
|
|
|
+ mode="tip"
|
|
|
+ type="info"
|
|
|
+ @close="modalClose"
|
|
|
+ @confirm='confirmHandle'
|
|
|
+ >
|
|
|
+ <template #content>
|
|
|
+ 确定取消上传
|
|
|
+ </template>
|
|
|
+ <template #handle>
|
|
|
+ <Button @click="modalClose" type="default">取消</Button>
|
|
|
+ <Button @click="confirmHandle" type="error">确定</Button>
|
|
|
+ </template>
|
|
|
+ </Modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapState } from 'vuex'
|
|
|
+import { PROGRESS_BG_COLOR } from './constant'
|
|
|
export default {
|
|
|
components: {
|
|
|
|
|
|
},
|
|
|
- props: [],
|
|
|
data() {
|
|
|
return {
|
|
|
- activeNames: true
|
|
|
+ activeNames: '1',
|
|
|
+ modalStatusTip: false,
|
|
|
+ uploading: true,
|
|
|
+ percentage: 0,
|
|
|
+ PROGRESS_BG_COLOR,
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -32,11 +58,25 @@ export default {
|
|
|
...mapState('uploadFile', ['uploadVisible'])
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
-
|
|
|
+ setInterval(() => {
|
|
|
+ if (this.percentage < 99.9) {
|
|
|
+ this.percentage += 0.1
|
|
|
+ console.log(this.percentage)
|
|
|
+ }
|
|
|
+
|
|
|
+ }, 20);
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ cancelUpload() {
|
|
|
+ this.modalStatusTip = true;
|
|
|
+ },
|
|
|
+ confirmHandle() {
|
|
|
+ console.log(123)
|
|
|
+ },
|
|
|
+ modalClose() {
|
|
|
+ this.modalStatusTip = false
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -44,9 +84,48 @@ export default {
|
|
|
<style scoped lang='less'>
|
|
|
.uploadWarp {
|
|
|
position: fixed;
|
|
|
- right: 32px;
|
|
|
- bottom: 160px;
|
|
|
+ right: 64px;
|
|
|
+ bottom: 80px;
|
|
|
width: 420px;
|
|
|
+ height: 133px;
|
|
|
+ box-shadow: 0px 0px 6px #aaa;
|
|
|
+ & /deep/ .el-collapse-item__header {
|
|
|
+ padding: 16px;
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
+ }
|
|
|
+ & /deep/ .el-collapse-item__content {
|
|
|
+ padding: 25px 16px;
|
|
|
+ }
|
|
|
+ & /deep/ .el-collapse-item__arrow {
|
|
|
+ position: relative;
|
|
|
+ right: 20px
|
|
|
+ }
|
|
|
+ & /deep/ .el-icon-close {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 16px
|
|
|
+ }
|
|
|
+ .full-progress {
|
|
|
+ position: absolute;
|
|
|
+ top: -1px;
|
|
|
+ left: 0;
|
|
|
+ height: 47px;
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ .smallProgess {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ top: 46px;
|
|
|
+ & /deep/ .el-progress-bar__inner {
|
|
|
+ transition: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
</style>
|