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