refactor(calibration): 添加日志-标定日志获取、调整ui状态、添加socket重连功能、格式化日志数据
- 更新标定结果展示逻辑，使用数值判断成功与否 - 优化日志状态显示，增加重连功能 - 调整设备信息展示样式，突出标定结果 - 新增设备日志数据获取和处理逻辑
This commit is contained in:
fhysy
parent
4d0d6c2ab9
commit
34108a2186
|
|
@ -46,11 +46,14 @@
|
|||
</div>
|
||||
</template>
|
||||
<div class="device-card-body">
|
||||
<div :class="['iconfont', 'icon-icon_duanluqi', 'circuit-breaker', device.result === '成功' ? 'color-green' : device.result === '失败' ? 'color-red' : '']"></div>
|
||||
<div :class="['iconfont', 'icon-icon_duanluqi', 'circuit-breaker', device.result === 1 ? 'color-green' : device.result === -1 ? 'color-red' : '']"></div>
|
||||
<p>芯片ID: {{ device.deviceSN || '无' }}</p>
|
||||
<p>设备端口: {{ device.devicePort || '无' }}</p>
|
||||
<p>
|
||||
标定结果: <span :class="['device-result', device.result === '成功' ? 'color-green' : device.result === '失败' ? 'color-red' : '']">{{ device.result || '无' }}</span>
|
||||
标定结果:
|
||||
<span :class="['device-result', device.result === 1 ? 'color-green' : device.result === -1 ? 'color-red' : '']">{{
|
||||
device.result === 1 ? '成功' : device.result === -1 ? '失败' : '' || '无'
|
||||
}}</span>
|
||||
</p>
|
||||
<p>
|
||||
结果描述:
|
||||
|
|
@ -94,8 +97,10 @@
|
|||
<div class="btn-box">
|
||||
<view class="log-box-operate-item">
|
||||
<div>日志状态：</div>
|
||||
<div v-if="socketStatus" style="color: #00a73c; display: flex; align-items: center">连接</div>
|
||||
<div v-else style="color: #ff3b2b; display: flex; align-items: center" @click="initSocket">
|
||||
<div v-if="socketStatus" class="log-socket-state" @mouseover="logSocketStateHover = true" @mouseleave="logSocketStateHover = false" @click="reconnectSocket">
|
||||
{{ logSocketStateHover ? '重连' : '连接' }} <span v-if="logSocketStateHover" span class="iconfont icon-icon_gengxin"></span>
|
||||
</div>
|
||||
<div v-else style="color: #ff3b2b; display: flex; align-items: center" @click="reconnectSocket">
|
||||
<el-tooltip class="box-item" content="重新连接" effect="dark" placement="bottom">
|
||||
<div style="display: flex; align-items: center">断连<span class="iconfont icon-icon_gengxin"></span></div>
|
||||
</el-tooltip>
|
||||
|
|
@ -270,7 +275,12 @@
|
|||
<div class="device-info-item">设备: {{ activeDeviceInfo.id || '-' }}</div>
|
||||
<div class="device-info-item">芯片ID: {{ activeDeviceInfo.deviceSN || '-' }}</div>
|
||||
<div class="device-info-item">设备端口: {{ activeDeviceInfo.devicePort || '-' }}</div>
|
||||
<div class="device-info-item">标定结果: {{ activeDeviceInfo.result || '-' }}</div>
|
||||
<div class="device-info-item">
|
||||
标定结果:
|
||||
<span style="font-weight: bold" :class="['device-result', activeDeviceInfo.result === 1 ? 'color-green' : activeDeviceInfo.result === -1 ? 'color-red' : '']">{{
|
||||
activeDeviceInfo.result === 1 ? '成功' : activeDeviceInfo.result === -1 ? '失败' : '' || '无'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="device-info-item">结果描述: {{ activeDeviceInfo.resultTxt || '-' }}</div>
|
||||
</div>
|
||||
<el-tabs v-model="logTabActive" class="demo-tabs" @tab-click="logTabChange">
|
||||
|
|
@ -285,7 +295,7 @@
|
|||
<el-icon v-if="scope.row.data[index].result === 0" style="color: red"><Bottom /></el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="范围" align="errLog">
|
||||
<el-table-column label="范围" align="center">
|
||||
<template #default="scope">
|
||||
<span style="margin-left: 8px; color: #888; font-size: 12px">{{
|
||||
scope.row.data[index].minValue && scope.row.data[index].maxValue ? scope.row.data[index].minValue + ' ~ ' + scope.row.data[index].maxValue : '-'
|
||||
|
|
@ -295,11 +305,8 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="错误日志" name="second">
|
||||
错误日志
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="错误日志" name="second"> 错误日志 </el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
|
|
@ -322,10 +329,11 @@ const devices = ref([]);
|
|||
const isScroll = ref(true);
|
||||
const logs = ref([]);
|
||||
const version = ref('V1.0.0');
|
||||
const logTabActive = ref('log')
|
||||
const logTabActive = ref('log');
|
||||
|
||||
const loading = ref(true);
|
||||
const isOpenLog = ref(false);
|
||||
const logSocketStateHover = ref(false);
|
||||
|
||||
// 方案配置相关
|
||||
const schemeDrawerVisible = ref(false);
|
||||
|
|
@ -359,218 +367,8 @@ const defaultConfList = ref({
|
|||
|
||||
const logVisible = ref(false);
|
||||
|
||||
const logList = ref([
|
||||
{
|
||||
name: '标定1',
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '电压',
|
||||
value: 220,
|
||||
unit: 'V',
|
||||
accuracy: 1,
|
||||
result: 0,
|
||||
minValue: '210',
|
||||
maxValue: '230'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电流',
|
||||
value: 5,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 0,
|
||||
minValue: '7.5',
|
||||
maxValue: '12.5'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '漏电流',
|
||||
value: 1,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 2,
|
||||
minValue: '0',
|
||||
maxValue: '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '标定1重复1',
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '电压',
|
||||
value: 220,
|
||||
unit: 'V',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '210',
|
||||
maxValue: '230'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电流',
|
||||
value: 10,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '7.5',
|
||||
maxValue: '12.5'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '漏电流',
|
||||
value: 0,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '0',
|
||||
maxValue: '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '标定2',
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '电压',
|
||||
value: 220,
|
||||
unit: 'V',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '210',
|
||||
maxValue: '230'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电流',
|
||||
value: 10,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '7.5',
|
||||
maxValue: '12.5'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '漏电流',
|
||||
value: 0,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '0',
|
||||
maxValue: '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '标定3',
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '电压',
|
||||
value: 220,
|
||||
unit: 'V',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '210',
|
||||
maxValue: '230'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电流',
|
||||
value: 10,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '7.5',
|
||||
maxValue: '12.5'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '漏电流',
|
||||
value: 0,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '0',
|
||||
maxValue: '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '标定4',
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '电压',
|
||||
value: 220,
|
||||
unit: 'V',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '210',
|
||||
maxValue: '230'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电流',
|
||||
value: 10,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '7.5',
|
||||
maxValue: '12.5'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '漏电流',
|
||||
value: 0,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '0',
|
||||
maxValue: '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '标定5',
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '电压',
|
||||
value: 220,
|
||||
unit: 'V',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '210',
|
||||
maxValue: '230'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电流',
|
||||
value: 10,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '7.5',
|
||||
maxValue: '12.5'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '漏电流',
|
||||
value: 0,
|
||||
unit: 'A',
|
||||
accuracy: 1,
|
||||
result: 1,
|
||||
minValue: '0',
|
||||
maxValue: '0'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
const logList = ref([]);
|
||||
const logLoading = ref(false);
|
||||
|
||||
const logBoxRef = ref(null);
|
||||
const MAX_LOG_LENGTH = 800;
|
||||
|
|
@ -609,61 +407,114 @@ const currentScheme = ref({
|
|||
});
|
||||
|
||||
const logTabChange = (tab, event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
console.log(tab, event);
|
||||
};
|
||||
|
||||
const selectDevice = (item, index) => {
|
||||
const selectDevice = async (item, index) => {
|
||||
activeDeviceInfo.value = item;
|
||||
activeDeviceIndex.value = index;
|
||||
// 添加日志到日志列表
|
||||
// logList.value = [];
|
||||
// 调用日志接口获取设备日志
|
||||
await fetchDeviceLogs(item.id);
|
||||
logVisible.value = true;
|
||||
};
|
||||
|
||||
const generateMockDevices = () => {
|
||||
const mockDevices = [];
|
||||
for (let i = 1; i <= 16; i++) {
|
||||
mockDevices.push({
|
||||
id: i,
|
||||
code: `设备 ${i}`,
|
||||
deviceSN: Math.floor(1000000000000 + Math.random() * 9000000000000).toString(),
|
||||
devicePort: `192.168.1.${i}`,
|
||||
connectStatus: i % 3 === 0 ? 1 : 0,
|
||||
result: i % 3 !== 0 ? (i % 2 === 0 ? '' : '成功') : '失败',
|
||||
resultTxt: i % 3 !== 0 ? (i % 2 === 0 ? '' : '成功') : '失败'
|
||||
// 获取设备日志数据
|
||||
const fetchDeviceLogs = async deviceId => {
|
||||
logLoading.value = true;
|
||||
try {
|
||||
const response = await axios.get(config.url + '/master/calibrate/result', {
|
||||
params: { devId: deviceId }
|
||||
});
|
||||
}
|
||||
devices.value = mockDevices;
|
||||
};
|
||||
|
||||
const playCalibration = async () => {
|
||||
try {
|
||||
const response = await axios.get(config.url + '/master/scheme/start?schemeId=' + selectedScheme.value);
|
||||
if (response.data.code === 0) {
|
||||
devices.value = response.data.data.result || [];
|
||||
processLogData(response.data.data.result);
|
||||
} else {
|
||||
ElMessage.error(response.data.message || '获取设备列表失败');
|
||||
ElMessage.error(response.data.message || '获取设备日志失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error);
|
||||
ElMessage.error('获取设备列表失败');
|
||||
console.error('获取设备日志失败:', error);
|
||||
ElMessage.error('获取设备日志失败');
|
||||
} finally {
|
||||
logLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const generateDeviceList = async () => {
|
||||
try {
|
||||
const response = await axios.get(config.url + '/master/device/list');
|
||||
if (response.data.code === 0) {
|
||||
devices.value = response.data.data.result || [];
|
||||
} else {
|
||||
ElMessage.error(response.data.message || '开启标定失败');
|
||||
// 处理日志数据格式转换
|
||||
const processLogData = apiData => {
|
||||
if (!apiData || !Array.isArray(apiData)) {
|
||||
logList.value = [];
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('开启标定失败:', error);
|
||||
ElMessage.error('开启标定失败');
|
||||
|
||||
// 按步骤分组数据
|
||||
const stepGroups = {};
|
||||
apiData.forEach(item => {
|
||||
if (!stepGroups[item.step]) {
|
||||
stepGroups[item.step] = [];
|
||||
}
|
||||
stepGroups[item.step].push(item);
|
||||
});
|
||||
|
||||
// 转换为表格需要的格式
|
||||
const processedLogs = Object.keys(stepGroups).map(stepName => {
|
||||
const stepData = stepGroups[stepName];
|
||||
const dataList = stepData.map(item => {
|
||||
// 从activeScheme.propertyParam中查找对应的参数信息
|
||||
const paramInfo = activeScheme.value?.propertyParam?.find(param => param.key === item.valueKey || param.name === item.valueName);
|
||||
|
||||
// 根据ExpectedMin和expectedMax计算result值
|
||||
const minValue = parseFloat(item.ExpectedMin);
|
||||
const maxValue = parseFloat(item.expectedMax);
|
||||
const outputValue = parseFloat(item.outputValue);
|
||||
|
||||
let result = 0; // 默认失败
|
||||
if (!isNaN(minValue) && !isNaN(maxValue) && !isNaN(outputValue)) {
|
||||
// 如果outputValue在范围内（包含边界），则成功
|
||||
if (outputValue >= minValue && outputValue <= maxValue) {
|
||||
result = 1; // 成功
|
||||
} else if (outputValue > maxValue) {
|
||||
result = 2; // 超出最大值
|
||||
} else if (outputValue < minValue) {
|
||||
result = 0; // 超出最小值
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
name: paramInfo?.name || item.valueName || item.valueKey,
|
||||
value: item.outputValue,
|
||||
unit: paramInfo?.unit || item.valueUnit,
|
||||
accuracy: item.expectedError,
|
||||
result: result,
|
||||
minValue: item.ExpectedMin?.toString(),
|
||||
maxValue: item.expectedMax?.toString()
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
name: stepName,
|
||||
dataList: dataList
|
||||
};
|
||||
});
|
||||
|
||||
logList.value = processedLogs;
|
||||
};
|
||||
|
||||
// 设备日志转置，便于表格渲染
|
||||
const transposedLogList = computed(() => {
|
||||
if (!logList.value.length) return [];
|
||||
// 假设每个dataList参数顺序一致
|
||||
const paramCount = logList.value[0].dataList.length;
|
||||
const result = [];
|
||||
for (let i = 0; i < paramCount; i++) {
|
||||
const param = {
|
||||
name: logList.value[0].dataList[i].name + (logList.value[0].dataList[i].unit ? '(' + logList.value[0].dataList[i].unit + ')' : ''),
|
||||
data: logList.value.map(log => log.dataList[i])
|
||||
};
|
||||
result.push(param);
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const schemeChange = e => {
|
||||
if (e) {
|
||||
const scheme = schemeList.value.filter(item => item.id === e);
|
||||
|
|
@ -673,45 +524,6 @@ const schemeChange = e => {
|
|||
}
|
||||
};
|
||||
|
||||
const generateRandomLog = () => {
|
||||
// 获取当前时间 HH:MM:SS.ms
|
||||
const now = new Date();
|
||||
const hours = now.getHours().toString().padStart(2, '0');
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0');
|
||||
const seconds = now.getSeconds().toString().padStart(2, '0');
|
||||
const milliseconds = now.getMilliseconds().toString().padStart(3, '0');
|
||||
const time = `${hours}:${minutes}:${seconds}.${milliseconds}`;
|
||||
|
||||
// 生成10到50个随机字符
|
||||
const length = Math.floor(Math.random() * 41) + 10; // 10-50
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 条码添加删除更新扫描验证';
|
||||
let randomText = '';
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
randomText += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
|
||||
// 组合成日志
|
||||
return `${time} ${randomText}`;
|
||||
};
|
||||
|
||||
const generateLogs = () => {
|
||||
// const logCount = Math.floor(Math.random() * 10) + 1; // 1-10 logs
|
||||
// for (let i = 0; i < logCount; i++) {
|
||||
//
|
||||
// }
|
||||
if (logs.value.length > 1000) {
|
||||
logs.value.shift();
|
||||
}
|
||||
logs.value.push(generateRandomLog());
|
||||
if (isScroll.value) {
|
||||
setTimeout(() => {
|
||||
let div = document.querySelector('#log-box-main');
|
||||
div.scrollTop = div.scrollHeight;
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
// 安全解析 JSON
|
||||
const tryParseJSON = data => {
|
||||
try {
|
||||
|
|
@ -770,6 +582,11 @@ const initSocket = () => {
|
|||
webSocketStore.init(getSocketMeassage);
|
||||
};
|
||||
|
||||
const reconnectSocket = () => {
|
||||
webSocketStore.close();
|
||||
webSocketStore.init(getSocketMeassage);
|
||||
};
|
||||
|
||||
// socket连接状态
|
||||
const socketStatus = computed(() => {
|
||||
return webSocketStore.socket_open;
|
||||
|
|
@ -1013,21 +830,33 @@ const deleteCalibrationStep = index => {
|
|||
});
|
||||
};
|
||||
|
||||
// 设备日志转置，便于表格渲染
|
||||
const transposedLogList = computed(() => {
|
||||
if (!logList.value.length) return [];
|
||||
// 假设每个dataList参数顺序一致
|
||||
const paramCount = logList.value[0].dataList.length;
|
||||
const result = [];
|
||||
for (let i = 0; i < paramCount; i++) {
|
||||
const param = {
|
||||
name: logList.value[0].dataList[i].name + (logList.value[0].dataList[i].unit ? '(' + logList.value[0].dataList[i].unit + ')' : ''),
|
||||
data: logList.value.map(log => log.dataList[i])
|
||||
};
|
||||
result.push(param);
|
||||
const generateDeviceList = async () => {
|
||||
try {
|
||||
const response = await axios.get(config.url + '/master/device/list');
|
||||
if (response.data.code === 0) {
|
||||
devices.value = response.data.data.result || [];
|
||||
} else {
|
||||
ElMessage.error(response.data.message || '刷新列表失败');
|
||||
}
|
||||
return result;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('刷新列表失败:', error);
|
||||
ElMessage.error('刷新列表失败');
|
||||
}
|
||||
};
|
||||
|
||||
const playCalibration = async () => {
|
||||
try {
|
||||
const response = await axios.get(config.url + '/master/scheme/start?schemeId=' + selectedScheme.value);
|
||||
if (response.data.code === 0) {
|
||||
devices.value = response.data.data.result || [];
|
||||
} else {
|
||||
ElMessage.error(response.data.message || '获取设备列表失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error);
|
||||
ElMessage.error('获取设备列表失败');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -1221,6 +1050,12 @@ const transposedLogList = computed(() => {
|
|||
.icon-icon_gengxin {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.log-socket-state {
|
||||
color: #00a73c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue