forked from drone/command-center-dashboard

张含笑
2025-04-16 d550ecc06569318d476a284d2aa7c50c6e5eaaae
feat: 调整样式
3 files modified
118 ■■■■■ changed files
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue 94 ●●●● patch | view | raw | blame | history
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue 16 ●●●●● patch | view | raw | blame | history
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue 8 ●●●●● patch | view | raw | blame | history
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
@@ -2,45 +2,48 @@
    <div class="deviceevent-container">
        <div class="machineTableDetailsTitle">
            <p>
                相关事件<span>{{ total }}</span
                >件
                相关事件
                <span>{{ total }}</span>
                件
            </p>
        </div>
        <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' }"
            :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }">
            <el-table-column label="序号" type="index" width="60">
        <div class="deviceevent-table ztzf-table">
            <el-table
                :data="list"
                :row-class-name="tableRowClassName"
                style="width: 100%"
                :row-style="{ height: '35px', fontSize: '14px', 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center', height: '30px', fontSize: '14px' }"
            >
                <el-table-column label="序号" type="index" width="60">
                    <template #default="{ $index }">
                        {{ ($index + 1).toString().padStart(2, '0') }}
                    </template>
                </el-table-column>
            <el-table-column prop="id" label="事件编号" />
            <el-table-column prop="event_name" label="事件名称" />
            <el-table-column prop="create_user" label="所属单位 " />
            <el-table-column show-overflow-tooltip prop="remark" label="事件内容" />
            <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
            <el-table-column prop="status" label="事件状态">
                <template #default="scope">
                    <div class="pending" v-if="scope.row.status === 0">待处理</div>
                    <div class="reviewed" v-if="scope.row.status === 2">待审核</div>
                    <div class="processing" v-if="scope.row.status === 3">处理中</div>
                    <div class="done" v-if="scope.row.status === 4">已完成</div>
                    <div class="ended" v-if="scope.row.status === 5">已完结</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template #default="scope">
                <div class="ztzf-view" @click="distribution(scope.row)">查看</div>
                </template>
            </el-table-column>
        </el-table>
                <el-table-column prop="id" label="事件编号" />
                <el-table-column prop="event_name" label="事件名称" />
                <el-table-column prop="create_user" label="所属单位 " />
                <el-table-column show-overflow-tooltip prop="remark" label="事件内容" />
                <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
                <el-table-column prop="status" label="事件状态">
                    <template #default="scope">
                        <div class="pending" v-if="scope.row.status === 0">待处理</div>
                        <div class="reviewed" v-if="scope.row.status === 2">待审核</div>
                        <div class="processing" v-if="scope.row.status === 3">处理中</div>
                        <div class="done" v-if="scope.row.status === 4">已完成</div>
                        <div class="ended" v-if="scope.row.status === 5">已完结</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <div class="ztzf-view" @click="distribution(scope.row)">查看</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
        class="ztzf-pagination"
            class="ztzf-pagination"
            background
            v-model:current-page="sizeParams.current"
            v-model:page-size="sizeParams.size"
            layout="prev, pager, next, jumper"
@@ -79,11 +82,7 @@
        const resData = res?.data?.data || {}
        list.value = resData.records
        total.value = resData.total
    })
}
const pageChange = val => {
    sizeParams.value.current = val
@@ -103,11 +102,10 @@
</script>
<style scoped lang="scss">
// 标题
.machineTableDetailsTitle {
    margin: 0 24px;
    margin-bottom: 16px;
    margin-bottom: 10px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    p {
@@ -127,38 +125,36 @@
}
// 表格
.deviceevent-table {
padding: 0 17px;
    padding: 0 17px;
}
// 分页
:deep(.el-pagination) {
    display: flex;
    justify-content: center;
}
:deep(.el-pagination button) {
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
// 待处理
.pending{
color: #FF7411;
.pending {
    color: #ff7411;
}
// 待审核
.reviewed{
color: #8CFEA7;
.reviewed {
    color: #8cfea7;
}
// 处理中
.processing{
color: #FFC398;
.processing {
    color: #ffc398;
}
// 已完成
.done{
color: #AFD9FB;
.done {
    color: #afd9fb;
}
// 已完结
.ended{
color: #11C4FF;
.ended {
    color: #11c4ff;
}
</style>
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
@@ -12,8 +12,8 @@
                :data="list"
                :row-class-name="tableRowClassName"
                style="width: 100%"
                :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
                :row-style="{ height: '35px', fontSize: '14px', 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center', height: '30px', fontSize: '14px' }"
            >
                <el-table-column label="序号" type="index" width="60">
                    <template #default="{ $index }">
@@ -100,7 +100,7 @@
// 标题
.machineTableDetailsTitle {
    margin: 0 24px;
    margin-bottom: 16px;
    margin-bottom: 10px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    p {
@@ -121,15 +121,9 @@
// 表格
.devicelob-table {
    padding: 0 17px;
    // height: 280px;
    // overflow: hidden;
    // overflow-y: scroll !important;
}
// :deep(::-webkit-scrollbar) {
//     width: 0;
//     display: none;
//     background: none !important;
// }
// 分页
:deep(.el-pagination) {
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue
@@ -70,12 +70,10 @@
<style lang="scss">
.machineTableDetails {
    width: 1270px;
    height: 856px;
    .el-pagination {
        text-align: left;
        padding: 20px 20px 0 20px;
        padding: 10px 20px 5px 10px;
    }
    .my-header {
        display: inline-block;
@@ -90,7 +88,7 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #ffffff;
    .itemBox {
@@ -115,7 +113,7 @@
    margin: 0 24px;
}
.machineTableDetailsTitle {
    margin-bottom: 16px;
    margin-bottom: 10px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    span {