feat(断路器): 配置预设属性和功能

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

@@ -46,7 +46,7 @@
 					</el-form>
 				</el-collapse-item>
 				<el-collapse-item name="3" title="属性操作">
-					<el-tabs type="border-card">
+					<el-tabs type="border-card" @tab-change="tabClick">
 						<el-tab-pane label="属性读取">
 							<el-form :model="attrReadForm" label-width="auto">
 								<el-row>
@@ -262,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" :style="{width: logItemWidth}">
+					<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>
@@ -285,7 +285,7 @@ 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 FirmwareUpdate from './components/FirmwareUpdate/index.vue';
 import switchSocket from '@renderer/util/socket.js';
 import { logWebSocketStore } from '@renderer/stores/logWebSocket.js';
 const webSocketStore = logWebSocketStore();
@@ -354,33 +354,90 @@ const gatewayRules = reactive({
 });
 
 // 设备属性
-const attrList = [
+let attrList = ref([
 	{
 		id: 1,
-		name: '芯片ID',
+		name: '开关状态',
-		addr: '0',
+		addr: '50003',
-		len: '16',
+		len: '1',
 		data: ''
 	},
 	{
 		id: 2,
-		name: '设备序列号（SN）',
+		name: '电压',
-		addr: '4',
+		addr: '50008',
-		len: '12',
+		len: '1',
 		data: ''
 	},
 	{
 		id: 3,
-		name: '产品主型号',
+		name: '电流',
-		addr: '12',
+		addr: '50009',
-		len: '16',
+		len: '1',
 		data: ''
 	},
 	{
 		id: 4,
-		name: '产品次型号',
+		name: '有功功率',
-		addr: '16',
+		addr: '50010',
-		len: '16',
+		len: '1',
+		data: ''
+	},
+	{
+		id: 5,
+		name: '漏电流',
+		addr: '50005',
+		len: '1',
+		data: ''
+	}
+]);
+
+// 设备读属性
+const readAttrList = [
+	{
+		id: 1,
+		name: '开关状态',
+		addr: '50003',
+		len: '1',
+		data: ''
+	},
+	{
+		id: 2,
+		name: '电压',
+		addr: '50008',
+		len: '1',
+		data: ''
+	},
+	{
+		id: 3,
+		name: '电流',
+		addr: '50009',
+		len: '1',
+		data: ''
+	},
+	{
+		id: 4,
+		name: '有功功率',
+		addr: '50010',
+		len: '1',
+		data: ''
+	},
+	{
+		id: 5,
+		name: '漏电流',
+		addr: '50005',
+		len: '1',
+		data: ''
+	}
+];
+
+// 设备属性
+const writeAttrList = [
+	{
+		id: 1,
+		name: '设备控制',
+		addr: '60000',
+		len: '1',
 		data: ''
 	}
 ];
@@ -459,21 +516,29 @@ const functionList = [
 	{
 		id: 1,
 		name: '开闸',
-		addr: 10,
+		addr: 60000,
-		len: 2,
+		len: 1,
-		data: '00',
+		data: '00000000',
 		disabled: true
 	},
 	{
 		id: 2,
 		name: '合闸',
-		addr: 10,
+		addr: 60000,
-		len: 2,
+		len: 1,
-		data: '01',
+		data: '00000001',
 		disabled: true
 	},
 	{
 		id: 3,
+		name: '实时采集',
+		addr: '62000',
+		len: '2',
+		data: '',
+		disabled: true
+	},
+	{
+		id: 4,
 		name: '自定义',
 		addr: '',
 		len: '',
@@ -660,14 +725,22 @@ const updateGateway = formEl => {
 
 /*设备属性*/
 
+const tabClick = e => {
+	if (e == 0) {
+		attrList.value = readAttrList;
+	} else {
+		attrList.value = writeAttrList;
+	}
+};
+
 /*设备读取*/
 const attrReadChange = selectedIndexs => {
 	// 创建一个Set来存储已选择的属性名称
-	const selected = new Set(selectedIndexs.map(item => attrList[item].name));
+	const selected = new Set(selectedIndexs.map(item => attrList.value[item].name));
 	// 更新selectAttr，保留已选择的属性，移除未选择的属性
 	attrReadForm.selectAttr = attrReadForm.selectAttr.filter(attr => selected.has(attr.name));
 	// 添加新选择的属性
-	attrList.forEach(attr => {
+	attrList.value.forEach(attr => {
 		if (selected.has(attr.name) && !attrReadForm.selectAttr.some(a => a.name === attr.name)) {
 			attrReadForm.selectAttr.push({ ...attr, disable: true });
 		}
@@ -749,11 +822,11 @@ const readAttr = from => {
 /*设备写入*/
 const attrWriteChange = selectedIndexs => {
 	// 创建一个Set来存储已选择的属性名称
-	const selected = new Set(selectedIndexs.map(item => attrList[item].name));
+	const selected = new Set(selectedIndexs.map(item => attrList.value[item].name));
 	// 更新selectAttr，保留已选择的属性，移除未选择的属性
 	attrWriteForm.selectAttr = attrWriteForm.selectAttr.filter(attr => selected.has(attr.name));
 	// 添加新选择的属性
-	attrList.forEach(attr => {
+	attrList.value.forEach(attr => {
 		if (selected.has(attr.name) && !attrWriteForm.selectAttr.some(a => a.name === attr.name)) {
 			attrWriteForm.selectAttr.push({ ...attr, disable: true });
 		}
@@ -961,8 +1034,8 @@ const switchSocketStatus = computed(() => {
 // 生命周期钩子
 onMounted(() => {
 	initSocket();
-  updateLogItemWidth()
+	updateLogItemWidth();
-  window.addEventListener('resize',updateLogItemWidth)
+	window.addEventListener('resize', updateLogItemWidth);
 	const storedMqttForm = localStorage.getItem('mqttForm');
 	if (storedMqttForm) {
 		Object.assign(mqttForm, JSON.parse(storedMqttForm));
@@ -974,7 +1047,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  window.removeEventListener('resize',updateLogItemWidth)
+	window.removeEventListener('resize', updateLogItemWidth);
 	webSocketStore.close();
 	switchSocket.close();
 });
@@ -1047,7 +1120,7 @@ onUnmounted(() => {
 			.log-item {
 				//width: 800px;
 				//width: calc(window-width - 180px - 80px);
-        word-wrap: break-word ;
+				word-wrap: break-word;
 				word-break: break-all;
 				font-size: 13px;
 				user-select: text;