refactor(calibration): 添加日志-标定日志获取、调整ui状态、添加socket重连功能、格式化日志数据

- 更新标定结果展示逻辑，使用数值判断成功与否
- 优化日志状态显示，增加重连功能
- 调整设备信息展示样式，突出标定结果
- 新增设备日志数据获取和处理逻辑

src/renderer/src/views/calibration/index.vue

@@ -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-if="socketStatus" class="log-socket-state" @mouseover="logSocketStateHover = true" @mouseleave="logSocketStateHover = false" @click="reconnectSocket">
-						<div v-else style="color: #ff3b2b; display: flex; align-items: center" @click="initSocket">
+							{{ 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 label="错误日志" name="second"> 错误日志 </el-tab-pane>
-            错误日志
-          </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([
+const logList = ref([]);
-	{
+const logLoading = ref(false);
-		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 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 = [];
+const fetchDeviceLogs = async deviceId => {
-	for (let i = 1; i <= 16; i++) {
+	logLoading.value = true;
-		mockDevices.push({
+	try {
-			id: i,
+		const response = await axios.get(config.url + '/master/calibrate/result', {
-			code: `设备 ${i}`,
+			params: { devId: deviceId }
-			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 ? '' : '成功') : '失败'
 		});
-	}
-	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);
+		console.error('获取设备日志失败:', error);
-		ElMessage.error('获取设备列表失败');
+		ElMessage.error('获取设备日志失败');
+	} finally {
+		logLoading.value = false;
 	}
 };
 
-const generateDeviceList = async () => {
+// 处理日志数据格式转换
-	try {
+const processLogData = apiData => {
-		const response = await axios.get(config.url + '/master/device/list');
+	if (!apiData || !Array.isArray(apiData)) {
-		if (response.data.code === 0) {
+		logList.value = [];
-			devices.value = response.data.data.result || [];
+		return;
-		} else {
-			ElMessage.error(response.data.message || '开启标定失败');
 	}
-	} 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 generateDeviceList = async () => {
-const transposedLogList = computed(() => {
+	try {
-	if (!logList.value.length) return [];
+		const response = await axios.get(config.url + '/master/device/list');
-	// 假设每个dataList参数顺序一致
+		if (response.data.code === 0) {
-	const paramCount = logList.value[0].dataList.length;
+			devices.value = response.data.data.result || [];
-	const result = [];
+		} else {
-	for (let i = 0; i < paramCount; i++) {
+			ElMessage.error(response.data.message || '刷新列表失败');
-		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;
+	} 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;
+			}
 		}
 	}
 }