| | |
| | | |
| | | 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 + '<i class="layui-icon client-select"></i>'); |
| | | $(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 + '<i class="layui-icon client-select"></i>'); |
| | | $(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 + '<i class="layui-icon client-select"></i>'); |
| | | $(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('全部<i class="layui-icon client-select"></i>'); |
| | | $("#client_select_2").html('全部<i class="layui-icon client-select"></i>'); |
| | | $("#client_select_3").html('全部<i class="layui-icon client-select"></i>'); |
| | | |
| | | $("#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: 'http://36.134.81.48:18001/api/blade-jfpts/netty/netty/selectNettyChannelb', |
| | | data: { |
| | | pid: nodes[0].id |
| | | }, |
| | | type: 'POST', |
| | | url: 'http://192.168.0.107:1888/api/blade-jfpts/alarm/alarm/page?current=1&size=10', |
| | | type: 'get', |
| | | 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: 'http://36.134.81.48:18001/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); |
| | | var datas = data.data.records; |
| | | for (var i = 0; i < datas.length; i++) { |
| | | datas[i].x = Number(datas[i].jd); |
| | | datas[i].y = Number(datas[i].wd); |
| | | } |
| | | |
| | | 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"}); |
| | | that.flareClusterLayer(datas); |
| | | } |
| | | }; |
| | | |
| | | 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: 'http://36.134.81.48:18001/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: 'http://36.134.81.48:18001/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("<li addvcd=''>全部</li>"); |
| | | for (var i = 0; i < data.data.length; i++) { |
| | | $('.client-time-police .client-time-select-condition .realtime-district .select-list ul').append("<li addvcd=" + data.data[i].addvcd + ">" + data.data[i].addvnm + "</li>"); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | //渲染中间表格 |
| | | 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: 'http://36.134.81.48:18001/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: 'http://36.134.81.48:18001/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: 'http://36.134.81.48:18001/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 += |
| | | "<div class='jfwin-div'>" + |
| | | "<span>" + xb + "、</span>" + |
| | | "<span>设备名称:" + data.data[i].deviceName + "</span> " + |
| | | "<span>所属单位:" + data.data[i].street + "</span> " + |
| | | "<span>到期时间:" + data.data[i].expireTime + "</span>" + |
| | | "</div>" |
| | | } |
| | | } |
| | | 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: 'http://36.134.81.48:18001/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 |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | |
| | | }, |
| | | |
| | | //聚合图层事件 |
| | |
| | | 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; |
| | | } |
| | | |
| | | |