wonderzhao
/
cola-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增产线选择功能及加载状态处理

This commit is contained in:
Zhao Zhao Shen 2025-04-22 11:05:23 +08:00
parent 69157d2d8e
commit 5ad5237fb7
2 changed files with 221 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/inspection.js
View File

@ -25,9 +25,17 @@ export function getCheckParas(deviceId, inputTime) {
}
// 获取设备列表
export function getDeviceList() {
export function getDeviceList(lineId) {
return request({
url: '/Check/deviceList',
url: `/Check/deviceList?lineID=${lineId}`,
method: 'get'
});
}
// 获取产线列表
export function getLineList() {
return request({
url: '/Check/lineInfoList',
method: 'get'
});
}

372
src/views/Inspection/index.vue
View File

@ -6,6 +6,11 @@
<IxDateInput label="日期" name="date" :value="currentDate" class="input-spacing" @dateChange="handleDateChange">
</IxDateInput>
<!-- 产线选择框 -->
<IxSelect Outline id="lineSelect" v-model="selectedLineId" label="产线" hideListHeader="true" class="input-spacing" @valueChange="handleLineChange">
<IxSelectItem v-for="line in lineList" :key="line.id" :label="line.aliasName" :value="line.id"></IxSelectItem>
</IxSelect>
<!-- 班次选择框 -->
<IxSelect Outline id="triggerId" v-model="shift" label="班次" hideListHeader="true" class="input-spacing" @valueChange="handleShiftChange">
<IxSelectItem icon="sun" label="白班" value="0"></IxSelectItem>
@ -25,7 +30,7 @@
</div>
<div class="header_right">
<!-- 设备列表按钮 -->
<span v-for="(item, index) in deviceList" :key="item.id">
<span v-for="(item) in deviceList" :key="item.id">
<IxButton :outline="selectedDeviceTypeId !== item.id" class="btn-style" @click="handleDeviceListChange(item.id)">
{{ item.name }}
</IxButton>
@ -33,7 +38,11 @@
</div>
</div>
<div class="inspection-table">
<div class="table-container">
<div v-if="isLoading" class="loading-container">
<IxSpinner></IxSpinner>
<span class="loading-text">数据加载中...</span>
</div>
<div v-else class="table-container">
<!-- 表头部分 -->
<div class="table-row fixed-row">
<span class="fixed-width title-width"></span>
@ -90,9 +99,9 @@
import moment from 'moment';
import momentTimezone from 'moment-timezone';
import { ref, computed, getCurrentInstance, onMounted, defineEmits, onUnmounted } from 'vue';
import { IxDatePicker, IxButton, IxDropdownItem, IxEventList, IxEventListItem, IxSelect, IxSelectItem, IxDateInput } from '@siemens/ix-vue';
import { IxDatePicker, IxButton, IxDropdownItem, IxEventList, IxEventListItem, IxSelect, IxSelectItem, IxDateInput, IxSpinner } from '@siemens/ix-vue';
import InspectionForm from './InspectionForm.vue';
import { getInspectionCurrent, getInspectionData, getCheckParas, getDeviceList, exportExcel, sharpConfirm, alarmReasonConfirm } from '@/api/inspection';
import { getInspectionCurrent, getInspectionData, getCheckParas, getLineList, getDeviceList, exportExcel, sharpConfirm, alarmReasonConfirm } from '@/api/inspection';
const emit = defineEmits(['send-data']);
@ -117,6 +126,10 @@ const defaultShift = currentHour >= 7 && currentHour < 19 ? '0' : '1'; // 早班
const shift = ref(defaultShift); // 设置默认班次
const status = ref('0'); // 确保 status 变量已定义
// 产线列表
const lineList = ref([]);
const selectedLineId = ref(null);
// 设备列表
const deviceList = ref([]);
const selectedDeviceTypeId = ref(null);
@ -190,6 +203,12 @@ const formatTime = (time) => {
return `${hours}:${minutes}`;
};
// 添加加载状态变量
const isLoading = ref(true);
// 添加参数缓存对象
const paramsCache = ref({});
// 点检按钮点击事件
const handleInspection = (hour, index) => {
selectedItemName.value = inspectionItems.value[index].label;
@ -284,6 +303,148 @@ const showConfirmMessage = (message, onConfirm, onCancel) => {
proxy.$message.confirm(message, onConfirm, onCancel);
};
// 获取参数信息
const fetchCheckParams = async (deviceId, dateValue) => {
try {
const params = await getCheckParas(deviceId, dateValue);
if (params.data) {
// 清空现有缓存并重新构建
paramsCache.value = {};
params.data.forEach(param => {
paramsCache.value[param.keyname] = {
projectName: param.projectName,
referenceValue: param.referenceValue,
unit: param.unit
};
});
return true;
} else {
showWarningMessage('获取设备具体信息失败！');
return false;
}
} catch (error) {
console.error('Error fetching check params:', error);
return false;
}
};
// 获取当前值、参考值、单位等信息
const fetchCurrentValues = async () => {
try {
const deviceId = selectedDeviceTypeId.value;
const dateValue = selectedDate.value || currentDate;
const response = await getInspectionCurrent(deviceId, dateValue);
if (response.data) {
const currentValueList = response.data;
const currentValues = {};
currentValueList.forEach(item => {
// 解析设备实时数据并过滤掉值为 null 的项
for (const [key, value] of Object.entries(item.data)) {
if (value !== null) {
currentValues[key] = value;
}
}
});
// 更新当前值
inspectionItems.value.forEach(item => {
item.current = formatNumberWithCommas(currentValues?.[item.name]) || '--';
});
} else {
showWarningMessage('获取当前设备当前值失败！');
}
} catch (error) {
console.error('Error fetching current values:', error);
}
};
// 获取点检数据
const fetchInspectionData = async () => {
try {
isLoading.value = true;
const deviceTypeId = selectedDeviceTypeId.value;
const shiftValue = shift.value;
const dateValue = selectedDate.value || currentDate;
// 先获取参数信息
await fetchCheckParams(deviceTypeId, dateValue);
const response = await getInspectionData(deviceTypeId, dateValue, shiftValue);
if (response.data) {
const inspectionData = response.data;
const itemsMap = {};
inspectionData.forEach(record => {
const recordTime = record.recordTime;
const data = record.data;
const deviceId = record.deviceId;
hourCheckStatus.value[recordTime] = record.hourCheckStatus;
hourCheckTime.value[recordTime] = formatTime(record.hourCheckTime);
if (!alarmId.value[deviceId]) {
alarmId.value[deviceId] = {}
}
alarmId.value[deviceId][recordTime] = record.alarmId;
hourCheckValid.value[recordTime] = record.hourCheckValid;
for (const [name, valueObj] of Object.entries(data)) {
if (valueObj === null || valueObj.valule === null) continue;
// 使用参数缓存获取项目名称和其他信息
const paramInfo = paramsCache.value[name] || { projectName: name, referenceValue: 0, unit: '' };
if (!itemsMap[name]) {
itemsMap[name] = {
name,
label: paramInfo.projectName, // 直接使用中文名称
reference: paramInfo.referenceValue,
current: 0,
unit: paramInfo.unit,
data: {}
};
}
itemsMap[name].data[recordTime] = {
value: valueObj.value,
checkStatus: valueObj.checkStatus,
checkText: valueObj.checkText,
checkParamId: valueObj.checkParamId,
checkUser: valueObj.checkUser,
deviceId: record.deviceId,
};
}
});
inspectionItems.value = Object.values(itemsMap);
// 更新当前值
await fetchCurrentValues();
} else {
showWarningMessage('获取点检数据失败！');
}
} catch (error) {
console.error('Error fetching inspection data:', error);
} finally {
isLoading.value = false;
}
};
// 查询接口数据
const handleSearch = async () => {
try {
isLoading.value = true;
await fetchInspectionData();
} catch (error) {
showWarningMessage('数据刷新失败');
console.error('Error refreshing data:', error);
} finally {
isLoading.value = false;
}
};
// 日期变化处理函数
const handleDateChange = (event) => {
selectedDate.value = event.target.value;
@ -291,6 +452,13 @@ const handleDateChange = (event) => {
fetchCurrentValues();
};
// 产线变化处理函数
const handleLineChange = (event) => {
selectedLineId.value = event.detail;
fetchInspectionData();
fetchCurrentValues();
};
// 班次变化处理函数
const handleShiftChange = (event) => {
shift.value = event.detail;
@ -305,10 +473,24 @@ const handleDeviceListChange = (id) => {
fetchCurrentValues();
};
const fetchLineList = async () => {
try {
const response = await getLineList();
if (response.code === 200) {
lineList.value = response.data;
selectedLineId.value = lineList.value[0].id; // 默认选中第一个产线
} else {
showWarningMessage('获取产线列表失败！');
}
} catch (error) {
console.error('Error fetching line list:', error);
}
};
// 获取设备列表
const fetchDeviceList = async () => {
try {
const response = await getDeviceList();
const response = await getDeviceList(selectedLineId.value);
if (response.code === 200) {
deviceList.value = response.data;
selectedDeviceTypeId.value = deviceList.value[0].id; // 默认选中第一个设备
@ -320,126 +502,6 @@ const fetchDeviceList = async () => {
}
};
// 获取当前值、参考值、单位等信息
const fetchCurrentValues = async () => {
try {
const deviceId = selectedDeviceTypeId.value; // 根据实际情况设置设备ID
const dateValue = selectedDate.value || currentDate;
const response = await getInspectionCurrent(deviceId, dateValue);
const params = await getCheckParas(deviceId, dateValue);
if (response.data) {
const currentValueList = response.data;
console.log("🚀 ~ fetchCurrentValues ~ currentValueList:", currentValueList)
const currentValues = {};
currentValueList.forEach(item => {
// 解析设备实时数据并过滤掉值为 null 的项
for (const [key, value] of Object.entries(item.data)) {
if (value !== null) {
currentValues[key] = value;
}
}
});
console.log("🚀 ~ fetchCurrentValues ~ currentValues:", currentValues)
inspectionItems.value.forEach(item => {
item.current = formatNumberWithCommas(currentValues?.[item.name]) || '--'; // 添加对 currentValues 的检查
});
} else {
showWarningMessage('获取当前设备当前值失败！');
}
if (params.data) {
const paramData = params.data;
inspectionItems.value.forEach(item => {
const param = paramData.find(param => {
return param.keyname === item.name;
});
if (param) {
item.label = param.projectDescription;
item.reference = param.referenceValue;
item.unit = param.unit;
}
});
} else {
showWarningMessage('获取设备具体信息失败！');
}
} catch (error) {
console.error('Error fetching current values:', error);
}
};
// 获取点检数据
const fetchInspectionData = async () => {
try {
const deviceTypeId = selectedDeviceTypeId.value; // 根据实际情况设置设备ID
const shiftValue = shift.value;
const dateValue = selectedDate.value || currentDate;
const response = await getInspectionData(deviceTypeId, dateValue, shiftValue);
if (response.data) {
const inspectionData = response.data;
const itemsMap = {};
inspectionData.forEach(record => {
const recordTime = record.recordTime;
const data = record.data;
const deviceId = record.deviceId;
hourCheckStatus.value[recordTime] = record.hourCheckStatus;
hourCheckTime.value[recordTime] = formatTime(record.hourCheckTime);
if (!alarmId.value[deviceId]) {
alarmId.value[deviceId] = {} // 初始化设备ID对应的存储空间
}
alarmId.value[deviceId][recordTime] = record.alarmId;
hourCheckValid.value[recordTime] = record.hourCheckValid;
for (const [name, valueObj] of Object.entries(data)) {
if (valueObj === null || valueObj.valule === null) continue; // 过滤掉值为 null 的属性
if (!itemsMap[name]) {
itemsMap[name] = {
name,
label: name, // 可以根据需要调整label的值
reference: 0,
current: 0,
unit: '', // 添加单位字段
data: {}
};
}
itemsMap[name].data[recordTime] = {
value: valueObj.valule,
checkStatus: valueObj.checkStatus,
checkText: valueObj.checkText,
checkParamId: valueObj.checkParamId,
checkUser: valueObj.checkUser,
deviceId: record.deviceId,
// hourCheckStatus: valueObj.hourCheckStatus,
// hourCheckTime: valueObj.hourCheckTime
};
}
});
inspectionItems.value = Object.values(itemsMap);
} else {
showWarningMessage('获取点检数据失败！');
}
} catch (error) {
console.error('Error fetching inspection data:', error);
}
};
// 查询接口数据
const handleSearch = async () => {
try {
await Promise.all([fetchInspectionData(), fetchCurrentValues()]);
// showInfoMessage('数据刷新成功');
} catch (error) {
showWarningMessage('数据刷新失败');
console.error('Error refreshing data:', error);
}
};
const handleExport = () => {
// 增加一个判断，判断当前的数据中inspectionItems.value中是否有报警数据，如果有则提示不允许导出
if (inspectionItems.value.some(item => Object.values(item.data).some(data => data.checkStatus === 0))) {
@ -477,51 +539,18 @@ const getDeviceNameById = (id) => {
return device ? device.name : '';
};
// let autoUpdateInterval = null;
onMounted(async () => {
isLoading.value = true;
try {
await fetchLineList();
await fetchDeviceList();
await handleSearch();
sendDataToParent();
// const setupAutoUpdate = () => {
// if (isAutoUpdate.value) {
// autoUpdateInterval = setInterval(() => {
// fetchCurrentValues();
// fetchInspectionData();
// }, 60000); // 每分钟刷新一次接口
// } else if (autoUpdateInterval) {
// clearInterval(autoUpdateInterval);
// autoUpdateInterval = null;
// }
// };
// setupAutoUpdate();
// 监听 update-history 事件
// window.addEventListener('update-history', (event) => {
// isAutoUpdate.value = false;
// selectedDate.value = event.detail;
// fetchCurrentValues();
// fetchInspectionData();
// setupAutoUpdate();
// });
// 监听 reset 事件
// window.addEventListener('reset', (event) => {
// isAutoUpdate.value = true;
// selectedDate.value = moment().tz(timezone).format('YYYY-MM-DD HH:mm');
// fetchCurrentValues();
// fetchInspectionData();
// setupAutoUpdate();
// });
} finally {
isLoading.value = false;
}
});
// onUnmounted(() => {
// if (autoUpdateInterval) {
// clearInterval(autoUpdateInterval);
// }
// });
</script>
<style scoped>
@ -699,4 +728,19 @@ onMounted(async () => {
.alarm-cell-title {
--theme-color-success: red;
}
/* 添加加载状态样式 */
.loading-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.loading-text {
margin-top: 1rem;
font-size: 1.2rem;
}
</style>