From 206de9e618c1b2ea6417951ff40ca712502e2645 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Mon, 22 Jul 2024 15:51:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=A4=B4=E9=83=A8=E8=8F=9C=E5=8D=95=E7=9A=84?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=8E=A7=E5=88=B6=EF=BC=8C=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?dist=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/index.js                             |  302 ++---
 src/renderer/src/layout/Aside.vue             |   94 +-
 src/renderer/src/layout/Header.vue            |    1 +
 src/renderer/src/layout/index.vue             |   58 +-
 src/renderer/src/router/index.js              |  104 +-
 src/renderer/src/views/HomeView.vue           |   35 -
 src/renderer/src/views/switch/index.vue       | 1205 -----------------
 src/renderer/src/views/system/index.vue       |   35 +
 .../src/views/system/switch/index.vue         | 1100 +++++++++++++++
 9 files changed, 1412 insertions(+), 1522 deletions(-)
 delete mode 100644 src/renderer/src/views/HomeView.vue
 delete mode 100644 src/renderer/src/views/switch/index.vue
 create mode 100644 src/renderer/src/views/system/index.vue
 create mode 100644 src/renderer/src/views/system/switch/index.vue

diff --git a/src/main/index.js b/src/main/index.js
index 8327b65..20beef7 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,182 +1,182 @@
-import { app, shell, BrowserWindow, ipcMain, globalShortcut, dialog } from 'electron'
-import { join } from 'path'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import icon from '../../resources/icon.png?asset'
+import { app, shell, BrowserWindow, ipcMain, globalShortcut, dialog } from 'electron';
+import { join } from 'path';
+import { electronApp, optimizer, is } from '@electron-toolkit/utils';
+import icon from '../../resources/icon.png?asset';
 
 //关闭exe命令
 function killProcessByName(processName) {
-  const command = `taskkill /IM ${processName} /F`
-  const { exec } = require('child_process')
+	const command = `taskkill /IM ${processName} /F`;
+	const { exec } = require('child_process');
 
-  exec(command, (error, stdout, stderr) => {
-    if (error) {
-      console.error(`执行的错误: ${error}`)
-      return
-    }
-    console.log(`stdout: ${stdout}`)
-    console.error(`stderr: ${stderr}`)
-  })
+	exec(command, (error, stdout, stderr) => {
+		if (error) {
+			console.error(`执行的错误: ${error}`);
+			return;
+		}
+		console.log(`stdout: ${stdout}`);
+		console.error(`stderr: ${stderr}`);
+	});
 }
 
-app.commandLine.appendSwitch('disable-web-security')
+app.commandLine.appendSwitch('disable-web-security');
 function createWindow() {
-  // Create the browser window.
-  const mainWindow = new BrowserWindow({
-    width: 1100,
-    height: 700,
-    show: false,
-    autoHideMenuBar: true,
-    icon,
-    webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
-      sandbox: false,
-      nodeIntegration: true,
-      // 禁用同源策略，允许跨域请求
-      webSecurity: false,
-      contextIsolation: false,
-      csp: "default-src 'self'; connect-src 'self' *",
-      // 禁止build环境使用DevTool
-      // devTools: is.dev ? true : false
-      devTools: true
-    }
-  })
-  //开启调试
-  // mainWindow.webContents.openDevTools()
-  mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
-  })
+	// Create the browser window.
+	const mainWindow = new BrowserWindow({
+		width: 1100,
+		height: 700,
+		show: false,
+		autoHideMenuBar: true,
+		icon,
+		webPreferences: {
+			preload: join(__dirname, '../preload/index.js'),
+			sandbox: false,
+			nodeIntegration: true,
+			// 禁用同源策略，允许跨域请求
+			webSecurity: false,
+			contextIsolation: false,
+			csp: "default-src 'self'; connect-src 'self' *",
+			// 禁止build环境使用DevTool
+			// devTools: is.dev ? true : false
+			devTools: true
+		}
+	});
+	//开启调试
+	// mainWindow.webContents.openDevTools()
+	mainWindow.on('ready-to-show', () => {
+		mainWindow.show();
+	});
 
-  mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
-  // HMR for renderer base on electron-vite cli.
-  // Load the remote URL for development or the local html file for production.
-  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
-  } else {
-    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
-  }
+	mainWindow.webContents.setWindowOpenHandler(details => {
+		shell.openExternal(details.url);
+		return { action: 'deny' };
+	});
+	// HMR for renderer base on electron-vite cli.
+	// Load the remote URL for development or the local html file for production.
+	if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+		mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']);
+	} else {
+		mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
+	}
 
-  // 设置DevTools快捷键
-  // 设置DevTools快捷键
-  globalShortcut.register('CommandOrControl+Shift+i', function () {
-    mainWindow.webContents.openDevTools()
-  })
-  return mainWindow
+	// 设置DevTools快捷键
+	// 设置DevTools快捷键
+	globalShortcut.register('CommandOrControl+Shift+i', function () {
+		mainWindow.webContents.openDevTools();
+	});
+	return mainWindow;
 }
 
 // 程序单例模式
-let myWindow = null
-const gotTheLock = app.requestSingleInstanceLock()
+let myWindow = null;
+const gotTheLock = app.requestSingleInstanceLock();
 if (!gotTheLock) {
-  // 如果已经有同样的该程序正在运行，则不启动
-  app.quit()
+	// 如果已经有同样的该程序正在运行，则不启动
+	app.quit();
 } else {
-  // 如果检测到有同样的该程序正在试图启动...
-  app.on('second-instance', () => {
-    if (myWindow) {
-      // 弹出系统提示对话框
-      dialog.showMessageBox({
-        message: '此程序已经正在运行'
-      })
-      // 如果该程序窗口处于最小化状态，则恢复窗口
-      if (myWindow.isMinimized()) myWindow.restore()
-      // 将该程序窗口置为当前聚焦态
-      myWindow.focus()
-    }
-  })
+	// 如果检测到有同样的该程序正在试图启动...
+	app.on('second-instance', () => {
+		if (myWindow) {
+			// 弹出系统提示对话框
+			dialog.showMessageBox({
+				message: '此程序已经正在运行'
+			});
+			// 如果该程序窗口处于最小化状态，则恢复窗口
+			if (myWindow.isMinimized()) myWindow.restore();
+			// 将该程序窗口置为当前聚焦态
+			myWindow.focus();
+		}
+	});
 
-  // This method will be called when Electron has finished
-  // initialization and is ready to create browser windows.
-  // Some APIs can only be used after this event occurs.
-  const { spawn } = require('child_process')
-  let child = null
-  let exePluginsExeList = []
-  app.whenReady().then(() => {
-    const fs = require('fs')
-    const path = require('path')
+	// This method will be called when Electron has finished
+	// initialization and is ready to create browser windows.
+	// Some APIs can only be used after this event occurs.
+	const { spawn } = require('child_process');
+	let child = null;
+	let exePluginsExeList = [];
+	app.whenReady().then(() => {
+		const fs = require('fs');
+		const path = require('path');
 
-    const logStream = fs.createWriteStream('app.log', { flags: 'a' }) // 日志文件
-    let exePath = path.resolve('./resources/app.asar.unpacked/resources/service')
-    let exePluginsPath = path.resolve('./resources/app.asar.unpacked/resources/service/plugins')
-    //单独配置测试环境
-    if (process.env.NODE_ENV === 'development') {
-      exePath = path.resolve('./resources/service')
-      exePluginsPath = path.resolve('./resources/service/plugins')
-    }
+		const logStream = fs.createWriteStream('app.log', { flags: 'a' }); // 日志文件
+		let exePath = path.resolve('./resources/app.asar.unpacked/resources/service');
+		let exePluginsPath = path.resolve('./resources/app.asar.unpacked/resources/service/plugins');
+		//单独配置测试环境
+		if (process.env.NODE_ENV === 'development') {
+			exePath = path.resolve('./resources/service');
+			exePluginsPath = path.resolve('./resources/service/plugins');
+		}
 
-    //查询所有插件目录下的exe文件
-    fs.readdir(exePluginsPath, (err, files) => {
-      if (err) {
-        return console.log('Unable to scan directory: ' + err)
-      }
-      // 筛选出以.exe结尾的文件
-      exePluginsExeList = files.filter((file) => path.extname(file).toLowerCase() === '.exe')
-    })
+		//查询所有插件目录下的exe文件
+		fs.readdir(exePluginsPath, (err, files) => {
+			if (err) {
+				return console.log('Unable to scan directory: ' + err);
+			}
+			// 筛选出以.exe结尾的文件
+			exePluginsExeList = files.filter(file => path.extname(file).toLowerCase() === '.exe');
+		});
 
-    child = spawn('./main.exe', [], { cwd: exePath, stdio: ['ignore', 'pipe', 'pipe'] })
+		child = spawn('./main.exe', [], { cwd: exePath, stdio: ['ignore', 'pipe', 'pipe'] });
 
-    //监听进程的输出
-    child.stdout.on('data', (data) => {
-      console.log('stdout:', data.toString())
-      logStream.write(data)
-    })
+		//监听进程的输出
+		child.stdout.on('data', data => {
+			console.log('stdout:', data.toString());
+			logStream.write(data);
+		});
 
-    child.stderr.on('data', (data) => {
-      console.error('stderr:', data.toString())
-      logStream.write(data)
-    })
+		child.stderr.on('data', data => {
+			console.error('stderr:', data.toString());
+			logStream.write(data);
+		});
 
-    child.on('close', (code) => {
-      console.log(`子进程已退出，退出码 ${code}`)
-      logStream.end()
-    })
+		child.on('close', code => {
+			console.log(`子进程已退出，退出码 ${code}`);
+			logStream.end();
+		});
 
-    child.on('exit', (code, signal) => {
-      console.log(`子进程已退出，退出码 ${code}，信号： ${signal}`)
-      logStream.write(`子进程已退出，退出码 ${code}，信号： ${signal}`)
-      logStream.end()
-    })
+		child.on('exit', (code, signal) => {
+			console.log(`子进程已退出，退出码 ${code}，信号： ${signal}`);
+			logStream.write(`子进程已退出，退出码 ${code}，信号： ${signal}`);
+			logStream.end();
+		});
 
-    // Set app user model id for windows
-    electronApp.setAppUserModelId('com.electron')
+		// Set app user model id for windows
+		electronApp.setAppUserModelId('com.electron');
 
-    // Default open or close DevTools by F12 in development
-    // and ignore CommandOrControl + R in production.
-    // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
-    app.on('browser-window-created', (_, window) => {
-      optimizer.watchWindowShortcuts(window)
-    })
+		// Default open or close DevTools by F12 in development
+		// and ignore CommandOrControl + R in production.
+		// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+		app.on('browser-window-created', (_, window) => {
+			optimizer.watchWindowShortcuts(window);
+		});
 
-    // IPC test
-    ipcMain.on('ping', () => console.log('pong'))
+		// IPC test
+		ipcMain.on('ping', () => console.log('pong'));
 
-    myWindow = createWindow()
+		myWindow = createWindow();
 
-    app.on('activate', function () {
-      // On macOS it's common to re-create a window in the app when the
-      // dock icon is clicked and there are no other windows open.
-      if (BrowserWindow.getAllWindows().length === 0) createWindow()
-    })
-  })
+		app.on('activate', function () {
+			// On macOS it's common to re-create a window in the app when the
+			// dock icon is clicked and there are no other windows open.
+			if (BrowserWindow.getAllWindows().length === 0) createWindow();
+		});
+	});
 
-  // Quit when all windows are closed, except on macOS. There, it's common
-  // for applications and their menu bar to stay active until the user quits
-  // explicitly with Cmd + Q.
-  app.on('window-all-closed', () => {
-    if (process.platform !== 'darwin') {
-      // 循环关闭插件 EXE 列表
-      exePluginsExeList.forEach((exe) => {
-        killProcessByName(exe)
-      })
-      // child.kill('SIGTERM'); // 或者使用 'SIGKILL' 来强制关闭
-      // killProcessByName('gateway.exe');
-      // 循环关闭后端服务
-      killProcessByName('main.exe')
-      app.quit()
-    }
-  })
+	// Quit when all windows are closed, except on macOS. There, it's common
+	// for applications and their menu bar to stay active until the user quits
+	// explicitly with Cmd + Q.
+	app.on('window-all-closed', () => {
+		if (process.platform !== 'darwin') {
+			// 循环关闭插件 EXE 列表
+			exePluginsExeList.forEach(exe => {
+				killProcessByName(exe);
+			});
+			// child.kill('SIGTERM'); // 或者使用 'SIGKILL' 来强制关闭
+			// killProcessByName('gateway.exe');
+			// 循环关闭后端服务
+			killProcessByName('main.exe');
+			app.quit();
+		}
+	});
 }
 // In this file you can include the rest of your app"s specific main process
 // code. You can also put them in separate files and require them here.
diff --git a/src/renderer/src/layout/Aside.vue b/src/renderer/src/layout/Aside.vue
index d457b5c..4ae58f8 100644
--- a/src/renderer/src/layout/Aside.vue
+++ b/src/renderer/src/layout/Aside.vue
@@ -1,71 +1,63 @@
 <script setup>
-import { ref } from 'vue'
-
 const settings = defineProps({
-  collapse: Boolean,
-  width: String
-})
-
-
+	collapse: Boolean,
+	width: String
+});
 </script>
 
 <template>
-  <el-aside :width="settings.width">
-    <el-scrollbar>
-      <el-menu
-        default-active="/system/switch"
-        :collapse="settings.collapse"
-        :router="true"
-      >
-        <el-menu-item index="/system/switch"> <span class="iconfont icon-icon_duanluqi"></span> 断路器调试</el-menu-item>
-<!--        <el-menu-item index="/system/about"><span class="iconfont icon-icon_jiankong"></span> 视频监控</el-menu-item>-->
-<!--        <el-menu-item index="/test"><el-icon> <Menu /> </el-icon>测试</el-menu-item>-->
-      </el-menu>
-    </el-scrollbar>
-  </el-aside>
+	<el-aside :width="settings.width">
+		<el-scrollbar>
+			<el-menu default-active="/system/switch" :collapse="settings.collapse" :router="true">
+				<el-menu-item index="/system/switch"> <span class="iconfont icon-icon_duanluqi"></span> 断路器调试</el-menu-item>
+				<!--        <el-menu-item index="/system/about"><span class="iconfont icon-icon_jiankong"></span> 视频监控</el-menu-item>-->
+				<!--        <el-menu-item index="/system/test"><el-icon> <Menu /> </el-icon>测试</el-menu-item>-->
+			</el-menu>
+		</el-scrollbar>
+	</el-aside>
 </template>
 
 <style scoped lang="less">
 .el-aside {
-  height: 100vh;
-  overflow: hidden;
+	height: 100vh;
+	overflow: hidden;
 }
-.el-menu{
-  padding: 0 10px;
-  background: #fff;
+.el-menu {
+	padding: 0 10px;
+	background: #fff;
 }
-.el-menu-item{
-  border-radius: 10px;
-  background: #f2f2f2;
-  margin-bottom: 12px;
-  align-items: center;
-  padding: 0;
-  padding-left: 26px !important;
-  color: #333;
-  font-size: 16px;
-  .iconfont{
-    margin-right: 10px;
-    color: #999;
-    font-size: 22px;
-  }
+.el-menu-item {
+	border-radius: 10px;
+	background: #f2f2f2;
+	margin-bottom: 12px;
+	align-items: center;
+	padding: 0;
+	padding-left: 26px !important;
+	color: #333;
+	font-size: 16px;
+	.iconfont {
+		margin-right: 10px;
+		color: #999;
+		font-size: 22px;
+	}
 }
-.el-menu-item.is-active{
-  background: #4c94db;
-  border-radius: 10px;
-  /*margin: 0 10px;*/
-  color: #fff;
-  .iconfont{
-    color: #fff;
-  }
+.el-menu-item.is-active {
+	background: #4c94db;
+	border-radius: 10px;
+	/*margin: 0 10px;*/
+	color: #fff;
+	.iconfont {
+		color: #fff;
+	}
 }
 
 .el-scrollbar {
-  height: 100vh;
-  overflow: hidden;
-  /*background-color: #1a1c1e;*/
+	height: 100vh;
+	overflow: hidden;
+	/*background-color: #1a1c1e;*/
 }
 
 .el-menu {
-  border-right: none;
+	border-right: none;
 }
 </style>
diff --git a/src/renderer/src/layout/Header.vue b/src/renderer/src/layout/Header.vue
index 2dd262a..82c15dd 100644
--- a/src/renderer/src/layout/Header.vue
+++ b/src/renderer/src/layout/Header.vue
@@ -11,6 +11,7 @@
           router="true"
         >
           <el-menu-item index="/system">系统模板</el-menu-item>
+<!--          <el-menu-item index="/test">测试</el-menu-item>-->
         </el-menu>
       </div>
       <div class="haeder-right">
diff --git a/src/renderer/src/layout/index.vue b/src/renderer/src/layout/index.vue
index 269fd1f..0952bc2 100644
--- a/src/renderer/src/layout/index.vue
+++ b/src/renderer/src/layout/index.vue
@@ -1,41 +1,35 @@
-
 <template>
-  <el-container direction="vertical" style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
-    <Header></Header>
-    <el-container style="padding: 10px 0">
-      <Aside width="180px"></Aside>
-      <el-main>
-        <router-view v-slot="{ Component }">
-          <keep-alive>
-            <component :is="Component" />
-          </keep-alive>
-        </router-view>
-      </el-main>
-    </el-container>
-  </el-container>
+	<el-container direction="vertical" style="min-height: 100vh; min-width: 100vw; overflow: hidden">
+		<Header></Header>
+		<el-main>
+			<router-view v-slot="{ Component }">
+				<keep-alive>
+					<component :is="Component" />
+				</keep-alive>
+			</router-view>
+		</el-main>
+	</el-container>
 </template>
 
 <script setup>
 // 组件注册
-import Header from '@renderer/layout/Header.vue'
-import Aside from '@renderer/layout/Aside.vue'
+import Header from '@renderer/layout/Header.vue';
 </script>
 
 <style scoped>
-
-body{
-  background-color: #eee;
-  max-width: 100vw;
-}
-.el-container{
-  /*padding: 10px 0;*/
-}
-.el-main {
-  width: 100%;
-  padding: 0;
-  height: 100vh;
-  overflow-x: hidden;
-  background: #fff;
-  padding-right: 10px;
-}
+  body {
+    background-color: #eee;
+    max-width: 100vw;
+  }
+  .el-container {
+    /*padding: 10px 0;*/
+  }
+  .el-main {
+    width: 100%;
+    padding: 0;
+    height: 100vh;
+    overflow-x: hidden;
+    background: #fff;
+    padding-right: 10px;
+  }
 </style>
diff --git a/src/renderer/src/router/index.js b/src/renderer/src/router/index.js
index eba0455..d9db022 100644
--- a/src/renderer/src/router/index.js
+++ b/src/renderer/src/router/index.js
@@ -1,51 +1,59 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Layout from '@renderer/layout/index.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import Layout from '@renderer/layout/index.vue';
+import systenLayout from '@renderer/views/system/index.vue';
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    {
-      path: '/system',
-      name: 'system',
-      component: Layout,
-      redirect: {name: 'switch'},
-      children:[
-        {
-            path: 'switch',
-            name: 'switch',
-            component: () => import("@renderer/views/switch/index.vue"),
-            meta: {
-                menu: 'switch',
-                keepAlive: true,
-            }
-        },
-        {
-          path: 'about',
-          name: 'about',
-          component: () => import("@renderer/views/AboutView.vue"),
-          meta: {
-              menu: 'about',
-              keepAlive: true,
-          }
-        },
-        {
-          path: 'test',
-          name: 'test',
-          component: () => import("@renderer/views/test.vue"),
-          meta: {
-            menu: 'test',
-            keepAlive: true,
-          }
-        },
+	history: createWebHistory(),
+	routes: [
+		{
+			path: '/',
+			component: Layout,
+			meta: { title: '整体页面布局' },
+			redirect: '/system',
+			children: [
+				{
+					path: '/system',
+					name: 'system',
+					component: systenLayout,
+					redirect: { name: 'switch' },
+					children: [
+						{
+							path: 'switch',
+							name: 'switch',
+							component: () => import('@renderer/views/system/switch/index.vue'),
+							meta: {
+								menu: 'switch',
+								keepAlive: true
+							}
+						},
+						{
+							path: 'about',
+							name: 'about',
+							component: () => import('@renderer/views/AboutView.vue'),
+							meta: {
+								menu: 'about',
+								keepAlive: true
+							}
+						},
+						{
+							path: 'test',
+							name: 'test',
+							component: () => import('@renderer/views/test.vue'),
+							meta: {
+								menu: 'test',
+								keepAlive: true
+							}
+						}
+					]
+				}
+			]
+		},
+		{
+			path: '/', // 这个是根路由，现在我们让它重定向到 /system
+			redirect: '/system'
+		},
+		{ path: '/:pathMatch(.*)', redirect: '/' }
+	]
+});
 
-      ]
-    },
-    {
-      path: '/', // 这个是根路由，现在我们让它重定向到 /system
-      redirect: '/system',
-    },
-    { path: '/:pathMatch(.*)', redirect: '/' },
-  ]
-})
-
-export default router
+export default router;
diff --git a/src/renderer/src/views/HomeView.vue b/src/renderer/src/views/HomeView.vue
deleted file mode 100644
index a80d54b..0000000
--- a/src/renderer/src/views/HomeView.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-// 组件注册
-import Header from '@renderer/components/Header.vue'
-import Aside from '@renderer/components/Aside.vue'
-</script>
-<template>
-  <el-container direction="vertical" style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
-    <Header></Header>
-    <el-container >
-      <Aside width="160px"></Aside>
-      <el-main>
-        <router-view v-slot="{ Component }">
-          <keep-alive>
-            <component :is="Component" />
-          </keep-alive>
-        </router-view>
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-<style scoped>
-
-body{
-  background-color: #eee;
-  max-width: 100vw;
-}
-
-.el-main {
-  width: 100%;
-  padding: 0;
-  height: 100vh;
-  overflow-x: hidden;
-  background: #f6f6f6;
-}
-</style>
diff --git a/src/renderer/src/views/switch/index.vue b/src/renderer/src/views/switch/index.vue
deleted file mode 100644
index ff0c751..0000000
--- a/src/renderer/src/views/switch/index.vue
+++ /dev/null
@@ -1,1205 +0,0 @@
-<template>
-  <div id="switch-box">
-    <div class="switch-main" id="switch-main" :class="isOpenLog?'open-log':''">
-      <el-collapse v-model="activeFold" @change="foldChange">
-        <el-collapse-item name="1" title="Mqtt设置">
-          <el-form
-            ref="mqttFormRef"
-            :model="mqttForm"
-            :rules="mqttRules"
-            class="demo-mqttForm"
-            label-width="auto"
-            status-icon
-          >
-            <el-form-item label="Client ID" prop="clientId" required>
-              <el-input
-                v-model="mqttForm.clientId"
-                :disabled="connectionState"
-                autocomplete="off"
-                type="text"
-              />
-            </el-form-item>
-            <el-form-item label="Host" prop="host" required>
-              <el-input
-                v-model="mqttForm.host"
-                :disabled="connectionState"
-                autocomplete="off"
-                type="text"
-              />
-            </el-form-item>
-            <el-form-item label="Port" prop="port" required>
-              <el-input
-                v-model="mqttForm.port"
-                :disabled="connectionState"
-                autocomplete="off"
-                type="text"
-              />
-            </el-form-item>
-            <el-form-item label="path" prop="path">
-              <el-input
-                v-model="mqttForm.path"
-                :disabled="connectionState"
-                autocomplete="off"
-                type="text"
-              />
-            </el-form-item>
-            <el-form-item label="Username" prop="userName" required>
-              <el-input
-                v-model="mqttForm.userName"
-                :disabled="connectionState"
-                autocomplete="off"
-                type="text"
-              />
-            </el-form-item>
-            <el-form-item label="Password" prop="passWord" required>
-              <el-input
-                v-model="mqttForm.passWord"
-                :disabled="connectionState"
-                autocomplete="off"
-                type="passWord"
-              />
-            </el-form-item>
-            <el-form-item class="btn-box">
-              <el-button :disabled="!connectionState" type="danger" @click="disconnMqtt"
-                >断开
-              </el-button>
-              <el-button :disabled="connectionState" @click="testMqtt(mqttFormRef)">测试</el-button>
-              <el-button :disabled="connectionState" type="primary" @click="runMqtt(mqttFormRef)"
-                >连接
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-collapse-item>
-        <el-collapse-item name="2" title="设备信息">
-          <el-form
-            ref="gatewayFormRef"
-            :model="gatewayForm"
-            :rules="gatewayRules"
-            class="demo-gatewayForm"
-            label-width="auto"
-            status-icon
-          >
-            <el-form-item label="网关" prop="gateway" required>
-              <el-input v-model="gatewayForm.gateway" autocomplete="off" type="text" />
-            </el-form-item>
-            <el-form-item label="上行主题" prop="subscribeTopic" required>
-              <el-input v-model="gatewayForm.subscribeTopic" autocomplete="off" type="text" />
-            </el-form-item>
-            <el-form-item label="下行主题" prop="publishTopic" required>
-              <el-input v-model="gatewayForm.publishTopic" autocomplete="off" type="text" />
-            </el-form-item>
-            <el-form-item class="btn-box">
-              <el-button type="primary" @click="updateGateway(gatewayFormRef)">更新</el-button>
-            </el-form-item>
-          </el-form>
-        </el-collapse-item>
-        <el-collapse-item name="3" title="属性操作">
-          <el-tabs type="border-card">
-            <el-tab-pane label="属性读取">
-              <el-form :model="attrReadForm" label-width="auto">
-                <el-row>
-                  <el-col :span="10">
-                    <el-form-item label="设备号">
-                      <el-input v-model="attrReadForm.deviceSN" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="10" :offset="1" class="text-center">
-                    <el-form-item label="属性">
-                      <el-select
-                        v-model="attrReadForm.attrName"
-                        multiple
-                        placeholder="选择属性"
-                        @change="attrReadChange"
-                      >
-                        <el-option
-                          v-for="(item, index) in attrList"
-                          :key="index"
-                          :label="item.name"
-                          :value="index"
-                        />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="3"  style="text-align: right">
-                    <el-button type="primary" @click="addReadAttr">新增属性</el-button>
-                  </el-col>
-                </el-row>
-                <div class="attr-list">
-                  <el-row v-for="item in attrReadList" :key="item.id">
-                    <el-col :span="7">
-                      <el-form-item label="属性名">
-                        <el-input v-model="item.name" :disabled="item.disable" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="7">
-                      <el-form-item label="Addr">
-                        <el-input v-model="item.addr" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="7">
-                      <el-form-item label="Len">
-                        <el-input v-model="item.len" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col v-if="!item.disable" :span="3" style="text-align: right">
-                      <el-button type="danger" @click="delReadAttr(item.id)">删除</el-button>
-                    </el-col>
-                  </el-row>
-                </div>
-                <el-form-item label="Data">
-                  <el-input v-model="attrReadTextrea" type="textarea" />
-                </el-form-item>
-                <el-form-item class="btn-box">
-                  <el-button type="primary" @click="readAttr(attrReadForm)">读取</el-button>
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-            <el-tab-pane label="属性写入">
-              <el-form :model="attrWriteForm" label-width="auto">
-                <el-row>
-                  <el-col :span="10">
-                    <el-form-item label="设备号">
-                      <el-input v-model="attrWriteForm.deviceSN" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="10" :offset="1" class="text-center">
-                    <el-form-item label="属性">
-                      <el-select
-                        v-model="attrWriteForm.attrName"
-                        multiple
-                        placeholder="选择属性"
-                        @change="attrWriteChange"
-                      >
-                        <el-option
-                          v-for="(item, index) in attrList"
-                          :key="index"
-                          :label="item.name"
-                          :value="index"
-                        />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="3" style="text-align: right">
-                    <el-button type="primary" @click="addWriteAttr">新增属性</el-button>
-                  </el-col>
-                </el-row>
-                <div class="attr-list">
-                  <el-row v-for="item in attrWriteList" :key="item.id">
-                    <el-col :span="5">
-                      <el-form-item label="属性名">
-                        <el-input v-model="item.name" :disabled="item.disable" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                      <el-form-item label="Addr">
-                        <el-input v-model="item.addr" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                      <el-form-item label="Len">
-                        <el-input v-model="item.len" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                      <el-form-item label="data">
-                        <el-input v-model="item.data" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col v-if="!item.disable" :span="3" style="text-align: right">
-                      <el-button type="danger" @click="delWriteAttr(item.id)">删除</el-button>
-                    </el-col>
-                  </el-row>
-                </div>
-                <el-form-item label="Data">
-                  <el-input v-model="attrWriteTextrea" type="textarea" />
-                </el-form-item>
-                <el-form-item class="btn-box">
-                  <el-button type="primary" @click="writeAttr(attrWriteForm)">写入</el-button>
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-          </el-tabs>
-        </el-collapse-item>
-        <el-collapse-item name="4" title="功能操作">
-          <el-form :model="functionForm" label-width="auto">
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="设备号">
-                  <el-input v-model="functionForm.deviceSN" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12" class="text-center">
-                <el-form-item label="功能">
-                  <el-select
-                    v-model="functionForm.attrName"
-                    placeholder="选择功能"
-                    @change="functionChange"
-                  >
-                    <el-option
-                      v-for="(item, index) in functionList"
-                      :key="index"
-                      :label="item.name"
-                      :value="index"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <div v-if="functionForm.selectAttr.length > 0" class="attr-list">
-              <el-row>
-                <el-col :span="6">
-                  <el-form-item label="功能名">
-                    <el-input
-                      v-model="functionForm.selectAttr[0].name"
-                      :disabled="functionForm.selectAttr[0].disabled"
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="Addr">
-                    <el-input v-model="functionForm.selectAttr[0].addr" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="Len">
-                    <el-input v-model="functionForm.selectAttr[0].len" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="data">
-                    <el-input v-model="functionForm.selectAttr[0].data" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </div>
-            <el-form-item label="Data">
-              <el-input v-model="functionTextrea" type="textarea" />
-            </el-form-item>
-            <el-form-item class="btn-box">
-              <el-button type="primary" @click="functionWrite(functionForm)">操作</el-button>
-            </el-form-item>
-          </el-form>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-    <div class="log-box" id="log-box" :class="isOpenLog?'open-log':''">
-      <div class="log-box-header">
-        <div class="log-box-title">日志</div>
-        <div class="log-box-operate">
-          <view class="log-box-operate-item">
-            <div>mqtt状态：</div>
-            <div v-if="connectionState" style="color: #00A73C; display: flex; align-items: center">
-              连接
-            </div>
-            <div
-              v-else
-              style="color: #FF3B2B; display: flex; align-items: center"
-              @click="runMqtt(mqttFormRef)"
-            >
-              断连
-              <span class="iconfont icon-icon_gengxin"></span>
-            </div>
-          </view>
-          <view class="log-box-operate-item">
-            <div>日志状态：</div>
-            <div v-if="socketStatus" style="color: #00A73C; display: flex; align-items: center">
-              连接
-            </div>
-            <div
-              v-else
-              style="color: #FF3B2B; display: flex; align-items: center"
-              @click="initSocket"
-            >
-              断连
-              <span class="iconfont icon-icon_gengxin"></span>
-            </div>
-          </view>
-<!--          <view class="log-box-operate-item">-->
-<!--            <div>断路器状态：</div>-->
-<!--            <div v-if="switchSocketStatus" style="color: #00A73C; display: flex; align-items: center">-->
-<!--              连接-->
-<!--            </div>-->
-<!--            <div-->
-<!--              v-else-->
-<!--              style="color: #FF3B2B; display: flex; align-items: center"-->
-<!--              @click="initSwitchSocket"-->
-<!--            >-->
-<!--              断连-->
-<!--              <span class="iconfont icon-icon_gengxin"></span>-->
-<!--            </div>-->
-<!--          </view>-->
-          <view class="log-box-operate-item" @click="toggleOpenLog">
-            <el-tooltip
-              v-if="isOpenLog"
-              class="box-item"
-              content="收缩日志"
-              effect="dark"
-              placement="bottom"
-            >
-              <span class="iconfont icon-up-arrow"></span>
-            </el-tooltip>
-            <el-tooltip v-else class="box-item" content="展开日志" effect="dark" placement="bottom">
-              <span class="iconfont icon-shousuoshangjiantou"></span>
-            </el-tooltip>
-          </view>
-          <view class="log-box-operate-item" @click="toggleIsScroll">
-            <el-tooltip
-              v-if="isScroll"
-              class="box-item"
-              content="关闭滚动"
-              effect="dark"
-              placement="bottom"
-            >
-              <span class="iconfont icon-unlock"></span>
-            </el-tooltip>
-            <el-tooltip v-else class="box-item" content="开启滚动" effect="dark" placement="bottom">
-              <span class="iconfont icon-icon_suoding"></span>
-            </el-tooltip>
-          </view>
-          <view class="log-box-operate-item" @click="clearLog">
-            <span class="iconfont icon-icon_shanchu"></span>
-          </view>
-        </div>
-      </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">
-            <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>
-            <span v-else class="iconfont icon-icon_xiaoxi"></span>
-            &nbsp;&nbsp;{{ item.time }}&nbsp;&nbsp;&nbsp;&nbsp; {{ item.msg }}
-            <el-tooltip class="box-item" content="复制" effect="dark" placement="bottom">
-              <span class="iconfont icon-icon_fuzhi" @click="copyMsg(item.msg)"></span>
-            </el-tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import axios from 'axios' // 引入axios
-import dayjs from 'dayjs'
-import config from '@renderer/util/config.js'
-
-import { reactive, ref, onMounted, computed, watch, onUnmounted } from 'vue'
-import { ElMessage } from 'element-plus'
-import switchSocket from '@renderer/util/socket.js'
-import { logWebSocketStore } from '@renderer/stores/logWebSocket.js'
-const webSocketStore = logWebSocketStore()
-
-const activeFold = ref(['1','3','4'])
-const logList = ref([])
-//连接状态
-const connectionState = ref(false)
-
-const getGuid = () => {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = (Math.random() * 16) | 0,
-      v = c == 'x' ? r : (r & 0x3) | 0x8
-    return v.toString(16)
-  })
-}
-const isScroll = ref(true)
-const isOpenLog = ref(false)
-const mqttFormRef = ref()
-// const mqttForm = reactive({
-//   clientId: '',
-//   host: '',
-//   port: '',
-//   path: '',
-//   userName: '',
-//   passWord: '',
-// })
-const mqttForm = reactive({
-  clientId: 'mqtt_local',
-  host: '123.60.30.87',
-  port: '8017',
-  path: '',
-  userName: 'admin',
-  passWord: 'gy2024'
-})
-
-const mqttRules = reactive({
-  clientId: [{ required: true, message: 'clientId 不能为空', trigger: 'blur' }],
-  host: [{ required: true, message: 'host 不能为空', trigger: 'blur' }],
-  port: [{ required: true, message: 'port 不能为空', trigger: 'blur' }],
-  // path: [{ required: true, message: 'path 不能为空', trigger: 'blur' }],
-  userName: [{ required: true, message: 'userName 不能为空', trigger: 'blur' }],
-  passWord: [{ required: true, message: 'passWord 不能为空', trigger: 'blur' }]
-})
-
-const gatewayFormRef = ref()
-// const gatewayForm = reactive({
-//   gateway: '',
-//   subscribeTopic: '',
-//   publishTopic: ''
-// })
-const gatewayForm = reactive({
-  gateway: 'DF01a683a08cf140',
-  subscribeTopic: '/minternet/data',
-  publishTopic: '/minternet/DF01a683a08cf140'
-})
-const gatewayRules = reactive({
-  gateway: [{ required: true, message: '网关不能为空', trigger: 'blur' }],
-  subscribeTopic: [{ required: true, message: '上行主题不能为空', trigger: 'blur' }],
-  publishTopic: [{ required: true, message: '下行主题不能为空', trigger: 'blur' }]
-})
-
-// 设备属性
-const attrList = [
-  {
-    id: 1,
-    name: '芯片ID',
-    addr: '0',
-    len: '16',
-    data: ''
-  },
-  {
-    id: 2,
-    name: '设备序列号（SN）',
-    addr: '4',
-    len: '12',
-    data: ''
-  },
-  {
-    id: 3,
-    name: '产品主型号',
-    addr: '12',
-    len: '16',
-    data: ''
-  },
-  {
-    id: 4,
-    name: '产品次型号',
-    addr: '16',
-    len: '16',
-    data: ''
-  }
-]
-/* 属性读写 */
-const attrReadForm = reactive({
-  deviceSN: '',
-  attrName: [],
-  selectAttr: [],
-  addAttr: [],
-  textrea: ''
-})
-
-// 一个计算属性 ref
-const attrReadList = computed(() => {
-  let list = [...attrReadForm.selectAttr]
-  list.push(...attrReadForm.addAttr)
-  return list
-})
-
-const attrReadTextrea = computed(() => {
-  if (attrReadList.value.length > 0) {
-    let list = attrReadList.value.map((item) => {
-      return {
-        name: item.name,
-        addr: item.addr,
-        len: item.len
-      }
-    })
-    return JSON.stringify(list)
-  } else {
-    return '[]'
-  }
-})
-
-// 监听 attrReadList 的变化，以更新 textrea
-watch(
-  attrReadList,
-  () => {
-    attrReadForm.textrea = attrReadTextrea.value
-  },
-  { deep: true }
-)
-//属性写入
-const attrWriteForm = reactive({
-  deviceSN: '',
-  attrName: [],
-  selectAttr: [],
-  addAttr: []
-})
-
-// 一个计算属性 ref
-const attrWriteList = computed(() => {
-  let list = [...attrWriteForm.selectAttr]
-  list.push(...attrWriteForm.addAttr)
-  return list
-})
-
-const attrWriteTextrea = computed(() => {
-  if (attrWriteList.value.length > 0) {
-    let list = attrWriteList.value.map((item) => {
-      return {
-        name: item.name,
-        addr: item.addr,
-        len: item.len,
-        data: item.data
-      }
-    })
-    return JSON.stringify(list)
-  } else {
-    return '[]'
-  }
-})
-
-/*功能操作*/
-const functionList = [
-  {
-    id: 1,
-    name: '开闸',
-    addr: 10,
-    len: 2,
-    data: '00',
-    disabled: true
-  },
-  {
-    id: 2,
-    name: '合闸',
-    addr: 10,
-    len: 2,
-    data: '01',
-    disabled: true
-  },
-  {
-    id: 3,
-    name: '自定义',
-    addr: '',
-    len: '',
-    data: '',
-    disabled: false
-  }
-]
-
-const functionForm = reactive({
-  deviceSN: '',
-  attrName: null,
-  selectAttr: []
-})
-
-const functionTextrea = computed(() => {
-  if (functionForm.selectAttr.length > 0) {
-    let list = functionForm.selectAttr.map((item) => {
-      return {
-        name: item.name,
-        addr: item.addr,
-        len: item.len,
-        data: item.data
-      }
-    })
-    return JSON.stringify(list)
-  } else {
-    return '[]'
-  }
-})
-
-//折叠变化
-const foldChange = (val) => {
-  console.log(val)
-}
-
-/* mqtt设置 */
-//断开
-const disconnMqtt = () => {
-  axios
-    .get(config.url + '/mqtt/disconn', {
-      // 发起GET请求
-      params: {
-        clientId: mqttForm.clientId
-      }
-    })
-    .then((response) => {
-      // 成功响应后的处理
-      console.log(response) // 打印响应数据
-      if (response.data.code == 0) {
-        ElMessage.success('断开成功')
-        connectionState.value = false
-      } else {
-        if (response.data.code == 60) {
-          connectionState.value = false
-        }
-        ElMessage.error(response.data.message)
-      }
-    })
-    .catch((error) => {
-      // 错误处理
-      console.error(error) // 打印错误信息
-      ElMessage.error(error)
-    })
-}
-
-//测试
-const testMqtt = (formEl) => {
-  if (!formEl) return
-  formEl.validate((valid) => {
-    if (valid) {
-      axios
-        .get(config.url + '/mqtt/connTest', {
-          // 发起GET请求
-          params: mqttForm
-        })
-        .then((response) => {
-          // 成功响应后的处理
-          console.log(response) // 打印响应数据
-          if (response.data.code == 0) {
-            ElMessage.success('测试成功')
-          } else {
-            if (response.data.code == 60) {
-              connectionState.value = false
-            }
-            ElMessage.error(response.data.message)
-          }
-        })
-        .catch((error) => {
-          // 错误处理
-          console.error(error) // 打印错误信息
-          ElMessage.error(error)
-        })
-    } else {
-      console.log('error submit!')
-    }
-  })
-}
-
-//运行
-const runMqtt = (formEl) => {
-  if (!formEl) return
-  formEl.validate((valid) => {
-    if (valid) {
-      axios
-        .get(config.url + '/mqtt/conn', {
-          // 发起GET请求
-          params: mqttForm
-        })
-        .then((response) => {
-          // 成功响应后的处理
-          console.log(response) // 打印响应数据
-          if (response.data.code == 0) {
-            ElMessage.success('连接成功')
-            if(!switchSocketStatus.value){
-              initSwitchSocket()
-            }
-
-            //缓存已成功连接
-            localStorage.setItem('mqttForm', JSON.stringify(mqttForm))
-            connectionState.value = true
-            activeFold.value = activeFold.value.filter((item) => item !== '1')
-            if (!activeFold.value.includes('2')) {
-              // 如果没有，就在头部添加1
-              activeFold.value.unshift('2')
-            }
-          } else {
-            if (response.data.code == 60) {
-              connectionState.value = false
-            }
-            ElMessage.error(response.data.message)
-          }
-        })
-        .catch((error) => {
-          // 错误处理
-          console.error(error) // 打印错误信息
-          ElMessage.error(error)
-        })
-    } else {
-      console.log('error submit!')
-    }
-  })
-}
-
-//更新
-const updateGateway = (formEl) => {
-  if (!formEl) return
-  formEl.validate((valid) => {
-    if (valid) {
-      console.log('submit!', gatewayForm)
-      axios
-        .get(config.url + '/updateListen', {
-          // 发起GET请求
-          params: gatewayForm
-        })
-        .then((response) => {
-          // 成功响应后的处理
-          console.log(response) // 打印响应数据
-          if (response.data.code == 0) {
-            //缓存上下行主题
-            localStorage.setItem('gatewayForm', JSON.stringify(gatewayForm))
-            ElMessage.success('更新成功')
-            activeFold.value = activeFold.value.filter((item) => item !== '2')
-            if (!activeFold.value.includes('3')) {
-              // 如果没有，就在头部添加1
-              activeFold.value.unshift('3')
-            }
-          } else {
-            if (response.data.code == 60) {
-              connectionState.value = false
-            }
-            ElMessage.error(response.data.message)
-          }
-        })
-        .catch((error) => {
-          // 错误处理
-          console.error(error) // 打印错误信息
-          ElMessage.error(error)
-        })
-    } else {
-      console.log('error submit!')
-    }
-  })
-}
-
-/*设备属性*/
-
-/*设备读取*/
-const attrReadChange = (selectedIndexs) => {
-  // 创建一个Set来存储已选择的属性名称
-  const selected = new Set(selectedIndexs.map((item) => attrList[item].name))
-  // 更新selectAttr，保留已选择的属性，移除未选择的属性
-  attrReadForm.selectAttr = attrReadForm.selectAttr.filter((attr) => selected.has(attr.name))
-  // 添加新选择的属性
-  attrList.forEach((attr) => {
-    if (selected.has(attr.name) && !attrReadForm.selectAttr.some((a) => a.name === attr.name)) {
-      attrReadForm.selectAttr.push({ ...attr, disable: true })
-    }
-  })
-}
-
-const addReadAttr = () => {
-  attrReadForm.addAttr.push({
-    id: getGuid(),
-    name: '',
-    addr: '',
-    len: '',
-    data: '',
-    disable: false
-  })
-}
-
-const delReadAttr = (id) => {
-  attrReadForm.addAttr.forEach((item, index) => {
-    if (item.id === id) {
-      attrReadForm.addAttr.splice(index, 1)
-    }
-  })
-}
-
-const readAttr = (from) => {
-  let flag = false
-  attrReadList.value.forEach((item) => {
-    if (!item.addr) {
-      flag = true
-    } else if (!item.len) {
-      flag = true
-    }
-  })
-  if (flag) {
-    ElMessage({
-      message: '请输入完整属性',
-      type: 'error'
-    })
-  } else if (!attrReadForm.deviceSN) {
-    ElMessage({
-      message: '请输入设备号',
-      type: 'error'
-    })
-  } else if (attrReadTextrea.value == '[]') {
-    ElMessage({
-      message: '请新增和选择属性',
-      type: 'error'
-    })
-  } else {
-    console.log('验证通过', JSON.parse(attrReadTextrea.value))
-    let params = {
-      deviceSN: attrReadForm.deviceSN,
-      data: JSON.parse(attrReadTextrea.value)
-    }
-    axios
-      .post(config.url + '/readParam', params)
-      .then((response) => {
-        // 成功响应后的处理
-        console.log(response) // 打印响应数据
-        if (response.data.code == 0) {
-          ElMessage.success('指令发送成功')
-        } else {
-          if (response.data.code == 60) {
-            connectionState.value = false
-          }
-          ElMessage.error(response.data.message)
-        }
-      })
-      .catch((error) => {
-        // 错误处理
-        console.error(error) // 打印错误信息
-        ElMessage.error(error)
-      })
-  }
-  console.log(from)
-}
-
-/*设备写入*/
-const attrWriteChange = (selectedIndexs) => {
-  // 创建一个Set来存储已选择的属性名称
-  const selected = new Set(selectedIndexs.map((item) => attrList[item].name))
-  // 更新selectAttr，保留已选择的属性，移除未选择的属性
-  attrWriteForm.selectAttr = attrWriteForm.selectAttr.filter((attr) => selected.has(attr.name))
-  // 添加新选择的属性
-  attrList.forEach((attr) => {
-    if (selected.has(attr.name) && !attrWriteForm.selectAttr.some((a) => a.name === attr.name)) {
-      attrWriteForm.selectAttr.push({ ...attr, disable: true })
-    }
-  })
-}
-
-const addWriteAttr = () => {
-  attrWriteForm.addAttr.push({
-    id: getGuid(),
-    name: '',
-    addr: '',
-    len: '',
-    data: '',
-    disable: false
-  })
-}
-
-const delWriteAttr = (id) => {
-  attrWriteForm.addAttr.forEach((item, index) => {
-    if (item.id === id) {
-      attrWriteForm.addAttr.splice(index, 1)
-    }
-  })
-}
-
-const writeAttr = (from) => {
-  let flag = false
-  attrWriteList.value.forEach((item) => {
-    if (!item.addr) {
-      flag = true
-    } else if (!item.len) {
-      flag = true
-    } else if (!item.data) {
-      flag = true
-    }
-  })
-  if (flag) {
-    ElMessage({
-      message: '请输入完整属性',
-      type: 'error'
-    })
-  } else if (!attrWriteForm.deviceSN) {
-    ElMessage({
-      message: '请输入设备号',
-      type: 'error'
-    })
-  } else if (attrWriteTextrea.value == '[]') {
-    ElMessage({
-      message: '请新增和选择属性',
-      type: 'error'
-    })
-  } else {
-    console.log('验证通过')
-    let params = {
-      deviceSN: attrWriteForm.deviceSN,
-      data: JSON.parse(attrWriteTextrea.value)
-    }
-    axios
-      .post(config.url + '/writeParam', params)
-      .then((response) => {
-        // 成功响应后的处理
-        if (response.data.code == 0) {
-          ElMessage.success('指令发送成功')
-        } else {
-          if (response.data.code == 60) {
-            connectionState.value = false
-          }
-          ElMessage.error(response.data.message)
-        }
-      })
-      .catch((error) => {
-        // 错误处理
-        console.error(error) // 打印错误信息
-        ElMessage.error(error)
-      })
-  }
-  console.log(from)
-}
-
-/*功能操作*/
-const functionChange = (index) => {
-  functionForm.selectAttr = [functionList[index]]
-}
-
-const functionWrite = (from) => {
-  let data = functionForm.selectAttr[0]
-
-  if (!functionForm.deviceSN) {
-    ElMessage({
-      message: '请输入设备号',
-      type: 'error'
-    })
-  } else if (functionTextrea.value == '[]') {
-    ElMessage({
-      message: '请新增和选择属性',
-      type: 'error'
-    })
-  } else if (!data.addr) {
-    ElMessage({
-      message: '请输入addr',
-      type: 'error'
-    })
-  } else if (!data.len) {
-    ElMessage({
-      message: '请输入len',
-      type: 'error'
-    })
-  } else if (!data.data) {
-    ElMessage({
-      message: '请输入data',
-      type: 'error'
-    })
-  } else {
-    console.log('验证通过', functionForm.selectAttr)
-    let params = {
-      deviceSN: attrReadForm.deviceSN,
-      data: functionForm.selectAttr
-    }
-    axios
-      .post(config.url + '/writeFunc', params)
-      .then((response) => {
-        // 成功响应后的处理
-        console.log(response) // 打印响应数据
-        if (response.data.code == 0) {
-          ElMessage.success('指令发送成功')
-        } else {
-          if (response.data.code == 60) {
-            connectionState.value = false
-          }
-          ElMessage.error(response.data.message)
-        }
-      })
-      .catch((error) => {
-        // 错误处理
-        console.error(error) // 打印错误信息
-        ElMessage.error(error)
-      })
-  }
-  console.log(from)
-}
-const clearLog = () => {
-  logList.value = []
-}
-
-const getSocketMeassage = (message) => {
-  let msg = JSON.parse(message.data)
-  if (msg.msgType !== undefined) {
-    logList.value.push({
-      time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-      msg: msg.data,
-      type: msg.msgType
-    })
-  } else {
-    logList.value.push({
-      time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-      msg,
-      type: null
-    })
-  }
-  if (isScroll.value) {
-    setTimeout(() => {
-      let div = document.querySelector('#log-box-main')
-      div.scrollTop = div.scrollHeight
-    }, 200)
-  }
-}
-
-const copyMsg = async (txt) => {
-  try {
-    // 将文本写入剪贴板
-    await navigator.clipboard.writeText(JSON.stringify(txt))
-    ElMessage.success('复制成功')
-  } catch (err) {
-    // 处理可能的错误，例如权限被拒绝
-    ElMessage.error('复制失败')
-  }
-}
-
-const toggleIsScroll = () => {
-  isScroll.value = !isScroll.value
-}
-
-const toggleOpenLog = () => {
-  isOpenLog.value = !isOpenLog.value
-}
-
-const initSocket = () => {
-  webSocketStore.init(getSocketMeassage)
-}
-
-const initSwitchSocket = () => {
-  switchSocket.init(getSocketMeassage)
-}
-
-// socket连接状态
-const socketStatus = computed(() => {
-  return webSocketStore.socket_open
-})
-
-// socket连接状态
-const switchSocketStatus = computed(() => {
-  return switchSocket.socket_open
-})
-
-// 生命周期钩子
-onMounted(() => {
-  initSocket()
-
-  const storedMqttForm = localStorage.getItem('mqttForm')
-  if (storedMqttForm) {
-    Object.assign(mqttForm, JSON.parse(storedMqttForm))
-  }
-  const storedgatewayForm = localStorage.getItem('gatewayForm')
-  if (storedgatewayForm) {
-    Object.assign(gatewayForm, JSON.parse(storedgatewayForm))
-  }
-})
-
-onUnmounted(() => {
-  webSocketStore.close()
-  switchSocket.close()
-})
-</script>
-
-<style lang="less" scoped>
-/* 样式可以在这里定义 */
-#switch-box {
-  height: 100%;
-  position: relative;
-  padding-bottom: 5px;
-  .switch-main {
-    height: calc(100% - 188px - 60px);
-    overflow-y: auto;
-    border-radius: 10px;
-    background: #f2f2f2;
-    &.open-log{
-      height: calc(50% - 42px);
-    }
-  }
-
-  .log-box {
-    border-radius: 10px;
-    height: 160px;
-    margin-top: 10px;
-    //border: 1px solid #2d1ca9;
-    color: #333;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    &.open-log{
-      height: calc(50% - 42px);
-    }
-    .log-box-header {
-      height: 42px;
-      padding: 0 30px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 28px;
-      background: #e6e6e6;
-      font-family: Source Han Sans CN;
-      color: #333333;
-
-      .log-box-operate {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-
-        .log-box-operate-item {
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          margin-left: 15px;
-        }
-      }
-    }
-
-    .log-box-main {
-      padding: 10px 30px;
-      //height: 118px;
-      flex: 1;
-      overflow-y: auto;
-      box-sizing: border-box;
-      background: #f2f2f2;
-      line-height: 26px;
-
-      .log-item {
-        font-size: 13px;
-        user-select: text;
-        //display: flex;
-        //align-items: center;
-        //flex-wrap: wrap;
-        line-height: 26px;
-
-        font-weight: 500;
-        margin-left: 8px;
-        //.log-txt {
-        //  font-weight: 500;
-        //  margin-left: 8px;
-        //  display: inline-block;
-        //  word-wrap: break-word;
-        //  overflow-wrap: break-word;
-        //}
-        .iconfont{
-          &.icon-icon_fuzhi{
-            line-height: 26px;
-            margin-left: 8px;
-            font-size: 16px;
-            color: #0066cc;
-            cursor: pointer;
-          }
-
-        }
-      }
-    }
-  }
-
-  :deep(.el-form) {
-    padding: 20px 20px 0;
-  }
-
-  :deep(.el-tabs--border-card > .el-tabs__content) {
-    padding: 0;
-  }
-
-  :deep(.el-collapse-item__header) {
-    //height: 42px;
-    //line-height: 42px;
-  }
-
-  :deep(.el-collapse-item__content) {
-    padding-bottom: 0;
-  }
-  :deep(.el-tabs__content) {
-    background: #f2f2f2;
-  }
-  :deep(.el-tabs__item){
-    background: #e6e6e6;
-    &.is-active{
-      background: #f2f2f2;
-    }
-  }
-
-  .btn-box {
-    :deep(.el-form-item__content) {
-      justify-content: end;
-      width: 100%;
-      padding: 0;
-    }
-  }
-}
-</style>
diff --git a/src/renderer/src/views/system/index.vue b/src/renderer/src/views/system/index.vue
new file mode 100644
index 0000000..06fbb56
--- /dev/null
+++ b/src/renderer/src/views/system/index.vue
@@ -0,0 +1,35 @@
+<template>
+	<el-container style="padding: 10px 0">
+		<Aside width="180px"></Aside>
+		<el-main>
+			<router-view v-slot="{ Component }">
+				<keep-alive>
+					<component :is="Component" />
+				</keep-alive>
+			</router-view>
+		</el-main>
+	</el-container>
+</template>
+
+<script setup>
+// 组件注册
+import Aside from '@renderer/layout/Aside.vue';
+</script>
+
+<style scoped>
+body {
+	background-color: #eee;
+	max-width: 100vw;
+}
+.el-container {
+	/*padding: 10px 0;*/
+}
+.el-main {
+	width: 100%;
+	padding: 0;
+	height: 100vh;
+	overflow-x: hidden;
+	background: #fff;
+	padding-right: 10px;
+}
+</style>
diff --git a/src/renderer/src/views/system/switch/index.vue b/src/renderer/src/views/system/switch/index.vue
new file mode 100644
index 0000000..91dbc97
--- /dev/null
+++ b/src/renderer/src/views/system/switch/index.vue
@@ -0,0 +1,1100 @@
+<template>
+	<div id="switch-box">
+		<div id="switch-main" class="switch-main" :class="isOpenLog ? 'open-log' : ''">
+			<el-collapse v-model="activeFold" @change="foldChange">
+				<el-collapse-item name="1" title="Mqtt设置">
+					<el-form ref="mqttFormRef" :model="mqttForm" :rules="mqttRules" class="demo-mqttForm" label-width="auto" status-icon>
+						<el-form-item label="Client ID" prop="clientId" required>
+							<el-input v-model="mqttForm.clientId" :disabled="connectionState" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item label="Host" prop="host" required>
+							<el-input v-model="mqttForm.host" :disabled="connectionState" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item label="Port" prop="port" required>
+							<el-input v-model="mqttForm.port" :disabled="connectionState" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item label="path" prop="path">
+							<el-input v-model="mqttForm.path" :disabled="connectionState" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item label="Username" prop="userName" required>
+							<el-input v-model="mqttForm.userName" :disabled="connectionState" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item label="Password" prop="passWord" required>
+							<el-input v-model="mqttForm.passWord" :disabled="connectionState" autocomplete="off" type="passWord" />
+						</el-form-item>
+						<el-form-item class="btn-box">
+							<el-button :disabled="!connectionState" type="danger" @click="disconnMqtt">断开 </el-button>
+							<el-button :disabled="connectionState" @click="testMqtt(mqttFormRef)">测试</el-button>
+							<el-button :disabled="connectionState" type="primary" @click="runMqtt(mqttFormRef)">连接 </el-button>
+						</el-form-item>
+					</el-form>
+				</el-collapse-item>
+				<el-collapse-item name="2" title="设备信息">
+					<el-form ref="gatewayFormRef" :model="gatewayForm" :rules="gatewayRules" class="demo-gatewayForm" label-width="auto" status-icon>
+						<el-form-item label="网关" prop="gateway" required>
+							<el-input v-model="gatewayForm.gateway" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item label="上行主题" prop="subscribeTopic" required>
+							<el-input v-model="gatewayForm.subscribeTopic" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item label="下行主题" prop="publishTopic" required>
+							<el-input v-model="gatewayForm.publishTopic" autocomplete="off" type="text" />
+						</el-form-item>
+						<el-form-item class="btn-box">
+							<el-button type="primary" @click="updateGateway(gatewayFormRef)">更新</el-button>
+						</el-form-item>
+					</el-form>
+				</el-collapse-item>
+				<el-collapse-item name="3" title="属性操作">
+					<el-tabs type="border-card">
+						<el-tab-pane label="属性读取">
+							<el-form :model="attrReadForm" label-width="auto">
+								<el-row>
+									<el-col :span="10">
+										<el-form-item label="设备号">
+											<el-input v-model="attrReadForm.deviceSN" />
+										</el-form-item>
+									</el-col>
+									<el-col :span="10" :offset="1" class="text-center">
+										<el-form-item label="属性">
+											<el-select v-model="attrReadForm.attrName" multiple placeholder="选择属性" @change="attrReadChange">
+												<el-option v-for="(item, index) in attrList" :key="index" :label="item.name" :value="index" />
+											</el-select>
+										</el-form-item>
+									</el-col>
+									<el-col :span="3" style="text-align: right">
+										<el-button type="primary" @click="addReadAttr">新增属性</el-button>
+									</el-col>
+								</el-row>
+								<div class="attr-list">
+									<el-row v-for="item in attrReadList" :key="item.id">
+										<el-col :span="7">
+											<el-form-item label="属性名">
+												<el-input v-model="item.name" :disabled="item.disable" />
+											</el-form-item>
+										</el-col>
+										<el-col :span="7">
+											<el-form-item label="Addr">
+												<el-input v-model="item.addr" />
+											</el-form-item>
+										</el-col>
+										<el-col :span="7">
+											<el-form-item label="Len">
+												<el-input v-model="item.len" />
+											</el-form-item>
+										</el-col>
+										<el-col v-if="!item.disable" :span="3" style="text-align: right">
+											<el-button type="danger" @click="delReadAttr(item.id)">删除</el-button>
+										</el-col>
+									</el-row>
+								</div>
+								<el-form-item label="Data">
+									<el-input v-model="attrReadTextrea" type="textarea" />
+								</el-form-item>
+								<el-form-item class="btn-box">
+									<el-button type="primary" @click="readAttr(attrReadForm)">读取</el-button>
+								</el-form-item>
+							</el-form>
+						</el-tab-pane>
+						<el-tab-pane label="属性写入">
+							<el-form :model="attrWriteForm" label-width="auto">
+								<el-row>
+									<el-col :span="10">
+										<el-form-item label="设备号">
+											<el-input v-model="attrWriteForm.deviceSN" />
+										</el-form-item>
+									</el-col>
+									<el-col :span="10" :offset="1" class="text-center">
+										<el-form-item label="属性">
+											<el-select v-model="attrWriteForm.attrName" multiple placeholder="选择属性" @change="attrWriteChange">
+												<el-option v-for="(item, index) in attrList" :key="index" :label="item.name" :value="index" />
+											</el-select>
+										</el-form-item>
+									</el-col>
+									<el-col :span="3" style="text-align: right">
+										<el-button type="primary" @click="addWriteAttr">新增属性</el-button>
+									</el-col>
+								</el-row>
+								<div class="attr-list">
+									<el-row v-for="item in attrWriteList" :key="item.id">
+										<el-col :span="5">
+											<el-form-item label="属性名">
+												<el-input v-model="item.name" :disabled="item.disable" />
+											</el-form-item>
+										</el-col>
+										<el-col :span="5">
+											<el-form-item label="Addr">
+												<el-input v-model="item.addr" />
+											</el-form-item>
+										</el-col>
+										<el-col :span="5">
+											<el-form-item label="Len">
+												<el-input v-model="item.len" />
+											</el-form-item>
+										</el-col>
+										<el-col :span="6">
+											<el-form-item label="data">
+												<el-input v-model="item.data" />
+											</el-form-item>
+										</el-col>
+										<el-col v-if="!item.disable" :span="3" style="text-align: right">
+											<el-button type="danger" @click="delWriteAttr(item.id)">删除</el-button>
+										</el-col>
+									</el-row>
+								</div>
+								<el-form-item label="Data">
+									<el-input v-model="attrWriteTextrea" type="textarea" />
+								</el-form-item>
+								<el-form-item class="btn-box">
+									<el-button type="primary" @click="writeAttr(attrWriteForm)">写入</el-button>
+								</el-form-item>
+							</el-form>
+						</el-tab-pane>
+					</el-tabs>
+				</el-collapse-item>
+				<el-collapse-item name="4" title="功能操作">
+					<el-form :model="functionForm" label-width="auto">
+						<el-row>
+							<el-col :span="12">
+								<el-form-item label="设备号">
+									<el-input v-model="functionForm.deviceSN" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="12" class="text-center">
+								<el-form-item label="功能">
+									<el-select v-model="functionForm.attrName" placeholder="选择功能" @change="functionChange">
+										<el-option v-for="(item, index) in functionList" :key="index" :label="item.name" :value="index" />
+									</el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<div v-if="functionForm.selectAttr.length > 0" class="attr-list">
+							<el-row>
+								<el-col :span="6">
+									<el-form-item label="功能名">
+										<el-input v-model="functionForm.selectAttr[0].name" :disabled="functionForm.selectAttr[0].disabled" />
+									</el-form-item>
+								</el-col>
+								<el-col :span="6">
+									<el-form-item label="Addr">
+										<el-input v-model="functionForm.selectAttr[0].addr" />
+									</el-form-item>
+								</el-col>
+								<el-col :span="6">
+									<el-form-item label="Len">
+										<el-input v-model="functionForm.selectAttr[0].len" />
+									</el-form-item>
+								</el-col>
+								<el-col :span="6">
+									<el-form-item label="data">
+										<el-input v-model="functionForm.selectAttr[0].data" />
+									</el-form-item>
+								</el-col>
+							</el-row>
+						</div>
+						<el-form-item label="Data">
+							<el-input v-model="functionTextrea" type="textarea" />
+						</el-form-item>
+						<el-form-item class="btn-box">
+							<el-button type="primary" @click="functionWrite(functionForm)">操作</el-button>
+						</el-form-item>
+					</el-form>
+				</el-collapse-item>
+			</el-collapse>
+		</div>
+		<div id="log-box" class="log-box" :class="isOpenLog ? 'open-log' : ''">
+			<div class="log-box-header">
+				<div class="log-box-title">日志</div>
+				<div class="log-box-operate">
+					<view class="log-box-operate-item">
+						<div>mqtt状态：</div>
+						<div v-if="connectionState" style="color: #00a73c; display: flex; align-items: center">连接</div>
+						<div v-else style="color: #ff3b2b; display: flex; align-items: center" @click="runMqtt(mqttFormRef)">
+							断连
+							<span class="iconfont icon-icon_gengxin"></span>
+						</div>
+					</view>
+					<view class="log-box-operate-item">
+						<div>日志状态：</div>
+						<div v-if="socketStatus" style="color: #00a73c; display: flex; align-items: center">连接</div>
+						<div v-else style="color: #ff3b2b; display: flex; align-items: center" @click="initSocket">
+							断连
+							<span class="iconfont icon-icon_gengxin"></span>
+						</div>
+					</view>
+					<!--          <view class="log-box-operate-item">-->
+					<!--            <div>断路器状态：</div>-->
+					<!--            <div v-if="switchSocketStatus" style="color: #00A73C; display: flex; align-items: center">-->
+					<!--              连接-->
+					<!--            </div>-->
+					<!--            <div-->
+					<!--              v-else-->
+					<!--              style="color: #FF3B2B; display: flex; align-items: center"-->
+					<!--              @click="initSwitchSocket"-->
+					<!--            >-->
+					<!--              断连-->
+					<!--              <span class="iconfont icon-icon_gengxin"></span>-->
+					<!--            </div>-->
+					<!--          </view>-->
+					<view class="log-box-operate-item" @click="toggleOpenLog">
+						<el-tooltip v-if="isOpenLog" class="box-item" content="收缩日志" effect="dark" placement="bottom">
+							<span class="iconfont icon-up-arrow"></span>
+						</el-tooltip>
+						<el-tooltip v-else class="box-item" content="展开日志" effect="dark" placement="bottom">
+							<span class="iconfont icon-shousuoshangjiantou"></span>
+						</el-tooltip>
+					</view>
+					<view class="log-box-operate-item" @click="toggleIsScroll">
+						<el-tooltip v-if="isScroll" class="box-item" content="关闭滚动" effect="dark" placement="bottom">
+							<span class="iconfont icon-unlock"></span>
+						</el-tooltip>
+						<el-tooltip v-else class="box-item" content="开启滚动" effect="dark" placement="bottom">
+							<span class="iconfont icon-icon_suoding"></span>
+						</el-tooltip>
+					</view>
+					<view class="log-box-operate-item" @click="clearLog">
+						<span class="iconfont icon-icon_shanchu"></span>
+					</view>
+				</div>
+			</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">
+						<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>
+						<span v-else class="iconfont icon-icon_xiaoxi"></span>
+						&nbsp;&nbsp;{{ item.time }}&nbsp;&nbsp;&nbsp;&nbsp; {{ item.msg }}
+						<el-tooltip class="box-item" content="复制" effect="dark" placement="bottom">
+							<span class="iconfont icon-icon_fuzhi" @click="copyMsg(item.msg)"></span>
+						</el-tooltip>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import axios from 'axios'; // 引入axios
+import dayjs from 'dayjs';
+import config from '@renderer/util/config.js';
+
+import { reactive, ref, onMounted, computed, watch, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import switchSocket from '@renderer/util/socket.js';
+import { logWebSocketStore } from '@renderer/stores/logWebSocket.js';
+const webSocketStore = logWebSocketStore();
+
+const activeFold = ref(['1', '3', '4']);
+const logList = ref([]);
+//连接状态
+const connectionState = ref(false);
+
+const getGuid = () => {
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+		var r = (Math.random() * 16) | 0,
+			v = c == 'x' ? r : (r & 0x3) | 0x8;
+		return v.toString(16);
+	});
+};
+const isScroll = ref(true);
+const isOpenLog = ref(false);
+const mqttFormRef = ref();
+// const mqttForm = reactive({
+//   clientId: '',
+//   host: '',
+//   port: '',
+//   path: '',
+//   userName: '',
+//   passWord: '',
+// })
+const mqttForm = reactive({
+	clientId: 'mqtt_local',
+	host: '123.60.30.87',
+	port: '8017',
+	path: '',
+	userName: 'admin',
+	passWord: 'gy2024'
+});
+
+const mqttRules = reactive({
+	clientId: [{ required: true, message: 'clientId 不能为空', trigger: 'blur' }],
+	host: [{ required: true, message: 'host 不能为空', trigger: 'blur' }],
+	port: [{ required: true, message: 'port 不能为空', trigger: 'blur' }],
+	// path: [{ required: true, message: 'path 不能为空', trigger: 'blur' }],
+	userName: [{ required: true, message: 'userName 不能为空', trigger: 'blur' }],
+	passWord: [{ required: true, message: 'passWord 不能为空', trigger: 'blur' }]
+});
+
+const gatewayFormRef = ref();
+// const gatewayForm = reactive({
+//   gateway: '',
+//   subscribeTopic: '',
+//   publishTopic: ''
+// })
+const gatewayForm = reactive({
+	gateway: 'DF01a683a08cf140',
+	subscribeTopic: '/minternet/data',
+	publishTopic: '/minternet/DF01a683a08cf140'
+});
+const gatewayRules = reactive({
+	gateway: [{ required: true, message: '网关不能为空', trigger: 'blur' }],
+	subscribeTopic: [{ required: true, message: '上行主题不能为空', trigger: 'blur' }],
+	publishTopic: [{ required: true, message: '下行主题不能为空', trigger: 'blur' }]
+});
+
+// 设备属性
+const attrList = [
+	{
+		id: 1,
+		name: '芯片ID',
+		addr: '0',
+		len: '16',
+		data: ''
+	},
+	{
+		id: 2,
+		name: '设备序列号（SN）',
+		addr: '4',
+		len: '12',
+		data: ''
+	},
+	{
+		id: 3,
+		name: '产品主型号',
+		addr: '12',
+		len: '16',
+		data: ''
+	},
+	{
+		id: 4,
+		name: '产品次型号',
+		addr: '16',
+		len: '16',
+		data: ''
+	}
+];
+/* 属性读写 */
+const attrReadForm = reactive({
+	deviceSN: '',
+	attrName: [],
+	selectAttr: [],
+	addAttr: [],
+	textrea: ''
+});
+
+// 一个计算属性 ref
+const attrReadList = computed(() => {
+	let list = [...attrReadForm.selectAttr];
+	list.push(...attrReadForm.addAttr);
+	return list;
+});
+
+const attrReadTextrea = computed(() => {
+	if (attrReadList.value.length > 0) {
+		let list = attrReadList.value.map(item => {
+			return {
+				name: item.name,
+				addr: item.addr,
+				len: item.len
+			};
+		});
+		return JSON.stringify(list);
+	} else {
+		return '[]';
+	}
+});
+
+// 监听 attrReadList 的变化，以更新 textrea
+watch(
+	attrReadList,
+	() => {
+		attrReadForm.textrea = attrReadTextrea.value;
+	},
+	{ deep: true }
+);
+//属性写入
+const attrWriteForm = reactive({
+	deviceSN: '',
+	attrName: [],
+	selectAttr: [],
+	addAttr: []
+});
+
+// 一个计算属性 ref
+const attrWriteList = computed(() => {
+	let list = [...attrWriteForm.selectAttr];
+	list.push(...attrWriteForm.addAttr);
+	return list;
+});
+
+const attrWriteTextrea = computed(() => {
+	if (attrWriteList.value.length > 0) {
+		let list = attrWriteList.value.map(item => {
+			return {
+				name: item.name,
+				addr: item.addr,
+				len: item.len,
+				data: item.data
+			};
+		});
+		return JSON.stringify(list);
+	} else {
+		return '[]';
+	}
+});
+
+/*功能操作*/
+const functionList = [
+	{
+		id: 1,
+		name: '开闸',
+		addr: 10,
+		len: 2,
+		data: '00',
+		disabled: true
+	},
+	{
+		id: 2,
+		name: '合闸',
+		addr: 10,
+		len: 2,
+		data: '01',
+		disabled: true
+	},
+	{
+		id: 3,
+		name: '自定义',
+		addr: '',
+		len: '',
+		data: '',
+		disabled: false
+	}
+];
+
+const functionForm = reactive({
+	deviceSN: '',
+	attrName: null,
+	selectAttr: []
+});
+
+const functionTextrea = computed(() => {
+	if (functionForm.selectAttr.length > 0) {
+		let list = functionForm.selectAttr.map(item => {
+			return {
+				name: item.name,
+				addr: item.addr,
+				len: item.len,
+				data: item.data
+			};
+		});
+		return JSON.stringify(list);
+	} else {
+		return '[]';
+	}
+});
+
+//折叠变化
+const foldChange = val => {
+	console.log(val);
+};
+
+/* mqtt设置 */
+//断开
+const disconnMqtt = () => {
+	axios
+		.get(config.url + '/mqtt/disconn', {
+			// 发起GET请求
+			params: {
+				clientId: mqttForm.clientId
+			}
+		})
+		.then(response => {
+			// 成功响应后的处理
+			console.log(response); // 打印响应数据
+			if (response.data.code == 0) {
+				ElMessage.success('断开成功');
+				connectionState.value = false;
+			} else {
+				if (response.data.code == 60) {
+					connectionState.value = false;
+				}
+				ElMessage.error(response.data.message);
+			}
+		})
+		.catch(error => {
+			// 错误处理
+			console.error(error); // 打印错误信息
+			ElMessage.error(error);
+		});
+};
+
+//测试
+const testMqtt = formEl => {
+	if (!formEl) return;
+	formEl.validate(valid => {
+		if (valid) {
+			axios
+				.get(config.url + '/mqtt/connTest', {
+					// 发起GET请求
+					params: mqttForm
+				})
+				.then(response => {
+					// 成功响应后的处理
+					console.log(response); // 打印响应数据
+					if (response.data.code == 0) {
+						ElMessage.success('测试成功');
+					} else {
+						if (response.data.code == 60) {
+							connectionState.value = false;
+						}
+						ElMessage.error(response.data.message);
+					}
+				})
+				.catch(error => {
+					// 错误处理
+					console.error(error); // 打印错误信息
+					ElMessage.error(error);
+				});
+		} else {
+			console.log('error submit!');
+		}
+	});
+};
+
+//运行
+const runMqtt = formEl => {
+	if (!formEl) return;
+	formEl.validate(valid => {
+		if (valid) {
+			axios
+				.get(config.url + '/mqtt/conn', {
+					// 发起GET请求
+					params: mqttForm
+				})
+				.then(response => {
+					// 成功响应后的处理
+					console.log(response); // 打印响应数据
+					if (response.data.code == 0) {
+						ElMessage.success('连接成功');
+						if (!switchSocketStatus.value) {
+							initSwitchSocket();
+						}
+
+						//缓存已成功连接
+						localStorage.setItem('mqttForm', JSON.stringify(mqttForm));
+						connectionState.value = true;
+						activeFold.value = activeFold.value.filter(item => item !== '1');
+						if (!activeFold.value.includes('2')) {
+							// 如果没有，就在头部添加1
+							activeFold.value.unshift('2');
+						}
+					} else {
+						if (response.data.code == 60) {
+							connectionState.value = false;
+						}
+						ElMessage.error(response.data.message);
+					}
+				})
+				.catch(error => {
+					// 错误处理
+					console.error(error); // 打印错误信息
+					ElMessage.error(error);
+				});
+		} else {
+			console.log('error submit!');
+		}
+	});
+};
+
+//更新
+const updateGateway = formEl => {
+	if (!formEl) return;
+	formEl.validate(valid => {
+		if (valid) {
+			console.log('submit!', gatewayForm);
+			axios
+				.get(config.url + '/updateListen', {
+					// 发起GET请求
+					params: gatewayForm
+				})
+				.then(response => {
+					// 成功响应后的处理
+					console.log(response); // 打印响应数据
+					if (response.data.code == 0) {
+						//缓存上下行主题
+						localStorage.setItem('gatewayForm', JSON.stringify(gatewayForm));
+						ElMessage.success('更新成功');
+						activeFold.value = activeFold.value.filter(item => item !== '2');
+						if (!activeFold.value.includes('3')) {
+							// 如果没有，就在头部添加1
+							activeFold.value.unshift('3');
+						}
+					} else {
+						if (response.data.code == 60) {
+							connectionState.value = false;
+						}
+						ElMessage.error(response.data.message);
+					}
+				})
+				.catch(error => {
+					// 错误处理
+					console.error(error); // 打印错误信息
+					ElMessage.error(error);
+				});
+		} else {
+			console.log('error submit!');
+		}
+	});
+};
+
+/*设备属性*/
+
+/*设备读取*/
+const attrReadChange = selectedIndexs => {
+	// 创建一个Set来存储已选择的属性名称
+	const selected = new Set(selectedIndexs.map(item => attrList[item].name));
+	// 更新selectAttr，保留已选择的属性，移除未选择的属性
+	attrReadForm.selectAttr = attrReadForm.selectAttr.filter(attr => selected.has(attr.name));
+	// 添加新选择的属性
+	attrList.forEach(attr => {
+		if (selected.has(attr.name) && !attrReadForm.selectAttr.some(a => a.name === attr.name)) {
+			attrReadForm.selectAttr.push({ ...attr, disable: true });
+		}
+	});
+};
+
+const addReadAttr = () => {
+	attrReadForm.addAttr.push({
+		id: getGuid(),
+		name: '',
+		addr: '',
+		len: '',
+		data: '',
+		disable: false
+	});
+};
+
+const delReadAttr = id => {
+	attrReadForm.addAttr.forEach((item, index) => {
+		if (item.id === id) {
+			attrReadForm.addAttr.splice(index, 1);
+		}
+	});
+};
+
+const readAttr = from => {
+	let flag = false;
+	attrReadList.value.forEach(item => {
+		if (!item.addr) {
+			flag = true;
+		} else if (!item.len) {
+			flag = true;
+		}
+	});
+	if (flag) {
+		ElMessage({
+			message: '请输入完整属性',
+			type: 'error'
+		});
+	} else if (!attrReadForm.deviceSN) {
+		ElMessage({
+			message: '请输入设备号',
+			type: 'error'
+		});
+	} else if (attrReadTextrea.value == '[]') {
+		ElMessage({
+			message: '请新增和选择属性',
+			type: 'error'
+		});
+	} else {
+		console.log('验证通过', JSON.parse(attrReadTextrea.value));
+		let params = {
+			deviceSN: attrReadForm.deviceSN,
+			data: JSON.parse(attrReadTextrea.value)
+		};
+		axios
+			.post(config.url + '/readParam', params)
+			.then(response => {
+				// 成功响应后的处理
+				console.log(response); // 打印响应数据
+				if (response.data.code == 0) {
+					ElMessage.success('指令发送成功');
+				} else {
+					if (response.data.code == 60) {
+						connectionState.value = false;
+					}
+					ElMessage.error(response.data.message);
+				}
+			})
+			.catch(error => {
+				// 错误处理
+				console.error(error); // 打印错误信息
+				ElMessage.error(error);
+			});
+	}
+	console.log(from);
+};
+
+/*设备写入*/
+const attrWriteChange = selectedIndexs => {
+	// 创建一个Set来存储已选择的属性名称
+	const selected = new Set(selectedIndexs.map(item => attrList[item].name));
+	// 更新selectAttr，保留已选择的属性，移除未选择的属性
+	attrWriteForm.selectAttr = attrWriteForm.selectAttr.filter(attr => selected.has(attr.name));
+	// 添加新选择的属性
+	attrList.forEach(attr => {
+		if (selected.has(attr.name) && !attrWriteForm.selectAttr.some(a => a.name === attr.name)) {
+			attrWriteForm.selectAttr.push({ ...attr, disable: true });
+		}
+	});
+};
+
+const addWriteAttr = () => {
+	attrWriteForm.addAttr.push({
+		id: getGuid(),
+		name: '',
+		addr: '',
+		len: '',
+		data: '',
+		disable: false
+	});
+};
+
+const delWriteAttr = id => {
+	attrWriteForm.addAttr.forEach((item, index) => {
+		if (item.id === id) {
+			attrWriteForm.addAttr.splice(index, 1);
+		}
+	});
+};
+
+const writeAttr = from => {
+	let flag = false;
+	attrWriteList.value.forEach(item => {
+		if (!item.addr) {
+			flag = true;
+		} else if (!item.len) {
+			flag = true;
+		} else if (!item.data) {
+			flag = true;
+		}
+	});
+	if (flag) {
+		ElMessage({
+			message: '请输入完整属性',
+			type: 'error'
+		});
+	} else if (!attrWriteForm.deviceSN) {
+		ElMessage({
+			message: '请输入设备号',
+			type: 'error'
+		});
+	} else if (attrWriteTextrea.value == '[]') {
+		ElMessage({
+			message: '请新增和选择属性',
+			type: 'error'
+		});
+	} else {
+		console.log('验证通过');
+		let params = {
+			deviceSN: attrWriteForm.deviceSN,
+			data: JSON.parse(attrWriteTextrea.value)
+		};
+		axios
+			.post(config.url + '/writeParam', params)
+			.then(response => {
+				// 成功响应后的处理
+				if (response.data.code == 0) {
+					ElMessage.success('指令发送成功');
+				} else {
+					if (response.data.code == 60) {
+						connectionState.value = false;
+					}
+					ElMessage.error(response.data.message);
+				}
+			})
+			.catch(error => {
+				// 错误处理
+				console.error(error); // 打印错误信息
+				ElMessage.error(error);
+			});
+	}
+	console.log(from);
+};
+
+/*功能操作*/
+const functionChange = index => {
+	functionForm.selectAttr = [functionList[index]];
+};
+
+const functionWrite = from => {
+	let data = functionForm.selectAttr[0];
+
+	if (!functionForm.deviceSN) {
+		ElMessage({
+			message: '请输入设备号',
+			type: 'error'
+		});
+	} else if (functionTextrea.value == '[]') {
+		ElMessage({
+			message: '请新增和选择属性',
+			type: 'error'
+		});
+	} else if (!data.addr) {
+		ElMessage({
+			message: '请输入addr',
+			type: 'error'
+		});
+	} else if (!data.len) {
+		ElMessage({
+			message: '请输入len',
+			type: 'error'
+		});
+	} else if (!data.data) {
+		ElMessage({
+			message: '请输入data',
+			type: 'error'
+		});
+	} else {
+		console.log('验证通过', functionForm.selectAttr);
+		let params = {
+			deviceSN: attrReadForm.deviceSN,
+			data: functionForm.selectAttr
+		};
+		axios
+			.post(config.url + '/writeFunc', params)
+			.then(response => {
+				// 成功响应后的处理
+				console.log(response); // 打印响应数据
+				if (response.data.code == 0) {
+					ElMessage.success('指令发送成功');
+				} else {
+					if (response.data.code == 60) {
+						connectionState.value = false;
+					}
+					ElMessage.error(response.data.message);
+				}
+			})
+			.catch(error => {
+				// 错误处理
+				console.error(error); // 打印错误信息
+				ElMessage.error(error);
+			});
+	}
+	console.log(from);
+};
+const clearLog = () => {
+	logList.value = [];
+};
+
+const getSocketMeassage = message => {
+	let msg = JSON.parse(message.data);
+	if (msg.msgType !== undefined) {
+		logList.value.push({
+			time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+			msg: msg.data,
+			type: msg.msgType
+		});
+	} else {
+		logList.value.push({
+			time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+			msg,
+			type: null
+		});
+	}
+	if (isScroll.value) {
+		setTimeout(() => {
+			let div = document.querySelector('#log-box-main');
+			div.scrollTop = div.scrollHeight;
+		}, 200);
+	}
+};
+
+const copyMsg = async txt => {
+	try {
+		// 将文本写入剪贴板
+		await navigator.clipboard.writeText(JSON.stringify(txt));
+		ElMessage.success('复制成功');
+	} catch (err) {
+		// 处理可能的错误，例如权限被拒绝
+		ElMessage.error('复制失败');
+	}
+};
+
+const toggleIsScroll = () => {
+	isScroll.value = !isScroll.value;
+};
+
+const toggleOpenLog = () => {
+	isOpenLog.value = !isOpenLog.value;
+};
+
+const initSocket = () => {
+	webSocketStore.init(getSocketMeassage);
+};
+
+const initSwitchSocket = () => {
+	switchSocket.init(getSocketMeassage);
+};
+
+// socket连接状态
+const socketStatus = computed(() => {
+	return webSocketStore.socket_open;
+});
+
+// socket连接状态
+const switchSocketStatus = computed(() => {
+	return switchSocket.socket_open;
+});
+
+// 生命周期钩子
+onMounted(() => {
+	initSocket();
+
+	const storedMqttForm = localStorage.getItem('mqttForm');
+	if (storedMqttForm) {
+		Object.assign(mqttForm, JSON.parse(storedMqttForm));
+	}
+	const storedgatewayForm = localStorage.getItem('gatewayForm');
+	if (storedgatewayForm) {
+		Object.assign(gatewayForm, JSON.parse(storedgatewayForm));
+	}
+});
+
+onUnmounted(() => {
+	webSocketStore.close();
+	switchSocket.close();
+});
+</script>
+
+<style lang="less" scoped>
+/* 样式可以在这里定义 */
+#switch-box {
+	height: 100%;
+	position: relative;
+	padding-bottom: 5px;
+	.switch-main {
+		height: calc(100% - 188px - 60px);
+		overflow-y: auto;
+		border-radius: 10px;
+		background: #f2f2f2;
+		&.open-log {
+			height: calc(50% - 42px);
+		}
+	}
+
+	.log-box {
+		border-radius: 10px;
+		height: 160px;
+		margin-top: 10px;
+		//border: 1px solid #2d1ca9;
+		color: #333;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		&.open-log {
+			height: calc(50% - 42px);
+		}
+		.log-box-header {
+			height: 42px;
+			padding: 0 30px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 16px;
+			font-weight: 500;
+			line-height: 28px;
+			background: #e6e6e6;
+			font-family: Source Han Sans CN;
+			color: #333333;
+
+			.log-box-operate {
+				display: flex;
+				align-items: center;
+				font-size: 14px;
+
+				.log-box-operate-item {
+					cursor: pointer;
+					display: flex;
+					align-items: center;
+					margin-left: 15px;
+				}
+			}
+		}
+
+		.log-box-main {
+			padding: 10px 30px;
+			//height: 118px;
+			flex: 1;
+			overflow-y: auto;
+			box-sizing: border-box;
+			background: #f2f2f2;
+			line-height: 26px;
+
+			.log-item {
+				font-size: 13px;
+				user-select: text;
+				//display: flex;
+				//align-items: center;
+				//flex-wrap: wrap;
+				line-height: 26px;
+
+				font-weight: 500;
+				margin-left: 8px;
+				//.log-txt {
+				//  font-weight: 500;
+				//  margin-left: 8px;
+				//  display: inline-block;
+				//  word-wrap: break-word;
+				//  overflow-wrap: break-word;
+				//}
+				.iconfont {
+					&.icon-icon_fuzhi {
+						line-height: 26px;
+						margin-left: 8px;
+						font-size: 16px;
+						color: #0066cc;
+						cursor: pointer;
+					}
+				}
+			}
+		}
+	}
+
+	:deep(.el-form) {
+		padding: 20px 20px 0;
+	}
+
+	:deep(.el-tabs--border-card > .el-tabs__content) {
+		padding: 0;
+	}
+
+	:deep(.el-collapse-item__header) {
+		//height: 42px;
+		//line-height: 42px;
+	}
+
+	:deep(.el-collapse-item__content) {
+		padding-bottom: 0;
+	}
+	:deep(.el-tabs__content) {
+		background: #f2f2f2;
+	}
+	:deep(.el-tabs__item) {
+		background: #e6e6e6;
+		&.is-active {
+			background: #f2f2f2;
+		}
+	}
+
+	.btn-box {
+		:deep(.el-form-item__content) {
+			justify-content: end;
+			width: 100%;
+			padding: 0;
+		}
+	}
+}
+</style>