8kw实时测试

whychdw

2019-11-06 890a3329dd115089bd9cc04c6f88af4c6c31176a

8kw实时测试

 Idce_Lithium/WebRoot/control-old.jsp

New file
Diff too large

 Idce_Lithium/WebRoot/control.jsp

Diff too large

 Idce_Lithium/WebRoot/js/kw/kw.js

New file
@@ -0,0 +1,1453 @@
// 绘制8kw拓扑图

function draw8kwTopGraph(topgraph) {

    var c_width = topgraph.canvas.width;

    var c_height = topgraph.canvas.height;



    // 8KW测试模块全局图

    var testModule =  draw8kwModule(topgraph);



    // 全局四个角

    var lTopPoint = {

        x: 40,

        y: testModule.line1.start.y+40

    };



    var rTopPoint = {

        x: c_width - 80,

        y: lTopPoint.y

    };



    var lBottomPoint = {

        x: 40,

        y: testModule.line3.start.y - 40

    };



    // 全局方框开始线

    var startLine = {

        id: 'startLine',

        start: {

            x: lTopPoint.x,

            y: lTopPoint.y,

        },

        end: {

            x: 118,

            y: lTopPoint.y,

        },

        lineWidth: 1,

        strokeStyle: "#FF0000",

    };

    // 绘制线

    topgraph.drawLine(startLine);



    // 全局方框结束线

    var endLine = {

        id: 'endLine',

        start: {

            x: lBottomPoint.x,

            y: lBottomPoint.y,

        },

        end: {

            x: 118,

            y: lBottomPoint.y,

        },

        lineWidth: 1,

        strokeStyle: "#000000",

    };

    // 绘制线

    topgraph.drawLine(endLine);



    // 测试模块上方开关和线条

    var topSwitchs = drawTestModuleSwitch(topgraph, startLine);



    // 测试模块下方开关和线条

    var bottomSwitchs = drawTestModuleSwitch(topgraph, endLine, true);

    
    // 绘制电感

    var inductance = drawInductance(topgraph, topSwitchs.switch1Line2.start, bottomSwitchs.switch1Line2.start);



    // 绘制整流器

    var screenImg = drawScreenImg(topgraph);



    // 用电负载

    var loaderImg = drawLoaderImg(topgraph);



    // 电池组1

    var eleGroup = drawEleGroup(topgraph);



    // 电池组2

    var eleGroup2 = drawEleGroup2(topgraph);

    
    // 绘制8kw测试模块

    function draw8kwModule(topgraph) {

        var c_width = topgraph.canvas.width;

        var c_height = topgraph.canvas.height;

        
        // line1信息

        var line1 = {

            id: 'draw8kwModuleLine1',

            start: {

                x: 100,

                y: 30,

            },

            end: {

                x: 350,

                y: 30,

            },

            lineWidth: 3,

            strokeStyle: "#1495E7",

        }

        // 绘制线1

        topgraph.drawLine(line1);



        // line2信息

        var line2 = {

            id: 'draw8kwModuleLine2',

            start: {

                x: line1.end.x,

                y: line1.end.y,

            },

            end: {

                x: line1.end.x,

                y: c_height-30,

            },

            lineWidth: 3,

            strokeStyle: "#1495E7",

        };

        // 绘制line2

        topgraph.drawLine(line2);



        // line3信息

        var line3 = {

            id: 'draw8kwModuleLine3',

            start: {

                x: line2.end.x,

                y: line2.end.y,

            },

            end: {

                x: line1.start.x,

                y: line2.end.y,

            },

            lineWidth: "#1495E7",

            strokeStyle: "#1495E7",

        };

        // 绘制line3

        topgraph.drawLine(line3);



        // line4信息

        var line4 = {

            id: 'draw8kwModuleLine4',

            start: {

                x: line3.end.x,

                y: line3.end.y,

            },

            end: {

                x: line1.start.x,

                y: line1.start.y,

            },

            lineWidth: "#1495E7",

            strokeStyle: "#1495E7",

        };

        // 绘制line3

        topgraph.drawLine(line4);



        return {

            line1: line1,

            line2: line2,

            line3: line3,

            line4: line4

        }

    }



    // 绘制测试模块中上方的开关和线条

    function drawTestModuleSwitch(topgraph, line1, pos) {

        var id = line1.id;

        // 测试模块内的开关1

        var switch1 = topgraph.switch({

            id: id+'switch1',

            point: {

                x: line1.end.x,

                y: line1.end.y,

            },

            lineStyle:  {

                lineWidth: 3,

                strokeStyle: '#000000',

            },

            arcStyle: {

                fillStyle: '#000000',

                strokeStyle: '#000000'

            },

            direct: 'left',

            state: ''

        });



        // switch1开关后的线

        var switch1Line1 = {

            id: id+'switch1Line1',

            start: {

                x: switch1.right.x,

                y: switch1.right.y,

            },

            end: {

                x: switch1.right.x+17,

                y: switch1.right.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(switch1Line1);



        // switch1开关后的线

        var switch1Line2 = {

            id: id+'switch1Line2',

            start: {

                x: switch1Line1.end.x,

                y: switch1Line1.end.y,

            },

            end: {

                x: switch1Line1.end.x+17,

                y: switch1.right.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(switch1Line2);



        // 测试模块内的开关1

        var switch2 = topgraph.switch({

            id: id+'switch2',

            point: {

                x: switch1Line2.end.x,

                y: switch1Line2.end.y,

            },

            lineStyle:  {

                lineWidth: 3,

                strokeStyle: '#000000',

            },

            arcStyle: {

                fillStyle: '#000000',

            },

            direct: 'left',

            state: ''

        });

        var strokeStyle = '#000000';

        if(pos) {

            strokeStyle = '#FF0000';

        }

        // 测试模块内开关后的线

        var switch2Line1 = {

            id: id+'switch2Line1',

            start: {

                x: switch2.right.x,

                y: switch2.right.y,

            },

            end: {

                x: rTopPoint.x,

                y: switch2.right.y,

            },

            lineWidth: 1,

            strokeStyle: strokeStyle,

        };

        // 绘制线

        topgraph.drawLine(switch2Line1);



        return {

            switch1: switch1,

            switch1Line1: switch1Line1,

            switch1Line2: switch1Line2,

            switch2: switch2,

            switch2Line1: switch2Line1

        }

    }



    // 绘制整流器

    function drawScreenImg(topgraph) {

        var c_width = topgraph.canvas.width;

        var c_height = topgraph.canvas.height;



        // 图片配置

        var imgInfo = {

            width: 136/2,

            height: 248/2

        };

        // 整流器配置项

        var option = {

            id: 'screenImg',

            point: {

                x: rTopPoint.x-imgInfo.width/2,

                y: c_height/2-imgInfo.height/2,

            },

            width: imgInfo.width,

            height: imgInfo.height

        };

        var img = new Image();

        img.src="./image/eleCircle/screen.png" 
        // 绘制整流器

        var rectifier = topgraph.drawRectifier(option);



        // 绘制整流器上方的线

        var line1 = {

            id: 'screenImgLine1',

            start: {

                x: rectifier.top.x,

                y: rTopPoint.y,

            },

            end: {

                x: rectifier.top.x,

                y: rectifier.top.y+5,

            },

            lineWidth: 1,

            strokeStyle: "#000000",

        };

        // 绘制线

        topgraph.drawLine(line1);



        // 绘制整流器下方的线

        var line2 = {

            id: 'screenImgLine2',

            start: {

                x: rectifier.bottom.x,

                y: rectifier.bottom.y-5,

            },

            end: {

                x: rectifier.bottom.x,

                y: lBottomPoint.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(line2);



        return {

            line1: line1,

            line2: line2,

            rectifier: rectifier

        };

    }



    // 绘制用电负载

    function drawLoaderImg(topgraph) {

        var c_width = topgraph.canvas.width;

        var c_height = topgraph.canvas.height;



        // 图片配置

        var imgInfo = {

            width: 136/2,

            height: 248/2

        };

        // 整流器配置项

        var option = {

            id: 'loaderImg',

            point: {

                x: rTopPoint.x-imgInfo.width/2 - 150,

                y: c_height/2-imgInfo.height/2,

            },

            width: imgInfo.width,

            height: imgInfo.height

        };

        var img = new Image();

        img.src="./image/eleCircle/screen.png" 
        // 绘制整流器

        var loader = topgraph.drawLoader(option);



        // 绘制整流器上方的线

        var line1 = {

            id: 'loaderImgLine1',

            start: {

                x: loader.top.x,

                y: rTopPoint.y,

            },

            end: {

                x: loader.top.x,

                y: loader.top.y+5,

            },

            lineWidth: 1,

            strokeStyle: "#000000",

        };

        // 绘制线

        topgraph.drawLine(line1);



        // 绘制整流器下方的线

        var line2 = {

            id: 'loaderImgLine2',

            start: {

                x: loader.bottom.x,

                y: loader.bottom.y-5,

            },

            end: {

                x: loader.bottom.x,

                y: lBottomPoint.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(line2);

        
        return {

            line1: line1,

            line2: line2,

            loader: loader

        };

    }

    
    // 绘制电池组1

    function drawEleGroup(topgraph) {

        var c_width = topgraph.canvas.width;

        var c_height = topgraph.canvas.height;



        // 图片配置

        var imgInfo = {

            width: 61,

            height: 25

        };

        // 整流器配置项

        var option = {

            id: 'eleGroupImg',

            point: {

                x: rTopPoint.x-imgInfo.width/2 - 280,

                y: c_height/2-imgInfo.height/2,

            },

            width: imgInfo.width,

            height: imgInfo.height,

            direct: 'down'

        };

        // 绘制电池组

        var eleGroup = topgraph.drawEleGroup(option);



        // 绘制整流器上方的线

        var line1 = {

            id: 'eleGroup1ImgLine1',

            start: {

                x: eleGroup.top.x,

                y: rTopPoint.y,

            },

            end: {

                x: eleGroup.top.x,

                y: eleGroup.top.y,

            },

            lineWidth: 1,

            strokeStyle: "#000000",

        };

        // 绘制线

        topgraph.drawLine(line1);



        // 绘制整流器下方的线

        var line2 = {

            id: 'eleGroup1ImgLine2',

            start: {

                x: eleGroup.bottom.x,

                y: eleGroup.bottom.y,

            },

            end: {

                x: eleGroup.bottom.x,

                y: lBottomPoint.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(line2);



        return {

            line1: line1,

            line2: line2,

            eleGroup: eleGroup

        }

    }



    // 绘制电池组2

    function drawEleGroup2(topgraph) {

        var c_width = topgraph.canvas.width;

        var c_height = topgraph.canvas.height;



        // 图片配置

        var imgInfo = {

            width: 61,

            height: 25

        };

        // 整流器配置项

        var option = {

            id: 'eleGroup2Img',

            point: {

                x: lTopPoint.x-imgInfo.width/2,

                y: c_height/2-imgInfo.height/2,

            },

            width: imgInfo.width,

            height: imgInfo.height

        };

        // 绘制电池组

        var eleGroup = topgraph.drawEleGroup(option);



        // 绘制整流器上方的线

        var line1 = {

            id: 'eleGroup2ImgLine1',

            start: {

                x: lTopPoint.x,

                y: lTopPoint.y,

            },

            end: {

                x: eleGroup.top.x,

                y: eleGroup.top.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(line1);



        // 绘制整流器下方的线

        var line2 = {

            id: 'eleGroup2ImgLine2',

            start: {

                x: eleGroup.bottom.x,

                y: eleGroup.bottom.y,

            },

            end: {

                x: eleGroup.bottom.x,

                y: lBottomPoint.y,

            },

            lineWidth: 1,

            strokeStyle: "#000000",

        };

        // 绘制线

        topgraph.drawLine(line2);



        return {

            line1: line1,

            line2: line2,

            eleGroup: eleGroup

        }

    }



    // 绘制电感

    function drawInductance(topgraph, start, end) {

        var c_width = topgraph.canvas.width;

        var c_height = topgraph.canvas.height;

        // console.log(start);

        // 图片配置

        var rectInfo = {

            width: 15,

            height: 60

        };



        // 绘制矩形

        var rect = topgraph.rect({

            id: 'inductance',

            point: {

                x: start.x-rectInfo.width/2,

                y: c_height/2-rectInfo.height/2,

            },

            text: '',

            strokeStyle: "#000000",

            fillStyle: "#000000",

            width: rectInfo.width,

            height: rectInfo.height

        });



        // 绘制整流器上方的线

        var line1 = {

            id: 'rectLine1',

            start: {

                x: start.x,

                y: start.y,

            },

            end: {

                x: rect.top.x,

                y: rect.top.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(line1);



        // 绘制整流器下方的线

        var line2 = {

            id: 'rectLine2',

            start: {

                x: rect.bottom.x,

                y: rect.bottom.y,

            },

            end: {

                x: end.x,

                y: end.y,

            },

            lineWidth: 1,

            strokeStyle: "#FF0000",

        };

        // 绘制线

        topgraph.drawLine(line2);



        return {

            line1: line1,

            line2: line2,

            inductance: rect

        }

    }



    return {

        eleGroup2: eleGroup2,   // 电池组1

        startLine: startLine,   // 开始线

        endLine: endLine,       // 结束线

        topSwitchs: topSwitchs, // 上方开关

        bottomSwitchs: bottomSwitchs,   // 下方开关

        inductance: inductance,     // 电感

        loaderImg: loaderImg,       // 负载

        screenImg: screenImg        // 整流器

    }

}



// 构造放电移动的点

function dischargeMoveArc(topgraph, list) {

    var options = [];

    // 线条

    var line = list.eleGroup2.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_eleGroup2Line1',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.eleGroup2.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_eleGroup2Line2',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.startLine;

    // 配置项

    var option = {

        id: 'moveArc_discharge_startLine',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.endLine;

    // 配置项

    var option = {

        id: 'moveArc_discharge_endLine',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.inductance.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_inductance_line1',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.inductance.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_inductance_line2',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.loaderImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_line1',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.loaderImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_line2',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);

    // 线条

    var line = list.screenImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_screenImg_line1',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.screenImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_screenImg_line2',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line1 = list.loaderImg.line1;

    var line2 = list.screenImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_screenImg_line1',

        start: {

            x: line2.start.x,

            y: line2.start.y

        },

        end: {

            x: line1.start.x,

            y: line1.start.y

        },

        point: {

            x: line2.start.x,

            y: line2.start.y

        },

    };

    // 添加到配置项中

    options.push(option);

    
    // 线条

    var line1 = list.loaderImg.line2;

    var line2 = list.screenImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_screenImg_line2',

        start: {

            x: line1.end.x,

            y: line1.end.y

        },

        end: {

            x: line2.end.x,

            y: line2.end.y

        },

        point: {

            x: line1.end.x,

            y: line1.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line1 = list.topSwitchs.switch2Line1;

    var line2 = list.loaderImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_topSwitch_loaderImg_line1',

        start: {

            x: line2.start.x,

            y: line2.start.y

        },

        end: {

            x: line1.start.x,

            y: line1.start.y

        },

        point: {

            x: line2.start.x,

            y: line2.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line1 = list.bottomSwitchs.switch2Line1;

    var line2 = list.loaderImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_bottomSwitchs_loaderImg_line1',

        start: {

            x: line1.start.x,

            y: line1.start.y

        },

        end: {

            x: line2.end.x,

            y: line2.end.y

        },

        point: {

            x: line1.start.x,

            y: line1.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 遍历配置项设置移动

    for(var i=0; i<options.length; i++) {

        var option = options[i];

        option.fillStyle = '#FF0000';

        option.radius = 4;

        topgraph.moveArc(option);

    }

}



// 构造放电移动的点

function chargeMoveArc(topgraph, list) {

    var options = [];

    // 线条

    var line = list.eleGroup2.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_eleGroup2Line1',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.eleGroup2.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_eleGroup2Line2',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.startLine;

    // 配置项

    var option = {

        id: 'moveArc_discharge_startLine',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.endLine;

    // 配置项

    var option = {

        id: 'moveArc_discharge_endLine',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.inductance.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_inductance_line1',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.inductance.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_inductance_line2',

        start: {

            x: line.end.x,

            y: line.end.y

        },

        end: {

            x: line.start.x,

            y: line.start.y

        },

        point: {

            x: line.end.x,

            y: line.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.loaderImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_line1',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.loaderImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_line2',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);

    // 线条

    var line = list.screenImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_screenImg_line1',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line = list.screenImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_screenImg_line2',

        start: {

            x: line.start.x,

            y: line.start.y

        },

        end: {

            x: line.end.x,

            y: line.end.y

        },

        point: {

            x: line.start.x,

            y: line.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line1 = list.loaderImg.line1;

    var line2 = list.screenImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_screenImg_line1',

        start: {

            x: line1.start.x,

            y: line1.start.y

        },

        end: {

            x: line2.start.x,

            y: line2.start.y

        },

        point: {

            x: line1.start.x,

            y: line1.start.y

        },

    };

    // 添加到配置项中

    options.push(option);

    
    // 线条

    var line1 = list.loaderImg.line2;

    var line2 = list.screenImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_loaderImg_screenImg_line2',

        start: {

            x: line2.end.x,

            y: line2.end.y

        },

        end: {

            x: line1.end.x,

            y: line1.end.y

        },

        point: {

            x: line2.end.x,

            y: line2.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line1 = list.topSwitchs.switch2Line1;

    var line2 = list.loaderImg.line1;

    // 配置项

    var option = {

        id: 'moveArc_discharge_topSwitch_loaderImg_line1',

        start: {

            x: line1.start.x,

            y: line1.start.y

        },

        end: {

            x: line2.start.x,

            y: line2.start.y

        },

        point: {

            x: line1.start.x,

            y: line1.start.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 线条

    var line1 = list.bottomSwitchs.switch2Line1;

    var line2 = list.loaderImg.line2;

    // 配置项

    var option = {

        id: 'moveArc_discharge_bottomSwitchs_loaderImg_line1',

        start: {

            x: line2.end.x,

            y: line2.end.y

        },

        end: {

            x: line1.start.x,

            y: line1.start.y

        },

        point: {

            x: line2.end.x,

            y: line2.end.y

        },

    };

    // 添加到配置项中

    options.push(option);



    // 遍历配置项设置移动

    for(var i=0; i<options.length; i++) {

        var option = options[i];

        option.fillStyle = '#2d8cf0';

        option.radius = 4;

        topgraph.moveArc(option);

    }

}



// 设置拓扑图的状态

function setTopGraphState(topgraph, list, state) {

    if(topgraph.currState == state) {

        return;

    }

    topgraph.del(/^moveArc_/);

    switch(state) {

        case 'discharge':

            topgraph.currState = state;

            dischargeMoveArc(topgraph, list);

        break;

        case 'charge':

            topgraph.currState = state;

            chargeMoveArc(topgraph, list);

        break;

        default:

            topgraph.currState = '';

        break;

    }

}



// 8KW拓扑图

var topgraph = new TopGraph($('#topgraph'));



// 8kW拓扑图信息

var topgraphInfo = draw8kwTopGraph(topgraph);





;(function($, window, documment, gl) {

    // 设置当前模块的命名空间为circleStatus

    gl.namespace('circleStatus');   
    // 定义电路拓扑图状态类

    var Status = function(ele, options) {

        this.ele = ele;

        this.options = options;

        
        this._init();

        
        if(this.options.length != 0) {

            this.show();

        }

    };

    // 声明原型变量

    var _prop = Status.prototype;

    // 初始化内容

    _prop._init = function() {

        // 清理当前容器的内容

        this.ele.hide();

        this.ele.text("");

        // 使用js的方式生成特定的元素

        var _ul = $('<ul></ul>');

        // 遍历options

        for(var i=0; i<this.options.length; i++) {

            var _opts = this.options[i];

            var _li = $('<li></li>');

            this._setLi(_li, _opts);

            _ul.append(_li);

        }

        this.ele.append(_ul);

    };

    
    // 设置配置项

    _prop.setOpts = function(options) {

        this.options = options;

        
        this._init();

        
        if(this.options.length != 0) {

            this.show();

        }

    };

    
    // 根据配置项的值获取li

    _prop._setLi = function(li, option) {

        var _i, _a = $('<a></a>');

        // 清空li

        li.text(""); 
        // 内容仅有两种

        if(option.type == 'bool') {

            // 当前是告警

            if(option.status == 0) {

                li.addClass('elecircle-status-warn');

                _i = $('<i class="fa '+option.warn.icon+'"></i>');

                _a = $('<a>'+option.warn.text+'</a>');

            }else {

                li.removeClass('elecircle-status-warn');

                _i = $('<i class="fa '+option.normal.icon+'"></i>');

                _a = $('<a>'+option.normal.text+'</a>');

            }

            li.append(_i);

        }else if(option.type == 'list') {

            if(isFunction(option.imgCallback)) {

                var img = option.imgCallback(option.status);;

                _a.append(img);

            }

            var list = option.content.list[option.status]?option.content.list[option.status]:'未知';

            var txt = option.content.text+list;

            _a.append(txt);

        }else if(option.type == 'text') {

            var txt = option.content.text;

            _a.append(txt);

        }

        
        li.append(_a);

        
        if(option.notShow) {

            li.hide();

        }else {

            li.show();

        }

    };

    
    // 根据配置项的值获取

    // 显示

    _prop.show = function() {

        this.ele.show();

    };

    
    // 隐藏

    _prop.hide = function() {

        this.ele.hide();

    };

    
    // 根据设置状态内容

    _prop.setStatus = function(name, status, notShow) {

        var _itemList = this.ele.find('li');

        // 遍历配置项

        for(var i =0; i<this.options.length; i++) {

            var _opts = this.options[i];    // 获取当前循环的变量

            // 根据名称确定更改的内容

            if(_opts.name == name) {

                var _tmp = $.extend({}, _opts); // 获取全新对象，避免引用传递

                // 设置显示内容

                _tmp.status = status;

                
                // 设置是否显示

                if(notShow) {

                    _tmp.notShow = true;

                }else {

                    _tmp.notShow = false;

                }

                
                this._setLi(_itemList.eq(i), _tmp); // 更新li的内容

            }

        }



    };

    
    // 设置文本内容

    _prop.setText = function(name, text, notShow) {

        var _itemList = this.ele.find('li');

        // 遍历配置项

        for(var i =0; i<this.options.length; i++) {

            var _opts = this.options[i];    // 获取当前循环的变量

            // 根据名称确定更改的内容

            if(_opts.name == name) {

                var _tmp = $.extend({}, _opts); // 获取全新对象，避免引用传递

                _tmp.content.text = text;

                
                // 设置是否显示

                if(notShow) {

                    _tmp.notShow = true;

                }else {

                    _tmp.notShow = false;

                }

                
                this._setLi(_itemList.eq(i), _tmp); // 更新li的内容

            }

        }

    };

    
    // 更新配置项的值

    _prop.updateOpts = function(name, options, update) {

        // 遍历配置项

        for(var i =0; i<options.length; i++) {

            var _opts = options[i];    // 获取当前循环的变量

            // 根据名称确定更改的内容

            if(_opts.name == name) {

                $.extend(_opts, update);

            }

        }

    };

    
    //  8kw面板配置项

    var options8kw = [

        {

            name: 'workstatus',

            type: 'text',

            notShow: false,

            status: 0,

            content: {

                text: '设备状态：??'

            }

        },

        {

            name: 'stop',

            type: 'text',

            status: 0,

            notShow: false,

            content: {

                text: '终止原因：??'

            }

        },

        {

            name:'devVersion',

            type: 'text',

            status: 0,

            notShow: true,

            content: {

                text: '设备版本号：？？？'

            }

        },

        {

            name: 'signal',

            type: 'text',

            status: 0,

            notShow: true,

            content:  {

                text: '信号强度：'

            }

        }

    ];

    // 8kw配置项

    gl.circleStatus.kwOpts = options8kw;

    
    
    // 61850拓扑图状态

    var status = new Status($('#eleCircleStatus'), options8kw);

    gl.circleStatus.status = status;

})(jQuery, window, document, GLOBAL, undefined);



// 设置电池状态

// setTopGraphState(topgraph, topgraphInfo, 'discharge');

 Idce_Lithium/WebRoot/js/kw/topgraph.js

New file
@@ -0,0 +1,1760 @@
function TopGraph(container) {

    this.options = [];

    this.timer = '';

    this.eleImg = new Image();      // 电池图片

    this.rectifier = new Image();   // 整流器图片

    this.loader = new Image();      // 用地那负载图片

    this.init(container);

    // 开启自动刷新

    this.start();

}

// 初始化Canvas

TopGraph.prototype.init = function(container) {

    // 生成canvas

    this._createCanvas(container);

    // 基础配置

    this.base = {

        font: 16,               // 字体的大小

        color: '#000000',       // 字体的颜色

        strokeStyle: '#FF0000', // 边框的颜色

        lineWidth: 4,           // 边框的宽度

        fillStyle: '#EDEDED',   // 填充的颜色

    }

    // 规定双向箭头矩形的宽度和高度（带实线的为width）

    this.twoWayArrowOpts = {

        width: 50,

        height: 8,

    };



    // 规定双向箭头矩形的宽度和高度（带实线的为width）

    this.arrowOpts = {

        width: 60,

        height: 12,

    };



    // 开关的基本配置

    this.switchOpts = {

        width: 25,      // 线长度

        space: 40,

        radius: 4,

    };



    // 二极管的基本配置项

    this.diodeOpts = {

        width: 30,

    };

    // 电池图片

    this.eleImg.src = './image/eleCircle/elegroup.png';



    // 整流器

    this.rectifier.src = './image/eleCircle/screen.png';



    // 整流器

    this.loader.src = './image/eleCircle/load.png';



    // 移动点的基本配置

    this.moveArcOpts = {

        step: 3,    // 移动速度

    };

};



// 根据容器生成canvas

TopGraph.prototype._createCanvas = function(container) {

    // 获取容器的宽高

    var cInfo = {

        width: container.width(),

        height: container.height(),

    };

    var canvas = $('<canvas></canvas>');

    container.append(canvas);

    // 设置canvas

    this.canvas = canvas.get(0);

    this.context = this.canvas.getContext('2d');

    // 设置宽高

    this.canvas.width = cInfo.width;

    this.canvas.height = cInfo.height;

};



// 检测option是否options中存在

TopGraph.prototype._checkOption = function(option) {

    var result = false;

    // 检测配置项没有有id（当已存在配置项处理）, 下次刷新内容会消失

    if(typeof(option.id) == 'undefinded') {

        result = true;

    }else {

        var options = this.options;

        for(var i=0; i<options.length; i++) {

            var _options = options[i];

            if(_options.id == option.id) {

                this.options[i] = $.extend(true, {}, _options, option);

                result = true;

            }

        }

    }

    return result;

};



// 开始不断的更新

TopGraph.prototype.start = function() {

    var self = this;

    this.stop();

    this._update();

    this.timer = setInterval(function() {

        self._update();

    }, 100);

};

// 关闭更新

TopGraph.prototype.stop = function() {

    clearInterval(this.timer);

};



// 实时更新canvas

TopGraph.prototype._update = function() {

    var canvas = this.canvas;

    var context = this.context;

    var options = this.options;

    context.clearRect(0,0,canvas.width,canvas.height);

    // console.log(options);

    // 遍历并重新绘制内容

    for(var i=0; i<options.length; i++) {

        this._exe(options[i]);

    }

};



// 根据event执行方法

TopGraph.prototype._exe = function(option) {

    var event = option.event;

    if(typeof(event) != 'undefined' && typeof(this[event]) == 'function') {

        this[event](option);

    }

}



// 获取信息

TopGraph.prototype.getInfo = function(option) {

    var result;

    var event = option.event;

    switch(event) {

        case 'twoWayArrow':     // 双向箭头

            result = this._getTwoWayArrowInfo(option);

        break;

        case 'rect':        // 矩形的信息

            result = this._getRectInfo(option);

        break;

        case 'arrow':       // 单向箭头的信息

            result = this._getArrowInfo(option);

        break;

        case 'drawEle':     // 电池单体

            result = this._getImageInfo(option);

        break;

        case 'drawRectifier':   // 带圆角的矩形

            result = this._getImageInfo(option);

        break;

        case 'arc':     // 圆点

            result = this._arcInfo(option);

        break;

        case 'switch':  // 开关

            result = this._getSwitchInfo(option);

        break;

        case 'diode':   // 二极管

            result = this._getDiodeInfo(option);

        break;

    }

    return result;

}



// 修改配置项

TopGraph.prototype.change = function(id, option) {

    var options = this.options;

    // 判断id是否存在

    if(typeof(id) == 'undefined') {

        return;

    }

    // 遍历配置项

    for(var i=0; i<options.length; i++) {

        var _options = options[i];

        if(_options.id == id) {

            this.options[i] = $.extend(true, {}, _options, option);

        }

    }

};



// 获取配置项

TopGraph.prototype.getOption = function(id) {

    var result;

    var options = this.options;

    // 判断id是否存在

    if(typeof(id) == 'undefined') {

        return;

    }

    // 遍历配置项

    for(var i=0; i<options.length; i++) {

        var _options = options[i];

        if(_options.id == id) {

            result = $.extend(true, {}, _options);

        }

    }



    return result;

};



// 向options内添加配置项

TopGraph.prototype._push = function(option) {

    // 配置项没有添加到全局配置项中

    if(!this._checkOption(option)) {

        this.options.push(option);

    }

};



// 双向箭头

TopGraph.prototype.twoWayArrow = function(option) {

    var result;

    option = $.extend({}, this.base, option);

    option.event = 'twoWayArrow';

    // 根据direct生成双向箭头

    switch (option.direct) {

        case 'row': // 横向

            result = this._twoWayArrowRow(option);

        break;

        default:    // 纵向

            result = this._twoWayArrowCol(option);

        break;

    }



    // 配置项没有添加到全局配置项中

    this._push(option);



    // 返回双向箭头的顶点

    return result;

};



// 获取双向箭头的信息

TopGraph.prototype._getTwoWayArrowInfo = function(option) {

    var result;

    // 根据direct生成双向箭头

    switch (option.direct) {

        case 'row': // 横向

            result = this._getTwoWayArrowRowInfo(option);

        break;

        default:    // 纵向

            result = this._getTwoWayArrowColInfo(option);

        break;

    }



    return result;

};



// 横向的双箭头

TopGraph.prototype._twoWayArrowRow = function(option) {

    var point = option.point;

    var context = this.context;

    var opts = this.twoWayArrowOpts;      // 双箭头的基本配置项

    
    var x = point.x;

    var y = point.y;



    context.beginPath();

    // 箭头的开始

    context.moveTo(x, y);

    // 箭头第一个拐点

    x = x+opts.height*1.5;

    y = y-opts.height*1.5;

    context.lineTo(x,y);

    // 箭头第二个拐点

    y = y+opts.height;

    context.lineTo(x,y);

    // 箭头第三个拐点

    x = x+opts.width;

    context.lineTo(x,y);

    // 箭头第四个拐点

    y = y-opts.height;

    context.lineTo(x,y);

    // 箭头第五个拐点

    x = x+opts.height*1.5;

    y = y+opts.height*1.5;

    context.lineTo(x,y);

    // 箭头第六个拐点

    x = x-opts.height*1.5;

    y = y+opts.height*1.5;

    context.lineTo(x,y);

    // 箭头第七个拐点

    y = y-opts.height;

    context.lineTo(x,y);

    // 箭头第八个拐点

    x = x-opts.width;

    context.lineTo(x,y);

    // 箭头第九个拐点

    y = y+opts.height;

    context.lineTo(x,y);

    // 绘制结束闭合回路

    context.closePath();



    // 设置边框颜色

    context.strokeStyle = option.strokeStyle;

    context.lineWidth = option.lineWidth;

    // 绘制

    context.stroke();



    // 返回重要点信息

    return this._getTwoWayArrowRowInfo(option);

};



// 获取横向双向箭头的信息

TopGraph.prototype._getTwoWayArrowRowInfo = function(option) {

    var point = option.point;

    var result = {

        start: {

            x: point.x,

            y: point.y,

        },

        end: {

            x: point.x,

            y: point.y,

        },

    };

    var opts = this.twoWayArrowOpts;

    result.end.x = point.x+opts.width+opts.height*2;

    return result;

};



// 纵向双向箭头

TopGraph.prototype._twoWayArrowCol = function(option) {

    var context = this.context;

    var point = option.point;

    var opts = this.twoWayArrowOpts;      // 双箭头的基本配置项

    var x = point.x;

    var y = point.y;

    context.beginPath();

    // 箭头的开始

    context.moveTo(x, y);

    // 箭头第一个拐点

    x = x+opts.height*1.5;

    y = y+opts.height*1.5;

    context.lineTo(x,y);

    // 箭头第二个拐点

    x = x-opts.height;

    context.lineTo(x,y);

    // 箭头第三个拐点

    y = y+opts.width;

    context.lineTo(x,y);

    // 箭头第四个拐点

    x = x+opts.height;

    context.lineTo(x,y);

    // 箭头第五个拐点

    x = x-opts.height*1.5;

    y = y+opts.height*1.5;

    context.lineTo(x,y);

    // 箭头第六个拐点

    x = x-opts.height*1.5;

    y = y-opts.height*1.5;

    context.lineTo(x,y);

    // 箭头第七个拐点

    x = x+opts.height;

    context.lineTo(x,y);

    // 箭头第八个拐点

    y = y-opts.width;

    context.lineTo(x,y);

    // 箭头第九个拐点

    x = x-opts.height;

    context.lineTo(x,y);

    // 绘制结束闭合回路

    context.closePath();



    // 设置边框颜色

    context.strokeStyle = option.strokeStyle;

    context.lineWidth = option.lineWidth;

    // 绘制

    context.stroke();



    // 返回信息

    return this._getTwoWayArrowColInfo(option);

};



// 获取纵向双向箭头的信息

TopGraph.prototype._getTwoWayArrowColInfo = function(option) {

    var point = option.point;

    var result = {

        start: {

            x: point.x,

            y: point.y,

        },

        end: {

            x: point.x,

            y: point.y,

        },

    };

    var opts = this.twoWayArrowOpts;

    result.end.y = point.y+opts.width+opts.height*2;

    return result;

};



// 绘制单向箭头

TopGraph.prototype.arrow = function(option) {

    var result;

    option = $.extend({}, this.base, option);

    option.event = 'arrow';

    switch(option.direct) {

        case 'down':

            result = this._arrowDown(option);

        break;

        default:

            result = this._arrowUp(option);

        break;

    }



    // 添加配置项到全局

    this._push(option);



    // 返回重要点的信息

    return result;

};



// 获取单向箭头的信息

TopGraph.prototype._getArrowInfo = function(option) {

    var result;

    switch(option.direct) {

        case 'down':

            result = this._getArrowDownInfo(option);

        break;

        default:

            result = this._getArrowUpInfo(option);

        break;

    }



    return result;

}





// 箭头再上方

TopGraph.prototype._arrowUp = function(option) {

    var context = this.context;

    var point = option.point;

    var opts = this.arrowOpts;      // 双箭头的基本配置项

    var x = point.x;

    var y = point.y;

    context.beginPath();

    // 箭头的开始

    context.moveTo(x, y);

    // 箭头第一个拐点

    x = x+opts.height*1.5;

    y = y+opts.height*1.5;

    context.lineTo(x, y);

    // 箭头的第二个拐点

    x = x-opts.height;

    context.lineTo(x, y);

    // 箭头第四个拐点

    y = y+opts.width;

    context.lineTo(x, y);

    // 箭头第四个拐点

    x = x-opts.height;

    context.lineTo(x, y);

    // 箭头第五个拐点

    y = y-opts.width;

    context.lineTo(x, y);

    // 箭头第六个拐点

    x = x-opts.height;

    context.lineTo(x, y);



    // 绘制结束闭合回路

    context.closePath();

    // 设置边框颜色

    context.strokeStyle = option.strokeStyle;

    context.lineWidth = option.lineWidth;

    // 绘制

    context.stroke();



    // 返回重要的点

    return this._getArrowUpInfo(option);

};



// 获取向上箭头的信息

TopGraph.prototype._getArrowUpInfo = function(option) {

    var point = option.point;

    var opts = this.arrowOpts;

    var result = {

        top: {

            x: point.x,

            y: point.y,

        },

        bottom: {

            x: point.x,

            y: point.y+opts.width+opts.height*1.5,

        }

    };

    return result;

};

// 箭头在下方

TopGraph.prototype._arrowDown = function(option) {

    var context = this.context;

    var point = option.point;

    var opts = this.arrowOpts;      // 双箭头的基本配置项

    var x = point.x-opts.height/2;

    var y = point.y;

    context.beginPath();

    // 箭头的开始

    context.moveTo(x, y);

    // 箭头第一个拐点

    x = x+opts.height;

    context.lineTo(x, y);

    // 箭头的第二个拐点

    y = y+opts.width;

    context.lineTo(x, y);

    // 箭头第四个拐点

    x = x+opts.height;

    context.lineTo(x, y);

    // 箭头第四个拐点

    x = x-opts.height*1.5;

    y = y+opts.height*1.5;

    context.lineTo(x, y);

    // 箭头第五个拐点

    x = x-opts.height*1.5;

    y = y-opts.height*1.5;

    context.lineTo(x, y);

    // 箭头第六个拐点

    x = x+opts.height;

    context.lineTo(x, y);



    // 绘制结束闭合回路

    context.closePath();

    // 设置边框颜色

    context.strokeStyle = option.strokeStyle;

    context.lineWidth = option.lineWidth;

    // 绘制

    context.stroke();



    // 返回重要的点

    return this._getArrowDownInfo(option);

};



// 获取向上箭头的信息

TopGraph.prototype._getArrowDownInfo = function(option) {

    var point = option.point;

    var opts = this.arrowOpts;

    var result = {

        top: {

            x: point.x,

            y: point.y,

        },

        bottom: {

            x: point.x,

            y: point.y+opts.width+opts.height*1.5,

        }

    };

    return result;

};





// 绘制矩形

TopGraph.prototype.rect = function(option) {

    var context = this.context;

    var point = option.point;

    option = $.extend({}, this.base, option);

    option.event = 'rect';

    // 开始绘制

    context.beginPath();

    context.rect(point.x, point.y, option.width, option.height);

    // 绘制结束闭合回路

    context.closePath();



    // 填充背景的颜色

    context.fillStyle = option.fillStyle;

    // 绘制矩形

    context.fill();

    
    // 绘制文字

    var textOpts = {

        point: {

            x: point.x+option.width/2,

            y: point.y+option.height/2,

        },

        text: option.text

    };

    this.text(textOpts);



    // 外边框的颜色

    context.strokeStyle = option.strokeStyle;

    context.stroke();



    // 配置项没有添加到全局配置项中

    this._push(option);



    // 返回重要的点信息(正方形的上,右,下,左的中点)

    return this._getRectInfo(option);

};



TopGraph.prototype._getRectInfo = function(option) {

    var point = option.point;

    var result = {

        top: {

            x: point.x+option.width/2,

            y: point.y,

        },

        right: {

            x: point.x+option.width,

            y: point.y+option.height,

        },

        bottom:{

            x: point.x+option.width/2,

            y: point.y+option.height,

        },

        left:{

            x: point.x,

            y: point.y+option.height/2,

        }

    };



    return result;

};



// 设置文字

TopGraph.prototype.setText = function(option) {

    var point = option.point;

    option = $.extend({}, this.base, option);

    option.event = 'setText';

    // 设置文本

    this.text({

        point: {

            x: point.x,

            y: point.y

        },

        text: option.text,

        font: option.font,

        color: option.color

    });



    // 配置项没有添加到全局配置项中

    this._push(option);

};



// 绘制文字

TopGraph.prototype.text = function(option) {

    option = $.extend({}, this.base, option);

    // option.event = 'text';



    this._formaterText(option);

    // 配置项没有添加到全局配置项中

    this._push(option);

}

// 对绘制的文字进行处理

TopGraph.prototype._formaterText = function(option) {

    var texts = option.text.split('&');

    var font = option.font;

    var startY = option.point.y-texts.length*font/2;

    for(var i=0; i<texts.length; i++) {

        var text = texts[i];

        var tmp = $.extend({}, option);

        tmp.text = texts[i];

        tmp.point.y = startY+font*i;

        this._centerText(tmp);

    }

}

// 绘制起始点向两边发散的文字

TopGraph.prototype._centerText = function(option) {

    var context = this.context;

    var point = option.point;

    var font = option.font;

    var x = point.x;

    var y = point.y;

    x = x-option.text.length*font/2;

    y = y+font/2;

    context.font = font+'px Verdana';

    context.fillStyle = option.color;

    context.lineWidth = 1;

    context.fillText(option.text, x, y);

}



// 绘制图片

TopGraph.prototype.drawImage = function(image, option) {

    var context = this.context;

    var point = option.point;

    context.drawImage(image, point.x, point.y, option.width, option.height);





    // 返回重要点的信息

    return this._getImageInfo(option);

};



// 获取电池重要点的信息

TopGraph.prototype._getImageInfo = function(option) {

    var point = option.point;

    var result = {

        pos: {  // 正极

            x: point.x+10,

            y: point.y+3,

        },

        neg: {  // 负极

            x: point.x+option.width-10,

            y: point.y+3,

        },

        top: {

            x: point.x+option.width/2,

            y: point.y,

        },

        right: {

            x: point.x+option.width,

            y: point.y+option.height/2,

        },

        bottom: {

            x: point.x+option.width/2,

            y: point.y+option.height,

        },

        left: {

            x: point.x,

            y: point.y+option.height/2,

        },

    };

    
    return result;

};



// 绘制电池

TopGraph.prototype.drawEle = function(option) {

    var point = option.point;

    var start = option.start;

    var end = option.end;

    var startY = start.y;

    var endY = end.y;

    option = $.extend({}, this.base, option);

    option.event = 'drawEle';

    var imageOpts = {

        point:{

            x: point.x,

            y: point.y,

        },

        width: option.width,

        height: option.height,

    };



    // 判断是否移动

    if(option.move) {

        if(option.y == startY) {

            option.y = endY;

            imageOpts.point.y = endY;

        }else{

            option.y = startY;

            imageOpts.point.y = startY;

        }

    }

    // 绘制图片

    var result = this.drawImage(this.eleImg, imageOpts);



    var textOpts = {

        point: {

            x: point.x+imageOpts.width/2+4,

            y: point.y+imageOpts.height+2,

        },

        font: 14,

        text: option.num+'#'

    }



    this.text(textOpts);



    // 配置项没有添加到全局配置项中

    this._push(option);



    // 返回重要点信息

    return result;

};



// 绘制电池组

TopGraph.prototype.drawEles = function(option) {

    var point = option.point;

    var x = point.x;

    var y = point.y;

    var width = this.canvas.width-x*2;

    var step = Math.floor(width/(option.num-1));

    var eleInfos = [];

    for(var i=0; i<option.num; i++) {

        // 绘制双向箭头

        var twoWayArrow = this.twoWayArrow({

            id: 'twoWayArrow'+(i+1),

            point: {

                x: x,

                y: y,

            },

            lineWidth: 1,

            strokeStyle: '#637DAB'

        });

        // 绘制电池

        var eleInfo = this.drawEle({

            id: 'ele'+(i+1),

            start: {

                x: x-25,

                y: twoWayArrow.end.y+8,

            },

            end: {

                x: x-25,

                y: twoWayArrow.end.y+10,

            },

            point: {

                x: x-25,

                y: twoWayArrow.end.y+8,

            },

            y: twoWayArrow.end.y+8,

            width: 50,

            height: 49,

            move: false,

            num: i+1,

        });

        eleInfos.push(eleInfo);

        x += step;

    }

    // console.log(eleInfos);

    // 绘制两个电池之间的线

    for(var i=1; i<eleInfos.length; i++) {

        var start = eleInfos[i-1].neg;

        var end  = eleInfos[i].pos;

        var lineOpts = {

            id: 'eleLine'+(i+1),

            start: start,

            end: end,

            lineWidth: 1,

            strokeStyle: '#000000'

        };

        this.drawLine(lineOpts);

    }



};



// 绘制整流器

TopGraph.prototype.drawRectifier = function(option) {

    var point = option.point;

    option = $.extend({}, this.base, option);

    option.event = 'drawRectifier';

    var imageOpts = {

        point:{

            x: point.x,

            y: point.y,

        },

        width: option.width,

        height: option.height,

    };

    
    // 绘制图片

    var result = this.drawImage(this.rectifier, imageOpts);

    
    // 添加文字

    this.text({

        text: '整&流&器',

        point: {

            x: result.right.x+8,

            y: result.right.y

        }

    });



    // 添加正负极

    this.text({

        text: '-',

        point: {

            x: result.top.x-15,

            y: result.top.y

        },

        font: 24

    });



    // 添加正负极

    this.text({

        text: '+',

        point: {

            x: result.bottom.x-15,

            y: result.bottom.y+12

        },

        font: 24,

        color: '#FF0000'

    });



    // 配置项添加到全局配置项中

    this._push(option);



    // 返回重要点信息

    return result;

};



// 绘制用电负载

TopGraph.prototype.drawLoader = function(option) {

    var point = option.point;

    option = $.extend({}, this.base, option);

    option.event = 'drawLoader';

    var imageOpts = {

        point:{

            x: point.x,

            y: point.y,

        },

        width: option.width,

        height: option.height,

    };

    
    // 绘制图片

    var result = this.drawImage(this.loader, imageOpts);

    
    // 添加文字

    this.text({

        text: '用&电&负&载',

        point: {

            x: result.right.x+8,

            y: result.right.y

        }

    });



    // 添加正负极

    this.text({

        text: '-',

        point: {

            x: result.top.x-15,

            y: result.top.y

        },

        font: 24

    });



    // 添加正负极

    this.text({

        text: '+',

        point: {

            x: result.bottom.x-15,

            y: result.bottom.y+12

        },

        font: 24,

        color: '#FF0000'

    });



    // 配置项没有添加到全局配置项中

    this._push(option);



    // 返回重要点信息

    return result;

};



// 绘制电池组

TopGraph.prototype.drawEleGroup = function(option) {

    var result;

    option = $.extend({}, this.base, option);

    option.event = 'drawEleGroup';

    switch(option.direct) {

        case 'down':

            result = this._drawEleGroupDown(option);

        break;

        default:

            result = this._drawEleGroupUp(option);

        break;

    }



    return result;

}



// 绘制正极在上的电池组

TopGraph.prototype._drawEleGroupUp = function(option) {

    var point = option.point;

    // 电池组1

    var image1 = {

        point:{

            x: point.x,

            y: point.y,

        },

        width: option.width,

        height: option.height,

    };

    // 绘制图片

    var image1Info = this.drawImage(this.eleImg, image1);



    // 绘制虚线

    var dotLine = {

        start: {

            x: image1Info.bottom.x,

            y: image1Info.bottom.y

        },

        end: {

            x: image1Info.bottom.x,

            y: image1Info.bottom.y+20

        }

    };



    // 绘制线条

    this.drawDotLine(dotLine);

    
    // 电池组2

    var image2 = {

        point:{

            x: dotLine.end.x-option.width/2,

            y: dotLine.end.y,

        },

        width: option.width,

        height: option.height,

    };

    // 绘制图片

    var image2Info = this.drawImage(this.eleImg, image2);



    // 添加文字

    this.text({

        text: '电&池&组',

        point: {

            x: image1Info.right.x+12,

            y: image1Info.bottom.y+10

        }

    });



    // 绘制正极

    this.text({

        text: '+',

        point: {

            x: image1Info.top.x-15,

            y: image1Info.top.y-4

        },

        font: 24,

        color: "#FF0000"

    });



    // 绘制负极

    this.text({

        text: '-',

        point: {

            x: image2Info.bottom.x-15,

            y: image2Info.bottom.y+20

        },

        font: 24

    });



    // 配置项添加到全局配置项中

    this._push(option);



    return {

        top: {

            x: image1Info.top.x,

            y: image1Info.top.y

        },

        bottom: {

            x: image2Info.bottom.x,

            y: image2Info.bottom.y

        }

    }

}



// 绘制正极在上的电池组

TopGraph.prototype._drawEleGroupDown = function(option) {

    var point = option.point;

    // 电池组1

    var image1 = {

        point:{

            x: point.x,

            y: point.y,

        },

        width: option.width,

        height: option.height,

    };

    // 绘制图片

    var image1Info = this.drawImage(this.eleImg, image1);



    // 绘制虚线

    var dotLine = {

        start: {

            x: image1Info.bottom.x,

            y: image1Info.bottom.y

        },

        end: {

            x: image1Info.bottom.x,

            y: image1Info.bottom.y+20

        }

    };



    // 绘制线条

    this.drawDotLine(dotLine);

    
    // 电池组2

    var image2 = {

        point:{

            x: dotLine.end.x-option.width/2,

            y: dotLine.end.y,

        },

        width: option.width,

        height: option.height,

    };

    // 绘制图片

    var image2Info = this.drawImage(this.eleImg, image2);



    // 添加文字

    this.text({

        text: '电&池&组',

        point: {

            x: image1Info.right.x+12,

            y: image1Info.bottom.y+10

        }

    });



    // 绘制负极

    this.text({

        text: '-',

        point: {

            x: image1Info.top.x-15,

            y: image1Info.top.y-4

        },

        font: 24

    });



    // 绘制正极

    this.text({

        text: '+',

        point: {

            x: image2Info.bottom.x-15,

            y: image2Info.bottom.y+20

        },

        font: 24,

        color: '#FF0000'

    });



    // 配置项添加到全局配置项中

    this._push(option);



    return {

        top: {

            x: image1Info.top.x,

            y: image1Info.top.y

        },

        bottom: {

            x: image2Info.bottom.x,

            y: image2Info.bottom.y

        }

    }

}



// 绘制线条

TopGraph.prototype.drawLine = function(option) {

    var context = this.context;

    var start = option.start;

    var end = option.end;

    option = $.extend({}, this.base, option);

    option.event = 'drawLine';

    context.beginPath();

    context.moveTo(start.x, start.y);

    context.lineTo(end.x, end.y);

    context.lineWidth = option.lineWidth;

    context.strokeStyle = option.strokeStyle;

    context.stroke();



    // 添加配置项到全局配置

    this._push(option);

};



// 绘制线条组

TopGraph.prototype.drawLines = function(option) {

    var points = option.points;

    option = $.extend({}, this.base, option);

    var base = {

        lineWidth: option.lineWidth,

        strokeStyle: option.strokeStyle,

    };

    // 遍历points

    for(var i=0; i<points.length; i++) {

        var point = points[i];

        var _option = $.extend({}, base, point);

        _option.id = option.id+i;

        this.drawLine(_option);

    }

};



// 绘制虚线

TopGraph.prototype.drawDotLine = function(option) {

    var context = this.context;

    var start = option.start;

    var end = option.end;

    option = $.extend({}, this.base, option);

    option.event = 'drawDotLine';

    context.setLineDash([2, 2]);

    context.beginPath();

    context.moveTo(start.x, start.y);

    context.lineTo(end.x, end.y);

    context.lineWidth = option.lineWidth;

    context.strokeStyle = option.strokeStyle;

    context.stroke();

    this.context.setLineDash([]);    // 恢复实线



    // 添加配置项到全局配置

    this._push(option);

}





// 绘制圆角矩形

TopGraph.prototype.roundRect = function(option) {

    var context = this.context;

    var point = option.point;

    var x = point.x;

    var y = point.y;

    var w = option.width;

    var h = option.height;

    var r = option.radius;

    option = $.extend({}, this.base, option);

    option.event = 'roundRect';

    // 设置圆角

    if (w < 2 * r) {r = w / 2;}

    if (h < 2 * r){ r = h / 2;}

    context.beginPath();

    context.moveTo(x+r, y);

    context.arcTo(x+w, y, x+w, y+h, r);

    context.arcTo(x+w, y+h, x, y+h, r);

    context.arcTo(x, y+h, x, y, r);

    context.arcTo(x, y, x+w, y, r);

    context.closePath();

    context.fillStyle = option.fillStyle;

    context.fill();



    var textOpts = {

        point: {

            x: x+w/2,

            y: y+h/2,

        },

        text: option.text,

    };

    this.text(textOpts);

    context.strokeStyle = option.strokeStyle;

    context.stroke();



    // 将配置项添加到全局配置中

    this._push(option);



    return this._getRectInfo(option);

};



// 绘制圆点

TopGraph.prototype.arc = function(option) {

    // console.log(option);

    var context = this.context;

    var point = option.point;

    option = $.extend({}, this.base, option);

    // 开始绘制

    context.beginPath();

    context.fillStyle = option.fillStyle;

    context.arc(point.x, point.y, option.radius,0,2*Math.PI);

    context.fill();



    // 返回点的重要信息

    return this._arcInfo(option);

};



// 绘制会移动的圆点

TopGraph.prototype.moveArc = function(option) {

    option = $.extend({}, this.base, option);

    option.event = 'moveArc';

    // 根据start和end点计算运动方向

    var start = option.start;

    var end = option.end;

    // 横向运动

    if(start.y == end.y) {

        // 向右移动

        if(start.x < end.x) {

            option.direct = "right";

        }else {

            option.direct = "left";

        }

    }else {

        // 向下运动

        if(start.y < end.y) {

            option.direct = "down";

        }else {

            option.direct = "up"; 
        }

    }

    // 选择运动方法

    switch(option.direct) {

        case 'left':

            this._moveArcLeft(option);

        break;

        case 'right':

            this._moveArcRight(option);

        break;

        case 'down':

            this._moveArcDown(option);

        break;

        default:        // 默认向上移动

            this._moveArcUp(option);

        break;

    }



    // 添加配置项到全局中

    this._push(option);

};

// 绘制向下移动的点

TopGraph.prototype._moveArcLeft = function(option) {

    var opts = this.moveArcOpts;

    var point = option.point;

    var start = option.start;

    var end = option.end;

    var x = point.x-opts.step;

    if(x<=end.x-opts.step) {

        option.point.x = start.x;

    }else {

        option.point.x = x; 
    }

    this.arc(option);

};



// 绘制向下移动的点

TopGraph.prototype._moveArcRight = function(option) {

    var opts = this.moveArcOpts;

    var point = option.point;

    var start = option.start;

    var end = option.end;

    var x = point.x+opts.step;

    if(x>=end.x+opts.step) {

        option.point.x = start.x;

    }else {

        option.point.x = x; 
    }

    this.arc(option);

};



// 绘制向上移动的点

TopGraph.prototype._moveArcUp = function(option) {

    var opts = this.moveArcOpts;

    var point = option.point;

    var start = option.start;

    var end = option.end;

    var y = point.y-opts.step;

    if(y<=end.y-opts.step) {

        option.point.y = start.y;

    }else {

        option.point.y = y; 
    }

    this.arc(option);

};



// 绘制向下移动的点

TopGraph.prototype._moveArcDown = function(option) {

    var opts = this.moveArcOpts;

    var point = option.point;

    var start = option.start;

    var end = option.end;

    var y = point.y+opts.step;

    if(y>=end.y+opts.step) {

        option.point.y = start.y;

    }else {

        option.point.y = y; 
    }

    this.arc(option);

};



// 获取圆圈的重要点信息

TopGraph.prototype._arcInfo = function(option) {

    var point = option.point;

    var radius = option.radius;

    var num = Math.SQRT2/2*radius;

    var result = {

        center: {

            x: point.x,

            y: point.y,

        },

        top: {

            x: point.x,

            y: point.y-radius

        },

        tright: {

            x: point.x+num,

            y: point.y-num, 
        },

        right: {

            x: point.x+radius,

            y: point.y,

        },

        rbottom: {

            x: point.x+num,

            y: point.y+num,

        },

        bottom: {

            x: point.x,

            y: point.y+radius,

        },

        bleft: {

            x: point.x-num,

            y: point.y+num,

        },

        left: {

            x: point.x-radius,

            y: point.y,

        },

        ltop: {

            x: point.x-num,

            y: point.y-num,

        }

    };



    return result;

};



// 绘制开关

TopGraph.prototype.switch = function(option) {

    var result;

    option = $.extend({}, this.base, option);

    option.event = 'switch';

    // 根据方向绘制内容

    switch(option.direct) {

        case 'left':

            result = this._switchLeft(option);

        break;

        default:

            result = this._switchDown(option);

        break;

    }



    // 添加配置项到全局配置项

    this._push(option);



    // 返回重要点信息

    return result;

};



// 获取开关的重要信息

TopGraph.prototype._getSwitchInfo = function(option) {

    var result;

    // 根据方向获取信息

    switch(option.direct) {

        case 'left':

            result = this._getSwitchRow(option);

        break;

        default:

            result = this._getSwitchCol(option);

        break;

    }

    // 返回重要点信息

    return result;

};



// 开关在下方

TopGraph.prototype._switchDown = function(option) {

    var point = option.point;

    var opts = this.switchOpts;

    var lineStyle = option.lineStyle;

    var arcStyle = option.arcStyle;

    // 线line1

    var line1 = {

        start: {

            x: point.x,

            y: point.y,

        },

        end: {

            x: point.x,

            y: point.y+opts.width,

        },

        lineWidth: lineStyle.lineWidth,

        strokeStyle: lineStyle.strokeStyle,

    };

    // 绘制线line1

    this.drawLine(line1);



    // 圆点arc1

    var arc1 = {

        point: {

            x: line1.end.x,

            y: line1.end.y+opts.radius,

        },

        radius: opts.radius,

        fillStyle: arcStyle.fillStyle,

        strokeStyle: arcStyle.strokeStyle

    };

    // 绘制圆点arc1

    var arc1Info = this.arc(arc1);



    // 圆点arc2

    var arc2 = {

        point: {

            x: point.x,

            y: point.y+opts.width+opts.space-opts.radius,

        },

        radius: opts.radius,

        fillStyle: arcStyle.fillStyle,

        strokeStyle: arcStyle.strokeStyle

    };

    // 绘制圆点arc2

    var arc2Info = this.arc(arc2);

    // 线line2

    var line2 = {

        start: {

            x: point.x,

            y: arc2Info.bottom.y,

        },

        end: {

            x: point.x,

            y: arc2Info.bottom.y+opts.width,

        },

        lineWidth: lineStyle.lineWidth,

        strokeStyle: lineStyle.strokeStyle,

    };

    // 绘制线line2

    this.drawLine(line2);



    // 线line3

    var line3;

    // 根据开关状态绘制开关

    switch(option.state) {

        case 'close':

            line3 = {

                start: {

                    x: arc2Info.tright.x,

                    y: arc2Info.tright.y,

                },

                end: {

                    x: arc1Info.rbottom.x,

                    y: arc1Info.rbottom.y

                },

                strokeStyle: lineStyle.strokeStyle,

                lineWidth: lineStyle.lineWidth,

            };

        break;

        default:

            line3 = {

                start: {

                    x: arc2Info.tright.x,

                    y: arc2Info.tright.y,

                },

                end: {

                    x: arc1Info.center.x+20,

                    y: arc1Info.center.y

                },

                strokeStyle: lineStyle.strokeStyle,

                lineWidth: lineStyle.lineWidth,

            };

        break;

    }

    // 绘制线line3

    this.drawLine(line3);

    
    // 返回重要点信息

    return this._getSwitchCol(option);

};



// 开关在左侧

TopGraph.prototype._switchLeft = function(option) {

    var point = option.point;

    var opts = this.switchOpts;

    var lineStyle = option.lineStyle;

    var arcStyle = option.arcStyle;



    // 线line1

    var line1 = {

        start: {

            x: point.x,

            y: point.y,

        },

        end: {

            x: point.x+opts.width,

            y: point.y,

        },

        lineWidth: lineStyle.lineWidth,

        strokeStyle: lineStyle.strokeStyle,

    };

    // 绘制线line1

    this.drawLine(line1);



    // 圆点arc1

    var arc1 = {

        point: {

            x: line1.end.x+opts.radius,

            y: line1.end.y,

        },

        radius: opts.radius,

        fillStyle: arcStyle.fillStyle,

        strokeStyle: arcStyle.strokeStyle

    };

    // 绘制圆点arc1

    var arc1Info = this.arc(arc1);



    // 圆点arc2

    var arc2 = {

        point: {

            x: point.x+opts.width+opts.space-opts.radius,

            y: point.y,

        },

        radius: opts.radius,

        fillStyle: arcStyle.fillStyle,

        strokeStyle: arcStyle.strokeStyle

    };

    // 绘制圆点arc2

    var arc2Info = this.arc(arc2);



    // 线line2

    var line2 = {

        start: {

            x: arc2Info.right.x,

            y: arc2Info.right.y,

        },

        end: {

            x: arc2Info.right.x+opts.width,

            y: arc2Info.right.y,

        },

        lineWidth: lineStyle.lineWidth,

        strokeStyle: lineStyle.strokeStyle,

    };

    // 绘制线line2

    this.drawLine(line2);



    // 线line3

    var line3;

    // 根据开关状态绘制开关

    switch(option.state) {

        case 'close':

            line3 = {

                start: {

                    x: arc2Info.right.x,

                    y: arc2Info.right.y,

                },

                end: {

                    x: arc1Info.ltop.x,

                    y: arc1Info.ltop.y

                },

                strokeStyle: lineStyle.strokeStyle,

                lineWidth: lineStyle.lineWidth,

            };

        break;

        default:

            line3 = {

                start: {

                    x: arc1Info.right.x,

                    y: arc1Info.right.y,

                },

                end: {

                    x: arc2Info.center.x,

                    y: arc2Info.center.y-20

                },

                strokeStyle: lineStyle.strokeStyle,

                lineWidth: lineStyle.lineWidth,

            };

            this.drawDotLine({

                start: {

                    x: line3.end.x,

                    y: line3.end.y,

                },

                end: {

                    x: arc2Info.top.x,

                    y: arc2Info.top.y,

                }

            });

        break;

    }

    // 绘制线line3

    this.drawLine(line3);



    // 返回重要点信息

    return this._getSwitchRow(option);

}; 


// 获取开关的重要点

TopGraph.prototype._getSwitchCol = function(option) {

    var point = option.point;

    var opts = this.switchOpts;

    var result = {

        top: {

            x: point.x,

            y: point.y,

        },

        bottom: {

            x: point.x,

            y: point.y+opts.width*2+opts.space,

        }

    };



    return result;

};



// 获取开关的重要点

TopGraph.prototype._getSwitchRow = function(option) {

    var point = option.point;

    var opts = this.switchOpts;

    var result = {

        left: {

            x: point.x,

            y: point.y,

        },

        right: {

            x: point.x+opts.width*2+opts.space,

            y: point.y,

        }

    };



    return result;

};



// 绘制二极管

TopGraph.prototype.diode = function(option) {

    var result;

    option = $.extend({}, this.base, option);

    option.event = 'diode';

    switch(option.direct) {

        default:

            result = this._diodeUp(option);

        break;

    }



    // 添加配置项到全局配置项

    this._push(option);



    // 返回重要点信息

    return result;

};

// 获取二极管重要点信息

TopGraph.prototype._getDiodeInfo = function(option) {

    var result;

    switch(option.direct) {

        default:

            result = this._getDiodeCol(option);

        break;

    }



    // 返回重要点信息

    return result;

};

// 向上的二极管

TopGraph.prototype._diodeUp = function(option) {

    var context = this.context;

    var point = option.point;

    var opts = this.diodeOpts;

    var ht = Math.sqrt(3)*opts.width/2;

    // 绘制上方的横线

    context.beginPath();

    context.moveTo(point.x-opts.width/2, point.y);

    context.lineTo(point.x+opts.width/2, point.y);

    // 设置样式

    context.strokeStyle = option.strokeStyle;

    // 绘制

    context.stroke();



    // 开始绘制三角形

    context.beginPath();

    context.moveTo(point.x, point.y);

    context.lineTo(point.x-opts.width/2, point.y+ht);

    context.lineTo(point.x+opts.width/2, point.y+ht);

    // 闭合回路

    context.closePath();

    // 设置样式

    context.fillStyle = option.fillStyle;

    // 绘制

    context.fill();



    // 返回重要点信息

    return this._getDiodeCol(option);

};



// 获取二极管的信息

TopGraph.prototype._getDiodeCol = function(option) {

    var point = option.point;

    var opts = this.diodeOpts;

    var ht = Math.sqrt(3)*opts.width/2;

    var result = {

        top: {

            x: point.x,

            y: point.y,

        },

        bottom: {

            x: point.x,

            y: point.y+ht,

        }

    };



    return result;

};

// 根据id正则匹配删除元素

TopGraph.prototype.del = function(reg) {

    var options = this.options;

    for(var i=0; i<options.length; i++) {

        var option = options[i];

        if(reg.test(option.id)) {

            this.options.splice(i, 1);

            i=0;

        }

    }

};




 Idce_Lithium/WebRoot/pages/css/page.css

New file
@@ -0,0 +1,184 @@
.page-filter-title {

    height: 32px;

    line-height: 32px;

    font-weight: bold;

    text-align: center;

    background: url('../../image/table_th_bg.gif') repeat-x;

}

.page-filter-content table {

    width: 100%;

    border-collapse: collapse;

}

.page-filter-content table th {

    text-align: center;

}

.page-filter-content table th,

.page-filter-content table td {

    border: 1px solid #ccc;

}

.page-filter-content table th {

    height: 32px;

}



.page-filter-content .layui-form-item {

    margin-bottom: 0;

}

.page-filter-content .layui-input-block {

    margin-left: 0;

}

.page-filter-content .layui-input,

.page-filter-content .layui-select {

    border: 0;

}



.layui-form-select .my-layui-clear {

    display: none;

}

.layui-form-selected .my-layui-clear {

    display: inline-block;

    position: absolute;

    right: 30px;

    top: 50%;

    margin-top: -5px;

    cursor: pointer;

}



.layui-table-view {

    margin-bottom: 0;

}



.layui-table thead tr {

    color: #000;

    font-weight: bold;

    background: url('../../image/table_th_bg.gif') repeat-x;

}

.layui-table-view .layui-table th {

    padding: 2px 0;

}

.layui-table td, 
.layui-table th {

    border-color: #ccc;

}



.layui-layer-title {

    height: 30px;

    line-height: 30px;

    font-weight: bold;

    background: url('../../image/table_th_bg.gif') repeat-x;

}

.layui-layer-setwin {

    top: 9px;

}



/* 分页样式 */

#paging{

    padding:6px 0;

    font-size: 14px;

    background:url(../../image/table_th_bg.gif) repeat-x;

    text-align: center;

}

#paging input{

    width:28px;

    height:24px;

    border:1px solid #00FFFF;

}

#paging span{

    margin-left:20px;

}

#paging a{

    margin-left:10px;

}

#paging .input_container{

    width:100%;

}



/* tpl-params */

.tpl-params {

    display: flex;

    height: 100%;

    flex-direction: column;

    font-size: 12px;

}

.tpl-params-content {

    flex: 1;

    overflow-y: auto;

    background-color: #eee;

}

.tpl-params-content-inner,

.tpl-params-footer-inner {

    padding: 8px 16px;

}

.tpl-params-footer-inner {

    text-align: right;

    background-color: #eee;

}

.layui-item-hidden {

    display: none;

}

.tpl-form-label {

    padding: 4px 0;

    font-weight: bold;

}

.tpl-input {

    height: 1.8em;

    width: 90%;

    border: 1px solid #ddd;

}

.tpl-input.error-data {

    border: 1px solid #FF0000;

}

.tpl-input[readonly="readonly"] {

    background-color: #ddd;

}



/* h-drawer */

.h-drawer-container {

    display: none;

}

.h-drawer-mask {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: rgba(55,55,55,.6);

    height: 100%;

    z-index: 1000;

}

.h-drawer-wrap {

    position: fixed;

    z-index: 1000;

    outline: 0;

}

.h-drawer {

    height: 100%;

    position: fixed;

    top: 0;

}



.h-drawer-content {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    bottom: 0;

    background-color: #fff;

    border: 0;

    background-clip: pading-box;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);

}

.h-drawer-header {

    height: 32px;

    line-height: 32px;

    font-weight: bold;

    text-align: center;

    background: url('../../image/table_th_bg.gif') repeat-x;

}

.h-drawer-body {

    height: calc(100% - 79px);

}



.h-drawer-footer-inner {

    border-top: 1px solid #EEEEEE;

    padding: 8px;

}


 Idce_Lithium/WebRoot/pages/css/pages/control.css

New file
@@ -0,0 +1,103 @@
html, body {

    overflow: hidden;

}

.page-content {

    height: calc(100vh - 156px);

    background-color: #FFFFFF;

}

.page-content-inner {

    display: flex;

    height: 100%;

}

.page-content-inner .page-left {

    height: 100%;

    background-color: #FFFFFF;

}

.page-content-inner .page-right {

    flex: 1;

    height: 100%;

    overflow-y: auto;

    background-color: #FFFFFF;

}

.lside {

    width: 360px;

    height: 100%;

    overflow: auto;

}

#address_infor {

    width:100%;

    height:30px;

    line-height: 30px;

    text-align: center;

    background:url(../../../image/table_th_bg.gif) repeat-x;

}



#devStatesTbl{

    border:0;

    padding: 0;

    border-spacing: 0;

    width:100%;

    border-collapse: collapse;

}

#devStatesTbl td{

    border:none;

    padding:10px 0;

}

#devStatesTbl input{

    width: 60%;

    height:24px;

    background:#D0D3D3;

    border:1px solid #323232;

}



/* 电路拓扑图模块 */

.topgraph-container {

    position: relative;

}



#topgraph {

    width: 800px;

    height: 540px;

    margin: 0 auto;

}

.elecircle-status {

    position: absolute;

    top: .5em;

    left: .5em;

    font-size: 12px;

    border: 1px solid #ccc;

    padding: .5em 1em;

    text-align: left;

    background-color: rgba(230, 230, 230, 0.123);

}

.elecircle-status li {

    line-height: 24px;

}

.elecircle-status li i.fa {

    margin-right: .5em;

    font-size: 16px;

    color: #0244f8;

}

.elecircle-status li a {

    color: #0244f8;

}

.elecircle-status li.elecircle-status-warn i.fa {

    color: #FF0000;

}

.elecircle-status li.elecircle-status-warn a {

    color: #FF0000;

}



.tools-btn {

    position: absolute;

    top: .5em;

    right: .5em;

}



.layui-tab-title {

    height: 38px;

    background: url(../../../image/table_th_bg.gif) repeat-x;

}

.layui-tab-title li {

    line-height: 38px;

}

 Idce_Lithium/WebRoot/pages/js/common.js

@@ -444,6 +444,15 @@
    gl.CMD.BTS.start = 81;                    //启动测试
    gl.CMD.BTS.stop = 83;                    //停止测试
    
    // CMD下8kw的命名空间
    gl.namespace('CMD.KW');
	
    gl.CMD.KW.get = 41;                        //获取放电参数
    gl.CMD.KW.set = 40;                        //设置放电参数
    gl.CMD.KW.startDischarge = 81;            //启动放电测试
    gl.CMD.KW.startCharge = 65;            // 启动充电测试
    gl.CMD.KW.stop = 83;                    //停止测试
	
    // CMD下的61850命名空间
    gl.namespace('CMD.e61850');
    gl.CMD.e61850.startDischarge = 37;                //启动核容测试

 Idce_Lithium/WebRoot/pages/js/mylayui.js

@@ -1246,4 +1246,38 @@
        
    });
    return result;
};

//延时计时器
function Timeout() {
 this.timer = null;
 this.time = '';
 this.callback = '';
}
//开启计时器并添加
Timeout.prototype.start = function(callback, time, exe) {
 // 先关闭计时器
 this.stop();
 // 配置执行函数
 if(typeof callback == 'function' && typeof time == 'number') {
     this.callback = callback;
     this.time = time;
     if(exe != 'exe') {
         callback();
     }
     this.timer = setTimeout(callback, time);
 }else {
     console.warn('未完整配置参数！');
 }
};
//开启计时器
Timeout.prototype.open = function() {
 var callback = this.callback;
 var time = this.time;
 this.start(callback, time, 'exe');
};

//关闭计时器
Timeout.prototype.stop = function() {
 clearTimeout(this.timer);
};

 Idce_Lithium/WebRoot/pages/js/pages/rules.js

New file
@@ -0,0 +1,211 @@
// 校验数据对象

function CheckPanelData(layer) {

    this.layer = layer;

    this.tips = '';

    this.data = [];

}

// 设置data,并根据id绑定事件

CheckPanelData.prototype.setData = function(data) {

    this.data = data;

    this._addEventListener(data);

}



// 根据id绑定事件

CheckPanelData.prototype._addEventListener = function(data) {

    var self = this;

    var layer = this.layer;

    // 遍历data

    for(var i=0; i<data.length; i++) {

        var _data = data[i];

        // 运用闭包

        (function(data) {

            // 修改内容时验证

            $(data.id).off('input.checkdata propertychange.checkdata').on('input.checkdata propertychange.checkdata', function() {

                var val = $(this).val();

                var checkData = self.check(val, data);

                if(checkData.code == 0) {

                    $(this).addClass('error-data');

                    self.tips = layer.tips(data.msg, data.id, {tips: 1,time: 0});

                }else {

                    $(this).removeClass('error-data');

                    layer.close(self.tips);

                }

            });

			
            // 获取焦点时验证

            $(data.id).off('focus.checkdata').on('focus.checkdata', function() {

                var val = $(this).val();

                var checkData = self.check(val, data);

                if(checkData.code == 0) {

                    $(this).addClass('error-data');

                    self.tips = layer.tips(data.msg, data.id, {tips: 1,time: 0});

                }else {

                    $(this).removeClass('error-data');

                    layer.close(self.tips);

                }

            });

        })(_data);

		
    }

}



// 恢复

CheckPanelData.prototype.recovery = function() {

    var data = this.data;

    var layer = this.layer;

    // console.log(data);

    // 遍历data的值移除红色边框

    for(var i=0; i<data.length; i++) {

        var _data = data[i];

        $(_data.id).removeClass('error-data');

    }

    // 关闭提示

    layer.close(this.tips);

};



// 根据data的值验证所有的文本框

CheckPanelData.prototype.getStates = function() {

    var data = this.data;

    var rs = {

        code: 1,

        data: {}

    };

    var reg = /#/;

    // 遍历data的值

    for(var i=0; i<data.length; i++) {

        var _data = data[i];

        var val = $(_data.id).val();

        var key = _data.id.replace(reg, ''); 
        rs.data[key] = val;

        var states = this.check(val, _data);

        if(states.code == 0) {

            $(_data.id).addClass('error-data');

            rs.code = 0;

        }

    }

	
    return rs;

}





// 验证数据正确性

CheckPanelData.prototype.check = function(val, rules) {

    var rs = {

        code: 1,

        msg: rules.msg

    };

    // 先验证正则

    if(this._checkPattern(val, rules.pattern)) {

        // 通过正则验证(存在取值范围)

        if(rules.hasOwnProperty('range')) {

            if(!this._checkRange(val, rules.range)) {

                rs.code = 0;

            }

        }

    }else {

        rs.code = 0;

    }

	
    return rs;

}

// 验证正则

CheckPanelData.prototype._checkPattern = function(val, pattern) {

    return pattern.test(val);

}

// 验证取值范围

CheckPanelData.prototype._checkRange = function(val, range) {

    var rs = false;

    // 不存在最小值

    if(!range.hasOwnProperty('min')) {

        range.min = -Infinity;

    }

	
    // 不存在最大值

    if(!range.hasOwnProperty('max')) {

        range.max = Infinity;

    }

	
    if(val>=range.min && val<=range.max) {

        rs = true;

    }

    return rs;

}



var addPlan = [

    {

        id: '#preset_cap',

        pattern: /^[0-9]{1,4}$/,

        range: {

            min: 1,

            max: 3000,

        },

        msg: '取值范围1~3000（整数）'

    },

    {

        id: '#preset_time',        // 放电时长

        pattern: /^[0-9]{1,4}$/,

        range: {

            min: 1,

            max: 1000

        },

        msg: '取值范围1~1000（整数）'

    },

    {

        id: '#preset_monvol',        // 单体电压下限

        pattern: /^[0-9]{1,2}(\.[0-9]{0,2})?$/,

        range: {

            min: 1.8,

            max: 2.25

        },

        msg: '取值范围1.8~2.25（保留两位小数）'

    },

    {

        id: '#preset_groupvol',        // 组端电压下限

        pattern: /^[0-9]{1,2}(\.[0-9]{0,1})?$/,

        range: {

            min: 44,

            max: 54

        },

        msg: '取值范围44.0~54.0（保留一位小数）'

    },

    {

        id: '#preset_curr',        // 预设放电电流

        pattern: /^[0-9]{1,4}$/,

        range: {

            min: 1,

            max: 300,

        },

        msg: '取值范围1~300（整数）'

    },

    {

        id: '#plan_circle',        // 周期天数

        pattern: /^[0-9]{1,5}$/,

        range: {

            min: 10,

            max: 99999,

        },

        msg: '取值范围10~99999（整数）'

    },

    {

        id: '#plan_rate',        // 执行次数

        pattern: /^[0-9]+$/,

        range: {

            min: 1,

        },

        msg: '大于1（整数）'

    },

	
];



// 8kw参数设置

var params8kwRegs = [

    {

        id: '#DisCurr_kw',

        pattern: /^[0-9]{1,4}$/,

        range: {

            min: 1,

            max: 3000,

        },

        msg: '取值范围1~3000（整数）'

    },

];


 Idce_Lithium/WebRoot/pages/js/pages/siderbar.js

@@ -221,7 +221,20 @@
    var county = getQueryString('county');        // 区/县
    var home = getQueryString('home');            // 机房
    var homeid = getQueryString('battid');        // 电池组id
    var endLayer = 'eleGroup';                    // 结束层
    //console.log(province);
	
    // 设置结束层
    function setEndLayer(layerName) {
        // 设置endLayer
        switch(layerName) {
            case 'home':
                endLayer = 'home';
            break;
        }
    }
    // 将函数绑定到GLOBAL.pages.siderbar的命名空间下
    gl.pages.siderbar.setEndLayer = setEndLayer;
    
    // 生成一级导航-省
    function first(treeView, container) {
@@ -389,6 +402,54 @@
    // 将函数绑定到GLOBAL.pages.siderbar的命名空间下
    gl.pages.siderbar.thirdFile = thirdFile;
    
    // 生成四层导航机房（为最终层）
    function fourthFile(treeView, container, data, active) {
        // 已经存在
        if(container.find('ul').length !=0) {
            return;
        }
        treeView.addProgress(container);
        // 请求后台获取
        $.ajax({ 	
            type: "post", 				
            async:true,			
            url: "BattInfAction!serchStationName3",				
            data:"json = "+JSON.stringify(data),	
            dataType:'json',
            success: function(res){
                var rs = JSON.parse(res.result);
                if(rs.code == 1) {
                    var _data= rs.data;
                    // console.log(_data);
                    var formatData = [];
                    for(var i=0; i<_data.length;i++) {
                        var __data = _data[i];
                        __data.StationName1 = data.StationName1;
                        __data.StationName2 = data.StationName2;
                        __data.StationName5 = data.StationName5;
                        var tmp = treeView.getFile(__data.StationName3, 'home', __data.FBSDeviceId,__data);
                        formatData.push(tmp);
                    }
                    treeView.treeView(container, formatData);
	        		
                    // 是否激活
                    if(active) {
                        treeView.activeFile(container,'home', homeid);
                        var devId = formatData[0].id;
                        location.hash="#"+devId;
                        location.hash = "";
                    }
                }
            },
            complete: function() {
                treeView.delProgress(container);
            }
        })
    }
	
    // 将函数绑定到GLOBAL.pages.siderbar的命名空间下
    gl.pages.siderbar.fourthFile = fourthFile;
	
    //生成四级导航-机房
    function fourth(treeView, container, data, spread) {
        // 已经存在

 Idce_Lithium/WebRoot/tpl/add-plan-params.html

New file
@@ -0,0 +1,131 @@
<template id="planParams">

    <div class="tpl-params">

        <div class="tpl-params-content">

            <div class="tpl-params-content-inner">

                <div class="layui-item-hidden">

                    <input type="hidden" id="Battgroupid" value={{d.Battgroupid}}>

                    <input type="hidden" id="BattIndexInFbs" value={{d.BattIndexInFbs}}>

                    <input type="hidden" id="discharge_state" value="0">

                    <input type="hidden" id="discharge_reason" value="0">

                    <input type="hidden" id="discharge_cleartype" value="1">

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs12">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">机房名称</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.note}}" class="tpl-input" id="note" readonly="readonly" style="width: 95%"/>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">预设核容时长（1~1000分钟）</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.preset_time}}" class="tpl-input" id="preset_time"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">预设核容容量（1~3000AH）</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.preset_cap}}" class="tpl-input" id="preset_cap"/>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">单体电压下限（1.80~2.25V）</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.preset_monvol}}" class="tpl-input" id="preset_monvol"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">组端电压下限（44.0~54.0V）</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.preset_groupvol}}" class="tpl-input" id="preset_groupvol"/>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">预设核容电流（1~300A）</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.preset_curr}}" class="tpl-input" id="preset_curr"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">放电计划开始日期</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.discharge_starttime}}" class="tpl-input" id="discharge_starttime"/>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">预设周期天数(10~99999天)</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.plan_circle}}" class="tpl-input" id="plan_circle"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">预设执行次数（大于1）</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.plan_rate}}" class="tpl-input" id="plan_rate"/>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">预设升压上限（V）</div>

                            <div class="tpl-input-block">

                                <input type="text" value="0" class="tpl-input" id="dcvolhighlimit" readonly="readonly"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">预设充电电流</div>

                            <div class="tpl-input-block">

                                <input type="text" value="0" class="tpl-input" id="chargecurrset" readonly="readonly"/>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">单体下限数量</div>

                            <div class="tpl-input-block">

                                <input type="text" value="1" class="tpl-input" id="preset_mon" readonly="readonly"/>

                            </div>

                        </div>

                    </div>

					
                </div>

            </div>

        </div>

        <div class="tpl-params-footer">

            <div class="tpl-params-footer-inner">

                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="bindData">确认修改</button>

            </div>

        </div>

    </div>

</template>

 Idce_Lithium/WebRoot/tpl/dev-params.html

New file
@@ -0,0 +1,81 @@
<template id="devParamsTpl">

    <div class="tpl-params" id="devParams_kw_root">

        <div class="tpl-params-content">

            <div class="tpl-params-content-inner">

                <div class="layui-item-hidden">

                    <input type="hidden" id="good_kw" name="good" value="{{d.good}}">

                    <input type="hidden" class="form-item" id="dev_id_kw" name="dev_id" value="{{d.dev_id}}">

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs12">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">机房名称</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.StationName}}" class="tpl-input" id="StationName_kw" name="StationName" readonly="readonly" style="width: 95%"/>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row">

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">放电电流</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.DisCurr}}" class="tpl-input form-item" id="DisCurr_kw" name="DisCurr"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">放电截止电压</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.GroupVol_Low}}" class="tpl-input form-item" id="GroupVol_Low_kw" name="GroupVol_Low"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">放电时长</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.DisTime}}" class="tpl-input form-item" id="DisTime_kw" name="DisTime"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">充电电流</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.ChargeCurrSet}}" class="tpl-input form-item" id="ChargeCurrSet_kw" name="ChargeCurrSet"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">充电截止电流</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.DCVolHighLimit}}" class="tpl-input form-item" id="DCVolHighLimit_kw" name="DCVolHighLimit"/>

                            </div>

                        </div>

                    </div>

                    <div class="layui-col-xs6">

                        <div class="tpl-form-item">

                            <div class="tpl-form-label">充电时长</div>

                            <div class="tpl-input-block">

                                <input type="text" value="{{d.HourRate}}" class="tpl-input form-item" id="HourRate_kw" name="HourRate"/>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="tpl-params-footer">

            <div class="tpl-params-footer-inner">

                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled" id="startDischarge_kw">放电测试</button>

                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled" id="startCharge_kw">充电测试</button>

                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="getParam_kw">读取参数</button>

                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled" id="setParam_kw">设置参数</button>

                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="stopTest_kw">停止测试</button>

            </div>

        </div>

    </div>

</template>

 Idce_Lithium/src/com/fgkj/db/DBUtil.java

@@ -18,9 +18,9 @@
    
    private static String username="root";
    private static String password="lmx8688139";
    private static String url="jdbc:mysql://118.89.139.230:3360/db_user";
    //private static String url="jdbc:mysql://118.89.139.230:3360/db_user";
    //private static String url="jdbc:mysql://123.207.82.239:3360/db_user";
    //private static String url="jdbc:mysql://192.168.0.34:3360/db_user";
    private static String url="jdbc:mysql://192.168.7.154:3360/db_user";
    //private static String url="jdbc:mysql://127.0.0.1:3360/db_user";
    /*private static String username="root";
    private static String password="123456";*/