From 35e4f9a2f3820790070fc253b16e3ea3a1689a22 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 20 Apr 2021 17:41:22 +0800
Subject: [PATCH] 添加左侧热力图控件
---
public/map/widgets/supervisoryMap/template.html | 253 ++++++++++++
public/map/widgets/supervisoryMap/SupervisoryMap.css | 375 ++++++++++++++++++
public/map/widgets/supervisoryMap/SupervisoryMap.js | 532 +++++++++++++++++++++++++-
3 files changed, 1,129 insertions(+), 31 deletions(-)
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.css b/public/map/widgets/supervisoryMap/SupervisoryMap.css
index e69de29..0fd2a64 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.js b/public/map/widgets/supervisoryMap/SupervisoryMap.js
index 4192bdc..33328be 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.js
+++ b/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 + ' ' + 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");
diff --git a/public/map/widgets/supervisoryMap/template.html b/public/map/widgets/supervisoryMap/template.html
index 281c686..8717bad 100644
--- a/public/map/widgets/supervisoryMap/template.html
+++ b/public/map/widgets/supervisoryMap/template.html
@@ -1 +1,252 @@
-<div></div>
\ No newline at end of file
+<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>
\ No newline at end of file
--
Gitblit v1.9.3