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

<script>
import ChartsBox from '@/components/ChartsBox/index'

export default {
    components: { ChartsBox },
    data() {
        return {
            config: {
                data: [
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件1',
                        'dev-1',
                        "<span  class='colorGrass'>↑75%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件2',
                        'dev-2',
                        "<span  class='colorRed'>↓33%</span>",
                    ],
                    [
                        "<div class='img-box'><img src='" +
                            require('@/assets/image/pro-view/red.png') +
                            "' class='table-img red-img'><img src='" +
                            require('@/assets/image/pro-view/three.png') +
                            "' class='three-img'></div>",
                        '组件3',
                        'dev-3',
                        "<span  class='colorGrass'>↑100%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件4',
                        'rea-1',
                        "<span  class='colorGrass'>↑94%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件5',
                        'rea-2',
                        "<span  class='colorGrass'>↑95%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                    [
                        "<img src='" +
                            require('@/assets/image/pro-view/blue.png') +
                            "' class='table-img'>",
                        '组件6',
                        'fix-2',
                        "<span  class='colorGrass'>↑63%</span>",
                    ],
                ],
                rowNum: 10, //表格行数
                // headerHeight: 35,
                headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                oddRowBGC: '', //奇数行
                evenRowBGC: '', //偶数行

                columnWidth: [80],
                align: ['center'],
                hoverPause: true,
                waitTime: 2000,
            },
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;

    .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;
}
</style>
