zengh
2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77
public/map/widgets/clientManagement/ClientManagement.js
@@ -1,10 +1,10 @@
/*
 * @Description:
 * @Description:
 * @Version: 1.0
 * @Author: yangsx
 * @Date: 2019-12-09 19:01:40
 * @LastEditors: yangsx
 * @LastEditTime: 2019-12-14 14:44:57
 * @LastEditors: song
 * @LastEditTime: 2021-02-25 13:59:29
 */
define([
    "dojo",
@@ -58,7 +58,7 @@
    "widgets/clientManagement/FlareClusterLayer_v3",
    "dojo/domReady!",
    "widgets/realTimePolice/LayUIDataTable"
], function (
], function(
    dojo,
    declare,
    lang,
@@ -144,14 +144,14 @@
        //存放树状图id
        zTreeId: null,
        constructor: function (options, srcRefNode) {
        constructor: function(options, srcRefNode) {
            this._map = options.map;
            objThis = this;
            this._map.addLayer(this.realTimeAddEntitys);
            this._map.addLayer(this.addOneEntitys);
        },
        startup: function () {
        startup: function() {
            objThis._map.addLayer(objThis._siteLayer);
            var that = this;
@@ -159,549 +159,34 @@
        },
        open: function () {
        open: function() {
            var that = this;
            // 行政区移入事件
            $('#realtimeDistrict').mouseenter(function () {
                if ($('#realtimeDistrict .select-list').is(':hidden')) {
                    $('#realtimeDistrict .select-list').stop().slideDown(0);
                }
            });
            // 行政区移出事件
            $('#realtimeDistrict').mouseleave(function () {
                if (!$('#realtimeDistrict .select-list').is(':hidden')) {
                    $('#realtimeDistrict .select-list').stop().slideUp(0);
                }
            });
            // 类型移入事件
            $('#realtimeLevel').mouseenter(function () {
                if ($('#realtimeLevel .select-list').is(':hidden')) {
                    $('#realtimeLevel .select-list').stop().slideDown(0);
                }
            });
            // 类型移出事件
            $('#realtimeLevel').mouseleave(function () {
                if (!$('#realtimeLevel .select-list').is(':hidden')) {
                    $('#realtimeLevel .select-list').stop().slideUp(0);
                }
            });
            // 状态移入事件
            $('#client-query-type').mouseenter(function () {
                if ($('#client-query-type .select-list').is(':hidden')) {
                    $('#client-query-type .select-list').stop().slideDown(0);
                }
            });
            // 状态移出事件
            $('#client-query-type').mouseleave(function () {
                if (!$('#client-query-type .select-list').is(':hidden')) {
                    $('#client-query-type .select-list').stop().slideUp(0);
                }
            });
            // 行政区点击事件
            $('.client-time-select-condition #realtimeDistrict .select-list').off('click', 'li').on('click', 'li', function (event) {
                var text = $(this).text();
                that.queryXZQ = ($(this).attr('addvcd') == "" ? null : $(this).attr('addvcd'));
                //调用通用查询事件
                that.clientQueryData();
                $(this).parent().parent().prev().html(text + '<i class="layui-icon client-select">&#xe61a;</i>');
                $(this).parent().parent().stop().slideUp(0);
            });
            // 类型点击事件
            $('.client-time-select-condition #realtimeLevel .select-list').off('click', 'li').on('click', 'li', function (event) {
                var text = $(this).text();
                that.queryType = (text == "全部" ? null : text);
                //调用通用查询事件
                that.clientQueryData();
                $(this).parent().parent().prev().html(text + '<i class="layui-icon client-select">&#xe61a;</i>');
                $(this).parent().parent().stop().slideUp(0);
            });
            // 状态点击事件
            $('.client-time-select-condition #client-query-type .select-list').off('click', 'li').on('click', 'li', function (event) {
                var text = $(this).text();
                that.queryZT = (text == "全部" ? null : text);
                //调用通用查询事件
                that.clientQueryData();
                $(this).parent().parent().prev().html(text + '<i class="layui-icon client-select">&#xe61a;</i>');
                $(this).parent().parent().stop().slideUp(0);
            });
            //查询按钮点击事件
            $("#client-query-cx").off('click').click(function () {
                that.clientQueryData();
            });
            //清空按钮点击事件
            $("#client-query-qk").off('click').click(function () {
                that.queryXZQ = null;
                that.queryType = null;
                that.queryZT = null;
                that.zTreeId = null;
                $("#client_select_1").html('全部<i class="layui-icon client-select">&#xe61a;</i>');
                $("#client_select_2").html('全部<i class="layui-icon client-select">&#xe61a;</i>');
                $("#client_select_3").html('全部<i class="layui-icon client-select">&#xe61a;</i>');
                $("#client-query-input").val("");
                that.clientQueryData();
            });
            $('#mapcontentClass').addClass('client-left-map'); //追加样式
            $('#tabcontainer').css('width', '100%');
            $("#client-sh-map i").html('&#xe65a;');
            //右侧地图拖动
            $("#client-sh-map").off('click').click("click", () => {
                if (that.mapShow == 1) {
                    $('#tabcontainer').css('width', '66%');
                    $("#client-sh-map i").html('&#xe65b;');
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                    that.mapShow = 0;
                } else {
                    $('#tabcontainer').css('width', '100%');
                    $("#client-sh-map i").html('&#xe65a;');
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                    that.mapShow = 1;
                }
            });
            var layerTabHei = $(".client-time-police .client-time-information-list").height();
            layui.use('table', function () {
                var table = layui.table;
                that.getClinentData(null, 0);
                //树状图勾选
                function onClick(event, treeId, treeNode, clickFlag) {
                    that.zTreeId = treeNode.id;
                    that.getClinentData(treeNode.id, 1);
                }
                //树状图右键事件
                function OnRightClick(event, treeId, treeNode) {
                    if (treeNode && !treeNode.noR) {
                        that.zTree.selectNode(treeNode);
                        showRMenu("node", event.clientX, event.clientY);
            $.ajax({
                url: '/api/blade-jfpts/equipment/equipment/pageDept?deviceName='+ window.clientID,
                type: 'get',
                dataType: 'JSON',
                success: function(data) {
                    var datas = data.data.records;
                    for (var i = 0; i < datas.length; i++) {
                        datas[i].x = Number(datas[i].jd);
                        datas[i].y = Number(datas[i].wd);
                    }
                };
                //树状图一键布防
                $("#client-all-deploy").off('click').click(function () {
                    var nodes = that.zTree.getSelectedNodes();
                    $.ajax({
                        url: 'http://36.134.81.48:18000/api/blade-jfpts/netty/netty/selectNettyChannelb',
                        data: {
                            pid: nodes[0].id
                        },
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (data) {
                            hideRMenu();
                            that.zTreeId = nodes[0].id;
                            that.getClinentData(nodes[0].id, 1);
                            layer.msg('布防成功');
                        }
                    });
                });
                //树状图一键撤防
                $("#client-all-retreat").off('click').click(function () {
                    var nodes = that.zTree.getSelectedNodes();
                    $.ajax({
                        url: 'http://36.134.81.48:18000/api/blade-jfpts/netty/netty/selectNettyChannelc',
                        data: {
                            pid: nodes[0].id
                        },
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (data) {
                            hideRMenu();
                            that.zTreeId = nodes[0].id;
                            that.getClinentData(nodes[0].id, 1);
                            layer.msg('撤防成功');
                        }
                    });
                });
                function hideRMenu() {
                    if ($("#rMenu")) $("#rMenu").css({"visibility": "hidden"});
                    $("body").unbind("mousedown", onBodyMouseDown);
                    that.flareClusterLayer(datas);
                }
                function showRMenu(type, x, y) {
                    $("#rMenu ul").show();
                    y += document.body.scrollTop - 30;
                    x += document.body.scrollLeft - 30;
                    $("#rMenu").css({"top": y + "px", "left": x + "px", "visibility": "visible"});
                    $("body").bind("mousedown", onBodyMouseDown);
                };
                function onBodyMouseDown(event) {
                    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                        $("#rMenu").css({"visibility": "hidden"});
                    }
                };
                var setting = {
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onClick: onClick,
                        onRightClick: OnRightClick
                    }
                };
                var nodes = [
                    {id: 1, pId: 0, name: "父节点1"},
                    {id: 11, pId: 1, name: "子节点1"},
                    {id: 12, pId: 1, name: "子节点2"}
                ];
                $.ajax({
                    url: 'http://36.134.81.48:18000/api/blade-jfpts/catalogs/catalogs/catalogList',
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (data) {
                        $.fn.zTree.init($("#client_left_tree"), setting, data.data);
                        that.zTree = $.fn.zTree.getZTreeObj("client_left_tree");
                    }
                });
                $.ajax({
                    url: 'http://36.134.81.48:18000/api/blade-jfpts/district/district/selectList',
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (data) {
                        $('.client-time-police .client-time-select-condition .realtime-district .select-list ul').empty();
                        $('.client-time-police .client-time-select-condition .realtime-district .select-list ul').append("<li addvcd=''>全部</li>");
                        for (var i = 0; i < data.data.length; i++) {
                            $('.client-time-police .client-time-select-condition .realtime-district .select-list ul').append("<li addvcd=" + data.data[i].addvcd + ">" + data.data[i].addvnm + "</li>");
                        }
                    }
                });
                //渲染中间表格
                that.updateTable = table.render({
                    elem: '#client_time_table'
                    , height: (layerTabHei - 20)
                    , page: {            //分页设置
                        limit: 15,      //默认每一页显示数量
                        limits: [5, 10, 15, 20, 30, 40, 50]      //可选择每页显示的数量
                    }
                    , cellMinWidth: 100
                    , done: function (res, curr, count) {
                        LayUIDataTable.SetJqueryObj($);// 第一步:设置jQuery对象
                        var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) {
                        })
                        // 对相关数据进行判断处理--此处对mk2大于30的进行高亮显示
                        $.each(currentRowDataList, function (index, obj) {
                            if (obj['color'].value == 1 || obj['color'].value == 2) {
                                obj['heartbeat'].row.css({"color": "#ff7627"});
                            }
                        })
                    }
                    , cols: [[ //表头
                        {
                            field: '',
                            type: 'numbers',
                            title: '序号',
                            width: 76,
                            fixed: 'left',
                            align: 'center'
                        }
                        , {field: 'id', title: "ID", width: 0, hide: true, align: 'center'}
                        , {field: 'deviceName', title: '设备名称', width: 130, align: 'center'}
                        , {field: 'deviceNumber', title: '设备编号', width: 150, align: 'center'}
                        , {field: 'jd', title: "经度", width: 0, hide: true, align: 'center'}
                        , {field: 'wd', title: "纬度", width: 0, hide: true, align: 'center'}
                        , {field: 'color', title: "颜色", width: 0, hide: true, align: 'center'}
                        , {field: 'addvcd', title: '行政区', align: 'center'}
                        , {
                            field: 'devicestate',
                            title: '布撤防状态',
                            align: 'center',
                            templet: function (item) {
                                if (item.devicestate == '0') {
                                    return "撤防";
                                } else if (item.devicestate == '1') {
                                    return "布防";
                                } else {
                                    return "";
                                }
                            }
                        }
                        , {
                            field: 'dtype', title: '设备状态', align: 'center', templet: function (item) {
                                if (item.dtype == '0') {
                                    return "掉线";
                                } else if (item.dtype == '1') {
                                    return "在线";
                                } else {
                                    return "";
                                }
                            }
                        }
                        , {field: 'deviceType', title: '设备类型', width: 170, align: 'center'}
                        , {field: 'ownership', title: '权属', align: 'center'}
                        , {field: 'street', title: '街道', width: 200, align: 'center'}
                        , {field: 'pay', title: '缴费信息', align: 'center'}
                        , {field: 'stime', title: '安装时间', width: 170, align: 'center'}
                        , {field: 'expireTime', title: '到期时间', width: 170, align: 'center'}
                        , {field: 'heartbeat', title: '最后上传时间', width: 170, align: 'center'}
                        , {
                            field: '',
                            title: '操作',
                            toolbar: "#client_time_table_btn",
                            width: 170,
                            fixed: 'right',
                            align: 'center'
                        }
                    ]]
                });
                table.on('tool(test)', function (obj) {
                    switch (obj.event) {
                        case 'detail':  //编辑
                            layer.open({
                                type: 2,
                                title: '编辑页面',
                                shadeClose: false,//点击窗口外关闭
                                shade: [0.5, "#DCDCDC"],//遮罩
                                area: ['860px', '406px'],
                                content: "../../popup/html/clientPopup.html?id=" + obj.data.id,//跳转的页面
                                success: function (layero, index) {
                                    //遮罩层
                                    var mask = $(".layui-layer-shade");
                                    mask.appendTo(layero.parent());
                                },
                                cancel: function (index) {
                                    //$(".layui-laypage-btn").click();//这里用于关闭Open时触发回调函数  刷新父页面数据  一定要引入Jquery
                                }
                            });
                            break;
                        case 'deploy':  //布防
                            $.ajax({
                                url: 'http://36.134.81.48:18000/api/blade-jfpts/netty/netty/selectNettyChannelOb',
                                data: {
                                    deviceNumber: obj.data.deviceNumber,
                                    ID: obj.data.id
                                },
                                type: 'POST',
                                dataType: 'JSON',
                                success: function (data) {
                                    that.getClinentData(null, 1);
                                    layer.msg('布防成功');
                                }
                            });
                            break;
                        case 'retreat':  //撤防
                            $.ajax({
                                url: 'http://36.134.81.48:18000/api/blade-jfpts/netty/netty/selectNettyChannelOc',
                                data: {
                                    deviceNumber: obj.data.deviceNumber,
                                    ID: obj.data.id
                                },
                                type: 'POST',
                                dataType: 'JSON',
                                success: function (data) {
                                    that.getClinentData(null, 1);
                                    layer.msg('撤防成功');
                                }
                            });
                            break;
                        case 'location':  //定位
                            if (that.mapShow == 1) {
                                $('#tabcontainer').css('width', '66%');
                                $("#client-sh-map i").html('&#xe65b;');
                                that.updateTable.reload({
                                    data: that.clientTableData
                                });
                                that.mapShow = 0;
                            }
                            that.viewsGoTo(obj.data.jd, obj.data.wd)
                            break;
                    }
                });
            });
        },
        // 定位
        viewsGoTo: function (jd, wd) {
            var lgtd = Number(jd);
            var lttd = Number(wd);
            var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({wkid: 4326}));//根据输入坐标信息找地图上的点
            this._map.centerAndZoom(position, 18);//缩放,10是缩放级别,可以自定义,数值越大缩放越大
        },
        close: function () {
            var that = this;
            if (that.clusterLayer != null) {
                that.clearLayer();
            }
            layer.close(that.mylay);
            $('#mapcontentClass').removeClass('client-left-map'); //移除样式
            $('#tabcontainer').css('width', '66%');
            window.clearTimeout(that.realTimeQuery);
            if (that.layuiLayer != null) {
                that.layuiLayer.closeAll();
                that.layerIndex = null;
            }
        close: function() {
        },
        // 鼠标点击事件
        clickHand: function () {
            var self = this;
            self._map.onClick = mapClick;
            function mapClick(evt) {
                if (evt.graphic) {
                }
            }
        },
        //获取客户列表并进行表格渲染
        getClinentData: function (pid, openW) {
            var that = this;
            $.ajax({
                url: 'http://36.134.81.48:18000/api/blade-jfpts/equipment/equipment/page',
                data: {
                    pid: pid
                },
                type: 'GET',
                dataType: 'JSON',
                success: function (data) {
                    data.data = that.setColorSort(data.data);
                    that.clientTableData = data.data;
                    if (openW == 0) {
                        var jfwin = "";
                        var xb = "";
                        for (var i = 0; i < data.data.length; i++) {
                            data.data[i].x = Number(data.data[i].jd);
                            data.data[i].y = Number(data.data[i].wd);
                            if (data.data[i].type == "1") {
                                xb++;
                                jfwin +=
                                    "<div class='jfwin-div'>" +
                                    "<span>" + xb + "、</span>" +
                                    "<span>设备名称:" + data.data[i].deviceName + "</span>&nbsp;" +
                                    "<span>所属单位:" + data.data[i].street + "</span>&nbsp;" +
                                    "<span>到期时间:" + data.data[i].expireTime + "</span>" +
                                    "</div>"
                            }
                        }
                        if (jfwin != "") {
                            //页面层
                            that.mylay = layer.open({
                                type: 1,
                                title: "待缴费",
                                skin: 'layui-layer-rim', //加上边框
                                area: ['550px', '280px'], //宽高
                                content: jfwin
                            });
                        }
                        that.flareClusterLayer(data.data);
                    }
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                }
            });
        },
        //下拉切换/点击查询事件
        clientQueryData: function () {
            var that = this;
            var where = {};
            if (that.zTreeId != null) {
                where.pid = that.zTreeId;
            }
            if ($("#client-query-input").val() != null) {
                where.deviceName = $("#client-query-input").val();
            }
            if (that.queryXZQ != null) {
                where.addvcd = that.queryXZQ
            }
            if (that.queryType != null) {
                where.dtype = that.queryType == "掉线" ? "0" : that.queryType == "测试" ? "1" : that.queryType == "报警" ? "2" : "";
            }
            if (that.queryZT != null) {
                where.devicestate = that.queryZT == "布防" ? "1" : that.queryZT == "撤防" ? "0" : "";
            }
            //获取四个查询条件
            $.ajax({
                url: 'http://36.134.81.48:18000/api/blade-jfpts/equipment/equipment/page',
                data: where,
                type: 'GET',
                dataType: 'JSON',
                success: function (data) {
                    data.data = that.setColorSort(data.data);
                    that.clientTableData = data.data;
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                }
            });
        },
        clickHand: function() {},
        //聚合图层事件
        flareClusterLayer: function (datas) {
        flareClusterLayer: function(datas) {
            var that = this;
@@ -714,7 +199,7 @@
            //init the layer, more options are available and explained in the cluster layer constructor
            that.clusterLayer = new FlareClusterLayer({
                id: "flare-cluster-layer",
                spatialReference: new esri.SpatialReference({"wkid": 4326}),
                spatialReference: new esri.SpatialReference({ "wkid": 4326 }),
                subTypeFlareProperty: "facilityType",
                singleFlareTooltipProperty: "name",
                displaySubTypeFlares: true,
@@ -723,16 +208,16 @@
                preClustered: preClustered,
                clusterRatio: 75,
                clusterAreaDisplay: areaDisplayMode,
                clusteringBegin: function () {
                clusteringBegin: function() {
                    console.log("clustering begin");
                },
                clusteringComplete: function () {
                clusteringComplete: function() {
                    console.log("clustering complete");
                }
            });
            //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
            var defaultSym = new PictureMarkerSymbol("./images/ceshi.png", 32, 32).setOffset(0, 15);
            var defaultSym = new PictureMarkerSymbol("./images/selfbaojin2.gif", 80, 80).setOffset(0, 15);
            var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
            var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
            var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
@@ -749,9 +234,9 @@
            var template = new PopupTemplate({
                title: "{name}",
                fieldInfos: [
                    {fieldName: "facilityType", label: "Facility Type", visible: true},
                    {fieldName: "postcode", label: "Post Code", visible: true},
                    {fieldName: "isOpen", label: "Opening Hours", visible: true}
                    { fieldName: "facilityType", label: "Facility Type", visible: true },
                    { fieldName: "postcode", label: "Post Code", visible: true },
                    { fieldName: "isOpen", label: "Opening Hours", visible: true }
                ]
            });
@@ -763,47 +248,14 @@
            //var data = DataManager.getData();
            that.clusterLayer.addData(datas);
        }
        , clearLayer: function () {
        },
        clearLayer: function() {
            var that = this;
            that._map.removeLayer(that.clusterLayer);
            that.clusterLayer = null;
        }
        , setColorSort: function (data) {
            var Dqdate = new Date().getTime();
            for (var i = 0; i < data.length; i++) {
                //设置初始等级为4
                data[i].color = 4;
                //当欠费时,级别为3
                if (data[i].type == "1") {
                    data[i].color = 3;
                }
                if (data[i].heartbeat != null && data[i].heartbeat != "") {
                    var date = new Date(data[i].heartbeat).getTime();
                    //若心跳停止一天时,级别为1
                    if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) {
                        data[i].color = 1;
                    }
                } else {
                    //若心跳为空,级别为2
                    data[i].color = 2;
                }
            }
            data.sort(function (a, b) {
                return a.color - b.color;
            });
            return data;
        }
    });
    return Widget;
});