var Modal = require("pokeball/components/modal");
// var CommonDatepicker = require("extras/common_datepicker");
require("common/move_animate/extend");
var here, cpuChartOption;
class hostInfo_manage {
constructor() {
here = this;
// 下拉搜索选择框初始化
$('.search-select').searchableSelect();
// 初始化分页
$("#host-overview-page").pagination({
firstBtnText: "首页",
lastBtnText: "末页",
prevBtnText: "上一页",
nextBtnText: "下一页",
showInfo: true,
infoFormat: "共{total}页",
pageElementSort: ['$page', '$size', '$info', '$jump'],
showJump: true,
showPageSizes: true,
pageSizeItems: [5, 10, 25, 50],
pageSize: 10,
total: 100
});
cpuChartOption = {
title: {
text: 'CPU使用率',
subtext: ''
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
return "系统使用率: " + params[0].value + "%" + "<br>" + "用户使用率: " + params[1].value + "%";
}
},
legend: {
data:['系统使用率','用户使用率']
},
toolbox: {
show: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['14:00','14:05','14:10','14:15','14:20','14:25','14:30','14:35','14:40','14:45','14:50','14:55','15:00']
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value} %'
}
},
series: [
{
name:'系统使用率',
type:'line',
areaStyle: {normal: {}},
data:[11, 11, 15, 13, 12, 13, 10, 11, 14, 15, 12, 5, 6]
},
{
name:'用户使用率',
type:'line',
areaStyle: {normal: {}},
data:[1, 2, 2, 5, 3, 2, 3, 5, 6, 7, 8, 7, 5]
}
]
};
// 初始化图表
var panelBodyWidth = Math.floor($(".main-right .panel-body").width());
var cpuChartWidth = Math.floor(panelBodyWidth / 2);
var cpuChartWidth2 = panelBodyWidth - cpuChartWidth;
here.initChart("cpu-chart", cpuChartOption, cpuChartWidth, 300);
here.initChart("cpu-chart2", cpuChartOption, cpuChartWidth2, 300);
here.initDateTimePicker("#start-time-info", "#end-time-info");
here.initDateTimePicker("#start-time-serious", "#end-time-serious");
here.initDateTimePicker("#start-time-error", "#end-time-error");
here.initDateTimePicker("#start-time-warn", "#end-time-warn");
here.bindEvent();
}
// 初始化时间选择框
initDateTimePicker(s, e) {
jQuery.datetimepicker.setLocale('ch');
jQuery(function(){
jQuery(s).datetimepicker({
format: 'Y-m-d H:i',
onShow:function( ct ){
this.setOptions({
maxDate: jQuery(e).val()?jQuery(e).val():new Date(),
});
},
validateOnBlur:false,
onChangeDateTime: function(current_time,$input) {
var endTime = new Date($(e).val());
if(current_time > new Date() || current_time > endTime) {
$(s).val("");
Messenger().post({
message: '开始时间大于当前时间或结束时间,请重新选择!',
type: 'error',
showCloseButton: true,
hideAfter: 2
});
Messenger({
extraClasses: 'messenger-fixed messenger-on-top'
});
}
}
});
jQuery(e).datetimepicker({
format: 'Y-m-d H:i',
onShow:function( ct ){
this.setOptions({
minDate: jQuery(s).val()?jQuery(s).val():false,
maxDate: new Date()
});
},
validateOnBlur:false,
onChangeDateTime: function(current_time,$input) {
var startTime = new Date($(s).val());
if(current_time > new Date() || current_time < startTime) {
$(e).val("");
Messenger().post({
message: '结束时间大于当前时间或小于开始时间,请重新选择!',
type: 'error',
showCloseButton: true,
hideAfter: 2
});
Messenger({
extraClasses: 'messenger-fixed messenger-on-top'
});
}
}
});
});
}
// 初始化图表
initChart(e, o, w, h) {
var cpuChartElement = document.getElementById(e);
$(cpuChartElement).css("width", w).css("height", h);
var cpuChart = echarts.init(cpuChartElement);
cpuChart.setOption(o);
}
//时间戳转换成24小时格式(2017-01-12 22:03:00)
// formatTime(t) {
// console.log(t);
// var timeStr = new Date(t).toLocaleString();
// var arr1 = timeStr.split(" ");
// var arr2 = arr1[0].split("/");
// for(var i = 1; i <= 2; i++) {
// if(parseInt(arr2[i], 10) < 10) {
// arr2[i] = "0" + arr2[i];
// }
// }
// var str1 = arr2.join("-");
// var arr3 = arr1[1].split(":");
// if(arr3[0].indexOf("上午") !== -1) {
// if(parseInt(arr3[0].replace(/上午/g, ""), 10) < 10) {
// arr3[0] = "0" + arr3[0].replace(/上午/g, "");
// } else {
// arr3[0] = arr3[0].replace(/上午/g, "");
// }
// }
// if(arr3[0].indexOf("下午") !== -1) {
// arr3[0] = (12 + parseInt(arr3[0].replace(/下午/g, ""), 10)).toString();
// }
// var str2 = arr3.join(":");
// return str1 + " " + str2;
// }
bindEvent() {
// 浏览器窗口大小改变重新渲染图表
$(window).resize(function() {
$("#cpu-chart, #cpu-chart2").empty();
var panelBodyWidth = Math.floor($(".main-right .panel-body").width());
var cpuChartWidth = Math.floor(panelBodyWidth / 2);
here.initChart("cpu-chart", cpuChartOption, cpuChartWidth, 300);
var cpuChartWidth2 = panelBodyWidth - cpuChartWidth;
here.initChart("cpu-chart2", cpuChartOption, cpuChartWidth2, 300);
});
$("body").off().on("click", "#create-option-btn", function() {
var createOptionModal = new Modal("#create-warning-option");
createOptionModal.show();
})
.on("click", "#top-nav a", function() {
var index = $(this).closest("li").index();
$("#top-nav li").removeClass("active");
$("#top-nav li").eq(index).addClass("active");
$(".content-block").hide().eq(index).show();
})
.on("click", "#add-warning-option", function() {
var elemStr = `<tr>
<td id="hosts">
<select>
<option value="1">host1</option>
<option value="2">host2</option>
<option value="3">host3</option>
</select>
</td>
<td id="options">
<select>
<option value="1">CPU使用率</option>
<option value="2">内存使用率</option>
<option value="3">交换区使用率</option>
<option value="4">...</option>
</select>
</td>
<td id="operation">
<select>
<option value="1">></option>
<option value="2"><</option>
<option value="3">>=</option>
<option value="4"><=</option>
<option value="5">!=</option>
</select>
</td>
<td><input type="text" value="50%" class="small-input"></td>
<td><input type="text" value="70%" class="small-input"></td>
<td><input type="text" value="xxxxxxxxxxxx"></td>
<td><a href="javascript:;" class="delete-option">删除</a></td>
</tr>`;
$("#create-warning-option tbody").append(elemStr);
})
.on("click", ".delete-option", function() {
$(this).closest("tr").remove();
})
.on("click", "#next-step-1, #next-1", function() {
$("#create-warning-option, #set-warning-option").hide();
var createOptionModal = new Modal("#set-notice-person");
createOptionModal.show();
})
.on("click", "#select-all-group", function() {
$("#group-block").find("li").addClass("checked-blue").find("i").removeClass("hide");
})
.on("click", "#create-warning-group", function() {
var warningGroupManage = new Modal("#warning-group-manage");
warningGroupManage.show();
})
.on("click", "#add", function() {
var usablePerson = $(".usable-person li");
var usedPersonUl = $(".used-person ul");
var checkedUsablePerson = $(".usable-person li i:not(.hide)");
var len = checkedUsablePerson.length;
var arr = [];
var indexs = [];
for(var i = 0; i < len; i++) {
var index = checkedUsablePerson.eq(i).closest("li").index();
indexs.push(index);
arr.push(checkedUsablePerson.eq(i).closest("li").text());
}
for(var i = 0; i < indexs.length; i++) {
usedPersonUl.append("<li>" + arr[i] + "<i class='fa fa-check pull-right checked-blue hide' aria-hidden='true'></i></li>");
usablePerson.eq(indexs[i]).closest("li").remove();
}
})
.on("click", "#remove", function() {
var usedPerson = $(".used-person li");
var usablePersonUl = $(".usable-person ul");
var checkedUsedPerson = $(".used-person li i:not(.hide)");
var len = checkedUsedPerson.length;
var arr = [];
var indexs = [];
for(var i = 0; i < len; i++) {
var index = checkedUsedPerson.eq(i).closest("li").index();
indexs.push(index);
arr.push(checkedUsedPerson.eq(i).closest("li").text());
}
for(var i = 0; i < indexs.length; i++) {
usablePersonUl.append("<li>" + arr[i] + "<i class='fa fa-check pull-right checked-blue hide' aria-hidden='true'></i></li>");
usedPerson.eq(indexs[i]).closest("li").remove();
}
})
.on("click", ".person-block li", function() {
$(this).toggleClass("checked-blue").find("i").toggleClass("hide");
})
.on("click", "#select-all-usable-person, #select-all-used-person", function() {
$(this).next(".person-block").find("li").addClass("checked-blue").find("i").removeClass("hide");
})
.on("click", "#group-block li", function() {
$(this).toggleClass("checked-blue").find("i").toggleClass("hide");
})
.on("click", ".setOption", function() {
var setOptionModal = new Modal("#set-warning-option");
setOptionModal.show();
$("#set-warning-option > div").hide();
$("#option-step-1").show();
})
.on("click", "#add-new-option", function() {
var elemStr = `<tr>
<td id="hosts-option">
<select>
<option value="1">host1</option>
<option value="2">host2</option>
<option value="3">host3</option>
</select>
</td>
<td id="options-option">
<select>
<option value="1">CPU使用率</option>
<option value="2">内存使用率</option>
<option value="3">交换区使用率</option>
<option value="4">...</option>
</select>
</td>
<td id="operation-option">
<select>
<option value="1">></option>
<option value="2"><</option>
<option value="3">>=</option>
<option value="4"><=</option>
<option value="5">!=</option>
</select>
</td>
<td><input type="text" value="50%" class="small-input"></td>
<td><input type="text" value="70%" class="small-input"></td>
<td><input type="text" value="xxx"></td>
<td><input type="text" value="xxxxxxxxxxxx"></td>
<td><a href="javascript:;" class="delete-option">删除</a></td>
</tr>`;
$("#set-warning-option tbody").append(elemStr);
})
.on("click", "#create-new-group", function() {
var warningGroupManage = new Modal("#warning-group-manage");
warningGroupManage.show();
})
.on("click", ".prompt", function() {
var history = new Modal("#history-logs-info");
history.show();
})
.on("click", "#search-history-info", function() {
console.log($("#start-time-info").val(), $("#end-time-info").val());
})
.on("click", ".serious", function() {
var history = new Modal("#history-logs-serious");
history.show();
})
.on("click", "#search-history-serious", function() {
console.log($("#start-time-serious").val(), $("#end-time-serious").val());
})
.on("click", ".errors", function() {
var history = new Modal("#history-logs-error");
history.show();
})
.on("click", "#search-history-error", function() {
console.log($("#start-time-error").val(), $("#end-time-error").val());
})
// .on("click", ".search-select > input[type='text']", function() {
// $(this).next(".select-block").show();
// })
// .on("click", ".select-block li", function() {
// $(this).closest(".select-block").hide();
// })
.on("click", "#warning-info-search", function() {
console.log($(this).closest("form").find(".searchable-select-item.selected").eq(0).data("value"));
})
.on("click", "#next-step-2", function() {
$("#set-notice-person").hide();
var finish = new Modal("#finish");
finish.show();
})
}
// getScreenHeight() {
// var height = parseInt($('.main-left').css('height')) - 210 + 'px';
// $("#left-tree.tree-panel").css('height', height);
// }
// moveAnimate() {
// var str = '#export-modal .modal-header, #history-detail-modal .modal-header, #history-trend .modal-header, #selectPeriodModal .modal-header';
// $(str).moveAnimate({
// modalHeaders: str
// });
// }
}
module.exports = hostInfo_manage;
一个jsx文件
最新推荐文章于 2024-07-14 19:56:04 发布