yenai-plugin/resources/state/state.html

{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" href="{{_res_path}}state/state.css">
{{/block}}
{{block 'main'}}
<div class="box">
    <div class="tb">
        <div class="avatar">
            <img src="{{portrait}}"
                onerror="this.src= '{{_res_path}}state/img/default_avatar.png'; this.onerror = null;">
        </div>

        <div class="header">
            <h1>{{nickname}}</h1>
            <hr noshade>
            <p>{{status}}({{platform}}) | 收{{recv}} | 发{{sent}} | 图片{{screenshot}} | 好友{{friendQuantity}} |
                群{{groupQuantity}}
            </p>
            <p>Yunzai-Bot 已运行 {{runTime}} | 系统运行 {{systime}}</p>
            <p>{{calendar}} | Nodejs {{nodeVersion}} | {{osPlatform}}</p>
        </div>
    </div>

</div>
<div class="box">
    <ul class="info">
        {{each visualData group}}
        <li class="li">
            <div class="cpu">
                <div class="left">
                    <div class="left-circle" {{@group.leftCircle}}>
                    </div>
                </div>
                <div class="right">
                    <div class="right-circle" {{@group.rightCircle}}>
                    </div>
                </div>
                <div class="inner">
                    {{group.inner}}
                </div>
            </div>
            <article>
                <summary>{{group.title}}</summary>
                {{each group.info info}}
                <p>{{info}}</p>
                {{/each}}
            </article>
        </li>
        {{/each}}
    </ul>
</div>

{{if HardDisk}}
<div class="box memory">
    <ul>
        {{each HardDisk}}
        <li class="HardDisk_li">
            <div class="word mount">{{$value.mount}}</div>
            <div class="progress">
                <div class="word">{{$value.used}} / {{$value.size}}</div>
                <div class="current" style="width:{{$value.use}}%;background:{{$value.color}}"></div>
            </div>
            <div class="percentage">{{$value.use}}%</div>
        </li>
        {{/each}}
    </ul>
    {{if fsStats}}
    <div class="speed">
        <p>fsStats</p>
        <p>读 {{fsStats.rx_sec}}/s | 写 {{fsStats.wx_sec}}/s</p>
    </div>
    {{/if}}
</div>
{{/if}}

{{if chartData}}
<div class="box">
    <div id="Chart" style="height: 300px;"></div>
    <script src="{{_res_path}}state/echarts.min.js"></script>
    <script>
        let chartData = JSON.parse('{{@chartData}}')
        echarts.registerTheme('westeros', chartData.echarts_theme)
        const chart = echarts.init(document.getElementById('Chart'), 'westeros', {
            renderer: 'svg'
        })
        const by = (value) => {
            value = value?.value ?? value
            let units = ['B', 'KB', 'MB', 'GB', 'TB'] // 定义单位数组
            let unitIndex = 0
            while (value >= 1024 && unitIndex < units.length - 1) {
                value /= 1024
                unitIndex++
            }
            return value.toFixed(0) + units[unitIndex] // 返回带有动态单位标签的字符串
        }
        let option = {
            animation: false,
            textStyle: {
                fontFamily: `FZB, Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC"`
            },
            title: {
                text: 'Chart'
            },
            legend: {},
            grid: {
                left: '1%',
                right: '1.5%',
                bottom: '0',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'time'
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: by
                    }
                }
            ],
            series: [
                {
                    name: '上行',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.network.upload
                },
                {
                    name: '下行',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.network.download
                },
                {
                    name: '读',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.fsStats.readSpeed
                },
                {
                    name: '写',
                    type: 'line',
                    // areaStyle: {},
                    showSymbol: false,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.fsStats.writeSpeed
                }
            ]
        }
        option.legend.data = option.series
            .filter(item => item.data.length !== 0)
            .map(item => item.name);
        chart.setOption(option)
    </script>
</div>

{{/if}}
{{if otherInfo}}
<div class="box">
    {{each otherInfo}}
    <div class="speed">
        <p>{{$value.first}}</p>
        <p>{{@$value.tail}}</p>
    </div>
    {{/each}}
</div>
{{/if}}

{{if psTest}}
<div class="box">
    {{each psTest}}
    <div class="speed">
        <p>{{$value.first}}</p>
        <p>{{@$value.tail}}</p>
    </div>
    {{/each}}
</div>
{{/if}}

{{@FastFetch}}

{{/block}}