Jony/assets/js/joe.census.js

document.addEventListener('DOMContentLoaded', () => {
	{
		/* 转换字节 */
		const bytesToSize = bytes => {
			const k = 1024,
				sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
				i = Math.floor(Math.log(bytes) / Math.log(k));
			return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
		};

		const categories = [];
		const upSeries = [];
		const downSeries = [];

		const flowDom = document.querySelector('#flow');
		const workDom = document.querySelector('#work');
		const flowChart = flowDom && echarts.init(flowDom);
		const workChart = workDom && echarts.init(workDom);
		if (flowDom && workDom) initChart();

		function initChart() {
			$.ajax({
				url: Joe.BASE_API,
				type: 'POST',
				dataType: 'json',
				data: {
					routeType: 'server_status'
				},
				success(res) {
					{
						$('.joe_census__server-item .count .up').html(`总发送：${bytesToSize(res.upTotal)}`);
						$('.joe_census__server-item .count .down').html(`总接收：${bytesToSize(res.downTotal)}`);
						const stamp = new Date();
						const hours = String(stamp.getHours()).padStart(2, 0);
						const minutes = String(stamp.getMinutes()).padStart(2, 0);
						const seconds = String(stamp.getSeconds()).padStart(2, 0);
						const time = `${hours}:${minutes}:${seconds}`;
						categories.push(time);
						upSeries.push(res.up);
						downSeries.push(res.down);
						if (categories.length > 5) categories.shift();
						if (upSeries.length > 5) upSeries.shift();
						if (downSeries.length > 5) downSeries.shift();
						flowChart.setOption({
							title: {
								subtext: '单位 KB/s'
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '0',
								containLabel: true
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							xAxis: {
								axisTick: {
									show: false
								},
								type: 'category',
								boundaryGap: false,
								data: categories
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									type: 'line',
									name: '上行',
									smooth: true,
									showSymbol: false,
									itemStyle: {
										normal: {
											color: '#f39494',
											areaStyle: {
												color: '#f39494'
											},
											lineStyle: {
												width: 2,
												color: '#f39494'
											}
										}
									},
									stack: '总量',
									data: upSeries
								},
								{
									type: 'line',
									name: '下行',
									smooth: true,
									showSymbol: false,
									itemStyle: {
										normal: {
											color: '#9dd3e8',
											areaStyle: {
												color: '#9dd3e8'
											},
											lineStyle: {
												width: 2,
												color: '#9dd3e8'
											}
										}
									},
									stack: '总量',
									data: downSeries
								}
							]
						});
					}
					{
						/* CPU占用 */
						const cpuUse = res.cpu[0];
						/* 内存占用 */
						const memoryRealUse = Math.round((res.memory.memRealUsed / res.memory.memTotal) * 1000) / 10;
						/* 内存缓冲 */
						const memoryCacheUse = Math.round((res.memory.memCached / res.memory.memTotal) * 1000) / 10;
						/* 系统缓冲 */
						const memoryBufferUse = Math.round((res.memory.memBuffers / res.memory.memTotal) * 1000) / 10;
						/* 系统负载 */
						const systemLoad = Math.round((res.load.one / res.load.max) * 100) > 100 ? 100 : Math.round((res.load.one / res.load.max) * 100);
						workChart.setOption({
							title: {
								subtext: '单位 百分比'
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							},
							grid: {
								left: '3%',
								right: '3%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								axisTick: {
									show: false
								},
								data: ['CPU占用', '内存占用', '系统缓冲', '内存缓冲', '系统负载']
							},
							yAxis: {
								type: 'value'
							},
							series: {
								data: [
									{
										name: 'CPU占用',
										value: cpuUse,
										itemStyle: {
											color: '#b3c25a'
										}
									},
									{
										name: '内存占用',
										value: memoryRealUse,
										itemStyle: {
											color: '#67b580'
										}
									},
									{
										name: '系统缓冲',
										value: memoryBufferUse,
										itemStyle: {
											color: '#86ba71'
										}
									},
									{
										name: '内存缓冲',
										value: memoryCacheUse,
										itemStyle: {
											color: '#feb041'
										}
									},
									{
										name: '系统负载',
										value: systemLoad,
										itemStyle: {
											color: '#fd7e55'
										}
									}
								],
								type: 'bar',
								showBackground: true,
								label: {
									show: true,
									color: '#ffffff',
									formatter: params => `${params.data.value} %`
								},
								backgroundStyle: {
									color: 'rgba(180, 180, 180, 0.2)'
								}
							}
						});
					}
					setTimeout(initChart, 2000);
				}
			});
		}
	}

	/* 初始化统计 */
	{
		const categoryDom = document.querySelector('#category');
		const categoryChart = echarts.init(categoryDom);
		const seriesData = [];
		$('.joe_census__basic-item.category ul li').each((index, item) => {
			seriesData.push({
				name: item.getAttribute('data-name'),
				value: item.getAttribute('data-value')
			});
		});
		categoryChart.setOption({
			tooltip: {
				trigger: 'item'
			},
			series: [
				{
					type: 'pie',
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					data: seriesData
				}
			]
		});
	}

	/* 初始化评论统计 */
	{
		const latelyDom = document.querySelector('#lately');
		const latelyChart = echarts.init(latelyDom);
		$.ajax({
			url: Joe.BASE_API,
			type: 'POST',
			dataType: 'json',
			data: {
				routeType: 'comment_lately'
			},
			success(res) {
				latelyChart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					grid: {
						left: '3%',
						right: '3%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						axisTick: {
							show: false
						},
						data: res.categories
					},
					yAxis: {
						type: 'value'
					},
					series: {
						name: '数量',
						itemStyle: {
							normal: {
								color: '#91cc75',
								lineStyle: {
									width: 2,
									color: '#91cc75'
								}
							}
						},
						data: res.series,
						type: 'line',
						smooth: true
					}
				});
			}
		});
	}
});