td_official/src/views/demo/components/gaojing.vue

<template>
    <el-card shadow="never" style="border-radius: 10px;">
        <div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: right;">
            <span style="margin-right: 5px;color: rgba(113, 128, 150, 1);font-size: 14px;">
                查看全部告警信息
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8"
                viewBox="0 0 8 8" fill="none">
                <path
                    d="M5.94575 4.15722C5.94975 4.14947 5.95624 4.14298 5.95975 4.13497C6.0285 3.99197 6.00599 3.81697 5.88425 3.70197L3.1245 1.09172C2.97399 0.949466 2.73676 0.956216 2.59425 1.10648C2.45199 1.25698 2.4585 1.49422 2.60901 1.63673L5.08526 3.97922L2.61875 6.35647C2.46975 6.50021 2.46525 6.73746 2.60901 6.88672C2.6825 6.96321 2.78076 7.00148 2.87901 7.00148C2.97276 7.00148 3.06651 6.96648 3.13926 6.89648L5.87401 4.26073C5.87927 4.25547 5.88125 4.24823 5.88651 4.24274C5.89052 4.23899 5.89476 4.23623 5.89875 4.23224C5.92 4.20997 5.93124 4.18272 5.94575 4.15722Z"
                    fill="#718096">
                </path>
            </svg>
        </div>
        <div class="notice">
            <div class="item">
                <div class="icon">
                    <img src="/assets/demo/zgjxx.png" alt="">
                </div>
                <div class="content">
                    <p>总告警信息</p>
                    <p style="color: rgba(42, 130, 228, 1);">1,921条</p>
                </div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="/assets/demo/ycl.png" alt="">
                </div>
                <div class="content">
                    <p>已处理</p>
                    <p style="color:rgba(0, 184, 122, 1);">500条</p>
                </div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="/assets/demo/zzcl.png" alt="">
                </div>
                <div class="content">
                    <p>正在处理</p>
                    <p style="color: rgba(255, 141, 26, 1);">200条</p>
                </div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="/assets/demo/wcl.png" alt="">
                </div>
                <div class="content">
                    <p>未处理</p>
                    <p style="color: rgba(227, 39, 39, 1);">1,221</p>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="list">
                <div class="item waring">
                    <div class="left">
                        <p class="title">
                            逆变器温度过高
                        </p>
                        <p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
                    </div>
                    <div class="right">
                        <div class="time">
                            10分钟前
                        </div>
                        <el-text type="warning" size="small">正在处理</el-text>
                    </div>
                </div>
                <div class="item danger">
                    <div class="left">
                        <p class="title">
                            通信中断
                        </p>
                        <p class="text">INV-2023-003 与监控系统通信中断</p>
                    </div>
                    <div class="right">
                        <div class="time">
                            20分钟前
                        </div>
                        <el-text type="primary" size="small">查看详情</el-text>
                    </div>
                </div>
                <div class="item danger">
                    <div class="left">
                        <p class="title">
                            通信中断
                        </p>
                        <p class="text">INV-2023-003 与监控系统通信中断</p>
                    </div>
                    <div class="right">
                        <div class="time">
                            1小时前
                        </div>
                        <el-text type="primary" size="small">查看详情</el-text>
                    </div>
                </div>
                <div class="item grey">
                    <div class="left">
                        <p class="title">
                            逆变器温度过高
                        </p>
                        <p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
                    </div>
                    <div class="right">
                        <div class="time">
                            2小时前
                        </div>
                        <!-- <el-text type="primary" size="small">查看详情</el-text> -->
                        <el-button type="info" size="small" disabled>已处理</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>
<style scoped lang="scss">
.notice {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(32, 32, 32, 0.05);
    padding-bottom: 20px;

    .item {
        display: flex;
    }

    p {
        padding: 0;
        margin: 0;
    }

    .icon {
        width: 50px;
        height: 50px;
        margin-right: 10px;

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    .content p:nth-child(2) {
        font-size: 14px;
        margin-top: 5px;
    }
}

.content {
    .item {
        border-radius: 10px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .text {
            color: rgba(125, 133, 146, 1);
            font-size: 12px;
        }

        .title {
            font-size: 16px;
        }

        .right {
            font-size: 12px;
            color: rgba(125, 133, 146, 1);

            .time {
                margin-bottom: 5px;
            }
        }
    }

    .waring {
        background-color: #FFFCE6;
        border: 1px solid #FFF0E1;

        .title {
            color: #FFA408;
        }
    }

    .danger {
        background-color: #FFE9E5;
        border: 1px solid #FFEFEB;

        .title {
            color: rgba(255, 87, 51, 1);
        }
    }

    .grey {
        background-color: #F3F3F3;
        border: 1px solid #FCFCFC;

        .right {
            text-align: right;
        }

        .title {
            color: rgba(102, 102, 102, 1);
        }
    }
}
</style>
<script setup></script>