add file remove verify && show file transfer progress

xiuosiot-frontend/src/views/terminal/OTA/index.vue

@@ -84,7 +84,11 @@
             </div>
             <div style="margin-left: 10px">
               <img src="@/assets/images/ota_md5.png">
-              <el-tooltip :content="item.fileMd5" placement="top" effect="light"><span style="color: #724fe8">MD5</span></el-tooltip>
+              <el-tooltip
+                :content="item.fileMd5"
+                placement="top"
+                effect="light"
+              ><span style="color: #724fe8">MD5</span></el-tooltip>
             </div>
             <div style="margin-left: 10px">
               <img src="@/assets/images/ota_time.png">
@@ -114,7 +118,7 @@
               backgroundColor: item.primaryColor,
               color: 'white',
             }"
-            @click="showTask(item.fileName, item.fileVersion)"
+            @click="showTask(item.fileName, item.fileVersion, item.fileSize)"
           >升级</el-button>
         </div>
       </div>
@@ -200,8 +204,21 @@
             </div>
             <div v-for="(item, index) in taskList" :key="index" class="item">
               <div class="head">{{ item.id }}</div>
-              <p class="label">升级设备id：<br><strong>{{ item.deviceId }}</strong></p>
+              <p class="label">
-              <p class="label">创建时间：<br><strong>{{ item.date + ' ' + item.time }}</strong></p>
+                升级设备id：<br><strong>{{ item.deviceId }}</strong>
+              </p>
+              <p class="label">
+                创建时间：<br><strong>{{
+                  item.date + " " + item.time
+                }}</strong>
+              </p>
+              <el-progress
+                class="task_progress"
+                :text-inside="true"
+                :stroke-width="18"
+                :percentage="item.ratio"
+                status="success"
+              />
               <p style="margin-top: 0px">
                 <el-tag
                   style="padding: 0 30px"
@@ -309,6 +326,7 @@ export default {
       firmwareList: [],
       currentFileName: '',
       currentFileVersion: '',
+      currentFileSize: 0,
       fileList: [],
       newFile: {
         fileName: '',
@@ -437,12 +455,18 @@ export default {
         .catch((err) => {})
     },
     remove(id, fileName, fileVersion, event) {
-      this.$confirm(`确定删除固件${fileName}？`, '提示').then(() => {
+      this.$confirm(`确定删除固件${fileName}？`, '提示').then(async() => {
-        remove({ id, fileName, fileVersion }).then((res) => {
+        const response = await getTaskList({ fileName, fileVersion })
-          this.$message.success('删除成功')
+        console.log('response', response)
-          event.target.blur()
+        if (response.data && response.data.length > 0) {
-          this.getList()
+          this.$message.error('该固件存在升级记录，无法删除')
-        })
+        } else {
+          remove({ id, fileName, fileVersion }).then((res) => {
+            this.$message.success('删除成功')
+            event.target.blur()
+            this.getList()
+          })
+        }
       })
     },
     verify(id, index) {
@@ -526,19 +550,38 @@ export default {
         })
       }
     },
-    showTask(fileName, fileVersion) {
+    showTask(fileName, fileVersion, fileSize) {
+      clearInterval()
       this.currentFileName = fileName
       this.currentFileVersion = fileVersion
+      this.currentFileSize = fileSize
+      const statusList = ['失败', '成功', '进行中', '未开始']
       getTaskList({ fileName, fileVersion }).then((res) => {
         this.$message.success('升级任务查询成功')
         this.taskList = res.data.map((task) => {
-          const statusList = ['失败', '成功', '进行中', '未开始']
           task.statusDesc = statusList[task.status]
           task.date = task.createTime.split(' ')[0]
           task.time = task.createTime.split(' ')[1]
+          task.ratio = Math.round(
+            (task.currentProcess / this.currentFileSize) * 100
+          )
           return task
         })
       })
+      setInterval(() => {
+        getTaskList({ fileName, fileVersion }).then((res) => {
+          this.taskList = this.taskList.map((task) => {
+            const temp = res.data.filter(
+              (resTask) => task.id === resTask.id
+            )[0]
+            task.statusDesc = statusList[temp.status]
+            task.ratio = Math.round(
+              (temp.currentProcess / this.currentFileSize) * 100
+            )
+            return task
+          })
+        })
+      }, 5 * 1000)
       this.taskListVisible = true
     },
     retryTask(task) {
@@ -567,14 +610,17 @@ export default {
           endTask({ id }).then((res) => {
             if (res.code === '200000') {
               this.$message.success('任务强制结束成功')
-              this.refresh()
+              this.refresh(false)
             }
           })
         })
         .catch((err) => {})
     },
     refresh(needMsg = true) {
-      getTaskList({ fileName: this.currentFileName, fileVersion: this.currentFileVersion }).then((res) => {
+      getTaskList({
+        fileName: this.currentFileName,
+        fileVersion: this.currentFileVersion
+      }).then((res) => {
         if (needMsg) {
           this.$message.success('刷新成功')
         }
@@ -824,7 +870,7 @@ export default {
         display: grid;
         justify-content: space-around;
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-        grid-template-rows: repeat(auto-fill, 290px);
+        grid-template-rows: repeat(auto-fill, 310px);
         grid-gap: 0 20px;
         height: 100%;
         width: 100%;
@@ -854,7 +900,7 @@ export default {
               #fff 5px,
               #fff 10px
             );
-          div {
+          .head {
             position: absolute;
             left: 50%;
             top: 0;
@@ -877,7 +923,7 @@ export default {
             font-family: Microsoft YaHei;
             line-height: 30px;
             color: #2e4765;
-            strong{
+            strong {
               font-size: 18px;
             }
             .success {
@@ -891,6 +937,9 @@ export default {
               cursor: pointer;
             }
           }
+          .task_progress {
+            margin: 0px 10px 5px;
+          }
         }
       }
     }