fix: 点检功能修改

package-lock.json

@@ -8,9 +8,9 @@
       "name": "ix-siemens",
       "version": "0.1.0",
       "dependencies": {
-        "@siemens/ix": "^2.5.0",
+        "@siemens/ix": "^2.7.0",
         "@siemens/ix-icons": "^2.2.0",
-        "@siemens/ix-vue": "^2.5.0",
+        "@siemens/ix-vue": "^2.7.0",
         "axios": "^1.7.9",
         "core-js": "^3.8.3",
         "echarts": "^5.6.0",
@@ -2093,15 +2093,14 @@
       "dev": true
     },
     "node_modules/@siemens/ix": {
-      "version": "2.5.0",
+      "version": "2.7.0",
-      "resolved": "https://registry.npmmirror.com/@siemens/ix/-/ix-2.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@siemens/ix/-/ix-2.7.0.tgz",
-      "integrity": "sha512-ms3B6rKJEN/VAEn55qoMcc91eK+7v0VRZs3eQGkxLt4nKUKVrhfBMz55Npx7KHug5cA+VIHdSEha5SdH8utd0w==",
+      "integrity": "sha512-JyHF4PEAdOdJqvjXPMBDWsOShsa7A6RZkPklrn91lL/h12XnqgBCWrXLQfDd+7U+4wxQYynLMoUkvvtZdVaHSA==",
       "dependencies": {
         "@floating-ui/dom": "^1.6.10",
         "@stencil/core": "~4.17.0",
         "@types/luxon": "^3.3.7",
         "animejs": "~3.2.1",
-        "hyperlist": "^1.0.0",
         "luxon": "^3.4.4"
       },
       "peerDependencies": {
@@ -2123,11 +2122,11 @@
       }
     },
     "node_modules/@siemens/ix-vue": {
-      "version": "2.5.0",
+      "version": "2.7.0",
-      "resolved": "https://registry.npmmirror.com/@siemens/ix-vue/-/ix-vue-2.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@siemens/ix-vue/-/ix-vue-2.7.0.tgz",
-      "integrity": "sha512-pApnMwHlIo+mATu5cFjE5V9Wb/mpRLvIjCyvZQAqvR6wDugSSatwKXfZK4jBmoyXJha0n8hPrd+1qiKRhBb8/g==",
+      "integrity": "sha512-f1t1Ux1vIdGr1318e3wz24rNxya1sPUgj0AOURWyxN2l4/dKuPJw/Ltb37sZn45U8EMk8fgXxt6SbjNjMBRk5w==",
       "dependencies": {
-        "@siemens/ix": "~2.5.0"
+        "@siemens/ix": "~2.7.0"
       },
       "peerDependencies": {
         "@siemens/ix-icons": "^2.0.0",
@@ -7032,11 +7031,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/hyperlist": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/hyperlist/-/hyperlist-1.0.0.tgz",
-      "integrity": "sha512-1qAjO29EJW/mPyqY+9wFjruD2YWur1dPsPYmt9RvMX6P+8Cr2UmT75MCWjjK+1/4Jxc3sm/G3Kr8DzGgEDRG+Q=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",

package.json

@@ -8,9 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@siemens/ix": "^2.5.0",
+    "@siemens/ix": "^2.7.0",
     "@siemens/ix-icons": "^2.2.0",
-    "@siemens/ix-vue": "^2.5.0",
+    "@siemens/ix-vue": "^2.7.0",
     "axios": "^1.7.9",
     "core-js": "^3.8.3",
     "echarts": "^5.6.0",

src/api/inspection.js

@@ -15,3 +15,11 @@ export function getInspectionData(deviceId, inputTime) {
         method: 'get'
     });
 }
+
+// 获取点检页面参数
+export function getCheckParas(deviceId, inputTime) {
+    return request({
+        url: `/Check/CheckParas?deviceId=${deviceId}&inputTime=${inputTime}`,
+        method: 'get'
+    });
+}

src/components/ProcessGanttChart.vue

@@ -146,8 +146,10 @@ const mapDataToTimeline = (data, startTime, endTime) => {
         const adjustedDuration = adjustedEndTime.getTime() - adjustedBeginTime.getTime();
         return {
             id: item.id,
-            stopReason: item.stopReason,
             name: 'Process',
+            stopReason: item.stopReason,
+            blendStatus: item.blendStatus,
+            capacity: item.capacity,
             value: adjustedDuration,
             deviceStatus: item.deviceStatus,
             mixerStep: item.mixerStep,

src/views/Dashboard/index.vue

@@ -240,7 +240,7 @@
                     </div>
                     <div class="spacing"></div>
                     <div class="info-item">
-                        <span class="info-label">当前配方：</span>
+                        <span class="info-label">当前步骤：</span>
                         <span class="info-label">果汁配方</span>
                     </div>
                     <div class="juice-item">
@@ -303,8 +303,8 @@
             <IxButton Outline class="btnStyle"> 开始时间：{{ startTimeFormatted }} </IxButton>
             <IxButton Outline class="btnStyle"> 结束时间：{{ endTimeFormatted }} </IxButton>
             <IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton>
-            <IxButton Outline class="btnStyle"> 调配状态：{{ currentStatus }} </IxButton>
+            <IxButton Outline class="btnStyle"> 调配状态：{{ blendStatus }} </IxButton>
-            <IxButton Outline class="btnStyle"> 罐重：{{ currentStatus }} </IxButton>
+            <IxButton Outline class="btnStyle"> 罐重：{{ capacity }} </IxButton>
         </div>
     </div>
 </template>
@@ -386,6 +386,8 @@ const duration = ref('');
 const productFlowRate = ref('');
 const formula = ref('');
 const mixerStep = ref(''); // 增加 step 字段
+const blendStatus = ref('');
+const capacity = ref('');
 const currentRange = ref('all'); // 增加 currentRange 响应式变量
 const ganttChart = ref(null); // 增加 ganttChart 引用
 
@@ -418,6 +420,8 @@ const updateCurrentInfo = (segment) => {
     formula.value = segment.formula;
     mixerStep.value = segment.mixerStep; // 更新 step 字段
     selectedReason.value = segment.stopReason || '';
+    blendStatus.value = segment.blendStatus;
+    capacity.value = segment.capacity;
 };
 
 const handleSegmentClick = (segment) => {
@@ -625,7 +629,9 @@ const processGanttDataResponse = (response) => {
             productFlowRate: item.productFlowRate,
             formula: item.formula,
             lineId: item.lineId,
-            stopReason: item.stopReason
+            stopReason: item.stopReason,
+            blendStatus: item.blendStatus,
+            capacity: item.capacity
         }));
 
         processData.value = ganttData;

src/views/Inspection/index.vue

@@ -2,11 +2,21 @@
     <div class="inspection-container">
         <div class="header">
             <div class="header_left">
-                <ix-select v-model="state.selectedShift" :options="shiftOptions" label="label" value="value"></ix-select>
+                <IxDateInput label="日期" name="date" helper-text="选择日期" :value="currentDate" class="input-spacing" @change="handleDateChange">
-                <ix-select v-model="state.selectedOption1" :options="state.options1" label="label" value="value"></ix-select>
+                </IxDateInput>
-                <ix-select v-model="state.selectedOption2" :options="state.options2" label="label" value="value"></ix-select>
+
-                <IxButton @click="fetchInspectionData"> 查询 </IxButton>
+                <IxSelect Outline id="triggerId" v-model="shift" label="班次" helperText="选择班次" class="input-spacing">                   
-                <IxButton> 导出全部 </IxButton>
+                    <IxSelectItem icon="sun" label="白班" value="day"></IxSelectItem>
+                    <IxSelectItem icon="moon" label="晚班" value="night"></IxSelectItem>
+                </IxSelect>
+
+                <IxSelect Outline id="statusSelect" v-model="status" label="状态" Placeholder="状态" helperText="选择状态"
+                    class="input-spacing">
+                    <IxSelectItem icon="sun" label="正常" value="1"></IxSelectItem>
+                    <IxSelectItem label="报警" value="2"></IxSelectItem>
+                </IxSelect>
+                <IxButton @click="fetchInspectionData" class="input-spacing"> 查询 </IxButton>
+                <IxButton class="input-spacing"> 导出全部 </IxButton>
             </div>
             <div class="header_right">
                 <IxButton> 灌注机 </IxButton>
@@ -18,34 +28,36 @@
         <div class="inspection-table">
             <div class="table-container">
                 <IxEventList>
-                    <IxEventListItem class="testbg1">
+                    <IxEventListItem class="testbg1 fixed-row">
                         <div class="table-row">
                             <span class="fixed-width title-width"></span>
                             <span class="fixed-width"></span>
                             <span class="fixed-width"></span>
                             <span class="fixed-width"></span>
                             <!--这里是你外面包裹了一个span，改span的背景就行，index是判断哪些变颜色-->
-                            <span class="fixed-width" v-for="(hour,index) in hours" :key="hour">
+                            <span class="fixed-width" v-for="(hour, index) in hours" :key="hour">
                                 <IxButton class="custom-button" @click="handleInspection(index)"> 确认 </IxButton>
                             </span>
                         </div>
                     </IxEventListItem>
-                    <IxEventListItem class="testbg1">
+                    <IxEventListItem class="testbg1 fixed-row">
                         <div class="table-row-1">
                             <span class="header-row title-width">点检项目</span>
                             <span class="header-row">单位</span>
                             <span class="header-row">参考值</span>
                             <span class="header-row">当前值</span>
-                            <span class="header-row" v-for="hour in hours" :key="hour" :style="{ backgroundColor: '#00FFB9', color: '#000028' }">
+                            <span class="header-row" v-for="hour in hours" :key="hour"
+                                :style="{ backgroundColor: '#00FFB9', color: '#000028' }">
                                 {{ hour }}
                             </span>
                         </div>
                     </IxEventListItem>
-                    <IxEventListItem v-for="(item, index) in inspectionItems" :key="index" color="color-success" class="testbg">
+                    <IxEventListItem v-for="(item, index) in inspectionItems" :key="index" color="color-success"
+                        class="testbg">
                         <div class="table-row">
                             <span class="fixed-width title-width">{{ item.label }}</span>
-                            <span class="fixed-width">--</span>
+                            <span class="fixed-width">{{ item.unit || '--' }}</span>
-                            <span class="fixed-width">{{ item.reference }}</span>
+                            <span class="fixed-width">{{ item.reference || '--' }}</span>
                             <span class="fixed-width">{{ item.current }}</span> <!-- 确保这里绑定的是 item.current -->
                             <span class="fixed-width" v-for="hour in hours" :key="hour">
                                 {{ item.data[hour] || '--' }}
@@ -55,29 +67,33 @@
                 </IxEventList>
             </div>
         </div>
-        <InspectionForm v-if="showForm" :itemName="selectedItemName" @close="showForm.value = false" />
+        <InspectionForm v-if="showForm" :itemName="selectedItemName" @close="showForm = false" />
     </div>
 </template>
 
 <script setup>
-import { ref, computed, getCurrentInstance, onMounted, defineEmits } from 'vue';
+import moment from 'moment';
-import { IxDatetimePicker, IxButton, IxDivider, IxDropdown, IxDropdownHeader, IxDropdownItem, IxEventList, IxEventListItem, IxSelect } from '@siemens/ix-vue';
+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 InspectionForm from './InspectionForm.vue';
-import { getInspectionCurrent, getInspectionData } from '@/api/inspection';
+import { getInspectionCurrent, getInspectionData, getCheckParas } from '@/api/inspection';
-import { color } from 'echarts';
 
 const emit = defineEmits(['send-data']);
 
+// 设置为您期望的时区，比如 "Asia/Shanghai"
+const timezone = 'Asia/Shanghai';
+
+// 全局响应式变量
+const globalDeviceId = ref(null);
+const globalTime = ref(moment().tz(timezone).format('YYYY-MM-DD HH:mm'));
+const isAutoUpdate = ref(true); // 是否自动更新
+const deviceType = ref(false);
+
 const sendDataToParent = () => {
     emit('send-data', '点检界面');
 };
 
-// 定义班次选项
-const shiftOptions = [
-    { label: '白班', value: 'day' },
-    { label: '晚班', value: 'night' }
-];
-
 // 获取当前时间的小时数
 const currentHour = new Date().getHours();
 
@@ -85,30 +101,29 @@ const currentHour = new Date().getHours();
 const defaultShift = currentHour >= 7 && currentHour < 19 ? 'day' : 'night';
 
 // 定义响应式变量
-const state = ref({
+const shift = ref('day'); // 确保 shift 变量已定义
-    selectedShift: defaultShift,
+const status = ref('1'); // 确保 status 变量已定义
-    selectedOption1: null,
-    selectedOption2: null,
-    options1: [
-        { label: 'Option 1', value: 'option1' },
-        { label: 'Option 2', value: 'option2' },
-        { label: 'Option 3', value: 'option3' }
-    ],
-    options2: [
-        { label: 'Choice A', value: 'choiceA' },
-        { label: 'Choice B', value: 'choiceB' },
-        { label: 'Choice C', value: 'choiceC' }
-    ]
-});
 
 const showForm = ref(false);
 const selectedItemName = ref('');
+const selectedDate = ref(null);
+
+const formatDate = (date) => {
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = (d.getMonth() + 1).toString().padStart(2, '0');
+    const day = d.getDate().toString().padStart(2, '0');
+    return `${year}/${month}/${day}`;
+};
+
+const currentDate = formatDate(new Date());
 
 // 计算当前班次的时间段
 const hours = computed(() => {
-    const shift = state.value.selectedShift;
+    const shiftValue = shift.value;
+    console.log("🚀 ~ hours ~ shiftValue:", shiftValue)
     const hours = [];
-    if (shift === 'day') {
+    if (shiftValue === 'day') {
         for (let i = 7; i <= 18; i++) {
             hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 白班 07:00-18:00
         }
@@ -123,25 +138,13 @@ const hours = computed(() => {
     return hours;
 });
 
-// JSON 数据
+const handleShiftClick = (shift) => {
-const data = {
+    state.value.selectedShift = shift;
-    juiceFlow: {},
-    pulpFlow: {},
-    sterile: {},
-    clean: {},
-    test1: {},
-    test2: {},
-    test3: {},
-    test4: {},
-    test5: {},
-    test6: {},
-    test7: {},
-    test8: {},
-    test9: {},
-    test10: {},
-    test11: {},
 };
 
+// JSON 数据
+const data = ref({});
+
 const inspectionItems = ref([]);
 
 // 点检按钮点击事件
@@ -164,19 +167,48 @@ const showWarningMessage = (index) => {
     proxy.$message.warning(index + '数据写入异常！');
 };
 
+const toLowerCaseFirstLetter = (str) => {
+  if (!str) return str;
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+
+const handleDateChange = (event) => {
+    selectedDate.value = event.target.value;
+};
+
 const fetchCurrentValues = async () => {
     try {
         const deviceId = 7; // 根据实际情况设置设备ID
         const inputTime = new Date().toISOString(); // 获取当前时间
         const response = await getInspectionCurrent(deviceId, inputTime);
+        const params = await getCheckParas(deviceId, inputTime);
+        
         if (response.code === 200) {
             const currentValues = response.data.data;
-            console.log("🚀 ~ fetchCurrentValues ~ currentValues:", currentValues)
             inspectionItems.value.forEach(item => {
                 item.current = currentValues[item.name] || '--';
             });
-            console.log("🚀 ~ fetchCurrentValues ~ inspectionItems:", inspectionItems.value)
         }
+
+        if (params.code === 200) {
+            const paramData = params.data;
+            console.log("🚀 ~ fetchCurrentValues ~ paramData:", paramData)
+            
+            inspectionItems.value.forEach(item => {
+                const param = paramData.find(param => {
+                    return toLowerCaseFirstLetter(param.keyname) === item.name;
+                });
+                console.log("🚀 ~ fetchCurrentValues ~ param:", param)
+                
+                if (param) {
+                    item.label = param.projectDescription;
+                    item.reference = param.referenceValue;
+                    item.unit = param.unit;
+                }
+            });    
+        }
+        
+        console.log("🚀 ~ fetchCurrentValues ~ inspectionItems.value:", inspectionItems.value)
     } catch (error) {
         console.error('Error fetching current values:', error);
     }
@@ -184,23 +216,30 @@ const fetchCurrentValues = async () => {
 
 const fetchInspectionData = async () => {
     try {
-        const deviceId = 7; // 根据实际情况设置设备ID
+        const deviceId = 7; // globalDeviceId // 根据实际情况设置设备ID 
-        const inputTime = new Date().toISOString(); // 获取当前时间
+        const inputTime = new Date().toISOString(); // globalTime; // 获取当前时间
+        const shiftValue = shift.value;
+        const statusValue = status.value;
+        const dateValue = selectedDate.value || currentDate;
+        console.log("🚀 ~ fetchInspectionData ~ shift:", shiftValue)
+        console.log("🚀 ~ fetchInspectionData ~ status:", statusValue)
+        console.log("🚀 ~ fetchInspectionData ~ date:", dateValue)
         const response = await getInspectionData(deviceId, inputTime);
         if (response.code === 200) {
             const inspectionData = response.data;
-            console.log("🚀 ~ fetchInspectionData ~ inspectionData:", inspectionData)
             const itemsMap = {};
             inspectionData.forEach(record => {
                 const recordTime = record.recordTime;
                 const data = record.data;
                 for (const [name, value] of Object.entries(data)) {
+                    if (value === -1) continue; // 过滤掉值为 -1 的属性
                     if (!itemsMap[name]) {
                         itemsMap[name] = {
                             name,
                             label: name, // 可以根据需要调整label的值
                             reference: 0,
                             current: 0,
+                            unit: '', // 添加单位字段
                             data: {}
                         };
                     }
@@ -208,27 +247,69 @@ const fetchInspectionData = async () => {
                 }
             });
             inspectionItems.value = Object.values(itemsMap);
-            console.log("🚀 ~ fetchInspectionData ~ inspectionItems:", inspectionItems.value)
         }
+        console.log("🚀 ~ fetchInspectionData ~ inspectionItems.value:", inspectionItems.value)
     } catch (error) {
         console.error('Error fetching inspection data:', error);
     }
 };
 
+let autoUpdateInterval = null;
+
 onMounted(() => {
     fetchCurrentValues();
     fetchInspectionData();
     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;
+        globalTime.value = event.detail;
+        fetchCurrentValues();
+        fetchInspectionData();
+        setupAutoUpdate();
+    });
+
+    // 监听 reset 事件
+    window.addEventListener('reset', (event) => {
+        isAutoUpdate.value = true;
+        globalTime.value = moment().tz(timezone).format('YYYY-MM-DD HH:mm');
+        // fetchData();
+        // fetchGanttData();
+        setupAutoUpdate();
+    });
+});
+
+onUnmounted(() => {
+    if (autoUpdateInterval) {
+        clearInterval(autoUpdateInterval);
+    }
 });
 </script>
 
 <style scoped>
 .inspection-container {
     width: 100%;
-    height: 100vh; /* 修改为100vh，使其高度铺满整个视口 */
+    height: 100vh;
+    /* 修改为100vh，使其高度铺满整个视口 */
     background-color: #000028;
     color: white;
-    font-size: 1.2rem; /* 调大全局字体大小 */
+    font-size: 1.2rem;
+    /* 调大全局字体大小 */
 }
 
 .header {
@@ -241,28 +322,36 @@ onMounted(() => {
 .header_left {
     display: flex;
     align-items: center;
-    width: 70%; /* 设置宽度，确保三个搜索框都能正常显示 */
+    width: 70%;
-    font-size: 1rem; /* 调大左侧头部字体大小 */
+    /* 设置宽度，确保三个搜索框都能正常显示 */
+    font-size: 1rem;
+    /* 调大左侧头部字体大小 */
 }
 
 .header_right {
     display: flex;
     align-items: center;
-    gap: 10px; /* 添加间距 */
+    gap: 10px;
-    font-size: 1rem; /* 调大右侧头部字体大小 */
+    /* 添加间距 */
+    font-size: 1rem;
+    /* 调大右侧头部字体大小 */
 }
 
 .inspection-table {
     width: 100%;
-    height: 90%; /* 修改为90%，使其高度铺满剩余部分 */
+    height: 90%;
-    overflow-x: auto; /* 添加水平滚动条 */
+    /* 修改为90%，使其高度铺满剩余部分 */
+    overflow-x: auto;
+    /* 添加水平滚动条 */
 }
 
 .table-container {
     display: flex;
     flex-direction: column;
-    min-width: 100%; /* 确保表格宽度至少为容器宽度 */
+    min-width: 100%;
-    overflow-x: auto; /* 添加水平滚动条 */
+    /* 确保表格宽度至少为容器宽度 */
+    overflow-x: auto;
+    /* 添加水平滚动条 */
 }
 
 .table-row {
@@ -270,7 +359,8 @@ onMounted(() => {
     justify-content: space-between;
     /* padding: 10px;
     border-bottom: 1px solid #ccc;  */
-    flex: 1; /* 使每一行铺满 */
+    flex: 1;
+    /* 使每一行铺满 */
 }
 
 .table-row-1 {
@@ -282,23 +372,27 @@ onMounted(() => {
 }
 
 .fixed-width {
-    width: 7rem; /* 设置固定宽度 */
+    width: 6.5rem;
-    text-align: center; /* 居中对齐 */
+    /* 设置固定宽度 */
-    font-size: 1rem; /* 调大固定宽度元素字体大小 */
+    text-align: center;
+    /* 居中对齐 */
+    font-size: 1rem;
+    /* 调大固定宽度元素字体大小 */
 }
 
 .header-row {
     display: flex;
-    width: 7rem;
+    width: 6.5rem;
     height: 100%;
     background-color: #23233C;
     justify-content: center;
     align-items: center;
-    font-size: 1rem; /* 调大表头行字体大小 */
+    font-size: 1rem;
+    /* 调大表头行字体大小 */
 }
 
 .title-width {
-    width: 10rem;
+    width: 15rem;
 }
 
 ix-button {
@@ -307,16 +401,47 @@ ix-button {
 
 .testbg {
     /* 这里是因为它tm组件里的，还用的好像是webcomponent，但是tmd不对外提供修改的东西，好在有个css颜色变量可以修改 */
-    --theme-event-item--background:#23233C;
+    --theme-event-item--background: #23233C;
     /* --theme-event-item--background--hover: blue; */
 }
-.testbg1{
+
-    --theme-event-item--background:#000028;
+.testbg1 {
+    --theme-event-item--background: #000028;
 }
+
 /**如果要改按钮的颜色，那么上面就不要用 :style 改成用 :class 来设置，这个总没问题吧，然后再f12看按钮有哪些颜色变量 */
 /* 定义按钮颜色的 CSS 类 */
 .custom-button {
     --theme-btn-primary--background: #FFA849;
     --theme-btn-primary--background--hover: #FFA849;
 }
+
+.drop-down {
+    width: calc(25% - 1.25rem);
+    background-color: #23233C;
+}
+
+:deep(ix-date-input) {
+    --theme-menu--background: #23233C;
+    padding-left: 1rem;
+}
+
+.search-label {
+    margin-right: 10px;
+    margin-left: 20px;
+    color: white;
+    font-size: 1rem;
+}
+
+.input-spacing {
+    margin-right: 1rem;
+    --theme-color-2: #23233C;
+}
+
+.fixed-row {
+    position: sticky;
+    top: 0;
+    background-color: inherit;
+    z-index: 1;
+}
 </style>

src/views/layout/vueLayout.vue

@@ -14,9 +14,11 @@
       <router-view @update-history="updateHistory" @reset="reset" @send-data="handleDataFromChild"></router-view>
     </IxContent>
 
-    <!-- 添加 IxDatetimePicker 组件 -->
+    <!-- 添加遮罩层和 IxDatetimePicker 组件 -->
+    <div v-if="showDatetimePicker" class="overlay" @click="closeDatetimePicker"></div>
     <div v-if="showDatetimePicker" class="datetime-picker-container">
       <IxDatetimePicker range="false" showSeconds="false" show-time-reference="true" @done="handleDatetimePickerDone" />
+      <button class="close-button" @click="closeDatetimePicker">关闭</button>
     </div>
   </IxApplication>
 </template>
@@ -124,6 +126,10 @@ const handleDataFromChild = (data) => {
   appName.value = data;
 };
 
+const closeDatetimePicker = () => {
+  showDatetimePicker.value = false;
+};
+
 onMounted(() => {
   updateTime();
   const interval = setInterval(() => {
@@ -221,14 +227,34 @@ ix-application {
   /* 让内容区域填充剩余空间 */
 }
 
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
 .datetime-picker-container {
   position: absolute;
   top: 4rem;
-  /* 确保在头部下方 */
   right: 1rem;
-  /* 靠右对齐 */
   z-index: 1000;
-  /* 确保在最上层 */
+  background: #23233C;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.close-button {
+  margin-top: 1rem;
+  background: #23233C;
+  color: skyblue;
+  /* border: none; */
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
 }
 
 :deep(ix-datetime-picker){
@@ -244,7 +270,7 @@ ix-application {
 }
 
 .mainContent {
-  padding: 0;
+  padding: 0 !important;
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -254,6 +280,10 @@ ix-application {
   overflow-x: auto;
 }
 
+/* :deep(.mainContent .content){
+  padding: 0;
+} */
+
 :global(.visible) {
   --theme-modal--background:#23233C !important;
   --theme-color-ghost--selected:#23233C !important;
@@ -264,6 +294,6 @@ ix-application {
 }
 
 :deep(:host .AppEntry.Selected){
-  border:none !important;
+  border:none !重要;
 }
 </style>