昆明五华参谋平台项目代码逻辑

发布时间：2020-08-06 06:14:43 作者：xxxpjgl
来源：网络阅读：163

新建本地缓存变量：fire_gsUserObj，之前两个页面使用的是同一个缓存变量：fire_userObj
昆明五华参谋平台项目代码逻辑
一、主页面【即大区，如这里的五华区消防大队】是根目录下的main-group.html、fire-bus-group下的main.html
fire-bus-group下的gisCrud.js、gisBind.js：主要是做主页面的js，包括数据展示‘地图等等’

二、内容分发页面
根目录下的main-dispatcher.html页面主要是做内容分发
区分：var ref = getQueryString("ref"); //ref=login:从登陆页跳转过来;ref=map_org,地图上点击点位跳转过来;

三、具体单位页面【如这里的东北师范大学】是根目录下的gsindex.html
changeUserObj()：这个方法，修改缓存变量
setGlobalVal('gsUserObj',JSON.stringify(tmpObj));

real-time-monitoring下的monitorCrud.js、monitorFloor_bind.js：主要制作中间的地图模块
prise-home下的homeCrud.js、main_bind.js：主要上方的火警、电气火灾预警等数据的显示

四、//百度瓦片图

var baiduvec = new g2.carto.TileLayer({
        layerType: g2.carto.TileLayer,
        tileType: g2.carto.TileType.BaiduMap,
        opacity: 1.0,
        visible: true,
        matrix: 22,
        maxZoom:18,
        crossOrigin: "anonymous",
        baiduType:2,
        url: gisConfig.baiduImg
});
ZS.MONITOR.floor_g2map.addLayer(baiduvec);

瓦片图长下面的这个样子：

昆明五华参谋平台项目代码逻辑 ![]

五、

//加载视频点信息
      loadVideoBuild: function (data) {
        var elements = [];
        for (var i in data) {
          var point = new this.gs2.geom.Point({
            x: data[i].longitude,
            y: data[i].latitude,
            spatialReference: this.gs2.geom.SpatialReference.EPSG3857
          });
          var pictureMarker = new this.gs2.syms.Picturemarkersymbol({
            source: "data:image/png;base64...,
            width: 40,
            height: 40,
            offsetX: 20,
            offsetY: 20
          });
          var ele = new this.gs2.ele.Element({
            geometry: point,
            symbol: pictureMarker
          });
          ele.tag = data[i];
          ele.type = "video";
          elements.push(ele);
        }
        this.ZS.MONITOR.elementLayer.addElements(elements);

        // 绑定地图事件
        this._bind_mapEvent();
      },

pictureMarker：是在地图上插入摄像头图标昆明五华参谋平台项目代码逻辑

六、截图：

var cutScreent =function () {
        _self=this;
        var div = document.createElement('div');
        _self.div=div;
        //设置属性信息
        div.id = "g2pageLayout";
        //将div的zindex设置为1让map的div遮挡专题图的div达到隐藏的效果
        div.setAttribute("class", "b");
        //设置样式信息
        div.setAttribute("style", "top: 50; left:0; bottom: 0; right:0; position: absolute; width: 100%; background-color: #3cace7;");
        //获取已有的一个div
        var container = document.getElementById("container");
        _self.container=container;
        //将专题图div添加到已有的div中
        //     container.appendChild(div);
        // 创建专题图地图实例
        var g2pageLayout = new g2.maps.PageLayout();
        // 初始化专题图地图，传入要初始化的DOM对象的id
        g2pageLayout.init({targetId: 'map'});
        //获取地图中的地图图层
        //var layer = g2map.findLayer("basemap");
//      debugger;
        var layerArr=ZS.MONITOR.map.getLayers();
        for(var i=0;i<layerArr.length;i++){
            //将底图图层添加到专题图地图
           // g2pageLayout.addLayer(layerArr[i]);
        }
        g2pageLayout.addLayer(layerArr[1]);
        //构造一个专题图专题元素图层，用于对专题元素进行操作
        var patternLayer = new g2.lys.PatternLayer({map: g2pageLayout});
        //获取专题地图的中心点
        var center = g2pageLayout.getCenter();
        //获取地图当前的比例尺（返回的是以米为单位），作为比例尺元素的值
        var scale = '1:{0}'.replace('{0}', g2pageLayout.getScale());
        //构造一个比例尺专题元素,并显示在地图的中心
        // (专题元素包括：文本专题元素，图片专题元素，图例专题元素，指北针专题元素，比例尺专题元素)
        var scaleBar = new g2.carto.ScaleBar({
            name: 'scaleBar1',
            x: center[0],   //放置在地图x轴坐标
            y: center[1],   //放置在地图y轴坐标
            scale: scale,   //显示的比例尺内容
            unit: '米',   //要显示的比例尺单位
            background: "#99CC33",   //显示的底色
            width: 120,   //显示的长度
            height: 30    //显示的宽度
        });
        setTimeout(function () {
            //调用导出专题图api，输入名称，并设置导出成功回调
            g2pageLayout.export("pageLayout.png", function () {
                //清空
                jQuery('#map').find('.ol-viewport')
                    .filter(function(){
                        return jQuery(this).prev().length>0;
                    });
            });

        }, 200)
    }

七、
因为在昆明五华参谋平台项目代码逻辑这里面定义了
ZS.MONITOR.map = g2map;
ZS.MONITOR.floor_g2map = g2map;
所以呢，在下面的指南针的方法里面，可以直接调用ZS.MONITOR.floor_g2map.rotate

八、debugger打在一个方法的最上面，比如这样：
/**

获取点数据样式

var _getElementSymbol = function(state) {
    debugger
    var source = "data:image/png;base64,"
    width = "34";
    height = "50";
    switch(state) {
        case 0:
            //绿色 正常
            source = "data:image/png;base64,"
            width = "34";
            height = "50";
            break;
        case 1:
            //紅色 二级告警
            source = "data:image/png;base64,"
            width = "34";
            height = "50";
            break;
        case 2:
            //橙色 一级告警
            source = "data:image/png;base64,"
            width = "34";
            height = "50";
            break;
        case 3:
            //冒火的 责令整改
            source = "data:image/png;base64,"
            width = "34";
            height = "68";
            break;
    }
    var symbol = new g2.syms.Picturemarkersymbol({
        //图片Base64编码
        source: source,
        //图片宽度
        width: width,
        //图片高度
        height: height,
        //图片旋转角度
        rotation: "0",
        //图片透明度
        opacity: "1",
        //图片X偏移量
        offsetX: height / 2,
        //图片Y偏移量
        offsetY: width / 2
    });
    return symbol;
}

然后，再在页面上的source源码里面，在可能会访问到的代码的左边打上断点，看看代码是否会访问到。
比如，刚刚就是没有访问到，因为，返回的state的格式的number类型，而之前的switch里面的state是string类型，匹配不上。

【注】：页面上有debugger，关闭F12，debugger断点效果会自动消失。这样的好处是不用再代码里面重复的添加删除debugger了

九、
bind和curd写法的时候，表格怎么传参数
main.html页面：

<form id="OwnerUnitForm">
    <input type="hidden" name="subCenterCode" id="subCenterCode">
    <table class="yy-table yy-tableFix yy-tableF">
                <tbody>
                    <tr>
                        <td >
                            <div class="gs-el-input">
                                <div id="unitNameDiv"></div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
</form>

写上一个隐藏域，参数名称和name值一样，
在curd.js里面，创建表格的时候
//创建列表

  var _createTable = function (id) {
            var _url = forent_url.operation_url + '/user/queryUserListBySysCodeAndOrgCode';
        var opt3 = {
            containerId: id,
            templateNum: 3,
            data: {
                headData: [{
                        prop: "loginName",
                        label: "单位名称",
                        'min-width ': "20%",
                        'show-overflow-tooltip': true,
                        align: "center"
                    },              
                    }
                ],
                currentPage: 1,
                pageSize: parseInt((document.documentElement.clientHeight - 249) / 40) - 1,
                total: 0,
                height: document.documentElement.clientHeight - 249,
                //斑马线
                stripe: true,
                border: true,
                url: _url,
                //当前第几页隐藏域
                pageNoId: "pageNo",
                //每页显示多少条
                pageSizeId: "pageSize",
                formId: 'OwnerUnitForm'
            },
        }

这里面有个formId，为OwnerUnitForm，和main.html里面的form的id相同，这样就将隐藏域的name值作为参数传递过去了。然后，在需要的时候给这个id等于name的隐藏域赋值即可。

分情况，一种类似于这种，参数为subCenterCode的，这种没办法创建控件，只能以隐藏域的方法传递参数
还有，如上面的unitNameDiv，单位名称，是需要自己输入的，而这种是可以作为控件创建的，那么在创建这个控件的时候：
OwnerUnitSubcenterCrud.createInput('unitNameDiv', 'unitName', '请输入单位名称检索'); // 企业名称

unitName就是传递给接口的参数。
注意：分这两种情况！！

十、
/
运营中心用户管理 ->部门管理->新建部门
/

define([], function () {
    var orgObj = JSON.parse(getGlobalVal('orgObj'));
    var userObj = JSON.parse(getGlobalVal('userObj'));
    var INPUT = {};
    var _input_create = function (id, name, val, placeholder, minNum, maxNum, required) {
        var wordStr = "validate[maxSize[" + maxNum + "], minSize[" + minNum + "]]";
        var _required = false;
        if (required) {
            wordStr = "validate[required, maxSize[" + maxNum + "], minSize[" + minNum + "]]";
            _required = true;
        }
        var options = {
            containerId: id,
            data: {
                name: name,
                placeholder: placeholder,
                width: "100%",
                size: "size",
                value: val,
                required: _required,
                validate: wordStr,
                model: "orgObj_" + id
            }
        }
        options.data["orgObj_" + id] = val;
        INPUT[name] = GS.gs_input.create(options);
    }

    var _btnBind = function () {
        // 事件绑定
        $('#btn-save').on('click', function () {
            var options = {
                "formId": "adduserDepartment",
                "promptPosition": "bottomLeft"
            };
            var flag = GS.gs_validate.create(options);
            if (flag) {
                // 防止重复提交
                initLoading();
                jQuery.ajax({
                    url: forent_url.operation_url + '/userDept/saveOrUpdateDept',
                    data: {
                        parentDeptId: '-1',
                        deptName: INPUT.DepartMentName.orgObj_DepartMentNameDiv,
                        orgCode: orgObj.orgCode,
                        createUserId: userObj.id,
                        centerType: 2
                    },
                    type: "post",
                    async: true,
                    success: function (res) {
                        if ("success" == res.code) {
                            closeLoading();
                            GS.$Message.success("保存成功!");
                            GS.gs_dialogs.closeLast();
                            $('#btn-refresh').trigger('click');
                        } else {
                            closeLoading();
                            GS.$Message.warning(res.message);
                        }
                    }
                });
            }

        })
        $('#btn-cancel').on('click', function () {
            GS.gs_dialogs.closeLast();
        })
    }

    var _initPage = function () {
        _input_create('DepartMentNameDiv', 'DepartMentName', '', '请输入部门名称', '0', '32',true);
        _btnBind();
    }
    return {
        initPage: _initPage,
    }

});

var options = {
"formId": "adduserDepartment",
"promptPosition": "bottomLeft"
};
var flag = GS.gs_validate.create(options); 这个是做验证，formId是要做验证的表单的id，promptPosition是验证信息的位置
验证规则就是上面的
var wordStr = "validate[maxSize[" + maxNum + "], minSize[" + minNum + "]]";
var _required = false;
if (required) {
wordStr = "validate[required, maxSize[" + maxNum + "], minSize[" + minNum + "]]";
_required = true;
}是否必填字数限制大小

    十一、
    var objIframe = {
                type: 1, // 默认值为0，表示信息框；1表示页面层，2表示iframe层；
                url: forent_url.localHostName + "/page/system-setting/organizational-management/add.html",
                title: ['单位信息', 'cursor: move;'],
                width: "516px",
                height: "300px",
                success: function () {
                    $("#addUnitInfo").val(JSON.stringify(addUnitInfo));
                }
            };
            GS.gs_dialogs.create(objIframe);
                        <input type="hidden" id="addUnitInfo" /> 隐藏域也可以传递对象，
                        获取：var info = JSON.parse($("#addUnitInfo").val());  先将对象转为字符串，再转回对象

十二
// 接收时间
noteManagementCurd.date_picker_create('timeRangeDiv', 'timeRange',start ,end);
写上timeRange，获取数据的时候就传参数timeRange，不写就不传，只通过timeRangeDiv创建时间选择框

十三、列表页，每条数据都是有一个row对象的，里面包含了该条列表所有的数据
然后，点击展开详情页的时候，load一个detail.html页面，在success回调方法里面，可以把数据直接带过去，不用再调一个详情页的接口了

methods:{
    showDetails:function(row){ 
                    var accidentInfoId = row.accidentInfoId;
                    var objIframe = {
                        type: 1, // 默认值为0，表示信息框；1表示页面层，2表示iframe层；
                        title: "详情",
                        url: forent_url.localHostName + "/page/warning-disposal/ownerUndetail.html",
                        width: "800px",
                        height: "620px",
                        success: function () {
                            $("#warnId").val(row.warnId);
                            $("#hidden-danger-number").html(row.accidentNo);
                            $("#hidden-danger-time").html(row.troubleTime);
                            $("#unit-name").html(row.unitName);
                            $("#hidden-danger-service").html(row.enterpriseUnitServiceModel);
                            $("#device-type").html(row.deviceTypeName);
                            $("#device-id").html(row.deviceId);
                            $("#hidden-danger-from").html(row.accidentTypeText);//
                            $("#host-loop-location").html(row.laMake+row.laLoop+row.laPoint);
                            $("#device-location").html(row.deviceAddress);
                            $("#hidden-danger-description").html(row.faultDescribe);
                            $(".processStatus").html(row.processStateText)

                        }
                    }
                    GS.gs_dialogs.create(objIframe);
                },
}

//html页面
<ul class="items">
    <li class="item">
        <span class="info-title left">隐患编号:</span>
            <b class="content" id="hidden-danger-number">201809269041010</b> 
    </li>
    <li class="item">
            <span class=" info-title">隐患接收时间：</span>
            <b class="content" id="hidden-danger-time"></b>
    </li>
    <li class="item">
            <span class="info-title left">单位名称：</span>
            <b class="content" id="unit-name"></b>
    </li>
    <li class="item">
            <span class="info-title left">服务模式：</span>
            <b class="content" id="hidden-danger-service"></b>
    </li>
    </ul>

十四、如果详情页需要再重新调一个接口的话，那么在success回调方法里面，就传一个接口需要的参数过去，而不是具体的数据了，然后在详情页，根据这个参数调接口，获取数据，再赛到页面里面

//行点击事件 详情
detaiClick: function (row) {
        //获取id  获取数据
    console.log(row)
        //  点击行弹出dialog 对话框
        var objIframe = {
                type: 1, // 默认值为0，表示信息框；1表示页面层，2表示iframe层；
                url: forent_url.localHostName + "/page/system-setting/userRole/Detail.html",
                title: ['用户详情', 'cursor: move;'],
                width: "400px",
                height: "421px",
                success: function () {
                    $('#detail-Id').val(row.userId);
                }
        };
        GS.gs_dialogs.create(objIframe);
},

//js文件
jQuery.ajax({
        url: forent_url.base_LocalUrl + "/user/getUserDetail",
        type: 'post',
        data: {
                "userId": $('#detail-Id').val(),
        },
        success: function (res) {

                app.info = res.data;
             var orglist = res.data.orgList;
                var temp =[]
                for(var i=0;i<orglist.length;i++){
                     temp.push(orglist[i].orgName)
                }
                app.functionNames = temp.join(",");
        }
});

//detail页面
<ul>
    <li class="i-2">
                    <em class="label before">用户姓名：</em>
                    <div class="name">{{info.name}}</div>
            </li>
    <li class="i-1">
            <em class="label before">用户名：</em>
            <div class="name">{{info.loginName}}</div>
    </li>
    <li class="i-2">
            <em class="label">所属单位：</em>
            <div class="name">{{info.orgName}}</div>
    </li>
</ul>

昆明五华参谋平台项目代码逻辑

相关阅读