Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

liuyg

2021-04-09 9c67dc3526d8ad356e1dcd0cc80e4382866ea6a7

Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

 public/map/images/dx-jingbao.png

 public/map/images/zx-jingbao.png

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -1,1336 +1,1398 @@
define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/on",
    "dojo/fx",
    "dojox/gfx",
    "dojox/gfx/fx",
    "dojox/gesture/tap",
    "esri/SpatialReference",
    "esri/geometry/Extent",
    "esri/geometry/Multipoint",
    "esri/geometry/Point",
    "esri/geometry/Polygon",
    "esri/geometry/ScreenPoint",
    "esri/geometry/webMercatorUtils",
    "esri/geometry/geometryEngine",
    "esri/graphic",
    "esri/Color",
    "esri/renderers/ClassBreaksRenderer",
    "esri/symbols/Font",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/TextSymbol",
    "esri/dijit/PopupTemplate",
    "esri/layers/GraphicsLayer"
  "dojo/_base/declare",
  "dojo/_base/lang",
  "dojo/_base/array",
  "dojo/on",
  "dojo/fx",
  "dojox/gfx",
  "dojox/gfx/fx",
  "dojox/gesture/tap",
  "esri/SpatialReference",
  "esri/geometry/Extent",
  "esri/geometry/Multipoint",
  "esri/geometry/Point",
  "esri/geometry/Polygon",
  "esri/geometry/ScreenPoint",
  "esri/geometry/webMercatorUtils",
  "esri/geometry/geometryEngine",
  "esri/graphic",
  "esri/Color",
  "esri/renderers/ClassBreaksRenderer",
  "esri/symbols/Font",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/TextSymbol",
  "esri/dijit/PopupTemplate",
  "esri/layers/GraphicsLayer"
], function (
    declare, lang, arrayUtils, on, coreFx, gfx, fx, tap,
    SpatialReference, Extent, Multipoint, Point, Polygon, ScreenPoint, webMercatorUtils, geometryEngine, Graphic,
    Color, ClassBreaksRenderer, Font, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, TextSymbol,
    PopupTemplate, GraphicsLayer
  declare, lang, arrayUtils, on, coreFx, gfx, fx, tap,
  SpatialReference, Extent, Multipoint, Point, Polygon, ScreenPoint, webMercatorUtils, geometryEngine, Graphic,
  Color, ClassBreaksRenderer, Font, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, TextSymbol,
  PopupTemplate, GraphicsLayer
) {
    return declare([GraphicsLayer], {
        constructor: function (options) {
            /* options description:
              spatialReference: default 102100. A SpatialReference object using the wkid of that data.
              preClustered (boolean) : default false. Whether the data is pre-clustered or not. If true the addPreClusteredData method should be used to add data. 
                                        If false use addData method and clusters will be calculated within the layer.
              clusterRatio (number): default 75. When not pre clustered this is the ratio to divide the width and height of the map by which is used to draw up a grid to represent cluster areas. Experiment based on your data.
              displaySubTypeFlares (boolean): default false. Whether to dipslay flares for sub types (ie the count of a property). If this is true, then subTypeFlareProperty must also be set
              subTypeFlareProperty (string): default null. If specified and displaySubTypeFlares is true, layer will display flares that contain a count of the objects that have the same value for the configured property.
              flareColor (esri/Color) : default new Color([0, 0, 0, 0.5]). The color for flares.
              maxFlareCount (number): default 8. The max number of flares to display. If this is too high they may overlap, depends on the size of the cluster symbols.
              displaySingleFlaresAtCount (number): default 8. If a cluster contains this count or less it will display flare that represent single objects. If it contains greater than this count it will display sub type flares if they have been configured to be displayed.
              singleFlareTooltipProperty (string): default null. Property name to get the values for display in a single point flares tooltips.
              textSymbol (esri/symbols/TextSymbol): default set below. The text symbol to use in clusters
              flareShowMode (string): default 'mouse'. Must be 'mouse' or 'tap'. On a mouse enabled device whether to show the flares on mouse enter and hide on mouse leave, or on tap / click. Devices with no mouse will behave like 'tap' anyway.
              clusteringBegin (function): default null. A basic callback function that get's fired when clustering is beginning. 
              clusteringComplete (function): default null. A basic callback function that get's fired when clustering is complete.  
              clusterAreaDisplay (string): default null. Can be either 'always' or 'hover'. 'always' will constantly display the cluster area, 'hover' will only display it on hover of cluster object
                                                         The cluster area is a ploygon of the total area covered by the points in a cluster. If using preClustered data, each cluster object must contain a property called 'points' which is an array of points for every point in the cluster. example: cluster.points = [[x1, y1], [x2, y2], [x3, y3]];
              clusterAreaRenderer (Renderer): default null. This is required if clusterAreaDisplay is set. This can be set in options constructor object or by calling setRenderer as the second argument.
              xPropertyName (string): default 'x'.  This is the name of the field in the dataset that represents the x coordinate.
              yPropertyName (string): default 'y'.  This is the name of the field in the dataset that represents the y coordinate.
              idPropertyName (string): default null. This is the name of the field in the dataset that represents a unique id which can be used to identify the flare.  This is usefull when you may have multiple points with the same lat/long.
            */
  return declare([GraphicsLayer], {
    constructor: function (options) {
      /* options description:
        spatialReference: default 102100. A SpatialReference object using the wkid of that data.
        preClustered (boolean) : default false. Whether the data is pre-clustered or not. If true the addPreClusteredData method should be used to add data. 
                                  If false use addData method and clusters will be calculated within the layer.
        clusterRatio (number): default 75. When not pre clustered this is the ratio to divide the width and height of the map by which is used to draw up a grid to represent cluster areas. Experiment based on your data.
        displaySubTypeFlares (boolean): default false. Whether to dipslay flares for sub types (ie the count of a property). If this is true, then subTypeFlareProperty must also be set
        subTypeFlareProperty (string): default null. If specified and displaySubTypeFlares is true, layer will display flares that contain a count of the objects that have the same value for the configured property.
        flareColor (esri/Color) : default new Color([0, 0, 0, 0.5]). The color for flares.
        maxFlareCount (number): default 8. The max number of flares to display. If this is too high they may overlap, depends on the size of the cluster symbols.
        displaySingleFlaresAtCount (number): default 8. If a cluster contains this count or less it will display flare that represent single objects. If it contains greater than this count it will display sub type flares if they have been configured to be displayed.
        singleFlareTooltipProperty (string): default null. Property name to get the values for display in a single point flares tooltips.
        textSymbol (esri/symbols/TextSymbol): default set below. The text symbol to use in clusters
        flareShowMode (string): default 'mouse'. Must be 'mouse' or 'tap'. On a mouse enabled device whether to show the flares on mouse enter and hide on mouse leave, or on tap / click. Devices with no mouse will behave like 'tap' anyway.
        clusteringBegin (function): default null. A basic callback function that get's fired when clustering is beginning. 
        clusteringComplete (function): default null. A basic callback function that get's fired when clustering is complete.  
        clusterAreaDisplay (string): default null. Can be either 'always' or 'hover'. 'always' will constantly display the cluster area, 'hover' will only display it on hover of cluster object
                                                   The cluster area is a ploygon of the total area covered by the points in a cluster. If using preClustered data, each cluster object must contain a property called 'points' which is an array of points for every point in the cluster. example: cluster.points = [[x1, y1], [x2, y2], [x3, y3]];
        clusterAreaRenderer (Renderer): default null. This is required if clusterAreaDisplay is set. This can be set in options constructor object or by calling setRenderer as the second argument.
        xPropertyName (string): default 'x'.  This is the name of the field in the dataset that represents the x coordinate.
        yPropertyName (string): default 'y'.  This is the name of the field in the dataset that represents the y coordinate.
        idPropertyName (string): default null. This is the name of the field in the dataset that represents a unique id which can be used to identify the flare.  This is usefull when you may have multiple points with the same lat/long.
      */

            //set options from constructor parameter or set defaults
            options = options || {};
            this.spatialRef = options.spatialReference || new SpatialReference({"wkid": 102100});
            this.preClustered = options.preClustered === true;
            this.clusterRatio = options.clusterRatio || 75;
      //set options from constructor parameter or set defaults
      options = options || {};
      this.spatialRef = options.spatialReference || new SpatialReference({
        "wkid": 102100
      });
      this.preClustered = options.preClustered === true;
      this.clusterRatio = options.clusterRatio || 75;

            this.displaySubTypeFlares = options.displaySubTypeFlares === true;
            this.subTypeFlareProperty = options.subTypeFlareProperty || null;
      this.displaySubTypeFlares = options.displaySubTypeFlares === true;
      this.subTypeFlareProperty = options.subTypeFlareProperty || null;

            this.flareColor = options.flareColor || new Color([0, 0, 0, 0.5]);
            this.maxFlareCount = options.maxFlareCount || 8;
            this.displaySingleFlaresAtCount = options.displaySingleFlaresAtCount || 8;
            this.singleFlareTooltipProperty = options.singleFlareTooltipProperty || null;
            var defaultTextSymbol = new TextSymbol()
                .setColor(new Color([255, 255, 255]))
                .setAlign(Font.ALIGN_START)
                .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
                .setVerticalAlignment("middle");
            defaultTextSymbol.font.size = 14;
            this.textSymbol = options.textSymbol || defaultTextSymbol;
            this.flareShowMode = options.flareShowMode || "mouse";
      this.flareColor = options.flareColor || new Color([0, 0, 0, 0.5]);
      this.maxFlareCount = options.maxFlareCount || 8;
      this.displaySingleFlaresAtCount = options.displaySingleFlaresAtCount || 8;
      this.singleFlareTooltipProperty = options.singleFlareTooltipProperty || null;
      var defaultTextSymbol = new TextSymbol()
        .setColor(new Color([255, 255, 255]))
        .setAlign(Font.ALIGN_START)
        .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
        .setVerticalAlignment("middle");
      defaultTextSymbol.font.size = 14;
      this.textSymbol = options.textSymbol || defaultTextSymbol;
      this.flareShowMode = options.flareShowMode || "mouse";

            //a couple of callbacks - could make them into events on the layer, and/or have the clustering return deferreds. 
            this.clusteringBegin = options.clusteringBegin;
            this.clusteringComplete = options.clusteringComplete;
      //a couple of callbacks - could make them into events on the layer, and/or have the clustering return deferreds. 
      this.clusteringBegin = options.clusteringBegin;
      this.clusteringComplete = options.clusteringComplete;

            this.clusterAreaDisplay = options.clusterAreaDisplay;
            this.clusterAreaRenderer = options.clusterAreaRenderer;
      this.clusterAreaDisplay = options.clusterAreaDisplay;
      this.clusterAreaRenderer = options.clusterAreaRenderer;

            this.xPropertyName = options.xPropertyName || 'x';
            this.yPropertyName = options.yPropertyName || 'y';
            this.idPropertyName = options.idPropertyName || null;
      this.xPropertyName = options.xPropertyName || 'x';
      this.yPropertyName = options.yPropertyName || 'y';
      this.idPropertyName = options.idPropertyName || null;

            if (this.clusterAreaDisplay && (this.clusterAreaDisplay !== 'always' && this.clusterAreaDisplay !== 'hover')) {
                console.error("clusterAreaDisplay can only be 'always' or 'hover'.");
                return;
      if (this.clusterAreaDisplay && (this.clusterAreaDisplay !== 'always' && this.clusterAreaDisplay !== 'hover')) {
        console.error("clusterAreaDisplay can only be 'always' or 'hover'.");
        return;
      }


      if (this.flareShowMode !== "mouse" && this.flareShowMode !== "tap") {
        console.error("flareShowMode option can only be 'mouse' or 'tap'");
        return;
      }

      //init some stuff
      this.animationMultipleType = {
        combine: "combine",
        chain: "chain"
      };

      this.events = [];
      this.graphicEvents = [];
      this.animationsRunning = [];
      this.clusters = [];
      this.singles = [];

    },


    //#region override some GraphicsLayer methods 

    //add an extra argument to setRenderer. It is an optional renderer for displaying the cluster areas. The clusterAreaRenderer can also be set in constructor.
    setRenderer: function (renderer, clusterAreaRenderer) {
      if (clusterAreaRenderer) {
        this.clusterAreaRenderer = clusterAreaRenderer;
      }

      return this.inherited(arguments);
    },

    _setMap: function (map, surface) {
      this.map = map;
      this.surface = surface;

      this.events.push(on(this.map, "resize", lang.hitch(this, this._mapResize)));

      //add pan and zoom events to limit to recluster
      this.events.push(on(this.map, "extent-change", lang.hitch(this, this._clusterData)));

      //Handle click event at the map level
      this.events.push(on(this.map, "click", lang.hitch(this, this._mapClick)));

      this.events.push(on(this.map.infoWindow, "show", lang.hitch(this, this._infoWindowShow)));
      this.events.push(on(this.map.infoWindow, "hide", lang.hitch(this, this._infoWindowHide)));

      this.events.push(on(this, "graphic-draw", this._graphicDraw));
      this.events.push(on(this, "graphic-node-remove", this._graphicNodeRemove));

      this.events.push(on(this, "mouse-over", this._graphicMouseOver));
      this.events.push(on(this, "mouse-out", this._graphicMouseOut));

      return this.inherited(arguments);
    },


    _unsetMap: function () {
      this.inherited(arguments);
      //remove events
      for (var i = 0, len = this.events.length; i < len; i++) {
        if (this.events[i]) {
          this.events[i].remove();
        }
      }

      for (i = 0, len = this.graphicEvents.length; i < len; i++) {
        if (this.graphicEvents[i]) {
          this.graphicEvents[i].remove();
        }
      }
    },

    onClick: function (evt) {
      this._restoreInfoWindowSettings();

      if (evt.graphic.attributes.isCluster) {
        evt.stopPropagation();
        //this._activateCluster(evt.graphic);
        this.map.infoWindow.hide();
      } else if (evt.graphic.attributes.isFlare) {
        evt.stopPropagation();

        var flareObject = this._getFlareFromGraphic(evt.graphic);
        if (!flareObject) {
          this._hideFlareDetail();
          this.map.infoWindow.hide();
          return;
        }

        if (flareObject.isSummaryFlare || !flareObject.singleData) {
          this._showFlareDetail(evt.graphic);
          this.map.infoWindow.hide();
          return;
        }

        //if we're clicking on a single data flare then show an info window
        var graphic = evt.graphic;

        this.originalInfoWindow = {
          highlight: lang.clone(this.map.infoWindow.get("highlight")),
          anchor: lang.clone(this.map.infoWindow.anchor)
        };

        this.map.infoWindow.hide();
        this.map.infoWindow.clearFeatures();
        this.map.infoWindow.set("highlight", false);
        this.map.infoWindow.setFeatures([graphic]);

        //when getting screen point make sure we use the location of the flare on screen, by converting the map point on the object.
        var sp = this.map.toScreen({
          x: flareObject.mapPoint.x,
          y: flareObject.mapPoint.y
        });

        //Could do something with the anchor of the info window here if wanted. The offsets can be a bit wacky as well.
        //var anchor = this._getInfoWindowAnchor(flareObject.degree);
        //this.map.infoWindow.anchor = anchor;

        this.map.infoWindow.cluster = this.activeCluster;

        //reset the geometry of the flare feature in the info window to be the actual location of the flared object, not the location of the flare graphic.
        var p = webMercatorUtils.geographicToWebMercator(new Point(flareObject.singleData[this.xPropertyName], flareObject.singleData[this.yPropertyName], this.spatialRef));
        this.map.infoWindow.features[0].geometry = p;
        this.map.infoWindow.show(sp);

      }
    },

    //Add a data point to be clustered.
    //Each object passed in must contain an x and y property. 
    //Data should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
    add: function (p) {


      // if passed a graphic, just use the base GraphicsLayer's add method
      if (p.declaredClass) {
        this.inherited(arguments);
        return;
      }

      //if we got here, then we're adding a single object
      //NOTE: Use this sparingly - better to use addData (or even better addPreClusteredData). 
      //If using add() to add a large amount of objects (eg: in a long loop), clusters and their elements will be removed and recreated when changes are applied to them,this can be expensive
      //If you use addData and pass in an array clusters will only be created in the DOM once they have been fully calculated

      //can't add client side if preClustered is being used
      if (this.preClustered) {
        return;
      }

      //get an extent that is in web mercator to make sure it's flat for extent checking
      var webExtent = webMercatorUtils.project(map.extent, new SpatialReference({
        "wkid": 102100
      }));
      if (!this.gridClusters || this.gridClusters.length === 0) {
        this._createClusterGrid();
      }

      var obj = p;
      if (!this.allData) {
        this.allData = [];
      }

      this.allData.push(obj);

      var xVal = obj[this.xPropertyName];
      var yVal = obj[this.yPropertyName];

      //get a web merc lng/lat for extent checking. Use web merc as it's flat to cater for longitude pole
      if (this.spatialRef.isWebMercator()) {
        web = [xVal, yVal];
      } else {
        web = webMercatorUtils.lngLatToXY(xVal, yVal);
      }

      //filter by visible extent first
      if (web[0] < webExtent.xmin || web[0] > webExtent.xmax || web[1] < webExtent.ymin || web[1] > webExtent.ymax) {
        return; //not in the visible extent
      }

      //loop cluster grid to see if it should be added to one
      for (var j = 0, jLen = this.gridClusters.length; j < jLen; j++) {
        var cl = this.gridClusters[j];

        if (web[0] < cl.extent.xmin || web[0] > cl.extent.xmax || web[1] < cl.extent.ymin || web[1] > cl.extent.ymax) {
          continue; //not here so carry on
        }

        //recalc the x and y of the cluster by averaging the points again
        cl.x = cl.clusterCount > 0 ? (xVal + (cl.x * cl.clusterCount)) / (cl.clusterCount + 1) : xVal;
        cl.y = cl.clusterCount > 0 ? (yVal + (cl.y * cl.clusterCount)) / (cl.clusterCount + 1) : yVal;

        //push every point into the cluster so we have it for area display if required. This could be omitted if never checking areas, or on demand at least
        if (this.clusterAreaDisplay) {
          cl.points.push([xVal, yVal]);
        }

        cl.clusterCount++;

        var subTypeExists = false;
        for (var s = 0, sLen = cl.subTypeCounts.length; s < sLen; s++) {
          if (cl.subTypeCounts[s].name === obj[this.subTypeFlareProperty]) {
            cl.subTypeCounts[s].count++;
            subTypeExists = true;
            break;
          }
        }
        if (!subTypeExists) {
          cl.subTypeCounts.push({
            name: obj[this.subTypeFlareProperty],
            count: 1
          });
        }

        cl.singles.push(obj);

        if (cl.clusterCount === 1) {
          //this was the only point in this cluster area so add a single
          this._createSingle(obj);
        } else {
          if (cl.clusterCount === 2) {
            //if it was previously a single remove the single.
            var index = this.singles.indexOf(cl.singles[0]);
            this.remove(cl.singles[0].graphic);
            this.singles.splice(index, 1);
            delete cl.singles[0].graphic;
          } else {
            //only remove if the count is > 2. Would have been a single previously.
            this._removeCluster(cl);
          }
          this._createCluster(cl);
        }
      }
    },

    clear: function () {
      // Summary:  Remove all clusters and data points.

      this.inherited(arguments);

      this.activeCluster = null;
      this.activeFlareObject = null;

      //stop any animations that may still be running while clearing graphics
      this._stopAnimations();

      //remove all created cluster group elements
      var node = this.getNode();
      dojo.query("g.cluster-group", node).forEach(dojo.destroy);

      //clear any graphic events
      for (var i = 0, len = this.graphicEvents.length; i < len; i++) {
        if (this.graphicEvents[i]) {
          this.graphicEvents[i].remove();
        }
      }

      // this.map.infoWindow.hide();
      // this.map.infoWindow.clearFeatures();

      this.gridClusters = [];
      this.clusters = [];
      this.singles = [];
    },

    //#endregion

    //#region other event handlers

    _mapResize: function () {
      //destroy any orphaned cluster group nodes
      dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
    },

    _mapClick: function (e) {
      if (!e.target) {
        return;
      }

      var targetClass = e.target.getAttribute("class");
      if (!targetClass || targetClass.indexOf("cluster-object") === -1) {
        //if this was not a cluster object at all then clear any active one and return
        this._clearActiveCluster();
      } else if (targetClass.indexOf("cluster-object") !== -1) {
        //if click reached map click event and it is a cluster object, make sure an info window doesn't display for the cluster graphic
        if (this.map.infoWindow.cluster) {
          this._restoreInfoWindowSettings();
        }
        this.map.infoWindow.hide();
      }
    },

    _graphicDraw: function (e) {
      var g = e.graphic;
      if (g.attributes.isCluster) {
        //create the cluster graphics if this is a cluster being drawn
        var cl = this._getClusterFromGraphic(g);
        this._createClusterGraphic(cl);
        if (this.activeCluster === cl) {
          this._clearActiveCluster();
        }
      } else if (g.attributes.isClusterArea) {
        var sh = g.getShape();
        sh.moveToBack();
      }


      return this.inherited(arguments);
    },

    _graphicNodeRemove: function (e) {
      var g = e.graphic;
      if (g.attributes.isCluster) {
        //remove any group graphics related to this cluster as they'll be recreated when the node is redrawn.
        var cl = this._getClusterFromGraphic(g);
        if (cl) {
          dojo.destroy(cl.groupShape.rawNode);
        }
      }
    },

    _graphicMouseOver: function (e) {
      if (this.flareShowMode === "mouse") {
        if (e.graphic.attributes.isCluster) {
          //this._activateCluster(e.graphic);
        } else if (e.graphic.attributes.isFlare) {
          this._showFlareDetail(e.graphic);
        }
      }
    },

    _graphicMouseOut: function (e) {
      if (e.graphic.attributes.isFlare) {
        this._hideFlareDetail();
      }
    },


    _infoWindowShow: function (e) {
      if (typeof (this.map.infoWindow.features !== 'undefined') && this.map.infoWindow.features !== null) {
        for (var i = 0; i < this.map.infoWindow.features.length; i++) {
          if (typeof (this.map.infoWindow.features[i].attributes) !== 'undefined' && (this.map.infoWindow.features[i].attributes.isCluster || this.map.infoWindow.features[i].attributes.isClusterArea)) {
            this.map.infoWindow.hide(); //if a cluster never show an info window
            return;
          }
        }
      }
    },

    _infoWindowHide: function (e) {
      this.map.infoWindow.cluster = null;
    },


    //#endregion


    //#region extra public methods

    addPreClusteredData: function (data) {
      /*
          Add data that is preclustered - (ie clustered server side).
          Data is an array, clusters must contain an x and y property as well as a clusterCount property. subTypeCounts is optional. 
          Clusters that have a count less than the this.displaySingleFlaresAtCount option must all contain the data for the single points in an array called singles
         Singles should also be in the array, they only need to contain an x and y property. Singles should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
      */

      if (this.clusteringBegin) {
        this.clusteringBegin();
      }

      this.allData = [];
      this.preClustered = true; //if we're adding preclustered data, force this flag to true
      for (var i = 0, len = data.length; i < len; i++) {
        if (data[i].clusterCount) {
          //this is a cluster as it contains clusterCount
          var cl = data[i];
          this._createCluster(cl);
        } else {
          this._createSingle(data[i]);
        }
      }

      if (this.clusteringComplete) {
        this.clusteringComplete();
      }
    },


    addData: function (data) {
      /*
          Add data to be clustered.
          Data is an array of objects. Each object passed in must contain an x and y property. 
          Data should also contain whatever property is set in singleFlareTooltipProperty if one is set, so the flare tooltip has something to display for summary flares if needed
          This will also clear all data first. add() can be used to add single objects at any time.
      */
      this.allData = data;
      this._clusterData();
    },


    //#endregion


    //#region internal stuff

    _restoreInfoWindowSettings: function () {
      if (this.originalInfoWindow) {
        this.map.infoWindow.set("highlight", this.originalInfoWindow.highlight);
        this.map.infoWindow.anchor = this.originalInfoWindow.anchor;
      }
    },

    _clusterData: function () {

      //this function currently only applies if not using preclustered data
      if (this.preClustered) {
        return;
      }

      if (this.clusteringBegin) {
        this.clusteringBegin();
      }

      this.clear();

      //get an extent that is in web mercator to make sure it's flat for extent checking
      //The webextent will need to be normalized since panning over the international dateline will cause
      //cause the extent to shift outside the -180 to 180 degree window.  If we don't normalize then the
      //clusters will not be drawn if the map pans over the international dateline.
      var webExtent = !this.map.extent.spatialReference.isWebMercator() ? webMercatorUtils.project(this.map.extent, new SpatialReference({
        "wkid": 102100
      })) : this.map.extent;
      var normalizedWebExtent = webExtent.normalize();
      webExtent = normalizedWebExtent[0];

      if (normalizedWebExtent.length > 1) {
        webExtent = webExtent.union(normalizedWebExtent[1]);
        this.extentIsUnioned = true;
      } else {
        this.extentIsUnioned = true;
      }

      this._createClusterGrid(webExtent);

      var dataLength = this.allData.length;
      var web, obj, xVal, yVal;
      for (var i = 0; i < dataLength; i++) {
        obj = this.allData[i];
        xVal = obj[this.xPropertyName];
        yVal = obj[this.yPropertyName];

        //get a web merc lng/lat for extent checking. Use web merc as it's flat to cater for longitude pole
        if (this.spatialRef.isWebMercator()) {
          web = [xVal, yVal];
        } else {
          web = webMercatorUtils.lngLatToXY(xVal, yVal);
        }

        //filter by visible extent first
        if (web[0] < webExtent.xmin || web[0] > webExtent.xmax || web[1] < webExtent.ymin || web[1] > webExtent.ymax) {
          continue;
        }

        //loop cluster grid to see if it should be added to one
        for (var j = 0, jLen = this.gridClusters.length; j < jLen; j++) {
          var cl = this.gridClusters[j];

          if (web[0] < cl.extent.xmin || web[0] > cl.extent.xmax || web[1] < cl.extent.ymin || web[1] > cl.extent.ymax) {
            continue; //not here so carry on
          }

          //recalc the x and y of the cluster by averaging the points again
          cl.x = cl.clusterCount > 0 ? (xVal + (cl.x * cl.clusterCount)) / (cl.clusterCount + 1) : xVal;
          cl.y = cl.clusterCount > 0 ? (yVal + (cl.y * cl.clusterCount)) / (cl.clusterCount + 1) : yVal;

          //push every point into the cluster so we have it for area display if required. This could be omitted if never checking areas, or on demand at least
          if (this.clusterAreaDisplay) {
            cl.points.push([xVal, yVal]);
          }

          cl.clusterCount++;

          var subTypeExists = false;
          for (var s = 0, sLen = cl.subTypeCounts.length; s < sLen; s++) {
            if (cl.subTypeCounts[s].name === obj[this.subTypeFlareProperty]) {
              cl.subTypeCounts[s].count++;
              subTypeExists = true;
              break;
            }


            if (this.flareShowMode !== "mouse" && this.flareShowMode !== "tap") {
                console.error("flareShowMode option can only be 'mouse' or 'tap'");
                return;
            }

            //init some stuff
            this.animationMultipleType = {
                combine: "combine",
                chain: "chain"
            };

            this.events = [];
            this.graphicEvents = [];
            this.animationsRunning = [];
            this.clusters = [];
            this.singles = [];

        },


        //#region override some GraphicsLayer methods 

        //add an extra argument to setRenderer. It is an optional renderer for displaying the cluster areas. The clusterAreaRenderer can also be set in constructor.
        setRenderer: function (renderer, clusterAreaRenderer) {
            if (clusterAreaRenderer) {
                this.clusterAreaRenderer = clusterAreaRenderer;
            }

            return this.inherited(arguments);
        },

        _setMap: function (map, surface) {
            this.map = map;
            this.surface = surface;

            this.events.push(on(this.map, "resize", lang.hitch(this, this._mapResize)));

            //add pan and zoom events to limit to recluster
            this.events.push(on(this.map, "extent-change", lang.hitch(this, this._clusterData)));

            //Handle click event at the map level
            this.events.push(on(this.map, "click", lang.hitch(this, this._mapClick)));

            this.events.push(on(this.map.infoWindow, "show", lang.hitch(this, this._infoWindowShow)));
            this.events.push(on(this.map.infoWindow, "hide", lang.hitch(this, this._infoWindowHide)));

            this.events.push(on(this, "graphic-draw", this._graphicDraw));
            this.events.push(on(this, "graphic-node-remove", this._graphicNodeRemove));

            this.events.push(on(this, "mouse-over", this._graphicMouseOver));
            this.events.push(on(this, "mouse-out", this._graphicMouseOut));

            return this.inherited(arguments);
        },


        _unsetMap: function () {
            this.inherited(arguments);
            //remove events
            for (var i = 0, len = this.events.length; i < len; i++) {
                if (this.events[i]) {
                    this.events[i].remove();
                }
            }

            for (i = 0, len = this.graphicEvents.length; i < len; i++) {
                if (this.graphicEvents[i]) {
                    this.graphicEvents[i].remove();
                }
            }
        },

        onClick: function (evt) {
            this._restoreInfoWindowSettings();

            if (evt.graphic.attributes.isCluster) {
                evt.stopPropagation();
                //this._activateCluster(evt.graphic);
                this.map.infoWindow.hide();
            } else if (evt.graphic.attributes.isFlare) {
                evt.stopPropagation();

                var flareObject = this._getFlareFromGraphic(evt.graphic);
                if (!flareObject) {
                    this._hideFlareDetail();
                    this.map.infoWindow.hide();
                    return;
                }

                if (flareObject.isSummaryFlare || !flareObject.singleData) {
                    this._showFlareDetail(evt.graphic);
                    this.map.infoWindow.hide();
                    return;
                }

                //if we're clicking on a single data flare then show an info window
                var graphic = evt.graphic;

                this.originalInfoWindow = {
                    highlight: lang.clone(this.map.infoWindow.get("highlight")),
                    anchor: lang.clone(this.map.infoWindow.anchor)
                };

                this.map.infoWindow.hide();
                this.map.infoWindow.clearFeatures();
                this.map.infoWindow.set("highlight", false);
                this.map.infoWindow.setFeatures([graphic]);

                //when getting screen point make sure we use the location of the flare on screen, by converting the map point on the object.
                var sp = this.map.toScreen({x: flareObject.mapPoint.x, y: flareObject.mapPoint.y});

                //Could do something with the anchor of the info window here if wanted. The offsets can be a bit wacky as well.
                //var anchor = this._getInfoWindowAnchor(flareObject.degree);
                //this.map.infoWindow.anchor = anchor;

                this.map.infoWindow.cluster = this.activeCluster;

                //reset the geometry of the flare feature in the info window to be the actual location of the flared object, not the location of the flare graphic.
                var p = webMercatorUtils.geographicToWebMercator(new Point(flareObject.singleData[this.xPropertyName], flareObject.singleData[this.yPropertyName], this.spatialRef));
                this.map.infoWindow.features[0].geometry = p;
                this.map.infoWindow.show(sp);

            }
        },

        //Add a data point to be clustered.
        //Each object passed in must contain an x and y property. 
        //Data should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
        add: function (p) {


            // if passed a graphic, just use the base GraphicsLayer's add method
            if (p.declaredClass) {
                this.inherited(arguments);
                return;
            }

            //if we got here, then we're adding a single object
            //NOTE: Use this sparingly - better to use addData (or even better addPreClusteredData). 
            //If using add() to add a large amount of objects (eg: in a long loop), clusters and their elements will be removed and recreated when changes are applied to them,this can be expensive
            //If you use addData and pass in an array clusters will only be created in the DOM once they have been fully calculated

            //can't add client side if preClustered is being used
            if (this.preClustered) {
                return;
            }

            //get an extent that is in web mercator to make sure it's flat for extent checking
            var webExtent = webMercatorUtils.project(map.extent, new SpatialReference({"wkid": 102100}));
            if (!this.gridClusters || this.gridClusters.length === 0) {
                this._createClusterGrid();
            }

            var obj = p;
            if (!this.allData) {
                this.allData = [];
            }

            this.allData.push(obj);

            var xVal = obj[this.xPropertyName];
            var yVal = obj[this.yPropertyName];

            //get a web merc lng/lat for extent checking. Use web merc as it's flat to cater for longitude pole
            if (this.spatialRef.isWebMercator()) {
                web = [xVal, yVal];
            } else {
                web = webMercatorUtils.lngLatToXY(xVal, yVal);
            }

            //filter by visible extent first
            if (web[0] < webExtent.xmin || web[0] > webExtent.xmax || web[1] < webExtent.ymin || web[1] > webExtent.ymax) {
                return; //not in the visible extent
            }

            //loop cluster grid to see if it should be added to one
            for (var j = 0, jLen = this.gridClusters.length; j < jLen; j++) {
                var cl = this.gridClusters[j];

                if (web[0] < cl.extent.xmin || web[0] > cl.extent.xmax || web[1] < cl.extent.ymin || web[1] > cl.extent.ymax) {
                    continue; //not here so carry on
                }

                //recalc the x and y of the cluster by averaging the points again
                cl.x = cl.clusterCount > 0 ? (xVal + (cl.x * cl.clusterCount)) / (cl.clusterCount + 1) : xVal;
                cl.y = cl.clusterCount > 0 ? (yVal + (cl.y * cl.clusterCount)) / (cl.clusterCount + 1) : yVal;

                //push every point into the cluster so we have it for area display if required. This could be omitted if never checking areas, or on demand at least
                if (this.clusterAreaDisplay) {
                    cl.points.push([xVal, yVal]);
                }

                cl.clusterCount++;

                var subTypeExists = false;
                for (var s = 0, sLen = cl.subTypeCounts.length; s < sLen; s++) {
                    if (cl.subTypeCounts[s].name === obj[this.subTypeFlareProperty]) {
                        cl.subTypeCounts[s].count++;
                        subTypeExists = true;
                        break;
                    }
                }
                if (!subTypeExists) {
                    cl.subTypeCounts.push({name: obj[this.subTypeFlareProperty], count: 1});
                }

                cl.singles.push(obj);

                if (cl.clusterCount === 1) {
                    //this was the only point in this cluster area so add a single
                    this._createSingle(obj);
                } else {
                    if (cl.clusterCount === 2) {
                        //if it was previously a single remove the single.
                        var index = this.singles.indexOf(cl.singles[0]);
                        this.remove(cl.singles[0].graphic);
                        this.singles.splice(index, 1);
                        delete cl.singles[0].graphic;
                    } else {
                        //only remove if the count is > 2. Would have been a single previously.
                        this._removeCluster(cl);
                    }
                    this._createCluster(cl);
                }
            }
        },

        clear: function () {
            // Summary:  Remove all clusters and data points.

            this.inherited(arguments);

            this.activeCluster = null;
            this.activeFlareObject = null;

            //stop any animations that may still be running while clearing graphics
            this._stopAnimations();

            //remove all created cluster group elements
            var node = this.getNode();
            dojo.query("g.cluster-group", node).forEach(dojo.destroy);

            //clear any graphic events
            for (var i = 0, len = this.graphicEvents.length; i < len; i++) {
                if (this.graphicEvents[i]) {
                    this.graphicEvents[i].remove();
                }
            }

            // this.map.infoWindow.hide();
            // this.map.infoWindow.clearFeatures();

            this.gridClusters = [];
            this.clusters = [];
            this.singles = [];
        },

        //#endregion

        //#region other event handlers

        _mapResize: function () {
            //destroy any orphaned cluster group nodes
            dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
        },

        _mapClick: function (e) {
            if (!e.target) {
                return;
            }

            var targetClass = e.target.getAttribute("class");
            if (!targetClass || targetClass.indexOf("cluster-object") === -1) {
                //if this was not a cluster object at all then clear any active one and return
                this._clearActiveCluster();
            } else if (targetClass.indexOf("cluster-object") !== -1) {
                //if click reached map click event and it is a cluster object, make sure an info window doesn't display for the cluster graphic
                if (this.map.infoWindow.cluster) {
                    this._restoreInfoWindowSettings();
                }
                this.map.infoWindow.hide();
            }
        },

        _graphicDraw: function (e) {
            var g = e.graphic;
            if (g.attributes.isCluster) {
                //create the cluster graphics if this is a cluster being drawn
                var cl = this._getClusterFromGraphic(g);
                this._createClusterGraphic(cl);
                if (this.activeCluster === cl) {
                    this._clearActiveCluster();
                }
            } else if (g.attributes.isClusterArea) {
                var sh = g.getShape();
                sh.moveToBack();
            }


            return this.inherited(arguments);
        },

        _graphicNodeRemove: function (e) {
            var g = e.graphic;
            if (g.attributes.isCluster) {
                //remove any group graphics related to this cluster as they'll be recreated when the node is redrawn.
                var cl = this._getClusterFromGraphic(g);
                if (cl) {
                    dojo.destroy(cl.groupShape.rawNode);
                }
            }
        },

        _graphicMouseOver: function (e) {
            if (this.flareShowMode === "mouse") {
                if (e.graphic.attributes.isCluster) {
                    //this._activateCluster(e.graphic);
                } else if (e.graphic.attributes.isFlare) {
                    this._showFlareDetail(e.graphic);
                }
            }
        },

        _graphicMouseOut: function (e) {
            if (e.graphic.attributes.isFlare) {
                this._hideFlareDetail();
            }
        },


        _infoWindowShow: function (e) {
            if (typeof (this.map.infoWindow.features !== 'undefined') && this.map.infoWindow.features !== null) {
                for (var i = 0; i < this.map.infoWindow.features.length; i++) {
                    if (typeof (this.map.infoWindow.features[i].attributes) !== 'undefined' && (this.map.infoWindow.features[i].attributes.isCluster || this.map.infoWindow.features[i].attributes.isClusterArea)) {
                        this.map.infoWindow.hide(); //if a cluster never show an info window
                        return;
                    }
                }
            }
        },

        _infoWindowHide: function (e) {
            this.map.infoWindow.cluster = null;
        },


        //#endregion


        //#region extra public methods

        addPreClusteredData: function (data) {
            /*
                Add data that is preclustered - (ie clustered server side).
                Data is an array, clusters must contain an x and y property as well as a clusterCount property. subTypeCounts is optional. 
                Clusters that have a count less than the this.displaySingleFlaresAtCount option must all contain the data for the single points in an array called singles
               Singles should also be in the array, they only need to contain an x and y property. Singles should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
            */

            if (this.clusteringBegin) {
                this.clusteringBegin();
            }

            this.allData = [];
            this.preClustered = true; //if we're adding preclustered data, force this flag to true
            for (var i = 0, len = data.length; i < len; i++) {
                if (data[i].clusterCount) {
                    //this is a cluster as it contains clusterCount
                    var cl = data[i];
                    this._createCluster(cl);
                } else {
                    this._createSingle(data[i]);
                }
            }

            if (this.clusteringComplete) {
                this.clusteringComplete();
            }
        },


        addData: function (data) {
            /*
                Add data to be clustered.
                Data is an array of objects. Each object passed in must contain an x and y property. 
                Data should also contain whatever property is set in singleFlareTooltipProperty if one is set, so the flare tooltip has something to display for summary flares if needed
                This will also clear all data first. add() can be used to add single objects at any time.
            */
            this.allData = data;
            this._clusterData();
        },


        //#endregion


        //#region internal stuff

        _restoreInfoWindowSettings: function () {
            if (this.originalInfoWindow) {
                this.map.infoWindow.set("highlight", this.originalInfoWindow.highlight);
                this.map.infoWindow.anchor = this.originalInfoWindow.anchor;
            }
        },

        _clusterData: function () {

            //this function currently only applies if not using preclustered data
            if (this.preClustered) {
                return;
            }

            if (this.clusteringBegin) {
                this.clusteringBegin();
            }

            this.clear();

            //get an extent that is in web mercator to make sure it's flat for extent checking
            //The webextent will need to be normalized since panning over the international dateline will cause
            //cause the extent to shift outside the -180 to 180 degree window.  If we don't normalize then the
            //clusters will not be drawn if the map pans over the international dateline.
            var webExtent = !this.map.extent.spatialReference.isWebMercator() ? webMercatorUtils.project(this.map.extent, new SpatialReference({"wkid": 102100})) : this.map.extent;
            var normalizedWebExtent = webExtent.normalize();
            webExtent = normalizedWebExtent[0];

            if (normalizedWebExtent.length > 1) {
                webExtent = webExtent.union(normalizedWebExtent[1]);
                this.extentIsUnioned = true;
            } else {
                this.extentIsUnioned = true;
            }

            this._createClusterGrid(webExtent);

            var dataLength = this.allData.length;
            var web, obj, xVal, yVal;
            for (var i = 0; i < dataLength; i++) {
                obj = this.allData[i];
                xVal = obj[this.xPropertyName];
                yVal = obj[this.yPropertyName];

                //get a web merc lng/lat for extent checking. Use web merc as it's flat to cater for longitude pole
                if (this.spatialRef.isWebMercator()) {
                    web = [xVal, yVal];
                } else {
                    web = webMercatorUtils.lngLatToXY(xVal, yVal);
                }

                //filter by visible extent first
                if (web[0] < webExtent.xmin || web[0] > webExtent.xmax || web[1] < webExtent.ymin || web[1] > webExtent.ymax) {
                    continue;
                }

                //loop cluster grid to see if it should be added to one
                for (var j = 0, jLen = this.gridClusters.length; j < jLen; j++) {
                    var cl = this.gridClusters[j];

                    if (web[0] < cl.extent.xmin || web[0] > cl.extent.xmax || web[1] < cl.extent.ymin || web[1] > cl.extent.ymax) {
                        continue; //not here so carry on
                    }

                    //recalc the x and y of the cluster by averaging the points again
                    cl.x = cl.clusterCount > 0 ? (xVal + (cl.x * cl.clusterCount)) / (cl.clusterCount + 1) : xVal;
                    cl.y = cl.clusterCount > 0 ? (yVal + (cl.y * cl.clusterCount)) / (cl.clusterCount + 1) : yVal;

                    //push every point into the cluster so we have it for area display if required. This could be omitted if never checking areas, or on demand at least
                    if (this.clusterAreaDisplay) {
                        cl.points.push([xVal, yVal]);
                    }

                    cl.clusterCount++;

                    var subTypeExists = false;
                    for (var s = 0, sLen = cl.subTypeCounts.length; s < sLen; s++) {
                        if (cl.subTypeCounts[s].name === obj[this.subTypeFlareProperty]) {
                            cl.subTypeCounts[s].count++;
                            subTypeExists = true;
                            break;
                        }
                    }
                    if (!subTypeExists) {
                        cl.subTypeCounts.push({name: obj[this.subTypeFlareProperty], count: 1});
                    }

                    cl.singles.push(obj);
                }
            }

            for (i = 0, len = this.gridClusters.length; i < len; i++) {
                if (this.gridClusters[i].clusterCount === 1) {
                    this._createSingle(this.gridClusters[i].singles[0]);
                } else if (this.gridClusters[i].clusterCount > 0) {
                    this._createCluster(this.gridClusters[i]);
                }
            }

        },

        _createClusterGrid: function (webExtent) {

            //get the total amount of grid spaces based on the height and width of the map (divide it by clusterRatio) - then get the degrees for x and y 
            var xCount = Math.round(this.map.width / this.clusterRatio);
            var yCount = Math.round(this.map.height / this.clusterRatio);

            //if the extent has been unioned due to normalization, double the count of x in the cluster grid as the unioning will halve it.
            if (this.extentIsUnioned) {
                xCount *= 2;
            }

            var xw = (webExtent.xmax - webExtent.xmin) / xCount;
            var yh = (webExtent.ymax - webExtent.ymin) / yCount;

            var gsxmin, gsxmax, gsymin, gsymax;

            //create an array of clusters that is a grid over the visible extent. Each cluster contains the extent (in web merc) that bounds the grid space for it.
            this.gridClusters = [];
            for (var i = 0; i < xCount; i++) {
                gsxmin = webExtent.xmin + (xw * i);
                gsxmax = gsxmin + xw;
                for (var j = 0; j < yCount; j++) {
                    gsymin = webExtent.ymin + (yh * j);
                    gsymax = gsymin + yh;
                    var ext = new Extent({xmin: gsxmin, xmax: gsxmax, ymin: gsymin, ymax: gsymax});
                    ext.setSpatialReference(new SpatialReference({"wkid": 102100}));
                    this.gridClusters.push({
                        extent: ext,
                        clusterCount: 0,
                        subTypeCounts: [],
                        singles: [],
                        points: []
                    });
                }
            }
        },

        _createSingle: function (single) {
            this.singles.push(single);
            delete single.graphic;
            var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);
            var attributes = lang.clone(single);
            var graphic = new Graphic(point, null, attributes, null);
            single.graphic = graphic;
            this.add(graphic);
        },

        _createCluster: function (cluster) {

            this.clusters.push(cluster);

            //add the graphic using the Graphics Layer add
            var point = new Point(cluster.x, cluster.y, this.spatialRef);

            //clear some props as we may be recreating the cluster
            delete cluster.graphic;
            delete cluster.graphicShape;
            delete cluster.groupShape;

            var attributes = {
                x: cluster.x,
                y: cluster.y,
                clusterCount: cluster.clusterCount
            }

            var areaGraphic;
            if (this.clusterAreaDisplay && cluster.points && cluster.points.length > 0) {
                if (!this.clusterAreaRenderer) {
                    console.error("_createCluster: clusterAreaRenderer must be set if clusterAreaDisplay is set.");
                    return;
                }

                var mp = new Multipoint(this.spatialRef);
                mp.points = cluster.points;
                var area = geometryEngine.convexHull(mp, true); //use convex hull on the points to get the boundary
                var areaAttr = lang.clone(attributes);
                areaAttr.isClusterArea = true;
                areaGraphic = new Graphic(area, null, areaAttr, null);
                areaGraphic.setSymbol(this.clusterAreaRenderer.getSymbol(areaGraphic));
                this.add(areaGraphic);
                areaGraphic.hide();
            }

            attributes.isCluster = true;
            var graphic = new Graphic(point, null, attributes, null);
            cluster.graphic = graphic;
            cluster.areaGraphic = areaGraphic;
            this.add(graphic);

        },

        _createClusterGraphic: function (cluster) {

            if (cluster.groupShape) {
                dojo.destroy(cluster.groupShape.rawNode);
            }

            //create a group element to hold the cluster and text and other things
            var groupShape = this.surface.createGroup();

            //Note: dojo.addClass() doesn't seem to work on svg elements, that's why all the setAttributes for each shape.
            groupShape.rawNode.setAttribute("class", "cluster-group cluster-object");
            cluster.groupShape = groupShape;

            //append the group to this layer's node
            var layerNode = this.getNode();
            layerNode.appendChild(groupShape.rawNode);

            var gShape = cluster.graphic.getShape();
            if (!gShape) {
                return; //couldn't get the graphic shape that was just added, it's probably not visible on the map
            }

            //add an area graphic first if one has been set
            var areaShape;
            if (cluster.areaGraphic) {
                if (this.clusterAreaDisplay === 'always') {
                    cluster.areaGraphic.show();
                }
                areaShape = cluster.areaGraphic.getShape();
                if (areaShape) {
                    areaShape.rawNode.setAttribute("pointer-events", "none");
                }
            }

            cluster.graphicShape = gShape;
            cluster.graphicShape.rawNode.setAttribute("class", "cluster-object");
            groupShape.add(cluster.graphicShape);

            //add a text element for the label to display the count and add to the group
            var shapeCenter = this._getShapeCenter(cluster.graphicShape);
            var textShape = groupShape.createText({
                x: shapeCenter.x,
                y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
                text: cluster.clusterCount,
                align: 'middle'
            })
                .setFont({
                    size: this.textSymbol.font.size,
                    family: this.textSymbol.font.family,
                    weight: this.textSymbol.font.weight
                })
                .setFill(this.textSymbol.color);
            textShape.rawNode.setAttribute("class", "cluster-text-counts");
            textShape.rawNode.setAttribute("pointer-events", "none"); //remove pointer events from text
            groupShape.add(textShape);
            cluster.textShape = textShape;

            var anims = [];
            //animate drawing of the cluster. 
            var create = fx.animateTransform({
                duration: 200,
                shape: groupShape,
                transform: [
                    {
                        name: "scaleAt",
                        start: [0, 0, shapeCenter.x, shapeCenter.y],
                        end: [1, 1, shapeCenter.x, shapeCenter.y]
                    }
                ],
                onEnd: dojo.partial(this._animationEnd, this)
          }
          if (!subTypeExists) {
            cl.subTypeCounts.push({
              name: obj[this.subTypeFlareProperty],
              count: 1
            });
            anims.push(create);
          }

            //animate area drawing if it is visible now
            if (this.clusterAreaDisplay === 'always' && areaShape) {
                var areaCenter = this._getShapeCenter(areaShape);
                var areaCreate = fx.animateTransform({
                    duration: 200,
                    shape: areaShape,
                    transform: [
                        {
                            name: "scaleAt",
                            start: [0, 0, areaCenter.x, areaCenter.y],
                            end: [1, 1, areaCenter.x, areaCenter.y]
                        }
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });
                anims.push(areaCreate);
            }
          cl.singles.push(obj);
        }
      }

            this._playAnimations(anims, this.animationMultipleType.combine);
      for (i = 0, len = this.gridClusters.length; i < len; i++) {
        if (this.gridClusters[i].clusterCount === 1) {
          this._createSingle(this.gridClusters[i].singles[0]);
        } else if (this.gridClusters[i].clusterCount > 0) {
          this._createCluster(this.gridClusters[i]);
        }
      }

            //add events
            if (this.flareShowMode === "mouse") {
                this.graphicEvents.push(on(groupShape, "mouseleave", lang.hitch(this, this._clearActiveCluster)));
            }
        },
    },

        _activateCluster: function (graphic) {
    _createClusterGrid: function (webExtent) {

            var cluster = this._getClusterFromGraphic(graphic);
            if (!cluster) {
                return;
            }
      //get the total amount of grid spaces based on the height and width of the map (divide it by clusterRatio) - then get the degrees for x and y 
      var xCount = Math.round(this.map.width / this.clusterRatio);
      var yCount = Math.round(this.map.height / this.clusterRatio);

            if (this.activeCluster) {
                this._clearActiveCluster();
            }
      //if the extent has been unioned due to normalization, double the count of x in the cluster grid as the unioning will halve it.
      if (this.extentIsUnioned) {
        xCount *= 2;
      }

            this.activeCluster = cluster;
      var xw = (webExtent.xmax - webExtent.xmin) / xCount;
      var yh = (webExtent.ymax - webExtent.ymin) / yCount;

            var groupShape = cluster.groupShape;
            var graphicShape = cluster.graphicShape;
            groupShape.moveToFront();
            var center = this._getShapeCenter(graphicShape);
      var gsxmin, gsxmax, gsymin, gsymax;

            var scaleAnims = [];
            if (this.clusterAreaDisplay === 'hover') {
                cluster.areaGraphic.show();
                var areaDisplay = fx.animateTransform({
                    duration: 300,
                    shape: cluster.areaGraphic.getShape(),
                    transform: [
                        {name: "scaleAt", start: [0, 0, center.x, center.y], end: [1, 1, center.x, center.y]}
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });
                scaleAnims.push(areaDisplay);
            }
      //create an array of clusters that is a grid over the visible extent. Each cluster contains the extent (in web merc) that bounds the grid space for it.
      this.gridClusters = [];
      for (var i = 0; i < xCount; i++) {
        gsxmin = webExtent.xmin + (xw * i);
        gsxmax = gsxmin + xw;
        for (var j = 0; j < yCount; j++) {
          gsymin = webExtent.ymin + (yh * j);
          gsymax = gsymin + yh;
          var ext = new Extent({
            xmin: gsxmin,
            xmax: gsxmax,
            ymin: gsymin,
            ymax: gsymax
          });
          ext.setSpatialReference(new SpatialReference({
            "wkid": 102100
          }));
          this.gridClusters.push({
            extent: ext,
            clusterCount: 0,
            subTypeCounts: [],
            singles: [],
            points: []
          });
        }
      }
    },

            var scaleUp = fx.animateTransform({
                duration: 400,
                shape: groupShape,
                transform: [
                    {name: "scaleAt", start: [1, 1, center.x, center.y], end: [1.3, 1.3, center.x, center.y]}
                ],
                onEnd: dojo.partial(this._animationEnd, this)
    _createSingle: function (single) {
      this.singles.push(single);
      delete single.graphic;
      var symbol;
      console.log(single.onlineStatus, 898989);
      if (single.onlineStatus == 1) {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
      } else {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
      }
      var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);
      var attributes = lang.clone(single);
      var graphic = new Graphic(point, symbol, attributes, null);
      single.graphic = graphic;
      this.add(graphic);
    },

    _createCluster: function (cluster) {

      this.clusters.push(cluster);

      //add the graphic using the Graphics Layer add
      var point = new Point(cluster.x, cluster.y, this.spatialRef);

      //clear some props as we may be recreating the cluster
      delete cluster.graphic;
      delete cluster.graphicShape;
      delete cluster.groupShape;

      var attributes = {
        x: cluster.x,
        y: cluster.y,
        clusterCount: cluster.clusterCount
      }

      var areaGraphic;
      if (this.clusterAreaDisplay && cluster.points && cluster.points.length > 0) {
        if (!this.clusterAreaRenderer) {
          console.error("_createCluster: clusterAreaRenderer must be set if clusterAreaDisplay is set.");
          return;
        }

        var mp = new Multipoint(this.spatialRef);
        mp.points = cluster.points;
        var area = geometryEngine.convexHull(mp, true); //use convex hull on the points to get the boundary
        var areaAttr = lang.clone(attributes);
        areaAttr.isClusterArea = true;
        areaGraphic = new Graphic(area, null, areaAttr, null);
        areaGraphic.setSymbol(this.clusterAreaRenderer.getSymbol(areaGraphic));
        this.add(areaGraphic);
        areaGraphic.hide();
      }

      attributes.isCluster = true;
      var graphic = new Graphic(point, null, attributes, null);
      cluster.graphic = graphic;
      cluster.areaGraphic = areaGraphic;
      this.add(graphic);

    },

    _createClusterGraphic: function (cluster) {

      if (cluster.groupShape) {
        dojo.destroy(cluster.groupShape.rawNode);
      }

      //create a group element to hold the cluster and text and other things
      var groupShape = this.surface.createGroup();

      //Note: dojo.addClass() doesn't seem to work on svg elements, that's why all the setAttributes for each shape.
      groupShape.rawNode.setAttribute("class", "cluster-group cluster-object");
      cluster.groupShape = groupShape;

      //append the group to this layer's node
      var layerNode = this.getNode();
      layerNode.appendChild(groupShape.rawNode);

      var gShape = cluster.graphic.getShape();
      if (!gShape) {
        return; //couldn't get the graphic shape that was just added, it's probably not visible on the map
      }

      //add an area graphic first if one has been set
      var areaShape;
      if (cluster.areaGraphic) {
        if (this.clusterAreaDisplay === 'always') {
          cluster.areaGraphic.show();
        }
        areaShape = cluster.areaGraphic.getShape();
        if (areaShape) {
          areaShape.rawNode.setAttribute("pointer-events", "none");
        }
      }

      cluster.graphicShape = gShape;
      cluster.graphicShape.rawNode.setAttribute("class", "cluster-object");
      groupShape.add(cluster.graphicShape);

      //add a text element for the label to display the count and add to the group
      var shapeCenter = this._getShapeCenter(cluster.graphicShape);
      var textShape = groupShape.createText({
          x: shapeCenter.x,
          y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
          text: cluster.clusterCount,
          align: 'middle'
        })
        .setFont({
          size: this.textSymbol.font.size,
          family: this.textSymbol.font.family,
          weight: this.textSymbol.font.weight
        })
        .setFill(this.textSymbol.color);
      textShape.rawNode.setAttribute("class", "cluster-text-counts");
      textShape.rawNode.setAttribute("pointer-events", "none"); //remove pointer events from text
      groupShape.add(textShape);
      cluster.textShape = textShape;

      var anims = [];
      //animate drawing of the cluster. 
      var create = fx.animateTransform({
        duration: 200,
        shape: groupShape,
        transform: [{
          name: "scaleAt",
          start: [0, 0, shapeCenter.x, shapeCenter.y],
          end: [1, 1, shapeCenter.x, shapeCenter.y]
        }],
        onEnd: dojo.partial(this._animationEnd, this)
      });
      anims.push(create);

      //animate area drawing if it is visible now
      if (this.clusterAreaDisplay === 'always' && areaShape) {
        var areaCenter = this._getShapeCenter(areaShape);
        var areaCreate = fx.animateTransform({
          duration: 200,
          shape: areaShape,
          transform: [{
            name: "scaleAt",
            start: [0, 0, areaCenter.x, areaCenter.y],
            end: [1, 1, areaCenter.x, areaCenter.y]
          }],
          onEnd: dojo.partial(this._animationEnd, this)
        });
        anims.push(areaCreate);
      }

      this._playAnimations(anims, this.animationMultipleType.combine);

      //add events
      if (this.flareShowMode === "mouse") {
        this.graphicEvents.push(on(groupShape, "mouseleave", lang.hitch(this, this._clearActiveCluster)));
      }
    },

    _activateCluster: function (graphic) {

      var cluster = this._getClusterFromGraphic(graphic);
      if (!cluster) {
        return;
      }

      if (this.activeCluster) {
        this._clearActiveCluster();
      }

      this.activeCluster = cluster;

      var groupShape = cluster.groupShape;
      var graphicShape = cluster.graphicShape;
      groupShape.moveToFront();
      var center = this._getShapeCenter(graphicShape);

      var scaleAnims = [];
      if (this.clusterAreaDisplay === 'hover') {
        cluster.areaGraphic.show();
        var areaDisplay = fx.animateTransform({
          duration: 300,
          shape: cluster.areaGraphic.getShape(),
          transform: [{
            name: "scaleAt",
            start: [0, 0, center.x, center.y],
            end: [1, 1, center.x, center.y]
          }],
          onEnd: dojo.partial(this._animationEnd, this)
        });
        scaleAnims.push(areaDisplay);
      }

      var scaleUp = fx.animateTransform({
        duration: 400,
        shape: groupShape,
        transform: [{
          name: "scaleAt",
          start: [1, 1, center.x, center.y],
          end: [1.3, 1.3, center.x, center.y]
        }],
        onEnd: dojo.partial(this._animationEnd, this)
      });

      scaleAnims.push(scaleUp);

      this._playAnimations(scaleAnims, this.animationMultipleType.combine);

      //Add applicable flare graphics

      //array to hold the flare object data
      this.flareObjects = [];

      //check if we need to create flares for the cluster
      var singleFlares = (cluster.singles && cluster.singles.length > 0) && (cluster.clusterCount <= this.displaySingleFlaresAtCount);
      var subTypeFlares = !singleFlares && (this.displaySubTypeFlares && this.subTypeFlareProperty && (cluster.subTypeCounts && cluster.subTypeCounts.length > 0));

      if (!singleFlares && !subTypeFlares) {
        return;
      }

      //create and add a graphic to represent the flare circle
      var bbox = graphicShape.getBoundingBox();
      var radius = 8;
      var buffer = 4;

      var flareSymbol = new SimpleMarkerSymbol()
        .setStyle(SimpleMarkerSymbol.STYLE_CIRCLE)
        .setSize(radius * 2);

      //create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
      var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
      var containerCircle = groupShape.createCircle({
          cx: center.x,
          cy: center.y,
          r: conCircleRadius
        })
        //.setStroke({ width: 1, color: "000" })
        .setFill(new Color([0, 0, 0, 0]));
      containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");

      //array to hold the animations for displaying flares
      var stAnims = [];

      if (singleFlares) {
        for (var i = 0, len = cluster.singles.length; i < len; i++) {
          delete cluster.singles[i].graphic;
          this.flareObjects.push({
            tooltipText: cluster.singles[i][this.singleFlareTooltipProperty],
            flareText: "",
            color: this.flareColor,
            singleData: cluster.singles[i],
            strokeWidth: 2
          });
        }
      } else if (subTypeFlares) {

        //sort sub types by highest count first
        var subTypes = cluster.subTypeCounts.sort(function (a, b) {
          return b.count - a.count;
        });

        for (i = 0, len = subTypes.length; i < len; i++) {
          this.flareObjects.push({
            tooltipText: subTypes[i].count + " - " + subTypes[i].name,
            flareText: subTypes[i].count,
            color: this.flareColor,
            strokeWidth: 1
          });
        }
      }

      //if there are more flare objects to create that the maxFlareCount and this is a one of those - create a summary flare that contains '...' as the text and make this one part of it 
      var willContainSummaryFlare = this.flareObjects.length > this.maxFlareCount;
      var flareCount = willContainSummaryFlare ? this.maxFlareCount : this.flareObjects.length;

      //get the surface translate values if any
      var surfaceTranslate = this._getSurfaceTranslate();

      //if there's an even amount of flares, position the first flare to the left, minus 180 from degree to do this.
      //for an add amount position the first flare on top, -90 to do this. Looks more symmetrical this way.
      var degreeVariance = (flareCount % 2 === 0) ? -180 : -90;
      for (i = 0, len = flareCount; i < len; i++) {

        //exit if we've hit the maxFlareCount - a summary would have been created on the last one
        if (i >= this.maxFlareCount) {
          break;
        }

        var fo = this.flareObjects[i];

        //Do a couple of things differently if this is a summary flare or not
        var tooltipText = "";
        var isSummaryFlare = willContainSummaryFlare && i >= this.maxFlareCount - 1;
        if (isSummaryFlare) {
          fo.color = this.flareColor;
          fo.isSummaryFlare = true;

          //multiline tooltip for summary flares, ie: greater than this.maxFlareCount flares per cluster
          for (var j = this.maxFlareCount - 1, jlen = this.flareObjects.length; j < jlen; j++) {
            tooltipText += j > (this.maxFlareCount - 1) ? "\n" : "";
            tooltipText += this.flareObjects[j].tooltipText;
          }
        } else {
          tooltipText = fo.tooltipText;
        }

        //get the position of the flare to be placed around the container circle.
        var degree = parseInt(((360 / len) * i).toFixed());
        degree = degree + degreeVariance;

        var radian = degree * (Math.PI / 180);
        fo.degree = degree;
        fo.radius = radius;
        fo.center = {
          x: center.x + (conCircleRadius - radius) * Math.cos(radian),
          y: center.y + (conCircleRadius - radius) * Math.sin(radian)
        };

        //create a group to hold the flare objects
        var flareGroup = groupShape.createGroup();

        //add a graphic for the flare
        var sym = lang.clone(flareSymbol);
        sym.setColor(fo.color).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, this.textSymbol.color, fo.strokeWidth));

        //get the map point from the flare group center
        var matrix = flareGroup.rawNode.getScreenCTM();
        var pt = this.surface.rawNode.createSVGPoint();
        pt.x = fo.center.x;
        pt.y = fo.center.y;
        var screenPoint = pt.matrixTransform(matrix);

        //ScreenPoint needs to be relative to the top-left corner of the map control.
        //The matrixTransform on pt gives us a point based on the screen coordinate system.
        //Therefore if the map has a top offset applied to it the fo object will appear in 
        //an incorrect spot on the map.  We must apply the offset to both the x and y points
        //to ensure the point is relative to the map control.
        //As of v3.18 also apply need to apply the surface translate values that may have been created by the api during panning.
        var offsets = this.surface.rawNode.getBoundingClientRect();
        var sp = new ScreenPoint(screenPoint.x - offsets.left + surfaceTranslate.x, screenPoint.y - offsets.top + surfaceTranslate.y);
        fo.mapPoint = this.map.toMap(sp);

        var attributes = fo.singleData ? lang.clone(fo.singleData) : {};
        attributes.isFlare = true;
        var flareGraphic = new Graphic(fo.mapPoint, sym, attributes, null);
        this.add(flareGraphic);
        var flareCircle = flareGraphic.getShape();
        if (!flareCircle) {
          return;
        }
        flareGroup.rawNode.appendChild(flareCircle.rawNode);

        if (fo.flareText) {
          //if displaying text in the flare, 
          flareGroup.flareText = {
            location: {
              x: fo.center.x,
              y: fo.center.y + (radius / 2 - 1)
            },
            text: !isSummaryFlare ? fo.flareText : "...",
            textSize: !isSummaryFlare ? 7 : 10
          };
        }

        flareGroup.setTransform({
          xx: 0,
          yy: 0
        }); //scale to 0 to start with
        flareGroup.rawNode.setAttribute("class", "flare-object cluster-object");
        flareCircle.rawNode.setAttribute("class", "flare-graphic cluster-object");
        flareGroup.rawNode.setAttribute("data-tooltip", tooltipText);

        //add an animation to display the flare
        var anim = fx.animateTransform({
          duration: 50,
          shape: flareGroup,
          transform: [{
            name: "scaleAt",
            start: [0, 0, fo.center.x, fo.center.y],
            end: [1, 1, fo.center.x, fo.center.y]
          }],
          onEnd: dojo.partial(this._animationEnd, this)
        });

        stAnims.push(anim);

        flareGroup.rawNode.setAttribute("data-center-x", fo.center.x);
        flareGroup.rawNode.setAttribute("data-center-y", fo.center.y);
        fo.flareGroupShape = flareGroup;
      }

      this._playAnimations(stAnims, this.animationMultipleType.chain);

    },

    _showFlareDetail: function (graphic) {
      var flareObject = this._getFlareFromGraphic(graphic);

      if (this.activeFlareObject && flareObject !== this.activeFlareObject) {
        this._hideFlareDetail();
      }

      this.activeFlareObject = flareObject;
      this._createTooltip(flareObject.flareGroupShape);

    },

    _getInfoWindowAnchor: function (degree) {
      //set the anchor based on the degree, so the cluster is not covered by the info window
      if (degree === -180) {
        return "left";
      } else if (degree > -10 && degree < 10) {
        return "right";
      } else if (degree > -260 && degree < -170) {
        return "left";
      } else if (degree <= -90) {
        return "top-left";
      } else if (degree > -90 && degree <= 0) {
        return "top-right";
      } else if (degree > 0 && degree <= 90) {
        return "bottom-right";
      } else {
        return "bottom-left";
      }
    },

    _hideFlareDetail: function () {

      if (!this.activeFlareObject) {
        return;
      }

      var flareObject = this.activeFlareObject;
      this._destroyTooltip(flareObject.flareGroupShape);
      this.activeFlareObject = null;

    },

    _clearActiveCluster: function (e) {

      if (!this.activeCluster) {
        return;
      }
      if (e) {
        var currentElement = e.toElement || e.relatedTarget;
        if (currentElement && (currentElement.parentElement === this.map.infoWindow.domNode || (currentElement.parentElement && currentElement.parentElement.parentElement === this.map.infoWindow.domNode))) {
          return;
        }
      }

      if (this.map.infoWindow.cluster) {
        this.map.infoWindow.hide();
      }

      var cluster = this.activeCluster;
      this._hideFlareDetail();

      var groupShape = cluster.groupShape;
      var graphicShape = cluster.graphicShape;

      var center = this._getShapeCenter(graphicShape);

      var scaleAnims = [];
      if (this.clusterAreaDisplay === 'hover') {
        var areaHide = fx.animateTransform({
          duration: 600,
          shape: cluster.areaGraphic.getShape(),
          transform: [{
            name: "scaleAt",
            start: [1, 1, center.x, center.y],
            end: [0, 0, center.x, center.y]
          }],
          onEnd: dojo.partial(this._animationEnd, this)
        });

        scaleAnims.push(areaHide);
      }

      var scaleDown = fx.animateTransform({
        duration: 400,
        shape: groupShape,
        transform: [{
          name: "scaleAt",
          start: [1.3, 1.3, center.x, center.y],
          end: [1, 1, center.x, center.y]
        }],
        onEnd: dojo.partial(this._animationEnd, this)
      });

      scaleAnims.push(scaleDown);

      this._playAnimations(scaleAnims, this.animationMultipleType.combine);

      //destroy any flares
      for (var i = 0, len = this.graphics.length; i < len; i++) {
        if (this.graphics[i].attributes.isFlare) {
          this.remove(this.graphics[i]);
          len--;
          i--;
        }
      }
      dojo.query(".flare-object", groupShape.rawNode).forEach(dojo.destroy);
      this.activeCluster = null;
    },

    _createTooltip: function (shape) {

      var tooltipLength = dojo.query(".tooltip-text", shape.rawNode).length;
      if (tooltipLength > 0) {
        return;
      }

      //get the text from the data-tooltip attribute of the shape object
      var text = shape.rawNode.getAttribute("data-tooltip");
      if (!text) {
        console.log("no data-tooltip attribute on element");
        return;
      }

      //split on /n character that should be in tooltip to signify multiple lines
      var lines = text.split("\n");

      //read the center positions from the shape, attributes must be set on whatever node is being passed in. Calculating from getboundingBox wasn't working for some reason
      var xPos = parseInt(shape.rawNode.getAttribute("data-center-x"));
      var yPos = parseInt(shape.rawNode.getAttribute("data-center-y")) + 18; //align underneath, could be changed to be wherever

      //create a group to hold the tooltip elements
      var tooltipGroup = shape.createGroup({
        x: xPos,
        y: yPos
      });
      tooltipGroup.rawNode.setAttribute("class", "tooltip-text");

      var textShapes = [];
      for (var i = 0, len = lines.length; i < len; i++) {
        var textShape = tooltipGroup.createText({
            x: xPos,
            y: yPos + (i * 10),
            text: lines[i],
            align: 'middle'
          })
          .setFill("#000")
          .setFont({
            size: 8,
            family: this.textSymbol.font.family,
            weight: this.textSymbol.font.weight
          });
        textShapes.push(textShape);
        textShape.rawNode.setAttribute("pointer-events", "none");
      }

      var rectPadding = 2;
      var textBox = tooltipGroup.getBoundingBox();
      var rectShape = tooltipGroup.createRect({
          x: textBox.x - rectPadding,
          y: textBox.y - rectPadding,
          width: textBox.width + (rectPadding * 2),
          height: textBox.height + (rectPadding * 2),
          r: 0
        })
        .setFill(new Color([255, 255, 255, 0.9]))
        .setStroke({
          color: "#000",
          width: 0.5
        });
      rectShape.rawNode.setAttribute("pointer-events", "none");

      shape.moveToFront();
      for (i = 0, len = textShapes.length; i < len; i++) {
        textShapes[i].moveToFront();
      }

    },

    _destroyTooltip: function (shape) {
      dojo.query(".tooltip-text", shape.rawNode).forEach(dojo.destroy);
    },

    _removeCluster: function (cluster) {
      //remove the cluster completely
      for (var i = 0, len = this.clusters.length; i < len; i++) {
        if (this.clusters[i] === cluster) {
          this.clusters.splice(i, 1);
          i--;
          len--;
        }
      }
      this.remove(cluster.graphic);
      dojo.destroy(cluster.groupShape.rawNode);
    },

    //#endregion

    //#region helper methods 

    _getGraphicFromObject: function (obj) {
      //return the graphic from the obj which could be a single or cluster object
      for (var i = 0, len = this.graphics.length; i < len; i++) {
        var g = this.graphics[i];
        if (g.attributes[this.xPropertyName] === obj[this.xPropertyName] && g.attributes[this.yPropertyName] === obj[this.yPropertyName]) {
          return g;
        }
      }
      return null;
    },

    _getClusterFromGraphic: function (graphic) {
      //return the obj which could be a single or cluster object, based on the graphic
      for (var i = 0, len = this.clusters.length; i < len; i++) {
        var cl = this.clusters[i];
        if (cl.graphic === graphic || (graphic.attributes.x === cl.x && graphic.attributes.y === cl.y)) {
          cl.graphic = graphic;
          return cl;
        }
      }
      return null;
    },

    _getClusterFromGroupNode: function (groupNode) {
      for (var i = 0, len = this.clusters.length; i < len; i++) {
        if (this.clusters[i].groupShape.rawNode === groupNode) {
          return this.clusters[i];
        }
      }
    },

    _getFlareFromGraphic: function (graphic) {
      //return the obj which could be a single or cluster object, based on the graphic
      for (var i = 0, len = this.flareObjects.length; i < len; i++) {
        var fl = this.flareObjects[i];
        if (fl.singleData && (fl.singleData[this.xPropertyName] === graphic.attributes[this.xPropertyName] && fl.singleData[this.yPropertyName] === graphic.attributes[this.yPropertyName]) &&
          (this.idPropertyName === null || fl.singleData[this.idPropertyName] === graphic.attributes[this.idPropertyName])) {
          return fl;
        }

        if (graphic.geometry.x === fl.mapPoint.x && graphic.geometry.y === fl.mapPoint.y) {
          return fl;
        }
      }
      return null;
    },

    _getShapeCenter: function (shape) {
      var bbox = shape.getBoundingBox();
      x = bbox.x + bbox.width / 2;
      y = bbox.y + bbox.height / 2
      return {
        x: x,
        y: y
      };
    },

    _getSurfaceTranslate: function () {
      var translate = {
        x: 0,
        y: 0
      };

      //check if we could find a translate style property on the surface.
      if (!this.surface || !this.surface.rawNode || !this.surface.rawNode.style.transform || this.surface.rawNode.style.transform.indexOf("translate") === -1) return translate;

      //parse the values from the translate string. Using some basic string manipulation, some regex guru could tidy this up I would think.
      var transform = this.surface.rawNode.style.transform;
      transform = transform.replace("translate(", "").replace(")", "");
      var vals = transform.split(",");
      if (vals.length !== 2) return translate;
      vals[0] = parseInt(vals[0].replace("px", ""));
      vals[1] = parseInt(vals[1].replace("px", ""));
      translate.x = vals[0];
      translate.y = vals[1];
      return translate;
    },

    _animationEnd: function (layer) {
      //scope: 'this' is the animation that triggered the event, 'layer' is the flare cluster layer object instance

      //IE10 and below Fix - have to manually set transform back to 1 on elements. They don't seem to appear all of the time again after beign animated back to 
      //a scale of 1. IE sucks.
      dojo.query("> *", this.shape.rawNode).forEach(function (elem) {
        if (!elem.__gfxObject__) return;
        //put this in a slight timeout, otherwise the display can get a tiny bit jittery.
        setTimeout(function () {
          if (elem.__gfxObject__) {
            elem.__gfxObject__.setTransform({
              xx: 1,
              yy: 1
            });
          }
        }, 50);
      });

            scaleAnims.push(scaleUp);
      //Here's a hack for Edge. Good to see there's no need to do special hacks for MS browsers anymore. WTF.
      //Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
      if (this.shape.flareText) {
        var flareText = this.shape.createText({
            x: this.shape.flareText.location.x,
            y: this.shape.flareText.location.y,
            text: this.shape.flareText.text,
            align: 'middle'
          })
          .setFill(layer.textSymbol.color)
          .setFont({
            size: this.shape.flareText.textSize,
            family: layer.textSymbol.font.family,
            weight: layer.textSymbol.font.weight
          });

            this._playAnimations(scaleAnims, this.animationMultipleType.combine);
        flareText.rawNode.setAttribute("class", "flare-text-counts");
        flareText.rawNode.setAttribute("pointer-events", "none"); //remove pointer events from text
        flareText.moveToFront();
      }

            //Add applicable flare graphics
      for (var i = 0, len = layer.animationsRunning.length; i < len; i++) {
        if (layer.animationsRunning[i] === this) {
          layer.animationsRunning.splice(i, 1);
          return;
        }
      }

            //array to hold the flare object data
            this.flareObjects = [];
    },

            //check if we need to create flares for the cluster
            var singleFlares = (cluster.singles && cluster.singles.length > 0) && (cluster.clusterCount <= this.displaySingleFlaresAtCount);
            var subTypeFlares = !singleFlares && (this.displaySubTypeFlares && this.subTypeFlareProperty && (cluster.subTypeCounts && cluster.subTypeCounts.length > 0));
    _playAnimations: function (animations, type) {
      if (type === this.animationMultipleType.combine) {
        coreFx.combine(animations).play();
      } else if (type === this.animationMultipleType.chain) {
        coreFx.chain(animations).play();
      } else {
        for (var i = 0, len = animations.length; i < len; i++) {
          animations[i].play();
        }
      }

            if (!singleFlares && !subTypeFlares) {
                return;
            }
      this.animationsRunning = this.animationsRunning.concat(animations);
    },

            //create and add a graphic to represent the flare circle
            var bbox = graphicShape.getBoundingBox();
            var radius = 8;
            var buffer = 4;
    _stopAnimations: function () {
      for (var i = 0, len = this.animationsRunning.length; i < len; i++) {
        this.animationsRunning[i].stop();
      }
      this.animationsRunning = [];
    },

            var flareSymbol = new SimpleMarkerSymbol()
                .setStyle(SimpleMarkerSymbol.STYLE_CIRCLE)
                .setSize(radius * 2);

            //create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
            var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
            var containerCircle = groupShape.createCircle({cx: center.x, cy: center.y, r: conCircleRadius})
                //.setStroke({ width: 1, color: "000" })
                .setFill(new Color([0, 0, 0, 0]));
            containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");

            //array to hold the animations for displaying flares
            var stAnims = [];

            if (singleFlares) {
                for (var i = 0, len = cluster.singles.length; i < len; i++) {
                    delete cluster.singles[i].graphic;
                    this.flareObjects.push({
                        tooltipText: cluster.singles[i][this.singleFlareTooltipProperty],
                        flareText: "",
                        color: this.flareColor,
                        singleData: cluster.singles[i],
                        strokeWidth: 2
                    });
                }
            } else if (subTypeFlares) {

                //sort sub types by highest count first
                var subTypes = cluster.subTypeCounts.sort(function (a, b) {
                    return b.count - a.count;
                });

                for (i = 0, len = subTypes.length; i < len; i++) {
                    this.flareObjects.push({
                        tooltipText: subTypes[i].count + " - " + subTypes[i].name,
                        flareText: subTypes[i].count,
                        color: this.flareColor,
                        strokeWidth: 1
                    });
                }
            }

            //if there are more flare objects to create that the maxFlareCount and this is a one of those - create a summary flare that contains '...' as the text and make this one part of it 
            var willContainSummaryFlare = this.flareObjects.length > this.maxFlareCount;
            var flareCount = willContainSummaryFlare ? this.maxFlareCount : this.flareObjects.length;

            //get the surface translate values if any
            var surfaceTranslate = this._getSurfaceTranslate();

            //if there's an even amount of flares, position the first flare to the left, minus 180 from degree to do this.
            //for an add amount position the first flare on top, -90 to do this. Looks more symmetrical this way.
            var degreeVariance = (flareCount % 2 === 0) ? -180 : -90;
            for (i = 0, len = flareCount; i < len; i++) {

                //exit if we've hit the maxFlareCount - a summary would have been created on the last one
                if (i >= this.maxFlareCount) {
                    break;
                }

                var fo = this.flareObjects[i];

                //Do a couple of things differently if this is a summary flare or not
                var tooltipText = "";
                var isSummaryFlare = willContainSummaryFlare && i >= this.maxFlareCount - 1;
                if (isSummaryFlare) {
                    fo.color = this.flareColor;
                    fo.isSummaryFlare = true;

                    //multiline tooltip for summary flares, ie: greater than this.maxFlareCount flares per cluster
                    for (var j = this.maxFlareCount - 1, jlen = this.flareObjects.length; j < jlen; j++) {
                        tooltipText += j > (this.maxFlareCount - 1) ? "\n" : "";
                        tooltipText += this.flareObjects[j].tooltipText;
                    }
                } else {
                    tooltipText = fo.tooltipText;
                }

                //get the position of the flare to be placed around the container circle.
                var degree = parseInt(((360 / len) * i).toFixed());
                degree = degree + degreeVariance;

                var radian = degree * (Math.PI / 180);
                fo.degree = degree;
                fo.radius = radius;
                fo.center = {
                    x: center.x + (conCircleRadius - radius) * Math.cos(radian),
                    y: center.y + (conCircleRadius - radius) * Math.sin(radian)
                };

                //create a group to hold the flare objects
                var flareGroup = groupShape.createGroup();

                //add a graphic for the flare
                var sym = lang.clone(flareSymbol);
                sym.setColor(fo.color).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, this.textSymbol.color, fo.strokeWidth));

                //get the map point from the flare group center
                var matrix = flareGroup.rawNode.getScreenCTM();
                var pt = this.surface.rawNode.createSVGPoint();
                pt.x = fo.center.x;
                pt.y = fo.center.y;
                var screenPoint = pt.matrixTransform(matrix);

                //ScreenPoint needs to be relative to the top-left corner of the map control.
                //The matrixTransform on pt gives us a point based on the screen coordinate system.
                //Therefore if the map has a top offset applied to it the fo object will appear in 
                //an incorrect spot on the map.  We must apply the offset to both the x and y points
                //to ensure the point is relative to the map control.
                //As of v3.18 also apply need to apply the surface translate values that may have been created by the api during panning.
                var offsets = this.surface.rawNode.getBoundingClientRect();
                var sp = new ScreenPoint(screenPoint.x - offsets.left + surfaceTranslate.x, screenPoint.y - offsets.top + surfaceTranslate.y);
                fo.mapPoint = this.map.toMap(sp);

                var attributes = fo.singleData ? lang.clone(fo.singleData) : {};
                attributes.isFlare = true;
                var flareGraphic = new Graphic(fo.mapPoint, sym, attributes, null);
                this.add(flareGraphic);
                var flareCircle = flareGraphic.getShape();
                if (!flareCircle) {
                    return;
                }
                flareGroup.rawNode.appendChild(flareCircle.rawNode);

                if (fo.flareText) {
                    //if displaying text in the flare, 
                    flareGroup.flareText = {
                        location: {x: fo.center.x, y: fo.center.y + (radius / 2 - 1)},
                        text: !isSummaryFlare ? fo.flareText : "...",
                        textSize: !isSummaryFlare ? 7 : 10
                    };
                }

                flareGroup.setTransform({xx: 0, yy: 0});//scale to 0 to start with
                flareGroup.rawNode.setAttribute("class", "flare-object cluster-object");
                flareCircle.rawNode.setAttribute("class", "flare-graphic cluster-object");
                flareGroup.rawNode.setAttribute("data-tooltip", tooltipText);

                //add an animation to display the flare
                var anim = fx.animateTransform({
                    duration: 50,
                    shape: flareGroup,
                    transform: [
                        {
                            name: "scaleAt",
                            start: [0, 0, fo.center.x, fo.center.y],
                            end: [1, 1, fo.center.x, fo.center.y]
                        }
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });

                stAnims.push(anim);

                flareGroup.rawNode.setAttribute("data-center-x", fo.center.x);
                flareGroup.rawNode.setAttribute("data-center-y", fo.center.y);
                fo.flareGroupShape = flareGroup;
            }

            this._playAnimations(stAnims, this.animationMultipleType.chain);

        },

        _showFlareDetail: function (graphic) {
            var flareObject = this._getFlareFromGraphic(graphic);

            if (this.activeFlareObject && flareObject !== this.activeFlareObject) {
                this._hideFlareDetail();
            }

            this.activeFlareObject = flareObject;
            this._createTooltip(flareObject.flareGroupShape);

        },

        _getInfoWindowAnchor: function (degree) {
            //set the anchor based on the degree, so the cluster is not covered by the info window
            if (degree === -180) {
                return "left";
            } else if (degree > -10 && degree < 10) {
                return "right";
            } else if (degree > -260 && degree < -170) {
                return "left";
            } else if (degree <= -90) {
                return "top-left";
            } else if (degree > -90 && degree <= 0) {
                return "top-right";
            } else if (degree > 0 && degree <= 90) {
                return "bottom-right";
            } else {
                return "bottom-left";
            }
        },

        _hideFlareDetail: function () {

            if (!this.activeFlareObject) {
                return;
            }

            var flareObject = this.activeFlareObject;
            this._destroyTooltip(flareObject.flareGroupShape);
            this.activeFlareObject = null;

        },

        _clearActiveCluster: function (e) {

            if (!this.activeCluster) {
                return;
            }
            if (e) {
                var currentElement = e.toElement || e.relatedTarget;
                if (currentElement && (currentElement.parentElement === this.map.infoWindow.domNode || (currentElement.parentElement && currentElement.parentElement.parentElement === this.map.infoWindow.domNode))) {
                    return;
                }
            }

            if (this.map.infoWindow.cluster) {
                this.map.infoWindow.hide();
            }

            var cluster = this.activeCluster;
            this._hideFlareDetail();

            var groupShape = cluster.groupShape;
            var graphicShape = cluster.graphicShape;

            var center = this._getShapeCenter(graphicShape);

            var scaleAnims = [];
            if (this.clusterAreaDisplay === 'hover') {
                var areaHide = fx.animateTransform({
                    duration: 600,
                    shape: cluster.areaGraphic.getShape(),
                    transform: [
                        {name: "scaleAt", start: [1, 1, center.x, center.y], end: [0, 0, center.x, center.y]}
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });

                scaleAnims.push(areaHide);
            }

            var scaleDown = fx.animateTransform({
                duration: 400,
                shape: groupShape,
                transform: [
                    {name: "scaleAt", start: [1.3, 1.3, center.x, center.y], end: [1, 1, center.x, center.y]}
                ],
                onEnd: dojo.partial(this._animationEnd, this)
            });

            scaleAnims.push(scaleDown);

            this._playAnimations(scaleAnims, this.animationMultipleType.combine);

            //destroy any flares
            for (var i = 0, len = this.graphics.length; i < len; i++) {
                if (this.graphics[i].attributes.isFlare) {
                    this.remove(this.graphics[i]);
                    len--;
                    i--;
                }
            }
            dojo.query(".flare-object", groupShape.rawNode).forEach(dojo.destroy);
            this.activeCluster = null;
        },

        _createTooltip: function (shape) {

            var tooltipLength = dojo.query(".tooltip-text", shape.rawNode).length;
            if (tooltipLength > 0) {
                return;
            }

            //get the text from the data-tooltip attribute of the shape object
            var text = shape.rawNode.getAttribute("data-tooltip");
            if (!text) {
                console.log("no data-tooltip attribute on element");
                return;
            }

            //split on /n character that should be in tooltip to signify multiple lines
            var lines = text.split("\n");

            //read the center positions from the shape, attributes must be set on whatever node is being passed in. Calculating from getboundingBox wasn't working for some reason
            var xPos = parseInt(shape.rawNode.getAttribute("data-center-x"));
            var yPos = parseInt(shape.rawNode.getAttribute("data-center-y")) + 18; //align underneath, could be changed to be wherever

            //create a group to hold the tooltip elements
            var tooltipGroup = shape.createGroup({x: xPos, y: yPos});
            tooltipGroup.rawNode.setAttribute("class", "tooltip-text");

            var textShapes = [];
            for (var i = 0, len = lines.length; i < len; i++) {
                var textShape = tooltipGroup.createText({x: xPos, y: yPos + (i * 10), text: lines[i], align: 'middle'})
                    .setFill("#000")
                    .setFont({size: 8, family: this.textSymbol.font.family, weight: this.textSymbol.font.weight});
                textShapes.push(textShape);
                textShape.rawNode.setAttribute("pointer-events", "none");
            }

            var rectPadding = 2;
            var textBox = tooltipGroup.getBoundingBox();
            var rectShape = tooltipGroup.createRect({
                x: textBox.x - rectPadding,
                y: textBox.y - rectPadding,
                width: textBox.width + (rectPadding * 2),
                height: textBox.height + (rectPadding * 2),
                r: 0
            })
                .setFill(new Color([255, 255, 255, 0.9]))
                .setStroke({color: "#000", width: 0.5});
            rectShape.rawNode.setAttribute("pointer-events", "none");

            shape.moveToFront();
            for (i = 0, len = textShapes.length; i < len; i++) {
                textShapes[i].moveToFront();
            }

        },

        _destroyTooltip: function (shape) {
            dojo.query(".tooltip-text", shape.rawNode).forEach(dojo.destroy);
        },

        _removeCluster: function (cluster) {
            //remove the cluster completely
            for (var i = 0, len = this.clusters.length; i < len; i++) {
                if (this.clusters[i] === cluster) {
                    this.clusters.splice(i, 1);
                    i--;
                    len--;
                }
            }
            this.remove(cluster.graphic);
            dojo.destroy(cluster.groupShape.rawNode);
        },

        //#endregion

        //#region helper methods 

        _getGraphicFromObject: function (obj) {
            //return the graphic from the obj which could be a single or cluster object
            for (var i = 0, len = this.graphics.length; i < len; i++) {
                var g = this.graphics[i];
                if (g.attributes[this.xPropertyName] === obj[this.xPropertyName] && g.attributes[this.yPropertyName] === obj[this.yPropertyName]) {
                    return g;
                }
            }
            return null;
        },

        _getClusterFromGraphic: function (graphic) {
            //return the obj which could be a single or cluster object, based on the graphic
            for (var i = 0, len = this.clusters.length; i < len; i++) {
                var cl = this.clusters[i];
                if (cl.graphic === graphic || (graphic.attributes.x === cl.x && graphic.attributes.y === cl.y)) {
                    cl.graphic = graphic;
                    return cl;
                }
            }
            return null;
        },

        _getClusterFromGroupNode: function (groupNode) {
            for (var i = 0, len = this.clusters.length; i < len; i++) {
                if (this.clusters[i].groupShape.rawNode === groupNode) {
                    return this.clusters[i];
                }
            }
        },

        _getFlareFromGraphic: function (graphic) {
            //return the obj which could be a single or cluster object, based on the graphic
            for (var i = 0, len = this.flareObjects.length; i < len; i++) {
                var fl = this.flareObjects[i];
                if (fl.singleData && (fl.singleData[this.xPropertyName] === graphic.attributes[this.xPropertyName] && fl.singleData[this.yPropertyName] === graphic.attributes[this.yPropertyName]) &&
                    (this.idPropertyName === null || fl.singleData[this.idPropertyName] === graphic.attributes[this.idPropertyName])) {
                    return fl;
                }

                if (graphic.geometry.x === fl.mapPoint.x && graphic.geometry.y === fl.mapPoint.y) {
                    return fl;
                }
            }
            return null;
        },

        _getShapeCenter: function (shape) {
            var bbox = shape.getBoundingBox();
            x = bbox.x + bbox.width / 2;
            y = bbox.y + bbox.height / 2
            return {x: x, y: y};
        },

        _getSurfaceTranslate: function () {
            var translate = {
                x: 0,
                y: 0
            };

            //check if we could find a translate style property on the surface.
            if (!this.surface || !this.surface.rawNode || !this.surface.rawNode.style.transform || this.surface.rawNode.style.transform.indexOf("translate") === -1) return translate;

            //parse the values from the translate string. Using some basic string manipulation, some regex guru could tidy this up I would think.
            var transform = this.surface.rawNode.style.transform;
            transform = transform.replace("translate(", "").replace(")", "");
            var vals = transform.split(",");
            if (vals.length !== 2) return translate;
            vals[0] = parseInt(vals[0].replace("px", ""));
            vals[1] = parseInt(vals[1].replace("px", ""));
            translate.x = vals[0];
            translate.y = vals[1];
            return translate;
        },

        _animationEnd: function (layer) {
            //scope: 'this' is the animation that triggered the event, 'layer' is the flare cluster layer object instance

            //IE10 and below Fix - have to manually set transform back to 1 on elements. They don't seem to appear all of the time again after beign animated back to 
            //a scale of 1. IE sucks.
            dojo.query("> *", this.shape.rawNode).forEach(function (elem) {
                if (!elem.__gfxObject__) return;
                //put this in a slight timeout, otherwise the display can get a tiny bit jittery.
                setTimeout(function () {
                    if (elem.__gfxObject__) {
                        elem.__gfxObject__.setTransform({xx: 1, yy: 1});
                    }
                }, 50);
            });

            //Here's a hack for Edge. Good to see there's no need to do special hacks for MS browsers anymore. WTF.
            //Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
            if (this.shape.flareText) {
                var flareText = this.shape.createText({
                    x: this.shape.flareText.location.x,
                    y: this.shape.flareText.location.y,
                    text: this.shape.flareText.text,
                    align: 'middle'
                })
                    .setFill(layer.textSymbol.color)
                    .setFont({
                        size: this.shape.flareText.textSize,
                        family: layer.textSymbol.font.family,
                        weight: layer.textSymbol.font.weight
                    });

                flareText.rawNode.setAttribute("class", "flare-text-counts");
                flareText.rawNode.setAttribute("pointer-events", "none"); //remove pointer events from text
                flareText.moveToFront();
            }

            for (var i = 0, len = layer.animationsRunning.length; i < len; i++) {
                if (layer.animationsRunning[i] === this) {
                    layer.animationsRunning.splice(i, 1);
                    return;
                }
            }

        },

        _playAnimations: function (animations, type) {
            if (type === this.animationMultipleType.combine) {
                coreFx.combine(animations).play();
            } else if (type === this.animationMultipleType.chain) {
                coreFx.chain(animations).play();
            } else {
                for (var i = 0, len = animations.length; i < len; i++) {
                    animations[i].play();
                }
            }

            this.animationsRunning = this.animationsRunning.concat(animations);
        },

        _stopAnimations: function () {
            for (var i = 0, len = this.animationsRunning.length; i < len; i++) {
                this.animationsRunning[i].stop();
            }
            this.animationsRunning = [];
        },

        //#endregion
    });
});
    //#endregion
  });
});

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -59,7 +59,7 @@
  "esri/layers/ImageParameters",
  "esri/geometry/geometryEngine",
  "esri/dijit/PopupTemplate",
  "widgets/clientManagement/FlareClusterLayer_v3",
  "widgets/supervisoryMap/FlareClusterLayer_v3",
  "dojo/domReady!"
], function (
  dojo,

 src/api/supervisory/card.js

@@ -1,9 +1,9 @@
import request from '@/router/axios';

export const getList = () => {
export const getList = (res) => {
  return request({
    url: '/api/blade-jfpts/equipment/equipment/listAll',
    method: 'get',
    params: {}
    params: {...res}
  })
}

 src/page/index/logo.vue

@@ -401,13 +401,13 @@
                    `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${that.form.serialNumber}&chl=${that.form.channelNumber}`
                  )
                  .then((result) => {
                    axios({
                      method: "post",
                      url: `/api/blade-jfpts/rvideo/rVoids`,
                      params: {
                        url: result.data.data.flv,
                      },
                    }).then((resdata) => {});
                    // axios({
                    //   method: "post",
                    //   url: `/api/blade-jfpts/rvideo/rVoids`,
                    //   params: {
                    //     url: result.data.data.flv,
                    //   },
                    // }).then((resdata) => {});
                  });
              });
            if (
@@ -572,13 +572,13 @@
        .then(function () {
          that.dialogTableVisible = false;

          axios({
            method: "post",
            url: `/api/blade-jfpts/rvideo/stop`,
            params: {
              jid: row.id,
            },
          }).then((resdata) => {});
          // axios({
          //   method: "post",
          //   url: `/api/blade-jfpts/rvideo/stop`,
          //   params: {
          //     jid: row.id,
          //   },
          // }).then((resdata) => {});

          that.$router.push({
            path: "/policeTracking/track",

 src/styles/alarmAnalysis/alarmAnalysis.scss

@@ -25,7 +25,7 @@
.timeSearchBtn .timeSearch {
    position: relative;
    left: 1.2%;
    top: 40.6%;
    top: 42.6%;
}

//预警总数统计
@@ -104,6 +104,10 @@
    font-size: 14px;
}

.avue-data-cardText .item-footer span:nth-child(2) {
    color: red;
}

//预警类型占比
.alarmTypePro {
    background-color: #ffffff;
@@ -121,6 +125,37 @@
    left: 1%;
}

.alarmTypeTotal {
    //background-color: antiquewhite;
    width: 10%;
    height: 100px;
    position: relative;
    left: 9.37%;
    top: -58%;
}

.numAlarmType {
    text-align: center;
    position: relative;
    top: 15%;
}

.numAlarmType span {
    font-size: 28px;
    color: #4B4B4B;
}

.textAlarmType {
    text-align: center;
    position: relative;
    top: 20%;
}

.textAlarmType span {
    font-size: 14px;
    color: #757575;
}

.alarmTypeProStatis {
    //background-color: aqua;
    width: 50%;
@@ -132,7 +167,7 @@

.alarmTypeProStatis .el-row {
    position: relative;
    top: 120px;
    top: 24px;
}

//预警设备类型占比
@@ -187,6 +222,37 @@
    left: 1%;
}

.confirmTimeTotal {
    //background-color: antiquewhite;
    width: 12%;
    height: 100px;
    position: relative;
    left: 12.87%;
    top: -58%;
}

.numConfirmTime {
    text-align: center;
    position: relative;
    top: 15%;
}

.numConfirmTime span {
    font-size: 28px;
    color: #4B4B4B;
}

.textConfirmTime {
    text-align: center;
    position: relative;
    top: 20%;
}

.textConfirmTime span {
    font-size: 14px;
    color: #757575;
}

.confirmTimeProStatis {
    //background-color: aqua;
    width: 60%;
@@ -198,10 +264,10 @@

.confirmTimeProStatis .el-row {
    position: relative;
    top: 120px;
    top: 24px;
}

//预警平均速度排行
//预警平均确认速度排行
.confirmAverageSpeed {
    background-color: #ffffff;
    width: 35%;
@@ -211,6 +277,12 @@
    left: 64.4%;
}

.confirmAverageSpeedTitle span {
    position: relative;
    left: 5%;
    top: 20px;
}

.confirmAverageSpeed .avue-crud {
    width: 90%;
    position: relative;

 src/views/alarmManagement/alarmAnalysis.vue

@@ -7,28 +7,28 @@
      <el-button-group class="timeBtn">
        <el-button
         v-bind:class="activeClass == 1 ? 'btn-color' : ''" 
         size="mini"
         size="small"
         @click="getData(1)">
         本周
         </el-button>
 

        <el-button 
        v-bind:class="activeClass == 2 ? 'btn-color' : ''"
        size="mini" 
        size="small" 
        @click="getData(2)">
        月初至今
        </el-button>
 

        <el-button 
        v-bind:class="activeClass == 3 ? 'btn-color' : ''"
        size="mini" 
        size="small" 
        @click="getData(3)">
        季度至今
        </el-button>
      </el-button-group>
      <el-date-picker 
      class="timeSearch" 
      size="mini" 
      size="small" 
      v-model="dateTime" 
      type="daterange" 
      @change="timeChange"
@@ -50,6 +50,10 @@
    <!-- 预警类型占比 -->
    <div class="alarmTypePro">
      <div id="alarmTypeProEcharts"></div>
      <div class="alarmTypeTotal">
        <div class="numAlarmType"><span>{{alarmTypeTotal}}</span></div>
        <div class="textAlarmType"><span>总预警数</span></div>
      </div>
      <div class="alarmTypeProStatis">
        <avue-data-cardtext :option="alarmTypeProStatis"></avue-data-cardtext>
      </div>
@@ -64,33 +68,40 @@
    <!-- 确认时间占比 -->
    <div class="confirmTimePro">
        <div id="confirmTimeProEcharts"></div>
        <div class="confirmTimeTotal">
          <div class="numConfirmTime"><span>{{confirmTimeTotal}}</span></div>
          <div class="textConfirmTime"><span>确认预警数</span></div>
        </div>
        <div class="confirmTimeProStatis">
          <avue-data-cardtext :option="confirmTimeProStatis"></avue-data-cardtext>
        </div>
    </div>
    <!-- 预警平均确认速度排行 -->
    <div class="confirmAverageSpeed">
      <div class="confirmAverageSpeedTitle"><span>预警平均确认速度排行</span></div>
      <avue-crud :data="confirmAverageSpeedData" :option="confirmAverageSpeedOption"></avue-crud>
    </div>
    <!-- 预警时间分布 -->
    <div class="alarmTimeDis">
        <div id="alarmTimeDisEchars"></div>
    </div>
 

    <!-- 底部 -->
    <div class="low"></div>
  </div>
</template>
 

<script>
  import echarts from 'echarts'
  import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro,selAlarmTimeDis} from "@/api/statis/statis";
  import alarmVue from '../alarm/alarm.vue';
 

  export default {
    data(){
      return {
        activeClass:2,
        alarmTypeTotal:0,
        confirmTimeTotal:0,
        statisToTalData: {
          span:6,
          data: []
@@ -116,7 +127,7 @@
        confirmAverageSpeedOption:{}
      };
    },
 

    mounted() {
      //默认是查询当月的数据
      this.getData(2);
@@ -125,22 +136,35 @@
      window.handleStartParcelKind=this.handleStartParcelKind;
      window.handleStartEquipment=this.handleStartEquipment;
      window.handleStartSuser=this.handleStartSuser;
      window.handleStartAnimalHeat=this.handleStartAnimalHeat;
      window.handleStartHealthcode=this.handleStartHealthcode;
    },
 

    methods: {
      //日期选好后触发
      timeChange(){
        //清空选项按钮标记
        var that = this;
        var time = this.dateTime;
        var startTime = time[0]+"";
        if(startTime.indexOf("-")==-1){
            //修改时间格式
            time[0]=this.timeFormat(time[0]);
            time[1]=this.timeFormat(time[1]);
        }
        //如果开始时间和结束时间相同，则修改结束时间
        if(time[0]==time[1]){
          time[1]= time[0].substring(0,10)+" 23:59:59";
        }
        that.activeClass = 0;
        var data = {};
        data ={
          startTime:this.timeFormat(this.dateTime[0]),
          endTime:this.timeFormat(this.dateTime[1])
          startTime:time[0],
          endTime:time[1]
        }
        this.getStatisData(data);
      },
 

      //中国区时间格式转换
      timeFormat(date){
          let y = date.getFullYear()
@@ -157,18 +181,30 @@
          let time= y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
          return time;
      },
 

      //警情统计总数
      getStatisTotalData(data){
        selectIndexCount(data).then(res => {
        var that = this;
        var time = this.dateTime;
        var startTime = time[0]+"";
        if(startTime.indexOf("-")==-1){
            //修改时间格式
            time[0]=this.timeFormat(time[0]);
            time[1]=this.timeFormat(time[1]);
        }
        //如果开始时间和结束时间相同，则修改结束时间
        if(time[0]==time[1]){
          time[1]= time[0].substring(0,10)+" 23:59:59";
        }
        that.statisToTalData.data = [
            {
              click: function (item) {
                  var data =[];
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                    status:0
                  })
                  window.parent.handleStartAlarm(data);
              },
@@ -180,20 +216,20 @@
            {
              click: function (item) {
                var data =[];
                // 当前时间
                var date = new Date();
                //年
                var Y = date.getFullYear();
                //月
                var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                //日
                var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
 
                // // 当前时间
                // var date = new Date();
                // //年
                // var Y = date.getFullYear();
                // //月
                // var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                // //日
                // var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                console.log(this.dateTime,111);
                data.push({
                startTime:Y + "-" + M + "-" + D + " 00:00:00",
                endTime: Y +"-" +M +"-" + D +  " 23:59:59",
                decisioDiagramResult:"contraband"
                  });
                  startTime:time[0],
                  endTime: time[1],
                  decisioDiagramResult:"contraband"
                });
                window.parent.handleStartParcel(data);
              },
              title: '违禁包裹数',
@@ -205,19 +241,19 @@
              click: function (item) {
                var data = [];
                // 当前时间
                var date = new Date();
                //年
                var Y = date.getFullYear();
                //月
                var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                //日
                var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
 
                // var date = new Date();
                // //年
                // var Y = date.getFullYear();
                // //月
                // var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                // //日
                // var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                data.push({
                startTime:Y + "-" + M + "-" + D + " 00:00:00",
                endTime: Y +"-" +M +"-" + D +  " 23:59:59",
                decisioDiagramResult:"contraband"
                  });
                  startTime:time[0],
                  endTime: time[1],
                  decisioDiagramResult:"contraband"
                });
                window.parent.handleStartParcelKind(data);
              },
              title: '违禁物品数',
@@ -251,7 +287,7 @@
          ];
        }); 
      },
 

      //主动报警（一键求助，电话报警）分页数据
      handleStartAlarm(data) {
        this.$router.push({
@@ -259,16 +295,15 @@
          query: data[0],
        });
      },
 

      //包裹分页数据
      handleStartParcel(data) {
        debugger;
        this.$router.push({
          path: `/parcel/index`,
          query: data[0],
        });
      },
 

      //违禁品分页数据
      handleStartParcelKind(data) {
        this.$router.push({
@@ -276,7 +311,7 @@
          query: data[0],
        });
      },
 

      //在线设备分页数据
      handleStartEquipment(data) {
        this.$router.push({
@@ -284,14 +319,30 @@
          query: data[0],
        });
      },
 

      //客户管理分页数据
      handleStartSuser() {
        this.$router.push({
          path: `/suser/index`,
        });
      },
 

       //体温监测分页数据
      handleStartAnimalHeat(data) {
        this.$router.push({
          path: `/animalHeat/animalHeatPage`,
          query: data[0],
        });
      },

      //健康码分页数据
      handleStartHealthcode(data) {
        this.$router.push({
          path: `/healthcode/healthcodePage`,
          query: data[0],
        });
      },

      //预警数量分布
      getAlarmNumberStatis(data){
        //调接口，获取数据
@@ -334,6 +385,45 @@
          })
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
          myChart.on('click', function (params) {
            var data = [];

            if(params.seriesName=='一键求助'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                waringType:'紧急求救',
              })
              window.parent.handleStartAlarm(data);
            }

            if(params.seriesName=='违禁品'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                  decisioDiagramResult:"contraband"
                });
              window.parent.handleStartParcelKind(data);
            }

            if(params.seriesName=='红色健康码'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                  type:3
                });
              window.parent.handleStartHealthcode(data);
            }

            if(params.seriesName=='体温异常'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                  status:1
                });
              window.parent.handleStartAnimalHeat(data);
            }
          })
          var colors = ['#FF9836', '#1E90FF', '#F34A4A', '#8058A5'];
          let option = {
              color:colors,
@@ -374,14 +464,14 @@
              },
              series: data
          };
 

          myChart.setOption(option);
      
          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
        })
      },
 

      //警情类别统计总数
      getAlarmClassifyStatis(data){
        selAlarmDayAveragePro(data).then(res =>{
@@ -391,6 +481,13 @@
          that.alarmClassifyStatis.data = [
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                  })
                  window.parent.handleStartAlarm(data);
                },
                title:'一键求助',
                color:'#FF9836',
@@ -400,6 +497,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    decisioDiagramResult:"contraband"
                  });
                  window.parent.handleStartParcelKind(data);
                },
                title:'违禁品',
                color:'#1E90FF',
@@ -408,6 +512,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    type:3
                  });
                  window.parent.handleStartHealthcode(data);
                },
                title:'红色健康码',
                color:'#F34A4A',
@@ -416,6 +527,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    status:1
                  });
                  window.parent.handleStartAnimalHeat(data);
                },
                title:'体温异常',
                color:'#8058A5',
@@ -425,12 +543,17 @@
          ];
        })
      },
 
 


      //预警类型占比统计
      getAlarmTypeProEcharts(data){
        selAlarmDayAveragePro(data).then(res =>{
          var that = this;
          //计算总和
          that.alarmTypeTotal = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
          var data = [];
          var startDate = this.dateTime[0];
          var endDate = this.dateTime[1];
          data.push(
              {value: res.data.data[0], name: '一键求助'},
              {value: res.data.data[1], name: '违禁品'},
@@ -439,6 +562,46 @@
          )
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
          myChart.on('click', function (params) {
              var data = [];
              
              if(params.name=='一键求助'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  waringType:'紧急求救',
                })
                window.parent.handleStartAlarm(data);
              }

              if(params.name=='违禁品'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  decisioDiagramResult:"contraband"
                });
                window.parent.handleStartParcelKind(data);
              }

              if(params.name=='红色健康码'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  type:3
                });
                window.parent.handleStartHealthcode(data);
              }

              if(params.name=='体温异常'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  status:1
                });
                window.parent.handleStartAnimalHeat(data);
              }
              
          })
          var colors = ['#FF9836', '#3fa1ff', '#F34A4A', '#8058A5'];
          let option = {
              color:colors,
@@ -473,13 +636,6 @@
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
                      },
@@ -494,16 +650,24 @@
        })
          
      },
 
 


      //警情类别统计总数(分类占比)
      getAlarmTypeProStatis(data){
        selAlarmDayAveragePro(data).then(res =>{
          var that = this;
          var time  = this.dateTime;
          var count = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
          that.alarmTypeProStatis.data = [
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                  })
                  window.parent.handleStartAlarm(data);
                },
                title:'一键求助',
                color:'#FF9836',
@@ -513,6 +677,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    decisioDiagramResult:"contraband"
                  });
                  window.parent.handleStartParcelKind(data);
                },
                title:'违禁品',
                color:'#3fa1ff',
@@ -521,6 +692,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    type:3
                  });
                  window.parent.handleStartHealthcode(data);
                },
                title:'红色健康码',
                color:'#F34A4A',
@@ -529,6 +707,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    status:1
                  });
                  window.parent.handleStartAnimalHeat(data);
                },
                title:'体温异常',
                color:'#8058A5',
@@ -538,7 +723,7 @@
          ];
        })
      },
 

      //预警设备类型占比统计
      getAlarmEquipmentProEcharts(data){
          let echarts = require('echarts');
@@ -575,13 +760,6 @@
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
                      },
@@ -600,7 +778,7 @@
          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
      },
 

      //预警设备类型占比统计(分类表格)
      getAlarmEquipmentProStatis(data){
          var that = this;
@@ -631,17 +809,32 @@
                }
              ]
          }
 
 


      },
 
 


      //确认时间占比统计
      getConfirmTimeProEcharts(data){
        selConfirmTimePro(data).then(res =>{
          var data = res.data.data;
          var that =this;
          //计算总数
          that.confirmTimeTotal = data[0]+data[1]+data[2]+data[3];
          var time = this.dateTime;
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
          //饼图点击事件
          myChart.on('click',function(params){
              var data = [];
              data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                    timeDesc: params.name
              })
              window.parent.handleStartAlarm(data);
          })
          var colors = ['green','#3fa1ff','yellow','#F34A4A']
          let option = {
              color:colors,
@@ -676,13 +869,6 @@
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
                      },
@@ -700,15 +886,24 @@
          window.addEventListener('resize',function() {myChart.resize()});
        })
      },
 

      //确认时间占比（分类）
      getConfirmTimeProStatis(data){
        selConfirmTimePro(data).then(res =>{
          var data = res.data.data;
          var time = this.dateTime;
          var that = this;
          that.confirmTimeProStatis.data = [
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '小于5分钟'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'小于5分钟',
                  color:'green',
@@ -717,6 +912,14 @@
              },
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '5-10分钟'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'5-10分钟',
                  color:'#3fa1ff',
@@ -724,6 +927,14 @@
              },
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '10-30分钟'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'10-30分钟',
                  color:'yellow',
@@ -731,6 +942,14 @@
              },
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '30分钟以上'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'30分钟以上',
                  color:'#F34A4A',
@@ -739,8 +958,8 @@
            ];
        })
      },
 
      //预警平均速度排行(table)

      //预警平均确认速度排行(table)
      confirmAverageSpeedStatis(data){
          var that = this;
          that.confirmAverageSpeedData=[
@@ -750,7 +969,7 @@
              }
          ];
          that.confirmAverageSpeedOption={
              title:'表格的标题',
              title:'预警平均确认速度排行',
              titleSize:'h3',
              titleStyle:{
                color:'red'
@@ -771,13 +990,58 @@
              ]
          }
      },
 

      //预警时间分布
      getAlarmTimeDisEchars(data){
        selAlarmTimeDis(data).then(res =>{
          var data = res.data;
          var time = this.dateTime;
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
          //图表数据点击事件
          myChart.on('click', function (params) {
            var data = [];
            if(params.seriesName=='一键求助'){
              window.parent.handleStartAlarm(data);
              data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                    timeDesc: params.name
              })
              window.parent.handleStartAlarm(data);
            }

            if(params.seriesName=='违禁品'){
              data.push({
                startTime:time[0],
                endTime:time[1],
                decisioDiagramResult:"contraband",
                timeDesc: params.name
              });
              window.parent.handleStartParcelKind(data);
            }

            if(params.seriesName=='红色健康码'){
              data.push({
                startTime:time[0],
                endTime:time[1],
                type:3,
                timeDesc: params.name
              });
              window.parent.handleStartHealthcode(data);
            }

            if(params.seriesName=='体温异常'){
              data.push({
                startTime:time[0],
                endTime:time[1],
                status:1,
                timeDesc: params.name
              });
              window.parent.handleStartAnimalHeat(data);
            }
          })
          var colors = ['#FF9836', '#1E90FF', '#F34A4A', '#8058A5'];
          let option = {
              color: colors,
@@ -833,25 +1097,21 @@
                  {
                      name: '一键求助',
                      type: 'line',
                      stack: '总量',
                      data: data.data.alarmTimeDis
                  },
                  {
                      name: '违禁品',
                      type: 'line',
                      stack: '总量',
                      data: data.data.parcelTimeDis
                  },
                  {
                      name: '红色健康码',
                      type: 'line',
                      stack: '总量',
                      data: data.data.healthcodeTimeDis
                  },
                  {
                      name: '体温异常',
                      type: 'line',
                      stack: '总量',
                      data: data.data.animalTimeDis
                  }
              ]
@@ -861,7 +1121,7 @@
          window.addEventListener('resize',function() {myChart.resize()});
        })
      },
 

      //点击按钮获取不同时间段的数据
      getData(date){
          var that = this;
@@ -870,7 +1130,8 @@
          //调用方法获取数据
          this.getStatisData(data);
      },
 

      //调用方法，获取统计数据
      getStatisData(data){
          //统计预警总数
          this.getStatisTotalData(data);
@@ -891,8 +1152,8 @@
          //预警时间分布统计
          this.getAlarmTimeDisEchars(data);
      },
 
 


      //计算两个日期之间的天数
      getDaysBetween(startTime,endTime){
          var  startDate = Date.parse(startTime);
@@ -906,8 +1167,8 @@
          var days=(endDate - startDate)/(1*24*60*60*1000);
          return  days;
      },
 
 

      //计算时间
      getDate(date){
        var that = this;
          var today = new Date();
@@ -938,8 +1199,8 @@
            endTime:this.dateTime[1]
          }
      },
 
 


      //本日
      showToDay(Nowdate){   
        var M=Number(Nowdate.getMonth())+1;
@@ -952,7 +1213,7 @@
        }
        return Nowdate.getFullYear()+"-"+M+"-"+day;   
      },
 

      //本周第一天
      showWeekFirstDay(Nowdate){   
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);   
@@ -966,7 +1227,7 @@
        }
        return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
      },
 

      //本月第一天
      showMonthFirstDay(Nowdate){   
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);   
@@ -976,14 +1237,14 @@
        } 
        return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();   
      },
 

      //本季度的第一天
      getQuarterStartDate(Nowdate){
        var quarterStartDate = this.getQuarterStartMonth(Nowdate);
        return Nowdate.getFullYear()+"-"+quarterStartDate+"-"+"01";
      },
 
 


      //本季度的第一个月份
      getQuarterStartMonth(Nowdate){
        var nowMonth = Nowdate.getMonth()+1;
@@ -1003,9 +1264,9 @@
        }
        return quarterStartMonth;
      }
 

    },
 

  }
    
  
@@ -1013,5 +1274,5 @@
<style lang="scss">
  
  @import '@/styles/alarmAnalysis/alarmAnalysis.scss'
 

</style>

 src/views/animalHeat/animalHeat.vue

@@ -274,6 +274,15 @@
            ...this.query,
          };
        }

        if (this.$route.query.timeDesc) {
          values = {
            ...params,
            timeDesc: this.$route.query.timeDesc,
            ...this.query,
          };
        }

        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then(res => {
          const data = res.data.data;

 src/views/healthcode/healthcode.vue

@@ -191,7 +191,7 @@
        recorder: null,
      };
    },
    mounted:{
    mounted(){

    },
    computed: {
@@ -251,7 +251,7 @@
      getHealthcodeType(){
          if (this.$route.query.type != undefined) {
              var type = this.$route.query.type+"";
              this.$route.query = {};
              //this.$route.query = {};
              return type;
          }
      },
@@ -316,6 +316,14 @@
          };
        }

        if (this.$route.query.timeDesc) {
          values = {
            ...params,
            timeDesc: this.$route.query.timeDesc,
            ...this.query,
          };
        }

        this.loading = true;
        getList(page.currentPage, page.pageSize,values).then(res => {
          const data = res.data.data;

 src/views/parcel/parcelKind.vue

@@ -283,6 +283,14 @@
          };
        }

        if (this.$route.query.timeDesc) {
          values = {
            ...params,
            timeDesc: this.$route.query.timeDesc,
            ...this.query,
          };
        }

        this.loading = true;
        getKindList(page.currentPage, page.pageSize,values).then(res => {
          const data = res.data.data;

 src/views/realTimePolice/real.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-03-17 15:21:33
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-04-07 17:36:33
 * @Last Modified time: 2021-04-09 09:59:32
 */
<template>
  <basic-container>
@@ -894,6 +894,14 @@
        };
      }

      if (this.$route.query.timeDesc) {
        values = {
          ...params,
          timeDesc: this.$route.query.timeDesc,
          ...this.query,
        };
      }

      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
@@ -1137,13 +1145,13 @@
        .then(function () {
          that.dialogTableVisible = false;

          axios({
            method: "post",
            url: `/api/blade-jfpts/rvideo/stop`,
            params: {
              jid: row.id,
            },
          }).then((resdata) => {});
          // axios({
          //   method: "post",
          //   url: `/api/blade-jfpts/rvideo/stop`,
          //   params: {
          //     jid: row.id,
          //   },
          // }).then((resdata) => {});

          that.onLoad(that.page, that.query);
          that.$router.push({

 src/views/supervisoryConsole/card.vue

@@ -7,12 +7,17 @@
          v-model="inputSearchValue"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click.stop="inputSearchBtn"
          ></el-button>
        </el-input>
      </div>
      <div class="radio">
        <el-radio-group v-model="radio" @change="siteStatus">
          <el-radio label="仅显示设备在线">仅显示设备在线</el-radio>
          <el-radio label="全部">全部</el-radio>
          <el-radio label="仅显示预警设备">仅显示预警设备</el-radio>
          <el-radio label="仅显示设备掉线">仅显示设备掉线</el-radio>
          <el-radio label="仅显示设备故障">仅显示设备故障</el-radio>
        </el-radio-group>
@@ -85,7 +90,7 @@
      option: [],
      count: [],
      loading: false,
      radio: "仅显示设备在线",
      radio: "全部",
      inputSearchValue: "",
    };
  },
@@ -98,30 +103,7 @@
    },
  },
  created() {
    getList().then((res) => {
      var a = [],
        b = [],
        c = [];

      res.data.data.forEach((item) => {
        if (item.state != "") a.push(item);
        if (item.state == "" && item.onlineStatus != 1) b.push(item);
        if (item.state == "" && item.onlineStatus == 1) c.push(item);
      });

      var d = a.concat(c.concat(b));

      d.forEach((item) => {
        this.count.push(item);
      });
      this.option = [];
      for (var i = 0; i <= 24; i++) {
        if (this.count.length > 0) {
          this.option.push(this.count[0]);
          this.count.shift();
        }
      }
    });
    this.getEquipmentLists();
  },

  methods: {

 src/views/supervisoryConsole/data.vue

@@ -168,17 +168,23 @@
    var that = this;
    getList().then((res) => {
      res.data.data.forEach((item) => {
        that.tableData.push({
          waringType:
            item.waringType == "紧急求救" ? "一键求助" : item.waringType,
          alarmTime: item.alarmTime,
          oneContacts: item.oneContacts,
          onePhone: item.onePhone,
          galarmPeople: item.galarmPeople,
          jtype:
            item.jtype == 0 ? "未处理" : item.jtype == 1 ? "处理中" : "已处理",
          alarmPeople: item.alarmPeople,
        });
        if (item.waringType == "紧急求救") {
          that.tableData.push({
            waringType:
              item.waringType == "紧急求救" ? "一键求助" : item.waringType,
            alarmTime: item.alarmTime,
            oneContacts: item.oneContacts,
            onePhone: item.onePhone,
            galarmPeople: item.galarmPeople,
            jtype:
              item.jtype == 0
                ? "未处理"
                : item.jtype == 1
                ? "处理中"
                : "已处理",
            alarmPeople: item.alarmPeople,
          });
        }
      });
    });

@@ -531,7 +537,7 @@
            background-color: #29c093;
          }
          &:nth-child(3)::before {
            background-color: #F48F57;
            background-color: #f48f57;
          }
          &:nth-child(4)::before {
            background-color: #dfdfdf;
@@ -592,8 +598,8 @@
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(1) span {
            border: 1px solid #F48F57;
            color: #F48F57;
            border: 1px solid #f48f57;
            color: #f48f57;
          }
          .active-list:nth-child(1) > div:nth-child(1) span:hover {
            background: rgba(41, 192, 147, 0.15);
@@ -605,7 +611,7 @@
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(2) span {
            color: #F48F57;
            color: #f48f57;
          }
        }
        .info-active-top,