From c835e38d8293861e650d4732b481d64dd96b4b00 Mon Sep 17 00:00:00 2001
From: Zhao Zhao Shen <ZhaoZhao.Shen@siemens.com>
Date: Tue, 11 Mar 2025 19:13:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=8D=A2=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 deploy-gy.sh                            |  77 ++++--
 src/api/inspection.js                   |   4 +-
 src/components/CustomDatetimePicker.vue | 114 ++++-----
 src/utils/request.js                    |   3 +-
 src/views/Inspection/InspectionForm.vue |  10 +-
 src/views/Inspection/index.vue          |  20 +-
 src/views/layout/vueLayout.vue          | 308 ++++++++++++++++++------
 7 files changed, 366 insertions(+), 170 deletions(-)

diff --git a/deploy-gy.sh b/deploy-gy.sh
index 65dbb50..2b20f4c 100644
--- a/deploy-gy.sh
+++ b/deploy-gy.sh
@@ -1,5 +1,6 @@
 #!/bin/bash
-
+# 使用后端本地调用api方式部署
+ 
 # 加载配置
 if [ -f "./deploy.config.sh" ]; then
     source ./deploy.config.sh
@@ -7,63 +8,89 @@ else
     echo "配置文件 deploy.config.sh 不存在"
     exit 1
 fi
-
+ 
 echo "开始远程部署 - $(date)"
-
+ 
 echo "开始部署您的项目..."
-
+ 
 # 1. 克隆项目代码
 # echo "1. 克隆项目代码..."
 # git clone https://git.zhouxhere.com/wonderzhao/cola-web.git
-
+ 
 # 2. 进入项目目录
 # echo "2. 进入项目目录..."
 # cd cola-web
-
+ 
 # 3. 安装依赖
 # echo "3. 安装依赖..."
 # npm install
-
+ 
 # 4. 构建项目
 echo "4. 构建项目..."
 npm run build
-
+ 
 # 5. 构建 Docker 镜像
 echo "5. 构建 Docker 镜像..."
 docker build -t ${DOCKER_IMAGE_NAME} .
-
+ 
 # 6. 保存镜像为 tar 文件
 echo "6. 保存 Docker 镜像..."
 docker save ${DOCKER_IMAGE_NAME} > ${DOCKER_IMAGE_NAME}.tar
-
-# 7. 传输文件到服务器
-echo "7. 传输文件到服务器..."
-# ssh -p 22 owner@192.168.1.199
+ 
+# 7. 创建 nginx 配置文件
+echo "7. 创建 nginx 配置文件..."
+cat > nginx.conf << 'NGINX_EOF'
+server {
+    listen       80;
+    server_name  localhost;
+ 
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+ 
+    location /api {
+        proxy_pass http://192.168.1.199:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}
+NGINX_EOF
+ 
+# 8. 传输文件到服务器
+echo "8. 传输文件到服务器..."
 scp -v -P ${REMOTE_PORT} ${DOCKER_IMAGE_NAME}.tar ${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_PATH}/
-
-# 8. 在远程服务器上执行部署
-echo "8. 在远程服务器上执行部署..."
+scp -v -P ${REMOTE_PORT} nginx.conf ${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_PATH}/
+ 
+# 9. 在远程服务器上执行部署
+echo "9. 在远程服务器上执行部署..."
 ssh -p ${REMOTE_PORT} ${REMOTE_USER}@${REMOTE_HOST} << EOF
     set -e  # 遇到错误立即退出
-
+ 
     echo "===== 开始执行远程部署 ====="
     cd ${REMOTE_PATH}
     docker load < ${DOCKER_IMAGE_NAME}.tar
     docker stop ${DOCKER_CONTAINER_NAME} 2>/dev/null || true
     docker rm ${DOCKER_CONTAINER_NAME} 2>/dev/null || true
-    docker run -d \
-        --name ${DOCKER_CONTAINER_NAME} \
-        -p ${APP_PORT}:80 \
-        --restart unless-stopped \
+    docker run -d \\
+        --name ${DOCKER_CONTAINER_NAME} \\
+        -p ${APP_PORT}:80 \\
+        -v ${REMOTE_PATH}/nginx.conf:/etc/nginx/conf.d/default.conf \\
+        --restart unless-stopped \\
         ${DOCKER_IMAGE_NAME}
 EOF
-
+ 
 echo "部署完成！"
-# echo "部署完成！"
-
+ 
+# 清理本地临时文件
+rm -f nginx.conf
+rm -f ${DOCKER_IMAGE_NAME}.tar
+ 
 # 10. 检查部署状态
 # echo "10. 检查部署状态..."
 # ssh owner@192.168.1.199 "docker ps | grep cola-web"
-
+ 
 # 在另一个终端窗口查看日志
 # tail -f deploy.log
\ No newline at end of file
diff --git a/src/api/inspection.js b/src/api/inspection.js
index 5f02b6a..d65f58f 100644
--- a/src/api/inspection.js
+++ b/src/api/inspection.js
@@ -3,7 +3,7 @@ import request from '@/utils/request';
 // 获取点检页面当前值
 export function getInspectionCurrent(deviceId, inputTime) {
     return request({
-        url: `/Check/currunt?deviceId=${deviceId}&inputTime=${inputTime}`,
+        url: `/Check/currunt?deviceTypeId=${deviceId}&inputTime=${inputTime}`,
         method: 'get'
     });
 }
@@ -11,7 +11,7 @@ export function getInspectionCurrent(deviceId, inputTime) {
 // 获取点检页面整点数值
 export function getInspectionData(deviceId, inputTime, shift) {
     return request({
-        url: `/Check/sharp?deviceId=${deviceId}&inputTime=${inputTime}&shift=${shift}`,
+        url: `/Check/sharp?deviceTypeId=${deviceId}&inputTime=${inputTime}&shift=${shift}`,
         method: 'get'
     });
 }
diff --git a/src/components/CustomDatetimePicker.vue b/src/components/CustomDatetimePicker.vue
index ae5b0d6..3abc12c 100644
--- a/src/components/CustomDatetimePicker.vue
+++ b/src/components/CustomDatetimePicker.vue
@@ -1,66 +1,72 @@
 <template>
-  <div class="custom-datetime-picker">
-    <div class="picker-header">
-      <span>选择日期和时间</span>
-      <button @click="emitDone">确定</button>
-    </div>
-    <div class="picker-body">
-      <input type="datetime-local" v-model="datetime" />
-    </div>
-  </div>
+  <el-date-picker ref="datePickerRef"  v-model="internalValue" type="datetime" :clearable="false" v-bind="$attrs" format="YYYY/MM/DD HH:mm"
+    :disabled-minutes="disabledMinutes" popper-class="popperTime" :visible-change="visibleChange" style="display: none"
+    value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script setup name="DataTime">
+import { ref, nextTick } from 'vue';
+import { defineExpose } from 'vue';
 
-const datetime = ref('');
+const datePickerRef = ref(null); // 获取组件实例
 
-const emitDone = () => {
-  const event = new CustomEvent('done', { detail: datetime.value });
-  window.dispatchEvent(event);
+const internalValue = ref(null);
+
+// 暴露给父组件的方法
+const openPicker = () => {
+  datePickerRef.value.focus(); // 触发 Element 的 focus 方法
+};
+defineExpose({ openPicker }); // 暴露方法
+
+const disabledMinutes = () => {
+  hideInvalidMinutes();
+  return Array.from({ length: 60 }, (v, k) => k).filter(minute => ![0, 15, 30, 45].includes(minute));
+};
+
+const hideInvalidMinutes = () => {
+  nextTick(() => {
+    const minuteItems = document.querySelectorAll('.el-time-panel .el-time-spinner__wrapper:nth-child(2n) .el-time-spinner__item');
+    minuteItems.forEach(item => {
+      const minute = parseInt(item.textContent, 10);
+      if (![0, 15, 30, 45].includes(minute)) {
+        item.classList.add('is-disabled');
+        item.style.display = 'none';
+      } else {
+        item.classList.remove('is-disabled');
+        item.style.display = '';
+      }
+    });
+  });
+};
+
+const handleGlobalFocus = (event) => {
+  const target = event.target;
+  if (target && target.closest('.el-date-range-picker__time-picker-wrap:nth-child(2n) .el-input__inner')) {
+    hideInvalidMinutes();
+  }
+};
+
+const visibleChange = () => {
+  document.addEventListener('focus', handleGlobalFocus, true);
 };
 </script>
 
-<style scoped>
-.custom-datetime-picker {
-  background-color: #23233C;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  color: #fff;
-}
+<style lang="css">
+.popperTime {
 
-.picker-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
+  .el-time-panel__content:after,
+  .el-time-panel__content:before {
+    content: none;
+  }
 
-.picker-header span {
-  font-size: 1.2rem;
-}
+  .el-time-spinner__list:after,
+  .el-time-spinner__list:before {
+    content: none !important;
+  }
 
-.picker-header button {
-  background-color: #1a1a40;
-  color: #fff;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  cursor: pointer;
+  .el-time-spinner__item.is-active:not(.is-disabled) {
+    background-color: var(--el-datepicker-active-color);
+    color: #fff;
+  }
 }
-
-.picker-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.picker-body input {
-  background-color: #1a1a40;
-  color: #fff;
-  border: none;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index dbb0743..b252789 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,7 +2,8 @@ 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:8090/api', // 家用测试接口
+  baseURL: '/api',
   timeout: 5000, // 请求超时时间
   headers: {
     "Access-Control-Allow-Origin": "*",
diff --git a/src/views/Inspection/InspectionForm.vue b/src/views/Inspection/InspectionForm.vue
index 99ab210..e5794aa 100644
--- a/src/views/Inspection/InspectionForm.vue
+++ b/src/views/Inspection/InspectionForm.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from 'vue';
+import { ref, defineProps, defineEmits, onMounted } from 'vue';
 import { IxButton, IxChip } from '@siemens/ix-vue';
 import moment from 'moment-timezone';
 
@@ -35,6 +35,7 @@ const props = defineProps({
     itemName: String,
     itemTime: String,
     timezone: String,
+    currentStatus: String,
 });
 
 const reason = ref('');
@@ -53,6 +54,13 @@ const handleSubmit = () => {
     const currentTime = moment().tz(props.timezone).format('HH:mm');
     emit('submit', currentTime, reason.value);
 };
+
+onMounted(() => {
+    if(props.currentStatus === '已处理') {
+        // 数据库读取当前的处理信息
+        reason.value = '已处理';
+    }
+});
 </script>
 
 <style scoped>
diff --git a/src/views/Inspection/index.vue b/src/views/Inspection/index.vue
index ef05c47..eaa9206 100644
--- a/src/views/Inspection/index.vue
+++ b/src/views/Inspection/index.vue
@@ -72,7 +72,7 @@
                                     'highlight-cell': item.data[hour]?.checkStatus === 1,
                                     'alarm-cell': item.data[hour]?.checkStatus === 0
                                 }"
-                                @click="item.data[hour]?.checkStatus === 0 ? handleAlarmInspection(hour, index) : null">
+                                @click="item.data[hour]?.checkStatus === 0 || item.data[hour]?.checkStatus === 1 ? handleAlarmInspection(hour, index, item.data[hour]?.checkStatus) : null">
                                 {{ item.data[hour]?.value || '--' }}
                             </span>
                         </div>
@@ -81,7 +81,7 @@
             </div>
         </div>
         <!-- 点检表单 -->
-        <InspectionForm v-if="showForm" :itemName="selectedItemName" :itemTime="selectedItemTime" :timezone="timezone" @close="showForm = false" @submit="(currentTime, reason) => handleFormSubmit(selectedItemIndex, reason)" />
+        <InspectionForm v-if="showForm" :itemName="selectedItemName" :itemTime="selectedItemTime" :timezone="timezone" :currentStatus="currentStatus" @close="showForm = false" @submit="(currentTime, reason) => handleFormSubmit(selectedItemIndex, reason)" />
     </div>
 </template>
 
@@ -135,6 +135,7 @@ const formatDate = (date) => {
     const day = d.getDate().toString().padStart(2, '0');
     return `${year}/${month}/${day}`;
 };
+const currentStatus = ref('');
 
 const currentDate = formatDate(new Date());
 
@@ -210,10 +211,11 @@ const handleInspection = (hour, index) => {
 };
 
 // 点检按钮点击事件
-const handleAlarmInspection = (hour, index) => {    
+const handleAlarmInspection = (hour, index, status) => {    
     selectedItemName.value = inspectionItems.value[index].label;
     selectedItemTime.value = hour;
     selectedItemIndex.value = index; // 确保在这里设置 selectedItemIndex
+    currentStatus.value = status === 0 ? '未处理' : '已处理';
     showForm.value = true;
 };
 
@@ -427,11 +429,11 @@ const getDeviceNameById = (id) => {
 
 // let autoUpdateInterval = null;
 
-// onMounted(async () => {
-//     await fetchDeviceList();
-//     fetchCurrentValues();
-//     fetchInspectionData();
-//     sendDataToParent();
+onMounted(async () => {
+    await fetchDeviceList();
+    fetchCurrentValues();
+    fetchInspectionData();
+    sendDataToParent();
 
 //     const setupAutoUpdate = () => {
 //         if (isAutoUpdate.value) {
@@ -464,7 +466,7 @@ const getDeviceNameById = (id) => {
     //     fetchInspectionData();
     //     setupAutoUpdate();
     // });
-// });
+});
 
 // onUnmounted(() => {
 //     if (autoUpdateInterval) {
diff --git a/src/views/layout/vueLayout.vue b/src/views/layout/vueLayout.vue
index 1c72ade..669af91 100644
--- a/src/views/layout/vueLayout.vue
+++ b/src/views/layout/vueLayout.vue
@@ -4,25 +4,37 @@
       <!-- 添加实时显示时间 -->
       <div v-if="appSwitchConfig.currentAppId === 'mis-app'" class="time-display">{{ currentTime }}</div>
 
-      <!-- 确保图标按钮正确显示 -->      
+      <!-- 报警图标 -->
       <el-badge v-if="appSwitchConfig.currentAppId === 'mis-app'" :value="alarmCount" class="item">
         <IxIconButton icon="alarm-bell-filled" variant="secondary" ghost></IxIconButton>
       </el-badge>
-      <IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="calendar-filled" variant="secondary" ghost @click="toggleDatetimePicker"></IxIconButton>
-      <IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="alarm-clock-filled" variant="secondary" ghost @click="handleReset"></IxIconButton>
+
+      <!-- 时间选择器整合到日历图标按钮 -->
+      <IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="calendar-filled" variant="secondary" ghost
+        @click="openDatePicker"></IxIconButton>
+      <!-- <el-date-picker v-model="selectedDatetime" type="datetime" format="YYYY-MM-DD HH:mm"
+        :disabled-minutes="disabledMinutes" @change="handleDatetimeChange" ref="datePickerRef"
+        popper-class="custom-picker-popover" style="display: none" :visible-change="visibleChange"
+        :popper-options="pickerOptions" :teleported="false" /> -->
+        <el-date-picker ref="datePickerRef"  v-model="selectedDatetime" type="datetime" :clearable="false" v-bind="$attrs" format="YYYY-MM-DD HH:mm"
+    :disabled-minutes="disabledMinutes" popper-class="custom-picker-popover" :visible-change="visibleChange" style="display: none" @change="handleDatetimeChange" :popper-options="pickerOptions" :teleported="false"></el-date-picker>
+
+      <!--重置-->
+      <IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="alarm-clock-filled" variant="secondary"
+        ghost @click="handleReset"></IxIconButton>
+
+      <!-- 添加遮罩层和日期选择器组件 -->
+      <!-- <div v-if="showDatetimePicker" class="overlay" @click="closeDatetimePicker"></div>
+      <div v-if="showDatetimePicker" class="datetime-picker-container">
+        <IxDatetimePicker v-if="appSwitchConfig.currentAppId === 'mis-app'" range="false" showSeconds="false" show-time-reference="true" @done="handleDatetimePickerDone" />
+        <IxDatePicker v-else range="false" @dateChange="handleDatePickerDone" style="--theme-menu--background: '#232323'"/>
+        <button class="close-button" @click="closeDatetimePicker">关闭</button>
+      </div> -->
     </IxApplicationHeader>
 
     <IxContent class="mainContent">
       <router-view @update-history="updateHistory" @reset="reset" @send-data="handleDataFromChild"></router-view>
     </IxContent>
-
-    <!-- 添加遮罩层和日期选择器组件 -->
-    <div v-if="showDatetimePicker" class="overlay" @click="closeDatetimePicker"></div>
-    <div v-if="showDatetimePicker" class="datetime-picker-container">
-      <IxDatetimePicker v-if="appSwitchConfig.currentAppId === 'mis-app'" range="false" showSeconds="false" show-time-reference="true" @done="handleDatetimePickerDone" />
-      <IxDatePicker v-else range="false" @dateChange="handleDatePickerDone" style="--theme-menu--background: '#232323'"/>
-      <button class="close-button" @click="closeDatetimePicker">关闭</button>
-    </div>
   </IxApplication>
 </template>
 
@@ -38,7 +50,7 @@ import {
   IxDatetimePicker,
   IxDatePicker,
 } from '@siemens/ix-vue';
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
 import { useAlarmStore } from '@/stores/alarmStore'; // 假设我们有一个 alarmStore
 
 const alarmStore = useAlarmStore(); // 使用 alarmStore
@@ -69,6 +81,37 @@ let appSwitchConfig = {
   ],
 };
 
+// 弹窗定位配置
+const pickerOptions = {
+  placement: 'bottom-end',
+  modifiers: [
+    {
+      name: 'offset',
+      options: { offset: [0, 0] } // 调整偏移校准
+    },
+    { name: 'computeStyles', options: { gpuAcceleration: false } } // 禁用GPU加速定位
+  ]
+};
+
+const timeShortcuts = [
+  {
+    text: '最近15分钟',
+    value: () => {
+      const date = new Date();
+      date.setMinutes(Math.floor(date.getMinutes() / 15) * 15);
+      return date;
+    }
+  },
+  {
+    text: '整点时间',
+    value: () => {
+      const date = new Date();
+      date.setMinutes(0);
+      return date;
+    }
+  }
+];
+
 const currentTime = ref('');
 const showDatetimePicker = ref(false);
 const selectedDatetime = ref('');
@@ -85,9 +128,9 @@ const updateTime = () => {
   currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}`;
 };
 
-const toggleDatetimePicker = () => {
-  showDatetimePicker.value = !showDatetimePicker.value;
-};
+// const toggleDatetimePicker = () => {
+//   showDatetimePicker.value = !showDatetimePicker.value;
+// };
 
 const handleReset = () => {
   // 触发主页中的 getHistory 方法
@@ -97,69 +140,129 @@ const handleReset = () => {
   isAutoUpdate.value = true; // 重置后恢复自动刷新
 };
 
-const handleDatetimePickerDone = (event) => {
-  selectedDatetime.value = event.detail;
-  showDatetimePicker.value = false;
-  updateHistoryWithTime(selectedDatetime.value);
-  isAutoUpdate.value = false; // 选择完历史时间后停止自动刷新
-};
+// const handleDatetimePickerDone = (event) => {
+//   selectedDatetime.value = event.detail;
+//   showDatetimePicker.value = false;
+//   updateHistoryWithTime(selectedDatetime.value);
+//   isAutoUpdate.value = false; // 选择完历史时间后停止自动刷新
+// };
 
-const handleDatePickerDone = (event) => {
-  selectedDatetime.value = event.detail;
-  showDatetimePicker.value = false;
-  updateHistoryWithDate(selectedDatetime.value);
-  isAutoUpdate.value = false; // 选择完历史时间后停止自动刷新
-};
+// const handleDatePickerDone = (event) => {
+//   selectedDatetime.value = event.detail;
+//   showDatetimePicker.value = false;
+//   updateHistoryWithDate(selectedDatetime.value);
+//   isAutoUpdate.value = false; // 选择完历史时间后停止自动刷新
+// };
 
-const updateHistoryWithTime = (datetime) => {
-  // 将 datetime 转换为标准的 YYYY-MM-DD HH:mm:ss 格式
-  const parsedDate = new Date(datetime.replace(/-/g, '/'));
-  if (isNaN(parsedDate.getTime())) {
-    console.error('Invalid datetime format:', datetime);
-    return;
-  }
-  const year = parsedDate.getFullYear();
-  const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
-  const day = String(parsedDate.getDate()).padStart(2, '0');
-  const hours = String(parsedDate.getHours()).padStart(2, '0');
-  const minutes = String(parsedDate.getMinutes()).padStart(2, '0');
-  const seconds = String(parsedDate.getSeconds()).padStart(2, '0');
-  const formattedDatetime = `${year}-${month}-${day} ${hours}:${minutes}`;
-  // 触发主页中的 getHistory 方法
-  const event = new CustomEvent('update-history', { detail: formattedDatetime });
+// const updateHistoryWithTime = (datetime) => {
+//   // 将 datetime 转换为标准的 YYYY-MM-DD HH:mm:ss 格式
+//   const parsedDate = new Date(datetime.replace(/-/g, '/'));
+//   if (isNaN(parsedDate.getTime())) {
+//     console.error('Invalid datetime format:', datetime);
+//     return;
+//   }
+//   const year = parsedDate.getFullYear();
+//   const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
+//   const day = String(parsedDate.getDate()).padStart(2, '0');
+//   const hours = String(parsedDate.getHours()).padStart(2, '0');
+//   const minutes = String(parsedDate.getMinutes()).padStart(2, '0');
+//   const seconds = String(parsedDate.getSeconds()).padStart(2, '0');
+//   const formattedDatetime = `${year}-${month}-${day} ${hours}:${minutes}`;
+//   // 触发主页中的 getHistory 方法
+//   const event = new CustomEvent('update-history', { detail: formattedDatetime });
 
-  currentTime.value = formattedDatetime;
+//   currentTime.value = formattedDatetime;
 
-  window.dispatchEvent(event);
-};
+//   window.dispatchEvent(event);
+// };
 
-const updateHistoryWithDate = (date) => {
-  // 将 date 转换为标准的 YYYY-MM-DD 格式
-  const { from } = date;
-  const parsedDate = new Date(from);
-  if (isNaN(parsedDate.getTime())) {
-    console.error('Invalid date format:', from);
-    return;
-  }
-  const year = parsedDate.getFullYear();
-  const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
-  const day = String(parsedDate.getDate()).padStart(2, '0');
-  const formattedDate = `${year}-${month}-${day}`;
-  // 触发主页中的 getHistory 方法
-  const event = new CustomEvent('update-history', { detail: formattedDate });
+// const updateHistoryWithDate = (date) => {
+//   // 将 date 转换为标准的 YYYY-MM-DD 格式
+//   const { from } = date;
+//   const parsedDate = new Date(from);
+//   if (isNaN(parsedDate.getTime())) {
+//     console.error('Invalid date format:', from);
+//     return;
+//   }
+//   const year = parsedDate.getFullYear();
+//   const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
+//   const day = String(parsedDate.getDate()).padStart(2, '0');
+//   const formattedDate = `${year}-${month}-${day}`;
+//   // 触发主页中的 getHistory 方法
+//   const event = new CustomEvent('update-history', { detail: formattedDate });
 
-  currentTime.value = formattedDate;
+//   currentTime.value = formattedDate;
 
-  window.dispatchEvent(event);
-};
+//   window.dispatchEvent(event);
+// };
 
 const handleDataFromChild = (data, name) => {
   appName.value = data;
   appSwitchConfig.currentAppId = name;
 };
 
-const closeDatetimePicker = () => {
-  showDatetimePicker.value = false;
+// const closeDatetimePicker = () => {
+//   showDatetimePicker.value = false;
+// };
+
+// 新增日期选择器相关逻辑
+const datePickerRef = ref(null);
+// const selectedDatetime = ref('');
+
+// 15分钟步长控制
+const disabledMinutes = () => {
+  hideInvalidMinutes();
+  return Array.from({ length: 60 }, (v, k) => k).filter(minute => ![0, 15, 30, 45].includes(minute));
+};
+
+const hideInvalidMinutes = () => {
+  nextTick(() => {
+    const minuteItems = document.querySelectorAll('.el-time-panel .el-time-spinner__wrapper:nth-child(2n) .el-time-spinner__item');
+    minuteItems.forEach(item => {
+      const minute = parseInt(item.textContent, 10);
+      if (![0, 15, 30, 45].includes(minute)) {
+        item.classList.add('is-disabled');
+        item.style.display = 'none';
+      } else {
+        item.classList.remove('is-disabled');
+        item.style.display = '';
+      }
+    });
+  });
+};
+
+
+const handleGlobalFocus = (event) => {
+  const target = event.target;
+  if (target && target.closest('.el-date-range-picker__time-picker-wrap:nth-child(2n) .el-input__inner')) {
+    hideInvalidMinutes();
+  }
+};
+ 
+const visibleChange = () => {
+  document.addEventListener('focus', handleGlobalFocus, true);
+}
+
+// 点击日历图标触发选择器
+const openDatePicker = () => {
+  datePickerRef.value?.handleOpen();
+};
+
+const handleDatetimeChange = (value) => {
+  if (!value) return;
+
+  // 直接使用 Element Plus 返回的 Date 对象
+  const formattedDatetime = `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')} ${String(value.getHours()).padStart(2, '0')}:${String(value.getMinutes()).padStart(2, '0')}`;
+
+  // 更新当前时间显示
+  currentTime.value = formattedDatetime;
+
+  // 触发历史更新
+  const event = new CustomEvent('update-history', { detail: formattedDatetime });
+  window.dispatchEvent(event);
+
+  // 停止自动刷新
+  isAutoUpdate.value = false;
 };
 
 onMounted(() => {
@@ -167,13 +270,9 @@ onMounted(() => {
   const interval = setInterval(() => {
     if (showDatetimePicker.value || !isAutoUpdate.value) return; // 如果显示日期时间选择器或停止自动刷新，则不更新时间
     updateTime();
-  }, 60000); // 每分钟更新一次
+  }, 1000); // 每分钟更新一次
   onUnmounted(() => clearInterval(interval));  // 监听应用切换事件
 });
-
-// 实时刷新时间
-setInterval(updateTime, 1000); // 每秒刷新一次
-
 </script>
 
 <style scoped>
@@ -274,8 +373,8 @@ ix-application {
 }
 
 .datetime-picker-container {
-  position: absolute;
-  top: 4rem;
+  position: fixed;
+  top: 1rem;
   right: 1rem;
   z-index: 1000;
   background: #23233C;
@@ -293,8 +392,8 @@ ix-application {
   cursor: pointer;
 }
 
-:deep(ix-datetime-picker){
-  --theme-menu--background: #23233C;  
+:deep(ix-datetime-picker) {
+  --theme-menu--background: #23233C;
   border: 1px solid #fff;
 }
 
@@ -317,7 +416,7 @@ ix-application {
 }
 
 :global(.visible) {
-  --theme-modal--background:#23233C !important;
+  --theme-modal--background: #23233C !important;
   /* --theme-color-ghost--selected:#23233C !重要; */
 }
 
@@ -326,8 +425,61 @@ ix-application {
 }
 
 .alarm-count {
-    color: red;
-    font-size: 1.2rem;
-    margin-right: 1rem;
+  color: red;
+  font-size: 1.2rem;
+  margin-right: 1rem;
+}
+
+/* 工业级时间选择器改造 */
+:deep(.custom-picker-popover) {
+  --el-bg-color-overlay: #23233C;
+  inset: unset !important;
+  top: 2rem !important;
+  right: 5rem !important;
+  border-radius: 2px !important;
+  --el-border-color: #67C23A;
+  .el-time-panel__content:after,
+  .el-time-panel__content:before {
+    content: none;
+  }
+
+  .el-time-spinner__list:after,
+  .el-time-spinner__list:before {
+    content: none !important;
+  }
+
+  .el-time-spinner__item.is-active:not(.is-disabled) {
+    background-color: var(--el-datepicker-active-color);
+    color: #fff;
+  }
+}
+
+:deep(.el-picker-panel) {
+  color: #fff;
+  background: #23233C;
+  border: 1px solid #1384b4;
+}
+
+:deep(.el-picker-panel__icon-btn) {
+  color: #ffffff;
+}
+
+:deep(.el-date-picker__header-label) {
+  color: #ffffff;
+}
+
+:deep(.el-date-table th) {
+  color: #ffffff;
+}
+
+:deep(.el-time-panel) {
+  color: #fff;
+  background: #23233C;
+  border: 1px solid #1384b4;
+}
+
+:deep(.el-time-spinner__item) {
+  color: #ffffff;
+  --el-text-color-primary: #1384b4;
 }
 </style>
\ No newline at end of file