1275 lines
28 KiB
JavaScript
1275 lines
28 KiB
JavaScript
// var dataUrl ="http://192.168.0.110:8081/rearScreen/"
|
||
//平台在线的球机
|
||
var onLineBallList = [];
|
||
var token1 = localStorage.getItem("video_token1")
|
||
layui.use(['form'], function() {
|
||
$('#map').load('../../page/svg/svgMap_3D_index.svg');
|
||
//随机获取一个在线视频播放
|
||
getRandomVideo();
|
||
//获取接口状态数量x
|
||
// interfaceStatus();
|
||
getPortStatusNum();
|
||
|
||
//智慧用电表格
|
||
// setTimeout(function(){
|
||
// var svg = Snap('#tesr222');
|
||
// console.log(svg);
|
||
// svg.click(function() {
|
||
// alert('你点击了SVG元素！');
|
||
// });
|
||
// },500)
|
||
timeTask();
|
||
|
||
timeTaskVideo();
|
||
deviceNum();
|
||
// 空气质量检测
|
||
echartsInstrumentPanel();
|
||
environmentalMonitoring(1);
|
||
// echartsEnvironmentalMonitor();
|
||
});
|
||
|
||
var timeout = false; //启动及关闭按钮
|
||
var timeoutVideo = false; //启动及关闭按钮
|
||
// 60 *5s 刷新一次
|
||
function timeTask() {
|
||
if (!timeout) {
|
||
timeout = true;
|
||
} else {
|
||
getPortStatusNum();
|
||
}
|
||
setTimeout(timeTask, 1000 * 30);
|
||
}
|
||
function timeTaskVideo() {
|
||
if (!timeoutVideo) {
|
||
timeoutVideo = true;
|
||
} else {
|
||
getRandomVideo();
|
||
}
|
||
setTimeout(timeTask, 1000 * 60 * 10);
|
||
}
|
||
|
||
|
||
//根据uuid绑定svg内部的id和每个防区的线条数量
|
||
const idMap = new Map([
|
||
["83d8402f147a4752b533253a9b8efdcc",4],
|
||
["693b822a29c6485c89e20bf2f0361e71",8],
|
||
["d9d05050d8c54012b2888eb5c085c63a",4],
|
||
["0244961a68cb402a89081ef73947dc9a",12],
|
||
["399d97e087a84144a1e5cb41ab32e084",4],
|
||
["1de47425c6ff404883ac17b061f4d093",4],
|
||
["1de47425c6ff404883ac17b061f4d027",8]
|
||
])
|
||
|
||
/**
|
||
* 由home.js调用
|
||
* 用于改变 -- 各防区线的颜色
|
||
*/
|
||
function webscoketIndexSvg(strs){
|
||
var arr = strs.split(",");//uuid-code-status
|
||
for (var i = 0; i < arr.length; i++) {
|
||
var lineNum = idMap.get(arr[i].split("-")[0]);//防区线数量
|
||
var status = arr[i].split("-")[2];//防区状态
|
||
var lineColor = status == 5 ? "#FF3636" : "#23ee63";
|
||
if(arr[i].split("-")[1] == 2){
|
||
//第七房区
|
||
for (var k = 5; k <= 8; k++) {
|
||
changColor("a_"+arr[i].split("-")[0] +"_"+ k,lineColor);
|
||
}
|
||
}else{
|
||
//1-6防区
|
||
for (var k = 1; k <= lineNum; k++) {
|
||
changColor("a_"+arr[i].split("-")[0] +"_"+ k,lineColor);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//修改防区线颜色
|
||
function changColor(code,lineColor){
|
||
var svg = Snap(`#${code}`);
|
||
svg.attr({
|
||
stroke: lineColor,
|
||
});
|
||
}
|
||
|
||
function deviceNum() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electronicMap/deviceCount',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
let deviceCount = res.obj.deviceCount;
|
||
var Monitoring = parseInt(deviceCount[0].camera)-(parseInt(deviceCount[0].camera1) + parseInt(deviceCount[0].camera2) + parseInt(deviceCount[0].camera3) + parseInt(deviceCount[0].camera4));
|
||
$('#map').find('#svg_795').text(parseInt(deviceCount[0].camera1));
|
||
$('#map').find('#svg_793').text(parseInt(deviceCount[0].camera2));
|
||
$('#map').find('#svg_800').text(parseInt(deviceCount[0].camera3));
|
||
$('#map').find('#svg_803').text(Monitoring);
|
||
$('#map').find('#svg_783').text(parseInt(deviceCount[0].camera4));
|
||
$('#map').find('#svg_801').text(parseInt(deviceCount[1].stand));
|
||
$('#map').find('#svg_796').text(parseInt(deviceCount[2].switch));
|
||
|
||
$('#map').find('#svg_804').text(parseInt(deviceCount[3].firefight-deviceCount[5].firefight3-deviceCount[4].firefight1)); //监控消防栓
|
||
$('#map').find('#svg_802').text(parseInt(deviceCount[5].firefight3)); //3号消防栓
|
||
$('#map').find('#svg_792').text(parseInt(deviceCount[4].firefight1)); //1号消防栓
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 点击首页视频监控的div跳转视频页面
|
||
*/
|
||
var puid = "";
|
||
var videoBtn = document.getElementById('video1')
|
||
videoBtn.addEventListener('click', function() {
|
||
localStorage.setItem("video_puid",puid);
|
||
window.parent.jumpVideo();
|
||
});
|
||
|
||
/**
|
||
* 随机获取一个在线视频播放
|
||
*/
|
||
function getRandomVideo(){
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + "index/getRandomVideo",
|
||
data: "",
|
||
dataType: 'json',
|
||
// async:false,
|
||
success: function(res) {
|
||
if(res.resMsg = "数据获取成功"){
|
||
puid = res.obj.puid;
|
||
var btn = document.getElementById('videoBtn')
|
||
btn.addEventListener('click', function() {
|
||
qxPlayVideo(puid,"0");
|
||
});
|
||
document.getElementById('videoBtn').click();
|
||
|
||
}else{
|
||
layer.msg("当前没有在线球机",{icon:0,time:2000});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 播放视频
|
||
* @param puId
|
||
* @param idx
|
||
*/
|
||
function qxPlayVideo(puId, idx) {
|
||
setTimeout(function(){
|
||
readyPlay(puId, idx);
|
||
},500);
|
||
}
|
||
var myPlayer = null;
|
||
//开始播放视频
|
||
function readyPlay(puId, idx){
|
||
//若是清晰平台，删除连接对象
|
||
// mySet.delete(selectedScreen);
|
||
let url = _cf_1.q2http_url + "stream.flv?puid=" + puId + "&idx=0&stream=0&token=" + token1;
|
||
//循环视频播放列表
|
||
try{
|
||
if (myPlayer != null) {
|
||
myPlayer.pause();
|
||
myPlayer.unload();
|
||
myPlayer.detachMediaElement();
|
||
myPlayer.destroy();
|
||
myPlayer = null;
|
||
}
|
||
myPlayer = flvjs.createPlayer({
|
||
type: 'flv',
|
||
url: url,
|
||
isLive: true,
|
||
hasAudio: false
|
||
}, {
|
||
enableWorker: false,
|
||
autoCleanupSourceBuffer: true, //清理缓冲区
|
||
enableStashBuffer: false,
|
||
stashInitialSize: 128, // 减少首桢显示等待时长
|
||
statisticsInfoReportInterval: 600
|
||
});
|
||
|
||
myPlayer.attachMediaElement(document.getElementById('video1'));
|
||
myPlayer.load();
|
||
setTimeout(function () {
|
||
myPlayer.play();
|
||
}, 200);
|
||
}catch(e){
|
||
alert("该视频不在线。。。");
|
||
}
|
||
var selectedScreen = 'video1';
|
||
$('#video'+selectedScreen+'_html5_api').css("width", "100%");
|
||
$('#video'+selectedScreen+'_html5_api').css("height", "100%");
|
||
$('#video1').css("width", "85%");
|
||
$('#video1').css("height", "100%");
|
||
$('#video1').css("margin-left", "7%");
|
||
$('#video1').css("margin-top", "2%");
|
||
$('#video'+selectedScreen+'_html5_api').css("background-color","black");
|
||
$('.vjs-text-track-display').hide();
|
||
$('.vjs-loading-spinner').hide();
|
||
$('.vjs-big-play-button').hide();
|
||
$('.vjs-control-bar').hide();
|
||
$('.vjs-error-display').hide();
|
||
$('.vjs-error-display').hide();
|
||
$('.vjs-modal-dialog').hide();
|
||
$('.vjs-poster').removeAttr("class");
|
||
$('.video'+selectedScreen+'-dimensions').css("width", "100%");
|
||
$('.video'+selectedScreen+'-dimensions').css("height", "100%");
|
||
}
|
||
window.onbeforeunload = function(e) {
|
||
myPlayer.pause();
|
||
myPlayer.unload();
|
||
myPlayer.detachMediaElement();
|
||
myPlayer.destroy();
|
||
myPlayer = null;
|
||
}
|
||
/**
|
||
*
|
||
* @param {*} player 播放控件对象
|
||
* @param {*} index playBallList 下标，第几个
|
||
* @param {*} type 类型 1切换窗口关闭视频，2主动关闭视频
|
||
*/
|
||
function stopVideo(player,index,type) {
|
||
if(type == 1){
|
||
player.unload();
|
||
player.detachMediaElement();
|
||
player.destroy();
|
||
player = null;
|
||
playBallList.splice(index, 1);
|
||
}else{
|
||
$.each(playBallList, function (index, item) {
|
||
if (!isEmpty(item)) {
|
||
if (selectedScreen === item.selectedScreen) {
|
||
let start = item.start;
|
||
let player = item.myPlayer;
|
||
if(start && player !== null){
|
||
player.unload();
|
||
player.detachMediaElement();
|
||
player.destroy();
|
||
player = null;
|
||
playBallList.splice(index, 1);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 获取接口状态数量
|
||
*/
|
||
function interfaceStatus() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/interfaceStatus',
|
||
data: {
|
||
type: ""
|
||
},
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
let interface = res.obj.electricityBean;
|
||
document.getElementById('requestNum').innerText = parseInt(interface.requestNum);
|
||
document.getElementById('successNum').innerText = parseInt(interface.successNum);
|
||
document.getElementById('errorNum').innerText = parseInt(interface.errorNum);
|
||
}
|
||
});
|
||
}
|
||
|
||
function getPortStatusNum() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
async: false, // 默认异步true,false表示同步
|
||
url: dataUrl + 'index/getPortStatusNum', // 请求地址
|
||
dataType: 'json', // 服务器返回数据类型
|
||
data: {}, //获取提交的表单字段
|
||
success: function(data) {
|
||
var resMsg = data.resMsg;
|
||
if ("数据获取成功" == resMsg) {
|
||
// let portInfo = data.obj.portStatusBean;
|
||
let fireBeanInfo = data.obj.fireBean;
|
||
let safeBeanInfo = data.obj.safeBean;
|
||
// document.getElementById('requestNum').innerText = portInfo.requestNum;
|
||
// document.getElementById('successNum').innerText = portInfo.successNum;
|
||
// document.getElementById('errorNum').innerText = portInfo.errorNum;
|
||
|
||
document.getElementById('fire_totalNum').innerText = parseInt(fireBeanInfo.warnNum);
|
||
document.getElementById('fire_warnNum').innerText = parseInt(fireBeanInfo.totalNum)
|
||
|
||
document.getElementById('safe_totalNum').innerText = parseInt(safeBeanInfo.totalNum);
|
||
document.getElementById('safe_warnNum').innerText = parseInt(safeBeanInfo.warnNum)
|
||
|
||
setTimeout(function () {
|
||
//用电统计
|
||
powerStatChart(data.obj);
|
||
//设备信息表格
|
||
deviceInfoList(data.obj);
|
||
//每月预警
|
||
earlyWarnChart(data.obj);
|
||
|
||
wisdomList(data.obj);
|
||
|
||
},200)
|
||
|
||
}
|
||
},
|
||
error: function(XMLHttpRequest, textStatus, e) {
|
||
// layer.close(loadingMsg);
|
||
layer.msg('数据请求发生异常,请稍后重试', {
|
||
icon: 16,
|
||
scrollbar: false
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
//用电统计获取数据
|
||
// function powerStatChartData() {
|
||
// // $.ajax({
|
||
// // type: 'POST',
|
||
// // url: dataUrl + "index/getElectricityConsumption",
|
||
// // data: "",
|
||
// // dataType: 'json',
|
||
// // // async:false,
|
||
// // success: function(res) {
|
||
// // powerStatChart(res.obj);
|
||
// // },
|
||
// // });
|
||
// // }
|
||
//用电统计ECharts
|
||
function powerStatChart(data) {
|
||
echarts.init(document.getElementById('chart')).dispose(); // 销毁实例
|
||
const myChart = echarts.init(document.getElementById('chart'));
|
||
|
||
const powerList = data.electricityList.map(function (date, index) {
|
||
return {date: date, value: data.electricityConsumptionList[index]};
|
||
}).sort(function (a, b) {
|
||
// 将日期转换为时间戳进行比较
|
||
const dateE = new Date("20" + a.date.replace("-", "/")).getTime();
|
||
const dateF = new Date("20" + b.date.replace("-", "/")).getTime();
|
||
return dateE - dateF;
|
||
});
|
||
let month = powerList.map(function(pair) {
|
||
return pair.date;
|
||
});
|
||
|
||
let value = powerList.map(function(pair) {
|
||
return pair.value;
|
||
});
|
||
console.log(month)
|
||
console.log(value)
|
||
let color = ['#CC1CAA', '#8D67FF', '#00FFFF', '#48DE13', '#FFC516', '#DC3E14', '#8E16F8'];
|
||
dom = 800;
|
||
barWidth = dom / 60;
|
||
let colors = []
|
||
for (let i = 0; i < 12; i++) {
|
||
colors.push({
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(19,130,188,0.8)' // 最左边
|
||
}, {
|
||
offset: 0.5,
|
||
color: 'rgba(19,130,188,0.8)' // 左边的右边 颜色
|
||
}, {
|
||
offset: 0.5,
|
||
color: 'rgba(23,208,249,0.8)' // 右边的左边 颜色
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(23,208,249,0.8)'
|
||
}]
|
||
})
|
||
}
|
||
option = {
|
||
//提示框
|
||
title:{
|
||
left: '80%',
|
||
top: '-6%',
|
||
subtext: '用电统计:kw/h',
|
||
subtextStyle: {
|
||
fontSize: 12,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: "{b} : {c}",
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
/**区域位置*/
|
||
grid: {
|
||
left: '6%',
|
||
right: '0',
|
||
top: '10%',
|
||
bottom: '15%',
|
||
},
|
||
//X轴
|
||
xAxis: {
|
||
data: month,
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.6)',
|
||
shadowColor: 'rgba(255,255,255,0.6)',
|
||
shadowOffsetX: '20',
|
||
},
|
||
symbol: ['none', 'arrow'],
|
||
symbolOffset: [0, 25]
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
fontSize: 10,
|
||
rotate: 45,
|
||
},
|
||
},
|
||
yAxis: {
|
||
show: true,
|
||
splitNumber: 4,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#075858'
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255,255,255,0.6)',
|
||
margin: 10,
|
||
fontSize: 12,
|
||
inside: true,
|
||
margin: -26
|
||
},
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
barWidth: barWidth,
|
||
itemStyle: {
|
||
normal: {
|
||
color: function(params) {
|
||
return colors[params.dataIndex % 7];
|
||
}
|
||
}
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: [barWidth / 2, -(barWidth + 20)],
|
||
color: '#ffffff',
|
||
fontSize: 12,
|
||
fontStyle: 'bold',
|
||
align: 'center',
|
||
},
|
||
data: value
|
||
},
|
||
{
|
||
z: 2,
|
||
type: 'pictorialBar',
|
||
data: value,
|
||
symbol: 'diamond',
|
||
symbolOffset: [0, '50%'],
|
||
symbolSize: [barWidth, barWidth * 0.5],
|
||
itemStyle: {
|
||
normal: {
|
||
color: function(params) {
|
||
return colors[params.dataIndex % 7];
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
type: 'pictorialBar',
|
||
symbolPosition: 'end',
|
||
data: value,
|
||
symbol: 'diamond',
|
||
symbolOffset: [0, '-50%'],
|
||
symbolSize: [barWidth, barWidth * 0.5],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 0,
|
||
color: function(params) {
|
||
return colors[params.dataIndex % 7].colorStops[0].color;
|
||
},
|
||
|
||
}
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
//设备信息表格
|
||
function deviceInfoData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + "index/getEquipInfo",
|
||
data: "",
|
||
dataType: 'json',
|
||
// async:false,
|
||
success: function(res) {
|
||
deviceInfoList(res.obj);
|
||
},
|
||
});
|
||
}
|
||
|
||
function deviceInfoList(data) {
|
||
let equipNum = 6;
|
||
if(data.equipList.length < equipNum){
|
||
equipNum = data.equipList.length;
|
||
}
|
||
var html = ""
|
||
for (var i = 0; i < equipNum; i++) {
|
||
html += "<div style='font-size: 16px;font-weight: 600'>"
|
||
html += "<span title="+data.equipList[i].equipName+">" + (data.equipList[i].equipName.length > 10 ? data.equipList[i].equipName.substring(0,10) + ".." : data.equipList[i].equipName) + "</span>"
|
||
html += "<span>" + data.equipList[i].equipType+ "</span>"
|
||
html += "<span>" + data.equipList[i].equipAddress + "</span>"
|
||
html += "</div>"
|
||
}
|
||
$(".wisdom>.table").append(html)
|
||
}
|
||
|
||
//每月预警获取数据
|
||
function earlyWarnChartData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + "index/getMonthlyEarlyWarning",
|
||
data: "",
|
||
dataType: 'json',
|
||
// async:false,
|
||
success: function(res) {
|
||
earlyWarnChart(res.obj);
|
||
},
|
||
});
|
||
}
|
||
//每周月预警ECharts
|
||
function earlyWarnChart(data) {
|
||
echarts.init(document.getElementById('earlyWarnContent')).dispose(); // 销毁实例
|
||
var myChart = echarts.init(document.getElementById('earlyWarnContent'));
|
||
|
||
// 将 monthList 和 securityList 配对，并根据日期排序
|
||
var pairList = data.monthList.map(function(date, index) {
|
||
return { date: date, value: data.securityList[index] };
|
||
}).sort(function(a, b) {
|
||
// 将日期转换为时间戳进行比较
|
||
var dateA = new Date("20" + a.date.replace("-", "/")).getTime();
|
||
var dateB = new Date("20" + b.date.replace("-", "/")).getTime();
|
||
return dateA - dateB;
|
||
});
|
||
var pairFileList = data.monthFireList.map(function(date, index) {
|
||
return { date: date, value: data.finalFireList[index] };
|
||
}).sort(function(a, b) {
|
||
// 将日期转换为时间戳进行比较
|
||
var dateC = new Date("20" + a.date.replace("-", "/")).getTime();
|
||
var dateD = new Date("20" + b.date.replace("-", "/")).getTime();
|
||
return dateC - dateD;
|
||
});
|
||
var months = pairList.map(function(pair) {
|
||
return pair.date;
|
||
});
|
||
|
||
var values2 = pairList.map(function(pair) {
|
||
return pair.value;
|
||
});
|
||
|
||
var values1 = pairFileList.map(function(pair) {
|
||
return pair.value;
|
||
});
|
||
option = {
|
||
grid: {
|
||
left: '0',
|
||
right: '2%',
|
||
top: '15%',
|
||
bottom: '0%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
show: true,
|
||
x: '75%',
|
||
y: '0%',
|
||
icon: 'circle',
|
||
textStyle: {
|
||
color: '#ffffff'
|
||
},
|
||
data: ['火灾', '安防']
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
color: '#ffffff'
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
data: months
|
||
}],
|
||
yAxis: [{
|
||
show: true,
|
||
splitNumber: 4,
|
||
// axisLabel: {
|
||
// color: '#ffffff',
|
||
// },
|
||
axisLabel: {
|
||
color: 'rgba(255,255,255,0.6)',
|
||
margin: 10,
|
||
fontSize: 12,
|
||
},
|
||
axisLine: {
|
||
|
||
lineStyle: {
|
||
color: '#27b4c2'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#075858'
|
||
},
|
||
},
|
||
},
|
||
|
||
],
|
||
series: [
|
||
{
|
||
name: '火灾',
|
||
type: 'line',
|
||
stack: '总量',
|
||
symbol: 'circle',
|
||
symbolSize: 12,
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#FFE369',
|
||
lineStyle: {
|
||
color: "#FFE369",
|
||
width: 2
|
||
},
|
||
}
|
||
},
|
||
data: values1
|
||
},
|
||
{
|
||
name: '安防',
|
||
type: 'line',
|
||
stack: '总量',
|
||
symbol: 'circle',
|
||
symbolSize: 12,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#1892FF',
|
||
lineStyle: {
|
||
color: "#1892FF",
|
||
width: 2
|
||
},
|
||
}
|
||
},
|
||
data: values2
|
||
},
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function wisdomList(data) {
|
||
$(".barrierGate>.table").empty();
|
||
var html = ""
|
||
html += "<div class='tableList' style='font-size: 16px;font-weight: 600'> "
|
||
html += "<span>人员/车辆</span>"
|
||
html += "<span>时间</span>"
|
||
html += "<span>进出方向</span>"
|
||
html += "</div>"
|
||
for (let i = 0; i < 3; i++) {
|
||
html += "<div style='font-size: 16px;font-weight: 600'>"
|
||
html += `<span>${data.enterExitList[i].anyIndex}</span>`
|
||
html +=`<span>${data.enterExitList[i].entryExitTime}</span>`
|
||
html += `<span>${data.enterExitList[i].type}</span>`
|
||
html += "</div>"
|
||
}
|
||
$(".barrierGate>.table").append(html)
|
||
}
|
||
|
||
|
||
//接口状态点击
|
||
function interfaceStateClick() {
|
||
var index = layer.open({
|
||
title: ['接口状态', 'color: #fff'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/index/child/interfaceState.html',
|
||
area: ["70%", "90%"],
|
||
maxmin: false
|
||
/*btn: ['确定', '关闭'],
|
||
success: function (layero, index) {
|
||
// localStorage.setItem("subName",params.name);
|
||
//var myIframe = window[layero.find('iframe')[0]['name']];
|
||
//var fnc = myIframe.setData(params.name); //aaa()为子页面的方法
|
||
},
|
||
yes: function (index, layero) {
|
||
// 获取弹出层中的form表单元素
|
||
// var formSubmit = layer.getChildFrame('form', index);
|
||
// var submited = formSubmit.find('button')[0];
|
||
// // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
|
||
// submited.click();
|
||
},*/
|
||
});
|
||
}
|
||
|
||
//道闸管理
|
||
function gateManagementDataClick(){
|
||
var index = layer.open({
|
||
title: ['道闸管理','color: #fff'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/index/child/gateManagementDataList.html',
|
||
area: ["70%", "97%"],
|
||
maxmin: false,
|
||
});
|
||
}
|
||
|
||
// 空气质量检测
|
||
function echartsInstrumentPanel() {
|
||
echarts.init(document.getElementById('instrumentPanel')).dispose(); // 销毁实例
|
||
const myChart = echarts.init(document.getElementById('instrumentPanel'));
|
||
const dataArr = 61;
|
||
const dataX = 200;
|
||
const height1 = { value: 800 };
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
/** 标题*/
|
||
title: [
|
||
{
|
||
text: '{val|' + 61 + '}',
|
||
bottom: '12%',
|
||
left: 'center',
|
||
textStyle: {
|
||
rich: {
|
||
val: {
|
||
fontSize: 24,
|
||
color: '#E5E5E5',
|
||
padding: [10, 0],
|
||
}
|
||
},
|
||
},
|
||
triggerEvent: true,
|
||
},
|
||
],
|
||
|
||
/** 关闭必图例*/
|
||
legend: {
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
name: '最外部进度条',
|
||
type: 'gauge',
|
||
radius: '95%',
|
||
// splitNumber: 15,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[
|
||
1,
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 1,
|
||
x2: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#032347', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#0B8BAA', // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#03FCF3', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
],
|
||
],
|
||
width: 10,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
length: 20,
|
||
lineStyle: {
|
||
color: '#031f45',
|
||
width: 2,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
// 标题
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
name: 'title',
|
||
value: dataArr,
|
||
},
|
||
],
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
animationDuration: 4000,
|
||
},
|
||
{
|
||
name: '外二红线',
|
||
type: 'gauge',
|
||
radius: '88%',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[dataArr / dataX, '#031f45'],
|
||
[1, '#B74443'],
|
||
],
|
||
width: 3,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
// 标题
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
name: 'title',
|
||
value: dataArr,
|
||
},
|
||
],
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
animationDuration: 4000,
|
||
},
|
||
{
|
||
name: '刻度尺',
|
||
type: 'gauge',
|
||
radius: '85%',
|
||
splitNumber: 10, // 刻度数量
|
||
min: 0, // 最小刻度
|
||
max: dataX, // 最大刻度
|
||
// 仪表盘轴线相关配置
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[
|
||
1,
|
||
{
|
||
type: 'radial',
|
||
x: 0.5,
|
||
y: 0.6,
|
||
r: 0.6,
|
||
colorStops: [
|
||
{
|
||
offset: 0.85,
|
||
color: '#031F46', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.93,
|
||
color: '#086989', // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#12D7EF', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
],
|
||
],
|
||
width: 10,
|
||
},
|
||
},
|
||
/** 分隔线样式*/
|
||
splitLine: {
|
||
show: true,
|
||
length: 12,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#12E5FE', // 用颜色渐变函数不起作用
|
||
},
|
||
},
|
||
/** 刻度线*/
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 10,
|
||
lineStyle: {
|
||
color: '#12E5FE', // 用颜色渐变函数不起作用
|
||
width: 1,
|
||
},
|
||
length: 5,
|
||
},
|
||
/** 刻度标签*/
|
||
axisLabel: {
|
||
distance: 2,
|
||
color: '#CEF3FE',
|
||
fontSize: 10,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
animationDuration: 4000,
|
||
},
|
||
{
|
||
name: '渐变进度',
|
||
type: 'gauge',
|
||
radius: '70%',
|
||
splitNumber: 15,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[
|
||
dataArr / dataX,
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 1,
|
||
x2: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(60,207,223,0)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.9,
|
||
color: 'rgba(60,207,223,0.5)', // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(60,207,223,0.9)', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
],
|
||
],
|
||
width: 20,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
// 标题
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
name: 'title',
|
||
value: dataArr,
|
||
},
|
||
],
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
animationDuration: 4000,
|
||
},
|
||
{
|
||
name: '内层带指针',
|
||
type: 'gauge',
|
||
radius: '35%',
|
||
splitNumber: 10, // 刻度数量
|
||
min: 0, // 最小刻度
|
||
max: dataX, // 最大刻度
|
||
// 仪表盘轴线相关配置
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[
|
||
1,
|
||
{
|
||
type: 'radial',
|
||
x: 0.5,
|
||
y: 0.59,
|
||
r: 0.6,
|
||
colorStops: [
|
||
{
|
||
offset: 0.72,
|
||
color: '#032046',
|
||
},
|
||
{
|
||
offset: 0.94,
|
||
color: '#086989',
|
||
},
|
||
{
|
||
offset: 0.98,
|
||
color: '#0FAFCB',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0EA4C1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
],
|
||
width: 50,
|
||
},
|
||
},
|
||
/** 分隔线样式*/
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
/** 刻度线*/
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
/** 刻度标签*/
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
/** 仪表盘指针*/
|
||
pointer: {
|
||
show: true,
|
||
length: '95%',
|
||
width: 2, // 指针粗细
|
||
},
|
||
/** 仪表盘指针样式*/
|
||
itemStyle: {
|
||
color: '#12E5FF',
|
||
},
|
||
data: [
|
||
{
|
||
value: dataArr,
|
||
},
|
||
],
|
||
detail: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
graphic: {
|
||
elements: [
|
||
],
|
||
},
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
|
||
}
|
||
//处理环境检测格式问题
|
||
function ProcessFormat(data){
|
||
let teamFormat =[];
|
||
teamFormat.push(data.temps)
|
||
teamFormat.push(data.humidty)
|
||
teamFormat.push(data.pm10)
|
||
teamFormat.push(data.pm25)
|
||
teamFormat.push(data.noise)
|
||
return teamFormat;
|
||
}
|
||
function environmentalMonitoring(data) {
|
||
let salvProValue = [];
|
||
//从后台动态获取数据
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'index/getSensorInfo',
|
||
data: {"type":data},
|
||
async:false,
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
// 使用find方法找到第一个非空对象
|
||
const validData = res.obj.find(item => item && typeof item === 'object');
|
||
if(validData) {
|
||
salvProValue = ProcessFormat(validData);
|
||
}
|
||
|
||
}
|
||
});
|
||
switch (data) {
|
||
case 1:
|
||
//salvProValue = [50, 40, 0.5, 0.3, 25, 30];
|
||
echartsEnvironmentalMonitor(salvProValue);
|
||
break;
|
||
case 2:
|
||
//salvProValue = [45, 35, 0.4, 0.25, 20, 25];
|
||
echartsEnvironmentalMonitor(salvProValue);
|
||
break;
|
||
case 3:
|
||
//salvProValue = [40, 30, 0.35, 0.2, 18, 22];
|
||
echartsEnvironmentalMonitor(salvProValue);
|
||
break;
|
||
case 4:
|
||
//salvProValue = [35, 25, 0.3, 0.15, 15, 20];
|
||
echartsEnvironmentalMonitor(salvProValue);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
function echartsEnvironmentalMonitor(salvProValue) {
|
||
echarts.init(document.getElementById('environmentalMonitor')).dispose(); // 销毁实例
|
||
const myChart = echarts.init(document.getElementById('environmentalMonitor'));
|
||
const salvProName = ["湿度", "温度", "PM10", "PM20", "噪音"];
|
||
const salvProMax = [];//背景按最大值
|
||
for (let i = 0; i < salvProValue.length; i++) {
|
||
salvProMax.push(salvProValue[0])
|
||
}
|
||
let option = {
|
||
backgroundColor: "transparent",
|
||
grid: {
|
||
left: '2%',
|
||
right: '2%',
|
||
bottom: '0',
|
||
top: '2%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'none'
|
||
},
|
||
formatter: function (params) {
|
||
return params[0].name + ' : ' + params[0].value
|
||
}
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value'
|
||
},
|
||
yAxis: [{
|
||
type: 'category',
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#34a0b4'
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
data: salvProName
|
||
}, {
|
||
type: 'category',
|
||
inverse: true,
|
||
axisTick: 'none',
|
||
axisLine: 'none',
|
||
show: true,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: '10'
|
||
},
|
||
},
|
||
data: salvProValue
|
||
}],
|
||
series: [{
|
||
name: '值',
|
||
type: 'bar',
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 30,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||
offset: 0,
|
||
color: '#3df0f1'
|
||
}, {
|
||
offset: 1,
|
||
color: '#67b1f5'
|
||
}]),
|
||
},
|
||
},
|
||
barWidth: 10,
|
||
data: salvProValue
|
||
},
|
||
{
|
||
name: '背景',
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
barGap: '-100%',
|
||
data: salvProMax,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#1a3236',
|
||
barBorderRadius: 30,
|
||
}
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
} |