统计报表优化

src/views/report-statistics/fault_report/index.vue

@@ -5,7 +5,7 @@
       <!-- 统计卡片 -->
       <el-row :gutter="18" class="mb-4">
         <el-col :span="4">
-          <div style="background-color: #fff; border-radius: 10px; cursor: pointer">
+          <div style="background-color: transparent; border-radius: 10px; cursor: pointer">
             <div
               class="stat-card bg-blue-gradient"
               :class="{ 'stat-card-selected': statusList.all }"
@@ -14,21 +14,19 @@
                   queryParams.pageNo = 1
                   getList('all')
                 }
-              "
-            >
-              <Icon icon="ep:histogram" :size="40" />
+              ">
+              <Icon icon="ep:histogram" class="text-[#409eff]" :size="40" />
               <div class="card-title">故障总数</div>
               <div class="card-value pt-5">
                 <CountTo
-                  class="text-3xl"
+                  class="text-3xl text-[#409eff]!"
                   :end-val="
                     statusCount.finished +
                       statusCount.trans +
                       statusCount.reporting +
                       statusCount.close || 0
                   "
-                  :decimals="0"
-                />
+                  :decimals="0" />
               </div>
             </div>
           </div>
@@ -44,12 +42,14 @@
                   queryParams.pageNo = 1
                   getList('finished')
                 }
-              "
-            >
-              <Icon icon="ep:finished" :size="40" />
+              ">
+              <Icon icon="ep:finished" class="text-[#239443]" :size="40" />
               <div class="card-title">维修完成</div>
               <div class="card-value pt-5">
-                <CountTo class="text-3xl" :end-val="statusCount.finished || 0" :decimals="0" />
+                <CountTo
+                  class="text-3xl text-[#239443]!"
+                  :end-val="statusCount.finished || 0"
+                  :decimals="0" />
               </div>
             </div>
           </div>
@@ -65,12 +65,14 @@
                   queryParams.pageNo = 1
                   getList('trans')
                 }
-              "
-            >
-              <Icon icon="ep:more-filled" :size="40" />
+              ">
+              <Icon icon="ep:more-filled" class="text-[#e8a748]" :size="40" />
               <div class="card-title">转工单</div>
               <div class="card-value pt-5">
-                <CountTo class="text-3xl" :end-val="statusCount.trans || 0" :decimals="0" />
+                <CountTo
+                  class="text-3xl text-[#e8a748]!"
+                  :end-val="statusCount.trans || 0"
+                  :decimals="0" />
               </div>
             </div>
           </div>
@@ -79,19 +81,21 @@
         <el-col :span="4">
           <div style="background-color: #fff; border-radius: 10px">
             <div
-              class="stat-card bg-red-gradient"
+              class="stat-card bg-blue-gradient2"
               :class="{ 'stat-card-selected': statusList.reporting }"
               @click="
                 () => {
                   queryParams.pageNo = 1
                   getList('reporting')
                 }
-              "
-            >
-              <Icon icon="ep:promotion" :size="40" />
+              ">
+              <Icon icon="ep:promotion" class="text-[#0881d9]" :size="40" />
               <div class="card-title">上报中</div>
               <div class="card-value pt-5">
-                <CountTo class="text-3xl" :end-val="statusCount.reporting || 0" :decimals="0" />
+                <CountTo
+                  class="text-3xl text-[#0881d9]!"
+                  :end-val="statusCount.reporting || 0"
+                  :decimals="0" />
               </div>
             </div>
           </div>
@@ -107,12 +111,14 @@
                   queryParams.pageNo = 1
                   getList('close')
                 }
-              "
-            >
-              <Icon icon="ep:close" :size="40" />
+              ">
+              <Icon icon="ep:close" class="text-[#f56d6d]" :size="40" />
               <div class="card-title">关闭</div>
               <div class="card-value pt-5">
-                <CountTo class="text-3xl" :end-val="statusCount.close || 0" :decimals="0" />
+                <CountTo
+                  class="text-3xl text-[#f56d6d]!"
+                  :end-val="statusCount.close || 0"
+                  :decimals="0" />
               </div>
             </div>
           </div>
@@ -175,8 +181,7 @@
           :data="list"
           height="48vh"
           :stripe="true"
-          :show-overflow-tooltip="true"
-        >
+          :show-overflow-tooltip="true">
           <zm-table-column :label="t('fault.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
@@ -195,8 +200,7 @@
             :label="t('faultForm.failureType')"
             align="center"
             prop="failureType"
-            min-width="110"
-          >
+            min-width="110">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.FAILURE_TYPE" :value="scope.row.failureType" />
             </template>
@@ -209,8 +213,7 @@
             :label="t('fault.approvalStatus')"
             align="center"
             prop="auditStatus"
-            min-width="130"
-          >
+            min-width="130">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.auditStatus" />
             </template>
@@ -225,8 +228,7 @@
             align="center"
             prop="failureTime"
             :formatter="dateFormatter"
-            min-width="180px"
-          />
+            min-width="180px" />
           <zm-table-column :label="t('fault.solveTime')" align="center" prop="dealHour">
             <template #default="scope">
               {{ scope.row.dealHour && scope.row.dealHour > 0 ? scope.row.dealHour + 'H' : '' }}
@@ -238,8 +240,7 @@
             prop="createTime"
             :formatter="dateFormatter"
             min-width="180px"
-            action
-          />
+            action />
         </zm-table>
 
         <!-- 分页 -->
@@ -247,8 +248,7 @@
           :total="total"
           v-model:page="queryParams.pageNo"
           v-model:limit="queryParams.pageSize"
-          @pagination="getAllList"
-        />
+          @pagination="getAllList" />
       </ContentWrap>
     </el-col>
   </el-row>
@@ -484,35 +484,37 @@ watch(
 }
 
 .stat-card {
-  padding: 20px;
+  padding: 14px 16px;
   border-radius: 10px;
-  color: white;
   text-align: center;
   font-size: 14px;
-  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
   transition:
     transform 0.3s ease,
-    box-shadow 0.3s ease;
-  backdrop-filter: blur(12px);
+    box-shadow 0.3s ease,
+    border-color 0.3s ease;
   height: 170px;
   cursor: pointer;
   overflow: hidden; /* 防止闪光效果溢出 */
-}
-.stat-card::before {
-  position: absolute;
-  filter: blur(20px);
-  z-index: -1;
+  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
+
+  box-shadow: 0 4px 12px rgb(31 91 184 / 8%);
+  color: #6b7280;
 }
 
 .card-title {
   margin: 8px 0;
-  font-size: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+  line-height: 1.4;
 }
 
 .card-value {
-  font-size: 28px;
-  font-weight: bold;
   margin: 8px 0;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  color: #1f5bb8;
 }
 
 .card-trend {
@@ -522,23 +524,43 @@ watch(
 
 /* 毛玻璃渐变背景 —— 不再使用 background-image */
 .bg-blue-gradient {
-  background: linear-gradient(135deg, rgba(77, 147, 255, 0.5), rgba(75, 132, 254));
+  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
+  border-color: #e4ecf7;
+}
+.bg-blue-gradient2 {
+  background: linear-gradient(180deg, #ffffff 0%, #a5d1ff 100%);
+  border-color: #e4ecf7;
+}
+
+.bg-blue-gradient .card-value {
+  color: #2563eb;
 }
 
 .bg-green-gradient {
-  background: linear-gradient(135deg, rgba(101, 226, 136, 0.3), #52d7a2);
+  background: linear-gradient(180deg, #f7fcf8 0%, #edf8f1 100%);
+  border-color: #d6efdc;
+}
+
+.bg-green-gradient .card-value {
+  color: #16a34a;
 }
 
 .bg-orange-gradient {
-  background: linear-gradient(135deg, rgba(152, 82, 4, 0.5), rgba(255, 152, 4, 0.6));
+  background: linear-gradient(180deg, #fff8ef 0%, #ffeed9 100%);
+  border-color: #ffd7a1;
+}
+
+.bg-orange-gradient .card-value {
+  color: #d97706;
 }
 
 .bg-red-gradient {
-  background: linear-gradient(135deg, rgba(232, 65, 51), rgba(252, 242, 236));
+  background: linear-gradient(180deg, #fff4f4 0%, #ffe8e8 100%);
+  border-color: #ffcfcf;
 }
 
-.bg-warn-gradient {
-  background: linear-gradient(135deg, rgba(255, 201, 103), rgba(243, 162, 152));
+.bg-red-gradient .card-value {
+  color: #de3b3b;
 }
 
 /* 确保内容不溢出 */
@@ -561,10 +583,9 @@ watch(
 
 .stat-card-selected {
   position: relative;
-  transform: scale(1.06);
+  transform: translateY(-2px);
   transition: all 0.2s;
-  box-shadow:
-    0 10px 10px rgba(0, 80, 179, 0.5),
-    0 0 10px rgba(0, 120, 255, 0.4) inset;
+  box-shadow: 0 10px 20px rgb(31 91 184 / 12%);
+  border-color: #bfd5ee;
 }
 </style>

src/views/report-statistics/inspection_order/index.vue

@@ -691,7 +691,7 @@ onMounted(() => {
 .stat-card {
   padding: 14px 16px;
   background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
-  border: 1px solid #e4ecf7;
+  /* border: 1px solid #e4ecf7; */
   border-radius: 10px;
   box-shadow: 0 4px 12px rgb(31 91 184 / 8%);
   text-align: center;