/* * @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; });