局域网——教师端下载资源进度展示

TEAMModelOS.Extension/IES.Exam/IES.ExamViews/src/view/admin/ActivityManage.vue

@@ -273,6 +273,18 @@
         <el-dialog title="试卷详情" width="50%" :visible.sync="isShowPaper" class="test-paper">
             <TestPaper v-if="isShowPaper" :paperInfo="paperInfo"></TestPaper>
         </el-dialog>
+        <el-dialog title="正在下载资源，请勿离开" width="30%" :visible.sync="isUpload" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+            <el-progress :percentage="uploadProgress" :status="uploadProgress === 100 ? 'success' : null"></el-progress>
+            <p v-for="(item, index) in downloadType" :key="index" style="margin: 10px; font-size: 16px;">
+                <i class="el-icon-success" v-show="item.isOk && !item.errorNum" style="color: #37a326; margin-right: 5px;"></i>
+                <i class="el-icon-warning" v-show="item.isOk && item.errorNum" style="color: #fb652c; margin-right: 5px;"></i>
+                <i class="el-icon-more" v-show="!item.isOk" style="margin-right: 5px;"></i>
+                <span :style="{'color': item.isOk ? (item.errorNum ? '#fb652c' : '#37a326') : ''}">{{ item.type === 1 ? '云端检测' : item.type === 2 ? '下载评测信息文件' : item.type === 3 ? '下载评测名单' : item.type === 4 ? '下载评测试卷' : item.type === 5 ? '检查评测数据完整性' : '打包评测数据' }}</span>
+            </p>
+            <span slot="footer" class="dialog-footer" v-show="uploadProgress === 100">
+                <el-button type="primary" @click="isUpload = false">确定</el-button>
+            </span>
+        </el-dialog>
     </el-container>
 </template>
 
@@ -280,7 +292,7 @@
 import {jwtDecode} from 'jwt-decode'
 import { Loading } from 'element-ui'
 import TestPaper from './TestPaper.vue'
-import vuescroll from 'vuescroll'
+import SignalRService from '@/utils/signalR';
 
 export default {
     components: { TestPaper },
@@ -329,6 +341,15 @@ export default {
                 }
             },
             isPushAnswer: false,
+            isUpload: false,
+            signalR: null,
+            downloadType: [
+                {
+                    isOk: false,
+                    message: '云端检测',
+                    type: 1
+                }
+            ], // 1：检测云端  2：评测信息  3：名单  4：试卷  5：检查数据完整  6：打包
         }
     },
     created() {
@@ -652,12 +673,22 @@ export default {
             })
         },
         updatePackage() {
+            this.downloadType = [
+                {
+                    isOk: false,
+                    message: '云端检测',
+                    type: 1,
+                    errorNum: 0
+                }
+            ]
+            this.createConn()
             this.openErrorMsgs = []
-            this.isLoading = Loading.service({
+            /* this.isLoading = Loading.service({
                 lock: true,
                 text: '资源下载中...',
                 background: 'rgba(0, 0, 0, 0.7)'
-            })
+            }) */
+            this.isUpload = true
             let params = {
                 deviceId: this.deviceId,
                 evaluationId: this.evaluationClient.id,
@@ -690,7 +721,7 @@ export default {
                     this.showErrorMsgs = true
                 }
             }).finally(() => {
-                this.isLoading.close()
+                // this.isLoading.close()
             })
         },
         getRoundList() {
@@ -842,11 +873,50 @@ export default {
                 path: "/login/admin"
             });
         },
+        createConn() {
+            /* 
+                grant_type取值：
+                public static readonly string _Message_grant_type_check_file = "check_file"; //检查文件
+                public static readonly string _Message_grant_type_ies_qrcode_login = "ies_qrcode_login"; //二维码扫描登陆
+                public static readonly string _Message_grant_type_download_file = "download_file"; //下载评测试卷
+                public static readonly string _Message_grant_type_upload_data = "upload_data"; //推送学生作答
+            */
+            let apiPrefix = process.env.NODE_ENV === 'production' ? '' : '/api'
+            this.signalR = new SignalRService()
+            this.signalR.initSignalR(`${apiPrefix}/signalr/exam?grant_type=download_file&clientid=${this.deviceId}`)
+            this.signalR.onReceiveConnection((message) => {
+                console.log('signalr连接结果：', message);
+            })
+            this.signalR.onMessageReceived((message) => {
+                // status: -1 error（红）,0 info（黑、白）,1 success（绿）,2 warning（黄）
+                // this.qrCodeToken = JSON.parse(message.content)
+                console.log('22222222222', message);
+                if(message.step && (message.status && message.status != 1)) {
+                    this.downloadType[0].errorNum ++
+                }
+                if(message.step && message.finish) {
+                    this.downloadType.length ? this.downloadType[0].isOk = true : ''
+                    if(this.downloadType.length != 6) this.downloadType.unshift({
+                        isOk: false,
+                        message: message.content,
+                        type: message.step + 1,
+                        errorNum: 0
+                    })
+                }
+            })
+        },
+        format(percentage) {
+            return percentage === 100 ? '下载成功' : `${percentage}%`;
+        }
     },
     computed: {
         selectGroup() {
             return this.evaluationClient.grouplist.filter(item => this.setAnswerInfo.groupId.includes(item.id))
         },
+        uploadProgress() {
+            let num = this.downloadType.filter(item => item.isOk).length
+            return Math.floor(num / 6 * 100)
+        },
     }
 }
 </script>