fix(网关调试):对接采集数据监视接口、调整南北向页面显示
This commit is contained in:
fhysy
parent
9b16a3bd58
commit
8479aa3203
|
|
@ -1,273 +1,240 @@
|
|||
<template>
|
||||
<div id="southdirection-box">
|
||||
<div class="device-config">
|
||||
<h2>设备状态</h2>
|
||||
<div class="btn-list">
|
||||
<div class="btn-list-left">
|
||||
</div>
|
||||
<div class="btn-list-right">
|
||||
<el-button type="primary" @click="getDeviceConfig">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
ref="deviceConfigTableRef"
|
||||
highlight-current-row
|
||||
:data="deviceConfigList"
|
||||
border
|
||||
height="187"
|
||||
@row-click="deviceConfigClick"
|
||||
:style="{ width: tabelBox + 'px',background:'#f2f2f2' }"
|
||||
empty-text="配置为空"
|
||||
>
|
||||
<el-table-column type="index" label="序号" align="center" width="60" />
|
||||
<el-table-column prop="equipId" label="设备ID" align="center"/>
|
||||
<el-table-column prop="communicationQuality" label="通讯质量" align="center"/>
|
||||
<el-table-column prop="state" label="运行状态" align="center"/>
|
||||
<el-table-column prop="equipName" label="临时停止" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.isStart" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-config">
|
||||
<h2>数据源配置</h2>
|
||||
<div class="btn-list">
|
||||
<div class="btn-list-left">
|
||||
</div>
|
||||
<div class="btn-list-right">
|
||||
<el-button type="primary" @click="getDeviceConfig">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
: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 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">
|
||||
<div id="southdirection-box">
|
||||
<div class="device-config">
|
||||
<h2>设备状态</h2>
|
||||
<div class="btn-list">
|
||||
<div class="btn-list-left"></div>
|
||||
<div class="btn-list-right">
|
||||
<el-button type="primary" @click="getDeviceList">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
ref="deviceConfigTableRef"
|
||||
highlight-current-row
|
||||
:data="deviceList"
|
||||
border
|
||||
height="187"
|
||||
:style="{ width: tabelBox + 'px', background: '#f2f2f2' }"
|
||||
empty-text="配置为空"
|
||||
@row-click="deviceConfigClick"
|
||||
>
|
||||
<el-table-column type="index" label="序号" align="center" width="60" />
|
||||
<el-table-column prop="equipId" label="设备ID" align="center" />
|
||||
<el-table-column prop="quality" label="通讯质量" align="center" />
|
||||
<el-table-column prop="status" label="运行状态" align="center" />
|
||||
<el-table-column prop="status" label="开启状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" :before-change="handleBeforeChange.bind(this, scope.$index)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-config">
|
||||
<h2>数据源配置 {{ activeDeviceConfig.equipId || '' }}</h2>
|
||||
<div class="btn-list">
|
||||
<div class="btn-list-left"></div>
|
||||
<div class="btn-list-right">
|
||||
<el-button type="primary" @click="getDeviceConfig">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<el-table ref="deviceDataTableRef" :data="activeDeviceConfig.result" border size="small" height="100%" :style="{ width: tabelBox + 'px' }" empty-text="配置为空">
|
||||
<el-table-column type="index" label="序号" align="center" width="60" fixed />
|
||||
<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="dataValue" label="当前值" align="center" />
|
||||
<el-table-column prop="dataUnit" label="单位" align="center" />
|
||||
<el-table-column prop="time" label="时间" align="center" />
|
||||
<!-- <el-table-column label="操作" width="55" fixed="right" align="center">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button link type="danger" size="small" @click.stop="delDeviceDataConfig(scope.$index)">删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, onUnmounted, computed, watch } from "vue"
|
||||
import { ElMessage, ElMessageBox } from "element-plus"
|
||||
import axios from "axios"
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import axios from 'axios';
|
||||
import config from '@renderer/util/config.js';
|
||||
|
||||
|
||||
const deviceConfigTableRef = ref();
|
||||
const deviceDataTableRef = ref();
|
||||
const tabelBox = ref(884)
|
||||
const deviceConfigList = 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 tabelBox = ref(884);
|
||||
const deviceList = ref([]);
|
||||
|
||||
//当选中索引
|
||||
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(
|
||||
// () => ({ ...activeDeviceConfig.value }),
|
||||
// (newVal) => {
|
||||
// // console.log("数据变化",newVal)
|
||||
// deviceConfigList.value[ActiveRowIndex.value] = newVal;
|
||||
// },
|
||||
// { deep: true }
|
||||
// );
|
||||
const getDeviceList = () => {
|
||||
// console.log('获取设备列表')
|
||||
axios
|
||||
.get(config.url + '/data/equip/list', {})
|
||||
.then(response => {
|
||||
// 成功响应后的处理
|
||||
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) => {
|
||||
console.log(`current page:`,e)
|
||||
activeDeviceConfig.value = e.dataList;
|
||||
deviceConfigTableRef.value.toggleRowSelection(e);
|
||||
ActiveRowIndex.value = deviceConfigList.value.indexOf(e);
|
||||
// e.isDoubleClicked = !e.isDoubleClicked;
|
||||
}
|
||||
|
||||
const deviceConfigClick = e => {
|
||||
getDeviceDataList(e.equipId);
|
||||
deviceConfigTableRef.value.toggleRowSelection(e);
|
||||
ActiveRowIndex.value = deviceList.value.indexOf(e);
|
||||
};
|
||||
|
||||
//更新表格宽度
|
||||
const handleResize = () => {
|
||||
deviceDataTableRef.value.doLayout();
|
||||
tabelBox.value = window.innerWidth - 180 - 10 ;
|
||||
}
|
||||
|
||||
deviceDataTableRef.value.doLayout();
|
||||
tabelBox.value = window.innerWidth - 180 - 10;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize);
|
||||
if(deviceConfigList.value[0]){
|
||||
activeDeviceConfig.value = deviceConfigList.value[0].dataList;
|
||||
ActiveRowIndex.value = 0;
|
||||
}
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize);
|
||||
getDeviceList();
|
||||
handleResize();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-table .double-clicked-row {
|
||||
background-color: #f0f9eb;
|
||||
background-color: #f0f9eb;
|
||||
}
|
||||
:deep(.el-table .el-scrollbar) {
|
||||
background: #fff;
|
||||
background: #fff;
|
||||
}
|
||||
#southdirection-box{
|
||||
height: 100%;
|
||||
.btn-list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.device-config{
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.data-config{
|
||||
position: relative;
|
||||
height: calc(100% - 278px);
|
||||
.table-box{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 162px);
|
||||
}
|
||||
}
|
||||
.table-box{
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
}
|
||||
#southdirection-box {
|
||||
height: 100%;
|
||||
.btn-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.device-config {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.data-config {
|
||||
position: relative;
|
||||
height: calc(100% - 278px);
|
||||
.table-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 162px);
|
||||
}
|
||||
}
|
||||
.table-box {
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="data-config">
|
||||
<h2>上报测点{{activeDeviceConfig.taskId}}</h2>
|
||||
<h2>上报测点 {{activeDeviceConfig.taskId}}</h2>
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
:data="activeDeviceConfig.dataIdEntire"
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="data-config">
|
||||
<h2>数据源配置</h2>
|
||||
<h2>数据源配置 {{activeDeviceConfig.equipId}}</h2>
|
||||
<div class="btn-list">
|
||||
<div class="btn-list-left">
|
||||
<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-button type="primary">导入</el-button>
|
||||
</el-upload>
|
||||
<!-- <el-button type="primary" @click="getDeviceConfig">导入</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveDeviceDataConfig">保存</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
|
|
@ -412,7 +410,8 @@ const deviceConfigList = ref([]);
|
|||
|
||||
const protocolList = ref([
|
||||
{ label: 'ModbusTCP', value: 'ModbusTCP' },
|
||||
{ label: 'DLT645_2007', value: 'DLT645_2007' }
|
||||
{ label: 'DLT645_2007', value: 'DLT645_2007' },
|
||||
{ label: 'gycan', value: 'gycan' },
|
||||
]);
|
||||
//新增配置
|
||||
const addDeviceConfig = () => {
|
||||
|
|
@ -654,7 +653,7 @@ const openConnectModel = row => {
|
|||
console.log('当前采集', row.protocol.libName);
|
||||
if (!row.protocol.libName) {
|
||||
ElMessage.error('请先选择通信类型');
|
||||
} else if (row.protocol.libName === 'DLT645_2007') {
|
||||
} else if (row.protocol.libName === 'DLT645_2007' || row.protocol.libName === 'gycan') {
|
||||
if (row.interfaceParams.link) {
|
||||
tcpForm.value.port = row.interfaceParams.link.split(',')[0];
|
||||
tcpForm.value.baudrate = row.interfaceParams.link.split(',')[1];
|
||||
|
|
@ -774,15 +773,6 @@ const changeTaskId = (e, index) => {
|
|||
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 => {
|
||||
ElMessageBox.confirm('确认要删除该数据源配置吗?', '告警', {
|
||||
|
|
@ -807,7 +797,6 @@ const delDeviceDataConfig = index => {
|
|||
|
||||
//选择设备配置
|
||||
const deviceConfigClick = (e, event, column) => {
|
||||
|
||||
activeDeviceConfig.value = e;
|
||||
ActiveRowIndex.value = deviceConfigList.value.indexOf(e);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue