一个jsx文件

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;