<template>
<div class="bottom-img">
    <div class="button-container contetn_center-bottom">

        <button class="button" @mouseover="hover = true" @mouseleave="hover = false">
            数据大屏
        </button>
        <button class="button" @mouseover="hover = true" @mouseleave="hover = false">
            实时监控
        </button>
        <button class="button" @mouseover="hover = true" @mouseleave="hover = false">
            告警中心
        </button>

        <button class="button" @mouseover="hover = true" @mouseleave="hover = false">
            报表管理
        </button>

    </div>
</div>
</template>

<script>
import {
    getServer
} from "@/api/monitor/server";
export default {
    data() {
        return {
            timer: null,
            config: {},
            data: [

            ],
            // 服务器信息
            server: {
                jvm: {
                    name: "",
                    version: "",
                    startTime: "",
                    runTime: "",
                    used: "",
                    total: 100
                },
                sys: {
                    computerName: "",
                    osName: "",
                    computerIp: "",
                    osArch: ""
                },
                cpu: {
                    cpuNum: 1
                },
                mem: {
                    total: 2
                }
            },
            configCpu: {
                data: [50],
                shape: 'roundRect',
                formatter: '{value}%',
                waveHeight: 10
            },
            configMemery: {
                data: [50],
                shape: 'roundRect',
                formatter: '{value}%',
                waveHeight: 10
            },
            configDisk: {
                data: [50],
                shape: 'roundRect',
                formatter: '{value}%',
                waveHeight: 10
            }
        };
    },
    props: {},
    mounted() {
        this.getServer();
    },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        /** 查询服务器信息 */
        getServer() {
            getServer().then(response => {
                this.server = response.data;
                this.config = {
                    rowNum: 6,
                    oddRowBGC: '',
                    evenRowBGC: '',
                    columnWidth: [105, 230],
                    data: [
                        ['服务器名：', this.server.sys.computerName],
                        ['服务器IP：', this.server.sys.computerIp],
                        ['操作系统：', this.server.sys.osName],
                        ['系统架构：', this.server.sys.osArch],
                        ['CPU核心：', this.server.cpu.cpuNum],
                        ['系统内存：', this.server.mem.total],
                        ['Java名称：', this.server.jvm.name],
                        ['Java版本：', this.server.jvm.version],
                        ['启动时间：', this.server.jvm.startTime],
                        ['运行时长：', this.server.jvm.runTime],
                        ['运行内存：', this.server.jvm.used],
                        ['JVM总内存：', this.server.jvm.total],
                    ],
                };
                // 计算CPU使用
                let cpu = (this.server.cpu.used + this.server.cpu.sys) / (this.server.cpu.used + this.server.cpu.sys + this.server.cpu.free) * 100;
                this.configCpu = {
                    data: [cpu.toFixed(1), cpu.toFixed(1) - 10],
                    shape: 'roundRect',
                    formatter: '{value}%',
                    waveHeight: 10
                };
                // 计算内存
                let memery = this.server.mem.used / (this.server.mem.used + this.server.mem.free) * 100;
                this.configMemery = {
                    data: [memery.toFixed(1), memery.toFixed(1) - 10],
                    shape: 'roundRect',
                    formatter: '{value}%',
                    waveHeight: 10
                };
                // 计算硬盘
                let disk = Number(this.server.sysFiles[0].used.replace("GB", "")) / (Number(this.server.sysFiles[0].used.replace("GB", "")) + Number(this.server.sysFiles[0].free.replace("GB", ""))) * 100;
                this.configDisk = {
                    data: [disk.toFixed(1), disk.toFixed(1) - 10],
                    shape: 'roundRect',
                    formatter: '{value}%',
                    waveHeight: 10
                };
                // 轮询
                this.switper()
            });
        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getServer();
            };
            this.timer = setInterval(looper, 60000);
        },
    }
}
</script>

<style lang="scss" scoped>
.bottom-img {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
}
.button-container {

    display: flex;
    justify-content: space-between; /* 水平对齐 */
}

.button {
    width: 57px;
    height: 60px;
    background-color: transparent;
    background-image: url('../../../assets/bigScreen/img/底部tab未选择.png');
    background-position: 50% 25%;
    background-size: 100%, 100%; /* 使背景图片完全覆盖按钮，保持比例 */
    background-repeat: no-repeat; /* 背景图片不重复 */

    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: none; /* 去掉边框 */
    color: #76F1FF; /* 默认字体颜色为蓝色 */
    padding: 10px 20px; /* 按钮内边距 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: color 0.3s; /* 颜色变化过渡效果 */
}

.button:hover {
    background-image: url('../../../assets/bigScreen/img/按钮未选中.png');
    height: 50px;
    color: white; /* 鼠标悬停时字体颜色为白色 */
}
</style>
