团队博客

今天整理了管理员页面的布局提高了script代码的整洁度
// 全局变量
let currentWorkOrderId;
let currentMaintenanceTaskId;
let currentEditId = null;
// 隐藏所有容器
function hideAllContainers() {
const containers = [
'taskContainer',
'maintenanceContainer',
'workOrderCards',
'allInspectionWorkOrders',
'equipmentStatusList',
'repairTaskContainer',
'allMaintenanceWorkOrders',
'maintenanceTaskCards',
'approveWorkOrder',
'rejectWorkOrder',
'rejectmainWorkOrder',
'approvemainWorkOrder'
];
containers.forEach(container => {
document.getElementById(container).classList.add('hidden');

});

}

// 显示指定表单
function showForm(formType) {
hideAllContainers();
if (formType === 'task') {
document.getElementById('taskContainer').classList.remove('hidden');
} else if (formType ==='maintenance') {
document.getElementById('maintenanceContainer').classList.remove('hidden');
}
}

// 切换子菜单
function toggleSubMenu(menuId) {
const menu = document.getElementById(menuId);
menu.classList.toggle('hidden');
}

// 统一的请求错误处理函数
function handleRequestError(error) {
console.error('请求出错:', error);
alert('请求出错，请检查网络或联系管理员。');
}

// 显示巡检工单
function showInspectionWorkOrders() {
hideAllContainers();
const container = document.getElementById('workOrderCards');
container.classList.remove('hidden');
fetch('/api/work-orders/inspection/approved-pending')
.then(response => {
if (!response.ok) {
throw new Error(请求失败，状态码: ${response.status});
}
return response.json();
})
.then(data => {
if (Array.isArray(data) && data.length > 0) {
const container = document.getElementById('workOrderCards');
container.innerHTML = data.map(item => <div class="bg-white p-6 rounded shadow-md"> <h3 class="text-xl font-bold mb-2">工单ID: ${item.workOrderId}</h3> <p class="mb-2">任务ID: ${item.task_id}</p> <p class="mb-2">工单状态: ${item.work_order_status}</p> <p class="mb-2">审核状态: ${item.audit_status}</p> <button onclick="showWorkOrderDetails('${item.workOrderId}')" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">查看详情</button> </div> ).join('');
} else {
container.innerHTML = <div class="bg-white p-6 rounded shadow-md text-center col-span-full"> <p class="text-gray-500">暂无待处理巡检工单</p> </div> ;
}
})
.catch(handleRequestError);
}
function showWorkOrderDetails(workOrderId) {
currentWorkOrderId = workOrderId;
document.getElementById(rejectWorkOrder).classList.remove('hidden');
document.getElementById(approveWorkOrder).classList.remove('hidden');
fetch(/api/work-orders/${workOrderId})
.then(response => {
if (!response.ok) {
throw new Error(请求失败，状态码: ${response.status});
}
return response.json();
})
.then(data => {
const content = document.getElementById('auditContent');
content.innerHTML = <p>工单ID: ${data.work_order_id}</p> <p>任务ID: ${data.fault_id}</p> <p>工单状态: ${data.work_order_status}</p> <p>审核状态: ${data.audit_status}</p> <p>处理人: ${data.processed_by}</p> <p>处理人: ${data.inspection_result}</p> <p>巡检照片: <img src="${data.maintenance_photo_path}" class="max-w-[200px] mb-4"></p> <p>处理时间线: ${data.processing_timeline}</p> <p>处理流程图: <img src="${data.processing_flow_chart}" class="max-w-[200px] mb-4"></p> ;
document.getElementById('auditModal').classList.remove('hidden');
})
.catch(handleRequestError);
}
// 新增显示所有巡检工单函数
function showAllInspectionWorkOrders() {
hideAllContainers();
document.getElementById('allInspectionWorkOrders').classList.remove('hidden');

fetch('/api/work-orders/all')
    .then(response => {
        if (!response.ok) throw new Error(`请求失败，状态码: ${response.status}`);
        return response.json();
    })
    .then(data => {
        const container = document.getElementById('inspectionWorkOrderList');
        if (Array.isArray(data) && data.length > 0) {
            container.innerHTML =  data.map(item => `

${data.map(item => ` 编辑 `).join('')}

工单ID	任务ID	状态	审核状态	处理时间线	流程图	巡检照片	处理人
${item.workOrderId}	${item.task_id}	${item.work_order_status}	${item.audit_status}	${item.processing_timeline}			${item.processed_by}

`) } else { container.innerHTML = `

暂无巡检工单数据

`; } }) .catch(handleRequestError); }

function openEditModal(workOrderId) {
currentEditId = workOrderId;
fetch(/workOrder/${workOrderId})
.then(response => response.json())
.then(data => {
document.getElementById('edit_work_order_id').value = data.work_order_id;
document.getElementById('edit_audit_status').value = data.audit_status;
document.getElementById('edit_processed_by').value = data.processed_by;
document.getElementById('edit_inspection_result').value = data.inspection_result;
document.getElementById('edit_inspection_photo_path').value = data.inspection_photo_path;
document.getElementById('edit_processing_timeline').value = JSON.stringify(data.processing_timeline, null, 2);
document.getElementById('edit_processing_flow_chart').value = JSON.stringify(data.processing_flow_chart, null, 2);
document.getElementById('edit_work_order_status').value = data.work_order_status;
document.getElementById('editModal').classList.remove('hidden');
})
.catch(handleRequestError);
}
function closeEditModal() {
document.getElementById('editModal').classList.add('hidden');
currentEditId = null;
}

function saveEdit() {
const updateData = {
work_order_id: document.getElementById('edit_work_order_id').value,
audit_status: document.getElementById('edit_audit_status').value,
processed_by: document.getElementById('edit_processed_by').value,
inspection_result: document.getElementById('edit_inspection_result').value,
inspection_photo_path: document.getElementById('edit_inspection_photo_path').value,
processing_timeline: tryParseJSON(document.getElementById('edit_processing_timeline').value),
processing_flow_chart: tryParseJSON(document.getElementById('edit_processing_flow_chart').value),
work_order_status: document.getElementById('edit_work_order_status').value
};

fetch(`/workOrder/update`, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(updateData)
})
    .then(response => {
        if (!response.ok) throw new Error('更新失败');
        closeEditModal();
        showAllInspectionWorkOrders();
        alert('更新成功');
    })
    .catch(handleRequestError);

}
function tryParseJSON(jsonString) {
try {
return JSON.parse(jsonString);
} catch (e) {
alert('JSON格式错误，请检查输入');
throw new Error('Invalid JSON');
}
}
// 新增显示所有保养工单函数
function showAllMaintenanceWorkOrders() {
hideAllContainers();
document.getElementById('allMaintenanceWorkOrders').classList.remove('hidden');

fetch('/maintenanceWorkOrder/all')
    .then(response => {
        if (!response.ok) throw new Error(`请求失败，状态码: ${response.status}`);
        return response.json();
    })
    .then(data => {
        const container = document.getElementById('maintenanceWorkOrderList');
        if (Array.isArray(data) && data.length > 0) {
            container.innerHTML = `
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">工单ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">故障ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">处理时间线</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">流程图</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">保养照片</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">申领物品</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">借用物品</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">归还时间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">处理人</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">审核状态</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        ${data.map(item => `
                            <tr>
                                <td class="px-6 py-4">${item.work_order_id}</td>
                                <td class="px-6 py-4">${item.fault_id}</td>
                                <td class="px-6 py-4">${item.work_order_status}</td>
                                <td class="px-6 py-4 whitespace-pre-line">${item.processing_timeline}</td>
                                <td class="px-6 py-4">
                                    <img src="${item.processing_flow_chart}" class="max-w-[200px] h-auto border rounded">
                                </td>
                                <td class="px-6 py-4">
                                    <img src="${item.maintenance_photo_path}" class="max-w-[200px] h-auto border rounded">
                                </td>
                                <td class="px-6 py-4">${item.maintenance_claim_items}</td>
                                <td class="px-6 py-4">${item.maintenance_borrow_items}</td>
                                <td class="px-6 py-4">${item.borrow_return_time}</td>
                                <td class="px-6 py-4">${item.processed_by}</td>
                                <td class="px-6 py-4">${item.audit_status}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
        } else {
            container.innerHTML = `<p class="text-center py-4 text-gray-500">暂无保养工单数据</p>`;
        }
    })
    .catch(handleRequestError);

}
// 显示保养工单
function showMaintenanceWorkOrders() {
hideAllContainers();
const container = document.getElementById('maintenanceTaskCards');
container.classList.remove('hidden');
fetch('/maintenanceWorkOrder/getUnprocessed')
.then(response => {
if (!response.ok) {
throw new Error(请求失败，状态码: ${response.status});
}
return response.json();
})
.then(data => {
if (Array.isArray(data) && data.length > 0) {
const container = document.getElementById('maintenanceTaskCards');
container.innerHTML = data.map(item => <div class="bg-white p-6 rounded shadow-md"> <h3 class="text-xl font-bold mb-2">工单ID: ${item.work_order_id}</h3> <p class="mb-2">任务ID: ${item.fault_id}</p> <p class="mb-2">工单状态: ${item.work_order_status}</p> <p class="mb-2">审核状态: ${item.audit_status}</p> <button onclick="showmainWorkOrderDetails('${item.work_order_id}')" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">查看详情</button> </div> ).join('');
} else {
container.innerHTML = <div class="bg-white p-6 rounded shadow-md text-center col-span-full"> <p class="text-gray-500">暂无待处理保养工单</p> </div> ;
}
})
.catch(handleRequestError);
}

// 显示工单详情
function showmainWorkOrderDetails(workOrderId) {
currentMaintenanceTaskId = workOrderId;
document.getElementById('approvemainWorkOrder').classList.remove('hidden');
document.getElementById('rejectmainWorkOrder').classList.remove('hidden');

fetch(`/maintenanceWorkOrder/${workOrderId}`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
        const content = document.getElementById('auditContent');
        content.innerHTML = `
            <p>工单ID: ${data.work_order_id}</p>
            <p>任务ID: ${data.fault_id}</p>
            <p>工单状态: ${data.work_order_status}</p>
            <p>审核状态: ${data.audit_status}</p>
            <p>处理人: ${data.processed_by}</p>
            <p>借用归还时间: ${data.borrow_return_time}</p>
            <p>保养借用物品: ${data.maintenance_borrow_items}</p>
            <p>保养申领物品: ${data.maintenance_claim_items}</p>
            <p>保养照片: <img src="${data.maintenance_photo_path}" class="max-w-[200px] mb-4"></p>
            <p>处理时间线: ${data.processing_timeline}</p>
            <p>处理流程图: <img src="${data.processing_flow_chart}" class="max-w-[200px] mb-4"></p>
        `;
        document.getElementById('auditModal').classList.remove('hidden');
    })
    .catch(handleRequestError);

}

function approvemainWorkOrder() {
fetch(/maintenanceWorkOrder/${currentMaintenanceTaskId}/audit?approved=true, {
method: 'PUT'
})
.then(response => {
if (response.ok) {
alert('审核通过');
closeAuditModal();
showInspectionWorkOrders();
} else {
response.text().then(errorText => {
console.error('Error:', errorText);
alert('审核失败: ' + errorText);
});
}
})
.catch(handleRequestError);
}
// 审核通过
function approveWorkOrder() {
fetch(/api/work-orders/${currentWorkOrderId}/audit?approved=true, {
method: 'PUT'
})
.then(response => {
if (response.ok) {
alert('审核通过');
closeAuditModal();
showInspectionWorkOrders();
} else {
response.text().then(errorText => {
console.error('Error:', errorText);
alert('审核失败: ' + errorText);
});
}
})
.catch(handleRequestError);
}
function rejectmainWorkOrder() {
fetch(/api/work-orders/${currentWorkOrderId}/audit?approved=false, {
method: 'PUT'
})
.then(response => {
if (response.ok) {
alert('审核未通过');
closeAuditModal();
showInspectionWorkOrders();
} else {
response.text().then(errorText => {
console.error('Error:', errorText);
alert('审核失败: ' + errorText);
});
}
})
.catch(handleRequestError);
}

// 审核未通过
function rejectWorkOrder() {
fetch(/api/work-orders/${currentWorkOrderId}/audit?approved=false, {
method: 'PUT'
})
.then(response => {
if (response.ok) {
alert('审核未通过');
closeAuditModal();
showInspectionWorkOrders();
} else {
response.text().then(errorText => {
console.error('Error:', errorText);
alert('审核失败: ' + errorText);
});
}
})
.catch(handleRequestError);
}

// 关闭审核模态框
function closeAuditModal() {
document.getElementById('auditModal').classList.add('hidden');
}

// 填充任务表单
function fillTaskForm(equipmentDetails, inspectionItems, inspectionTime) {
const eqDetails = JSON.parse(equipmentDetails);
document.getElementById('equipment_id').value = eqDetails.equipment_id || '';
document.getElementById('equipment_name').value = eqDetails.equipment_name || '';
document.getElementById('equipment_type').value = eqDetails.equipment_type || '';
document.getElementById('station_id').value = eqDetails.station_id || '';
document.getElementById('installation_location').value = eqDetails.installation_location || '';
document.getElementById('inspectionItems').value = inspectionItems || '';
document.getElementById('inspectionTime').value = inspectionTime || '';
showForm('task');
}

// 显示设备状态
function showEquipmentStatus() {
hideAllContainers();
document.getElementById('equipmentStatusList').classList.remove('hidden');
fetch('/api/equipment/status')
.then(response => {
if (!response.ok) {
throw new Error(请求失败，状态码: ${response.status});
}
return response.text().then(text => {
console.log('原始响应数据:', text);
try {
return JSON.parse(text);
} catch (error) {
console.error('JSON 解析失败:', error);
throw error;
}
});
})
.then(data => {
if (Array.isArray(data)) {
const tableBody = document.getElementById('equipmentTableBody');
tableBody.innerHTML = data.map(item => {
if (item) {
let buttons = <button onclick="startInspection(${item.equipment_id})" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">巡检</button> <button onclick="startMaintenance(${item.equipment_id})" class="py-2 px-4 bg-green-500 text-white rounded hover:bg-green-600">保养</button> ;
if (item.equipment_status === '异常') {
buttons += <button onclick="startRepairTask(${item.task_id})" class="py-2 px-4 bg-red-500 text-white rounded hover:bg-red-600">发布维修任务</button> ;
}
return <tr> <td class="px-6 py-4 whitespace-nowrap">${item.equipment_id}</td> <td class="px-6 py-4 whitespace-nowrap">${item.equipment_name}</td> <td class="px-6 py-4 whitespace-nowrap">${item.equipment_type}</td> <td class="px-6 py-4 whitespace-nowrap">${item.equipment_status}</td> <td class="px-6 py-4 whitespace-nowrap">${buttons}</td> </tr> ;
}
return '';
}).join('');
} else {
console.error('接收到的数据不是数组:', data);
}
})
.catch(handleRequestError);
}

// 开始巡检
function startInspection(equipmentId) {
alert(开始对设备 ${equipmentId} 进行巡检);
}

// 开始保养
function startMaintenance(equipmentId) {
alert(开始对设备 ${equipmentId} 进行保养);
}

// 开始维修任务
function startRepairTask(taskId) {
fetch(/api/inspection-task/${taskId})
.then(response => {
if (!response.ok) {
throw new Error(请求失败，状态码: ${response.status});
}
return response.json();
})
.then(data => {
const eqDetails = JSON.parse(data.equipment_details);
document.getElementById('repair_equipment_id').value = eqDetails.equipment_id || '';
document.getElementById('repair_equipment_name').value = eqDetails.equipment_name || '';
document.getElementById('repair_equipment_type').value = eqDetails.equipment_type || '';
document.getElementById('repair_station_id').value = eqDetails.station_id || '';
document.getElementById('repair_installation_location').value = eqDetails.installation_location || '';
document.getElementById('repair_inspectionItems').value = data.inspection_items || '';
hideAllContainers();
document.getElementById('repairTaskContainer').classList.remove('hidden');
})
.catch(handleRequestError);
}

// 提交维修任务
function submitRepairTask() {
const equipmentDetails = {
equipment_id: document.getElementById('repair_equipment_id').value,
equipment_name: document.getElementById('repair_equipment_name').value,
equipment_type: document.getElementById('repair_equipment_type').value,
station_id: document.getElementById('repair_station_id').value,
installation_location: document.getElementById('repair_installation_location').value
};
const taskData = {
equipment_details: JSON.stringify(equipmentDetails),
inspection_items: document.getElementById('repair_inspectionItems').value,
task_status: "未处理",
inspection_time: document.getElementById('repairTime').value
};
fetch('/api/repair-task/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(taskData)
})
.then(response => {
if (response.ok) {
alert('发布维修任务成功');
document.getElementById('repairTaskForm').reset();
document.getElementById('repairTaskContainer').classList.add('hidden');
} else {
response.text().then(errorText => {
console.error('Error:', errorText);
alert('发布维修任务失败: ' + errorText);
});
}
})
.catch(handleRequestError);
}

// 提交巡检任务
function submitTask() {
hideAllContainers();
document.getElementById('taskForm').classList.remove('hidden');
const equipmentDetails = {
equipment_id: document.getElementById('equipment_id').value,
equipment_name: document.getElementById('equipment_name').value,
equipment_type: document.getElementById('equipment_type').value,
station_id: document.getElementById('station_id').value,
installation_location: document.getElementById('installation_location').value
};
let inspectionItemsValue = document.getElementById('inspectionItems').value;
try {
const jsonArray = [inspectionItemsValue];
inspectionItemsValue = JSON.stringify(jsonArray);
console.log('JSON 解析成功:', inspectionItemsValue);
} catch (error) {
console.error('JSON 解析失败:', error);
}
const taskData = {
equipment_details: JSON.stringify(equipmentDetails),
inspection_items: inspectionItemsValue,
task_status: "未处理",
inspection_time: document.getElementById('inspectionTime').value
};
fetch('/api/task/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(taskData)
})
.then(response => {
if (response.ok) {
alert('发布成功');
document.getElementById('taskForm').reset();
document.getElementById('taskContainer').classList.add('hidden');
} else {
response.text().then(errorText => {
console.error('Error:', errorText);
alert('发布失败: ' + errorText);
});
}
})
.catch(handleRequestError);
}

// 提交保养任务
function submitMaintenanceTask() {
hideAllContainers();
document.getElementById('maintenanceForm').classList.remove('hidden');
const equipmentDetails = {
equipment_id: document.getElementById('maintenance_equipment_id').value,
equipment_name: document.getElementById('maintenance_equipment_name').value,
equipment_type: document.getElementById('maintenance_equipment_type').value,
station_id: document.getElementById('maintenance_station_id').value,
installation_location: document.getElementById('maintenance_installation_location').value
};
let maintenanceItemsValue = document.getElementById('maintenanceItems').value;
try {
const jsonArray = [maintenanceItemsValue];
maintenanceItemsValue = JSON.stringify(jsonArray);
console.log('JSON 解析成功:', maintenanceItemsValue);
} catch (error) {
console.error('JSON 解析失败:', error);
}
const taskData = {
equipment_details: JSON.stringify(equipmentDetails),
maintenance_items: maintenanceItemsValue,
task_status: "未处理",
maintenance_time: document.getElementById('maintenanceTime').value
};
fetch('/api/maintain/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(taskData)
})
.then(response => {
if (response.ok) {
alert('发布成功');
document.getElementById('maintenanceForm').reset();
document.getElementById('maintenanceContainer').classList.add('hidden');
} else {
response.text().then(errorText => {
console.error('Error:', errorText);
alert('发布失败: ' + errorText);
});
}
})
.catch(handleRequestError);
}

// 事件绑定
document.getElementById('showTaskForm').addEventListener('click', () => showForm('task'));
document.getElementById('showMaintenanceForm').addEventListener('click', () => showForm('maintenance'));
document.getElementById('toggleInspectionSubMenu').addEventListener('click', () => toggleSubMenu('inspectionSubMenu'));
document.getElementById('showInspectionWorkOrders').addEventListener('click', showInspectionWorkOrders);
document.getElementById('showMaintenanceWorkOrders').addEventListener('click', showMaintenanceWorkOrders);
document.getElementById('showEquipmentStatus').addEventListener('click', showEquipmentStatus);
document.getElementById('submitTask').addEventListener('click', submitTask);
document.getElementById('submitMaintenanceTask').addEventListener('click', submitMaintenanceTask);
document.getElementById('closeAuditModal').addEventListener('click', closeAuditModal);
document.getElementById('approveWorkOrder').addEventListener('click', approveWorkOrder);
document.getElementById('rejectWorkOrder').addEventListener('click', rejectWorkOrder);
document.getElementById('submitRepairTask').addEventListener('click', submitRepairTask);
document.getElementById('approvemainWorkOrder').addEventListener('click', approvemainWorkOrder);
document.getElementById('rejectmainWorkOrder').addEventListener('click', rejectmainWorkOrder);