bns_zhgd_screen/src/views/home-foundation-pit/components/right-two-model.vue

<template>
    <div style="height: 100%">
        <ChartsBox :boxTitle="`报警信息`">
            <div class="container" v-if="config.data.length > 0">
                <!-- <div class="feel-box"></div> -->
                <dv-scroll-board class="dv-scr-board" :config="config" />
            </div>

            <div class="container" v-else>
                <EmptyModel />
            </div>
        </ChartsBox>
    </div>
</template>

<script>
import ChartsBox from '@/components/ChartsBox/index'
import EmptyModel from '@/components/EmptyModel/index.vue'
import { getConcreteAlarmListAPI } from '@/api/home-foundation-pit.js'
export default {
    components: { ChartsBox, EmptyModel },

    data() {
        return {
            config: {
                data: [],
                rowNum: 5, //表格行数
                headerHeight: 35,
                headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                oddRowBGC: '', //奇数行
                evenRowBGC: '', //偶数行
                align: ['center'],
                hoverPause: true,
                waitTime: 3000,
            },
        }
    },
    methods: {
        async getConcreteAlarmListData() {
            const { data: res } = await getConcreteAlarmListAPI({
                typeCode: '9000300',
            })
            console.log(
                `%c🔍  深基坑监测 ----> 报警信息(右二) 数据出参 %c`,
                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
                '',
                res,
            )

            if (res.length > 0) {
                console.log('996')

                const newData = res.map((e) => [
                    `<img src="${require('@/assets/image/pro-view/blue.png')}" class="table-img">`,
                    `<span class="colorBlue">${e.remark}</span>`,
                    `<span class="colorBlue">${e.devName}</span>`,
                    `<span class="time-box colorBlue">${e.createTime}</span>`,
                ])

                // 替换整个 config 对象，触发组件更新
                this.config = {
                    ...this.config, // 保留原有配置
                    data: newData, // 更新数据
                }
            }
        },
    },

    created() {
        this.getConcreteAlarmListData()
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 12px;

    .dv-scr-board {
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to bottom right,
            rgba(21, 53, 81, 0.2),
            rgba(6, 30, 66, 0.7)
        );
    }
}

::v-deep .img-box {
    display: flex;
    align-items: center;

    .three-img {
        transform: translateX(10px);
    }
    .red-img {
        transform: translateX(3px);
    }
}
::v-deep .dv-scroll-board .rows .ceil {
    display: flex;
    align-items: center;
    justify-content: center;
}

::v-deep .colorBlue {
    color: #6aaef3 !important;
    font-size: 14px !important;
}

::v-deep.colorRed {
    color: #ff5534;
    font-size: 12px !important;
}

::v-deep .time-box {
    font-family: 'DS-TITle';
    display: block;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

::v-deep .dv-scroll-board .rows .ceil {
    width: auto !important;
    min-width: 80px; /* 最小宽度 */
}
</style>