橙色预警

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径  http://192.168.188.79:48080  https://iot.deepoil.cc  http://172.26.0.56:48080
-VITE_BASE_URL='https://iot.deepoil.cc'
+VITE_BASE_URL='http://172.26.0.56:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/views/pms/qhse/certificate.vue

@@ -20,16 +20,14 @@
               v-model="queryParams.classify"
               placeholder="证书类别"
               clearable
-              class="!w-150px"
-            >
+              class="!w-150px">
               <el-option
                 v-for="dict in getStrDictOptions(DICT_TYPE.PERSON_CERT).concat(
                   getStrDictOptions(DICT_TYPE.ORG_CERT)
                 )"
                 :key="dict.value"
                 :label="dict.label"
-                :value="dict.value"
-              />
+                :value="dict.value" />
             </el-select>
           </el-form-item>
 
@@ -42,14 +40,12 @@
               v-model="queryParams.expired"
               placeholder="请选择是否过期"
               clearable
-              style="width: 150px"
-            >
+              style="width: 150px">
               <el-option
                 v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
                 :key="dict.value"
                 :label="dict.label"
-                :value="dict.value"
-              />
+                :value="dict.value" />
             </el-select>
           </el-form-item>
 
@@ -75,10 +71,11 @@
         <zm-table
           :loading="loading"
           :data="list"
-          height="calc(80vh - 220px)"
+          height="calc(74.5vh - 220px)"
           :show-overflow-tooltip="true"
           :row-style="tableRowStyle"
-        >
+          :row-class-name="tableRowClassName">
+          >
           <zm-table-column :label="t('monitor.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
@@ -96,8 +93,7 @@
               <dict-tag
                 v-if="scope.row.type === 'organization'"
                 :type="DICT_TYPE.ORG_CERT"
-                :value="scope.row.classify"
-              />
+                :value="scope.row.classify" />
               <dict-tag v-else :type="DICT_TYPE.PERSON_CERT" :value="scope.row.classify" />
             </template>
           </zm-table-column>
@@ -132,8 +128,7 @@
             align="center"
             fixed="right"
             min-width="180px"
-            action
-          >
+            action>
             <template #default="scope">
               <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
               <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
@@ -141,8 +136,7 @@
                 link
                 type="success"
                 v-if="scope.row.certPic"
-                @click="handleViewImage(scope.row.certPic)"
-              >
+                @click="handleViewImage(scope.row.certPic)">
                 查看证书
               </el-button>
             </template>
@@ -154,8 +148,7 @@
           :total="total"
           v-model:page="queryParams.pageNo"
           v-model:limit="queryParams.pageSize"
-          @pagination="getList"
-        />
+          @pagination="getList" />
       </ContentWrap>
 
       <ContentWrap style="margin-top: -5px">
@@ -164,6 +157,17 @@
             <Bell />
           </template>
         </el-alert>
+
+        <el-alert
+          title="证书60天橙色预警"
+          type="warning"
+          show-icon
+          :closable="false"
+          style="margin-top: 5px">
+          <template #icon>
+            <Bell />
+          </template>
+        </el-alert>
       </ContentWrap>
     </el-col>
   </el-row>
@@ -174,21 +178,18 @@
     v-model="dialogVisible"
     width="600px"
     destroy-on-close
-    @close="closeDialog"
-  >
+    @close="closeDialog">
     <el-form
       ref="formRef"
       :model="formData"
       :rules="formRules"
       label-width="120px"
-      v-loading="formLoading"
-    >
+      v-loading="formLoading">
       <el-form-item label="证书类型" prop="type">
         <el-select
           v-model="formData.type"
           placeholder="请选择证书类型"
-          @change="formData.classify = ''"
-        >
+          @change="formData.classify = ''">
           <el-option label="个人证书" value="personal" />
           <el-option label="组织证书" value="organization" />
           <el-option label="其他" value="other" />
@@ -201,22 +202,19 @@
           v-if="formData.type === 'personal'"
           v-model="formData.classify"
           placeholder="证书类别"
-          clearable
-        >
+          clearable>
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.PERSON_CERT)"
             :key="dict.value"
             :label="dict.label"
-            :value="dict.value"
-          />
+            :value="dict.value" />
         </el-select>
         <el-select v-else v-model="formData.classify" placeholder="证书类别" clearable>
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.ORG_CERT)"
             :key="dict.value"
             :label="dict.label"
-            :value="dict.value"
-          />
+            :value="dict.value" />
         </el-select>
       </el-form-item>
 
@@ -234,8 +232,7 @@
           node-key="id"
           filterable
           placeholder="请选择所在部门"
-          @change="handleDeptChange"
-        />
+          @change="handleDeptChange" />
       </el-form-item>
 
       <el-form-item label="所属人" prop="userName">
@@ -256,8 +253,7 @@
           type="date"
           value-format="x"
           placeholder="请选择颁发时间"
-          style="width: 100%"
-        />
+          style="width: 100%" />
       </el-form-item>
 
       <el-form-item label="有效期" prop="certExpire">
@@ -266,8 +262,7 @@
           type="date"
           value-format="x"
           placeholder="请选择有效期"
-          style="width: 100%"
-        />
+          style="width: 100%" />
       </el-form-item>
 
       <el-form-item label="到期前提醒" prop="noticeBefore">
@@ -276,8 +271,7 @@
           :min="0"
           :max="365"
           placeholder="请输入提前多少天提醒"
-          style="width: 100%"
-        />
+          style="width: 100%" />
       </el-form-item>
 
       <el-form-item label="备注" prop="remark">
@@ -286,8 +280,7 @@
           v-model="formData.remark"
           :rows="2"
           placeholder="请输入备注"
-          style="width: 100%"
-        />
+          style="width: 100%" />
       </el-form-item>
 
       <el-form-item label="证书图片" prop="certPic">
@@ -305,15 +298,13 @@
   <el-dialog :title="imageDialogTitle" v-model="imageDialogVisible" width="800px" center>
     <!-- <img :src="imagePreviewUrl" alt="证书图片" style="max-width: 100%; max-height: 80vh" /> -->
     <div
-      style="display: flex; justify-content: center; align-items: center; flex-direction: column"
-    >
+      style="display: flex; justify-content: center; align-items: center; flex-direction: column">
       <img
         v-for="url in imagePreviewUrl"
         :src="url"
         :key="url"
         alt="证书图片"
-        style="max-width: 100%"
-      />
+        style="max-width: 100%" />
     </div>
   </el-dialog>
 </template>
@@ -568,9 +559,22 @@ 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 submitForm = async () => {
   if (!formRef.value) return
@@ -654,23 +658,48 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-::deep(.el-tree--highlight-current) {
+:deep(.el-tree--highlight-current) {
   height: 200px !important;
 }
-::deep(.el-transfer-panel__body) {
+:deep(.el-transfer-panel__body) {
   height: 700px !important;
 }
-.image-preview {
-  margin-top: 10px;
-  display: flex;
-  justify-content: center;
+
+/* 过期行的红色背景 - 基础状态 */
+:deep(.el-table__body tr.expired-row > td.el-table__cell) {
+  background-color: #ffe6e6 !important;
 }
 
-::deep(.el-table__body tr.expired-row) {
+/* 过期行 - 鼠标悬浮状态 */
+: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:hover td) {
+: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>

src/views/pms/qhse/index.vue

@@ -52,7 +52,7 @@
         <zm-table
           :loading="loading"
           :data="list"
-          height="calc(78vh - 150px)"
+          height="calc(72.5vh - 150px)"
           :show-overflow-tooltip="true"
           :row-style="tableRowStyle"
           :row-class-name="tableRowClassName">
@@ -63,6 +63,7 @@
           </zm-table-column>
           <zm-table-column label="名称" align="center" prop="measureName" fixed="left" />
           <zm-table-column label="编码" align="center" prop="measureCode" fixed="left" />
+          <zm-table-column label="部门名称" align="center" prop="deptName" />
           <zm-table-column label="计量单位" align="center" prop="measureUnit" />
 
           <zm-table-column label="责任人" align="center" prop="dutyPerson" />
@@ -119,6 +120,17 @@
             <Bell />
           </template>
         </el-alert>
+
+        <el-alert
+          title="台账90天橙色预警"
+          type="warning"
+          show-icon
+          :closable="false"
+          style="margin-top: 5px">
+          <template #icon>
+            <Bell />
+          </template>
+        </el-alert>
       </ContentWrap>
     </el-col>
   </el-row>
@@ -403,6 +415,9 @@ const tableRowStyle = ({ row }) => {
   if (row.expired) {
     return { backgroundColor: '#ffe6e6' }
   }
+  if (row.alertWarn) {
+    return { backgroundColor: '#e19f1a' }
+  }
   return {}
 }
 
@@ -410,6 +425,9 @@ const tableRowClassName = ({ row }) => {
   if (row.expired) {
     return 'expired-row'
   }
+  if (row.alertWarn) {
+    return 'alert-warn-row'
+  }
   return ''
 }
 
@@ -782,16 +800,6 @@ onMounted(async () => {
   background-color: #ffcccc !important;
 }
 
-/* 过期行 - 选中状态 */
-:deep(.el-table__body tr.expired-row.current-row > td.el-table__cell) {
-  background-color: #ffb3b3 !important;
-}
-
-/* 过期行 - 悬浮且选中状态 */
-:deep(.el-table__body tr.expired-row.current-row:hover > td.el-table__cell) {
-  background-color: #ff9999 !important;
-}
-
 /* 确保斑马纹不影响过期行 */
 :deep(.el-table__body tr.expired-row.el-table__row--striped > td.el-table__cell) {
   background-color: #ffe6e6 !important;
@@ -800,4 +808,23 @@ onMounted(async () => {
 :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>