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

View File

@ -1,273 +1,240 @@
<template> <template>
<div id="southdirection-box"> <div id="southdirection-box">
<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="getDeviceList">刷新</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="deviceConfigTableRef"
ref="deviceConfigTableRef" highlight-current-row
highlight-current-row :data="deviceList"
:data="deviceConfigList" border
border height="187"
height="187" :style="{ width: tabelBox + 'px', background: '#f2f2f2' }"
@row-click="deviceConfigClick" empty-text="配置为空"
:style="{ width: tabelBox + 'px',background:'#f2f2f2' }" @row-click="deviceConfigClick"
empty-text="配置为空" >
> <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="quality" label="通讯质量" align="center" />
<el-table-column prop="communicationQuality" label="通讯质量" align="center"/> <el-table-column prop="status" 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"> <template #default="scope">
<template #default="scope"> <el-switch v-model="scope.row.status" :before-change="handleBeforeChange.bind(this, scope.$index)" />
<el-switch v-model="scope.row.isStart" /> </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>数据源配置 {{ activeDeviceConfig.equipId || '' }}</h2>
<h2>数据源配置</h2> <div class="btn-list">
<div class="btn-list"> <div class="btn-list-left"></div>
<div class="btn-list-left"> <div class="btn-list-right">
</div> <el-button type="primary" @click="getDeviceConfig">刷新</el-button>
<div class="btn-list-right"> </div>
<el-button type="primary" @click="getDeviceConfig">刷新</el-button> </div>
</div> <div class="table-box">
</div> <el-table ref="deviceDataTableRef" :data="activeDeviceConfig.result" border size="small" height="100%" :style="{ width: tabelBox + 'px' }" empty-text="配置为空">
<div class="table-box"> <el-table-column type="index" label="序号" align="center" width="60" fixed />
<el-table <el-table-column prop="id" label="设备ID_数据ID" align="center">
:data="activeDeviceConfig" <template #default="scope">
border {{ activeDeviceConfig.equipId + '_' + scope.row.id }}
size="small" </template>
height="100%" </el-table-column>
ref="deviceDataTableRef" <el-table-column prop="dataName" label="数据名" align="center" />
:style="{ width: tabelBox + 'px' }" <el-table-column prop="dataValue" label="当前值" align="center" />
empty-text="配置为空" <el-table-column prop="dataUnit" label="单位" align="center" />
> <el-table-column prop="time" label="时间" align="center" />
<el-table-column type="index" label="序号" align="center" width="60" fixed /> <!-- <el-table-column label="操作" width="55" fixed="right" align="center">-->
<el-table-column prop="dataId" label="设备ID_数据ID" align="center" />
<el-table-column prop="dataName" label="数据名" align="center" />
<el-table-column prop="dataDesc" label="描述" align="center" />
<el-table-column prop="value" label="当前值" align="center" />
<el-table-column prop="timeStamp" label="时间" 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 = deviceList.value.indexOf(e);
ActiveRowIndex.value = deviceConfigList.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);
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.el-table .double-clicked-row { .el-table .double-clicked-row {
background-color: #f0f9eb; background-color: #f0f9eb;
} }
:deep(.el-table .el-scrollbar) { :deep(.el-table .el-scrollbar) {
background: #fff; background: #fff;
} }
#southdirection-box{ #southdirection-box {
height: 100%; height: 100%;
.btn-list{ .btn-list {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px 0; padding: 10px 0;
} }
.device-config{ .device-config {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
} }
.data-config{ .data-config {
position: relative; position: relative;
height: calc(100% - 278px); height: calc(100% - 278px);
.table-box{ .table-box {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: calc(100% - 162px); height: calc(100% - 162px);
} }
} }
.table-box{ .table-box {
//position: absolute; //position: absolute;
//width: 100%; //width: 100%;
} }
} }
</style> </style>

View File

@ -118,7 +118,7 @@
</div> </div>
</div> </div>
<div class="data-config"> <div class="data-config">
<h2>上报测点{{activeDeviceConfig.taskId}}</h2> <h2>上报测点 {{activeDeviceConfig.taskId}}</h2>
<div class="table-box"> <div class="table-box">
<el-table <el-table
:data="activeDeviceConfig.dataIdEntire" :data="activeDeviceConfig.dataIdEntire"

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);
}; };