nezha/resource/template/theme-server-status/home.html

{{define "theme-server-status/home"}}
{{template "theme-server-status/header" .}}
{{template "theme-server-status/menu" .}}   
<!--  showGroup true -->
<template v-if="showGroup">
    <div class="container-fluid table-responsive content" v-for="group in nodesTag">
        {{template "theme-server-status/home-group-true" .}} 
    </div>
</template>
<!--  showGroup false -->
<template v-else>
    <div class="container-fluid table-responsive content">
        {{template "theme-server-status/home-group-false" .}}
    </div>
</template>
<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="mapChartTitle">
                    <i class="bi bi-geo-alt"></i>
                    <span>{{tr "ServersOnWorldMap"}}</span>
                </h4>
                <i class="bi bi-x xclose" data-dismiss="modal" aria-label="Close"></i>
            </div>
            <div class="modal-body">
                <div id="mapChart"></div>
            </div>
        </div>
    </div>
</div>
{{template "theme-server-status/footer" .}}
<script>
    new Vue({
        el: '#app',
        delimiters: ['@#', '#@'],
        data: {
            page: 'index',
            defaultTemplate: {{.Conf.Site.Theme}},
            templates: {{.Themes}},
            cache: [],
            servers: [],
            nodesTag: [],
            nodesNoTag: [],
            additional: {},
            chartDataList: [],
            ws: null,
            language: {{.Conf.Language}},
            countryMap: {},
            countryServer: [],
            countryNameMap: {},
            countryMapChartData: [],
            countryMapGeoFile: localStorage.getItem("countryMapGeoFile") ? localStorage.getItem("countryMapGeoFile") : 'nezha.world.geo.json',
            sensorList: [
                'TC0D', //CPU Die 温度，代表 CPU 内部的温度
                'TC0H', //CPU Heatsink 温度，代表 CPU 散热器的温度
                'TC0P', //CPU Proximity 温度，代表 CPU 附近的温度
                'k10temp', //AMD K10（Phenom、Athlon、Sempron 等）系列处理器的温度监测
                'k10temp_tctl', //AMD K10 (Athlon II、Phenom II 等）系列处理器的温度监测
                'coretemp_package_id_0', //整个封装处理器温度
                'cpu_thermal_zone', //全志
                'cpu-thermal', //树莓派(博通)
                'soc_thermal', //新瑞芯微
                'cpu_thermal', //老瑞芯微
                'ACPI\\ThermalZone\\TZ0__0', //Windows
                'ACPI\\ThermalZone\\CPUZ_0', //Windows
                'ACPI\\ThermalZone\\TZ00_0', //Windows
                'ACPI\\ThermalZone\\TZ001_0', //Windows
                'ACPI\\ThermalZone\\THM0_0' //Windows
            ]
        },
        mixins: [mixinsVue],
        created() {
            this.servers = JSON.parse('{{.Servers}}').servers;
            this.additional = this.initAdditional(this.servers);
            if(this.showGroup) {
                this.nodesTag = this.groupingData(this.handleNodes(this.servers),"Tag");
                this.nodesTag.forEach(group => {
                    group.data.forEach(item => {
                        const additionalData = this.additional[item.ID];
                        if (additionalData) {
                            item.additional = additionalData; // 添加 additional 属性
                        }
                    });
                });
            } else {
                this.nodesNoTag = this.handleNodes(this.servers);
                this.nodesNoTag.forEach(item => {
                    const additionalData = this.additional[item.ID];
                    if (additionalData) {
                        item.additional = additionalData; // 添加 additional 属性
                    }
                });
            }
            this.initCountryMap().then(countryMap => {
                this.countryMap = countryMap;
                this.countryNameMap = this.initCountryNameMap();
                this.countryServer = this.initCountryServer();
                this.countryMapChartData = this.initCountryMapChartData();
            });
        },
        mounted() {
            // 初始化时建立WebSocket连接
            this.connect();
            // 监听页面可见性变化
            document.addEventListener("visibilitychange", () => {
                if (document.visibilityState === "visible") {
                    setTimeout(() => {
                        if (document.hasFocus()) {
                            this.connect();
                        }
                    }, 200);
                }
            });
        },
        methods: {
            initAdditional(servers) {
                let nodes = {};
                servers?.forEach(server => {
                    if (server.PublicNote) {
                        const remainingFormat = this.getRemainingFormat(server.live, server.PublicNote);
                        const remainingDays = this.getRemainingDays(this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"), server.PublicNote);
                        const remainingPercent = this.getRemainingPercent(
                            this.getNoteElementValue(server.PublicNote, "billingDataMod", "startDate"),
                            this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"),
                            server.PublicNote
                        );
                        const priceAmount = this.getNoteElementValue(server.PublicNote, "billingDataMod", "amount");
                        const priceCycle = this.getNoteElementValue(server.PublicNote, "billingDataMod", "cycle");

                        // 初始化节点
                        nodes[server.ID] = {
                            "remaining": {},
                            "price": {}
                        };

                        if (remainingFormat) {
                            nodes[server.ID].remaining.format = remainingFormat;
                        }

                        if (remainingDays) {
                            nodes[server.ID].remaining.days = remainingDays;
                        }

                        if (remainingPercent) {
                            nodes[server.ID].remaining.percent = this.toFixed2(100 - remainingPercent);
                        }

                        if (priceAmount) {
                            nodes[server.ID].price.amount = priceAmount;
                        }

                        if (priceCycle && priceAmount) {
                            nodes[server.ID].price.cycle = priceCycle;
                        }
                    }
                });
                return nodes;
            },
            initCountryMap() {
                return fetch(this.staticUrl + '/maps/nezha.countrymap.json')
                    .then(response => response.json())
                    .then(data => {
                        return data;
                    })
            },
            initCountryNameMap(){
                const result = {};
                for (const item in this.countryMap) {
                    result[this.countryMap[item].en] = this.language=='zh-CN' ? this.countryMap[item].zh : this.countryMap[item].en;
                }
                return result;
            },
            initCountryServer() {
                let count = {};
                let result = [];
                let exist = {};
                this.servers.forEach(item => {
                    if (item.Host.CountryCode) {
                        if(this.countryMapGeoFile == 'nezha.world.geo.json' || this.countryMapGeoFile == 'nezha.world.antarctica.geo.json') {
                            if(item.Host.CountryCode.toLowerCase() == 'tw' || item.Host.CountryCode.toLowerCase() == 'hk' || item.Host.CountryCode.toLowerCase() == 'mo') item.Host.CountryCode = 'cn';
                        }
                        if (!exist[item.Host.CountryCode]) {
                            exist[item.Host.CountryCode] = true;
                            count[item.Host.CountryCode] = 1;
                            const obj = {
                                'countryCode': item.Host.CountryCode,
                                'count': count[item.Host.CountryCode]
                            };
                            result.push(obj);
                        } else {
                            count[item.Host.CountryCode]++;
                            result.find(obj => obj.countryCode === item.Host.CountryCode).count = count[item.Host.CountryCode];
                        }
                    }
                });
                return result;
            },
            initCountryMapChartData(){
                let result = [];
                this.countryServer.forEach(item => {
                    var obj = {
                        "name": this.language=='zh-CN' ? this.countryMap[item.countryCode].zh : this.countryMap[item.countryCode].en,
                        "value": item.count
                    }
                    result.push(obj);
                });
                return result;
            },
            showMapChart(){
                // 处理异常
                if( this.countryMapChartData.length == 0 ) {
                    console.log('init countryMapChartData not complete');
                    return;
                }
                const unit = this.language=='zh-CN' ? '台' : 'servers';
                const width = window.innerWidth;
                const height = 0.95 * window.innerHeight;
                const backgroundColor = this.theme == "dark" ? '' : '';
                const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
                const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
                const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff"; 
                const fontSize = this.isMobile ? 10 : 12;
                const fontColor = this.theme == "dark" ? "#000000" : "#000000"; 
                const showLoadingMaskColor = this.theme == "dark" ? 'rgba(28, 29, 38, 1)' : 'rgba(249, 249, 249, 1)';
                const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
                const showLoadingColor = inRangeColor;    
                const chartContainer = document.getElementById('mapChart');
                const mapChart = echarts.init(chartContainer, '', { // init图表
                    renderer: 'canvas',
                    useDirtyRect: false,
                    width: width,
                    height: height,
                });
                mapChart.showLoading({
                    text: 'loading',
                    textColor: showLoadingTextColor,
                    color: showLoadingColor,
                    maskColor: showLoadingMaskColor,
                    zlevel: 2
                });
                fetch(this.staticUrl + '/maps/' + this.countryMapGeoFile)
                    .then(response => response.json())
                    .then(worldMap => {
                        echarts.registerMap('nezha-world-map', worldMap);
                        const option = {
                            title: {
                                show: false,
                            },
                            backgroundColor: backgroundColor,
                            grid: {
                                top: 0,
                                left: 10,
                                right: 10
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {
                                    if (params.data && params.data.value > 0) {
                                        return params.name + ' ' + params.data.value + ' ' + unit;
                                    } else {
                                        return '';
                                    }
                                },
                                backgroundColor: tooltipBackgroundColor,
                                borderColor: tooltipBorderColor,
                                padding: [4,10],
                                textStyle: {
                                    fontSize: fontSize,
                                    color: fontColor
                                }
                            },
                            visualMap: {
                                show: false,
                                min: 0,
                                max: 1000,
                                calculable: false,
                                inRange: {
                                    color: inRangeColor
                                }
                            },
                            series: [
                                {
                                    type: 'map',
                                    map: 'nezha-world-map',
                                    roam: true,
                                    label: {
                                        show: false,
                                        fontSize: 8
                                    },
                                    data: this.countryMapChartData,
                                    nameMap: this.countryNameMap,
                                }
                            ]
                        };
                        setTimeout(() => {
                            mapChart.hideLoading();
                            mapChart.setOption(option);
                        }, 1000);
                    });
            },
            isWindowsPlatform(str) {
                return str.includes('Windows')
            },
            getPlatformName(str){
                if (str.toLowerCase().includes('opensuse')) {
                    return 'openSUSE';
                }
                return str;
            },
            getFontLogoClass(str) {
                if (["almalinux",
                        "alpine",
                        "aosc",
                        "apple",
                        "archlinux",
                        "archlabs",
                        "artix",
                        "budgie",
                        "centos",
                        "coreos",
                        "debian",
                        "deepin",
                        "devuan",
                        "docker",
                        "elementary",
                        "fedora",
                        "ferris",
                        "flathub",
                        "freebsd",
                        "gentoo",
                        "gnu-guix",
                        "illumos",
                        "kali-linux",
                        "linuxmint",
                        "mageia",
                        "mandriva",
                        "manjaro",
                        "nixos",
                        "openbsd",
                        "opensuse",
                        "pop-os",
                        "raspberry-pi",
                        "redhat",
                        "rocky-linux",
                        "sabayon",
                        "slackware",
                        "snappy",
                        "solus",
                        "tux",
                        "ubuntu",
                        "void",
                        "zorin"].indexOf(str)
                    > -1) {
                    return str;
                }
                if (str == 'darwin') {
                    return 'apple';
                }
                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
                    return 'tux';
                }
                if (str == 'amazon') {
                    return 'redhat';
                }
                if (str == 'arch') {
                    return 'archlinux';
                }
                if (str.toLowerCase().includes('opensuse')) {
                    return 'opensuse';
                }
                return '';
            },
            secondToDate(s) {
                const d = Math.floor(s / 3600 / 24);
                if (d > 0) {
                    return d + ' {{tr "Day"}}'
                }
                const h = Math.floor(s / 3600 % 24);
                const m = Math.floor(s / 60 % 60);
                const second = Math.floor(s % 60);
                return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + second).slice(-2);
            },
            formatTimestamp(t) {
                return new Date(t * 1000).toLocaleString()
            },
            formatByteSize(bs) {
                const x = this.readableBytes(bs)
                return x !== "NaN undefined" ? x : '0B'
            },
            formatPercent(live, used, total) {
                //const percent = live ? (this.toFixed2(used / total * 100) || 0) : 0
                const percent = (this.toFixed2(used / total * 100) || 0)
                return this.formatPercents(live,percent)
            },
            formatPercents(live,percent) {
                //if(!live) { percent = 0; }
                if (isNaN(percent)) {
                    percent = 0;
                }
                if (percent <= 0) {
                    percent = 0;
                }
                if (percent >= 100) {
                    percent = 100;
                }
                if (!this.cache[percent]) {
                    this.cache[percent] = {
                        class: 'progress-bar progress-bar-success',
                        style: `width: ${parseInt(percent)+1}%`,
                        percent,
                    }
                    if (percent < 80) {
                        this.cache[percent].class = 'progress-bar progress-bar-success'
                    } else if (percent < 90) {
                        this.cache[percent].class = 'progress-bar progress-bar-warning'
                    } else {
                        this.cache[percent].class = 'progress-bar progress-bar-danger'
                    }
                }
                return this.cache[percent]
            },
            readableBytes(bytes) {
                if (!bytes) {
                    return '0B'
                }
                const i = Math.floor(Math.log(bytes) / Math.log(1024)),
                    sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
                return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
            },
            connect() {
                // 如果已经存在 WebSocket 连接并且处于开启状态，则不重复建立连接
                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                    console.log('Closing old WebSocket connection...');
                    this.ws.close();
                }
                const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
                this.ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');

                this.ws.onopen = function () {
                    console.log("Connection open ...")
                }
                this.ws.onmessage = (evt) => {
                    let jsonData = evt.data
                    const data = JSON.parse(jsonData)
                    for (let i = 0; i < data.servers?.length; i++) {
                        const ns = data.servers[i];
                        if (!ns.Host) {
                            data.servers[i].live = false
                        } else {
                            const lastActive = new Date(ns.LastActive).getTime()
                            data.servers[i].live = data.now - lastActive <= 10 * 1000;
                        }
                    }
                    if(this.showGroup) {
                        this.nodesTag = this.groupingData(this.handleNodes(data.servers),"Tag");
                        this.nodesTag.forEach(group => {
                            group.data.forEach(item => {
                                const additionalData = this.additional[item.ID];
                                if (additionalData) {
                                    item.additional = additionalData; // 添加 additional 属性
                                }
                            });
                        });
                    } else {
                        this.nodesNoTag = this.handleNodes(data.servers);
                        this.nodesNoTag.forEach(item => {
                            const additionalData = this.additional[item.ID];
                            if (additionalData) {
                                item.additional = additionalData; // 添加 additional 属性
                            }
                        });
                    }
                }
                this.ws.onclose = () => {
                    setTimeout(() => {
                        this.connect();
                    }, 5000);
                };
                this.ws.onerror = () => {
                    this.ws.close()
                }
            },
            handleNodes(servers) {
                let nodes = []
                servers?.forEach(server => {
                    let platform = server.Host.Platform;
                    if (this.isWindowsPlatform(platform)) {
                        platform = "windows"
                    }else if (platform === "immortalwrt") {
                        platform = "openwrt"
                    }
                    let node = {
                        ID: server.ID,
                        name: server.Name,
                        os: platform,
                        location: server.Host.CountryCode,
                        stateuptime: server.State.Uptime,
                        uptime: this.secondToDate(server.State.Uptime),
                        load: this.toFixed2(server.State.Load1),
                        network: this.getNetworkSpeed(server.State.NetInSpeed, server.State.NetOutSpeed),
                        traffic: this.formatByteSize(server.State.NetInTransfer) + ' | ' + this.formatByteSize(server.State.NetOutTransfer),
                        cpu: this.formatPercents(server.live, this.toFixed2(server.State.CPU)),
                        memory: this.formatPercent(server.live, server.State.MemUsed, server.Host.MemTotal),
                        hdd: this.formatPercent(server.live, server.State.DiskUsed, server.Host.DiskTotal),
                        online: server.live,
                        state: server.State,
                        host: server.Host,
                        lastActive: server.LastActive,
                        Tag: server.Tag,
                    }
                    nodes.push(node)
                })
                return nodes;
            },
            getNetworkSpeed(netInSpeed, netOutSpeed) {
                return this.formatByteSize(netInSpeed) + ' | ' + this.formatByteSize(netOutSpeed)
            },
            toggleDetailedTemp(id){
                const tempDom = document.getElementById(`temp-${id}`); 
                const tempDetailShow = tempDom.getAttribute('temp-detail-show');
                const tempMain = document.getElementById(`temp-main-${id}`); 
                const tempDetail = document.getElementById(`temp-detail-${id}`); 
                if (tempDetailShow == 0){
                    tempMain.style.display = 'none';
                    tempDetail.style.display = 'inline';
                    tempDom.setAttribute('temp-detail-show', 1);
                } else {
                    tempMain.style.display = 'inline';
                    tempDetail.style.display = 'none';
                    tempDom.setAttribute('temp-detail-show', 0);
                }
            },
            getTemperature(temperatureList, sensorList) {
                // 将 sensorList 中的所有项转换为小写
                const lowerCaseSensorList = sensorList.map(sensor => sensor.toLowerCase());

                // 合并过滤逻辑：过滤出 Temperature 不为 0 且 Name 在 sensorList 中的元素（忽略大小写）
                const filtered = temperatureList.filter(item => item.Temperature !== 0 && lowerCaseSensorList.includes(item.Name.toLowerCase()));

                // 如果有匹配的元素，则计算这些元素的 Temperature 的最大值
                if (filtered.length > 0) {
                    return filtered.reduce((max, current) => {
                        return current.Temperature > max ? current.Temperature : max;
                    }, filtered[0].Temperature);
                }

                // 如果没有匹配的元素，则计算 temperatureList 中所有 Temperature 不为 0 的元素的最大值
                const nonZeroTemps = temperatureList.filter(item => item.Temperature !== 0);
                if (nonZeroTemps.length > 0) {
                    return nonZeroTemps.reduce((max, current) => {
                        return current.Temperature > max ? current.Temperature : max;
                    }, nonZeroTemps[0].Temperature);
                }

                // 如果所有元素的 Temperature 都为 0，则返回一个默认值 0
                return 0;
            },
            showCharts(id,changeChartboxShow=true) {
                const chartContainer = document.getElementById(`chart-${id}`);
                if(changeChartboxShow){
                    const chartboxShow = chartContainer.getAttribute('chartbox-show');
                    chartContainer.setAttribute('chartbox-show', chartboxShow === '0' ? '1' : '0');
                    const collapseContainer = document.getElementById(`r${id}`);
                    const isAriaExpandedFalse = collapseContainer.getAttribute('aria-expanded') === 'false';
                    if (!isAriaExpandedFalse) return;
                }
                // 发起数据请求
                const url = `/api/v1/monitor/${id}`;
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.result) { // 数据请求成功，更新数据并渲染图表
                            this.chartDataList[id] = data.result;
                            this.$nextTick(() => {
                                this.renderCharts(id);
                            });
                        } else {
                            console.log('this server (id:'+ id + ') has no monitor.');
                        }
                    })
                    .catch(error => {
                        console.log('Error fetching data:', error);
                    });
            },
            renderCharts(id, reload = false) {
                if (!this.chartDataList[id]) return;
                const chartData = this.chartDataList[id];
                const chartContainer = document.getElementById(`chart-${id}`);
                if (reload) {
                    const existingChart = echarts.getInstanceByDom(chartContainer);
                    if (existingChart) existingChart.dispose();
                    const chartboxShow = chartContainer.getAttribute('chartbox-show');
                    if ( chartboxShow === '0' ) return; 
                }
                const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
                const fontSize = this.isMobile ? 10 : 14;
                const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 25 : 36);
                const gridRight = this.isMobile ? 5 : 20;
                const legendLeft = this.isMobile ? 'center' : 'center';
                const legendTop = this.isMobile ? 5 : 5;
                const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
                const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
                const chartTheme = this.theme == "dark" ? "dark" : "default";
                const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
                const backgroundColor = theme == "dark" ? '' : '';
                const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
                const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
                const lineStyleWidth = this.isMobile ? 1 : 2;
                const splitLineWidth = this.isMobile ? 0.5 : 1;
                const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
                const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
                const chart = echarts.init(chartContainer, chartTheme, { // init图表
                    renderer: 'canvas',
                    useDirtyRect: false,
                    width: 'auto',
                    height: 300
                });
                let legendData = [];
                let seriesData = [];
                chartData.forEach((item,key)=> {
                    let loss = 0;
                    let totalLossRate = 0;
                    let legendName = '';
                    let data = { main: [], markLine: []};
                    item.avg_delay.forEach((avgDelay, index) => {
                        const threshold = 0.9 * MaxTCPPingValue; // 定义阀值,用于判断是否丢包
                        // 定义丢包 1. avgDelay==0  2. avgDelay>=MaxTCPPingValue 3. avgDelay>=threshold
                        if(avgDelay == 0 || avgDelay >= MaxTCPPingValue){ //绝对丢包
                            loss += 1;
                            const lossrate = 100 * loss / (index + 1);
                            if(lossrate != 100) {
                                data['markLine'].push({
                                    xAxis: item.created_at[index],
                                    label: { show: false },
                                    emphasis: { disabled: true },
                                    lineStyle: { type: "solid" }
                                });
                            }
                        } else if (avgDelay >= threshold && avgDelay < MaxTCPPingValue){ // 相对丢包
                            loss += 1;
                            const lossrate = 100 * loss / (index + 1);
                            if(lossrate != 100) {
                                data['main'].push(
                                    [item.created_at[index], avgDelay, lossrate]
                                );
                                data['markLine'].push({
                                    xAxis: item.created_at[index],
                                    label: { show: false },
                                    emphasis: { disabled: true },
                                    lineStyle: { type: "solid" }
                                });
                            }
                        } else { // 未丢包
                            const lossrate = 100 * loss / (index + 1);
                            data['main'].push(
                                [item.created_at[index], avgDelay, lossrate]
                            );
                        }
                    });
                    totalLossRate = ((loss / item.created_at.length) * 100).toFixed(1);
                    legendName = `${item.monitor_name} ${totalLossRate}%`;
                    legendData.push(legendName);
                    seriesData.push(
                        {
                            name: legendName,
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            connectNulls: true,
                            legendHoverLink: false,
                            emphasis: {
                                disabled: true
                            },
                            lineStyle: {
                                width: lineStyleWidth
                            },  
                            data: data['main'],
                            markLine: {
                                symbol: "none",
                                symbolSize :0,
                                data: data['markLine'],
                                itemStyle: { 
                                    opacity: markLineItemStyleOpacity
                                },
                                lineStyle:{
                                    width: markLineLineStyleWidth
                                }
                            }
                        }
                    );
                });
                const maxLegendsPerRowMobile = localStorage.getItem("maxLegendsPerRowMobile") ? localStorage.getItem("maxLegendsPerRowMobile") : 3;
                const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
                const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);            
                const height = 300 + autoIncrement;
                const gridTop = 40 + autoIncrement;
                const legendIcon = this.isMobile ? 'rect' : ""; 
                const itemWidth = this.isMobile ? 10 : 25;
                const itemHeight = this.isMobile ? 10 : 14;
                chart.resize({
                    width: 'auto',
                    height: height
                });
                const option = {
                    color: this.colors,
                    backgroundColor: backgroundColor,
                    textStyle: {
                        fontSize: fontSize,
                        color: fontColor
                    },
                    grid: {
                        top: gridTop,
                        left: gridLeft,
                        right: gridRight,
                    },
                    title: {
                        show: false,
                    },
                    series: seriesData.flat(),
                    xAxis: {
                        type: 'time',
                        axisLabel: {
                            textStyle: {
                                fontSize: fontSize
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                fontSize: fontSize
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                width: splitLineWidth
                            }
                        }
                    },
                    legend: {
                        data: legendData,
                        show: true,
                        icon: legendIcon,
                        textStyle: {
                            fontSize: fontSize,
                            color: fontColor
                        },
                        top: legendTop,
                        bottom: 0,
                        left: legendLeft,
                        padding: legendPadding,
                        itemWidth: itemWidth,
                        itemHeight: itemHeight,
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: tooltipBackgroundColor,
                        borderColor: tooltipBorderColor,
                        textStyle: {
                            fontSize: fontSize,
                            color: fontColor
                        },
                        formatter: function (params) {
                            let tooltipContent = '';
                            const formattedTime = new Date(params[0].value[0]).toLocaleString(); 
                            tooltipContent += `<span style="line-height:2em">${formattedTime}</span><br>`;
                            params.forEach(param => {
                                const formattedTime = new Date(param.value[0]).toLocaleString();
                                if (!param.seriesName.includes('stack')) {
                                    const name = param.seriesName.replace(/\s\d+(\.\d+)?%$/, '');
                                    tooltipContent += `<span style="line-height:2em">${param.marker} ${name} ${param.value[2].toFixed(1)}% ${param.value[1].toFixed(2)}</span><br>`;
                                }
                            });
                            return tooltipContent;
                        }
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            start: 0,
                            end: 100
                        }
                    ]
                };
                chart.setOption(option);
            },
            reloadCharts() {
                this.servers.forEach(node => {
                    const id = node.ID;
                    const chartData = this.chartDataList[id];
                    if (chartData) {
                        this.renderCharts(id,true);
                    }
                });
            },
            getNoteElementValue(string, elementName, childElementName) {
                let obj;

                try {
                    obj = JSON.parse(string);
                } catch (e) {
                    return null; 
                }

                if (!elementName) return null;

                if (childElementName) {
                    return obj[elementName] && childElementName in obj[elementName] ? obj[elementName][childElementName] : null;
                } else {
                    return elementName in obj ? obj[elementName] : null;
                }
            },
            getBillingCycle(billingCycle) { 
                // 统一转换为小写进行比较
                const cycle = billingCycle.toLowerCase();

                switch (cycle) {
                    case '月':
                    case 'month':
                    case 'monthly':
                    case 'm':
                        return "M";
                    case '季':
                    case 'quarterly':
                    case 'q':
                        return "Q";                        
                    case '半':
                    case '半年':
                    case 'half':
                    case 'semi-annually':
                    case 'h':
                        return "H";                        
                    case '年':
                    case 'year':
                    case 'annually':
                    case 'y':
                        return "Y";
                    default:
                        return null;
                }                
            },
            getAdjustTimezone(reference, target) {
                // 获取时区
                const referenceTimezoneOffset = reference.getTimezoneOffset(); 
                const targetTimezoneOffset = target.getTimezoneOffset();

                // 计算时区差异
                const timezoneDifference = (referenceTimezoneOffset - targetTimezoneOffset) * 60 * 1000;

                // 将 target 日期调整到 reference 时区
                return new Date(target.getTime() + timezoneDifference);
            },
            getAutoRenewalEndDate(endDate, billingCycle) {
                const expiration = new Date(endDate);
                const current = this.getAdjustTimezone(new Date(endDate), new Date());

                // 如果 expiration 无效，返回 null 并记录日志
                if (isNaN(expiration.getTime())) {
                    console.log("getAutoRenewalEndDate: Invalid expiration format");
                }

                const result = {
                    flag: 1,  // 1表示需要更新
                    check: 0, // 判断逻辑标记
                    count: 0  // 周期累计计数
                };

                // 如果当前时间还没到到期时间，直接返回到期时间
                if (current < expiration) {
                    result.flag = 0;
                    result.date = expiration;
                    return result;
                }

                let nextExpiration = new Date(expiration); // 初始化为原到期时间
                let newExpirationMonth = expiration.getMonth(); // 获取expiration初始月份

                switch (billingCycle.toUpperCase()) {
                    case 'M': // 月度
                        nextExpiration.setFullYear(current.getFullYear());

                        const monthCheck = current < new Date(current.getFullYear(), current.getMonth(), expiration.getDate());

                        // 检查当前月是否在有效期内
                        if (monthCheck) {
                            nextExpiration.setMonth(current.getMonth());
                            result.check = 1;
                        } else {
                            nextExpiration.setMonth(current.getMonth() + 1);
                            result.check = 2;
                        }
                        break;

                    case 'Q': // 季度
                        nextExpiration.setFullYear(current.getFullYear());

                        // 每次增加 3 个月，直到新的月份大于当前月份
                        while (newExpirationMonth < current.getMonth()) {
                            newExpirationMonth += 3;
                            result.count += 1;
                        }

                        // nextExpiration设置获取到的新月份
                        nextExpiration.setMonth(newExpirationMonth);

                        const quarterlyCheck = current < nextExpiration;

                        // 检查新月份是否在有效期内
                        if (quarterlyCheck) {
                            result.check = 3;
                        } else {
                            nextExpiration.setMonth(current.getMonth() + 3);
                            result.check = 4;
                            result.count += 1;
                        }
                        break;

                    case 'H': // 半年
                        nextExpiration.setFullYear(current.getFullYear());
                
                        // 每次增加 6 个月，直到新的月份大于当前月份
                        while (newExpirationMonth < current.getMonth()) {
                            newExpirationMonth += 6;
                            result.count += 1;
                        }

                        // nextExpiration设置获取到的新月份
                        nextExpiration.setMonth(newExpirationMonth);

                        const halfCheck = current < nextExpiration;

                        // 检查新月份是否在有效期内
                        if (halfCheck) {
                            result.check = 5;
                        } else {
                            nextExpiration.setMonth(current.getMonth() + 6);
                            result.check = 6;
                            result.count += 1;
                        }    
                        break;

                    case 'Y': // 年度
                        const yearCheck = current < new Date(current.getFullYear(), expiration.getMonth(), expiration.getDate());

                        // 如果当前时间比这一年有效期早，则到期为本年
                        if (yearCheck) {
                            nextExpiration.setFullYear(current.getFullYear());
                            result.check = 7;
                        } else {
                            // 否则推到下一年
                            nextExpiration.setFullYear(current.getFullYear() + 1);
                            result.check = 8;
                        }
                        break;

                    default:
                        throw new Error("Invalid billing cycle");
                }

                // 保持原到期时间的时分秒
                nextExpiration.setHours(expiration.getHours());
                nextExpiration.setMinutes(expiration.getMinutes());
                nextExpiration.setSeconds(expiration.getSeconds());

                result.date = nextExpiration;

                return result;
            },
            getAutoRenewalStartDate(flag, startDate, check, count) {
                //1.判断什么时候改变 2.如何改变
                const start = new Date(startDate);
                const current = this.getAdjustTimezone(start, new Date());

                // 检查 startDate 格式是否有效，若无效返回 null
                if (isNaN(start.getTime())) {
                    console.log("getAutoRenewalStartDate: Invalid startDate format");
                }

                // 如果 flag 为 0，直接返回开始日期
                if (flag === 0) {
                    return start;
                } 

                // 初始化新的开始日期
                const newStart = new Date(start);

                switch (check) {
                    case 1: // 处理月份：设置为上个月
                        newStart.setFullYear(current.getFullYear());
                        newStart.setMonth(current.getMonth() - 1);
                        break;

                    case 2: // 处理月份：设置为当前月
                        newStart.setFullYear(current.getFullYear());
                        newStart.setMonth(current.getMonth());
                        break;

                    case 3:
                    case 4: // 处理季度
                        newStart.setFullYear(current.getFullYear());
                        newStart.setMonth(start.getMonth() + 3 * count);
                        break;

                    case 5:
                    case 6: // 处理半年
                        newStart.setFullYear(current.getFullYear());
                        newStart.setMonth(start.getMonth() + 6 * count);
                        break;

                    case 7: // 处理年份：设置为上一年
                        newStart.setFullYear(current.getFullYear() - 1);
                        break;

                    case 8: // 处理年份：保持当前年份
                        newStart.setFullYear(current.getFullYear());
                        break;

                    default: // 默认处理：直接返回
                        return;
                }

                return newStart;
            },
            getRemainingFormat(online, note) {
                if (!note) return null;
                const startDate = this.getNoteElementValue(note, "billingDataMod", "startDate");
                const endDate = this.getNoteElementValue(note, "billingDataMod", "endDate");

                // 检查 startDate 和 endDate 是否有效
                if (!startDate || !endDate || typeof startDate !== 'string' || typeof endDate !== 'string') {
                    return null; // 如果无效，返回 null 或其他错误处理逻辑
                }

                // 处理特殊时间格式
                if (startDate.includes('0000-00-00') || endDate.includes("0000-00-00")) {
                    return this.formatPercents(online, this.toFixed2(100));
                }

                // 检查 startDate 和 endDate 是否为合法的Date
                if (isNaN(new Date(startDate).getTime()) || isNaN(new Date(endDate).getTime())) {
                    return {
                        "class": "",
                        "style": "width: 0%",
                        "percent": "0"
                    }
                }

                //处理特殊时间格式
                const percent = this.getRemainingPercent(startDate, endDate, note);
                return this.formatPercents(online, this.toFixed2(percent));                    
                
            },
            getRemainingDays(endDate, note) {
                // 检查 endDate 是否有效
                if (!endDate || typeof endDate !== 'string') {
                    return null;
                }

                // 处理特殊时间格式
                if (endDate.includes("0000-00-00")) {
                    return "lifetime";
                }

                // 检查 startDate 和 endDate 是否为合法的Date
                if (isNaN(new Date(endDate).getTime())) {
                    return "NaN";
                }
                
                // 获取当前时间，并调整时区
                const currentTime = this.getAdjustTimezone(new Date(endDate), new Date());

                // 获取计费周期和自动续订日期
                const billingCycle = this.getNoteElementValue(note, "billingDataMod", "cycle") || "月";
                const autoEndDate = this.getAutoRenewalEndDate(
                    this.getNoteElementValue(note, "billingDataMod", "endDate"),
                    this.getBillingCycle(billingCycle)
                );

                // 检查 autoRenewal 状态
                const autoRenewal = this.getNoteElementValue(note, "billingDataMod", "autoRenewal") == 1;

                // 确定到期时间
                const end = autoRenewal ? autoEndDate.date : new Date(endDate);

                // 计算剩余天数
                const timeDiff = end - currentTime;
                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

                return daysDiff;
            },
            getRemainingPercent(startDate, endDate, note) {
                // 检查 startDate 和 endDate 是否为有效字符串并处理特殊格式
                if (!startDate || !endDate || typeof startDate !== 'string' || typeof endDate !== 'string') {
                    return null;
                }

                // 处理特殊时间格式
                if (startDate.includes("0000-00-00") || endDate.includes("0000-00-00")) {
                    return 100;
                }

                // 检查 startDate 和 endDate 是否为合法的Date
                if (isNaN(new Date(startDate).getTime()) || isNaN(new Date(endDate).getTime())) {
                    return "NaN";
                }
                
                // 获取当前时间并调整时区
                const now = this.getAdjustTimezone(new Date(endDate), new Date());

                // 获取计费周期
                const billingCycle = this.getNoteElementValue(note, "billingDataMod", "cycle") || "月";

                // 自动获取结束日期
                const autoEndDate = this.getAutoRenewalEndDate(
                    this.getNoteElementValue(note, "billingDataMod", "endDate"),
                    this.getBillingCycle(billingCycle)
                );

                // 自动获取开始日期
                const autoStartDate = autoEndDate.flag == 1
                    ? this.getAutoRenewalStartDate(autoEndDate.flag, this.getNoteElementValue(note, "billingDataMod", "startDate"), autoEndDate.check, autoEndDate.count)
                    : new Date(startDate);
                
                // 计算开始和结束时间
                const autoRenewal = this.getNoteElementValue(note, "billingDataMod", "autoRenewal") == 1;
                const start = autoRenewal ? autoStartDate : new Date(startDate);
                const end = autoRenewal ? autoEndDate.date : new Date(endDate);

                // 计算剩余百分比
                if (now < start) {
                    return 0.01; //避免当条件判断!percent被过滤
                }
                if (now >= end) {
                    return 100;
                }

                const totalDuration = end - start;
                const elapsedDuration = now - start;
                const percent = (elapsedDuration / totalDuration) * 100;

                // 确保百分比在 0-100 之间
                return Math.min(Math.max(percent, 0), 100);
            }
        }
    })
</script>
{{end}}