734 lines
21 KiB
JavaScript
734 lines
21 KiB
JavaScript
|
$(function () {
|
||
|
|
//获取人员概况数据,进出场数据
|
||
|
|
getBasicData();
|
||
|
|
|
||
|
|
//接口数量
|
||
|
|
interfaceStatus();
|
||
|
|
})
|
||
|
|
|
||
|
|
layui.use(function () {
|
||
|
|
var layer = layui.layer;
|
||
|
|
var util = layui.util;
|
||
|
|
util.on('lay-on', {
|
||
|
|
'test-skin-btn1': function () {
|
||
|
|
openVideo(1, "车辆道闸进口");
|
||
|
|
// layer.alert('请确认是否开启车辆道闸进口?', {
|
||
|
|
// skin: 'layui-layer-molv' // 样式类名
|
||
|
|
// }, function () {
|
||
|
|
// openAlarm(1);
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
'test-skin-btn2': function () {
|
||
|
|
openVideo(2, "车辆道闸出口");
|
||
|
|
// layer.alert('请确认是否开启车辆道闸出口?', {
|
||
|
|
// skin: 'layui-layer-molv' // 样式类名
|
||
|
|
// }, function () {
|
||
|
|
// openAlarm(2);
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
'test-skin-btn3': function () {
|
||
|
|
openVideo(3, "人员道闸进口");
|
||
|
|
// layer.alert('请确认是否开启人员道闸进口?', {
|
||
|
|
// skin: 'layui-layer-molv' // 样式类名
|
||
|
|
// }, function () {
|
||
|
|
// openAlarm(3);
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
'test-skin-btn4': function () {
|
||
|
|
openVideo(4, "人员道闸出口");
|
||
|
|
// layer.alert('请确认是否开启人员道闸出口?', {
|
||
|
|
// skin: 'layui-layer-molv' // 样式类名
|
||
|
|
// }, function () {
|
||
|
|
// openAlarm(4);
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
function openVideo(type, name) {
|
||
|
|
localStorage.setItem("alarmType", type);
|
||
|
|
var index = layer.open({
|
||
|
|
title: [name + '视频', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
|
|
type: 2,
|
||
|
|
closeBtn: 2,
|
||
|
|
content: "./alarmVideo.html",
|
||
|
|
area: ["1169px", "780px"],
|
||
|
|
maxmin: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getBasicData() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
async: false, // 默认异步true,false表示同步
|
||
|
|
url: dataUrl + 'index/getBarrierData', // 请求地址
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
data: {}, //获取提交的表单字段
|
||
|
|
success: function (data) {
|
||
|
|
var resMsg = data.resMsg;
|
||
|
|
if ("数据获取成功" == resMsg) {
|
||
|
|
let personNum = data.obj.allPersonNumbers;
|
||
|
|
let alarmBean = data.obj.alarmBean;
|
||
|
|
|
||
|
|
document.getElementById('personNum').innerText = parseInt(personNum);
|
||
|
|
document.getElementById('personEnterExitNum').innerText = parseInt(alarmBean.personEnterExitNum);
|
||
|
|
document.getElementById('personEnterNum').innerText = `(出入：${parseInt(alarmBean.personExitNum)}/${parseInt(alarmBean.personEnterNum)})`;
|
||
|
|
document.getElementById('carNum').innerText = ("NaN" === parseInt(data.obj.carNum) ? 0 : parseInt(data.obj.carNum));
|
||
|
|
document.getElementById('carEnterExitNum').innerText = parseInt(alarmBean.carEnterExitNum);
|
||
|
|
document.getElementById('carEnterNum').innerText = `(出入：${parseInt(alarmBean.carExitNum)}/${parseInt(alarmBean.carEnterNum)})`;
|
||
|
|
|
||
|
|
document.getElementById('counts').innerText = data.obj.currentCounts;
|
||
|
|
document.getElementById('month').innerText = data.obj.monthNum;
|
||
|
|
document.getElementById('currentCounts').innerText = data.obj.counts;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
setEnterExitChart(alarmBean);
|
||
|
|
setCarEnterExitChart(alarmBean);
|
||
|
|
setPersonChart(data.obj);
|
||
|
|
setCarChart(data.obj);
|
||
|
|
deviceWarnList(data.obj);
|
||
|
|
}, 200)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (XMLHttpRequest, textStatus, e) {
|
||
|
|
// layer.close(loadingMsg);
|
||
|
|
layer.msg('数据请求发生异常,请稍后重试', {
|
||
|
|
icon: 16,
|
||
|
|
scrollbar: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function deviceWarnList(data) {
|
||
|
|
var html = ""
|
||
|
|
for (var i = 0; i < 6; i++) {
|
||
|
|
html += "<div style='font-size: 12px'>"
|
||
|
|
html += "<span style='width: 100px'>" + (i + 1) + "</span>"
|
||
|
|
html += "<span>" + data.alarmList[i].deviceName + "</span>"
|
||
|
|
html += "<span>" + data.alarmList[i].alarmContent + "</span>"
|
||
|
|
html += "<span>" + data.alarmList[i].currentDay + "</span>"
|
||
|
|
html += "</div>"
|
||
|
|
}
|
||
|
|
$(".deviceWarn>.table").append(html)
|
||
|
|
}
|
||
|
|
|
||
|
|
function setPersonChart(obj) {
|
||
|
|
const dayList = obj.fiveDay;
|
||
|
|
const personData = obj.personList.map(num => parseInt(num));
|
||
|
|
//场内总人数
|
||
|
|
var myChart = echarts.init(document.getElementById('chart'));
|
||
|
|
option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
right: '4%',
|
||
|
|
left: '13%',
|
||
|
|
bottom: '10%'
|
||
|
|
},
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
data: dayList,
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#FFFFFF'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
margin: 10,
|
||
|
|
color: '#e2e9ff',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 10
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
xAxis: [{
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}',
|
||
|
|
color: '#e2e9ff',
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(0,186,255,.6)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,0.12)',
|
||
|
|
type: 'dashed'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
type: 'bar',
|
||
|
|
data: personData,
|
||
|
|
barWidth: '15px',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(0,244,255,1)' // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(0,77,167,1)' // 100% 处的颜色
|
||
|
|
}], false),
|
||
|
|
shadowColor: 'rgba(0,160,221,1)',
|
||
|
|
shadowBlur: 4,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
lineHeight: 50,
|
||
|
|
formatter: '{c}',
|
||
|
|
position: 'right',
|
||
|
|
textStyle: {
|
||
|
|
color: '#00D6F9',
|
||
|
|
fontSize: 15
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
let sumValue = 0;
|
||
|
|
|
||
|
|
//日均时间段出入人次
|
||
|
|
function setEnterExitChart(alarmBean) {
|
||
|
|
let series = [];
|
||
|
|
let pieDatas = [
|
||
|
|
{
|
||
|
|
"value": parseInt(alarmBean.personZeroNum),
|
||
|
|
"name": "00:00-08:00"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"value": parseInt(alarmBean.personTwentyNum),
|
||
|
|
"name": "20:00-24:00"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"value": parseInt(alarmBean.personEighteenNum),
|
||
|
|
"name": "18:00-20:00"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"value": parseInt(alarmBean.personEightNum),
|
||
|
|
"name": "08:00-12:00"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"value": parseInt(alarmBean.personTwelveNum),
|
||
|
|
"name": "12:00-18:00"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
let maxRadius = 90,
|
||
|
|
barWidth = 5,
|
||
|
|
barGap = 5;
|
||
|
|
let showValue = true, showPercent = true;
|
||
|
|
pieDatas.map(item => {
|
||
|
|
sumValue += item.value;
|
||
|
|
})
|
||
|
|
let barColor = [
|
||
|
|
{
|
||
|
|
"color1": "#00dec8",
|
||
|
|
"color2": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"color1": "#f9da4f",
|
||
|
|
"color2": ""
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"color1": "#ff6460",
|
||
|
|
"color2": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"color1": "#7d5afb",
|
||
|
|
"color2": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"color1": "#3145ff",
|
||
|
|
"color2": ""
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
let legendOption = {
|
||
|
|
top: "center",
|
||
|
|
orient: 'vertical',
|
||
|
|
icon: "circle",
|
||
|
|
itemWidth: 12,
|
||
|
|
itemGap: 13,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: "#e1dddd",
|
||
|
|
padding: [5, 0, 0, 0],
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
color: "#e1dddd",
|
||
|
|
padding: [10, 5, 30, 5]
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
color: '#18DB9F',
|
||
|
|
fontSize: 18,
|
||
|
|
padding: [0, 5, 0, 5]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
pieDatas.map((item, i) => {
|
||
|
|
series.push({
|
||
|
|
type: 'pie',
|
||
|
|
clockWise: true, //顺时加载
|
||
|
|
hoverAnimation: false, //鼠标移入变大
|
||
|
|
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
borderWidth: 5,
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
value: item.value,
|
||
|
|
name: item.name,
|
||
|
|
itemStyle: {
|
||
|
|
color: barColor[i] && barColor[i].color1 || 'rgba(68,165,255,1)'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
value: sumValue - item.value,
|
||
|
|
name: '',
|
||
|
|
itemStyle: {
|
||
|
|
color: "transparent",
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
hoverAnimation: false
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
series.push({
|
||
|
|
name: 'blank',
|
||
|
|
type: 'pie',
|
||
|
|
silent: true,
|
||
|
|
z: 0,
|
||
|
|
clockWise: false, //顺时加载
|
||
|
|
hoverAnimation: false, //鼠标移入变大
|
||
|
|
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
borderWidth: 5,
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
value: 1,
|
||
|
|
itemStyle: {
|
||
|
|
color: "rgba(255, 255, 255,.13)",
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
hoverAnimation: false
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
})
|
||
|
|
|
||
|
|
var myCharts = echarts.init(document.getElementById('charts'));
|
||
|
|
options = {
|
||
|
|
grid: {
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
top: 0,
|
||
|
|
bottom: 0,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
trigger: "item",
|
||
|
|
},
|
||
|
|
legend: [{
|
||
|
|
left: 20,
|
||
|
|
data: ['00:00-08:00', '20:00-24:00', '18:00-20:00'],
|
||
|
|
align: 'right',
|
||
|
|
...legendOption
|
||
|
|
|
||
|
|
}, {
|
||
|
|
right: 20,
|
||
|
|
data: ['08:00-12:00', '12:00-18:00'],
|
||
|
|
align: 'left',
|
||
|
|
...legendOption
|
||
|
|
|
||
|
|
}],
|
||
|
|
graphic: [{
|
||
|
|
type: 'text',
|
||
|
|
left: parseInt(sumValue) > 100 ? '46%' : '48%',
|
||
|
|
top: '47%',
|
||
|
|
style: {
|
||
|
|
text: sumValue, // 替换为实际的总值
|
||
|
|
textAlign: 'center',
|
||
|
|
fill: '#fff',
|
||
|
|
fontSize: 24,
|
||
|
|
fontWeight: 'bold'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
series: series,
|
||
|
|
};
|
||
|
|
myCharts.setOption(options);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function setCarChart(obj) {
|
||
|
|
const dayList = obj.fiveDay;
|
||
|
|
const carList = obj.carList.map(num => parseInt(num));
|
||
|
|
//场内车辆数
|
||
|
|
var myNonprofit = echarts.init(document.getElementById('nonprofit'));
|
||
|
|
option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
right: '3%',
|
||
|
|
left: '12%',
|
||
|
|
bottom: '10%'
|
||
|
|
},
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
data: dayList,
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#FFFFFF'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
margin: 10,
|
||
|
|
color: '#e2e9ff',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 10
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
xAxis: [{
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}',
|
||
|
|
color: '#e2e9ff',
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(0,186,255,.6)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,0.12)',
|
||
|
|
type: 'dashed'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
type: 'bar',
|
||
|
|
data: carList,
|
||
|
|
barWidth: '15px',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(0,244,255,1)' // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(0,77,167,1)' // 100% 处的颜色
|
||
|
|
}], false),
|
||
|
|
shadowColor: 'rgba(0,160,221,1)',
|
||
|
|
shadowBlur: 4,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
lineHeight: 50,
|
||
|
|
formatter: '{c}',
|
||
|
|
position: 'right',
|
||
|
|
textStyle: {
|
||
|
|
color: '#00D6F9',
|
||
|
|
fontSize: 15
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
myNonprofit.setOption(option);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function setCarEnterExitChart(alarmBean) {
|
||
|
|
//日均时间段出入车次
|
||
|
|
let newSeriesData = [];
|
||
|
|
let newPieData = [
|
||
|
|
{"value": parseInt(alarmBean.carZeroNum), "name": "00:00-08:00"},
|
||
|
|
{"value": parseInt(alarmBean.carTwentyNum), "name": "20:00-24:00"},
|
||
|
|
{"value": parseInt(alarmBean.carEighteenNum), "name": "18:00-20:00"},
|
||
|
|
{"value": parseInt(alarmBean.carEightNum), "name": "08:00-12:00"},
|
||
|
|
{"value": parseInt(alarmBean.carTwelveNum), "name": "12:00-18:00"}
|
||
|
|
];
|
||
|
|
let newMaxRadius = 90;
|
||
|
|
let newBarWidth = 5;
|
||
|
|
let newBarGap = 5;
|
||
|
|
let newSumValue = 0;
|
||
|
|
let newShowValue = true;
|
||
|
|
let newShowPercent = true;
|
||
|
|
|
||
|
|
newPieData.map(item => {
|
||
|
|
newSumValue += item.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
let newBarColors = [
|
||
|
|
{"color1": "rgba(222, 125, 255, 1)", "color2": ""},
|
||
|
|
{"color1": "rgba(250, 118, 121, 1)", "color2": ""},
|
||
|
|
{"color1": "rgba(53, 198, 215, 1)", "color2": ""},
|
||
|
|
{"color1": "rgba(101, 223, 138, 1)", "color2": ""},
|
||
|
|
{"color1": "rgba(253, 161, 79, 1)", "color2": ""}
|
||
|
|
];
|
||
|
|
|
||
|
|
let newLegendOption = {
|
||
|
|
top: "center",
|
||
|
|
orient: "vertical",
|
||
|
|
icon: "circle",
|
||
|
|
itemWidth: 12,
|
||
|
|
itemGap: 13,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: "#e1dddd",
|
||
|
|
rich: {
|
||
|
|
name: {color: "#333333", padding: [10, 5, 30, 5]},
|
||
|
|
percent: {color: "#18DB9F", fontSize: 18, padding: [0, 5, 0, 5]}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
newPieData.map((item, i) => {
|
||
|
|
newSeriesData.push({
|
||
|
|
type: "pie",
|
||
|
|
clockwise: true,
|
||
|
|
hoverAnimation: false,
|
||
|
|
radius: [
|
||
|
|
(newMaxRadius - i * (newBarGap + newBarWidth)) + "%",
|
||
|
|
(newMaxRadius - (i + 1) * newBarWidth - i * newBarGap) + "%"
|
||
|
|
],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
label: {show: false},
|
||
|
|
itemStyle: {
|
||
|
|
label: {show: false},
|
||
|
|
labelLine: {show: false},
|
||
|
|
borderWidth: 5
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: item.value,
|
||
|
|
name: item.name,
|
||
|
|
itemStyle: {color: newBarColors[i]?.color1 || "rgba(68, 165, 255, 1)"}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: newSumValue - item.value,
|
||
|
|
name: "",
|
||
|
|
itemStyle: {color: "transparent"},
|
||
|
|
tooltip: {show: false},
|
||
|
|
hoverAnimation: false
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
newSeriesData.push({
|
||
|
|
name: "blank",
|
||
|
|
type: "pie",
|
||
|
|
silent: true,
|
||
|
|
z: 0,
|
||
|
|
clockwise: false,
|
||
|
|
hoverAnimation: false,
|
||
|
|
radius: [
|
||
|
|
(newMaxRadius - i * (newBarGap + newBarWidth)) + "%",
|
||
|
|
(newMaxRadius - (i + 1) * newBarWidth - i * newBarGap) + "%"
|
||
|
|
],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
label: {show: false},
|
||
|
|
itemStyle: {
|
||
|
|
label: {show: false},
|
||
|
|
labelLine: {show: false},
|
||
|
|
borderWidth: 5
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 1,
|
||
|
|
itemStyle: {color: "rgba(255, 255, 255, .13)", borderWidth: 0},
|
||
|
|
tooltip: {show: false},
|
||
|
|
hoverAnimation: false
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
var myUptime = echarts.init(document.getElementById("uptime"));
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
grid: {left: 0, right: 0, top: 0, bottom: 0},
|
||
|
|
tooltip: {show: true, trigger: "item"},
|
||
|
|
legend: [
|
||
|
|
{
|
||
|
|
left: 50,
|
||
|
|
data: ['00:00-08:00', '20:00-24:00', '18:00-20:00'],
|
||
|
|
align: "right",
|
||
|
|
...newLegendOption
|
||
|
|
},
|
||
|
|
{
|
||
|
|
right: 50,
|
||
|
|
data: ['08:00-12:00', '12:00-18:00'],
|
||
|
|
align: "left",
|
||
|
|
...newLegendOption
|
||
|
|
}
|
||
|
|
],
|
||
|
|
graphic: [{
|
||
|
|
type: 'text',
|
||
|
|
left: parseInt(newSumValue) > 100 ? '46%' : '48%',
|
||
|
|
top: '47%',
|
||
|
|
style: {
|
||
|
|
text: newSumValue, // 替换为实际的总值
|
||
|
|
textAlign: 'center',
|
||
|
|
fill: '#fff',
|
||
|
|
fontSize: 24,
|
||
|
|
fontWeight: 'bold'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
series: newSeriesData
|
||
|
|
};
|
||
|
|
|
||
|
|
myUptime.setOption(options);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 道闸管理-接口状态数量
|
||
|
|
*/
|
||
|
|
function interfaceStatus() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'electricity/interfaceStatus',
|
||
|
|
data: "type=3",
|
||
|
|
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 interfaceStateClick(){
|
||
|
|
var index = layer.open({
|
||
|
|
title: ['接口状态', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
|
|
type: 2,
|
||
|
|
closeBtn: 2,
|
||
|
|
content: '../../page/management/managementFrom.html',
|
||
|
|
area: ["1169px", "780px"],
|
||
|
|
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 managementClick(){
|
||
|
|
var index = layer.open({
|
||
|
|
title: ['设备告警', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
|
|
type: 2,
|
||
|
|
closeBtn: 2,
|
||
|
|
content: '../../page/management/managementList.html',
|
||
|
|
area: ["70%", "97%"],
|
||
|
|
maxmin: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleClick(param) {
|
||
|
|
var url = '../../page/management/gateSubpage.html';
|
||
|
|
let text
|
||
|
|
switch (param) {
|
||
|
|
case 'content1':
|
||
|
|
url += '?type=content1';
|
||
|
|
text = '人员信息';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'content2':
|
||
|
|
url += '?type=content2';
|
||
|
|
text = '人员出入信息';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'content3':
|
||
|
|
url += '?type=content3';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'other':
|
||
|
|
url += '?type=other';
|
||
|
|
text = '车辆出入信息';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
var index = layer.open({
|
||
|
|
title: [text, 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
|
|
type: 2,
|
||
|
|
closeBtn: 2,
|
||
|
|
content: url,
|
||
|
|
area: ["1169px", "780px"],
|
||
|
|
maxmin: false
|
||
|
|
});
|
||
|
|
}
|