feat(断路器): 配置预设属性和功能
This commit is contained in:
fhysy
parent
d56f84f631
commit
b9f2b30c57
|
|
@ -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>
|
||||
|
|
@ -200,9 +200,9 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="5" title="固件更新">
|
||||
<firmware-update />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="5" title="固件更新">
|
||||
<firmware-update />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div id="log-box" class="log-box" :class="isOpenLog ? 'open-log' : ''">
|
||||
|
|
@ -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',
|
||||
addr: '0',
|
||||
len: '16',
|
||||
name: '开关状态',
|
||||
addr: '50003',
|
||||
len: '1',
|
||||
data: ''
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '设备序列号（SN）',
|
||||
addr: '4',
|
||||
len: '12',
|
||||
name: '电压',
|
||||
addr: '50008',
|
||||
len: '1',
|
||||
data: ''
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '产品主型号',
|
||||
addr: '12',
|
||||
len: '16',
|
||||
name: '电流',
|
||||
addr: '50009',
|
||||
len: '1',
|
||||
data: ''
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '产品次型号',
|
||||
addr: '16',
|
||||
len: '16',
|
||||
name: '有功功率',
|
||||
addr: '50010',
|
||||
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,
|
||||
len: 2,
|
||||
data: '00',
|
||||
addr: 60000,
|
||||
len: 1,
|
||||
data: '00000000',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '合闸',
|
||||
addr: 10,
|
||||
len: 2,
|
||||
data: '01',
|
||||
addr: 60000,
|
||||
len: 1,
|
||||
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()
|
||||
window.addEventListener('resize',updateLogItemWidth)
|
||||
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();
|
||||
});
|
||||
|
|
@ -1045,10 +1118,10 @@ onUnmounted(() => {
|
|||
line-height: 26px;
|
||||
|
||||
.log-item {
|
||||
//width: 800px;
|
||||
//width: calc(window-width - 180px - 80px);
|
||||
word-wrap: break-word ;
|
||||
word-break: break-all;
|
||||
//width: 800px;
|
||||
//width: calc(window-width - 180px - 80px);
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
user-select: text;
|
||||
//display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue