瑞鹰统计调整及列表调整

src/api/pms/stat/index.ts

@@ -2,34 +2,34 @@ import request from '@/config/axios'
 
 // 设备台账 API
 export const IotStatApi = {
-  getMainDay: async (params: any) => {
+  getMainDay: async () => {
     return await request.get({ url: `/rq/stat/main/day` })
   },
   getOrderSeven: async (params: any) => {
     return await request.get({ url: `/rq/stat/rh/order/`+params })
   },
-  getMainWeek: async (params: any) => {
+  getMainWeek: async () => {
     return await request.get({ url: `/rq/stat/main/week` })
   },
-  getMainMonth: async (params: any) => {
+  getMainMonth: async () => {
     return await request.get({ url: `/rq/stat/main/month` })
   },
-  getMainTotal: async (params: any) => {
+  getMainTotal: async () => {
     return await request.get({ url: `/rq/stat/main/total` })
   },
-  getMainStatus: async (params: any) => {
+  getMainStatus: async () => {
     return await request.get({ url: `/rq/stat/main/status` })
   },
-  getInspectDay: async (params: any) => {
+  getInspectDay: async () => {
     return await request.get({ url: `/rq/stat/inspect/day` })
   },
-  getInspectWeek: async (params: any) => {
+  getInspectWeek: async () => {
     return await request.get({ url: `/rq/stat/inspect/week` })
   },
-  getInspectMonth: async (params: any) => {
+  getInspectMonth: async () => {
     return await request.get({ url: `/rq/stat/inspect/month` })
   },
-  getInspectTotal: async (params: any) => {
+  getInspectTotal: async () => {
     return await request.get({ url: `/rq/stat/inspect/total` })
   },
   getInspectStatus: async (params: any) => {
@@ -38,7 +38,7 @@ export const IotStatApi = {
   getInspectStatuss: async (params: any, dept:any) => {
     return await request.get({ url: `/rq/stat/inspect/statuss/`+dept, params })
   },
-  getInspectTodayStatus: async (params: any) => {
+  getInspectTodayStatus: async () => {
     return await request.get({ url: `/rq/stat/inspect/today/status` })
   },
   getInspectDeviceStatus: async (params: any) => {
@@ -47,16 +47,16 @@ export const IotStatApi = {
   getInspectItemStatus: async (params: any) => {
     return await request.get({ url: `/rq/iot-inspect-order-detail/status`,params })
   },
-  getMaintenanceDay: async (params: any) => {
+  getMaintenanceDay: async () => {
     return await request.get({ url: `/rq/stat/maintenance/day` })
   },
-  getMaintenanceWeek: async (params: any) => {
+  getMaintenanceWeek: async () => {
     return await request.get({ url: `/rq/stat/maintenance/week` })
   },
-  getMaintenanceMonth: async (params: any) => {
+  getMaintenanceMonth: async () => {
     return await request.get({ url: `/rq/stat/maintenance/month` })
   },
-  getMaintenanceTotal: async (params: any) => {
+  getMaintenanceTotal: async () => {
     return await request.get({ url: `/rq/stat/maintenance/total` })
   },
   getMaintenanceStatus: async (params: any) => {
@@ -68,10 +68,10 @@ export const IotStatApi = {
   getRhZqlToday: async (params: any) => {
     return await request.get({ url: `/rq/stat/rh/zql/today/`+params })
   },
-  getMaintenanceTodayStatus: async (params: any) => {
+  getMaintenanceTodayStatus: async () => {
     return await request.get({ url: `/rq/stat/maintenance/today/status` })
   },
-  getMaintenanceType: async (params: any) => {
+  getMaintenanceType: async () => {
     return await request.get({ url: `/rq/stat/maintenance/type` })
   },
   getDeviceInfoChart: async (deviceCode: any, identifier: any, begin: string, end:string) => {
@@ -85,10 +85,10 @@ export const IotStatApi = {
   getMaintainCount: async (params: any) => {
     return await request.get({ url: `/rq/stat/home/maintain/count/`+params })
   },
-  getMainWorkCount: async (params: any) => {
+  getMainWorkCount: async () => {
     return await request.get({ url: `/rq/stat/home/work/count` })
   },
-  getInspectCount: async (params: any) => {
+  getInspectCount: async () => {
     return await request.get({ url: `/rq/stat/home/inspect/count` })
   },
   getDeviceStatusCount: async (params: any) => {
@@ -98,13 +98,13 @@ export const IotStatApi = {
   getDeviceTypeCount: async (params: any) => {
     return await request.get({ url: `/rq/stat/home/device/type/`+params })
   },
-  getDeptCount: async (params: any) => {
+  getDeptCount: async () => {
     return await request.get({ url: `/rq/stat/home/dept` })
   },
-  getSafeCount: async (params: any) => {
+  getSafeCount: async () => {
     return await request.get({ url: `/rq/stat/home/safe` })
   },
-  getMaterial: async (params: any) => {
+  getMaterial: async () => {
     return await request.get({ url: `/pms/iot-outbound/materials/top` })
   },
   getDeptStatistics: async (params: any) => {

src/components/CountTo/src/CountTo.vue

@@ -176,7 +176,7 @@ defineExpose({
 </script>
 
 <template>
-  <span :class="prefixCls">
+  <span :class="prefixCls" style="color: white">
     {{ displayValue }}
   </span>
 </template>

src/components/SummaryCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4">
+  <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4" style="background-color: rgba(0, 0, 0, 0.3);">
     <div
       class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1"
       :class="`${iconColor} ${iconBgColor}`"
@@ -8,7 +8,7 @@
     </div>
     <div class="flex flex-col gap-1">
       <div class="flex items-center gap-1 text-gray-500">
-        <span class="text-3.5">{{ title }}</span>
+        <span class="text-3.5" style="color: #B6C8DA">{{ title }}</span>
         <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
           <Icon icon="ep:warning" class="item-center flex !text-3" />
         </el-tooltip>

src/locales/en.ts

@@ -548,6 +548,7 @@ export default {
     other:'OtherInfo',
     category:'Category',
     categoryHolder:'Please select device category',
+    brand:'Brand',
     model:'Model',
     modelHolder:'Please enter Model',
     picture:'Picture',

src/locales/zh-CN.ts

@@ -544,6 +544,7 @@ export default {
     other:'其他信息',
     category:'设备类别',
     categoryHolder:'请选择设备类别',
+    brand:'品牌',
     model:'规格型号',
     modelHolder:'请输入规格型号',
     picture:'图片',

src/views/pms/device/index.vue

@@ -153,6 +153,8 @@
               <dict-tag :type="DICT_TYPE.PMS_ASSET_PROPERTY" :value="scope.row.assetProperty" />
             </template>
           </el-table-column>
+          <el-table-column :label="t('deviceForm.mfg')" align="center" prop="manufacturer" />
+          <el-table-column :label="t('deviceForm.brand')" align="center" prop="brandName" />
           <el-table-column :label="t('deviceForm.model')" align="center" prop="model" />
           <el-table-column :label="t('operationFill.operation')" align="center" min-width="120px">
             <template #default="scope">

src/views/pms/stat/rdkb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="page-container">
     <el-row :gutter="16" class="summary">
       <!-- 原有的统计卡片部分保持不变 -->
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -74,7 +74,6 @@
           title="已填写巡检"
         />
       </el-col>
-      <!-- 其他统计卡片... -->
     </el-row>
     <el-row :gutter="16" class="mb-4">
       <!-- 设备状态统计和工单数量情况图表部分保持不变 -->
@@ -82,7 +81,7 @@
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center">
-              <span class="text-base font-medium text-gray-600">设备状态统计</span>
+              <span class="text-base font-medium " style="color: #b6c8da">设备状态统计</span>
             </div>
           </template>
           <div ref="statusChartRef" class="h-[290px]"></div>
@@ -92,7 +91,7 @@
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center justify-between">
-              <span class="text-base font-medium text-gray-600">工单数量情况</span>
+              <span class="text-base font-medium " style="color: #b6c8da">工单数量情况</span>
             </div>
           </template>
           <div ref="qxRef" class="h-[290px]"></div>
@@ -105,7 +104,7 @@
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center justify-between">
-              <span class="text-base font-medium text-gray-600">备件更换情况</span>
+              <span class="text-base font-medium " style="color: #b6c8da">备件更换情况</span>
             </div>
           </template>
           <!-- 添加两个卡片 -->
@@ -116,7 +115,7 @@
                   <Icon icon="fa-solid:award" size="30" color="blue" />
                 </div>
                 <div class="flex flex-col items-center">
-                  <span class="text-sm text-gray-600">物料消耗数量</span>
+                  <span class="text-sm " style="color: #101010">物料消耗数量</span>
                   <span class="text-lg font-bold">{{ totalMaterialCount }}</span>
                 </div>
               </div>
@@ -127,7 +126,7 @@
                   <Icon icon="fa-solid:yen-sign" size="30" color="orange" />
                 </div>
                 <div class="flex flex-col items-center">
-                  <span class="text-sm text-gray-600">物料消耗费用</span>
+                  <span class="text-sm " style="color: #101010">物料消耗费用</span>
                   <span class="text-lg font-bold">{{ totalMaterialCost }}</span>
                 </div>
               </div>
@@ -141,27 +140,27 @@
           <el-card class="chart-card" shadow="never">
             <template #header>
               <div class="flex items-center justify-between">
-                <span class="text-base font-medium text-gray-600">保养情况</span>
+                <span class="text-base font-medium " style="color: #b6c8da">保养情况</span>
               </div>
             </template>
             <div class="flex mr-3">
-              <div ref="maintenanceChartRef" class="h-[157px] w-2/5"></div>
+              <div ref="maintenanceChartRef" class="h-[167px] w-2/5"></div>
               <div class="w-3/5 p-4 flex flex-col mt-5">
                 <div class="flex justify-between">
                   <div class="flex flex-col items-center">
-                    <Icon icon="fa-solid:list" size="30" color="blue" />
-                    <p style="font-size: 20px; margin-top: 5px">总工单数</p>
-                    <span style="font-size: 20px">{{ (by.finished?by.finished:0) + (by.todo?by.todo:0) }}</span>
+                    <Icon icon="fa-solid:list" size="30" color="#f1d209" />
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">总工单数</p>
+                    <span style="font-size: 20px;color: white">{{ (by.finished?by.finished:0) + (by.todo?by.todo:0) }}</span>
                   </div>
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:check-circle" size="30" color="green" />
-                    <p style="font-size: 20px; margin-top: 5px">已执行工单数</p>
-                    <span style="font-size: 20px">{{ by.finished?by.finished:0 }}</span>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">已执行工单数</p>
+                    <span style="font-size: 20px;color: white">{{ by.finished?by.finished:0 }}</span>
                   </div>
                   <div class="flex flex-col items-center">
-                    <Icon icon="fa-solid:hourglass-half" size="30" color="orange" />
-                    <p style="font-size: 20px; margin-top: 5px">待执行工单数 </p>
-                    <span style="font-size: 20px">{{ by.todo?by.todo:0 }}</span>
+                    <Icon icon="fa-solid:hourglass-half" size="30" color="#e14f0f" />
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">待执行工单数 </p>
+                    <span style="font-size: 20px;color: white">{{ by.todo?by.todo:0 }}</span>
                   </div>
                 </div>
               </div>
@@ -170,27 +169,27 @@
           <el-card class="chart-card mt-2" shadow="never">
             <template #header>
               <div class="flex items-center justify-between">
-                <span class="text-base font-medium text-gray-600">巡检情况</span>
+                <span class="text-base font-medium " style="color: #b6c8da">巡检情况</span>
               </div>
             </template>
             <div class="flex mr-3">
-              <div ref="inspectChartRef" class="h-[157px] w-2/5"></div>
+              <div ref="inspectChartRef" class="h-[167px] w-2/5"></div>
               <div class="w-3/5 p-4 flex flex-col mt-5">
                 <div class="flex justify-between">
                   <div class="flex flex-col items-center">
-                    <Icon icon="fa-solid:list" size="30" color="blue" />
-                    <p style="font-size: 20px; margin-top: 5px">总工单数</p>
-                    <span style="font-size: 20px">{{ inspect.todo + inspect.finished }}</span>
+                    <Icon icon="fa-solid:list" size="30" color="#f1d209" />
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">总工单数</p>
+                    <span style="font-size: 20px;color: white">{{ inspect.todo + inspect.finished }}</span>
                   </div>
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:check-circle" size="30" color="green" />
-                    <p style="font-size: 20px; margin-top: 5px">已执行工单数</p>
-                    <span style="font-size: 20px">{{ inspect.finished }}</span>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">已执行工单数</p>
+                    <span style="font-size: 20px;color: white">{{ inspect.finished }}</span>
                   </div>
                   <div class="flex flex-col items-center">
-                    <Icon icon="fa-solid:hourglass-half" size="30" color="orange" />
-                    <p style="font-size: 20px; margin-top: 5px">待执行工单数</p>
-                    <span style="font-size: 20px">{{ inspect.todo }}</span>
+                    <Icon icon="fa-solid:hourglass-half" size="30" color="#e14f0f" />
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">待执行工单数</p>
+                    <span style="font-size: 20px;color: white">{{ inspect.todo }}</span>
                   </div>
                 </div>
               </div>
@@ -366,7 +365,10 @@ const initQxChart = () => {
     },
     legend: {
       data: orderSevenData.value.series.map((item) => item.name),
-      top: 30
+      top: 30,
+      textStyle: {
+        color:'#B6C8DA'
+      }
     },
     grid: {
       left: '3%',
@@ -379,8 +381,14 @@ const initQxChart = () => {
       boundaryGap: false,
       data: orderSevenData.value.xAxis,
       axisLabel: {
-        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
-      }
+        color: '#B6C8DA',
+        formatter: (value) => value.split('-').join('/')
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      },
     },
     yAxis: [
       {
@@ -388,6 +396,24 @@ const initQxChart = () => {
         axisLabel: {
           formatter: '{value}'
         },
+        axisLabel: {
+          color: '#B6C8DA',
+          formatter: '{value}'
+        },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
         position: 'left' // 左侧 Y 轴
       },
       {
@@ -395,6 +421,24 @@ const initQxChart = () => {
         axisLabel: {
           formatter: '{value}'
         },
+        axisLabel: {
+          color: '#B6C8DA',
+          formatter: '{value}'
+        },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
         position: 'right', // 右侧 Y 轴
         splitLine: {
           show: false // 隐藏右侧 Y 轴的分割线
@@ -441,7 +485,10 @@ const initSparePartChart = () => {
       }
     },
     legend: {
-      data: ['数量', '金额']
+      data: ['数量', '金额'],
+      textStyle:{
+        color: '#fff'
+      }
     },
     grid: {
       left: '3%',
@@ -451,7 +498,15 @@ const initSparePartChart = () => {
     },
     xAxis: {
       type: 'category',
-      data: sparePartData.value.xAxis
+      data: sparePartData.value.xAxis,
+      axisLabel: {
+        color: '#B6C8DA',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      },
     },
     yAxis: [
       {
@@ -459,16 +514,46 @@ const initSparePartChart = () => {
         name: '数量',
         position: 'left',
         axisLabel: {
+          color: '#B6C8DA',
           formatter: '{value}'
-        }
+        },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
       },
       {
         type: 'value',
         name: '金额',
         position: 'right',
         axisLabel: {
+          color: '#B6C8DA',
           formatter: '{value}'
         },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
         splitLine: {
           show: false
         }
@@ -499,12 +584,12 @@ const initInspectChart = () => {
       trigger: 'item'
     },
     legend: {
-      // top: '5%',
-      // right: '10%',
-      // align: 'center',
       orient: 'horizontal', // 水平排列图例项
       bottom: '0%', // 放置在底部
-      icon: 'circle'
+      icon: 'circle',
+      textStyle: {
+        color: '#B6C8DA'
+      }
     },
     series: [
       {
@@ -516,6 +601,7 @@ const initInspectChart = () => {
         },
         emphasis: {
           label: {
+            color: '#B6C8DA',
             show: true,
             fontSize: 15,
             fontWeight: 'bold'
@@ -547,12 +633,12 @@ const initMaintenanceChart = () => {
       trigger: 'item'
     },
     legend: {
-      // top: '5%',
-      // right: '10%',
-      // align: 'center',
       orient: 'horizontal', // 水平排列图例项
       bottom: '0%', // 放置在底部
-      icon: 'circle'
+      icon: 'circle',
+      textStyle: {
+        color: '#B6C8DA'
+      }
     },
     series: [
       {
@@ -564,6 +650,7 @@ const initMaintenanceChart = () => {
         },
         emphasis: {
           label: {
+            color:'#B6C8DA',
             show: true,
             fontSize: 15,
             fontWeight: 'bold'
@@ -611,7 +698,10 @@ const initDeviceStatusCharts = () => {
     legend: {
       orient: 'horizontal', // 水平排列图例项
       bottom: '0%', // 放置在底部
-      icon: 'circle'
+      icon: 'circle',
+      textStyle: {
+        color: '#B6C8DA'
+      }
     },
     series: [
       {
@@ -628,7 +718,8 @@ const initDeviceStatusCharts = () => {
           label: {
             show: true,
             fontSize: 15,
-            fontWeight: 'bold'
+            fontWeight: 'bold',
+            color: 'white'
           }
         },
         labelLine: {
@@ -656,16 +747,78 @@ onMounted(async () => {
 .stat-card {
   width: 48%;
 }
-.calendar-cell {
-  position: relative;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.page-container {
+  background-color: #3a6fa3;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+// 统计卡片区域样式
+.summary {
+  margin-bottom: 20px;
+}
+
+// 图表卡片样式优化，增强与背景的对比
+::v-deep .chart-card {
+  background-color: rgba(0, 0, 0, 0.3); // 半透明白色卡片
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); // 轻微阴影增强层次感
+  transition: all 0.3s ease;
+  border: none;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); // 悬停时增强阴影
+  }
+}
+
+// 安全生产天数卡片样式
+.safety-days-card {
+  .safety-days-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+    position: relative;
+
+    .days-number {
+      font-size: 58px;
+      font-weight: bold;
+      color: darkorange;
+      line-height: 1;
+      transition: all 0.3s ease;
+    }
+
+    .days-number:hover {
+      transform: scale(1.05);
+    }
+
+    .days-label {
+      font-size: 20px;
+      color: white;
+      margin-top: 8px;
+    }
+
+    .safety-desc {
+      font-size: 14px;
+      color: #999;
+      position: absolute;
+      bottom: 10px;
+      text-align: center;
+      width: 90%;
+    }
+  }
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+  .page-container {
+    padding: 10px;
+  }
 }
-.calendar-pie {
-  width: 100%;
-  height: 80px;
+// 去除卡片头部的下边框
+::v-deep .el-card__header {
+  border-bottom: none !important;
+  padding-bottom: 0; // 可选：调整底部内边距
 }
 </style>

src/views/pms/stat/rhkb.vue

@@ -1,7 +1,8 @@
 <template>
+  <div class="page-container">
   <el-row :gutter="16" class="summary">
     <!-- 原有的统计卡片部分保持不变 -->
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="device.total || 0"
         icon="fa-solid:project-diagram"
@@ -10,7 +11,7 @@
         title="设备数"
       />
     </el-col>
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="maintain.total || 0"
         icon="fa-solid:list"
@@ -19,7 +20,7 @@
         title="维修工单"
       />
     </el-col>
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="fill.unfilledCount || 0"
         icon="fa-solid:times-circle"
@@ -28,7 +29,7 @@
         title="运行未填写"
       />
     </el-col>
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="fill.filledCount || 0"
         icon="fa-solid:award"
@@ -37,7 +38,7 @@
         title="运行已填写"
       />
     </el-col>
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="by.todo || 0"
         icon="fa-solid:times-circle"
@@ -46,7 +47,7 @@
         title="未执行保养"
       />
     </el-col>
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="by.finished || 0"
         icon="fa-solid:award"
@@ -55,7 +56,7 @@
         title="已执行保养"
       />
     </el-col>
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="inspectt.todo || 0"
         icon="fa-solid:times-circle"
@@ -64,7 +65,7 @@
         title="待填写巡检"
       />
     </el-col>
-    <el-col v-loading="loading" :sm="3" :xs="12">
+    <el-col  :sm="3" :xs="12">
       <SummaryCard
         :value="inspectt.finished || 0"
         icon="fa-solid:award"
@@ -81,7 +82,7 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">设备状态统计</span>
+            <span class="text-base font-medium " style="color: #b6c8da">设备状态统计</span>
           </div>
         </template>
         <div ref="statusChartRef" class="h-[290px]"></div>
@@ -91,7 +92,7 @@
       <el-card class="chart-card" shadow="never" >
         <template #header>
           <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">设备类别TOP数量</span>
+            <span class="text-base font-medium " style="color: #b6c8da">设备类别TOP数量</span>
           </div>
         </template>
         <div ref="topContainer" class="h-[290px]"></div>
@@ -101,7 +102,7 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center justify-between">
-            <span class="text-base font-medium text-gray-600">当日运维成本</span>
+            <span class="text-base font-medium " style="color: #b6c8da">当日运维成本</span>
           </div>
         </template>
         <div ref="chartContainer" class="h-[290px]"></div>
@@ -115,7 +116,7 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">近7天物料消耗TOP5</span>
+            <span class="text-base font-medium " style="color: #b6c8da">近7天物料消耗TOP5</span>
           </div>
         </template>
         <div ref="materialChartRef" class="h-[320px]"></div>
@@ -125,7 +126,7 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center justify-between">
-            <span class="text-base font-medium text-gray-600">工单数量情况</span>
+            <span class="text-base font-medium " style="color: #b6c8da">工单数量情况</span>
           </div>
         </template>
         <div ref="qxRef" class="h-[320px]"></div>
@@ -137,7 +138,7 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center justify-between">
-            <span class="text-base font-medium text-gray-600">累计注气量统计(m³)</span>
+            <span class="text-base font-medium " style="color: #b6c8da">累计注气量统计(m³)</span>
           </div>
         </template>
         <div ref="zqlChartRef" class="h-[300px]"></div>
@@ -147,14 +148,14 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center justify-between">
-            <span class="text-base font-medium text-gray-600">当日注气量统计(m³)</span>
+            <span class="text-base font-medium " style="color: #b6c8da">当日注气量统计(m³)</span>
           </div>
         </template>
         <div ref="todayZqlRef" class="h-[300px]"></div>
       </el-card>
     </el-col>
   </el-row>
-  <!-- TODO 第四行：地图 -->
+  </div>
 </template>
 
 <script setup lang="ts" name="Index">
@@ -191,7 +192,6 @@ echarts.use([
   BarChart
 ])
 
-const dateRange = ref<[Date, Date] | null>(null)
 
 const by = ref({
   todo: undefined,
@@ -205,10 +205,6 @@ const inspectt = ref({
   finished: 0,
   todo: 0
 })
-const queryParams = reactive({
-  startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
-  endTime: Date.now() // 设置默认结束时间为当前时间
-})
 const backendData = ref([])
 const statusChartRef = ref() // 设备数量统计的图表
 const materialChartRef = ref() // 设备数量统计的图表
@@ -245,7 +241,6 @@ const materialData = ref({})
 const orderSevenData = ref({})
 const zqlData = ref({})
 const zqlTodayData = ref({})
-const safe = ref()
 /** 获取统计数据 */
 const getStats = () => {
   initYwcbChart()
@@ -256,17 +251,17 @@ const getStats = () => {
   IotStatApi.getMaintainCount('rh').then((res) => {
     maintain.value = res
   })
-  IotStatApi.getMainWorkCount().then((res) => {
+  IotStatApi.getMainWorkCount("").then((res) => {
     work.value = res
   })
-  IotStatApi.getInspectCount().then((res) => {
+  IotStatApi.getInspectCount("").then((res) => {
     inspect.value = res
   })
-  IotStatApi.getMaintenanceStatus().then((res) => {
-    status.value = res
-    // initCharts()
-  })
-  IotStatApi.getMaintenanceTodayStatus().then((res) => {
+  // IotStatApi.getMaintenanceStatus("").then((res) => {
+  //   status.value = res
+  //   // initCharts()
+  // })
+  IotStatApi.getMaintenanceTodayStatus("").then((res) => {
     todayStatus.value = res
     initTopChart()
   })
@@ -302,7 +297,7 @@ const getStats = () => {
     startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
     endTime: Date.now(), // 设置默认结束时间为当前时间
     createTime: [],
-    deptId: null, // 选中的部门ID
+    deptId: '', // 选中的部门ID
     status: null // 填写状态
   })
   IotStatApi.getInspectStatuss(fillQueryParams, 'rh').then((res) => {
@@ -313,7 +308,7 @@ const getStats = () => {
     fill.value = res.totalList[0] || []
   })
 }
-let materialInstance = null
+let materialInstance;
 const initMaterials = () => {
   if (!materialChartRef.value) return
   const option = {
@@ -321,14 +316,12 @@ const initMaterials = () => {
       trigger: 'item'
     },
     legend: {
-      // top: '5%',
-      // right: '10%',
-      // align: 'left',
-      // orient: 'vertical',
-      // icon: 'circle'
       orient: 'horizontal', // 水平排列图例项
       bottom: '0%', // 放置在底部
-      icon: 'circle'
+      icon: 'circle',
+      textStyle: {
+        color:'#B6C8DA'
+      }
     },
     series: [
       {
@@ -339,7 +332,8 @@ const initMaterials = () => {
         center: ['50%', '44%'],
         label: {
           show: false,
-          position: 'outside'
+          position: 'outside',
+          color:'#B6C8DA'
         },
         emphasis: {
           label: {
@@ -366,23 +360,23 @@ const initMaterials = () => {
 let zqlTodayInstance = null
 const initTodayZqlChart = async () => {
   if (!todayZqlRef.value) return
-
-  // 获取数据
-  // ECharts配置
+  zqlTodayInstance = echarts.init(todayZqlRef.value)
   const option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'shadow'
-      },
-      formatter: (params) => {
-        return `${params[0].axisValue}<br/>
-                ${params[0].marker} ${params[0].seriesName}: ${params[0].value}`
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
       }
     },
     legend: {
-      data: ['当日注气量'],
-      top: 25
+      data: zqlTodayData.value.series.map((item) => item.name),
+      top: 30,
+      textStyle: {
+        color: '#B6C8DA'
+      }
     },
     grid: {
       left: '3%',
@@ -392,28 +386,79 @@ const initTodayZqlChart = async () => {
     },
     xAxis: {
       type: 'category',
+      boundaryGap: false,
       data: zqlTodayData.value.xAxis,
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      },
       axisLabel: {
+        color: '#B6C8DA',
         formatter: (value) => value.split('-').join('/') // 显示为 2023/01
       }
     },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        formatter: (value) => Math.floor(value).toString()
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          color: '#B6C8DA',
+          formatter: '{value}'
+        },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
+        position: 'left' // 左侧 Y 轴
+      },
+      {
+        type: 'value',
+        axisLabel: {
+          color: '#B6C8DA',
+          formatter: '{value}'
+        },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
+        position: 'right', // 右侧 Y 轴
+        splitLine: {
+          show: false // 隐藏右侧 Y 轴的分割线
+        }
       }
-    },
+    ],
+
     series: zqlTodayData.value.series.map((item, index) => {
       // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
-      const yAxisIndex = index < 2 ? 0 : 1
+      const yAxisIndex = index < 1 ? 0 : 1
       return {
         name: item.name,
-        type: 'bar',
+        type: 'line',
         smooth: true,
         symbol: 'circle',
         symbolSize: 8,
         itemStyle: {
-          color: [ '#91cc75'][index]
+          color: ['#5470c6', '#f1d209'][index]
         },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -427,10 +472,7 @@ const initTodayZqlChart = async () => {
     })
   }
 
-  // 初始化图表
-  zqlTodayInstance = echarts.init(todayZqlRef.value)
   zqlTodayInstance.setOption(option)
-
   // 窗口缩放监听
   window.addEventListener('resize', handleZqlTodayResize)
   handleZqlTodayResize()
@@ -446,7 +488,10 @@ const initDeviceStatusCharts = () => {
     legend: {
       orient: 'horizontal', // 水平排列图例项
       bottom: '0%', // 放置在底部
-      icon: 'circle'
+      icon: 'circle',
+      textStyle: {
+        color: '#B6C8DA'
+      }
     },
     series: [
       {
@@ -457,7 +502,8 @@ const initDeviceStatusCharts = () => {
         center: ['50%', '44%'],
         label: {
           show: false,
-          position: 'outside'
+          position: 'outside',
+          color: 'white'
         },
         emphasis: {
           label: {
@@ -477,7 +523,7 @@ const initDeviceStatusCharts = () => {
 
 /** 初始化消息统计图表 */
 const chartContainer = ref(null)
-let chartInstance = null
+let chartInstance;
 
 // 模拟数据获取
 const fetchChartData = async () => {
@@ -513,7 +559,10 @@ const initYwcbChart = async () => {
     },
     legend: {
       data: ['当日运维成本'],
-      top: 1
+      top: 1,
+      textStyle: {
+        color: '#B6C8DA'
+      }
     },
     grid: {
       left: '3%',
@@ -526,14 +575,36 @@ const initYwcbChart = async () => {
       data: zqlTodayData.value.xAxis,
       axisLabel: {
         rotate: 45,
-        margin: 15
-      }
+        margin: 15,
+        color: '#B6C8DA',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      },
     },
     yAxis: {
       type: 'value',
       axisLabel: {
+        color: '#B6C8DA',
         formatter: (value) => Math.floor(value).toString()
+      },
+      splitLine: {
+        show: true, // 显示水平网格线（默认显示）
+        lineStyle: {
+          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+          color: '#457794', // 浅灰色半透明
+          // 可选：设置线条类型（实线/虚线/点线）
+          type: 'dashed'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA'
+        }
       }
+
     },
     series: [
       {
@@ -565,9 +636,6 @@ const handleResize = () => {
 }
 
 // 自适应调整
-const handleTopResize = () => {
-  topInstance?.resize()
-}
 const handleQxResize = () => {
   qxInstance?.resize()
 }
@@ -581,7 +649,7 @@ const handleMaterialResize = () => {
   materialInstance?.resize()
 }
 const topContainer = ref(null)
-let topInstance = null
+let topInstance;
 // 响应式容器尺寸
 const { width, height } = useElementSize(topContainer)
 
@@ -608,17 +676,37 @@ const getTopOption = () => {
     xAxis: {
       type: 'value',
       axisLabel: {
+        color: '#B6C8DA',
         formatter: (value) => {
           if (value >= 10000) return `${(value / 10000).toFixed(1)}万`
           return value.toLocaleString()
         }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      },
+      splitLine: {
+        show: true, // 显示水平网格线（默认显示）
+        lineStyle: {
+          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+          color: '#457794', // 浅灰色半透明
+          // 可选：设置线条类型（实线/虚线/点线）
+          type: 'dashed'
+        }
       }
     },
     yAxis: {
       type: 'category',
       data: data.map((item) => item.category),
       axisTick: { show: false },
-      axisLabel: {}
+      axisLabel: { color: '#B6C8DA' },
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      }
     },
     series: [
       {
@@ -636,7 +724,7 @@ const getTopOption = () => {
           show: true,
           position: 'right',
           formatter: '{@value}',
-          color: '#333',
+          color: '#B6C8DA',
           fontWeight: 'bold'
         },
         emphasis: {
@@ -681,26 +769,38 @@ watch(
 )
 
 const qxRef = ref(null)
-let qxInstance = null
-let zqlInstance = null
+let qxInstance;
+let zqlInstance;
 
 const initZqlChart = () => {
   if (!zqlChartRef.value) return
-  zqlInstance = echarts.init(zqlChartRef.value)
-  debugger
+
+  // 获取数据
+  // ECharts配置
   const option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross',
+        type: 'shadow',
         label: {
           backgroundColor: '#6a7985'
         }
       }
+      // trigger: 'axis',
+      // axisPointer: {
+      //   type: 'shadow'
+      // },
+      // formatter: (params) => {
+      //   return `${params[0].axisValue}<br/>
+      //           ${params[0].marker} ${params[0].seriesName}: ${params[0].value}`
+      // }
     },
     legend: {
       data: zqlData.value.series.map((item) => item.name),
-      top: 30
+      top: 30,
+      textStyle: {
+        color: '#B6C8DA'
+      }
     },
     grid: {
       left: '3%',
@@ -710,43 +810,77 @@ const initZqlChart = () => {
     },
     xAxis: {
       type: 'category',
-      boundaryGap: false,
       data: zqlData.value.xAxis,
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      },
       axisLabel: {
-        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
+        color: '#B6C8DA',
+        formatter: (value) => value.split('-').join('/')
       }
     },
     yAxis: [
       {
         type: 'value',
         axisLabel: {
+          color: '#B6C8DA',
           formatter: '{value}'
         },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
         position: 'left' // 左侧 Y 轴
       },
       {
         type: 'value',
         axisLabel: {
+          color: '#B6C8DA',
           formatter: '{value}'
         },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
         position: 'right', // 右侧 Y 轴
         splitLine: {
           show: false // 隐藏右侧 Y 轴的分割线
         }
       }
     ],
-
     series: zqlData.value.series.map((item, index) => {
       // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
-      const yAxisIndex = index < 2 ? 0 : 1
+      const yAxisIndex = index < 1 ? 0 : 1
       return {
         name: item.name,
-        type: 'line',
+        type: 'bar',
         smooth: true,
         symbol: 'circle',
         symbolSize: 8,
         itemStyle: {
-          color: ['#5470c6', '#f1d209', '#e14f0f', '#91cc75'][index]
+          color: [ '#91cc75','#f1d209'][index]
         },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -760,10 +894,14 @@ const initZqlChart = () => {
     })
   }
 
+  // 初始化图表
+  zqlInstance = echarts.init(zqlChartRef.value)
   zqlInstance.setOption(option)
+
   // 窗口缩放监听
   window.addEventListener('resize', handleZqlResize)
   handleZqlResize()
+
 }
 
 const initQxChart = () => {
@@ -782,7 +920,10 @@ const initQxChart = () => {
     },
     legend: {
       data: orderSevenData.value.series.map((item) => item.name),
-      top: 30
+      top: 30,
+      textStyle: {
+        color:'#B6C8DA'
+      }
     },
     grid: {
       left: '3%',
@@ -795,22 +936,58 @@ const initQxChart = () => {
       boundaryGap: false,
       data: orderSevenData.value.xAxis,
       axisLabel: {
-        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
-      }
+        color: '#B6C8DA',
+        formatter: (value) => value.split('-').join('/')
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#B6C8DA' // X轴线白色半透明
+        }
+      },
     },
     yAxis: [
       {
         type: 'value',
         axisLabel: {
+          color: '#B6C8DA',
           formatter: '{value}'
         },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
         position: 'left' // 左侧 Y 轴
       },
       {
         type: 'value',
         axisLabel: {
+          color: '#B6C8DA',
           formatter: '{value}'
         },
+        splitLine: {
+          show: true, // 显示水平网格线（默认显示）
+          lineStyle: {
+            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
+            color: '#457794', // 浅灰色半透明
+            // 可选：设置线条类型（实线/虚线/点线）
+            type: 'dashed'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#B6C8DA'
+          }
+        },
         position: 'right', // 右侧 Y 轴
         splitLine: {
           show: false // 隐藏右侧 Y 轴的分割线
@@ -880,4 +1057,79 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.page-container {
+  background-color: #3a6fa3;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+// 统计卡片区域样式
+.summary {
+  margin-bottom: 20px;
+}
+
+// 图表卡片样式优化，增强与背景的对比
+::v-deep .chart-card {
+  background-color: rgba(0, 0, 0, 0.3); // 半透明白色卡片
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); // 轻微阴影增强层次感
+  transition: all 0.3s ease;
+  border: none;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); // 悬停时增强阴影
+  }
+}
+
+// 安全生产天数卡片样式
+.safety-days-card {
+  .safety-days-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+    position: relative;
+
+    .days-number {
+      font-size: 58px;
+      font-weight: bold;
+      color: darkorange;
+      line-height: 1;
+      transition: all 0.3s ease;
+    }
+
+    .days-number:hover {
+      transform: scale(1.05);
+    }
+
+    .days-label {
+      font-size: 20px;
+      color: white;
+      margin-top: 8px;
+    }
+
+    .safety-desc {
+      font-size: 14px;
+      color: #999;
+      position: absolute;
+      bottom: 10px;
+      text-align: center;
+      width: 90%;
+    }
+  }
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+  .page-container {
+    padding: 10px;
+  }
+}
+// 去除卡片头部的下边框
+::v-deep .el-card__header {
+  border-bottom: none !important;
+  padding-bottom: 0; // 可选：调整底部内边距
+}
+</style>