haozq
/
jjsp_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

监控覆盖

This commit is contained in:
cwchen 2024-12-11 15:02:17 +08:00
parent fcf6194f69
commit 4ddc6a1cb0
3 changed files with 276 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
bns/html/supplement/monitoring_coverage.html
View File

@ -37,20 +37,20 @@
<div id="center-box2">
<div class="multiselect layout">
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-1-check.png">
<p checkedName="" style="color: #fff;">全选(<span id="allNum">0</span>)</p>
<p checkedName="" style="color: #fff;">全选</p>
</div>
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-2-check.png">
<p checkedName="2" style="color: #DD690B;">二级风险球机(<span id="twoNum">0</span>)</p>
<p checkedName="2" style="color: #DD690B;">二级风险球机</p>
</div>
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-3-check.png">
<p checkedName="3" style="color: #FFE91F;">三级风险球机(<span id="threeNum">0</span>)</p>
<p checkedName="3" style="color: #FFE91F;">三级风险球机</p>
</div>
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-4-check.png"
style="">
<p checkedName="4" style="color: #2aa998;">四级风险球机(<span id="fourNum">0</span>)</p>
<p checkedName="4" style="color: #2aa998;">四级风险球机</p>
</div>
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-5-check.png">
<p checkedName="5" style="color: #70e180;">五级风险球机(<span id="fiveNum">0</span>)</p>
<p checkedName="5" style="color: #70e180;">五级风险球机</p>
</div>
</div>
</div>
@ -61,32 +61,32 @@
</div>
<div id="center-bottom" class="layout">
<div class="error-box layout">
<p style="color: #3ed6ff;">1</p>
<p style="color: #3ed6ff;" id="num1">0</p>
<img src="../../img/supplement/video_img.png">
<p style="color: #3ed6ff;">球机正常</p>
</div>
<div class="error-box layout">
<p style="color: #e53b5a;">2</p>
<p style="color: #e53b5a;" id="num2">0</p>
<img src="../../img/supplement/video_img2.png">
<p style="color: #e53b5a;">异常掉线</p>
</div>
<div class="error-box layout">
<p style="color: #c280ff;">3</p>
<p style="color: #c280ff;" id="num3">0</p>
<img src="../../img/supplement/video_img3.png">
<p style="color: #c280ff;">画面不清晰</p>
</div>
<div class="error-box layout">
<p style="color: #8080ff;">4</p>
<p style="color: #8080ff;" id="num4">0</p>
<img src="../../img/supplement/video_img4.png">
<p style="color: #8080ff;">不流畅</p>
</div>
<div class="error-box layout">
<p style="color: #facd91;">1</p>
<p style="color: #facd91;" id="num5">0</p>
<img src="../../img/supplement/video_img5.png">
<p style="color: #facd91;">信号弱</p>
</div>
<div class="error-box layout">
<p style="color: #f59a23;">1</p>
<p style="color: #f59a23;" id="num6">0</p>
<img src="../../img/supplement/video_img6.png">
<p style="color: #f59a23;">人为遮挡</p>
</div>
@ -111,11 +111,11 @@
</div>
<div id="right-bottom-box2" class="layout">
<div class="right-bottom-child-box2 layout">
<p>1</p>
<p id="normalNum">0</p>
<p>视频设备视频速率正常</p>
</div>
<div class="right-bottom-child-box2 layout">
<p>1</p>
<p id="errorNum">0</p>
<p>视频设备视频速率异常</p>
</div>
</div>>

143
bns/js/supplement/monitoring_coverage.js
View File

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

169
bns/js/supplement/monitoring_coverage_echarts.js
View File

@ -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 + '<br>' + '时长：' + item.time + '<br>'
}
})
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 + '<br>' + '观看次数：' + item.watchTime + '<br>'
}
})
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 (
'<p class="map-p">' + params.data.proName + '</p>' +
'<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
'<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
'<p class="map-p">班组长：' + params.data.workManager + '</p>' +
'<p class="map-p">预警数量：' + params.data.num + '</p>' +
'<p class="map-p">球机：' + params.data.isOnline + '</p>'
'<p class="map-p">球机编号:' + params.data.name + '</p>' +
'<p class="map-p">风险等级:' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
'<p class="map-p">地址:' + params.data.address + '</p>'
)
},
// 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: {