Tabsmessage.vue

<!--
 * @Author: zuolingling zuolingling@jsnangao.com
 * @Date: 2023-08-17 15:37:50
 * @LastEditors: zuolingling zuolingling@jsnangao.com
 * @LastEditTime: 2023-08-18 11:29:29
 * @FilePath: \vue3portal\src\pages\layouts\components\Tabsmessage.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="home messages swh">
        <div class="tabs">
            <el-radio-group v-model="switchvalue" size="small" @change="handlchange">
                <el-radio-button label="1">
                    告警信息&nbsp;&nbsp;
                    <DigitalTransform :value="alarmnum" dislocation :interval="500"></DigitalTransform>
                </el-radio-button>
                <el-radio-button label="2">
                    业务信息&nbsp;&nbsp;
                    <DigitalTransform :value="msgnum" dislocation :interval="500"></DigitalTransform>
                </el-radio-button>
            </el-radio-group>
        </div>
        <div class="scrolltabs scrollbar">
            <div class="colflex" style="gap:10px" v-if="switchvalue == '1' && alarmData?.length">
                <div v-for="it in alarmData" class="itemmsg">
                    <div class="itemt oneText" :key="it.id">
                        <span>【{{ it.deviceName }}】</span>
                        <span :title="it.type">{{ it.type }}</span>
                    </div>
                    <div class="itemb rowflex">
                        <div style="margin-right: 12px;">
                            <el-tag size="small" :type="types[it.severityCode]?.type" class="mx-1" effect="dark">
                                {{ types[it.severityCode]?.name }}
                            </el-tag>
                        </div>
                        <div class="time">
                            {{ it.alarmTime }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="colflex" style="gap:10px" v-if="switchvalue == '2' && msgData?.length">
                <div v-for="it in msgData" class="itemmsg">
                    <div class="itemt oneText" :key="it.id">
                        <span>【{{ it.eventTypeName }}】</span>
                        <span :title="it.messageContent">{{ it.messageContent }}</span>
                    </div>
                    <div class="itemb rowflex">
                        <div class="time">
                            {{ it.sendTime }}
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script setup>
const types = {
    MAJOR: {
        name: "重要",
        type: "warning"
    },
    WARNING: {
        name: "普通",
        type: "info"
    },
    CRITICAL: {
        name: "紧急",
        type: "danger"
    }
}
import { postFetch } from "@/api/doFetch";
const switchvalue = ref('1'),
    alarmnum = ref(0),
    msgnum = ref(0);
const state = reactive({
    alarmData: [],
    msgData: []
});
const handlchange = (e) => {
    switchvalue.value = e;
}

onMounted(() => {
    getData("1");
    getData("2");
});
const { alarmData, msgData } = toRefs(state);

function getData(type) {
    postFetch({ url: "/message/userMessageList", params: { type } }).then(res => {
        if (res.code == "0000") {
            let data = res?.data?.page ?? {};
            if (type == "1") {
                alarmnum.value = data?.total;
                alarmData.value = data?.records ?? [];
            } else {
                msgnum.value = data?.total;
                msgData.value = data?.records ?? [];
            }


        }
    })
}

watch(() => switchvalue.value, (newValue, oldValue) => {
    alarmData.value = [];
    msgData.value = [];
    getData(newValue);
})
</script>

<style lang="less" scoped>
.messages {
    position: relative;

    .tabs {
        position: absolute;
        top: -33px;
        left: -1px;
    }

    .scrolltabs {
        width: 100%;
        height: calc(100% - 32px);
        padding: 12px;
        padding-top: 0;
        margin-top: 32px;
        overflow: hidden;
        overflow-y: auto;

    }

    .itemt {}

    .itemb {
        padding: 3px 8px;

        .time {
            color: rgb(151, 151, 151);
            font-size: 12px;
        }
    }
}
</style>