批量上传

dc3/docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build:
       context: ../
       dockerfile: ./Dockerfile
-    image: pnoker/dc3-web:3.0
+    image: registry.cn-beijing.aliyuncs.com/dc3/dc3-web:1.0
     restart: always
     ports:
       - 80:80

src/util/util.js

@@ -1,5 +1,5 @@
 import {isNull} from './validate'
-import {Message, Notification} from 'element-ui'
+import {Notification} from 'element-ui'
 
 let failNotify = true, failNotifyText = '';
 
@@ -356,11 +356,13 @@ export const successMessage = (message) => {
     if (message === '' || message == null) {
         message = '操作成功!';
     }
-    Message({
-        center: true,
-        type: 'success',
-        showClose: true,
-        message: message
+    Notification.success({
+        title: '成功',
+        message: message,
+        onClose: () => {
+            failNotify = false;
+            failNotifyText = '';
+        }
     });
 };
 

src/views/device/Device.vue

@@ -17,6 +17,10 @@
                        @size-change="sizeChange"
                        @current-change="currentChange"
             >
+                <template slot="menuLeft">
+                    <el-button type="success" icon="el-icon-upload" size="small" @click="dialogFormVisible=true">批量导入</el-button>
+                </template>
+
                 <template slot="status" slot-scope="scope">
                     <el-tag v-if="scope.row.status==='ONLINE'" type="success" effect="plain">在线</el-tag>
                     <el-tag v-else-if="scope.row.status==='MAINTAIN'" type="warning" effect="plain">维护</el-tag>
@@ -25,16 +29,43 @@
                 </template>
             </avue-crud>
         </base-card>
+        <el-dialog title="批量导入"
+                   :visible.sync="dialogFormVisible"
+                   :modal-append-to-body="false"
+                   :close-on-click-modal="false"
+                   :destroy-on-close="true"
+        >
+            <div class="upload">
+                <el-upload drag
+                           :on-progress="handleUploadProgress"
+                           :on-success="handleUploadSuccess"
+                           :on-error="handleUploadError"
+                           :show-file-list="false"
+                           action="/manager_api/manager/batch/import"
+                           accept="application/json"
+                >
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__tip" slot="tip">只能上传 json 格式文件，批量导入过程比较耗时，需要耐心等待，请勿切换其他页面！</div>
+                </el-upload>
+                <el-progress class="upload-progress" :percentage="loadProgress" :text-inside="true" :stroke-width="15" :status="progressStatus"></el-progress>
+            </div>
+        </el-dialog>
     </el-col>
 </template>
 
 <script>
     import {deviceApi, dictionaryApi} from '@/api/manager'
-    import {successMessage} from "@/util/util";
+    import {failMessage, successMessage} from "@/util/util";
 
     export default {
         data() {
             return {
+                loadProgress: 0,
+                progressFlag: false,
+                progressStatus: null,
+                dialogFormVisible: false,
+                form: {},
                 query: {},
                 listForm: {},
                 listData: [],
@@ -261,6 +292,43 @@
                         done();
                     });
                 },
+                handleUploadProgress(event, file) {
+                    event.percent = 0;
+                    this.loadProgress = 0;
+                    this.progressFlag = true;
+                    this.progressStatus = null;
+                    let that = this;
+                    this.getFileContent(file.raw, function (step) {
+                        let interval = setInterval(function () {
+                            if (!that.progressFlag) {
+                                clearInterval(interval);
+                                return;
+                            }
+                            if (that.loadProgress >= 99 && that.progressFlag) {
+                                that.loadProgress = 99;
+                                clearInterval(interval);
+                                return;
+                            }
+                            that.loadProgress += step;
+                        }, 500);
+                    });
+                },
+                handleUploadSuccess(response) {
+                    if (response.ok) {
+                        this.loadProgress = 100;
+                        this.progressFlag = false;
+                        this.progressStatus = "success";
+                        successMessage("批量导入成功！");
+                    } else {
+                        this.handleUploadError();
+                    }
+                },
+                handleUploadError() {
+                    this.loadProgress = 50;
+                    this.progressFlag = false;
+                    this.progressStatus = "exception";
+                    failMessage("批量导入失败");
+                },
                 refreshChange() {
                     this.list(this.page);
                 },
@@ -278,10 +346,38 @@
                 searchReset() {
                     this.query = {};
                     this.list(this.page);
+                },
+                getFileContent(file, callback) {
+                    let fileReader = new FileReader();
+                    fileReader.onload = function (content) {
+                        let services = JSON.parse(content.target.result || "{}");
+                        let pointLength = 0;
+                        services.forEach(function (service) {
+                            service.profiles.forEach(function (profile) {
+                                let deviceLength = 0;
+                                profile.groups.forEach(function (group) {
+                                    deviceLength += group.devices.length;
+                                });
+                                pointLength += profile.points.length * deviceLength;
+                            });
+                        });
+                        let step = 100 / pointLength;
+                        step = step < 1 ? 1 : step;
+                        step = step > 50 ? 50 : step;
+                        callback(step);
+                    };
+                    fileReader.readAsText(file);
                 }
             }
     }
 </script>
 
 <style lang="scss">
+    .upload {
+        text-align: center;
+    }
+
+    .upload-progress {
+        margin-top: 10px;
+    }
 </style>