13518219792
网站建设资讯

NEWS

网站建设资讯

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

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

10余年的太白网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整太白建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“太白网站设计”,“太白网站推广”以来，每个客户项目都认真落实执行。

二、内容分发页面
根目录下的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;i0;
                    });
            });

        }, 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页面：

写上一个隐藏域，参数名称和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);
                         隐藏域也可以传递对象，
                        获取：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页面

    
    
  • 
        隐患编号:
            201809269041010 
    
    • 
    
  • 
            隐患接收时间：
            
    
    • 
    
  • 
            单位名称：
            
    
    • 
    
  • 
            服务模式：
            
    
    •

十四、如果详情页需要再重新调一个接口的话，那么在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
    
  • 
                    用户姓名：
                    
    {{info.name}}
    
            
    • 
    
  • 
            用户名：
            
    {{info.loginName}}
    
    
    • 
    
  • 
            所属单位：
            
    {{info.orgName}}
    
    
    •

    文章题目：昆明五华参谋平台项目代码逻辑
    文章源于：http://cdweb.net/article/iecoho.html

    其他资讯