样式优化

src/views/pms/iotopeationfill/statistics.vue

@@ -1,10 +1,11 @@
 <template>
+  <div class="statistics-page">
   <!-- 第一行：统计卡片行 -->
-  <el-row :gutter="16" class="mb-4">
+  <el-row :gutter="16" class="section-row">
     <el-col :span="24">
-      <el-card class="chart-card" shadow="never">
+      <el-card class="chart-card filter-card" shadow="never">
         <el-form
-          class="-mb-15px"
+          class="filter-form"
           :model="queryParams"
           ref="queryFormRef"
           :inline="true"
@@ -49,52 +50,52 @@
               />
             </el-select>
           </el-form-item>-->
-          <el-form-item>
-            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-form-item class="filter-actions">
+            <el-button class="action-btn" @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+            <el-button class="action-btn" @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
           </el-form-item>
         </el-form>
       </el-card>
     </el-col>
   </el-row>
   <!-- 第二行：图表行 -->
-  <el-row :gutter="16" class="mb-4">
+  <el-row :gutter="16" class="section-row">
     <el-col :span="12">
       <el-card class="chart-card" shadow="never">
         <template #header>
-          <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">运行记录工单统计</span>
+          <div class="card-header">
+            <span class="card-title">运行记录工单统计</span>
           </div>
         </template>
-        <el-row class="h-[220px]" style="display: flex; justify-content: space-around;">
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,4,queryParams.createTime)">
+        <el-row class="gauge-row">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,4,queryParams.createTime)">
             <div ref="reportingChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2"  >
-              <span class="text-sm text-gray-600">总数</span>
+            <div class="gauge-label">
+              <span>总数</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,1,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,1,queryParams.createTime)">
             <div ref="dealFinishedChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">已填写</span>
+            <div class="gauge-label">
+              <span>已填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,0,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,0,queryParams.createTime)">
             <div ref="transOrderChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">未填写</span>
+            <div class="gauge-label">
+              <span>未填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,2,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,2,queryParams.createTime)">
             <div ref="writeChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">填写中</span>
+            <div class="gauge-label">
+              <span>填写中</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,3,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,3,queryParams.createTime)">
             <div ref="ignoreChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600" >忽略</span>
+            <div class="gauge-label">
+              <span>忽略</span>
             </div>
           </el-col>
         </el-row>
@@ -103,33 +104,33 @@
     <el-col :span="12">
       <el-card class="chart-card" shadow="never">
         <template #header>
-          <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">运行记录设备统计</span>
+          <div class="card-header">
+            <span class="card-title">运行记录设备统计</span>
           </div>
         </template>
-        <el-row class="h-[220px]" style="display: flex; justify-content: space-around;">
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,2,queryParams.createTime)">
+        <el-row class="gauge-row">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,2,queryParams.createTime)">
             <div ref="reportingChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2"  >
-              <span class="text-sm text-gray-600">总数</span>
+            <div class="gauge-label">
+              <span>总数</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,1,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,1,queryParams.createTime)">
             <div ref="dealFinishedChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">已填写</span>
+            <div class="gauge-label">
+              <span>已填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,0,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,0,queryParams.createTime)">
             <div ref="transOrderChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">未填写</span>
+            <div class="gauge-label">
+              <span>未填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,3,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,3,queryParams.createTime)">
             <div ref="ignoreChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">忽略</span>
+            <div class="gauge-label">
+              <span>忽略</span>
             </div>
           </el-col>
         </el-row>
@@ -139,18 +140,19 @@
 
 
   <!-- 第三行：消息统计行 -->
-  <el-row>
+  <el-row class="section-row">
     <el-col :span="24">
       <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>
+          <div class="card-header">
+            <span class="card-title">运行记录工单统计</span>
           </div>
         </template>
-        <div ref="chartContainer" class="h-[300px]"></div>
+        <div ref="chartContainer" class="trend-chart"></div>
       </el-card>
     </el-col>
   </el-row>
+  </div>
 </template>
 
 <script setup lang="ts" name="Index">
@@ -671,35 +673,104 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+.statistics-page {
+  padding: 12px;
+  background: linear-gradient(180deg, #f5f8ff 0%, #f8fafc 100%);
+}
+
+.section-row {
+  margin-bottom: 12px;
+}
+
 .chart-card {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-  padding: 16px;
+  border: 1px solid #e8edf5;
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
+}
+
+.filter-card {
+  :deep(.el-card__body) {
+    padding: 14px 18px 2px;
+  }
+}
+
+.filter-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+
+  :deep(.el-input__wrapper),
+  :deep(.el-select__wrapper) {
+    border-radius: 10px;
+  }
+}
+
+.filter-actions {
+  margin-left: 8px;
 }
 
-// 新增样式，隐藏滚动条但保留功能
-::-webkit-scrollbar {
-  display: none;
+.action-btn {
+  min-width: 88px;
+  border-radius: 10px;
 }
 
-:host {
-  overflow: hidden;
+.card-header {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
 }
 
-// 确保页面铺满屏幕并不出现滚动条
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
+.card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #334155;
 }
 
-// 适配图表容器高度
-.el-row {
-  max-height: calc(100vh - 32px); // 减去页面padding
-  overflow: auto;
-  -ms-overflow-style: none; // 隐藏IE滚动条
-  scrollbar-width: none; // 隐藏Firefox滚动条
+.gauge-row {
+  height: 220px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.gauge-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  padding: 4px 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.gauge-item:hover {
+  background: #f8fbff;
+  box-shadow: inset 0 0 0 1px #dbeafe;
+}
+
+.gauge-label {
+  margin-top: 6px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.trend-chart {
+  height: 320px;
+}
+
+:deep(.el-card__header) {
+  border-bottom: 1px solid #eef2f7;
+  padding: 14px 18px;
+}
+
+:deep(.el-card__body) {
+  padding: 14px 18px 16px;
+}
+
+@media (max-width: 1366px) {
+  .gauge-row {
+    overflow-x: auto;
+    gap: 6px;
+    justify-content: flex-start;
+  }
 }
 </style>