diff --git a/bns/html/supplement/monitoring_coverage.html b/bns/html/supplement/monitoring_coverage.html index e5d9fac..8bc6477 100644 --- a/bns/html/supplement/monitoring_coverage.html +++ b/bns/html/supplement/monitoring_coverage.html @@ -37,20 +37,20 @@
-

全选(0)

+

全选

-

二级风险球机(0)

+

二级风险球机

-

三级风险球机(0)

+

三级风险球机

-

四级风险球机(0)

+

四级风险球机

-

五级风险球机(0)

+

五级风险球机

@@ -61,32 +61,32 @@
-

1

+

0

球机正常

-

2

+

0

异常掉线

-

3

+

0

画面不清晰

-

4

+

0

不流畅

-

1

+

0

信号弱

-

1

+

0

人为遮挡

@@ -111,11 +111,11 @@
-

1

+

0

视频设备视频速率正常

-

1

+

0

视频设备视频速率异常

> diff --git a/bns/js/supplement/monitoring_coverage.js b/bns/js/supplement/monitoring_coverage.js index e69de29..7c3b878 100644 --- a/bns/js/supplement/monitoring_coverage.js +++ b/bns/js/supplement/monitoring_coverage.js @@ -0,0 +1,143 @@ +let form, layer, table, laydate, tableIns, user = getUser(); +let mapPointList = [],mainMapPointList = []; +layui.use(['form', 'layer', 'table', 'laydate'], function () { + form = layui.form; + layer = layui.layer; + table = layui.table; + laydate = layui.laydate; + initData(); +}) + +/* 数据初始化 */ +function initData(){ + getHyd(); + getFgd(); + getMap(); + getErrorNum(); + getWatchNum(); + getCoverRate(); + getSpeedNum(); +} + +/* 获取监控活跃度分析 */ +function getHyd(){ + let params = {}; + let url = dataUrl + "proteam/pot/monitoringCoverage/getHyd"; + ajaxRequest(url, "GET", params, true, function () { + }, function (result) { + if (result.code === 200) { + initEchartsOne(result.data); + } else if (result.code === 500) { + layer.alert(result.msg, { icon: 2 }) + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, null); +} + +/* 获取监控覆盖度分析 */ +function getFgd(){ + let params = {}; + let url = dataUrl + "proteam/pot/monitoringCoverage/getFgd"; + ajaxRequest(url, "GET", params, true, function () { + }, function (result) { + if (result.code === 200) { + initEchartsTwo(result.data); + } else if (result.code === 500) { + layer.alert(result.msg, { icon: 2 }) + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, null); +} + +/* 获取地图球机 */ +function getMap(){ + let params = {}; + let url = dataUrl + "proteam/pot/monitoringCoverage/getMap"; + ajaxRequest(url, "GET", params, true, function () { + }, function (result) { + if (result.code === 200) { + let dataList = []; + $.each(result.data,function(index,item){ + item.coordinate = [parseFloat(item.lon), parseFloat(item.lat)] + dataList.push(item); + }) + mainMapPointList = dataList; + loadMap(dataList); + } else if (result.code === 500) { + layer.alert(result.msg, { icon: 2 }) + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, null); +} + +/* 获取球机异常类型 */ +function getErrorNum(){ + let params = {}; + let url = dataUrl + "proteam/pot/monitoringCoverage/getErrorNum"; + ajaxRequest(url, "GET", params, true, function () { + }, function (result) { + if (result.code === 200) { + $.each(result.data,function(index,item){ + $('#num' + item.name).html(item.num); + }) + } else if (result.code === 500) { + layer.alert(result.msg, { icon: 2 }) + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, null); +} + +/* 下行观看分析 */ +function getWatchNum(){ + let params = {}; + let url = dataUrl + "proteam/pot/monitoringCoverage/getWatchNum"; + ajaxRequest(url, "GET", params, true, function () { + }, function (result) { + console.error(result); + if (result.code === 200) { + initEchartsThree(result.data); + } else if (result.code === 500) { + layer.alert(result.msg, { icon: 2 }) + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, null); +} + +/* 风险球机覆盖度 */ +function getCoverRate(){ + let params = {}; + let url = dataUrl + "proteam/pot/monitoringCoverage/getCoverRate"; + ajaxRequest(url, "GET", params, true, function () { + }, function (result) { + console.error(result); + if (result.code === 200) { + initEchartsFour(result.data); + } else if (result.code === 500) { + layer.alert(result.msg, { icon: 2 }) + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, null); +} + +/* 球机速率正常/异常数量 */ +function getSpeedNum(){ + let params = {}; + let url = dataUrl + "proteam/pot/monitoringCoverage/getSpeedNum"; + ajaxRequest(url, "GET", params, true, function () { + }, function (result) { + if (result.code === 200) { + $('#normalNum').html(result.data[0].normalNum); + $('#errorNum').html(result.data[0].errorNum); + } else if (result.code === 500) { + layer.alert(result.msg, { icon: 2 }) + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, null); +} \ No newline at end of file diff --git a/bns/js/supplement/monitoring_coverage_echarts.js b/bns/js/supplement/monitoring_coverage_echarts.js index ed7c105..771059a 100644 --- a/bns/js/supplement/monitoring_coverage_echarts.js +++ b/bns/js/supplement/monitoring_coverage_echarts.js @@ -6,14 +6,13 @@ let myChart4 = echarts.init(document.getElementById('echarts-four')); let uploadedDataURL2 = "../../js/compreDisplay/anhui/anhui.json"; let myChart5 = echarts.init(document.getElementById('echarts-map2')); -initEchartsOne(); -initEchartsTwo(); -initEchartsThree(); -initEchartsFour(); -loadMap([]); function initEchartsOne(list) { - let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称 - let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据 + let dataX = []; //名称 + let dataY = []; //数据 + $.each(list, function (index, item) { + dataX.push(item.num); + dataY.push(item.timeValue); + }) let option = { backgroundColor: 'transparent', tooltip: { @@ -21,13 +20,33 @@ function initEchartsOne(list) { axisPointer: { type: 'shadow', }, + formatter: function (params) { + console.error(params); + let result = ''; + $.each(list, function (index, item) { + if (parseInt(params[0].name) === item.num) { + result += params[0].marker + '球机编号:' + item.name + '
' + '时长:' + item.time + '
' + } + }) + return result; + }, }, grid: { top: '10%', right: '10%', - left: '10%', + left: '15%', bottom: '10%', }, + dataZoom: [ + { + type: "inside", + zoomOnMouseWheel: false, + moveOnMouseMove: true, + moveOnMouseWheel: true, + startValue: 0, + endValue: 9, + }, + ], xAxis: [ { type: 'category', @@ -106,7 +125,7 @@ function initEchartsOne(list) { }, label: { normal: { - show: true, + show: false, lineHeight: 10, formatter: '{c}', position: 'top', @@ -127,8 +146,14 @@ function initEchartsOne(list) { } function initEchartsTwo(list) { - let nameList = ['合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥']; - let dataList = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10] + let nameList = []; + let dataList = [] + $.each(list, function (index, item) { + nameList.push(item.name); + dataList.push(item.num); + }) + nameList = nameList.reverse(); + dataList = dataList.reverse(); option = { backgroundColor: 'transparent', tooltip: { @@ -138,7 +163,7 @@ function initEchartsTwo(list) { }, }, grid: { - left: '12%', + left: '18%', right: '10%', bottom: '8%', top: '5%', @@ -249,8 +274,12 @@ function initEchartsTwo(list) { } function initEchartsThree(list) { - let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称 - let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据 + let dataX = []; //名称 + let dataY = []; //数据 + $.each(list, function (index, item) { + dataX.push(item.num); + dataY.push(item.watchTime); + }) let option = { backgroundColor: 'transparent', tooltip: { @@ -258,6 +287,16 @@ function initEchartsThree(list) { axisPointer: { type: 'shadow', }, + formatter: function (params) { + console.error(params); + let result = ''; + $.each(list, function (index, item) { + if (parseInt(params[0].name) === item.num) { + result += params[0].marker + '球机编号:' + item.name + '
' + '观看次数:' + item.watchTime + '
' + } + }) + return result; + }, }, grid: { top: '10%', @@ -265,6 +304,16 @@ function initEchartsThree(list) { left: '10%', bottom: '10%', }, + dataZoom: [ + { + type: "inside", + zoomOnMouseWheel: false, + moveOnMouseMove: true, + moveOnMouseWheel: true, + startValue: 0, + endValue: 9, + }, + ], xAxis: [ { type: 'category', @@ -360,19 +409,19 @@ function initEchartsThree(list) { }; function getColor(value) { let endColor = '#2066ad'; - if (value <= 10) { + if (value <= 2) { endColor = '#3f67a7'; - } else if (value > 10 && value <= 15) { + } else if (value > 2 && value <= 4) { endColor = '#5e6296'; - } else if (value > 15 && value <= 20) { + } else if (value > 4 && value <= 6) { endColor = '#7f618a'; - } else if (value > 20 && value <= 25) { + } else if (value > 6 && value <= 8) { endColor = '#a55a77'; - } else if (value > 25 && value <= 30) { + } else if (value > 8 && value <= 10) { endColor = '#c95665'; - } else if (value > 30 && value <= 35) { + } else if (value > 10 && value <= 12) { endColor = '#e45256'; - } else if (value > 35 && value <= 50) { + } else if (value > 12 && value <= 14) { endColor = '#ef5050'; } else { endColor = '#f33'; @@ -389,19 +438,19 @@ function initEchartsFour(list) { var data = [ { name: "二级风险", - value: 54, + value: list[0].twoRate, }, { name: "三级风险", - value: 44, + value: list[0].threeRate, }, { name: "四级风险", - value: 35, + value: list[0].fourRate, }, { name: "五级风险", - value: 30, + value: list[0].fiveRate, }, ]; var titleArr = [], @@ -457,7 +506,7 @@ function initEchartsFour(list) { position: "center", show: true, textStyle: { - fontSize: "20", + fontSize: "15", fontWeight: "bold", color: colors[index][0], }, @@ -519,13 +568,7 @@ $(".check-risk").click(function (e) { $(this).attr("isCheck", '1') $(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 2)) } - // 加载地图数据 - /* let dataList = mapPointList.filter(item => { - if (item.buildCode === clickCityCode) { - return item - } - }) - loadMap(dataList); */ + mapSearch(); // 设置风险等级选中样式 function setRiskIcon(value, type) { if (value && type === 1) { @@ -540,6 +583,31 @@ $(".check-risk").click(function (e) { } }); +/*地图关键字搜索、风险等级选中*/ +function mapSearch() { + let selRiskList = []; + mapPointList.splice(0, mapPointList.length); + $('.check-risk').each(function () { + if ($(this).attr("isCheck") === '1') { + if ($(this).find('p').eq(0).attr("checkedName")) { + selRiskList.push($(this).find('p').eq(0).attr("checkedName")) + } + } + }) + if (selRiskList.length) { + $.each(selRiskList, function (index, item) { + let dataList = mainMapPointList.filter(item2 => { + return item2.riskLevel === item + }) + $.each(dataList, function (index3, item3) { + mapPointList.push(item3) + }) + }) + } + console.error(mapPointList); + loadMap(mapPointList); +} + function loadMap(dataMap) { $.getJSON(uploadedDataURL2, function (geoJson) { echarts.registerMap('anhui', geoJson); @@ -555,14 +623,11 @@ function loadMap(dataMap) { let geoCoord = data[i].coordinate; if (geoCoord) { res.push({ - proName: data[i].proName, - num: data[i].num, - riskLevel: data[i].riskType, - workContent: dealEmptyString(data[i].workContent), - isOnline: isOnline(data[i].ballStatus), - workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone), - value: geoCoord.concat(data[i].value, data[i].proName, data[i].num), + name: data[i].name, + address: data[i].address, + riskLevel: data[i].riskLevel, coordinate: data[i].coordinate, + value: geoCoord.concat(data[i].name, data[i].riskLevel), }); } } @@ -593,12 +658,9 @@ function loadMap(dataMap) { formatter: function (params) { if (params.data) return ( - '

' + params.data.proName + '

' + - '

风险等级:' + setRiskLevelColor(params.data.riskLevel) + '

' + - '

作业内容:' + sliceStr(params.data.workContent) + '

' + - '

班组长:' + params.data.workManager + '

' + - '

预警数量:' + params.data.num + '

' + - '

球机:' + params.data.isOnline + '

' + '

球机编号:' + params.data.name + '

' + + '

风险等级:' + setRiskLevelColor(params.data.riskLevel) + '

' + + '

地址:' + params.data.address + '

' ) }, // extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;", @@ -655,9 +717,18 @@ function loadMap(dataMap) { return 20; }, symbol: function (val) { - console.log(val) - var num = Number(val[4]) + 1; - return getEchartsImage(val[2], num, val[3]); + switch (val[3]) { + case '2': + return 'image://../../img/compreDisplay/two-risk.png'; + case '3': + return 'image://../../img/compreDisplay/three-risk.png'; + case '4': + return 'image://../../img/compreDisplay/four-risk.png'; + case '5': + return 'image://../../img/compreDisplay/five-risk.png'; + default: + break; + } }, label: { normal: {