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