feat(断路器): 添加断路器调试固件升级，调整页面布局

src/renderer/src/layout/index.vue

@@ -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;

src/renderer/src/views/system/switch/components/FirmwareUpdate/index.vue

@@ -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>

src/renderer/src/views/system/switch/index.vue

@@ -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;