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