feat: 更新导出Excel接口，新增lineId参数；优化sharpConfirm接口参数处理

src/api/inspection.js

@@ -25,17 +25,25 @@ 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'
     });
 }
 
 // 导出excel
-export function exportExcel(deviceId, inputTime, shift) {
+export function exportExcel(deviceId, inputTime, shift, lineId) {
     return request({
-        url: `/Check/Export/Juice?deviceTypeId=${deviceId}&inputTime=${inputTime}&shift=${shift}`,
+        url: `/Check/Export/Juice?deviceTypeId=${deviceId}&inputTime=${inputTime}&shift=${shift}&lineId=${lineId}`,
         method: 'get',
         responseType: 'arraybuffer'  // 关键：设置响应类型为 arraybuffer
     });
@@ -44,9 +52,21 @@ export function exportExcel(deviceId, inputTime, shift) {
 // 报警相关接口
 // 时间点确认点检，传递多个 alarmId
 export function sharpConfirm(alarmIdList, confirmTime, checkUser) {
-    const alarmIdParams = alarmIdList.map(id => `alarmIdList=${id}`).join('&');
+    const params = new URLSearchParams();
+    
+    // 添加 alarmId 参数
+    alarmIdList.forEach(id => params.append('alarmIdList', id));
+    
+    // 添加其他参数
+    if (confirmTime) {
+        params.append('confirmTime', confirmTime);
+    }
+    if (checkUser) {
+        params.append('checkUser', checkUser);
+    }
+    
     return request({
-        url: `/Check/sharpConfirm?${alarmIdParams}&checkUser=${checkUser}`,
+        url: `/Check/sharpConfirm?${params.toString()}`,
         method: 'post'
     });
 }

src/utils/request.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const service = axios.create({
   // baseURL: 'http://192.168.1.199:8080/api', // 办公室测试接口
-  // baseURL: 'http://39.105.9.124:8090/api', // 家用测试接口
+  // baseURL: 'http://39.105.9.124:8082/api', // 家用测试接口
   baseURL: '/api',
   timeout: 5000, // 请求超时时间
   headers: {

src/views/Inspection/index.vue

@@ -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>
@@ -41,8 +50,8 @@
                     <span class="fixed-width"></span>
                     <span class="fixed-width"></span>
                     <span class="fixed-width" v-for="(hour, index) in hours" :key="hour">
-                        <IxButton :disabled="confirmedHours.includes(hour) || hourCheckStatus[hour] !== null" class="custom-button" @click="handleInspection(hour, index)">
+                        <IxButton :disabled="confirmedHours.includes(hour) || (hourCheckStatus[selectedDeviceTypeId]?.[hour] !== null && hourCheckTime[selectedDeviceTypeId]?.[hour] !== null) || hourCheckValid[selectedDeviceTypeId]?.[hour] === 0" class="custom-button" @click="handleInspection(hour, index)">
-                            {{ hourCheckStatus[hour] !== null ? hourCheckTime[hour] : '确认' }}
+                            {{ (hourCheckStatus[selectedDeviceTypeId]?.[hour] !== null && hourCheckTime[selectedDeviceTypeId]?.[hour] !== null) ? hourCheckTime[selectedDeviceTypeId]?.[hour] : '确认' }}
                         </IxButton>
                     </span>
                 </div>
@@ -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);
@@ -178,32 +191,42 @@ const confirmedHours = ref([]);
 const confirmedTimes = ref({});
 
 // 点检状态
-const hourCheckStatus = ref({});
+const hourCheckStatus = ref({}); // 改为双层结构：{ [deviceId: string]: { [recordTime: string]: number } }
-const hourCheckTime = ref({});
+const hourCheckTime = ref({}); // 改为双层结构：{ [deviceId: string]: { [recordTime: string]: string } }
 const alarmId = ref({}); // 改为双层结构：{ [deviceId: string]: { [recordTime: string]: number } }
 const hourCheckValid = ref({});
 
 const formatTime = (time) => {
+    if (!time) return null; // 如果时间为空，返回 null
     const date = new Date(time);
+    if (isNaN(date.getTime())) return null; // 如果时间无效，返回 null
     const hours = date.getHours().toString().padStart(2, '0');
     const minutes = date.getMinutes().toString().padStart(2, '0');
     return `${hours}:${minutes}`;
 };
 
+// 添加加载状态变量
+const isLoading = ref(true);
+
+// 添加参数缓存对象
+const paramsCache = ref({});
+
 // 点检按钮点击事件
 const handleInspection = (hour, index) => {    
-    selectedItemName.value = inspectionItems.value[index].label;
+    selectedItemName.value = inspectionItems.value[index]?.label || '';
     selectedItemTime.value = hour;
     selectedItemIndex.value = index; // 保存当前索引
     // 获取当前时间点所有设备报警ID
     const currentAlarmIds = [];   
 
     // 校验是否已经确认异常数据
-    if (hourCheckValid.value[hour] !== 1) {
+    // 只有明确为 0 时才表示存在设备异常，null/undefined 表示正常
+    if (hourCheckValid.value[selectedDeviceTypeId.value]?.[hour] === 0) {
         showWarningMessage('存在设备异常，无法执行点检操作！');
         return;
     }
-    // 校验这个时刻这一列有咩有报警未处理的数据，也就是checkStatus为0的数据
+    
+    // 校验这个时刻这一列有没有报警未处理的数据，也就是checkStatus为0的数据
     if (inspectionItems.value.some(item => item.data[hour]?.checkStatus === 0)) {         
         showWarningMessage('存在报警数据未处理，无法执行点检操作！');
         return;
@@ -215,14 +238,26 @@ const handleInspection = (hour, index) => {
             currentAlarmIds.push(alarmId.value[deviceId][hour]);
         }
     });
-    console.log("🚀 ~ handleInspection ~ currentAlarmIds:", currentAlarmIds)
 
     showConfirmMessage('确认要执行点检操作吗？', async () => {
-        await sharpConfirm(currentAlarmIds, 'admin').then(() => {
+        const confirmTime = moment().tz(timezone).format('YYYY-MM-DD HH:mm');
+        await sharpConfirm(currentAlarmIds, confirmTime, 'admin').then(() => {
             confirmedHours.value.push(selectedItemTime.value);
             confirmedTimes.value[selectedItemTime.value] = moment().tz(timezone).format('HH:mm');
-            hourCheckStatus.value[hour] = 1; // 更新点检状态
+            
-            hourCheckTime.value[hour] = confirmedTimes.value[selectedItemTime.value]; // 更新点检时间
+            // 按设备更新点检状态
+            if (!hourCheckStatus.value[selectedDeviceTypeId.value]) {
+                hourCheckStatus.value[selectedDeviceTypeId.value] = {};
+            }
+            if (!hourCheckTime.value[selectedDeviceTypeId.value]) {
+                hourCheckTime.value[selectedDeviceTypeId.value] = {};
+            }
+            
+            hourCheckStatus.value[selectedDeviceTypeId.value][hour] = 1; // 更新当前设备的点检状态
+            hourCheckTime.value[selectedDeviceTypeId.value][hour] = confirmedTimes.value[selectedItemTime.value]; // 更新当前设备的点检时间
+        }).catch((error) => {
+            console.error('点检确认失败:', error);
+            showWarningMessage('点检确认失败，请稍后重试');
         });
     }, () => {
         showWarningMessage('取消点检操作');
@@ -284,6 +319,182 @@ 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 => {
+                // 通过 checkParamId 查找对应的当前值
+                let currentValue = '--';
+                for (const [key, value] of Object.entries(currentValues)) {
+                    // 需要通过 checkParamId 匹配，因为 key 可能不同
+                    if (item.checkParamId && value !== null) {
+                        // 这里需要根据实际的参数映射关系来匹配
+                        // 暂时使用原始名称匹配
+                        if (item.originalName === key) {
+                            currentValue = value;
+                            break;
+                        }
+                    }
+                }
+                item.current = formatNumberWithCommas(currentValue) || '--';
+            });
+        } 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.filter(record => record.lineId === selectedLineId.value);
+            const itemsMap = {};
+            inspectionData.forEach(record => {
+                const recordTime = record.recordTime;
+                const data = record.data;
+                const deviceId = record.deviceId;
+                
+                // 按设备分组存储点检状态
+                if (!hourCheckStatus.value[deviceId]) {
+                    hourCheckStatus.value[deviceId] = {};
+                }
+                if (!hourCheckTime.value[deviceId]) {
+                    hourCheckTime.value[deviceId] = {};
+                }
+                
+                // 只有在本地没有设置过的情况下，才使用服务器数据
+                if (hourCheckStatus.value[deviceId][recordTime] === undefined) {
+                    hourCheckStatus.value[deviceId][recordTime] = record.hourCheckStatus;
+                }
+                if (hourCheckTime.value[deviceId][recordTime] === undefined) {
+                    hourCheckTime.value[deviceId][recordTime] = formatTime(record.hourCheckTime);
+                }
+
+                if (!alarmId.value[deviceId]) {
+                    alarmId.value[deviceId] = {}
+                }
+                alarmId.value[deviceId][recordTime] = record.alarmId;
+
+                // 按设备分组存储点检有效状态
+                if (!hourCheckValid.value[deviceId]) {
+                    hourCheckValid.value[deviceId] = {};
+                }
+                hourCheckValid.value[deviceId][recordTime] = record.hourCheckValid;
+
+                for (const [name, valueObj] of Object.entries(data)) {
+                    if (valueObj === null || valueObj.value === null) continue;
+                    
+                    // 使用 checkParamId 作为唯一标识，避免不同设备间参数覆盖
+                    const uniqueKey = valueObj.checkParamId.toString();
+                    
+                    // 使用参数缓存获取项目名称和其他信息
+                    const paramInfo = paramsCache.value[name] || { projectName: name, referenceValue: 0, unit: '' };
+                    
+                    if (!itemsMap[uniqueKey]) {
+                        itemsMap[uniqueKey] = {
+                            name: uniqueKey,
+                            originalName: name, // 保留原始名称用于调试
+                            label: paramInfo.projectName, // 直接使用中文名称
+                            reference: paramInfo.referenceValue,
+                            current: 0,
+                            unit: paramInfo.unit,
+                            checkParamId: valueObj.checkParamId,
+                            data: {}
+                        };
+                    }
+                    
+                    itemsMap[uniqueKey].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 +502,13 @@ const handleDateChange = (event) => {
     fetchCurrentValues();
 };
 
+// 产线变化处理函数
+const handleLineChange = (event) => {
+    selectedLineId.value = event.detail;
+    fetchInspectionData();
+    fetchCurrentValues();
+};
+
 // 班次变化处理函数
 const handleShiftChange = (event) => {
     shift.value = event.detail;
@@ -305,10 +523,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 +552,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))) {
@@ -448,7 +560,7 @@ const handleExport = () => {
     }
 
     showInfoMessage('导出全部');
-    exportExcel(selectedDeviceTypeId.value, selectedDate.value || currentDate, shift.value)
+    exportExcel(selectedDeviceTypeId.value, selectedDate.value || currentDate, shift.value, selectedLineId.value)
       .then((response) => {
         if (response) {
           // 有数据的处理
@@ -477,51 +589,18 @@ const getDeviceNameById = (id) => {
     return device ? device.name : '';
 };
 
-// let autoUpdateInterval = null;
-
 onMounted(async () => {
+    isLoading.value = true;
+    try {
+        await fetchLineList();
         await fetchDeviceList();
         await handleSearch();
         sendDataToParent();
-
+    } finally {
-//     const setupAutoUpdate = () => {
+        isLoading.value = false;
-//         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();
-    // });
 });
 
-// onUnmounted(() => {
-//     if (autoUpdateInterval) {
-//         clearInterval(autoUpdateInterval);
-//     }
-// });
 </script>
 
 <style scoped>
@@ -654,6 +733,15 @@ onMounted(async () => {
     --theme-btn-primary--background--hover: #FFA849;
 }
 
+/* 禁用状态的按钮样式 */
+.custom-button[disabled] {
+    --theme-btn-primary--background: #666666 !important;
+    --theme-btn-primary--background--hover: #666666 !important;
+    --theme-btn-primary--color: #999999 !important;
+    cursor: not-allowed !important;
+    opacity: 0.6 !important;
+}
+
 .drop-down {
     width: calc(25% - 1.25rem);
     background-color: #23233C;
@@ -699,4 +787,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>