聚合图集成，按钮选中样式调整

zengh

2021-02-21 ab0598cc26762aedae33894fc78462989e8302b4

聚合图集成，按钮选中样式调整

 public/map/core/manager/widgetsmanager.js

@@ -148,7 +148,7 @@
            _bodyDom: null,
            _mapContentDom: null,
            /**
             * 默认初始化显示在侧边栏的Widget  
             * 默认初始化显示在侧边栏的Widget
             */
            _defaultActivedSiderWidgetId: null,
            _topWidgetContainerDom: null,
@@ -181,7 +181,7 @@
                            case "cover":
                                this._parseCoverWidget(widgetCfg);
                                break;
                                

                        }
                    }
                    if (this._defaultActivedSiderWidgetId != null && this._activedButton != null) {
@@ -512,4 +512,4 @@
                }
            }
        });
    });
    });

 public/map/index.html

@@ -102,11 +102,9 @@

<script>
  var openId = getQueryStringByKey('openid');

  if (openId && openId != '') {
    init(openId)
  }


  function getQueryStringByKey(key) {
    return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];

 public/map/widgets/FlareClusterLayer/DataManager.js

File was deleted

 public/map/widgets/FlareClusterLayer/data.json

File was deleted

 public/map/widgets/FlareClusterLayer/fcl/FlareClusterLayer_v3.js

File was deleted

 public/map/widgets/FlareClusterLayer/fcl/FlareClusterLayer_v4.js

File was deleted

 public/map/widgets/FlareClusterLayer/index.html

File was deleted

 public/map/widgets/FlareClusterLayer/index_v3.html

File was deleted

 public/map/widgets/FlareClusterLayer/index_v4.html

File was deleted

 public/map/widgets/FlareClusterLayer/typescript/FlareClusterLayer_v4.ts

File was deleted

 public/map/widgets/FlareClusterLayer/typings/custom-typings.d.ts

File was deleted

 public/map/widgets/FlareClusterLayer/typings/index.d.ts

File was deleted

 public/map/widgets/clientManagement/ClientManagement.js

@@ -7,803 +7,259 @@
 * @LastEditTime: 2019-12-14 14:44:57
 */
define([
    "dojo",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "base/BaseWidget",
    "dojo/text!widgets/clientManagement/template.html",
    "base/AppEvent",
    "base/ConfigData",
    "widgets/realTimePolice/config",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/dom-attr",
    "dojo/dom-style",
    "dojo/on",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/layers/FeatureLayer",
    "controls/tab/TabControl",
    "esri/dijit/SymbolStyler",
    "esri/styles/basic",
    "dojo/_base/array",
    "esri/InfoTemplate",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
    "esri/Color",
    "esri/graphic",
    "esri/geometry/Point",
    "esri/tasks/FeatureSet",
    "esri/renderers/HeatmapRenderer",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/PictureMarkerSymbol",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/SpatialReference",
    "esri/tasks/GeometryService",
    "esri/tasks/ProjectParameters",
    "esri/layers/GraphicsLayer",
    "esri/layers/LabelLayer",
    "esri/symbols/TextSymbol",
    "esri/renderers/SimpleRenderer",
    "esri/renderers/ClassBreaksRenderer",
    "esri/tasks/Geoprocessor",
    "esri/tasks/DataFile",
    "esri/geometry/webMercatorUtils",
    "esri/symbols/Font",
    "esri/geometry/ScreenPoint",
    "esri/layers/ImageParameters",
    "esri/geometry/geometryEngine",
    "esri/dijit/PopupTemplate",
    "widgets/clientManagement/FlareClusterLayer_v3",
    "dojo/domReady!",
    "widgets/realTimePolice/LayUIDataTable"
  "dojo",
  "dojo/_base/declare",
  "dojo/_base/lang",
  "base/BaseWidget",
  "dojo/text!widgets/clientManagement/template.html",
  "base/AppEvent",
  "base/ConfigData",
  "widgets/realTimePolice/config",
  "dojo/dom",
  "dojo/dom-construct",
  "dojo/dom-attr",
  "dojo/dom-style",
  "dojo/on",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/layers/ArcGISTiledMapServiceLayer",
  "esri/layers/FeatureLayer",
  "controls/tab/TabControl",
  "esri/dijit/SymbolStyler",
  "esri/styles/basic",
  "dojo/_base/array",
  "esri/InfoTemplate",
  "esri/tasks/query",
  "esri/tasks/QueryTask",
  "esri/Color",
  "esri/graphic",
  "esri/geometry/Point",
  "esri/tasks/FeatureSet",
  "esri/renderers/HeatmapRenderer",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/PictureMarkerSymbol",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/SpatialReference",
  "esri/tasks/GeometryService",
  "esri/tasks/ProjectParameters",
  "esri/layers/GraphicsLayer",
  "esri/layers/LabelLayer",
  "esri/symbols/TextSymbol",
  "esri/renderers/SimpleRenderer",
  "esri/renderers/ClassBreaksRenderer",
  "esri/tasks/Geoprocessor",
  "esri/tasks/DataFile",
  "esri/geometry/webMercatorUtils",
  "esri/symbols/Font",
  "esri/geometry/ScreenPoint",
  "esri/layers/ImageParameters",
  "esri/geometry/geometryEngine",
  "esri/dijit/PopupTemplate",
  "widgets/clientManagement/FlareClusterLayer_v3",
  "dojo/domReady!",
  "widgets/realTimePolice/LayUIDataTable"
], function (
    dojo,
    declare,
    lang,
    BaseWidget,
    template,
    AppEvent,
    ConfigData,
    config,
    dom,
    domConstruct,
    domAttr,
    domStyle,
    on,
    ArcGISDynamicMapServiceLayer,
    ArcGISTiledMapServiceLayer,
    FeatureLayer,
    TabControl,
    SymbolStyler,
    basic,
    arrayUtils,
    InfoTemplate,
    Query,
    QueryTask,
    Color,
    Graphic,
    Point,
    FeatureSet,
    HeatmapRenderer,
    SimpleLineSymbol,
    SimpleFillSymbol,
    PictureMarkerSymbol,
    SimpleMarkerSymbol,
    SpatialReference,
    GeometryService,
    ProjectParameters,
    GraphicsLayer,
    LabelLayer,
    TextSymbol,
    SimpleRenderer,
    ClassBreaksRenderer,
    Geoprocessor,
    DataFile,
    webMercatorUtils,
    Font,
    ScreenPoint,
    ImageParameters,
    geometryEngine,
    PopupTemplate,
    FlareClusterLayer
  dojo,
  declare,
  lang,
  BaseWidget,
  template,
  AppEvent,
  ConfigData,
  config,
  dom,
  domConstruct,
  domAttr,
  domStyle,
  on,
  ArcGISDynamicMapServiceLayer,
  ArcGISTiledMapServiceLayer,
  FeatureLayer,
  TabControl,
  SymbolStyler,
  basic,
  arrayUtils,
  InfoTemplate,
  Query,
  QueryTask,
  Color,
  Graphic,
  Point,
  FeatureSet,
  HeatmapRenderer,
  SimpleLineSymbol,
  SimpleFillSymbol,
  PictureMarkerSymbol,
  SimpleMarkerSymbol,
  SpatialReference,
  GeometryService,
  ProjectParameters,
  GraphicsLayer,
  LabelLayer,
  TextSymbol,
  SimpleRenderer,
  ClassBreaksRenderer,
  Geoprocessor,
  DataFile,
  webMercatorUtils,
  Font,
  ScreenPoint,
  ImageParameters,
  geometryEngine,
  PopupTemplate,
  FlareClusterLayer
) {
    var Widget = declare([BaseWidget], {
        widgetName: "RealTimePolice",
        label: "实时报警",
        templateString: template,
        _map: null,
        objThis: null,
        _siteLayer: new GraphicsLayer(),
        layuiLayer: null,
        layuiLadate: null,
        tabIndex: 0,
  var Widget = declare([BaseWidget], {
    widgetName: "RealTimePolice",
    label: "实时报警",
    templateString: template,
    _map: null,
    objThis: null,
    _siteLayer: new GraphicsLayer(),
    layuiLayer: null,
    layuiLadate: null,
    tabIndex: 0,

        zTree: null,
    zTree: null,

        //存放表格数据
        clientTableData: null,
        //刷新表格
        updateTable: null,
    //存放表格数据
    clientTableData: null,
    //刷新表格
    updateTable: null,

        //存放查询条件值，方便联动查询
        queryXZQ: null,
        queryType: null,
        queryZT: null,
    //存放查询条件值，方便联动查询
    queryXZQ: null,
    queryType: null,
    queryZT: null,

        //存放弹窗
        mylay: null,
    //存放弹窗
    mylay: null,

        //存放聚合实体
        clusterLayer: null,
    //存放聚合实体
    clusterLayer: null,

        //存放地图是否隐藏参数
        mapShow: 1,
    //存放地图是否隐藏参数
    mapShow: 1,

        //存放树状图id
        zTreeId: null,
    //存放树状图id
    zTreeId: null,

        constructor: function (options, srcRefNode) {
            this._map = options.map;
            objThis = this;
    constructor: function (options, srcRefNode) {
      this._map = options.map;
      objThis = this;

            this._map.addLayer(this.realTimeAddEntitys);
            this._map.addLayer(this.addOneEntitys);
        },
        startup: function () {
            objThis._map.addLayer(objThis._siteLayer);
            var that = this;
      this._map.addLayer(this.realTimeAddEntitys);
      this._map.addLayer(this.addOneEntitys);
    },
    startup: function () {
      objThis._map.addLayer(objThis._siteLayer);
      var that = this;


        },
    },


        open: function () {
            var that = this;
    open: function () {
      var that = this;
      $.ajax({
        url: 'http://192.168.0.107:1888/api/blade-jfpts/alarm/alarm/page?current=1&size=10',
        type: 'get',
        dataType: 'JSON',
        success: function (data) {

            // 行政区移入事件
            $('#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);
                    }
                };

                //树状图一键布防
                $("#client-all-deploy").off('click').click(function () {
                    var nodes = that.zTree.getSelectedNodes();
                    $.ajax({
                        url: 'http://36.134.81.48:18001/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:18001/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);
                }

                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:18001/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:18001/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:18001/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:18001/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;

            }

        },

        // 鼠标点击事件
        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:18001/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:18001/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
                    });
                }
            });


        },

        //聚合图层事件
        flareClusterLayer: function (datas) {

            var that = this;

            var preClustered = false;
            var displaySingleFlaresAtCount = 10;
            var areaDisplayMode = "";
            // var allData = JSON.parse(DATA);
            // DataManager.setData(allData);

            //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}),
                subTypeFlareProperty: "facilityType",
                singleFlareTooltipProperty: "name",
                displaySubTypeFlares: true,
                displaySingleFlaresAtCount: displaySingleFlaresAtCount,
                flareShowMode: "mouse",
                preClustered: preClustered,
                clusterRatio: 75,
                clusterAreaDisplay: areaDisplayMode,
                clusteringBegin: function () {
                    console.log("clustering begin");
                },
                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 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]));
            var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
            var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
            renderer.addBreak(0, 19, smSymbol);
            renderer.addBreak(20, 150, mdSymbol);
            renderer.addBreak(151, 1000, lgSymbol);
            renderer.addBreak(1001, Infinity, xlSymbol);

            that.clusterLayer.setRenderer(renderer); //use standard setRenderer.

            //set up a popup template
            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}
                ]
            });

            //clusterLayer.infoTemplate = template;
            that._map.infoWindow.titleInBody = false;

            that._map.addLayer(that.clusterLayer);

            //var data = DataManager.getData();
            that.clusterLayer.addData(datas);


          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);
          }
          that.flareClusterLayer(datas);
        }
        , clearLayer: function () {
            var that = this;
            that._map.removeLayer(that.clusterLayer);
            that.clusterLayer = null;
      });

    },


    close: function () {

    },

    // 鼠标点击事件
    clickHand: function () {
    },

    //聚合图层事件
    flareClusterLayer: function (datas) {

      var that = this;

      var preClustered = false;
      var displaySingleFlaresAtCount = 10;
      var areaDisplayMode = "";
      // var allData = JSON.parse(DATA);
      // DataManager.setData(allData);

      //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}),
        subTypeFlareProperty: "facilityType",
        singleFlareTooltipProperty: "name",
        displaySubTypeFlares: true,
        displaySingleFlaresAtCount: displaySingleFlaresAtCount,
        flareShowMode: "mouse",
        preClustered: preClustered,
        clusterRatio: 75,
        clusterAreaDisplay: areaDisplayMode,
        clusteringBegin: function () {
          console.log("clustering begin");
        },
        clusteringComplete: function () {
          console.log("clustering complete");
        }
        , setColorSort: function (data) {
      });

            var Dqdate = new Date().getTime();
            for (var i = 0; i < data.length; i++) {
      //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 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]));
      var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
      var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
      renderer.addBreak(0, 19, smSymbol);
      renderer.addBreak(20, 150, mdSymbol);
      renderer.addBreak(151, 1000, lgSymbol);
      renderer.addBreak(1001, Infinity, xlSymbol);

                //设置初始等级为4
                data[i].color = 4;
      that.clusterLayer.setRenderer(renderer); //use standard setRenderer.

                //当欠费时，级别为3
                if (data[i].type == "1") {
                    data[i].color = 3;
                }
      //set up a popup template
      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}
        ]
      });

                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;
                }
            }
      //clusterLayer.infoTemplate = template;
      that._map.infoWindow.titleInBody = false;

            data.sort(function (a, b) {
                return a.color - b.color;
            });
      that._map.addLayer(that.clusterLayer);

            return data;
        }
      //var data = DataManager.getData();
      that.clusterLayer.addData(datas);


    });
    return Widget;
    }
    , clearLayer: function () {
      var that = this;
      that._map.removeLayer(that.clusterLayer);
      that.clusterLayer = null;
    }


  });
  return Widget;
});


 public/map/widgets/clientManagement/template.html

@@ -1,84 +1,8 @@
<div class='client-time-police' open-li='client-time-police'
     style='height: calc(100%);'>
    <div id="client_left_tree" class="ztree"></div>
    <div id="rMenu">
        <ul>
            <li id="client-all-deploy">一键布防</li>
            <li id="client-all-retreat">一键撤防</li>
        </ul>
    </div>

    <div id="client_left_table">
        <div class="client-time-select-condition">
            <div>
                <span>关键字查询：</span>
                <input id="client-query-input" type="text" placeholder="请输入名称/设备编码" class="route-name">
            </div>
            <div class="realtime-district">
                <ul>
                    <li id='realtimeDistrict'>
                        行政区：
                        <div id="client_select_1">
                            全部

                            <i class="layui-icon client-select">&#xe61a;</i>
                        </div>
                        <div class='select-list'>
                            <ul>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="realtime-level">
                <ul>
                    <li id='realtimeLevel'>
                        类型：
                        <div id="client_select_2">
                            全部

                            <i class="layui-icon client-select">&#xe61a;</i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>掉线</li>
                                <li>测试</li>
                                <li>报警</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="realtime-level">
                <ul>
                    <li id='client-query-type'>
                        状态：
                        <div id="client_select_3">
                            全部

                            <i class="layui-icon client-select">&#xe61a;</i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>布防</li>
                                <li>撤防</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="realtime-timeselect">
                <button type="button" id="client-query-cx" class="layui-btn layui-btn-sm layui-btn-normal"><i
                        class="layui-icon layui-icon-search"></i>查询
                </button>
                <button type="button" id="client-query-qk" class="layui-btn layui-btn-sm client-btn-qk"><i
                        class="layui-icon layui-icon-refresh"></i>清空
                </button>
            </div>


        </div>
        <div class="client-time-information-list">
@@ -88,43 +12,5 @@
            </table>
        </div>

        <script type="text/html" id="client_time_table_btn">

            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="detail" title="编辑"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/bianji.png) no-repeat;
                        background-size: 100% 100%;">
            </button>

            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="deploy" title="布防"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/baojin.png) no-repeat;
                        background-size: 100% 100%;">
            </button>

            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="retreat" title="撤防"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/cejin.png) no-repeat;
                        background-size: 100% 100%;">
            </button>

            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="location" title="定位"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/real-time-views-goto.png) no-repeat;
                        background-size: 100% 100%;">
            </button>

        </script>
    </div>
    <div style="display:flex;width:2%;align-items:center;justify-content:center;background-color:#F5F5F5;margin-left:4px">
        <a href="javascript:void(0);" id="client-sh-map"><i class="layui-icon">&#xe65a;</i></a>
    </div>
</div>

 src/views/realTimePolice/real.vue

@@ -37,21 +37,18 @@
        <el-button
          v-bind:class=" activeClass==1 ? 'btn-color' : '' "
          size="small"
          type="primary"
          @click="getBZdata(1)"
        >本周
        </el-button>
        <el-button
          v-bind:class=" activeClass==2 ? 'btn-color' : '' "
          size="small"
          type="primary"
          @click="getBYdata(2)"
        >本月
        </el-button>
        <el-button
          v-bind:class=" activeClass==3 ? 'btn-color' : '' "
          size="small"
          type="primary"
          @click="getQBdata(3)"
        >全部
        </el-button>
@@ -291,7 +288,7 @@
      <iframe
        id="mapDiv"
        ref="mapDiv"
        src="http://36.134.81.48:18001/map/index.html"
        src=" http://192.168.0.107:1888/map/index.html?openid=ClientManagement"
        frameborder="0"
        width="100%"
        height="100%"
@@ -577,6 +574,7 @@
          });
      },
      searchReset() {
        this.activeClass = -1;
        this.query = {};
        this.onLoad(this.page);
      },
@@ -781,7 +779,6 @@
        }
      },
      handleStart(row) {
        debugger
        this.$router.push({
          path: `/real/video/${row.channelNumber}/${row.serialNumber}`
        });
@@ -791,6 +788,7 @@
      },
      handleMap(row) {
        this.showMap = true;
        debugger
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[0].locationObj = {x: row.jd, y: row.wd};
@@ -1150,9 +1148,9 @@
  }

  .el-button.btn-color {
    background: #146ef6;
    border-color: #007aff;
    color: #FFF;
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }

</style>