From 5d4a053a953f6ac66af088e7a00b7dfd18dcbea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=A5=96=E6=9C=9B?= <573413756@qq.com>
Date: Fri, 8 Sep 2023 13:39:30 +0800
Subject: [PATCH] modify ota page style

---
 .../src/views/terminal/OTA/index.vue          | 91 +++++++++++--------
 xiuosiot-frontend/vue.config.js               |  2 +-
 2 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/xiuosiot-frontend/src/views/terminal/OTA/index.vue b/xiuosiot-frontend/src/views/terminal/OTA/index.vue
index e776b2c..04dc65e 100644
--- a/xiuosiot-frontend/src/views/terminal/OTA/index.vue
+++ b/xiuosiot-frontend/src/views/terminal/OTA/index.vue
@@ -74,19 +74,19 @@
                 item.verify
               }}</span>
             </div>
-            <div style="margin-left: 20px">
+            <div style="margin-left: 10px">
               <img src="@/assets/images/ota_version.png">
               <span style="color: #fbc511">{{ item.fileVersion }}</span>
             </div>
-            <div style="margin-left: 20px">
+            <div style="margin-left: 10px">
               <img src="@/assets/images/ota_file.png">
               <span style="color: #00ccf2">{{ item.fileName }}</span>
             </div>
-            <div style="margin-left: 20px">
+            <div style="margin-left: 10px">
               <img src="@/assets/images/ota_md5.png">
-              <span style="color: #724fe8">{{ item.fileMd5 }}</span>
+              <el-tooltip :content="item.fileMd5" placement="top" effect="light"><span style="color: #724fe8">MD5</span></el-tooltip>
             </div>
-            <div style="margin-left: 20px">
+            <div style="margin-left: 10px">
               <img src="@/assets/images/ota_time.png">
               <span style="color: #20be0b">{{ item.createTime }}</span>
             </div>
@@ -132,11 +132,20 @@
         <el-step title="信息填写" icon="el-icon-edit" />
       </el-steps>
       <div v-show="active === 1" style="padding: 50px">
+        <el-form ref="form" label-width="100px" :model="newFile" size="medium">
+          <el-row>
+            <el-form-item label="固件版本：" prop="fileVersion">
+              <el-input v-model="newFile.fileVersion" />
+            </el-form-item>
+          </el-row>
+        </el-form>
         <el-upload
           ref="upload"
           class="upload-demo"
           drag
           action="/dashengda/firmware/upload"
+          :data="{ version: newFile.fileVersion }"
+          :disabled="!newFile.fileVersion"
           :multiple="false"
           :limit="1"
           :file-list="firmwareList"
@@ -155,9 +164,6 @@
               <el-form-item label="固件名称：" prop="fileName">
                 <el-input v-model="newFile.fileName" disabled />
               </el-form-item>
-              <el-form-item label="固件版本：" prop="fileVersion">
-                <el-input v-model="newFile.fileVersion" />
-              </el-form-item>
               <el-form-item label="MD5码：" prop="fileMd5">
                 <el-input v-model="newFile.fileMd5" disabled />
               </el-form-item>
@@ -192,11 +198,9 @@
               <svg-icon icon-class="ota_refresh" class="refresh_icon" />
             </div>
             <div v-for="(item, index) in taskList" :key="index" class="item">
-              <div class="head">{{ item.deviceId }}</div>
-              <p>{{ item.fileName }}</p>
-              <p>{{ item.fileVersion }}</p>
-              <p>2023-08-24</p>
-              <p>15:00:00</p>
+              <div class="head">{{ item.id }}</div>
+              <p class="label">升级设备id：<br><strong>{{ item.deviceId }}</strong></p>
+              <p class="label">创建时间：<br><strong>{{ item.date + ' ' + item.time }}</strong></p>
               <p style="margin-top: 0px">
                 <el-tag
                   style="padding: 0 30px"
@@ -205,7 +209,10 @@
               </p>
               <p>
                 <el-tooltip content="任务重试">
-                  <i class="el-icon-refresh-right success" @click="retryTask(item)" />
+                  <i
+                    class="el-icon-refresh-right success"
+                    @click="retryTask(item)"
+                  />
                 </el-tooltip>
                 <el-tooltip content="强制结束">
                   <i class="el-icon-close error" @click="endTask(item.id)" />
@@ -312,7 +319,7 @@ export default {
         primaryColor: '#00CCF2',
         fileDesc: '',
         fileMd5: '',
-        totalSize: 0,
+        fileSize: 0,
         createTime: ''
       },
       taskList: [],
@@ -334,6 +341,11 @@ export default {
       deviceOnline: false
     }
   },
+  watch: {
+    fileList: function(val) {
+      this.sum = this.fileList.length
+    }
+  },
   created() {
     this.getList()
   },
@@ -468,10 +480,10 @@ export default {
       this.addTaskVisible = false
     },
     handleSuccess(res) {
-      const { fileName, fileMd5, totalSize } = res.data
+      const { fileName, fileMd5, fileSize } = res.data
       this.newFile.fileName = fileName
       this.newFile.fileMd5 = fileMd5
-      this.newFile.totalSize = totalSize
+      this.newFile.fileSize = fileSize
       this.nextDisabled = false
       this.$message.success('上传成功')
     },
@@ -529,24 +541,28 @@ export default {
         updateType: task.updateType,
         id: task.id
       }
-      this.$confirm('确认重试任务？', '提示', { type: 'warning' }).then(() => {
-        retryTask(data).then(res => {
-          if (res.code === '200000') {
-            this.$message.success('任务重试发起成功')
-            this.refresh(false)
-          }
+      this.$confirm('确认重试任务？', '提示', { type: 'warning' })
+        .then(() => {
+          retryTask(data).then((res) => {
+            if (res.code === '200000') {
+              this.$message.success('任务重试发起成功')
+              this.refresh(false)
+            }
+          })
         })
-      }).catch(err => {})
+        .catch((err) => {})
     },
     endTask(id) {
-      this.$confirm('确认强制结束任务？', '提示', { type: 'warning' }).then(() => {
-        endTask({ id }).then(res => {
-          if (res.code === '200000') {
-            this.$message.success('任务强制结束成功')
-            this.refresh()
-          }
+      this.$confirm('确认强制结束任务？', '提示', { type: 'warning' })
+        .then(() => {
+          endTask({ id }).then((res) => {
+            if (res.code === '200000') {
+              this.$message.success('任务强制结束成功')
+              this.refresh()
+            }
+          })
         })
-      }).catch(err => {})
+        .catch((err) => {})
     },
     refresh(needMsg = true) {
       getTaskList({ fileName: this.currentFileName }).then((res) => {
@@ -595,10 +611,10 @@ export default {
       })
     },
     submit() {
-      if (!this.deviceOnline) {
-        this.$message.warning('请先检测设备是否在线并确保在线后再提交')
-        return
-      }
+      // if (!this.deviceOnline) {
+      //   this.$message.warning('请先检测设备是否在线并确保在线后再提交')
+      //   return
+      // }
       const date = new Date()
       const year = date.getFullYear()
       let month = date.getMonth() + 1
@@ -848,10 +864,13 @@ export default {
           p {
             margin: 0;
             text-align: center;
-            font-size: 22px;
+            font-size: 16px;
             font-family: Microsoft YaHei;
             line-height: 30px;
             color: #2e4765;
+            strong{
+              font-size: 18px;
+            }
             .success {
               color: #20be0b;
               margin: auto 10px;
diff --git a/xiuosiot-frontend/vue.config.js b/xiuosiot-frontend/vue.config.js
index 84499b9..240aac1 100644
--- a/xiuosiot-frontend/vue.config.js
+++ b/xiuosiot-frontend/vue.config.js
@@ -31,7 +31,7 @@ module.exports = {
     proxy: {
       '/dashengda': {
         // target: 'http://115.238.53.60:33333/', // 大胜达
-        target: 'http://192.168.130.52:8080/', // wty
+        target: 'http://192.168.140.64:8080/', // wty
         // target: 'http://10.0.30.23:8080',
         changeOrigin: true,
         pathRewrite: {