feat: 整理样式代码：table表格，分页，查看按钮

张含笑

2025-04-12 2cd5839cc3957b9443453409fc84402e11bbdfdf

feat: 整理样式代码：table表格，分页，查看按钮

 src/styles/element-ui.scss

@@ -60,6 +60,138 @@
.avue--detail .el-form-item {
  background-color: #fafafa;
}
// 查看按钮
.ztzf-view {
  width: 53px;
    height: 27px;
    background: #001f4e !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #51a8ff !important;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
}
// table表格
.ztzf-table {
  .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-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;
  }
  .el-table .el-table__cell {
    padding: 0 !important;
    text-align: center !important;
  }
  
  .el-table thead{
    border-bottom: 1px solid !important;
    border: 1px solid !important;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1 !important;
    color: var(--el-table-header-text-color) !important;
    background: #102441 !important;
  }
}
  // 分页
.ztzf-pagination {

  .el-pagination {
    display: flex !important;
    justify-content: center !important;
}
.el-pagination button{
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
.el-pager li{
    background: none !important;
    color: #8eb8ea !important;
}
.el-pager li.is-active {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
.el-pagination__goto {
    color: #c7e1ff !important;
}
.el-pagination__classifier {
    color: #c7e1ff !important;
}
.el-pager .el-input__wrapper {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
.el-input__wrapper {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
.el-input__inner {
    color: #fff !important;
}
}


.ztzf-date-picker{

 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;
    }

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue

@@ -6,7 +6,7 @@
                >件
            </p>
        </div>
        <div class="deviceevent-table">
        <div class="deviceevent-table ztzf-table">
            <el-table :data="list" :row-class-name="tableRowClassName"
            style="width: 100%;"
            :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
@@ -19,8 +19,8 @@
            <el-table-column prop="id" label="事件编号" />
            <el-table-column prop="event_name" label="事件名称" />
            <el-table-column prop="event_name" label="所属单位 " />
            <el-table-column prop="media_type" label="事件内容" />
            <el-table-column prop="ai_types" label="关联算法" />
            <el-table-column show-overflow-tooltip prop="media_type" label="事件内容" />
            <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
            <el-table-column prop="status" label="事件状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
@@ -33,7 +33,9 @@
            </el-table-column>

            <el-table-column label="操作" width="80">
                <div class="view">查看</div>
                <template #default="scope">
                <div class="ztzf-view" @click="distribution(scope.row)">查看</div>
                </template>
                <!-- <template #default="scope" >
                    <el-button type="success" link @click="examine(scope.row)">审核</el-button>
                    <el-button type="primary" link @click="distribution(scope.row)">查看</el-button>
@@ -42,6 +44,7 @@
        </el-table>
        </div>
        <el-pagination
        class="ztzf-pagination"
            background
            :page-sizes="[10, 20, 30, 50]"
            v-model:current-page="sizeParams.current"
@@ -83,6 +86,9 @@
        list.value = resData.records
        total.value = resData.total
    })
	
	
	
}
const pageChange = val => {
    sizeParams.value.current = val
@@ -100,50 +106,7 @@
    getList()
})
</script>
<style lang="scss">
.deviceevent-container {
    // 表格
    .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;
    }
}
</style>
<style scoped lang="scss">

// 标题
@@ -171,42 +134,7 @@
.deviceevent-table {
padding: 0 17px;
}
.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;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
}
:deep(.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;
}

// 分页
:deep(.el-pagination) {
    display: flex;
@@ -217,51 +145,10 @@
    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;
}
:deep(.el-input__wrapper) {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
:deep(.el-input__inner) {
    color: #fff !important;
}

:deep(.el-tag){
background: none !important;
border:none !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;
}

</style>

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue

@@ -6,7 +6,7 @@
                >次
            </p>
        </div>
        <div class="devicelob-table">
        <div class="devicelob-table ztzf-table">
            <el-table
                :data="list"
                :row-class-name="tableRowClassName"
@@ -20,21 +20,21 @@
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="任务编号" />
                <el-table-column prop="name" label="任务名称" />
                <el-table-column prop="industry_type_str" label="任务类型" />
                <el-table-column prop="ai_type_str" label="关联算法" />
                <el-table-column prop="event_number" label="事件工单" />
                <el-table-column show-overflow-tooltip prop="name" label="任务名称" />
                <el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" />
                <el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" />
                <el-table-column show-overflow-tooltip prop="event_number" label="事件工单" />

                <el-table-column label="操作" width="80">
					
                    <template #default="scope">
                        <div class="view" @click="viewJob(scope.row)">查看</div>
                        <div class="ztzf-view" @click="viewJob(scope.row)">查看</div>
                        <!-- <el-button type="warning" link @click="viewJob(scope.row)">查看</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
        class="ztzf-pagination"
            background
            :page-sizes="[10, 20, 30, 50]"
            v-model:current-page="sizeParams.current"
@@ -99,52 +99,14 @@
<style lang="scss">
.devicejob-container {
    // 表格
    .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;
    }
	
}
</style>
<style scoped lang="scss">
// 标题
.machineTableDetailsTitle {
    margin: 0 24px;
    // margin-bottom: 16px;
    margin-bottom: 16px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    p {
@@ -166,93 +128,15 @@
.devicelob-table {
    padding: 0 17px;
}
.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;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
}
:deep(.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;
}


// 分页
:deep(.el-pagination) {
    display: flex;
    justify-content: center;

}
: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;
}
:deep(.el-input__wrapper) {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
:deep(.el-input__inner) {
    color: #fff !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;
}
</style>