add:ota管理与固件上传与下载 (#931)

* 新增ota管理与固件上传于下载

* feat: 支持通过OTA更新websocket地址

* update:合并最新代码

* update:优化OTA增删改查

* update:一个临时下载链接最多只能下载3次,防止盗链和流量攻击

* update:OTA固件增删改查

---------

Co-authored-by: kevin1sMe <linjiang1205@gmail.com>
Co-authored-by: hrz <1710360675@qq.com>
This commit is contained in:
@AI人
2025-04-22 23:36:23 +08:00
committed by GitHub
co-authored by kevin1sMe hrz
parent 13c0a966ec
commit 78fa5d3110
45 changed files with 1831 additions and 530 deletions
+29 -26
View File
@@ -5,8 +5,8 @@
<div class="operation-bar">
<h2 class="page-title">设备管理</h2>
<div class="right-operations">
<el-input placeholder="请输入设备型号或Mac地址查询" v-model="searchKeyword"
class="search-input" @keyup.enter.native="handleSearch" clearable />
<el-input placeholder="请输入设备型号或Mac地址查询" v-model="searchKeyword" class="search-input"
@keyup.enter.native="handleSearch" clearable />
<el-button class="btn-search" @click="handleSearch">搜索</el-button>
</div>
</div>
@@ -29,7 +29,11 @@
<el-checkbox v-model="scope.row.selected"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="设备型号" prop="model" align="center"></el-table-column>
<el-table-column label="设备型号" prop="model" align="center">
<template slot-scope="scope">
{{ getFirmwareTypeName(scope.row.model) }}
</template>
</el-table-column>
<el-table-column label="固件版本" prop="firmwareVersion" align="center" ></el-table-column>
<el-table-column label="Mac地址" prop="macAddress" align="center"></el-table-column>
<el-table-column label="绑定时间" prop="bindTime" align="center"></el-table-column>
@@ -39,7 +43,8 @@
<el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="mini"
@blur="stopEditRemark(scope.$index)"></el-input>
<span v-else>
<i v-if="!scope.row.remark" class="el-icon-edit" @click="startEditRemark(scope.$index, scope.row)"></i>
<i v-if="!scope.row.remark" class="el-icon-edit"
@click="startEditRemark(scope.$index, scope.row)"></i>
<span v-else @click="startEditRemark(scope.$index, scope.row)">
{{ scope.row.remark }}
</span>
@@ -69,26 +74,17 @@
<el-button type="success" size="mini" class="add-device-btn" @click="handleAddDevice">
新增
</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete"
@click="deleteSelected">解绑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelected">解绑</el-button>
</div>
<div class="custom-pagination">
<el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
<el-option
v-for="item in pageSizeOptions"
:key="item"
:label="`${item}条/页`"
:value="item">
</el-option>
<el-option v-for="item in pageSizeOptions" :key="item" :label="`${item}条/页`" :value="item">
</el-option>
</el-select>
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
<button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
<button
v-for="page in visiblePages"
:key="page"
class="pagination-btn"
:class="{ active: page === currentPage }"
@click="goToPage(page)">
<button v-for="page in visiblePages" :key="page" class="pagination-btn"
:class="{ active: page === currentPage }" @click="goToPage(page)">
{{ page }}
</button>
<button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
@@ -110,6 +106,7 @@
import Api from '@/apis/api';
import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import { FIRMWARE_TYPES } from "@/utils";
export default {
components: { HeaderBar, AddDeviceDialog },
@@ -311,7 +308,7 @@ export default {
rawBindTime: new Date(device.createDate).getTime()
};
})
.sort((a, b) => a.rawBindTime - b.rawBindTime);
.sort((a, b) => a.rawBindTime - b.rawBindTime);
this.activeSearchKeyword = "";
this.searchKeyword = "";
} else {
@@ -319,12 +316,16 @@ export default {
}
});
},
headerCellClassName({columnIndex}) {
headerCellClassName({ columnIndex }) {
if (columnIndex === 0) {
return "custom-selection-header";
}
return "";
}
},
getFirmwareTypeName(type) {
const firmwareType = FIRMWARE_TYPES.find(item => item.key === type);
return firmwareType ? firmwareType.name : type;
},
}
};
</script>
@@ -393,12 +394,12 @@ export default {
transition: border-color 0.2s;
}
::v-deep .page-size-select{
::v-deep .page-size-select {
width: 100px;
margin-right: 8px;
}
::v-deep .page-size-select .el-input__inner{
::v-deep .page-size-select .el-input__inner {
height: 32px;
line-height: 32px;
border-radius: 4px;
@@ -407,7 +408,8 @@ export default {
color: #606266;
font-size: 14px;
}
::v-deep .page-size-select .el-input__suffix{
::v-deep .page-size-select .el-input__suffix {
right: 6px;
width: 15px;
height: 20px;
@@ -418,13 +420,14 @@ export default {
border-radius: 4px;
}
::v-deep .page-size-select .el-input__suffix-inner{
::v-deep .page-size-select .el-input__suffix-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
::v-deep .page-size-select .el-icon-arrow-up:before{
::v-deep .page-size-select .el-icon-arrow-up:before {
content: "";
display: inline-block;
border-left: 6px solid transparent;