Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

shuishen

2021-04-20 97a001f55f176062d552907e08dc0d9e497001cc

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

 public/map/widgets/supervisoryMap/SupervisoryMap.css

@@ -0,0 +1,375 @@
/* .analysis-and-judgment {
    display: none;
} */

div[open-li='analysis-and-judgment'] {
    box-sizing: border-box;
}

div[open-li='analysis-and-judgment']>ul {
    display: flex;
    height: 36px;
    line-height: 36px;
}

div[open-li='analysis-and-judgment']>ul>li {
    flex: 1;
    font-size: 15px;
    text-align: center;
    color: #7b7b7b;
    cursor: pointer;
    background: #E5E5E5;
}

div[open-li='analysis-and-judgment']>ul>li.on {
    color: #677788;
    background: #fff;
}

.analysis-and-judgment {
    width: 360px;
    height: calc(100%);
    background: rgb(255, 255, 255);
}

/* 分析研判内容容器 */
.analysis-container {
    position: relative;
    height: calc(100% - 38px);
    font-size: 14px;
}

.analysis-container>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.analysis-container>div:nth-child(2) {
    display: none;
}

.analysis-container>div:nth-child(3) {
    display: none;
}

/* 类别选择，级别选择，以及热力图 */
.analysis-container .analysis-category,
.analysis-container .analysis-level {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 4px 6px 0 6px;
    box-sizing: border-box;
    color: #677788;
}

.analysis-container .analysis-category>ul,
.analysis-container .analysis-level>ul {
    display: flex;
    height: 36px;
    line-height: 36px;
    align-items: center;
}

.analysis-container .analysis-category>ul>li,
.analysis-container .analysis-level>ul>li {
    height: 36px;
    line-height: 36px;
}

.analysis-container .analysis-category>ul>li:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2),
.analysis-container .analysis-level>ul>li:first-child {
    margin-right: 4px;
    position: relative;
    padding-left: 4px;
    flex: 8;
    color: #677788;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(231, 234, 243, 1);
    box-sizing: border-box;
}

.analysis-container .analysis-container-police .analysis-category>ul>li:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) {
    flex: 4;
}


.analysis-container .analysis-category>ul>li:last-child,
.analysis-container .analysis-level>ul>li:last-child {
    flex: 2;
    text-align: center;
}

.analysis-container .analysis-category>ul>li:last-child input,
.analysis-container .analysis-level>ul>li:last-child input {
    vertical-align: middle;
}

/* 类别选择中得下拉框 */
.analysis-container .analysis-category>ul>li:first-child div:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child,
.analysis-container .analysis-level>ul>li:first-child div:first-child {
    position: absolute;
    top: 0;
    left: 30px;
    width: calc(100% - 30px);
    height: 34px;
    color: #677788;
    padding-left: 10px;
    box-sizing: border-box;
    cursor: pointer;

}

.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child {
    left: 16px;
    width: calc(100% - 16px);
}

.analysis-container .analysis-category>ul>li:first-child div:first-child i,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child i,
.analysis-container .analysis-level>ul>li:first-child div:first-child i {
    display: block;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    background: url('../../images/select-bg.png') repeat;
    background-size: 100% 100%;
}

.analysis-container .analysis-category>ul>li:first-child div:last-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:last-child,
.analysis-container .analysis-level>ul>li:first-child div:last-child {
    display: none;
    position: absolute;
    top: 35px;
    left: -1px;
    z-index: 10;
    width: calc(100% + 2px);
}


.analysis-container .analysis-category>ul>li:first-child ul,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul,
.analysis-container .analysis-level>ul>li:first-child ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 300px;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(231, 234, 243, 1);
    border-top: none;
    box-sizing: border-box;

}

.analysis-container .analysis-category>ul>li:first-child ul li,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li,
.analysis-container .analysis-level>ul>li:first-child ul li {
    flex: 1;
    padding-left: 10px;
    height: 34px;
    border-top: 1px solid rgba(231, 234, 243, 1);
    background: rgb(255, 255, 255);
    color: #677788;
    box-sizing: border-box;
    cursor: pointer;
}

.analysis-container .analysis-category>ul>li:first-child ul li:hover,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:hover,
.analysis-container .analysis-level>ul>li:first-child ul li:hover {
    color: #15a2fe;
    background: #beeeff;
}

.analysis-container .analysis-category>ul>li:first-child ul li:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:first-child,
.analysis-container .analysis-level>ul>li:first-child ul li:first-child {
    border: none;
}

/* 时间选择 */
.analysis-container .analysis-selection-criteria {
    display: flex;
    padding: 4px 6px;
    width: 100%;
    height: 40px;
    line-height: 32px;
    color: #677788;
    box-sizing: border-box;
}

.analysis-container .analysis-selection-criteria input {
    border: 1px solid rgba(231, 234, 243, 0.7);
}

.analysis-container .analysis-selection-criteria input[type='text'] {
    width: 0;
    flex: 5;
    padding: 0 4px;
    color: #677788;
    cursor: pointer;
    background-color: #fff;
    background: url('../../images/laydata-bg.png') no-repeat;
    background-size: 18px 16px;
    background-position: 98% center;
}

.analysis-container .analysis-selection-criteria input[type='button'] {
    width: 0;
    flex: 2;
    color: #fff;
    background: #377DFF;
    cursor: pointer;
}

/* 显示信息得表格 */
.analysis-container .analysis-container-police .analysis-table-content {
    height: calc(100% - 80px);
}

.analysis-container .analysis-container-owner .analysis-table-content {
    margin-top: 4px;
    height: calc(100% - 84px);
}

.analysis-container .analysis-container-equipment .analysis-table-content {
    margin-top: 4px;
    height: calc(100% - 44px);
}

.analysis-container .table {
    height: 100%;
}

.analysis-container .thead {
    height: 31px;
}

.analysis-container .table .tbody {
    height: calc(100% - 31px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}


.analysis-container .table table {
    width: 360px;
    border-collapse: collapse;
    table-layout: fixed;
    box-sizing: border-box;

}

.analysis-container .table table tr {
    height: 30px;
}

.analysis-container .table table tr th,
.analysis-container .table table tr td {
    margin: 0;
    padding: 0 4px;
    border: 1px solid rgba(231, 234, 243, 1);
    height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #677788;
    box-sizing: border-box;

    overflow: hidden;
    /*超出的文字隐藏*/
    text-overflow: ellipsis;
    /*文字超出后,显示省略号*/
    white-space: nowrap;
    /*文字不换行*/
    word-break: keep-all;
    /*文字不换行*/
}

.analysis-container .table table tr td a {
    color: #677788;
    cursor: default;
}

.analysis-container .table table tr:first-child td {
    border-top: none;

}


.analysis-container .table .tbody tr {
    cursor: pointer;
}

.analysis-container .table .tbody tr td:first-child,
.analysis-container .table .thead tr th:first-child {
    width: 40px;
}

.analysis-container .analysis-container-police .table .tbody tr td:nth-child(2),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(2) {
    width: 80px;
}

.analysis-container .analysis-container-police .table .tbody tr td:nth-child(3),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(3) {
   width: 64px;
}


.analysis-container .analysis-container-police .table .tbody tr td:nth-child(4),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(4) {
    width: 100px;
}


.analysis-container .analysis-container-police .table .tbody tr td:nth-child(5),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(5),
.analysis-container .analysis-container-owner .table .tbody tr td:nth-child(5),
.analysis-container .analysis-container-owner .table .thead tr th:nth-child(5),
.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(5),
.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(5) {
    cursor: default;
}

.analysis-container .analysis-container-police .table .tbody tr input,
.analysis-container .analysis-container-owner .table .tbody tr input,
.analysis-container .analysis-container-equipment .table .tbody tr input {
    width: 42px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: #377DFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    vertical-align: middle;
}

.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(2),
.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(2) {
    width: 68px;
}

.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(4),
.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(4) {
    width: 68px;
}

.client-max-map{
    width: calc(100% - 360px) !important;
    left: 360px !important;
}

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -191,6 +191,456 @@
      return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
    },
    entityData: [],
    //左侧控制栏
    analysisAddEntitys: null,
    constructor: function (options, srcRefNode) {
      this._map = options.map;
      objThis = this;


      this.analysisAddEntitys = new GraphicsLayer({ id: 'analysisAddEntitys' });
      // this.addOneEntitys = new GraphicsLayer({ id: 'addOneEntitys' });
      // this.addTwoEntitys = new GraphicsLayer({ id: 'addTwoEntitys' });
      // this.addThreeEntitys = new GraphicsLayer({ id: 'addThreeEntitys' });

      this._map.addLayer(this.analysisAddEntitys);
      this._map.addLayer(this.addOneEntitys);
    },
    startup: function () {
      objThis._map.addLayer(objThis._siteLayer);
      var that = this;
      that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'),'');
      // 顶部tab得切换事件
      $('.analysis-and-judgment-tab li').click(function () {
        // if (that.tabIndex == $(this).index()) return;
        // if ($(this).index() == 1) { return };
        // if ($(this).index() == 2) { return };

        if (that.entitysData.length > 0) {
          that.analysisAddEntitys.clear();
          that.entitysData = [];
        }

        if (that.heatmapfeatureLayer_1.graphics.length > 0) {
          that.heatmapfeatureLayer_1.clear();
          that.heatmapfeatureLayer_1.setRenderer();
          $('.analysis-category input').prop('checked', false);
        }


        $(this).addClass('on').siblings().removeClass('on');
        var ind = $(this).index();
        $($('.analysis-container > div')[ind]).stop().show().siblings().stop().hide();
        var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();
        var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
        if (ind == 0) {
          that.getArea($('#policeArea'));
          that.getPoliceTableAnalysis($($('.analysis-container > div')[ind]).find('.tbody tbody'),
            $('#analysis_select_time_start').val() + ':00',
            $('#analysis_select_time_end').val() + ':00', overText, levelText)
        } else if (ind == 1) {
          that.getOwnerType($('#ownerCategory'));
          that.getOwnerDj($('#ownerLevel'), '');
          that.getOwnerTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '', '');
        } else if (ind == 2) {
          that.getEquipmentTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '');
        }

        that.tabIndex = $(this).index();
      })

      // 时间查询
      $('#policeSelectTime').off('click').click(function () {

        var times = $(this).prevAll();

        layui.use('layer', function () {

          var layer = layui.layer;
          // 开始时间
          var startTime = $(times[2]).val();
          // 结束时间
          var endTime = $(times[0]).val();

          if (startTime == '') {

            layer.msg('请选择开始时间！', {
              icon: 5,
              time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
            return;

          } else {

            if (endTime == '') {
              layer.msg('请选择结束时间！', {
                icon: 5,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
              });
              return;
            } else {

              var text = $('#policeCategory div:eq(0)').text().trim();

              var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
              that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), startTime, endTime, text == '全部' ? '' : text, levelText);

            }

          }

        })




      })

      // 警情列表中的点击事件
      $('.analysis-container-police .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
        var id = $(this).attr('term-list');
        var url = './popup/html/police-details.html?obj=' + id;
        layui.use('layer', function () {
          that.layuiLayer = layui.layer;
          that.layuiLayer.config({
            extend: 'myskin/police-details.css'
          });
          that.layuiLayer.close(that.layuiLayer.index);
          that.layuiLayer.open({
            title: '警情详情',
            type: 2,
            shadeClose: true,
            shade: false,
            maxmin: false, //开启最大化最小化按钮
            area: ['500px', '400px'],
            offset: 'auto',
            skin: 'police-details',
            content: url,
            closeBtn: 1,
          });
        })
      })
      $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
      })
      $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
        event.stopPropagation();
        var lgtd = Number($(this).attr('lgtd'));
        var lttd = Number($(this).attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
      })

      // 业主列表中的点击事件
      $('.analysis-container-owner .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
        var id = $(this).attr('term-list');
        var url = './popup/html/owner-details.html?id=' + id;
        layui.use('layer', function () {
          that.layuiLayer = layui.layer;
          that.layuiLayer.config({
            extend: 'myskin/owner-details.css'
          });
          that.layuiLayer.close(that.layuiLayer.index);
          that.layuiLayer.open({
            title: '业主详情',
            type: 2,
            shadeClose: true,
            shade: false,
            maxmin: false, //开启最大化最小化按钮
            area: ['500px', '340px'],
            offset: 'auto',
            skin: 'owner-details',
            content: url,
            closeBtn: 1,
          });
        })
      })
      $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
      })
      $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
        event.stopPropagation();
        var lgtd = Number($(this).attr('lgtd'));
        var lttd = Number($(this).attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
      })

      // 设备列表中的点击事件
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
        var id = $(this).attr('term-listid');
        var url = './popup/html/equipment-details.html?obj=' + id;
        layui.use('layer', function () {
          that.layuiLayer = layui.layer;
          that.layuiLayer.config({
            extend: 'myskin/equipment-details.css'
          });
          that.layuiLayer.close(that.layuiLayer.index);
          that.layuiLayer.open({
            title: '警情详情',
            type: 2,
            shadeClose: true,
            shade: false,
            maxmin: false, //开启最大化最小化按钮
            area: ['520px', '320px'],
            offset: 'auto',
            skin: 'equipment-details',
            content: url,
            closeBtn: 1,
          });
        })
      })
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
      })
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
        event.stopPropagation();
        var lgtd = Number($(this).attr('lgtd'));
        var lttd = Number($(this).attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
      })

      // 警情列表中得热力图是否选中事件
      $('#policeHeatMap').click(function () {
        that.checkBoxSelect(this);
      })
      // 业主信息列表中得热力图是否选中事件
      $('#ownerHeatMap').click(function () {
        that.checkBoxSelect(this);
      })
      // 设备信息列表的热力图是否选中事件
      $('#equipmentHeatMap').click(function () {
        that.checkBoxSelect(this);
      })
      // 警情信息中类别移入事件
      $('#policeCategory').mouseenter(function () {
        if ($('#policeCategory .select-list').is(':hidden')) {
          $('#policeCategory .select-list').stop().slideDown(0);
        }
      })
      // 警情信息中得类别移出事件
      $('#policeCategory').mouseleave(function () {
        if (!$('#policeCategory .select-list').is(':hidden')) {
          $('#policeCategory .select-list').stop().slideUp(0);
        }
      })
      // 警情信息中行政区移入事件
      $('#policeArea').mouseenter(function () {
        if ($('#policeArea .select-list').is(':hidden')) {
          $('#policeArea .select-list').stop().slideDown(0);
        }
      })
      // 警情信息中得行政区移出事件
      $('#policeArea').mouseleave(function () {
        if (!$('#policeArea .select-list').is(':hidden')) {
          $('#policeArea .select-list').stop().slideUp(0);
        }
      })
      // 业主信息中类别移入事件
      $('#ownerCategory').mouseenter(function () {
        if ($('#ownerCategory .select-list').is(':hidden')) {
          $('#ownerCategory .select-list').stop().slideDown(0);
        }
      })
      // 业主信息中得类别移出事件
      $('#ownerCategory').mouseleave(function () {
        if (!$('#ownerCategory .select-list').is(':hidden')) {
          $('#ownerCategory .select-list').stop().slideUp(0);
        }
      })
      // 业主信息中的等级移入事件
      $('#ownerLevel').mouseenter(function () {
        if ($('#ownerLevel .select-list').is(':hidden')) {
          $('#ownerLevel .select-list').stop().slideDown(0);
        }
      })
      // 业主信息中的等级移出事件
      $('#ownerLevel').mouseleave(function () {
        if (!$('#ownerLevel .select-list').is(':hidden')) {
          $('#ownerLevel .select-list').stop().slideUp(0);
        }
      })
      // 设备信息中类别移入事件
      $('#equipmentCategory').mouseenter(function () {
        if ($('#equipmentCategory .select-list').is(':hidden')) {
          $('#equipmentCategory .select-list').stop().slideDown(0);
        }
      })
      // 设备信息中得类别移出事件
      $('#equipmentCategory').mouseleave(function () {
        if (!$('#equipmentCategory .select-list').is(':hidden')) {
          $('#equipmentCategory .select-list').stop().slideUp(0);
        }
      })
      //  警情信息类，业主信息类，设备信息类别，具体项的点击事件
      $('.analysis-container > div .select-list').off('click', 'li').on('click', 'li', function (event) {
        // console.log(event.currentTarget.innerHTML,'innerhtml')
        var text = $(this).text().trim();
        // console.log(text,'text()')
        // console.log(that.tabIndex,'tabIndex')

        $(this).parent().parent().prev().html(text + '<i></i>');
        $(this).parent().parent().stop().slideUp(0);

        if ($(this).attr('areaid')) {
          $(this).parent().parent().prev().attr('areaid', $(this).attr('areaid'));
        } else if ($(this).attr('ownerid')) {
          $(this).parent().parent().prev().attr('ownerid', $(this).attr('ownerid'));
        }


        if (that.tabIndex == 1) {

          var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
          var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();

          if ($(this).attr('areaid')) {
            that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
          } else {
            that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
          }


        } else if (that.tabIndex == 2) {
          var categoryText = $('#ownerCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerCategory > div:eq(0)').attr('ownerid');
          var levelText = $('#ownerLevel > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerLevel > div:eq(0)').text().trim();

          var parentId = $(this).parent().parent().parent().attr('id');
          if (parentId == 'ownerCategory') {
            that.getOwnerDj($('#ownerLevel'), categoryText);
            that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, '');
          } else {
            that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, levelText);
          }

        } else if (that.tabIndex == 0) {
          that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), text == '全部' ? '' : text);
        }

      })
    },
    getArea: function (dom) {
      dom.children('.select-list').children('ul').empty();
      dom.children('.select-list').children('ul').append($("<li areaid='all'>全部</li>"));
      var that = this;
      $.ajax({
        url: 'https://web.byisf.com/api/blade-system/region/select?code=3601',
        type: 'GET',
        dataType: 'JSON',
        success: function (data) {
          var res = data.data;
          for (var i = 0; i < res.length; i++) {
            dom.children('.select-list').children('ul').append($("<li areaid=" + res[i].code + ">" + res[i].name + "</li>"));
          }
        }
      })
    },
    getPoliceTableAnalysis: function (dom, beginTime, endTime, waringType, addvcd) {
      dom.empty();
      var that = this;
      $.ajax({
        url: "https://web.byisf.com/api/blade-jfpts/alarm/alarm/page?current=1&size=99999&waringType=&beginTime=" + beginTime + "&endTime=" + endTime + "&province=36&city=3601&district=" + addvcd,
        type: 'get',
        dataType: 'JSON',
        success: function (data) {
          var result = data.data.records;
          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();
          for (var a, time, t, e, y, h, i = 0; i < result.length; i++) {

            if (result[i].waringType == "紧急求救") {
              result[i].waringType = "一键求助"
            }

            that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '警情信息', {
              lgtd: result[i].jd,
              lttd: result[i].wd,
              id: result[i].id
            }, result[i].jd, result[i].wd, './images/police-situation.png');

            t = result[i].alarmTime.substr(0, 10);
            e = result[i].alarmTime.substr(11);
            time = t + '&nbsp;' + e;
            y = result[i].alarmTime.substr(5, 5);
            h = result[i].alarmTime.substr(11, 5);
            a = Number(i) + 1;
            str += '<tr term-list=' + result[i].id + '>';
            str += '<td>' + a + '</td>';
            str += '<td title=' + result[i].waringType + '>' + result[i].waringType + '</td>';
            str += '<td title=' + result[i].alarmPeople + '>' + result[i].alarmPeople + '</td>';
            str += "<td><a href='javascript:;' title=" + time + ">" + y + ' ' + h + "</a></td>";
            str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            str += '</tr>';
            dom.append(str);
            str = '';


          }

          for (var i = 0; i < 1000; i++) {
            var dd = Math.random();
            var cc = Math.random();
          }
        }
      })
    },
    // 获取设备信息列表
    getEquipmentTable: function (dom, deviceType) {
      dom.empty();
      var that = this;
      // console.log(dom, deviceType);
      // dom.append(deviceType);
      $.ajax({
        url: '/api/blade-jfpts/equipment/equipment/selectList?deviceType=' + deviceType,
        type: 'GET',
        dataType: 'JSON',
        success: function (data) {
          var result = data.data;
          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();
          for (var a, i = 0; i < result.length; i++) {


            that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', {
              lgtd: result[i].jd,
              lttd: result[i].wd,
              id: result[i].id
            }, result[i].jd, result[i].wd, './images/ceshi.png');

            a = Number(i) + 1;
            str += "<tr term-listid=" + result[i].id + ">";
            str += '<td>' + a + '</td>';
            str += '<td title=' + result[i].deviceName + '>' + result[i].deviceName + '</td>';
            str += '<td title=' + result[i].deviceType + '>' + result[i].deviceType + '</td>';
            str += '<td>' + result[i].deviceNumber + '</td>';
            str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            str += '</tr>';
            dom.append(str);
            str = '';
          }


        }
      })
    },
    // 创建实体图层
    createEntitysAnalysis: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {

      var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 16, 16);
      symbol.name = name;
      var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 }));
      pt.entityData = item;
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);


      entityContent.push(item);
  },
    //左侧控制栏↑

    open: function () {
      var that = this;
      $.ajax({
@@ -198,41 +648,63 @@
        type: 'get',
        dataType: 'JSON',
        success: function (res) {

          var datas = res.data;


          var heatmapRenderer = null;
          that.entityData = [];



          for (var i = 0; i < datas.length; i++) {
            datas[i].x = Number(datas[i].jd);
            datas[i].y = Number(datas[i].wd);
            // that.entityData[i].lgtd = Number(datas[i].jd);
            // that.entityData[i].lttd = Number(datas[i].wd);
            that.entityData.push({
              lgtd: Number(datas[i].jd),
              lttd: Number(datas[i].wd)
            })
          }
          // console.log(that.entityData, 444444444444444444444)
          // console.log(datas,444444444444444444444)
          that.flareClusterLayer(datas);

          that.heatmapfeatureLayer = that.heatmFeaLayers();

          // console.log(that.heatmapfeatureLayer);
          
          that._map.addLayer(that.heatmapfeatureLayer);
          
          that.checkBoxSelect();
          
          // console.log(that.heatmapfeatureLayer);
          // that.checkBoxSelect();//左侧控制热力图重复
        }
      })
      var that = this;
      var intTime = () => {
        var time = this.getTime();
        $("#tabcontainer").css("width", "360px");
        $('#mapcontentClass').addClass('client-max-map'); //追加样式
        AppEvent.dispatchAppEvent(AppEvent.APPLICATION_RESIZE, {});

        that.tabIndex = 0;
        $('.analysis-and-judgment-tab li:eq(0)').addClass('on').siblings().removeClass('on');
        $($('.analysis-container > div')[0]).stop().show().siblings().stop().hide();

        that.heatmapfeatureLayer_1 = that.heatmFeaLayers();

        that._map.addLayer(that.heatmapfeatureLayer_1);
        $('#analysis_select_time_start').val(time.tomorrow);
        $('#analysis_select_time_end').val(time.current);

        layui.use('laydate', function () {
          that.layuiLadate = layui.laydate;
          //执行一个laydate实例 开始
          that.layuiLadate.render({
            elem: '#analysis_select_time_start', //指定元素
            type: "datetime",
            format: 'yyyy-MM-dd HH:mm',
            trigger: 'click'
          });
          // 结束
          that.layuiLadate.render({
            elem: '#analysis_select_time_end', //指定元素
            type: "datetime",
            format: 'yyyy-MM-dd HH:mm',
            trigger: 'click'
          });
        });
        that.getArea($('#policeArea'));
        that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), time.tomorrow, time.current, '', '');
        that.clickHand();

      }
      intTime();
    },
    heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图

@@ -261,13 +733,13 @@
      return featureLayer;
    },

    checkBoxSelect: function (self) {
    checkBoxSelect: function (self) {//选择热力图
      var that = this;
      var heatmapRenderer = null;
      // // return
      // 选中
      // if ($(self).prop('checked') == true) {
      // if (1) {
      if ($(self).prop('checked') == true) {
        // if (1) {
        heatmapRenderer = new HeatmapRenderer({
          colorStops: [
            { ratio: 0.45, color: "rgba(000,000,255,0)" },
@@ -277,7 +749,7 @@
            { ratio: 1.00, color: "rgb(255,000,000)" },
          ],
          blurRadius: 42,
          maxPixelIntensity: 184,
          maxPixelIntensity: 100,
          minPixelIntensity: 0
        });
        this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
@@ -287,10 +759,10 @@
          point = new esri.geometry.Point(this.entityData[i].lgtd, this.entityData[i].lttd, new esri.SpatialReference({ wkid: 4326 }));
          this.heatmapfeatureLayer.add(new esri.Graphic(point));
        }
      // } else {
      //   this.heatmapfeatureLayer.clear();
      //   this.heatmapfeatureLayer.setRenderer();
      // }
      } else {
        this.heatmapfeatureLayer.clear();
        this.heatmapfeatureLayer.setRenderer();
      }
    },

    close: function () {
@@ -366,10 +838,10 @@
    },

    clickHand: function (e) {//top点击事件，导航
      console.log(e);
      // console.log(e);
    },
    
    


    //聚合图层事件
    flareClusterLayer: function (datas) {  //top聚合事件，导航

@@ -396,7 +868,7 @@
        clusterRatio: 120,
        clusterAreaDisplay: areaDisplayMode,
        clusteringBegin: function (e) {
          console.log(e, "clustering begin");
          // console.log("clustering begin");
        },
        clusteringComplete: function () {
          console.log("clustering complete");

 public/map/widgets/supervisoryMap/template.html

@@ -1 +1,252 @@
<div></div>
<div class='analysis-and-judgment' open-li='analysis-and-judgment'>
    <ul class='analysis-and-judgment-tab'>
        <li>设备信息</li>
        <li class='on'>警情信息</li>
        <li class='on'>业主信息</li>
    </ul>
    <!-- 展示分析研判 -->
    <div class="analysis-container">
        <!-- 设备信息 -->
        <div class="analysis-container-equipment">
            <div class="analysis-category">
                <ul>
                    <li id='equipmentCategory'>
                        类型：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一体化摄像头</li>
                                <li>普通枪式摄像头</li>
                                <li>红外夜视防水型摄像头</li>
                                <li>球型摄像头</li>
                                <li>高速球</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='equipmentHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>设备名称</th>
                                    <th>设备类型</th>
                                    <th>设备编码</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 警情信息 -->
        <div class="analysis-container-police">
            <div class="analysis-category">
                <ul>
                    <li id='policeCategory'>
                        类型：
                        <div>
                            全部
                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一键求助</li>
                            </ul>
                        </div>
                    </li>
                    <li id='policeArea'>
                        区：
                        <div>
                            全部
                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='policeHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class='analysis-selection-criteria'>
                <input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text" id='analysis_select_time_end' readonly>
                <input type="button" value='查询' id='policeSelectTime'>
            </div>
            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类别</th>
                                    <th>接警员</th>
                                    <th>日期</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 业主信息 -->
        <div class="analysis-container-owner">
            <div class="analysis-category">
                <ul>
                    <li id='ownerCategory'>
                        类型：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                           
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='ownerHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class="analysis-level">
                <ul>
                    <li id='ownerLevel'>
                        等级：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                        
                            </ul>
                        </div>
                    </li>
                    <li>
                        <!-- 级别 -->
                    </li>
                </ul>
            </div>

            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类别</th>
                                    <th>等级</th>
                                    <th>名称</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 设备信息
        <div class="analysis-container-equipment">
            <div class="analysis-category">
                <ul>
                    <li id='equipmentCategory'>
                        类型：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一体化摄像头</li>
                                <li>普通枪式摄像头</li>
                                <li>红外夜视防水型摄像头</li>
                                <li>球型摄像头</li>
                                <li>高速球</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='equipmentHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>设备名称</th>
                                    <th>设备类型</th>
                                    <th>设备编码</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>