var layer ;
|
|
var lincChart1;
|
var lincChart2;
|
var lincChart3;
|
var lincChart4;
|
|
var intervalCircle1;
|
var intervalCircle2;
|
var intervalCircle3;
|
var intervalCircle4;
|
var intervalCircleNum = 1 * 1000;
|
//定义变量
|
var screenName = "";
|
var screenSlogan = "";
|
var sysStart;
|
|
//设备信息列表
|
var deviceList = [];
|
|
var indexTag = "1";
|
var passNum = "2";
|
|
$(function () {
|
|
layui.use(['layer'], function () {
|
layer = layui.layer;
|
|
//初始化背景动效
|
initBg();
|
//头部，右上角时间初始化
|
renderNavbar();
|
|
var date = new Date();
|
$(".m-box" + indexTag).show();
|
if(indexTag == 1){
|
lincChart1 = initChartLine1("box"+indexTag+"-server1");
|
renderChartLine(date,lincChart1,passNum);
|
}else if(indexTag == 2){
|
lincChart1 = initChartLine1("box"+indexTag+"-server1");
|
lincChart2 = initChartLine1("box"+indexTag+"-server2");
|
renderChartLine(date,lincChart1,passNum);
|
renderChartLine(date,lincChart2,passNum);
|
}else if(indexTag == 3){
|
lincChart1 = initChartLine1("box"+indexTag+"-server1");
|
lincChart2 = initChartLine1("box"+indexTag+"-server2");
|
lincChart3 = initChartLine1("box"+indexTag+"-server3");
|
renderChartLine(date,lincChart1,passNum);
|
renderChartLine(date,lincChart2,passNum);
|
renderChartLine(date,lincChart3,passNum);
|
}else if(indexTag == 4){
|
lincChart1 = initChartLine1("box"+indexTag+"-server1");
|
lincChart2 = initChartLine1("box"+indexTag+"-server2");
|
lincChart3 = initChartLine1("box"+indexTag+"-server3");
|
lincChart4 = initChartLine1("box"+indexTag+"-server4");
|
renderChartLine(date,lincChart1,passNum);
|
renderChartLine(date,lincChart2,passNum);
|
renderChartLine(date,lincChart3,passNum);
|
renderChartLine(date,lincChart4,passNum);
|
}
|
|
});
|
});
|
|
/* ------------------ 折线图数据渲染-start ------------------- */
|
function renderChartLine(date,lincChart,passNum) {
|
var legendData = [];
|
var name = "";
|
var series = [];
|
var xaxisData = getXaxisData(date);
|
for(var i=0;i<passNum;i++){
|
name = '温度'+i;
|
legendData.push(name);
|
var seriesParam = {
|
name: name,
|
type: 'line',
|
left: ['50%', '50%'],
|
symbolSize: 3
|
};
|
var data = [];
|
for(var j=0;j<xaxisData.length;j++){
|
data.push(null);
|
}
|
seriesParam.data = data;
|
series.push(seriesParam);
|
}
|
|
lincChart.option.legend.data = legendData;
|
lincChart.option.series = series;
|
lincChart.option.xAxis.data = xaxisData;
|
lincChart.chart.setOption(lincChart.option, true);
|
|
reLoadChartLineCircule(lincChart);
|
|
}
|
|
function getXaxisData(date) {
|
var xaxisData = [];
|
var xaxis = "";
|
var hours = date.getHours()
|
var min = date.getMinutes();
|
var seconds = date.getSeconds();
|
// while (xaxisData.length < 120){
|
// xaxis = (hours<10?"0"+hours:hours)+":"+(min<10?"0"+min:min);
|
// xaxisData.push(xaxis);
|
// min--;
|
// if(min<0){
|
// min = 59;
|
// hours--;
|
// hours = hours<0?23:hours;
|
// }
|
// }
|
|
//测试
|
while (xaxisData.length < 120){
|
xaxis = (min<10?"0"+min:min)+":"+(seconds<10?"0"+seconds:seconds);
|
xaxisData.push(xaxis);
|
seconds--;
|
if(seconds<0){
|
seconds = 59;
|
min--;
|
min = hours<0?59:min;
|
}
|
}
|
xaxisData.reverse();
|
return xaxisData;
|
}
|
|
// 循环执行页面数据的刷新
|
function reLoadChartLineCircule(lincChart) {
|
var series = lincChart.option.series;
|
// 首先停止执行原有的循环
|
// if (intervalCircle1) clearInterval(intervalCircle1);
|
intervalCircle1 = setInterval(function () {
|
var date = new Date();
|
var xaxisData = getXaxisData(date);
|
for(var i=0;i<series.length;i++){
|
var data = series[i].data;
|
if(!data){
|
data = [];
|
}
|
if(data.length < xaxisData.length){
|
data.push(Math.floor(Math.random()*(100-1)+1));
|
}else{
|
data.shift();
|
data.push(Math.floor(Math.random()*(100-1)+1));
|
}
|
// data.unshift(Math.floor(Math.random()*(100-1)+1));
|
|
series[i].data = data;
|
}
|
lincChart.option.series = series;
|
lincChart.option.xAxis.data = xaxisData;
|
lincChart.chart.setOption(lincChart.option, true);
|
}, intervalCircleNum);
|
};
|
|
/* ------------------ 折线图数据渲染-end ------------------- */
|
|
//时间格式处理，20210226101010-----2021-02-26 10:10:10
|
function strTime(time) {
|
return time.substring(0, 4) + "-" + time.substring(4, 6) + "-" + time.substring(6, 8) + " " + time.substring(8, 10) + ":" + time.substring(10, 12) + ":" + time.substring(12, 14)
|
}
|
|
//返回月日的时间格式，如02-25
|
function timeStr(date) {
|
var arr = date.toLocaleDateString().split("/");
|
if (arr[1].length < 2) {
|
arr[1] = "0" + arr[1];
|
}
|
if (arr[2].length < 2) {
|
arr[2] = "0" + arr[2];
|
}
|
return arr[1] + "-" + arr[2];
|
}
|
|
//时间格式处理
|
function timeHandle(date, tag) {
|
var arr = date.toLocaleDateString().split("/");
|
if (arr[1].length < 2) {
|
arr[1] = "0" + arr[1];
|
}
|
if (arr[2].length < 2) {
|
arr[2] = "0" + arr[2];
|
}
|
var time = arr[0] + arr[1] + arr[2];
|
if (tag == "end") {
|
return time + '235959';
|
} else {
|
return time + '000000';
|
}
|
}
|
|
/* ------------------ 页面头部信息渲染-start ------------------- */
|
|
//获取系统参数配置信息
|
function querySysSetInfo() {
|
$.get("./cgi-bin/sys-set/query-info", function (data, status) {
|
if ("success" == status) {
|
renderSysSetInfo(data);
|
} else {
|
window.parent.parent.notify("数据查询出错，请重新操作！！msg=" + data.msg);
|
}
|
}, "json");
|
}
|
//渲染系统参数配置信息
|
function renderSysSetInfo(data) {
|
screenName = data.screenName;
|
screenSlogan = data.screenSlogan;
|
sysStart = data.usedTime;
|
sysStart = sysStart.substring(0, 4) + "-" + sysStart.substring(4, 6) + "-" + sysStart.substring(6, 8) + " 00:00:00";
|
|
// 设置主界面的标题screenName
|
$("#main-title").text(screenName);
|
// 设置主界面的标语screenSlogan
|
$("#main-slogan").text(screenSlogan);
|
// 初始化运行天数
|
initRunDay();
|
}
|
|
//头部，右上角时间
|
function renderNavbar() {
|
showRealTime();
|
window.setInterval(function (){
|
showRealTime();
|
},1000);
|
}
|
|
function showRealTime(){
|
var d = new Date();
|
var year = d.getFullYear();
|
var month = d.getMonth() + 1;
|
var date = d.getDate();
|
var days = new Array("日","一","二","三","四","五","六");
|
var day = d.getDay();
|
var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
|
var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
|
var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
|
var now = year + "年" + month + "月" + date + "日 周" + days[day] + " " + hour + ":" + min + ":" + sec;
|
document.getElementById("dayTime").innerHTML = now;
|
}
|
|
|
/* ------------------ 页面头部信息渲染-end ------------------- */
|
|
/**
|
* 格式化数字保留一位小数
|
* @param numStr
|
* @returns {string}
|
*/
|
function formatNumber(numStr){
|
return numStr ? parseFloat(numStr).toFixed(1):"0.0";
|
}
|
|
|
/* ------------------ 折线图初始化-start ------------------- */
|
function initChartLine1(id) {
|
var option = {
|
tooltip: {
|
trigger: 'axis',
|
hideDelay: '300'
|
},
|
legend: {
|
data: ['CPU(%)'],
|
textStyle:{
|
color: "#4FCCFF",
|
fontSize: 16
|
}
|
},
|
grid: {
|
top: '15%',
|
left: '3%',
|
right: '3%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'],
|
axisLabel: {show: true, textStyle: {color: '#4FCCFF'}},
|
axisLine: {lineStyle: {color: '#162B5F', width: 1}},
|
axisTick: {
|
inside: true,
|
alignWithLabel: true
|
}
|
},
|
yAxis: {
|
minInterval: 1,
|
type: 'value',
|
position: 'right',
|
axisLabel: {show: true, textStyle: {color: '#4FCCFF'}},
|
axisLine: {lineStyle: {color: '#162B5F', width: 2}},
|
splitLine: {lineStyle: {width: 1, color: ['#162B5F']}},
|
axisTick: {
|
inside: true
|
},
|
scale: true
|
},
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
series: [
|
{
|
name: 'CPU(%)',
|
type: 'line',
|
left: ['50%', '50%'],
|
itemStyle: {
|
normal: {
|
color: '#4fccff', // 背景渐变色
|
lineStyle: {width: 2, type: 'solid', color: '#43effe'}
|
},
|
emphasis: {color: '#43effe', lineStyle: {width: 2, type: 'dotted', background: '#43effe'}}
|
},
|
symbolSize: 6
|
}
|
]
|
}
|
var myChart = echarts.init(document.getElementById(id), "light");
|
myChart.setOption(option, true);
|
return {
|
"chart": myChart,
|
"option": option
|
};
|
};
|
|
/* ------------------ 折线图初始化-end ------------------- */
|
|
|
/**
|
* 背景粒子效果
|
*/
|
function initBg() {
|
//背景粒子效果
|
particlesJS('particles-js',
|
{
|
"particles": {
|
"number": {
|
"value": 160,//数量
|
"density": {
|
"enable": true, //启用粒子的稀密程度
|
"value_area": 800 //区域散布密度大小
|
}
|
},
|
"color": {
|
"value": "#0089f4" //原子的颜色
|
},
|
"shape": {
|
"type": "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
|
"stroke": {
|
"width": 0, //原子的宽度
|
"color": "#0089f4" //原子颜色
|
},
|
"polygon": {
|
"nb_sides": 5 // 原子的多边形边数
|
},
|
"image": {
|
"src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
|
"width": 100, //图片宽度
|
"height": 100 //图片高度
|
}
|
},
|
"opacity": {
|
"value": 1, //不透明度
|
"random": true, //随机不透明度
|
"anim": {
|
"enable": true, //渐变动画
|
"speed": 1, // 渐变动画速度
|
"opacity_min": 0, //渐变动画不透明度
|
"sync": true
|
}
|
},
|
"size": {
|
"value": 3, //原子大小
|
"random": true, // 原子大小随机
|
"anim": {
|
"enable": false, // 原子渐变
|
"speed": 4, //原子渐变速度
|
"size_min": 0.3,
|
"sync": false
|
}
|
},
|
"line_linked": {
|
"enable": false, //连接线
|
"distance": 150, //连接线距离
|
"color": "#ffffff", //连接线颜色
|
"opacity": 0.4, //连接线不透明度
|
"width": 1 //连接线的宽度
|
},
|
"move": {
|
"enable": true, //原子移动
|
"speed": 1, //原子移动速度
|
"direction": "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
|
"random": true, //移动随机方向
|
"straight": false, //直接移动
|
"out_mode": "out", //是否移动出画布
|
"bounce": false, //是否跳动移动
|
"attract": {
|
"enable": false, // 原子之间吸引
|
"rotateX": 600, //原子之间吸引X水平距离
|
"rotateY": 600 //原子之间吸引Y水平距离
|
}
|
}
|
},
|
"interactivity": {
|
"detect_on": "canvas", //原子之间互动检测 "canvas", "window"
|
"events": {
|
"onhover": {
|
"enable": true, //悬停
|
"mode": "bubble" //悬停模式 "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]
|
},
|
"onclick": {
|
"enable": false, //点击效果
|
"mode": "repulse" //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]
|
},
|
"resize": true // 互动事件调整
|
},
|
"modes": {
|
"grab": {
|
"distance": 100, //原子互动抓取距离
|
"line_linked": {
|
"opacity": 1 //原子互动抓取距离连线不透明度
|
}
|
},
|
"bubble": {
|
"distance": 250, //原子抓取泡沫效果之间的距离
|
"size": 2, // 原子抓取泡沫效果之间的大小
|
"duration": 2, //原子抓取泡沫效果之间的持续事件
|
"opacity": 1, //原子抓取泡沫效果透明度
|
"speed": 3
|
},
|
"repulse": {
|
"distance": 400, //击退效果距离
|
"duration": 0.4 //击退效果持续事件
|
},
|
"push": {
|
"particles_nb": 4 //粒子推出的数量
|
},
|
"remove": {
|
"particles_nb": 2
|
}
|
}
|
},
|
"retina_detect": true
|
}
|
);
|
}
|
|
function requestFullScreen(element) {
|
// 判断各种浏览器，找到正确的方法
|
var requestMethod = element.requestFullScreen || // W3C
|
element.webkitRequestFullScreen || // FireFox
|
element.mozRequestFullScreen || // Chrome等
|
element.msRequestFullScreen; // IE11
|
if (requestMethod) {
|
requestMethod.call(element);
|
} else if (typeof window.ActiveXObject !== "undefined") { // for
|
// Internet
|
// Explorer
|
var wscript = new ActiveXObject("WScript.Shell");
|
if (wscript !== null) {
|
wscript.SendKeys("{F11}");
|
}
|
}
|
}
|
