0017
/
calibration-pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(网关调试):对接采集数据监视接口、调整南北向页面显示

This commit is contained in:
fhysy 2024-11-26 10:40:00 +08:00
parent b38b07e5bb
commit 9a143c26b0
3 changed files with 208 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
src/renderer/src/views/gateway/collectdatamonitor.vue
View File

@ -3,233 +3,201 @@
<div class="device-config"> <div class="device-config">
<h2>设备状态</h2> <h2>设备状态</h2>
<div class="btn-list"> <div class="btn-list">
<div class="btn-list-left"> <div class="btn-list-left"></div>
</div>
<div class="btn-list-right"> <div class="btn-list-right">
<el-button type="primary" @click="getDeviceConfig">刷新</el-button> <el-button type="primary" @click="getDeviceList">刷新</el-button>
</div> </div>
</div> </div>
<div class="table-box"> <div class="table-box">
<el-table <el-table
ref="deviceConfigTableRef" ref="deviceConfigTableRef"
highlight-current-row highlight-current-row
:data="deviceConfigList" :data="deviceList"
border border
height="187" height="187"
@row-click="deviceConfigClick"
:style="{ width: tabelBox + 'px', background: '#f2f2f2' }" :style="{ width: tabelBox + 'px', background: '#f2f2f2' }"
empty-text="配置为空" empty-text="配置为空"
@row-click="deviceConfigClick"
> >
<el-table-column type="index" label="序号" align="center" width="60" /> <el-table-column type="index" label="序号" align="center" width="60" />
<el-table-column prop="equipId" label="设备ID" align="center" /> <el-table-column prop="equipId" label="设备ID" align="center" />
<el-table-column prop="communicationQuality" label="通讯质量" align="center"/> <el-table-column prop="quality" label="通讯质量" align="center" />
<el-table-column prop="state" label="运行状态" align="center"/> <el-table-column prop="status" label="运行状态" align="center" />
<el-table-column prop="equipName" label="临时停止" align="center"> <el-table-column prop="status" label="开启状态" align="center">
<template #default="scope"> <template #default="scope">
<el-switch v-model="scope.row.isStart" /> <el-switch v-model="scope.row.status" :before-change="handleBeforeChange.bind(this, scope.$index)" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
<div class="data-config"> <div class="data-config">
<h2>数据源配置</h2> <h2>数据源配置 {{ activeDeviceConfig.equipId || '' }}</h2>
<div class="btn-list"> <div class="btn-list">
<div class="btn-list-left"> <div class="btn-list-left"></div>
</div>
<div class="btn-list-right"> <div class="btn-list-right">
<el-button type="primary" @click="getDeviceConfig">刷新</el-button> <el-button type="primary" @click="getDeviceConfig">刷新</el-button>
</div> </div>
</div> </div>
<div class="table-box"> <div class="table-box">
<el-table <el-table ref="deviceDataTableRef" :data="activeDeviceConfig.result" border size="small" height="100%" :style="{ width: tabelBox + 'px' }" empty-text="配置为空">
:data="activeDeviceConfig"
border
size="small"
height="100%"
ref="deviceDataTableRef"
:style="{ width: tabelBox + 'px' }"
empty-text="配置为空"
>
<el-table-column type="index" label="序号" align="center" width="60" fixed /> <el-table-column type="index" label="序号" align="center" width="60" fixed />
<el-table-column prop="dataId" label="设备ID_数据ID" align="center" /> <el-table-column prop="id" label="设备ID_数据ID" align="center">
<template #default="scope">
{{ activeDeviceConfig.equipId + '_' + scope.row.id }}
</template>
</el-table-column>
<el-table-column prop="dataName" label="数据名" align="center" /> <el-table-column prop="dataName" label="数据名" align="center" />
<el-table-column prop="dataDesc" label="描述" align="center" /> <el-table-column prop="dataValue" label="当前值" align="center" />
<el-table-column prop="value" label="当前值" align="center" /> <el-table-column prop="dataUnit" label="单位" align="center" />
<el-table-column prop="timeStamp" label="时间" align="center" /> <el-table-column prop="time" label="时间" align="center" />
<el-table-column label="操作" width="55" fixed="right" align="center"> <!-- <el-table-column label="操作" width="55" fixed="right" align="center">-->
<!-- <template #default="scope">--> <!-- <template #default="scope">-->
<!-- <el-button link type="danger" size="small" @click.stop="delDeviceDataConfig(scope.$index)">删除</el-button>--> <!-- <el-button link type="danger" size="small" @click.stop="delDeviceDataConfig(scope.$index)">删除</el-button>-->
<!-- </template>--> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> </el-table>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted, onUnmounted, computed, watch } from "vue" import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus" import { ElMessage } from 'element-plus';
import axios from "axios" import axios from 'axios';
import config from '@renderer/util/config.js'; import config from '@renderer/util/config.js';
const deviceConfigTableRef = ref(); const deviceConfigTableRef = ref();
const deviceDataTableRef = ref(); const deviceDataTableRef = ref();
const tabelBox = ref(884) const tabelBox = ref(884);
const deviceConfigList = ref([ const deviceList = ref([]);
{
"equipId": "dev102", // 设备ID
"communicationQuality": "good",
"state":true,
"isStart":false,
"dataList":[
{
"dataId":'WUHaNG-ELOT A01',
"dataName":'A01',
"dataDesc":'炉体进水流量',
"value":'-1.17549',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A02',
"dataName":'A02',
"dataDesc":'炉体出水流量',
"value":'-1.71603',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A03',
"dataName":'A03',
"dataDesc":'炉盖进水流量',
"value":'-0.447121',
"timeStamp":'2024-09-11 11:44:52.721',
}
]
},
{
"equipId": "dev103", // 设备ID
"communicationQuality": "good",
"state":true,
"isStart":false,
"dataList":[
{
"dataId":'WUHaNG-ELOT A01',
"dataName":'A01',
"dataDesc":'炉体进水流量',
"value":'-1.17549',
"timeStamp":'2024-09-11 11:44:52.721',
}
]
},
{
"equipId": "dev104", // 设备ID
"communicationQuality": "good",
"state":true,
"isStart":false,
"dataList":[
{
"dataId":'WUHaNG-ELOT A01',
"dataName":'A01',
"dataDesc":'炉体进水流量',
"value":'-1.17549',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A02',
"dataName":'A02',
"dataDesc":'炉体出水流量',
"value":'-1.71603',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A03',
"dataName":'A03',
"dataDesc":'炉盖进水流量',
"value":'-0.447121',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A02',
"dataName":'A02',
"dataDesc":'炉体出水流量',
"value":'-1.71603',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A03',
"dataName":'A03',
"dataDesc":'炉盖进水流量',
"value":'-0.447121',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A02',
"dataName":'A02',
"dataDesc":'炉体出水流量',
"value":'-1.71603',
"timeStamp":'2024-09-11 11:44:52.721',
},
{
"dataId":'WUHaNG-ELOT A03',
"dataName":'A03',
"dataDesc":'炉盖进水流量',
"value":'-0.447121',
"timeStamp":'2024-09-11 11:44:52.721',
}
]
}
]);
const getDeviceConfig = () => {
console.log('获取配置')
}
//当选中索引 //当选中索引
const ActiveRowIndex = ref(0); const ActiveRowIndex = ref(0);
const activeDeviceConfig = ref([]) const activeDeviceConfig = ref({
equipId: '',
status: false,
result: []
});
const getDeviceDataList = id => {
// console.log('获取设备列表')
axios
.get(config.url + '/data/collect?equipId=' + id, {})
.then(response => {
// 成功响应后的处理
if (response.data.code == 0) {
//缓存上下行主题
activeDeviceConfig.value = {
equipId: response.data.data.equipId || '',
status: response.data.data.status || false,
result: response.data.data.result || []
};
// activeDeviceResult.value = response.data.data.result || []
} else {
ElMessage.error(response.data.message);
}
})
.catch(error => {
// 错误处理
console.error(error); // 打印错误信息
ElMessage.error(error);
});
};
// watch( const getDeviceList = () => {
// () => ({ ...activeDeviceConfig.value }), // console.log('获取设备列表')
// (newVal) => { axios
// // console.log("数据变化",newVal) .get(config.url + '/data/equip/list', {})
// deviceConfigList.value[ActiveRowIndex.value] = newVal; .then(response => {
// }, // 成功响应后的处理
// { deep: true } if (response.data.code == 0) {
// ); //缓存上下行主题
deviceList.value = response.data.data.equips || [];
if (deviceList.value.length > ActiveRowIndex.value) {
getDeviceDataList(deviceList.value[ActiveRowIndex.value].equipId);
} else if (deviceList.value.length > 0) {
getDeviceDataList(deviceList.value[0].equipId);
} else {
activeDeviceConfig.value = {
equipId: '',
starus: false,
result: []
};
// activeDeviceResult.value = []
}
} else {
ElMessage.error(response.data.message);
}
})
.catch(error => {
// 错误处理
console.error(error); // 打印错误信息
ElMessage.error(error);
});
};
const getDeviceConfig = () => {
getDeviceDataList(deviceList.value[ActiveRowIndex.value].equipId);
};
const handleBeforeChange = index => {
console.log('e', index);
return new Promise((resolve, reject) => {
let deviceObj = deviceList.value[index];
console.log('deviceObj', deviceObj.status);
let url = config.url + '/data/collect/start?equipId=' + deviceObj.equipId;
if (deviceObj.status) {
url = config.url + '/data/collect/end?taskId=' + deviceObj.equipId;
}
// 发送 axios.get 请求
axios
.get(url)
.then(response => {
console.log('response', response);
if (response.data.code === 0) {
// 请求成功且状态为 ok，允许改变开关状态
if (deviceObj.status) {
ElMessage.success('关闭成功');
} else {
ElMessage.success('开启成功');
}
deviceList.value[index].status = !deviceList.value[index].status;
getDeviceList();
resolve();
} else {
// 请求成功但状态不为 ok，阻止改变开关状态
ElMessage.error(response.data.message);
reject();
}
})
.catch(error => {
// 请求失败，阻止改变开关状态
ElMessage.error(error.data.message);
reject();
});
});
};
//选择设备配置 //选择设备配置
const deviceConfigClick = (e) => { const deviceConfigClick = e => {
console.log(`current page:`,e) getDeviceDataList(e.equipId);
activeDeviceConfig.value = e.dataList;
deviceConfigTableRef.value.toggleRowSelection(e); deviceConfigTableRef.value.toggleRowSelection(e);
ActiveRowIndex.value = deviceConfigList.value.indexOf(e); ActiveRowIndex.value = deviceList.value.indexOf(e);
// e.isDoubleClicked = !e.isDoubleClicked; };
}
//更新表格宽度 //更新表格宽度
const handleResize = () => { const handleResize = () => {
deviceDataTableRef.value.doLayout(); deviceDataTableRef.value.doLayout();
tabelBox.value = window.innerWidth - 180 - 10; tabelBox.value = window.innerWidth - 180 - 10;
} };
onMounted(() => { onMounted(() => {
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
if(deviceConfigList.value[0]){ getDeviceList();
activeDeviceConfig.value = deviceConfigList.value[0].dataList; handleResize();
ActiveRowIndex.value = 0;
}
handleResize()
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
@ -269,5 +237,4 @@ onUnmounted(() => {
//width: 100%; //width: 100%;
} }
} }
</style> </style>

19
src/renderer/src/views/gateway/southdirection.vue
View File

@ -64,7 +64,7 @@
</div> </div>
</div> </div>
<div class="data-config"> <div class="data-config">
<h2>数据源配置</h2> <h2>数据源配置 {{activeDeviceConfig.equipId}}</h2>
<div class="btn-list"> <div class="btn-list">
<div class="btn-list-left"> <div class="btn-list-left">
<el-button type="primary" @click="addDeviceDataConfig">新增配置</el-button> <el-button type="primary" @click="addDeviceDataConfig">新增配置</el-button>
@ -75,8 +75,6 @@
<el-upload action="#" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false"> <el-upload action="#" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false">
<el-button type="primary">导入</el-button> <el-button type="primary">导入</el-button>
</el-upload> </el-upload>
<!-- <el-button type="primary" @click="getDeviceConfig">导入</el-button>-->
<!-- <el-button type="primary" @click="saveDeviceDataConfig">保存</el-button>-->
</div> </div>
</div> </div>
<div class="table-box"> <div class="table-box">
@ -412,7 +410,8 @@ const deviceConfigList = ref([]);
const protocolList = ref([ const protocolList = ref([
{ label: 'ModbusTCP', value: 'ModbusTCP' }, { label: 'ModbusTCP', value: 'ModbusTCP' },
{ label: 'DLT645_2007', value: 'DLT645_2007' } { label: 'DLT645_2007', value: 'DLT645_2007' },
{ label: 'gycan', value: 'gycan' },
]); ]);
//新增配置 //新增配置
const addDeviceConfig = () => { const addDeviceConfig = () => {
@ -654,7 +653,7 @@ const openConnectModel = row => {
console.log('当前采集', row.protocol.libName); console.log('当前采集', row.protocol.libName);
if (!row.protocol.libName) { if (!row.protocol.libName) {
ElMessage.error('请先选择通信类型'); ElMessage.error('请先选择通信类型');
} else if (row.protocol.libName === 'DLT645_2007') { } else if (row.protocol.libName === 'DLT645_2007' || row.protocol.libName === 'gycan') {
if (row.interfaceParams.link) { if (row.interfaceParams.link) {
tcpForm.value.port = row.interfaceParams.link.split(',')[0]; tcpForm.value.port = row.interfaceParams.link.split(',')[0];
tcpForm.value.baudrate = row.interfaceParams.link.split(',')[1]; tcpForm.value.baudrate = row.interfaceParams.link.split(',')[1];
@ -774,15 +773,6 @@ const changeTaskId = (e, index) => {
activeDeviceConfig.value.properties[index].uploadMode = taskObj[0].uploadMode; activeDeviceConfig.value.properties[index].uploadMode = taskObj[0].uploadMode;
}; };
watch(
() => ({ ...activeDeviceConfig.value }),
newVal => {
// console.log("数据变化",newVal)
// deviceConfigList.value[ActiveRowIndex.value] = newVal;
},
{ deep: true }
);
//删除数据源配置 //删除数据源配置
const delDeviceDataConfig = index => { const delDeviceDataConfig = index => {
ElMessageBox.confirm('确认要删除该数据源配置吗?', '告警', { ElMessageBox.confirm('确认要删除该数据源配置吗?', '告警', {
@ -807,7 +797,6 @@ const delDeviceDataConfig = index => {
//选择设备配置 //选择设备配置
const deviceConfigClick = (e, event, column) => { const deviceConfigClick = (e, event, column) => {
activeDeviceConfig.value = e; activeDeviceConfig.value = e;
ActiveRowIndex.value = deviceConfigList.value.indexOf(e); ActiveRowIndex.value = deviceConfigList.value.indexOf(e);
}; };