modify ota page

xiuosiot-frontend/src/api/terminal/ota.js

@@ -65,6 +65,14 @@ export function getByName(data) {
   })
 }
 
+export function getClient(data) {
+  return request({
+    url: '/api/getClient',
+    method: 'get',
+    params: data || {}
+  })
+}
+
 export function addTask(data) {
   return request({
     url: '/ota/addJob',

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

@@ -96,15 +96,17 @@
         <div class="item_right">
           <el-button
             :style="{ borderColor: item.primaryColor }"
-            @click="download(item.fileName)"
+            @click="download(item.fileName, item.fileVersion)"
           >下载</el-button>
           <el-button
             :style="{ borderColor: item.primaryColor }"
-            @click="(event) => remove(item.fileName, event)"
+            @click="
+              (event) => remove(item.id, item.fileName, item.fileVersion, event)
+            "
           >删除</el-button>
           <el-button
             :style="{ borderColor: item.primaryColor }"
-            @click="verify(item.fileName, index)"
+            @click="verify(item.id, index)"
           >验证</el-button>
           <el-button
             :style="{
@@ -112,7 +114,7 @@
               backgroundColor: item.primaryColor,
               color: 'white',
             }"
-            @click="showTask(item.fileName,item.fileVersion)"
+            @click="showTask(item.fileName, item.fileVersion)"
           >升级</el-button>
         </div>
       </div>
@@ -195,17 +197,28 @@
               <p>{{ item.fileVersion }}</p>
               <p>2023-08-24</p>
               <p>15:00:00</p>
-              <p style="margin-top: 10px">
+              <p style="margin-top: 0px">
                 <el-tag
                   style="padding: 0 30px"
                   :type="getTagType(item.status)"
                 >{{ item.statusDesc }}</el-tag>
               </p>
+              <p>
+                <el-tooltip content="置为成功">
+                  <i class="el-icon-success success" />
+                </el-tooltip>
+                <el-tooltip content="置为失败">
+                  <i class="el-icon-error error" />
+                </el-tooltip>
+              </p>
             </div>
           </div>
         </div>
         <div class="footer">
-          <el-button class="button_add_task" @click="showAddTask()">新增升级任务</el-button>
+          <el-button
+            class="button_add_task"
+            @click="showAddTask()"
+          >新增升级任务</el-button>
         </div>
       </div>
     </div>
@@ -225,6 +238,15 @@
             </el-form-item>
             <el-form-item label="升级设备id：" prop="deviceId">
               <el-input v-model="newTask.deviceId" />
+              <el-tooltip content="设备在线检测">
+                <el-button
+                  style="margin-left: 10px; padding: 5px; font-size: 16px"
+                  type="primary"
+                  icon="el-icon-stopwatch"
+                  circle
+                  @click="onlineTest(newTask.deviceId)"
+                />
+              </el-tooltip>
             </el-form-item>
             <el-form-item label="升级时间：" prop="updateType">
               <el-select v-model="newTask.updateType">
@@ -257,7 +279,8 @@ import {
   getByVerify,
   getByName,
   getTaskList,
-  addTask
+  addTask,
+  getClient
 } from '@/api/terminal/ota.js'
 
 export default {
@@ -305,7 +328,8 @@ export default {
           val: 1,
           label: '凌晨12点升级'
         }
-      ]
+      ],
+      deviceOnline: false
     }
   },
   created() {
@@ -375,8 +399,8 @@ export default {
       }
       return file
     },
-    download(fileName) {
-      download({ fileName })
+    download(fileName, fileVersion) {
+      download({ fileName, fileVersion })
         .then((res) => {
           const name = res.headers['content-disposition']
             .split(';')[1]
@@ -385,7 +409,7 @@ export default {
           if (!data) {
             return
           }
-          const url = window.URL.createObjectURL(new Blob([data]))
+          const url = window.URL.createObjectURL(data)
           const a = document.createElement('a')
           a.style.display = 'none'
           a.href = url
@@ -397,17 +421,17 @@ export default {
         })
         .catch((err) => {})
     },
-    remove(fileName, event) {
+    remove(id, fileName, fileVersion, event) {
       this.$confirm(`确定删除固件${fileName}？`, '提示').then(() => {
-        remove({ fileName }).then((res) => {
+        remove({ id, fileName, fileVersion }).then((res) => {
           this.$message.success('删除成功')
           event.target.blur()
           this.getList()
         })
       })
     },
-    verify(fileName, index) {
-      verify({ fileName }).then((res) => {
+    verify(id, index) {
+      verify({ id }).then((res) => {
         if (res.message === '验证成功') {
           this.fileList[index].verify = '验证成功'
           this.$message.success('验证成功')
@@ -426,6 +450,7 @@ export default {
     showAddTask() {
       this.newTask.fileVersion = this.currentFileVersion
       this.addTaskVisible = true
+      this.deviceOnline = false
     },
     closeDialog() {
       this.active = 1
@@ -483,7 +508,7 @@ export default {
       this.currentFileVersion = fileVersion
       getTaskList({ fileName }).then((res) => {
         this.$message.success('升级任务查询成功')
-        this.taskList = res.data.map(task => {
+        this.taskList = res.data.map((task) => {
           const statusList = ['失败', '成功', '进行中', '未开始']
           task.statusDesc = statusList[task.status]
           task.date = task.createTime.split(' ')[0]
@@ -498,7 +523,7 @@ export default {
         if (needMsg) {
           this.$message.success('刷新成功')
         }
-        this.taskList = res.data.map(task => {
+        this.taskList = res.data.map((task) => {
           const statusList = ['失败', '成功', '进行中', '未开始']
           task.statusDesc = statusList[task.status]
           task.date = task.createTime.split(' ')[0]
@@ -525,7 +550,25 @@ export default {
       }
       return res
     },
+    onlineTest(clientId) {
+      if (!clientId) {
+        this.$message.warning('请先填写升级设备id')
+        return
+      }
+      getClient({ clientId }).then((res) => {
+        if (res.code === '200000') {
+          this.$message.success('设备在线')
+          this.deviceOnline = true
+        } else {
+          this.deviceOnline = false
+        }
+      })
+    },
     submit() {
+      if (!this.deviceOnline) {
+        this.$message.warning('请先检测设备是否在线并确保在线后再提交')
+        return
+      }
       const date = new Date()
       const year = date.getFullYear()
       let month = date.getMonth() + 1
@@ -538,11 +581,13 @@ export default {
         day = `0${day}`
       }
       this.newTask.createTime = year + '-' + month + '-' + day + ' ' + time
-      addTask({ fileName: this.currentFileName, ...this.newTask }).then(res => {
-        this.$message.success('提交成功')
-        this.closeAddTaskDialog()
-        this.refresh(false)
-      })
+      addTask({ fileName: this.currentFileName, ...this.newTask }).then(
+        (res) => {
+          this.$message.success('提交成功')
+          this.closeAddTaskDialog()
+          this.refresh(false)
+        }
+      )
     }
   }
 }
@@ -724,7 +769,7 @@ export default {
         display: grid;
         justify-content: space-around;
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-        grid-template-rows:repeat(auto-fill, 260px);
+        grid-template-rows: repeat(auto-fill, 260px);
         grid-gap: 0 20px;
         height: 100%;
         width: 100%;
@@ -743,7 +788,7 @@ export default {
         }
         .item {
           margin-top: 40px;
-          padding: 40px 20px 10px;
+          padding: 30px 20px 10px;
           position: relative;
           border: 1px solid transparent;
           background: linear-gradient(#fff, #fff) padding-box,
@@ -777,9 +822,16 @@ export default {
             font-family: Microsoft YaHei;
             line-height: 30px;
             color: #2e4765;
-          }
-          &:last-child {
-            // margin-right: auto;
+            .success {
+              color: #20be0b;
+              margin: auto 10px;
+              cursor: pointer;
+            }
+            .error {
+              color: #ff4e00;
+              margin: auto 10px;
+              cursor: pointer;
+            }
           }
         }
       }
@@ -835,7 +887,7 @@ export default {
     padding-top: 5px;
   }
 }
-.el-select{
-  width:100% !important
+.el-select {
+  width: 100% !important;
 }
 </style>