码迷,mamicode.com
首页 > 其他好文 > 详细

配电室监控

时间:2018-07-19 13:40:57      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:1.0   UNC   als   ||   transform   页面   exception   text   垂直居中对齐   

配电室监控可以说是我做的比较杰出的一个功能了,貌似是去年7月份左右做完的,至今也有一年了,要不是今天看到,我都忘了我曾写过这样一个功能。好的东西还是应该记录一下的,今天花点时间简单写个备忘吧。

首先介绍对象,以及对象的增删改,然后介绍监控页面,最后总结开发经验。

配电室有1-3个变压器

技术分享图片

一个进线一个出线,进线是一定有的,而出线则可有可无

技术分享图片

新增页面

技术分享图片

列表页面

技术分享图片

变压器可以添加1-3个

技术分享图片

技术分享图片

每个变压器有默认的18个检测项目(新增变压器的时候,后台默认添加18个检测项目)

技术分享图片

进线、出线也有固定的检测项目

进线有固定的8个检测项目

技术分享图片

出线有固定的4个检测项目

技术分享图片

列表页面会列出一个配电室的所有检测项目

技术分享图片

由于(莫斯配电室)添加了3个变压器,且有(出线),此处检测项目会有3个变压器和一个进线一个出线的所有检测项目

技术分享图片

技术分享图片

配电室监控的时候,由于用代码临时画线路图页面加载效率会比较低,所以采用的是先画好线路图,监控的时候动态的选择线路图展示的方案,线路图一共有6张,分一个变压器有出线和无出线两张图、两个变压器有出线和无出线两张图、三个变压器有出线和无出线两张图

技术分享图片

道闸的开关由两张道闸的图片切换

技术分享图片

监控页面

技术分享图片

值得一说的有已下三点

一、首先要说的是,如何动态匹配底图图纸?

配电室对象根据自己是否有出线及有几个变压器给出对应的类型,js写json,配置不同的类型对应不同的图纸url

public String getRoomJson() {
    JSONObject data = new JSONObject();
    
    try {
        data.put("name", "[" + area.getName() + "]" + name);
        data.put("id", this.getId());
        data.put("inlinename", this.getIncomingLine().getName());
        
        int num = voltageTransformerList.size();
        if (num == 0) {
            data.put("msg", "配电室结构异常,没有变压器!");
        } else if (num > 3) {
            data.put("msg", "配电室结构异常,有[" + num + "]个变压器!");
        }
        
        if (haveOutgoingLine) {
            data.put("type", num + "out");
        } else {
            data.put("type", num + "v");
        }
    } catch (JSONException e) {
        e.printStackTrace();
    }
    
    roomJson = data.toString();
    return roomJson;
}

技术分享图片

二、框里的检测项目,出现的位置怎么控制,怎么能让对应的检测项目出线在底图对应的位置上?

如下图,红色线标注出来的那些,是怎么控制显示的位置的?

技术分享图片

不同类型的图纸,对应的配电室的检测项目是固定的,只要针对不同的图纸,提前设计好哪些检测项目应该放在哪里展示,然后计算出相对位置,在js里写好json配置,页面加载的时候根据页面的宽高,再结合这个json配置,就可以计算出页面中各个对象展现的位置

var RoomData = {
    "1v": [
        {A: "inline", B: "U", x: 380.0, y: 360.0, pos: "RB"},
        {A: "inline", B: "I", x: 480.0, y: 360.0, pos: "LB"},
        
        {A: "voltage1", B: "capacity", x: 750, y: 580, pos: "RB", nomenu: true},
        
        {A: "voltage1", B: "IHigh", x: 910, y: 360, pos: "LB"},
        {A: "voltage1", B: "T", x: 840, y: 580, pos: "LB"},
        {A: "voltage1", B: "U", x: 750, y: 630, pos: "RT"},
        {A: "voltage1", B: "ILow", x: 840, y: 630, pos: "LT"}
    ],
    "1out": [
        {A: "inline", B: "U", x: 380.0, y: 360.0, pos: "RB"},
        {A: "inline", B: "I", x: 480.0, y: 360.0, pos: "LB"},
        
        {A: "voltage1", B: "IHigh", x: 820, y: 360, pos: "LB"},
        {A: "voltage1", B: "T", x: 760, y: 580, pos: "LB"},
        {A: "voltage1", B: "U", x: 650, y: 630, pos: "RT"},
        {A: "voltage1", B: "ILow", x: 760, y: 630, pos: "LT"},
        
        {A: "voltage1", B: "capacity", x: 650, y: 580, pos: "RB", nomenu: true},
        
        {A: "outline", B: "I", x: 1130.0, y: 360.0, pos: "LB"}
    ],
    "2v": [
        {A: "inline", B: "U", x: 200.0, y: 360.0, pos: "RB"},
        {A: "inline", B: "I", x: 300.0, y: 360.0, pos: "LB"},
        
        {A: "voltage1", B: "IHigh", x: 650, y: 360, pos: "LB"},
        {A: "voltage1", B: "ILow", x: 490, y: 630, pos: "RT", rely: {B: "U", move: "left"}},
        
        {A: "voltage1", B: "capacity", x: 490, y: 580, pos: "RB", rely: {B: "T", move: "leftB"}, nomenu: true},
        {A: "voltage2", B: "capacity", x: 980, y: 580, pos: "LB", rely: {B: "T", move: "rightB"}, nomenu: true},
        
        {A: "voltage2", B: "IHigh", x: 1050, y: 360, pos: "LB"},
        {A: "voltage2", B: "U", x: 980, y: 630, pos: "LT", rely: {B: "ILow", move: "right"}}
    ],
    "2out": [
        {A: "inline", B: "U", x: 200.0, y: 360.0, pos: "RB"},
        {A: "inline", B: "I", x: 300.0, y: 360.0, pos: "LB"},
        
        {A: "voltage1", B: "IHigh", x: 610, y: 360, pos: "LB"},
        {A: "voltage1", B: "ILow", x: 440, y: 630, pos: "RT", rely: {B: "U", move: "left"}},
        
        {A: "voltage2", B: "IHigh", x: 930, y: 360, pos: "LB"},
        {A: "voltage2", B: "U", x: 870, y: 630, pos: "LT", rely: {B: "ILow", move: "right"}},
        
        {A: "voltage1", B: "capacity", x: 440, y: 580, pos: "RB", rely: {B: "T", move: "leftB"}, nomenu: true},
        {A: "voltage2", B: "capacity", x: 870, y: 580, pos: "LB", rely: {B: "T", move: "rightB"}, nomenu: true},
        
        {A: "outline", B: "I", x: 1190.0, y: 360.0, pos: "LB"}
    ],
    "3v": [
        {A: "inline", B: "U", x: 200.0, y: 360.0, pos: "RB"},
        {A: "inline", B: "I", x: 300.0, y: 360.0, pos: "LB"},
        
        {A: "voltage1", B: "IHigh", x: 560, y: 360, pos: "LB"},
        {A: "voltage1", B: "ILow", x: 400, y: 630, pos: "RT", rely: {B: "U", move: "left"}},

        {A: "voltage2", B: "IHigh", x: 880, y: 360, pos: "LB"},
        {A: "voltage2", B: "T", x: 810, y: 580, pos: "LB"},
        {A: "voltage2", B: "U", x: 720, y: 630, pos: "RT"},
        {A: "voltage2", B: "ILow", x: 810, y: 630, pos: "LT"},
        
        {A: "voltage1", B: "capacity", x: 400, y: 580, pos: "RB", rely: {B: "T", move: "leftB"}, nomenu: true},
        {A: "voltage2", B: "capacity", x: 720, y: 580, pos: "RB", nomenu: true},
        {A: "voltage3", B: "capacity", x: 1130, y: 580, pos: "LB", rely: {B: "T", move: "rightB"}, nomenu: true},

        {A: "voltage3", B: "IHigh", x: 1200, y: 360, pos: "LB"},
        {A: "voltage3", B: "U", x: 1130, y: 630, pos: "LT", rely: {B: "ILow", move: "right"}}
    ],
    "3out": [
        {A: "inline", B: "U", x: 200.0, y: 360.0, pos: "RB"},
        {A: "inline", B: "I", x: 300.0, y: 360.0, pos: "LB"},
        
        {A: "voltage1", B: "IHigh", x: 530, y: 360, pos: "LB"},
        {A: "voltage1", B: "ILow", x: 380, y: 630, pos: "RT", rely: {B: "U", move: "left"}},

        {A: "voltage2", B: "IHigh", x: 820, y: 360, pos: "LB"},
        {A: "voltage2", B: "T", x: 750, y: 580, pos: "LB"},
        {A: "voltage2", B: "U", x: 670, y: 630, pos: "RT"},
        {A: "voltage2", B: "ILow", x: 750, y: 630, pos: "LT"},

        {A: "voltage3", B: "IHigh", x: 1100, y: 360, pos: "LB"},
        {A: "voltage3", B: "U", x: 1030, y: 630, pos: "LT", rely: {B: "ILow", move: "right"}},/*move right 表示依赖对象移动到右边*/
        
        {A: "voltage1", B: "capacity", x: 380, y: 580, pos: "RB", rely: {B: "T", move: "leftB"}, nomenu: true},
        {A: "voltage2", B: "capacity", x: 670, y: 580, pos: "RB", nomenu: true},
        {A: "voltage3", B: "capacity", x: 1030, y: 580, pos: "LB", rely: {B: "T", move: "rightB"}, nomenu: true},
        
        {A: "outline", B: "I", x: 1290.0, y: 360.0, pos: "LB"}
    ],
    SW: 1418.0,
    SH: 1000.0
};

SW、SH是原图尺寸,x、y是设计的时候,检测项目集合放置的位置,这些数据就可以计算出在图中位置的比例,根据这个比例乘以页面后底图实际的宽高,就可以得出显示的位置。这个pos是说明这个x、y这一点的位置,是这个集合框的四个顶点的哪个顶点的位置,T表示上(top),R表示右(right),B表示底部(bottom),L表示左(left),两两结合,便可以表示一个顶点,比如RB表示右下角的顶点。

为什么要区分顶点来计算放置集合框?

举例说吧,比如进线的(电压数据框)和(电流数据框),如下图,就拿电压数据框说,电压框如果记录左上角的位置,如果ua的值变成120.35KV,这个宽度肯定比0KV的宽度宽吧,那么显示后会怎么样呢?很明显,左上角位置不动,宽度增加,就会把进线的图给遮盖了,如下面的第二张图,这个肯定不是想要的结果。

技术分享图片  技术分享图片

我们肯定希望,无论页面的宽高怎么变,文字的内容怎么变,我都要显示在进线的左方,母线的上方,那么唯一希望它不要变的一个点的位置,就是右下角的位置。

rely是依赖关系,表示一个数据框的位置,要依赖另一个数据框的位置,move表示移动的方向,比如变压器的电压和电流两个数据框,如下图,电压框的位置是不固定的,他要依赖电流框左上角的位置,来计算自己的位置,也就是说,要先画出电流框,然后根据move的值来判断是显示在电流框的左边、右边、上边还是下边。详细的不说了,太多东西要写了。

技术分享图片

 

进线名称的位置、道闸的位置也是同一个道理

/**
 * 进线名称位置
 */
var InLineTitleData = {
    "1v": {x: 423.0, y: 160.0},
    "1out": {x: 422.0, y: 160.0},
    "2v": {x: 241.0, y: 160.0},
    "2out": {x: 243.0, y: 160.0},
    "3v": {x: 246.0, y: 160.0},
    "3out": {x: 243.0, y: 160.0}
};
/**
 * 道闸位置
 * VC: Vertical centering 垂直居中对齐
 */
var KnifeData = {
    "1v": {
        "inline": {x: 423, y: 280, pos: "VC"},
        "voltage1": {x: 790, y: 800, pos: "VC"},
        "v1-high": {x: 847, y: 280, pos: "VC"}
    },
    "1out": {
        "inline": {x: 422, y: 280, pos: "VC"},
        "voltage1": {x: 710, y: 800, pos: "VC"},
        "v1-high": {x: 768, y: 280, pos: "VC"},
        "outline": {x: 1068, y: 280, pos: "VC"}
    },
    "2v": {
        "inline": {x: 241, y: 280, pos: "VC"},
        "voltage1": {x: 540, y: 800, pos: "VC"},
        "v1-high": {x: 597, y: 280, pos: "VC"},
        "voltage2": {x: 937, y: 800, pos: "VC"},
        "v2-high": {x: 994, y: 280, pos: "VC"}
    },
    "2out": {
        "inline": {x: 243, y: 280, pos: "VC"},
        "voltage1": {x: 497, y: 800, pos: "VC"},
        "v1-high": {x: 555, y: 280, pos: "VC"},
        "voltage2": {x: 814, y: 800, pos: "VC"},
        "v2-high": {x: 872, y: 280, pos: "VC"},
        "outline": {x: 1131, y: 280, pos: "VC"}
    },
    "3v": {
        "inline": {x: 246, y: 280, pos: "VC"},
        "voltage1": {x: 445, y: 800, pos: "VC"},
        "v1-high": {x: 504, y: 280, pos: "VC"},
        "voltage2": {x: 765, y: 800, pos: "VC"},
        "v2-high": {x: 822, y: 280, pos: "VC"},
        "voltage3": {x: 1081, y: 800, pos: "VC"},
        "v3-high": {x: 1138, y: 280, pos: "VC"}
    },
    "3out": {
        "inline": {x: 243, y: 280, pos: "VC"},
        "voltage1": {x: 421, y: 800, pos: "VC"},
        "v1-high": {x: 479, y: 280, pos: "VC"},
        "voltage2": {x: 706, y: 800, pos: "VC"},
        "v2-high": {x: 762, y: 280, pos: "VC"},
        "voltage3": {x: 987, y: 800, pos: "VC"},
        "v3-high": {x: 1045, y: 280, pos: "VC"},
        "outline": {x: 1234, y: 280, pos: "VC"}
    }
};

计算位置的代码

/**
 * 封装有位置关联关系的两个bean
 */
function MsgCompoundBean(r, data) {
    var MBAR = this;
    
    var H = r.height,
        W = r.width;
        
    var SH = RoomData.SH,
        SW = RoomData.SW;

    var x = data.x * W / SW,
        y = data.y * H / SH;
    
    var levelA = data.A,
        levelB = data.B;

    var msg = r.room.msg[levelA][levelB];

    var nomenu = data.nomenu || false;
    var bean = new MsgBean(r, {x: x, y: y, pos: data.pos, msg: msg, nomenu: nomenu});
    
    var relyBean = null;
    if (data.rely) {
        var move = data.rely.move;
        
        var rx = 0, 
            ry = 0;
            
        var rPos = "";
        
        if (move == "right") {
            rx = bean.x + bean.wi + 10;
            ry = bean.y;
            rPos = "LT";
        } else if (move == "left") {
            rx = bean.x - 10;
            ry = bean.y;
            rPos = "RT";
        } else if (move == "rightB") {
            rx = bean.x + bean.wi + 10;
            ry = bean.y + bean.he;
            rPos = "LB";
        } else if (move == "leftB") {
            rx = bean.x - 10;
            ry = bean.y + bean.he;
            rPos = "RB";
        }
        
        var rLeveB = data.rely.B;
        var rMsg = r.room.msg[levelA][rLeveB];
        
        var nomenu = data.rely.nomenu || false;
        relyBean = new MsgBean(r, {x: rx, y: ry, pos: rPos, msg: rMsg, nomenu: nomenu});
    }
    
    MBAR.remove = function(){
        bean.remove();
        if (relyBean != null) {
            relyBean.remove();
        }
    };
}
if (data.rely) 就是判断是否有依赖的数据框要画,下面就是画具体的数据框的封装
/**
 * 封装单个数据块
 */
function MsgBean(r, data) {
    var DRB = this;
    var msgset = new MySet(r);

    var    msg = data.msg,
        posX = data.x,
        posY = data.y,
        pos = data.pos;
    
    var gap = 25,/*每条信息的高度*/
        marginLR = 10;
        
    var wi = tool_GetMsgWi(r, msg, marginLR, TextStyle), 
        he = msg.length * gap;
    
    var x = 0, 
        y = 0;
        
    if (pos == "RB") {
        x = posX - wi;
        y = posY - he;
    } else if (pos == "LB") {
        x = posX;
        y = posY - he;
    } else if (pos == "RT") {
        x = posX - wi;
        y = posY;
    } else { /*LT*/
        x = posX;
        y = posY;
    }
    
    var myBody = r.rect(x, y, wi, he, 5).attr({fill: "#2B2727", stroke: "gray", "stroke-width": 1});
    
    var texty = y;
    for (var i in msg) {
        var textI = new MyText(r, x, texty, wi, gap, msg[i], marginLR, TextStyle, data.nomenu);
        msgset.push(textI);
        texty = texty + gap;
    }
    
    DRB.wi = wi;
    DRB.he = he;
    DRB.x = x;
    DRB.y = y;
    
    DRB.remove = function(){
        msgset.remove();
        myBody.remove();
    };

}

整个配电室封装的js

/**
 * 封装整个配电室对象
 */
function MyRoom(r, data) {
    var MR = this;
    
    var id = data.id;
    var type = data.type;
    var roomname = data.name;

    var H = r.height,
        W = r.width;
    
    var baseimg = BaseMapImg[type];
    var map = r.image(baseimg, 0, 0, W, H);
    
    var title = r.text(W / 2, 30, roomname).attr(TitleTextStyle);
    
    //进线名称
    var inlinedata = InLineTitleData[type];
    var inlinename = data.inlinename || "none";
    var inlinetitle = r.text(0, 0, inlinename).attr(TextStyle);
    
    var data = RoomData[type];
    var beanset = new MySet(r);

    var flashData = function() {
        //进线名称
        inlinetitle.remove();
        var SH = RoomData.SH,
            SW = RoomData.SW;
        var inx = inlinedata.x * r.width / SW,
            iny = inlinedata.y * r.height / SH;
        inlinetitle = r.text(inx, iny, inlinename).attr(TextStyle).attr({cursor: "default"});
        
        //监测项目
        beanset.clear();
        for (var i in data) {
            var bean = new MsgCompoundBean(r, data[i]);
            beanset.push(bean);
        }
        
        //刀闸
        var knife = new MyKnifeGate(r);
        beanset.push(knife);
    };
    
    var selectMe = function(){
        r.map = map;
        r.title = title;
        r.type = type;
        r.roomid = id;
        
        map.show();
        title.show();
        
        flashData();
    };

    MR.remove = function(){
        beanset.clear();
        inlinetitle.remove();
        
        map.hide();
        title.hide();
    };
    
    MR.flashData = flashData;
    
    MR.selectMe = selectMe;
    
}
var flashData = function() 是监控的时候,检测项目值改变后,重新渲染页面(仅仅是局部渲染,仅渲染检测项目,这样效率比较高)

三、右键菜单功能及右边栏隐藏的功能

技术分享图片  技术分享图片  技术分享图片

这个右键就是在检测项目上加一个半透明的遮罩层,鼠标移动上去后,控制遮罩层的显示和隐藏,有个动态的效果,再有就是计算下右键菜单显示的位置,一般是显示在右下角,除非是超出边界,需要计算下位置。查看曲线查看报表也就是携带检测项目id,去查找检测项目的历史数据,然后出图出报表。

右边栏隐藏和展示,就是重新渲染一下检测项目的位置

技术分享图片

技术分享图片

细节太多,代码就不再贴了,中午了,好饿,吃饭去。

 

配电室监控

标签:1.0   UNC   als   ||   transform   页面   exception   text   垂直居中对齐   

原文地址:https://www.cnblogs.com/LcxSummer/p/9335068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!