Browse Source

文件上传

qule 3 years ago
parent
commit
18661de3c5

+ 8 - 8
src/components/old-adm/ledger/facility/index.vue

@@ -93,6 +93,14 @@ export default {
     computed: {
         ...mapGetters('layout', ["projectId", "projects", "secret", "userId"]),
     },
+    watch: {
+        projectId() {
+            this.param.ProjId = this.projectId;
+            this.param.secret = this.secret;
+            this.getProjName();
+            this.getCount();
+        },
+    },
     created() {
         this.param.ProjId = this.projectId;
         this.param.secret = this.secret;
@@ -133,14 +141,6 @@ export default {
         }
         next();
     },
-    watch: {
-        projectId() {
-            this.param.ProjId = this.projectId;
-            this.param.secret = this.secret;
-            this.getProjName();
-            this.getCount();
-        },
-    },
     methods: {
         getProjName() {
             this.projects.forEach((item) => {

+ 3 - 4
src/components/old-adm/ledger/system/index.vue

@@ -18,7 +18,7 @@ import floorCascader from "@/components/old-adm/ledger/components/lib/floorCasca
 import myCascader from "@/components/old-adm/ledger/components/lib/system";
 import hansonTable from "@/components/old-adm/ledger/components/handsontables/system";
 import tableTransfers from "@/components/old-adm/ledger/components/tableTransfers";
-import { mapGetters, mapState } from "vuex";
+import { mapGetters } from "vuex";
 // import { countGeneralSys } from "@/api/scan/request"
 import Scan from '@/controller/old-adm/ScanController'
 import 'handsontable-pro/dist/handsontable.full.css'
@@ -52,8 +52,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters("layout", ["projectId", "secret", "userId"]),
-    ...mapState(['selectProject'])
+    ...mapGetters("layout", ["projectId", "secret", "userId"])
   },
   created() {
     this.param.ProjId = this.projectId
@@ -67,7 +66,7 @@ export default {
     }
   },
   watch: {
-    projectId() {
+    projectId(nv, ov) {
       this.param.ProjId = this.projectId
       this.param.secret = this.secret
       this.countGeneralSys()

+ 5 - 0
src/components/uploadFile/constant.ts

@@ -0,0 +1,5 @@
+export const PROGRESS_BG_COLOR = {
+    uploading: '#409EFF',
+    success: '#00d6b9',
+    failed: '#f54e45'
+}

+ 90 - 11
src/components/uploadFile/index.vue

@@ -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>

+ 0 - 1
src/controller/old-adm/preTypes.ts

@@ -12,4 +12,3 @@ export const graphhic_pre = `${datacenter_pre}/graphic`;
 export const floor_pre = `${object_pre}/floor`;
 
 export const model_pre = "/revit-algorithm";
-export const adm_middleware = '/adm-middleware'

+ 2 - 1
src/meri.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import {Button, Input, MSelect, Icon, Popover, ImageUpload} from 'meri-design'
+import {Button, Input, MSelect, Icon, Popover, ImageUpload, Modal} from 'meri-design'
 
 Vue.use(Button)
 Vue.use(Input)
@@ -7,3 +7,4 @@ Vue.use(MSelect)
 Vue.use(Icon)
 Vue.use(Popover)
 Vue.use(ImageUpload)
+Vue.use(Modal)

+ 1 - 1
src/store/modules/uploadFile.ts

@@ -1,7 +1,7 @@
 export default {
     namespaced: true,
     state: {
-        uploadVisible: true,
+        uploadVisible: false,
     },
     getters: {