maplayoutfull.js 6.94 KB
layui.define(
    ["jquery", "layer", "bootstrap"],
    function (exports) {
        var $ = layui.jquery;
        var layer = layui.layer;
        //初始化设计流程器
        $.fn.flowdesign = function (options) {
            var $frmpreview = $(this);
            if (!$frmpreview.attr('id')) {
                return false;
            }
            $frmpreview.html("");

            var defaultcnf = {
                width: 500,
                height: 400,
                haveHead: false,
                initLabelText: "地图监控",
                haveTool: false,
                headLabel: true,
                headBtns: ["big", "small", "reset"],
                toolBtns: [
                    
                ],
                haveGroup: true,
                useOperStack: false,
            };
            if (options != undefined) {
                $.extend(defaultcnf, options);
            }

            var flowPanel = $.createGooFlow($(this), defaultcnf);
            flowPanel.setNodeRemarks({
                group: "编辑",
                user_cangchuqu: "仓储区",
                user_zhangaiqu: "障碍区",
                user_shengchanxian: "生产线",
                user_yunxingqu: "运行区",
                user_chongdianzhuang1: "充电桩",
                user_tingchequ: "停车区",
                user_diantiqu_xz: "电梯区",
                user_tishengjiqu_xz: "对接区",
                user_quliaoqu: "取料区",
                user_fangliaoqu: "放料区",
                user_rfid_yxd_0000: "RFID",
                user_fastmode: "快速模式",
            });

            flowPanel.setHeadToolsRemarks({
                undo: "撤销",
                redo: "重做",
                big: "放大",
                small: "缩小",
                reset: "还原",
                switch: "隐藏RFID",
                info: "显示未编辑的RFID"
            });

            if (options != undefined
                && options.flowcontent != undefined
                && options.flowcontent != null) {  //加载内容
                flowPanel.loadData(options.flowcontent);
            }

            var PanelHtml = '<div style="position:absolute;left:10px;top:30px;background-color:rgba(72,156,156,0.8);width:40px;display:inline-block;border-radius: 5px;">';
            PanelHtml += '      <a href="javascript:;" class="layui-btn OpenPanel" data-panel="div1" title="AGV状态" style="width:30px;padding: 5px 0px;margin:5px;background-color:transparent;"><i class="layui-icon" style="color:white;font-size:22px;margin-right:0px;width:30px;height:30px;">&#xe68f;</i></a><hr style="margin:0px;" />';
            PanelHtml += '      <a href="javascript:;" class="layui-btn OpenPanel" data-panel="div2" title="任务状态" style="width:30px;padding: 5px 0px;margin:5px;background-color:transparent;"><i class="layui-icon" style="color:white;font-size:22px;margin-right:0px;width:30px;height:30px;">&#xe624;</i></a><hr style="margin:0px;" />';
            PanelHtml += '      <a href="javascript:;" class="layui-btn OpenPanel" data-panel="div3" title="充电桩状态" style="width:30px;padding: 5px 0px;margin:5px;background-color:transparent;"><i class="layui-icon" style="color:white;font-size:22px;margin-right:0px;width:30px;height:30px;">&#xe68b;</i></a>';
            PanelHtml += '</div>';
            $frmpreview.append(PanelHtml);

            var AgvStateHtml = '<div id="div1" class="layui-card" style="display:none;">';
            AgvStateHtml += ' <div class="layui-card-header"><input data-type="qAgvNo" type="text" placeholder="搜索AGV" maxlength="50" class="layui-input searchInput"></div>';
            AgvStateHtml += '   <div class="layui-card-body" align="center" style="height:500px">';
            AgvStateHtml += '       <table id="mainList1" lay-filter="mainList1"></table>';
            AgvStateHtml += '       <script type="text/html" id="ShowTSonTask">';
            AgvStateHtml += '           <a href="javascript:;" class="layui-table-link"><u style="color:cornflowerblue">{{ d.StrTaskNo }}</u></a>';
            AgvStateHtml += '       </script>';
            AgvStateHtml += '   </div>';
            AgvStateHtml += '</div>';
            $frmpreview.append(AgvStateHtml);

            var TaskHtml = '<div id="div2" class="layui-card" style="display:none;">';
            TaskHtml += '   <div class="layui-card-header"><input data-type="qTask" type="text" placeholder="搜索任务" maxlength="50" class="layui-input searchInput"></div>';
            TaskHtml += '   <div class="layui-card-body" align="center" style="height:500px">';
            TaskHtml += '       <table id="mainList2" lay-filter="mainList2"></table>';
            TaskHtml += '   </div>';
            TaskHtml += '</div>';
            $frmpreview.append(TaskHtml);

            var CharingPieHtml = '<div id="div3" class="layui-card" style="display:none;">';
            CharingPieHtml += ' <div class="layui-card-header"><input data-type="qChargingPie" type="text" placeholder="搜索充电桩"  maxlength="50" class="layui-input searchInput"></div>';
            CharingPieHtml += ' <div class="layui-card-body" align="center" style="height:500px">';
            CharingPieHtml += '     <table id="mainList3" lay-filter="mainList3"></table>';
            CharingPieHtml += ' </div>';
            CharingPieHtml += '</div>';
            $frmpreview.append(CharingPieHtml);

            //var xyHtml = '<div style="position:absolute;left:1100px;margin-top:-30px;padding:3px;z-index:1000;line-height:15px;">';
            //xyHtml += '<div style="display: inline-block;"><span id = "xyHtml"></span></div></div>';
            //$frmpreview.append(xyHtml);

            //flowPanel.$workArea.on('mousemove', function (e) {
            //    if (!e) e = window.event;
            //    var X, Y;
            //    var ev = _mouseP(e), t = _elCsys(this);
            //    X = ev.x - t.left + this.parentNode.scrollLeft;
            //    Y = ev.y - t.top + this.parentNode.scrollTop;

            //    var new_X, new_Y;
            //    new_X = Math.floor(X / 30) * 30;
            //    new_Y = Math.floor(Y / 30) * 30;
            //    if ($("#xyHtml") != undefined) {
            //        $("#xyHtml").html("【" + new_X + "," + new_Y + "】");
            //    }
            //});

            return flowPanel;
        }

        exports('mapmonitor/maplayoutfull');
    });

function _elCsys(dom) {
    var t = dom.offsetTop;
    var l = dom.offsetLeft;
    dom = dom.offsetParent;
    while (dom) {
        t += dom.offsetTop;
        l += dom.offsetLeft;
        dom = dom.offsetParent;
    }
    return { top: t, left: l };
}
//兼容各种浏览器的,获取鼠标真实位置
function _mouseP(ev) {
    if (!ev) ev = window.event;
    if (ev.pageX || ev.pageY) {
        return { x: ev.pageX, y: ev.pageY };
    }
    return {
        x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
    };
}