From 2cd5839cc3957b9443453409fc84402e11bbdfdf Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 12 Apr 2025 17:30:23 +0800
Subject: [PATCH] feat: 整理样式代码：table表格，分页，查看按钮
---
src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue | 138 ++++++----------------------------------------
1 files changed, 18 insertions(+), 120 deletions(-)
diff --git a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
index 4a8ebf3..5732667 100644
--- a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
+++ b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
@@ -59,11 +59,11 @@
</div>
</el-form>
<!-- 表格 -->
- <div class="tabledata">
+ <div class="tabledata ztzf-table">
<el-table
:data="taskDetailData"
:row-class-name="tableRowClassName"
- :row-style="{ height: '58px', fontSize: '14px', 'text-align': 'center' }"
+ :row-style="{ height: '54px', fontSize: '14px', 'text-align': 'center' }"
:header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
>
<el-table-column label="序号" type="index" width="60">
@@ -71,8 +71,7 @@
{{ ($index + 1).toString().padStart(2, '0') }}
</template>
</el-table-column>
- <!-- 事件状态:0 =待处理，1=待分拨，2=待处理，3=处理中，4=已完成 5=已完结 -->
- <el-table-column show-overflow-tooltip prop="job_info_num" label="任务编号" />
+ <el-table-column show-overflow-tooltip prop="job_info_num" label="任务编号" />
<el-table-column prop="name" show-overflow-tooltip label="任务名称" />
<el-table-column prop="device_names" show-overflow-tooltip label="所属机巢" />
<el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" />
@@ -90,7 +89,8 @@
? 'cancel '
: 'fail '
"
- >{{
+ >
+ {{
scope.row.status == 1
? '待执行'
: scope.row.status == 2
@@ -100,22 +100,22 @@
: scope.row.status == 4
? '取消'
: '失败'
- }}</span
- >
+ }}
+ </span>
</template>
</el-table-column>
- <el-table-column prop="industry_type_str" label="任务类型" />
- <el-table-column prop="begin_time" label="任务时间" width="150"/>
+ <el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" />
+ <el-table-column prop="begin_time" label="任务时间" width="150" />
<el-table-column prop="event_number" label="关联事件">
<template #default="scope">
<span>{{ scope.row.event_number ? scope.row.event_number : '/' }}</span>
</template>
</el-table-column>
- <el-table-column label="操作" width="80"> <div class="view">查看</div></el-table-column>
+ <el-table-column label="操作" width="80"><div class="ztzf-view ">查看</div></el-table-column>
</el-table>
</div>
<!-- 分页 -->
- <div class="pagination">
+ <div class="pagination ztzf-pagination">
<el-pagination
v-model:current-page="pageParams.current"
v-model:page-size="pageParams.size"
@@ -286,16 +286,6 @@
}
:deep() {
- .el-table .el-table__cell {
- padding: 0 !important;
- }
- .el-table thead {
- border-bottom: 1px solid;
- border: 1px solid;
- border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
- color: var(--el-table-header-text-color);
- background: #102441;
- }
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
height: var(--el-input-height, var(--el-component-size));
@@ -336,62 +326,19 @@
}
}
:deep(.el-pagination) {
-display: flex;
-justify-content: center;
-margin-top: 10px;
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
}
:deep(.el-pagination button) {
background: center center no-repeat none !important;
color: #8eb8ea !important;
}
-:deep(.el-pager li) {
- background: none !important;
- color: #8eb8ea !important;
-}
-:deep(.el-pager li.is-active) {
- background: #021022 !important;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #1479ef;
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__goto) {
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__classifier) {
- color: #c7e1ff !important;
-}
-:deep(.el-pager .el-input__wrapper) {
- background: #021022 !important;
- color: #c7e1ff !important;
- border: 1px solid #1479ef !important;
- z-index: 1;
-}
-.el-table {
- color: #fff;
- --el-table-border-color: var(--el-border-color-lighter);
- --el-table-border: none !important;
- --el-table-text-color: #fff !important;
- --el-table-header-text-color: #fff !important;
- --el-table-row-hover-bg-color: none !important;
- --el-table-current-row-bg-color: none !important;
- --el-table-header-bg-color: none !important;
- --el-table-fixed-box-shadow: none !important;
- --el-table-bg-color: none !important;
- --el-table-tr-bg-color: none !important;
- --el-table-expanded-cell-bg-color: none !important;
- --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
- --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
-}
-.el-table__header {
- width: 0 !important;
-}
+
.el-table__body {
border-collapse: collapse;
}
-:deep(.el-table .el-table__cell) {
- padding: 0 !important;
- text-align: center !important;
-}
+
.my-header {
display: inline-block;
vertical-align: middle;
@@ -418,18 +365,7 @@
height: 640px;
overflow-y: scroll !important;
}
-.view {
- width: 53px;
- height: 27px;
- background: #001f4e;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #51a8ff;
- font-size: 14px;
- color: #ffffff;
- text-align: center;
- line-height: 27px;
- cursor: pointer;
-}
+
// 任务状态颜色
.pending {
color: #e36913;
@@ -499,45 +435,7 @@
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
}
- .el-table__inner-wrapper:before {
- height: 0 !important;
- }
- .el-table .warning-row {
- --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
- }
- .el-table .warning-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
-
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 50%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
- .el-table .success-row {
- --el-table-tr-bg-color: #0b1d38;
- }
- .el-table .success-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
-
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 79%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
+
.el-scrollbar__thumb {
background: #13c6ff !important;
}
--
Gitblit v1.9.3