应检设备证书

src/views/pms/qhse/deviceCert/index.vue

@@ -89,7 +89,9 @@
               :data="list"
               :width="width"
               :height="height"
-              :max-height="height">
+              :max-height="height"
+              :row-style="tableRowStyle"
+              :row-class-name="tableRowClassName">
               <zm-table-column :label="t('monitor.serial')" width="70" align="center">
                 <template #default="scope">
                   {{ scope.$index + 1 }}
@@ -143,6 +145,24 @@
           @pagination="getList" />
       </div>
     </div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-3 min-w-0 mt-2">
+      <el-alert title="应检设备证书已过期红色预警" type="error" show-icon :closable="false">
+        <template #icon>
+          <Bell />
+        </template>
+      </el-alert>
+      <el-alert
+        title="应检设备证书90天橙色预警"
+        type="warning"
+        show-icon
+        :closable="false"
+        style="margin-top: 5px">
+        <template #icon>
+          <Bell />
+        </template>
+      </el-alert>
+    </div>
   </div>
 
   <Dialog v-model="dialogFileView" title="附件" width="500">
@@ -221,6 +241,26 @@ const getList = async () => {
   }
 }
 
+const tableRowStyle = ({ row }) => {
+  if (row.expired) {
+    return { backgroundColor: '#ffe6e6' }
+  }
+  if (row.alertWarn) {
+    return { backgroundColor: '#e19f1a' }
+  }
+  return {}
+}
+
+const tableRowClassName = ({ row }) => {
+  if (row.expired) {
+    return 'expired-row'
+  }
+  if (row.alertWarn) {
+    return 'alert-warn-row'
+  }
+  return ''
+}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -352,7 +392,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .file-name-text {
   flex: 1;
   overflow: hidden;
@@ -361,4 +401,42 @@ onMounted(() => {
   margin-right: 12px;
   color: var(--el-text-color-primary);
 }
+
+/* 过期行的红色背景 - 基础状态 */
+:deep(.el-table__body tr.expired-row > td.el-table__cell) {
+  background-color: #ffe6e6 !important;
+}
+
+/* 过期行 - 鼠标悬浮状态 */
+:deep(.el-table__body tr.expired-row:hover > td.el-table__cell) {
+  background-color: #ffcccc !important;
+}
+
+/* 确保斑马纹不影响过期行 */
+:deep(.el-table__body tr.expired-row.el-table__row--striped > td.el-table__cell) {
+  background-color: #ffe6e6 !important;
+}
+
+:deep(.el-table__body tr.expired-row.el-table__row--striped:hover > td.el-table__cell) {
+  background-color: #ffcccc !important;
+}
+
+/* 预警行的橙色背景 - 基础状态 */
+:deep(.el-table__body tr.alert-warn-row > td.el-table__cell) {
+  background-color: #fff1df !important;
+}
+
+/* 预警行 - 鼠标悬浮状态 */
+:deep(.el-table__body tr.alert-warn-row:hover > td.el-table__cell) {
+  background-color: #ffe2bf !important;
+}
+
+/* 确保斑马纹不影响预警行 */
+:deep(.el-table__body tr.alert-warn-row.el-table__row--striped > td.el-table__cell) {
+  background-color: #fff1df !important;
+}
+
+:deep(.el-table__body tr.alert-warn-row.el-table__row--striped:hover > td.el-table__cell) {
+  background-color: #ffe2bf !important;
+}
 </style>