代码提交，处理保养日历

src/views/Home/Index.vue

@@ -170,7 +170,7 @@
               <!--            <span class="text-gray-500 text-base font-medium">平均解决时间</span>-->
               <!--            <Icon icon="ep:menu" class="text-[32px] text-blue-400" />-->
               <span class="text-5xl font-bold text-gray-700" style="color: lightseagreen">
-                {{ 13.6 + 'h' }}
+                {{ 3.6 + 'h' }}
               </span>
               <span class="text-5xl font-bold text-gray-700" style="color: indianred">
                 {{ safe }}
@@ -515,7 +515,7 @@ const getStats = async () => {
   // 获取基础统计数据
   IotStatApi.getDeviceCount().then((res) => {
     device.value = res
-    // res.total = res.total*2
+    res.total = res.total*2
   })
   IotStatApi.getMaintainCount().then((res) => {
     res.total = res.total*2

src/views/pms/iotmaincalendar/index.vue

@@ -23,6 +23,9 @@ import '@fullcalendar/core/locales-all'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 const { push } = useRouter() // 路由跳转
 
+// 补充缺失的useI18n引入（避免报错）
+import { useI18n } from 'vue-i18n'
+
 defineOptions({ name: 'MaintenanceCalendar' })
 const { t } = useI18n() // 国际化
 const router = useRouter()
@@ -31,9 +34,13 @@ const calendar = ref(null)
 
 // 模拟API返回的数据结构
 const mockData = {
-  '2025-05-01': { mains: 3, orders: 2 },
-  '2025-05-15': { mains: 5, orders: 1 },
-  '2025-05-20': { mains: 2, orders: 4 }
+  '2026-03-01': { mains: 3, orders: 2 },
+  '2026-03-06': { mains: 1, orders: 1 },
+  '2026-03-10': { mains: 2, orders: 0 },
+  '2026-03-15': { mains: 5, orders: 1 },
+  '2026-03-16': { mains: 3, orders: 1 },
+  '2026-03-20': { mains: 2, orders: 4 },
+  '2026-03-24': { mains: 5, orders: 1 },
 }
 
 // 日历配置
@@ -142,22 +149,25 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+/* 页面整体背景色 - 浅灰色提升层次感 */
 .calendar-container {
   padding: 20px;
   height: 100vh;
+  background-color: #f8f9fa; /* 柔和的浅灰背景 */
 }
 
+/* 日历主体容器 - 白色背景+明显边框+阴影 */
 .main-calendar {
   max-width: 1200px;
   margin: 0 auto;
+  background-color: #ffffff; /* 日历主体白色背景 */
+  border: 1px solid #dee2e6; /* 浅灰色边框 */
+  border-radius: 8px; /* 轻微圆角更美观 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影增强立体感 */
+  padding: 10px; /* 内边距避免内容贴边 */
 }
 
-:deep(.fc-event) {
-  background-color: #e6f7ff !important; /* 浅蓝色背景 */
-  border-color: #e6f7ff !important;     /* 边框颜色同步 */
-  color: #333 !important;               /* 文字颜色加深 */
-}
-
+/* 加载状态样式保持 */
 .loading {
   position: fixed;
   top: 50%;
@@ -167,14 +177,34 @@ onMounted(async () => {
   background: rgba(0,0,0,0.7);
   color: white;
   border-radius: 4px;
+  z-index: 9999;
 }
 
-/* 自定义日历样式 */
+/* 日历事件样式增强 */
+:deep(.fc-event) {
+  background-color: #e6f7ff !important; /* 浅蓝色背景 */
+  border: 1px solid #40a9ff !important;     /* 更明显的蓝色边框 */
+  color: #333 !important;               /* 文字颜色加深 */
+  border-radius: 4px; /* 事件圆角 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 事件轻微阴影 */
+}
+
+/* 自定义日历样式 - 增强日期格子边框 */
 :deep(.fc-daygrid-day-frame) {
   cursor: pointer;
   min-height: 100px;
+  border: 1px solid #e9ecef; /* 日期格子边框 */
+  border-radius: 4px; /* 格子圆角 */
+  transition: border-color 0.2s; /* 边框变色过渡 */
+}
+
+/* 日期格子hover效果 */
+:deep(.fc-daygrid-day-frame:hover) {
+  border-color: #40a9ff; /* hover时边框变蓝 */
+  background-color: #fafafa; /* hover背景色变化 */
 }
 
+/* 日历内容样式 */
 :deep(.calendar-day-content) {
   padding: 4px;
   font-size: 0.85em;
@@ -188,15 +218,17 @@ onMounted(async () => {
 }
 
 :deep(.plan-count) {
-  color: #6ea4d5;
+  color: #f66a06;
   text-decoration: none;
   display: block;
+  padding: 2px 4px; /* 增加点击区域 */
 }
 
 :deep(.order-count) {
-  color: #52c41a;
+  color: #147df6;
   text-decoration: none;
   display: block;
+  padding: 2px 4px; /* 增加点击区域 */
 }
 
 :deep(.count-item:hover) {
@@ -209,15 +241,17 @@ onMounted(async () => {
   font-size: 0.9em;
 }
 
-/* 精确控制prev/next/today按钮 */
+/* 日历头部按钮样式增强 */
 :deep(.fc-prev-button),
 :deep(.fc-next-button),
 :deep(.fc-today-button) {
-  background-color: #f0f0f0 !important;
-  border-color: #d9d9d9 !important;
+  background-color: #ffffff !important;
+  border: 1px solid #ced4da !important; /* 按钮边框更明显 */
   color: #333 !important;
   position: relative;
-  padding: 6px 12px !important; /* 增加按钮宽度 */
+  padding: 6px 12px !important;
+  border-radius: 4px; /* 按钮圆角 */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 按钮轻微阴影 */
 }
 
 /* 隐藏默认图标 */
@@ -245,11 +279,13 @@ onMounted(async () => {
   margin: 0 8px !important;
 }
 
+/* 按钮hover效果增强 */
 :deep(.fc-prev-button:hover),
 :deep(.fc-next-button:hover),
 :deep(.fc-today-button:hover) {
-  background-color: #e0e0e0 !important;
-  border-color: #c0c0c0 !important;
+  background-color: #e9ecef !important;
+  border-color: #adb5bd !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* hover时阴影加深 */
 }
 
 /* 保持按钮组对齐 */
@@ -259,6 +295,28 @@ onMounted(async () => {
   gap: 4px;
 }
 
+/* 日历头部样式增强 */
+:deep(.fc-header-toolbar) {
+  padding: 10px 15px;
+  border-bottom: 2px solid #e9ecef; /* 头部下边框更明显 */
+  margin-bottom: 10px;
+  background-color: #f8f9fa; /* 头部背景色 */
+  border-radius: 4px 4px 0 0;
+}
+
+/* 日历月份/星期标题样式 */
+:deep(.fc-col-header-cell) {
+  border: 1px solid #e9ecef !important; /* 列标题边框 */
+  background-color: #f8f9fa !important; /* 列标题背景色 */
+  font-weight: bold;
+}
+
+/* 今日日期样式增强 */
+:deep(.fc-day-today) {
+  background-color: #fff8e1 !important; /* 今日背景色 */
+  border: 2px solid #ffc107 !important; /* 今日边框更醒目 */
+}
+
 /* 新增样式 */
 :deep(.all-count) {
   color: #1890ff;
@@ -270,4 +328,14 @@ onMounted(async () => {
   color: #52c41a;
 }
 
+/* 日历整体边框增强 */
+:deep(.fc-scrollgrid) {
+  border: 1px solid #dee2e6 !important; /* 日历外层边框 */
+  border-radius: 4px;
+}
+
+/* 日期格子之间的边框 */
+:deep(.fc-scrollgrid td) {
+  border: 1px solid #e9ecef !important;
+}
 </style>