323 lines
8.9 KiB
JavaScript
323 lines
8.9 KiB
JavaScript
// 数据管理
|
|
var myChart = echarts.init(document.getElementById('chart'));
|
|
var data = [
|
|
{
|
|
name: '消防主机',
|
|
value: 0
|
|
},{
|
|
name: '报警探头',
|
|
value: 0
|
|
},{
|
|
name: '控制模块',
|
|
value: 0
|
|
},{
|
|
name: '构成四',
|
|
value: 0
|
|
}];
|
|
|
|
var titleArr= [], seriesArr=[];
|
|
colors=[['#0091ff', '#00fefe'],['#ff8c37', '#ffdcc3'],['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0']];
|
|
data.forEach(function(item, index){
|
|
titleArr.push(
|
|
{
|
|
text:item.name,
|
|
left: index * 20 + 10 +'%',
|
|
top: '69%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: '16',
|
|
color: colors[index][0],
|
|
textAlign: 'center',
|
|
},
|
|
}
|
|
);
|
|
seriesArr.push(
|
|
{
|
|
name: item.name,
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: [40, 45],
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 3,
|
|
colorStops: [{
|
|
offset: 0, color: colors[index][0] // 起始颜色
|
|
}, {
|
|
offset: 1, color: colors[index][1] // 结束颜色
|
|
}],
|
|
},
|
|
shadowColor: colors[index][0],
|
|
shadowBlur: 0,
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
center: [index * 20 + 10 +'%', '40%'],
|
|
data: [{
|
|
value: item.value,
|
|
label: {
|
|
normal: {
|
|
formatter: function(params){
|
|
return params.value;
|
|
},
|
|
position: 'center',
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: '20',
|
|
fontWeight: 'bold',
|
|
color: colors[index][0]
|
|
}
|
|
}
|
|
},
|
|
}, {
|
|
value: 100-item.value,
|
|
name: 'invisible',
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[index][1]
|
|
},
|
|
emphasis: {
|
|
color: colors[index][1]
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
);
|
|
});
|
|
|
|
|
|
option = {
|
|
backgroundColor: "transparent",
|
|
title:titleArr,
|
|
series: seriesArr
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
// 今日告警
|
|
var myChart = echarts.init(document.getElementById('charts'));
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
right: '3%',
|
|
left: '5%',
|
|
bottom: '12%'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['一', '二', '三', '四', '五', '六', '天'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#FFFFFF'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: '#e2e9ff',
|
|
textStyle: {
|
|
fontSize: 14
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
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)'
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
data: [
|
|
0, 0, 0, 0, 0, 0, 0
|
|
],
|
|
barWidth: '28px',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
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: false
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
$(function(){
|
|
//设备告警表格
|
|
deviceWarnData()
|
|
//防区告警表格
|
|
defenceWarnData()
|
|
})
|
|
|
|
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 deviceWarnData(){
|
|
/*$.ajax({
|
|
type: 'POST',
|
|
url: ctxPath + '/ /',
|
|
data: {
|
|
},
|
|
success: function(data) {powerStatChart
|
|
deviceInfo(data)
|
|
}
|
|
});*/
|
|
deviceWarnList(null)
|
|
}
|
|
function deviceWarnList(data){
|
|
var html = ""
|
|
for (var i = 0; i < 9; i++) {
|
|
html += "<div style='font-size: 12px'>"
|
|
// html += "<span>设备名称" + (i + 1) + "</span>"
|
|
// html += "<span>设备类型" + (i + 1) + "</span>"
|
|
// html += "<span>位置" + (i + 1) + "</span>"
|
|
// html += "<span>设备类型" + (i + 1) + "</span>"
|
|
// html += "<span>位置" + (i + 1) + "</span>"
|
|
html += "</div>"
|
|
}
|
|
$(".deviceWarn>.table").append(html)
|
|
}
|
|
|
|
|
|
|
|
//防区告警表格
|
|
function defenceWarnData(){
|
|
/*$.ajax({
|
|
type: 'POST',
|
|
url: ctxPath + '/ /',
|
|
data: {
|
|
},
|
|
success: function(data) {powerStatChart
|
|
deviceInfo(data)
|
|
}
|
|
});*/
|
|
defenceWarnList(null)
|
|
}
|
|
function defenceWarnList(data){
|
|
var html = ""
|
|
for (var i = 0; i < 9; i++) {
|
|
html += "<div style='font-size: 12px'>"
|
|
// html += "<span>设备名称" + (i + 1) + "</span>"
|
|
// html += "<span>设备类型" + (i + 1) + "</span>"
|
|
// html += "<span>位置" + (i + 1) + "</span>"
|
|
// html += "<span>位置" + (i + 1) + "</span>"
|
|
html += "</div>"
|
|
}
|
|
$(".defenceWarn>.table").append(html)
|
|
}
|
|
|
|
//设备告警详情
|
|
function deviceWarnClick(){
|
|
var index = layer.open({
|
|
title: ['设备告警','color: #fff'],
|
|
type: 2,
|
|
closeBtn: 2,
|
|
content: '../../page/googlealarm/deviceWarnList.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 defenceWarnClick(){
|
|
var index = layer.open({
|
|
title: ['防区告警','color: #fff'],
|
|
type: 2,
|
|
closeBtn: 2,
|
|
content: '../../page/googlealarm/defenceWarnList.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();
|
|
},*/
|
|
});
|
|
}
|