|
|
|
|
|
|
|
|
layui.use(["index", "api", "tpl", "dialog", "laypage", "laydate"], function () {
|
|
|
var $ = layui.$,
|
|
|
table = layui.table,
|
|
|
element = layui.element,
|
|
|
form = layui.form,
|
|
|
admin = layui.admin,
|
|
|
laydate = layui.laydate,
|
|
|
laypage = layui.laypage;
|
|
|
var refreshNextTime = 0;
|
|
|
var intervalsTime = 0;//刷新时间频率
|
|
|
var myRefreshTimeOut = "";
|
|
|
var where = {};
|
|
|
|
|
|
var ecgChart = echarts.init(document.getElementById("ecgChart"));
|
|
|
var LIST_TABLE_ID = "listTable";
|
|
|
var LIST_TABLE_DATA = [
|
|
|
{
|
|
|
id: 1,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 5,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 6,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 7,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 8,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 9,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
{
|
|
|
id: 10,
|
|
|
name: "我的名字",
|
|
|
ip: "192.168.10.123",
|
|
|
port: "3306",
|
|
|
sid: "student_info",
|
|
|
username: "student",
|
|
|
password: "12345678",
|
|
|
createTime: 1590560278000,
|
|
|
fz: 1,
|
|
|
type: 1,
|
|
|
remark: "我是一个备注",
|
|
|
},
|
|
|
];
|
|
|
var LIST_TABLE_COLS = [
|
|
|
{
|
|
|
field: "id",
|
|
|
title: "id",
|
|
|
align: "center",
|
|
|
},
|
|
|
{
|
|
|
field: "name",
|
|
|
title: "名称",
|
|
|
align: "center",
|
|
|
},
|
|
|
{
|
|
|
field: "createTime",
|
|
|
title: "创建时间",
|
|
|
align: "center",
|
|
|
templet: function (d) {
|
|
|
return layui.util.toDateString(d.createTime, "yyyy-MM-dd");
|
|
|
},
|
|
|
}
|
|
|
];
|
|
|
init();
|
|
|
|
|
|
function init() {
|
|
|
getChartData();
|
|
|
getTableData();
|
|
|
refreshTime();
|
|
|
}
|
|
|
|
|
|
function stopRefreshTime() {
|
|
|
clearTimeout(myRefreshTimeOut);
|
|
|
}
|
|
|
function refreshTime() {
|
|
|
if (intervalsTime == 0) {
|
|
|
stopRefreshTime();
|
|
|
}
|
|
|
var nowTime = new Date().getTime();
|
|
|
if (nowTime > refreshNextTime) {
|
|
|
refreshNextTime = nowTime + parseInt(intervalsTime);
|
|
|
getChartData();
|
|
|
getTableData();
|
|
|
if (intervalsTime > 0) {
|
|
|
refreshTime();
|
|
|
}
|
|
|
} else {
|
|
|
if (intervalsTime > 0) {
|
|
|
myRefreshTimeOut = window.setTimeout(function () {
|
|
|
refreshTime();
|
|
|
}, intervalsTime);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
function getChartData() {
|
|
|
var responseTimeOptions = {
|
|
|
xAxisData: ["4000", "3000", "5000", "6500", "4800"],
|
|
|
seriesData: [110, 250, 239, 124, 47],
|
|
|
}; //api 请求数据
|
|
|
rendErecgChart(responseTimeOptions);
|
|
|
}
|
|
|
function rendErecgChart({ xAxisData, seriesData }) {
|
|
|
var xAxisData = [];
|
|
|
var yAxisData = [];
|
|
|
for (var i = 500; i > 0; i--) {
|
|
|
xAxisData.push(i + "秒前");
|
|
|
}
|
|
|
for (i = 1; i < 501; i++) {
|
|
|
yAxisData.push(null);
|
|
|
}
|
|
|
var totalFlowRateOption = {
|
|
|
animation: false,
|
|
|
title: {
|
|
|
text: '总流量（kbps）'/*,
|
|
|
left:"110px"*/ },
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { type: 'cross' }
|
|
|
},
|
|
|
grid: {
|
|
|
left: 50/*"50px"*/,
|
|
|
right: 15/*"15px"*/
|
|
|
},
|
|
|
legend: {
|
|
|
data: ['当前流量']
|
|
|
},
|
|
|
xAxis: {
|
|
|
boundaryGap: false,
|
|
|
data: xAxisData,
|
|
|
nameLocation: "end",
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#454b5026",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: ["#454b5026"],
|
|
|
width: 1,
|
|
|
type: "solid",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: "#a5aaaf",
|
|
|
},
|
|
|
yAxis: {
|
|
|
boundaryGap: false, nameLocation: "end",
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#454b5026",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: ["#454b5026"],
|
|
|
width: 1,
|
|
|
type: "solid",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: {
|
|
|
symbol: "none",/*去掉小圆点*/
|
|
|
name: '当前流量',
|
|
|
type: 'line',
|
|
|
data: yAxisData,
|
|
|
showBackground: false,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#1289ff",
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
};
|
|
|
|
|
|
ecgChart.setOption(totalFlowRateOption);
|
|
|
|
|
|
setInterval(function () {
|
|
|
yAxisData.push(Math.round(Math.random() * 1000));
|
|
|
if (yAxisData.length > 500) {
|
|
|
yAxisData.shift();
|
|
|
}
|
|
|
ecgChart.setOption(totalFlowRateOption);
|
|
|
}, 1000);
|
|
|
}
|
|
|
function getTableData() {
|
|
|
var tableRenderOptions = {
|
|
|
elem: "#" + LIST_TABLE_ID,
|
|
|
data: LIST_TABLE_DATA,
|
|
|
even: "false",
|
|
|
defaultToolbar: [],
|
|
|
page: false,
|
|
|
cols: [LIST_TABLE_COLS],
|
|
|
where: where,
|
|
|
};
|
|
|
table.render(tableRenderOptions);
|
|
|
laypage.render({
|
|
|
elem: "pages",
|
|
|
count: 100,
|
|
|
layout: ["count", "prev", "page", "next", "limit", "refresh", "skip"],
|
|
|
jump: function (obj) {
|
|
|
console.log(obj);
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
});
|