// 数据管理
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();
        },*/
    });
}