feat(断路器): 添加断路器调试固件升级，调整页面布局
This commit is contained in:
fhysy
parent
206de9e618
commit
5a0304a8d6
|
|
@ -27,7 +27,7 @@ import Header from '@renderer/layout/Header.vue';
|
|||
.el-main {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
/*height: 100vh;*/
|
||||
overflow-x: hidden;
|
||||
background: #fff;
|
||||
padding-right: 10px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<el-form ref="formRef" :model="form" class="demo-form" :rules="formRules" label-width="auto" status-icon>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="设备号" prop="deviceSN" required>
|
||||
<el-input v-model="form.deviceSN" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="设备类型" prop="deviceType" required>
|
||||
<el-select v-model="form.deviceType" placeholder="选择设备类型">
|
||||
<el-option v-for="(item, index) in deviceTypeList" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="升级包地址" prop="url" required>
|
||||
<el-input v-model="form.url" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="版本号" prop="codeVer" required>
|
||||
<el-input v-model="form.codeVer" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="包大小(字节)" prop="size" required>
|
||||
<el-input v-model="form.size" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="签名类型" prop="signType" required>
|
||||
<el-select v-model="form.signType" placeholder="选择签名类型">
|
||||
<el-option v-for="(item, index) in signTypeList" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="签名" prop="sign" required>
|
||||
<el-input v-model="form.sign" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="包加密类型" prop="scType" required>
|
||||
<el-select v-model="form.scType" placeholder="选择包加密类型">
|
||||
<el-option v-for="(item, index) in scTypeList" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="设备型号" prop="productKey" required>
|
||||
<el-input v-model="form.productKey" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item class="btn-box">
|
||||
<el-button type="primary" @click="updateForm(formRef)">更新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import axios from 'axios';
|
||||
import config from '@renderer/util/config.js';
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const form = reactive({
|
||||
deviceSN: '',
|
||||
deviceType: 'device',
|
||||
url: '', //升级包路径
|
||||
codeVer: '', //升级包版本号
|
||||
size: '', //1024", //10进制字符串
|
||||
signType: 'md5',
|
||||
sign: '', //升级包md5
|
||||
scType: 'crc32', //包加密类型
|
||||
productKey: '' //设备型号
|
||||
});
|
||||
// const form = reactive({
|
||||
// "deviceSN": "D000000000000001",
|
||||
// "deviceType": "device",
|
||||
// "url": "http://111.bin",
|
||||
// "size": 1024,
|
||||
// "codeVer": "1.1.1.1.1.1.1.1",
|
||||
// "signType": "md5",
|
||||
// "sign": "sa51ear16a1er",
|
||||
// "scType": "crc32",
|
||||
// "productKey": "B7L-NET-G1(4G)"
|
||||
// });
|
||||
|
||||
const deviceTypeList = [
|
||||
{ value: 'device', label: '设备' },
|
||||
{ value: 'gateway', label: '网关' }
|
||||
];
|
||||
const signTypeList = [{ value: 'md5', label: 'md5' }];
|
||||
const scTypeList = [{ value: 'crc32', label: 'crc32' }];
|
||||
|
||||
const formRules = reactive({
|
||||
deviceSN: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
|
||||
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
|
||||
url: [{ required: true, message: '升级包路径不能为空', trigger: 'blur' }],
|
||||
codeVer: [{ required: true, message: '升级包版本号不能为空', trigger: 'blur' }],
|
||||
size: [{ required: true, message: '升级包大小不能为空', trigger: 'blur' }],
|
||||
signType: [{ required: true, message: '签名类型不能为空', trigger: 'blur' }],
|
||||
sign: [{ required: true, message: '签名不能为空', trigger: 'blur' }],
|
||||
scType: [{ required: true, message: '包加密类型不能为空', trigger: 'blur' }],
|
||||
productKey: [{ required: true, message: '设备型号不能为空', trigger: 'blur' }]
|
||||
});
|
||||
|
||||
const updateForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(valid => {
|
||||
if (valid) {
|
||||
axios
|
||||
.post(config.url + '/otaUpgrade',form)
|
||||
.then(response => {
|
||||
// 成功响应后的处理
|
||||
console.log(response); // 打印响应数据
|
||||
if (response.data.code == 0) {
|
||||
//缓存上下行主题
|
||||
ElMessage.success('固件更新成功');
|
||||
} else {
|
||||
if (response.data.code == 60) {
|
||||
}
|
||||
ElMessage.error(response.data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// 错误处理
|
||||
console.error(error); // 打印错误信息
|
||||
ElMessage.error(error);
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.btn-box {
|
||||
:deep(.el-form-item__content) {
|
||||
justify-content: end;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -200,6 +200,9 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="5" title="固件更新">
|
||||
<firmware-update />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div id="log-box" class="log-box" :class="isOpenLog ? 'open-log' : ''">
|
||||
|
|
@ -259,7 +262,7 @@
|
|||
</div>
|
||||
<div id="log-box-main" class="log-box-main">
|
||||
<div class="log-list">
|
||||
<div v-for="(item, index) in logList" :key="index" class="log-item">
|
||||
<div v-for="(item, index) in logList" :key="index" class="log-item" :style="{width: logItemWidth}">
|
||||
<span v-if="item.type == 'subscribe'" class="iconfont icon-icon_shanghang"></span>
|
||||
<span v-else-if="item.type == 'publish'" class="iconfont icon-icon_xiahang"></span>
|
||||
<span v-else-if="item.type == 'system'" class="iconfont icon-icon_xitong"></span>
|
||||
|
|
@ -282,15 +285,21 @@ import config from '@renderer/util/config.js';
|
|||
|
||||
import { reactive, ref, onMounted, computed, watch, onUnmounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import FirmwareUpdate from './components/FirmwareUpdate/index.vue'
|
||||
import switchSocket from '@renderer/util/socket.js';
|
||||
import { logWebSocketStore } from '@renderer/stores/logWebSocket.js';
|
||||
const webSocketStore = logWebSocketStore();
|
||||
|
||||
const activeFold = ref(['1', '3', '4']);
|
||||
const activeFold = ref(['1', '3', '4', '5']);
|
||||
const logList = ref([]);
|
||||
const logItemWidth = ref('auto');
|
||||
//连接状态
|
||||
const connectionState = ref(false);
|
||||
|
||||
const updateLogItemWidth = () => {
|
||||
logItemWidth.value = window.innerWidth - 180 - 80 + 'px';
|
||||
};
|
||||
|
||||
const getGuid = () => {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
var r = (Math.random() * 16) | 0,
|
||||
|
|
@ -952,7 +961,8 @@ const switchSocketStatus = computed(() => {
|
|||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initSocket();
|
||||
|
||||
updateLogItemWidth()
|
||||
window.addEventListener('resize',updateLogItemWidth)
|
||||
const storedMqttForm = localStorage.getItem('mqttForm');
|
||||
if (storedMqttForm) {
|
||||
Object.assign(mqttForm, JSON.parse(storedMqttForm));
|
||||
|
|
@ -964,6 +974,7 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize',updateLogItemWidth)
|
||||
webSocketStore.close();
|
||||
switchSocket.close();
|
||||
});
|
||||
|
|
@ -1034,6 +1045,10 @@ onUnmounted(() => {
|
|||
line-height: 26px;
|
||||
|
||||
.log-item {
|
||||
//width: 800px;
|
||||
//width: calc(window-width - 180px - 80px);
|
||||
word-wrap: break-word ;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
user-select: text;
|
||||
//display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue