Преглед изворни кода

feat: 优化日报列表告警提示折叠展示

- 将瑞恒、瑞鹰钻井、瑞鹰修井日报列表底部告警提示改为默认折叠
- 去除告警折叠区域默认边框,压缩内边距和内容间距
- 调整告警提示标题字号、字重和左侧间距,提升展示效果
Zimo пре 5 часа
родитељ
комит
2d6561ae3c

+ 43 - 13
src/views/pms/iotrhdailyreport/index.vue

@@ -259,6 +259,8 @@ async function handleExport() {
 
 const unfilledDialogRef = ref()
 
+const alarmCollapse = ref<string[]>([])
+
 const openUnfilledDialog = () => {
   if (!query.value.createTime || query.value.createTime.length === 0) {
     message.warning('请先选择创建时间范围')
@@ -399,19 +401,25 @@ const openUnfilledDialog = () => {
       is-index
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange" />
-    <div class="p-2 bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col gap-2">
-      <el-alert
-        class="h-8!"
-        title="运行时效=当日注气量/产能&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过120%红色预警"
-        type="error"
-        show-icon
-        :closable="false" />
-      <el-alert
-        class="h-8!"
-        title="气电比计算结果大于15橙色预警"
-        type="warning"
-        show-icon
-        :closable="false" />
+    <div class="p-1 bg-white dark:bg-[#1d1e1f] rounded-lg shadow">
+      <el-collapse v-model="alarmCollapse" class="alarm-collapse">
+        <el-collapse-item title="告警提示" name="alarm">
+          <div class="flex flex-col gap-2">
+            <el-alert
+              class="h-8!"
+              title="运行时效=当日注气量/产能&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过120%红色预警"
+              type="error"
+              show-icon
+              :closable="false" />
+            <el-alert
+              class="h-8!"
+              title="气电比计算结果大于15橙色预警"
+              type="warning"
+              show-icon
+              :closable="false" />
+          </div>
+        </el-collapse-item>
+      </el-collapse>
     </div>
   </div>
 
@@ -428,4 +436,26 @@ const openUnfilledDialog = () => {
     height: 42px;
   }
 }
+
+:deep(.alarm-collapse) {
+  border-top: 0;
+  border-bottom: 0;
+
+  .el-collapse-item__header {
+    height: 32px;
+    padding-left: 12px;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 32px;
+    border-bottom: 0;
+  }
+
+  .el-collapse-item__wrap {
+    border-bottom: 0;
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 4px;
+  }
+}
 </style>

+ 43 - 13
src/views/pms/iotrydailyreport/index.vue

@@ -152,6 +152,8 @@ const visible = ref(false)
 
 const formRef = ref()
 
+const alarmCollapse = ref<string[]>([])
+
 function handleOpenForm(id: number, type: 'edit' | 'readonly') {
   if (formRef.value) {
     formRef.value.handleOpenForm(id, type)
@@ -255,19 +257,25 @@ function handleOpenForm(id: number, type: 'edit' | 'readonly') {
       </template>
     </ry-table>
 
-    <div class="p-2 bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col gap-2">
-      <el-alert
-        class="h-8!"
-        title="当日油耗大于9000升&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红色预警"
-        type="error"
-        show-icon
-        :closable="false" />
-      <el-alert
-        class="h-8!"
-        title="进尺工作时间+其它生产时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警"
-        type="warning"
-        show-icon
-        :closable="false" />
+    <div class="p-1 bg-white dark:bg-[#1d1e1f] rounded-lg shadow">
+      <el-collapse v-model="alarmCollapse" class="alarm-collapse">
+        <el-collapse-item title="告警提示" name="alarm">
+          <div class="flex flex-col gap-2">
+            <el-alert
+              class="h-8!"
+              title="当日油耗大于9000升&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红色预警"
+              type="error"
+              show-icon
+              :closable="false" />
+            <el-alert
+              class="h-8!"
+              title="进尺工作时间+其它生产时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警"
+              type="warning"
+              show-icon
+              :closable="false" />
+          </div>
+        </el-collapse-item>
+      </el-collapse>
     </div>
   </div>
 
@@ -283,4 +291,26 @@ function handleOpenForm(id: number, type: 'edit' | 'readonly') {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+:deep(.alarm-collapse) {
+  border-top: 0;
+  border-bottom: 0;
+
+  .el-collapse-item__header {
+    height: 32px;
+    padding-left: 12px;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 32px;
+    border-bottom: 0;
+  }
+
+  .el-collapse-item__wrap {
+    border-bottom: 0;
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 4px;
+  }
+}
 </style>

+ 49 - 19
src/views/pms/iotrydailyreport/xjindex.vue

@@ -151,6 +151,8 @@ const visible = ref(false)
 
 const formRef = ref()
 
+const alarmCollapse = ref<string[]>([])
+
 function handleOpenForm(id: number, type: 'edit' | 'readonly') {
   if (formRef.value) {
     formRef.value.handleOpenForm(id, type)
@@ -255,25 +257,31 @@ function handleOpenForm(id: number, type: 'edit' | 'readonly') {
       </template>
     </ry-xj-table>
 
-    <div class="p-2 bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col gap-2">
-      <el-alert
-        class="h-8!"
-        title="运行时效=生产时间/额定生产时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过100%红色预警"
-        type="error"
-        show-icon
-        :closable="false" />
-      <el-alert
-        class="h-8!"
-        title="生产时间+非生产时间=额定生产时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警"
-        type="warning"
-        show-icon
-        :closable="false" />
-      <el-alert
-        class="h-8!"
-        title="当日油耗大于3500升&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蓝色预警"
-        type="primary"
-        show-icon
-        :closable="false" />
+    <div class="p-1 bg-white dark:bg-[#1d1e1f] rounded-lg shadow">
+      <el-collapse v-model="alarmCollapse" class="alarm-collapse">
+        <el-collapse-item title="告警提示" name="alarm">
+          <div class="flex flex-col gap-2">
+            <el-alert
+              class="h-8!"
+              title="运行时效=生产时间/额定生产时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过100%红色预警"
+              type="error"
+              show-icon
+              :closable="false" />
+            <el-alert
+              class="h-8!"
+              title="生产时间+非生产时间=额定生产时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警"
+              type="warning"
+              show-icon
+              :closable="false" />
+            <el-alert
+              class="h-8!"
+              title="当日油耗大于3500升&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蓝色预警"
+              type="primary"
+              show-icon
+              :closable="false" />
+          </div>
+        </el-collapse-item>
+      </el-collapse>
     </div>
   </div>
 
@@ -289,4 +297,26 @@ function handleOpenForm(id: number, type: 'edit' | 'readonly') {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+:deep(.alarm-collapse) {
+  border-top: 0;
+  border-bottom: 0;
+
+  .el-collapse-item__header {
+    height: 32px;
+    padding-left: 12px;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 32px;
+    border-bottom: 0;
+  }
+
+  .el-collapse-item__wrap {
+    border-bottom: 0;
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 4px;
+  }
+}
 </style>