771 lines
22 KiB
JavaScript
771 lines
22 KiB
JavaScript
$(function () {
|
||
Interface();
|
||
//告警详情
|
||
// deviceWarnClick();
|
||
})
|
||
|
||
//接口
|
||
function Interface(){
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + "securityPrevent/getFireAlarm",
|
||
data: "",
|
||
dataType: 'json',
|
||
// async:false,
|
||
success: function(res) {
|
||
let data = res.obj;
|
||
document.getElementById('Total').innerText = data.totalDevices;
|
||
document.getElementById('year').innerText = data.fireNum;
|
||
document.getElementById('month').innerText = data.monthNum;
|
||
document.getElementById('Today').innerText = data.todayNum;
|
||
document.getElementById('alarmEquipNum').innerText = data.alarmEquipNum;
|
||
//设备占比
|
||
Proportion(data);
|
||
//近十二个月警告
|
||
deviceWarnData(data);
|
||
//消防数量
|
||
fireNum(data);
|
||
//今日告警表格
|
||
WarningList(data);
|
||
},
|
||
});
|
||
}
|
||
|
||
//设备占比
|
||
function Proportion(data){
|
||
var myChart = echarts.init(document.getElementById('equipment'));
|
||
// 复制代码
|
||
// const chartData = [
|
||
// {
|
||
// value: 38,
|
||
// name: "点型烟感",
|
||
// },
|
||
// {
|
||
// value: 145,
|
||
// name: "消防栓",
|
||
// },
|
||
// {
|
||
// value: 45,
|
||
// name: "火灾显示盘",
|
||
// },
|
||
// {
|
||
// value: 21,
|
||
// name: "消防广播",
|
||
// },
|
||
// {
|
||
// value: 51,
|
||
// name: "讯响器",
|
||
// },
|
||
// {
|
||
// value: 9,
|
||
// name: "其他",
|
||
// },
|
||
// ];
|
||
const chartData = data.equipInfo;
|
||
const colorList = ['#fba75a', '#00d1c8', '#23be72', '#f9da4f', '#7d5afb', '#5aaefb'];
|
||
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||
const gap = (1 * sum) / 100;
|
||
const pieData1 = [];
|
||
const pieData2 = [];
|
||
const gapData = {
|
||
name: "",
|
||
value: gap,
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
};
|
||
|
||
//图标位置显示
|
||
let lefts = ["10%", "10%", "10%", "74%", "74%", "74%"];
|
||
let tops = ["24%", "40%", "58%", "24%", "40%", "58%"];
|
||
let legendData = [];
|
||
let total = 0;
|
||
chartData.forEach((item) => {
|
||
total += item.value;
|
||
});
|
||
|
||
for (let i = 0; i < chartData.length; i++) {
|
||
// 第一圈数据
|
||
pieData1.push({
|
||
...chartData[i],
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
},
|
||
});
|
||
pieData1.push(gapData);
|
||
|
||
// 第二圈数据
|
||
pieData2.push({
|
||
...chartData[i],
|
||
itemStyle: {
|
||
color: colorList[i],
|
||
opacity: 0.21,
|
||
},
|
||
});
|
||
pieData2.push(gapData);
|
||
|
||
// 分散图例
|
||
let bfb = parseInt((chartData[i].value / total) * 100) + "%";
|
||
legendData.push({
|
||
show: true,
|
||
icon: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||
left: lefts[i],
|
||
top: tops[i],
|
||
itemStyle: {
|
||
color: colorList[i],
|
||
},
|
||
formatter:
|
||
`{aa| ` + chartData[i].name + ` }` + `\n\n` + `{bb| ` + bfb + `}`, // 也可以是个函数return
|
||
x: "left",
|
||
textStyle: {
|
||
// color: "#BAFF7F",
|
||
rich: {
|
||
aa: {
|
||
color: "#ffffff",
|
||
fontSize: 16,
|
||
},
|
||
bb: {
|
||
color: colorList[i],
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
},
|
||
data: [chartData[i].name],
|
||
});
|
||
}
|
||
// console.log("pieData2---------", pieData2);
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
title: {
|
||
text: "设备占比",
|
||
left: '5%',
|
||
top: 'top',
|
||
// itemGap:15,
|
||
textStyle: {
|
||
color: "#f5f5f6",
|
||
fontSize: 15,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
|
||
// backgroundColor: "#0F141B",
|
||
tooltip: {
|
||
show: true,
|
||
backgroundColor: "rgba(0, 0, 0,.8)",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
legend: legendData,
|
||
grid: {
|
||
top: 30,
|
||
right: 20,
|
||
bottom: 10,
|
||
left: 10,
|
||
},
|
||
color: colorList,
|
||
graphic: [
|
||
{
|
||
type: 'image', // 图片元素
|
||
left: '2%', // 左对齐
|
||
top: 'top', // 垂直居中
|
||
style: {
|
||
image: '../../img/googlealarm/Group.png', // 设置图标路径
|
||
width: 20, // 图标宽度
|
||
height: 20, // 图标高度
|
||
},
|
||
},
|
||
{
|
||
type: 'text', // 文本元素
|
||
left: '44.5%', // 水平居中
|
||
top: 'middle', // 垂直居中
|
||
style: {
|
||
text: sum, // 显示的文本内容为80
|
||
fill: '#f5f5f6', // 文本颜色
|
||
fontSize: 50, // 文本字号
|
||
fontWeight: 'bold', // 文本粗细
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
roundCap: true,
|
||
radius: ['76%', '80%'],
|
||
center: ['50%', '50%'],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: pieData1
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: ['76%', '70%'],
|
||
center: ['50%', '50%'],
|
||
gap: 1.71,
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
silent: true,
|
||
data: pieData2
|
||
},
|
||
{
|
||
type: 'gauge',
|
||
zlevel: 2,
|
||
splitNumber: 90,
|
||
radius: '60%',
|
||
center: ['50%', '50%'],
|
||
startAngle: 90,
|
||
endAngle: -269.9999,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
length: 7,
|
||
lineStyle: {
|
||
width: 4,
|
||
color: 'rgb(33,85,130)',
|
||
},
|
||
},
|
||
pointer: {
|
||
show: 0,
|
||
},
|
||
detail: {
|
||
show: 0,
|
||
},
|
||
},
|
||
{
|
||
type: 'pie',
|
||
center: ['50%', '50%'],
|
||
radius: [0, '45.6%'],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(75, 126, 203,.1)'
|
||
},
|
||
silent: true,
|
||
data: [
|
||
{
|
||
value: 100,
|
||
name: ''
|
||
}
|
||
]
|
||
}
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
|
||
}
|
||
|
||
//近十二个月警告
|
||
function deviceWarnData(data){
|
||
var myChart = echarts.init(document.getElementById('december'));
|
||
const currentDate = new Date();
|
||
|
||
// 存放最近12个月日期的数组
|
||
let myData1 = [];
|
||
let count1 = [];
|
||
let count3 = [];
|
||
const eclice = data.fireAlarm;
|
||
// 逐个生成并添加最近12个月的日期到数组
|
||
for (let i = 11; i >= 0; i--) {
|
||
let year = currentDate.getFullYear();
|
||
let month = currentDate.getMonth() - i;
|
||
if (month < 0) {
|
||
year -= 1;
|
||
month += 12;
|
||
}
|
||
myData1.unshift(new Date(year, month, 1));
|
||
}
|
||
|
||
function formatDate(date) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
return `${year}-${month}`;
|
||
}
|
||
// 将日期格式化成字符串，方便后面的比较
|
||
const myData1String = myData1.map(date => formatDate(date));
|
||
// 初始化 count1 和 count3 数组
|
||
count1 = Array.from({length: 12}, () => 0);
|
||
count3 = Array.from({length: 12}, () => 0);
|
||
|
||
// 遍历最近12个月的日期数组
|
||
for (let i = 0; i < myData1String.length; i++) {
|
||
const dateStr = myData1String[i];
|
||
// 查找 eclice 中是否有对应的数据
|
||
const ecliceDataIndex = eclice.findIndex(item => item.month === dateStr);
|
||
if (ecliceDataIndex !== -1) {
|
||
count1[i] = eclice[ecliceDataIndex].count1;
|
||
count3[i] = eclice[ecliceDataIndex].count3;
|
||
}
|
||
|
||
}
|
||
// count1.push(count1.shift());
|
||
// count3.push(count3.shift());
|
||
function shiftArray(arr) {
|
||
var newArr = [];
|
||
for (var i = arr.length - 1; i >= 0; i--) {
|
||
newArr.push(arr[i]);
|
||
}
|
||
return newArr;
|
||
}
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
title: {
|
||
text: "近十二个月警告",
|
||
left: '5%',
|
||
top: 'top',
|
||
// itemGap:15,
|
||
textStyle: {
|
||
color: "#f5f5f6",
|
||
fontSize: 15,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
},
|
||
backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(0, 255, 233,0)'
|
||
}, {
|
||
offset: 0.5,
|
||
color: 'rgba(255, 255, 255,1)',
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(0, 255, 233,0)'
|
||
}],
|
||
global: false
|
||
}
|
||
},
|
||
},
|
||
borderColor: "rgba(18, 57, 60, .8)",
|
||
// formatter: "{b}人员类别统计<br>{c}人"
|
||
formatter: function(params, ticket, callback) {
|
||
var htmlStr = '';
|
||
for (var i = 0; i < params.length; i++) {
|
||
var param = params[i];
|
||
var xName = param.name + '的告警数量'; //x轴的名称
|
||
var seriesName = param.seriesName; //图例名称
|
||
var value = param.value; //y轴值
|
||
var color = param.color; //图例颜色
|
||
if (i === 0) {
|
||
htmlStr += xName + '<br/>'; //x轴的名称
|
||
}
|
||
htmlStr += '<div>';
|
||
htmlStr +=
|
||
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
|
||
color + ';"></span>'; //一个点
|
||
htmlStr += seriesName + '：' + value + '人'; //圆点后面显示的文本
|
||
htmlStr += '</div>';
|
||
}
|
||
return htmlStr;
|
||
}
|
||
},
|
||
color: ['#1ed6ff', '#36f097',],
|
||
legend: {
|
||
// icon: 'circle',
|
||
// itemWidth: 10,
|
||
itemGap: 4,
|
||
x: 'right',
|
||
top: '3%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 13,
|
||
// padding:[0, 6, 0, 6],
|
||
}
|
||
},
|
||
grid: {
|
||
top: '18%',
|
||
left: '1%',
|
||
right: '4%',
|
||
bottom: '2%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#36f097'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
align: 'center',
|
||
rotate: '40',
|
||
margin: '25',
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
boundaryGap: false,
|
||
data: shiftArray(myData1String) , //this.$moment(data.times).format("HH-mm") ,
|
||
}, ],
|
||
|
||
yAxis: [{
|
||
type: 'value',
|
||
// min: 0,
|
||
// max: 600,
|
||
splitNumber: 6,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#36f097'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(28, 130, 197, .3)',
|
||
type: 'solid'
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: '#DEEBFF',
|
||
textStyle: {
|
||
fontSize: 12
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}, ],
|
||
graphic: [
|
||
{
|
||
type: 'image', // 图片元素
|
||
left: '2%', // 左对齐
|
||
top: 'top', // 垂直居中
|
||
style: {
|
||
image: '../../img/googlealarm/Group.png', // 设置图标路径
|
||
width: 20, // 图标宽度
|
||
height: 20, // 图标高度
|
||
},
|
||
},
|
||
],
|
||
series: [{
|
||
name: '一号楼',
|
||
type: 'line',
|
||
showSymbol: true,
|
||
symbolSize: 8,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#1ed6ff',
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: '#1ed6ff',
|
||
borderColor: '#1ed6ff',
|
||
borderWidth: 2,
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[{
|
||
offset: 0,
|
||
color: 'rgb(30, 214, 255)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(9, 246, 255, .2)',
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: shiftArray(count1) , //data.values
|
||
},
|
||
{
|
||
name: '三号楼',
|
||
type: 'line',
|
||
showSymbol: true,
|
||
symbolSize: 8,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#36f097',
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: '#36f097',
|
||
borderColor: '#36f097',
|
||
borderWidth: 2,
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[{
|
||
offset: 0,
|
||
color: 'rgb(54, 240 ,151)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(62, 80, 251, .2)',
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: shiftArray(count3) , //data.values
|
||
}
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
|
||
}
|
||
|
||
//消防数量
|
||
function fireNum(data){
|
||
const myChart = echarts.init(document.getElementById('number-type'));
|
||
// var datas = [
|
||
// {
|
||
// value: 100,
|
||
// name: '典型烟感',
|
||
// },
|
||
// {
|
||
// value: 96,
|
||
// name: '手动按钮',
|
||
// },
|
||
// {
|
||
// value: 89,
|
||
// name: '紧急照明',
|
||
// },
|
||
// {
|
||
// value: 75,
|
||
// name: '照明配电',
|
||
// },
|
||
// {
|
||
// value: 56,
|
||
// name: '消火栓',
|
||
// },
|
||
// {
|
||
// value: 29,
|
||
// name: '讯响器',
|
||
// },
|
||
// {
|
||
// value: 29,
|
||
// name: '消防广播 ',
|
||
// },
|
||
// ];
|
||
var datas = data.equipInfo;
|
||
var maxArr = new Array(datas.length).fill(100);
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
grid: {
|
||
left: 10,
|
||
right:10,
|
||
bottom: 0,
|
||
top:0,
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
axisPointer: {
|
||
type: 'none',
|
||
},
|
||
formatter: function (params) {
|
||
return params.data.name + ' : ' + params.data.value;
|
||
},
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value',
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
align: 'right',
|
||
textStyle: {
|
||
fontSize: 18,
|
||
color: 'rgb(255,255,255)',
|
||
rich: {
|
||
name: {
|
||
padding: [0,10,0,20],
|
||
width:50,
|
||
borderWidth:1,
|
||
align: 'left',
|
||
},
|
||
},
|
||
},
|
||
formatter: (name) => {
|
||
var index = datas.map((item) => item.name).indexOf(name) + 1;
|
||
return [
|
||
'{' + 'index' + '|' +'NO.'+ index + '}',
|
||
'{name|' + name + '}',
|
||
].join('');
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: datas.map((item) => item.name),
|
||
},
|
||
{
|
||
type:'category',
|
||
inverse: true,
|
||
axisLabel:{
|
||
show:true,
|
||
margin:30,//右侧y轴数字的外边距
|
||
textStyle: {
|
||
fontSize: 16,
|
||
color: 'rgb(255,255,255)',
|
||
},
|
||
formatter: (value) => {
|
||
return value +'个'
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: datas.map((item) => {
|
||
return item.value
|
||
}),
|
||
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '值',
|
||
type: 'bar',
|
||
zlevel: 1,
|
||
showBackground: true,
|
||
// 柱状条上方的白色线条
|
||
label: {
|
||
show: true,
|
||
position: 'right', // 位置
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
fontWeight:'bold',
|
||
distance: -1, // 字与条形图bar 的距离
|
||
formatter: '|', // 这里是数据展示的时候显示的数据
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: '#3cf0f1',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#67b1f5',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
barWidth: 14,
|
||
data: datas,
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
const idMap = new Map([
|
||
["1", "火警"],
|
||
["2", "故障"],
|
||
["3", "动作"],
|
||
["4", ""],
|
||
["5", "启动"],
|
||
["6", "停动"],
|
||
["7", "隔离"],
|
||
["8", "释放"],
|
||
["9", "主电备电恢复"]
|
||
])
|
||
|
||
//今日告警表格
|
||
function WarningList(data){
|
||
let equipNum = 6;
|
||
if(data.equipList.length < equipNum){
|
||
equipNum = data.equipList.length;
|
||
}
|
||
let html = ""
|
||
for (var i = 0; i < equipNum; i++) {
|
||
html += "<div style='font-size: 12px'>"
|
||
html += "<span>" + (i + 1) + "</span>"
|
||
html += "<span>" +data.equipList[i].deviceType+ "</span>"
|
||
html += "<span>" +data.equipList[i].deviceAddress+ "</span>"
|
||
html += "<span>" + idMap.get(data.equipList[i].equipType) + "</span>"
|
||
html += "<span>" +data.equipList[i].alarmTime+ "</span>"
|
||
html += "</div>"
|
||
}
|
||
$(".down>.up-down").append(html)
|
||
}
|
||
|
||
|
||
//告警详情
|
||
function deviceWarnClick(){
|
||
var index = layer.open({
|
||
title: ['告警详情', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/googlealarm/googlealarmFrom.html',
|
||
area: ["70%", "96%"],
|
||
maxmin: false
|
||
});
|
||
}
|