From 4ddc6a1cb097f184e521847cd34d546bf595a2df Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 11 Dec 2024 15:02:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7=E8=A6=86=E7=9B=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
bns/html/supplement/monitoring_coverage.html | 26 +--
bns/js/supplement/monitoring_coverage.js | 143 +++++++++++++++
.../supplement/monitoring_coverage_echarts.js | 169 +++++++++++++-----
3 files changed, 276 insertions(+), 62 deletions(-)
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 @@
>
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: {