615 lines
20 KiB
JavaScript
615 lines
20 KiB
JavaScript
function formatDate(time,format){
|
||
var page=page||'YY-MM-DD hh:mm:ss';
|
||
var date = new Date(time);
|
||
|
||
var year = date.getFullYear(),
|
||
month = date.getMonth()+1,//月份是从0开始的
|
||
day = date.getDate(),
|
||
hour = date.getHours(),
|
||
min = date.getMinutes(),
|
||
sec = date.getSeconds();
|
||
var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
|
||
return '0'+index;
|
||
});////开个长度为10的数组 格式为 00 01 02 03
|
||
|
||
var newTime = format.replace(/YY/g,year)
|
||
.replace(/MM/g,preArr[month]||month)
|
||
.replace(/DD/g,preArr[day]||day)
|
||
.replace(/hh/g,preArr[hour]||hour)
|
||
.replace(/mm/g,preArr[min]||min)
|
||
.replace(/ss/g,preArr[sec]||sec);
|
||
|
||
return newTime;
|
||
}
|
||
//var ymonth = formatDate(new Date().getTime(),'YY-MM')
|
||
var now = new Date();
|
||
var year = now.getFullYear();
|
||
var month = now.getMonth() + 1;
|
||
//预警指数
|
||
function bindmap1(x,y,m) {
|
||
var y=y||year;
|
||
var m=m||month;
|
||
myChart1 = echarts.init(document.getElementById(x));
|
||
var option = {
|
||
title: {
|
||
text: '本月安全状态',
|
||
},
|
||
tooltip: {
|
||
formatter: "{a} <br/>{b} : {c}"
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
name: '安全预警',
|
||
type: 'gauge',
|
||
detail: {
|
||
formatter: '预警值{value}',
|
||
offsetCenter: [0, 55],
|
||
textStyle: {
|
||
color: 'auto',
|
||
fontSize: 20
|
||
}
|
||
},
|
||
splitNumber: 4,
|
||
data: [{ value: 50 }],
|
||
max: 50,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0.2, '#2C6BAC'],
|
||
[0.3, '#E5E142'],
|
||
[0.4, '#E37720'],
|
||
[1, '#D8201D']
|
||
],
|
||
width: 30
|
||
}
|
||
},
|
||
|
||
},
|
||
{
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
name: '安全预测',
|
||
type: 'gauge',
|
||
detail: {
|
||
formatter: '预测值{value}',
|
||
offsetCenter: [0, 80],
|
||
textStyle: {
|
||
color: 'auto',
|
||
fontSize: 15
|
||
}
|
||
},
|
||
splitNumber: 4,
|
||
data: [{ value: 22 }],
|
||
max: 50,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0.2, '#2C6BAC'],
|
||
[0.3, '#E5E142'],
|
||
[0.4, '#E37720'],
|
||
[1, '#D8201D']
|
||
],
|
||
width: 30
|
||
}
|
||
},
|
||
pointer: {
|
||
length: '60%',
|
||
width: 6,
|
||
color: 'auto'
|
||
},
|
||
// axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
||
// show: true,
|
||
// formatter: function (v) {
|
||
// switch (v + '') {
|
||
// case '10': return '弱';
|
||
// case '15': return '低';
|
||
// case '20': return '中';
|
||
// case '50': return '高';
|
||
// default: return '';
|
||
// }
|
||
// },
|
||
// textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
// color: '#333'
|
||
// }
|
||
// },
|
||
}
|
||
]
|
||
};
|
||
myChart1.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/charthandle?a=yjycz&year="+y+"&month="+m, //请求发送
|
||
//data: JSON.stringify({'ymonth':m}),
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
if (data) {
|
||
option.series[0].data[0].value = data.yjz;
|
||
option.series[1].data[0].value = data.ycz;
|
||
myChart1.hideLoading(); //隐藏加载动画
|
||
myChart1.setOption(option)
|
||
//$('#'+x+'v').val(myChart.getDataURL());
|
||
//map1v =myChart.getDataURL();
|
||
//map1v=myChart.getDataURL();
|
||
//console.log(map1v);
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
//请求失败时执行该函数
|
||
//alert("汗,没有数据吧!");
|
||
myChart1.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
|
||
//预警预测趋势图
|
||
function bindmap2(x) {
|
||
myChart2 = echarts.init(document.getElementById(x));
|
||
var option = {
|
||
//animation:false,
|
||
title: {
|
||
text: '公司预警预测趋势图',
|
||
subtext: '月统计'
|
||
},
|
||
legend: {
|
||
data: ['预警值', '预测值']
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
magicType: { show: true, type: ['line', 'bar'] },
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: []
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
max: 50,
|
||
},
|
||
series: [
|
||
{
|
||
type: 'scatter',
|
||
markArea: { //标记区域
|
||
//itemStyle: { //全局的
|
||
//normal: { color: '#ff3333' }
|
||
// },
|
||
data: [
|
||
[{
|
||
yAxis: '0',//y轴坐标控制
|
||
itemStyle: {
|
||
color: '#2C6BAC'
|
||
}
|
||
}, {
|
||
yAxis: '20',
|
||
}],
|
||
[{
|
||
yAxis: '20',//y轴坐标控制
|
||
itemStyle: {
|
||
color: '#E5E142'
|
||
}
|
||
}, {
|
||
yAxis: '25',
|
||
}]
|
||
,
|
||
[{
|
||
yAxis: '25',
|
||
itemStyle: {
|
||
color: '#E37720'
|
||
}
|
||
}, {
|
||
yAxis: '50'
|
||
}],
|
||
[{
|
||
yAxis: '40',
|
||
itemStyle: {
|
||
color: '#D8201D'
|
||
}
|
||
}, {
|
||
yAxis: '100'
|
||
}]
|
||
]
|
||
},
|
||
},
|
||
{
|
||
name: '预警值',
|
||
data: [],
|
||
type: 'line',
|
||
smooth: true
|
||
},
|
||
{
|
||
name: '预测值',
|
||
data: [],
|
||
type: 'line',
|
||
smooth: true
|
||
}]
|
||
};
|
||
myChart2.showLoading();
|
||
var x_s = []
|
||
var yjz = []
|
||
var ycz = []
|
||
$.ajax({
|
||
type: "post",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/charthandle?a=yjycqst", //请求发送
|
||
data: {},
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
if (data) {
|
||
data = data.rows;
|
||
for (var i = 0; i < data.length; i++) {
|
||
x_s.push(data[i].year+'-'+data[i].month);
|
||
}
|
||
for (var i = 0; i < data.length; i++) {
|
||
yjz.push(data[i].yjz);
|
||
}
|
||
for (var i = 0; i < data.length; i++) {
|
||
ycz.push(data[i].ycz);
|
||
}
|
||
myChart2.hideLoading(); //隐藏加载动画
|
||
myChart2.setOption(option)
|
||
myChart2.setOption({ //加载数据图表
|
||
xAxis: {
|
||
type: 'category',
|
||
data: x_s
|
||
},
|
||
series: [{
|
||
// 根据名字对应到相应的系列
|
||
|
||
name: '预警值',
|
||
data: yjz
|
||
}, {
|
||
// 根据名字对应到相应的系列
|
||
name: '预测值',
|
||
data: ycz
|
||
}]
|
||
});
|
||
// map2v=myChart.getDataURL();
|
||
}
|
||
|
||
},
|
||
error: function (errorMsg) {
|
||
//请求失败时执行该函数
|
||
myChart2.hideLoading();
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
//隐患类别分布
|
||
function bindmap3(x,y,m) {
|
||
var y=y||year;
|
||
var m=m||month;
|
||
myChart3 = echarts.init(document.getElementById(x));
|
||
myChart3.setOption({
|
||
title:{
|
||
text:'隐患类别分布'
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
tooltip: {
|
||
formatter: "{b} : {c} "
|
||
},
|
||
series: {
|
||
type: 'sunburst',
|
||
// highlightPolicy: 'ancestor',
|
||
data: [],
|
||
radius: [0, '90%'],
|
||
label: {
|
||
rotate: 'radial'
|
||
}
|
||
}
|
||
});
|
||
myChart3.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/charthandle?a=yhlbt&year="+y+"&month="+m, //请求发送
|
||
//data: JSON.stringify({'ymonth':m}),
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
if (data) {
|
||
myChart3.hideLoading(); //隐藏加载动画
|
||
myChart3.setOption({
|
||
series: {
|
||
data: data.value,
|
||
}
|
||
}
|
||
);
|
||
//map3v=myChart.getDataURL();
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
//请求失败时执行该函数
|
||
//alert("汗,没有数据吧!");
|
||
myChart3.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
|
||
//隐患伤害分布
|
||
function bindmap4(x,y,m) {
|
||
var y=y||year;
|
||
var m=m||month;
|
||
myChart4 = echarts.init(document.getElementById(x));
|
||
myChart4.setOption(option = {
|
||
title : {
|
||
text: '隐患伤害分布',
|
||
x:'left'
|
||
},
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
x : 'center',
|
||
y : 'bottom',
|
||
data:[]
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {
|
||
show: true,
|
||
type: ['pie', 'funnel']
|
||
},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
calculable : true,
|
||
series : [
|
||
{
|
||
name:'评估伤害分布',
|
||
type:'pie',
|
||
radius : [0, '75%'],
|
||
center : ['50%', '50%'],
|
||
roseType : 'area',
|
||
data:[]
|
||
}
|
||
]
|
||
});
|
||
myChart4.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/charthandle?a=yhpgt&year="+y+"&month="+m, //请求发送
|
||
//data: JSON.stringify({'ymonth':m}),
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
if (data) {
|
||
myChart4.hideLoading(); //隐藏加载动画
|
||
myChart4.setOption({
|
||
legend:{data:data.key},
|
||
series:{
|
||
name:'评估伤害分布',
|
||
data:data.value,
|
||
}
|
||
}
|
||
);
|
||
//map4v=myChart.getDataURL();
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
//请求失败时执行该函数
|
||
//alert("汗,没有数据吧!");
|
||
myChart4.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
|
||
//培训级别分布
|
||
function bindmap5(x,y,m) {
|
||
var y=y||year;
|
||
var m=m||month;
|
||
myChart5 = echarts.init(document.getElementById(x));
|
||
myChart5.setOption(option = {
|
||
title : {
|
||
text: '培训级别分布',
|
||
x:'left'
|
||
},
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient : 'vertical',
|
||
x : 'left',
|
||
y:'bottom',
|
||
data:[]
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
// magicType : {
|
||
// show: true,
|
||
// type: ['pie', 'funnel'],
|
||
// option: {
|
||
// funnel: {
|
||
// x: '25%',
|
||
// width: '50%',
|
||
// funnelAlign: 'left',
|
||
// max: 1548
|
||
// }
|
||
// }
|
||
// },
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
calculable : true,
|
||
series : [
|
||
{
|
||
name:'级别分布',
|
||
type:'pie',
|
||
radius : '55%',
|
||
center: ['50%', '60%'],
|
||
data:[]
|
||
}
|
||
]
|
||
});
|
||
myChart5.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/charthandle?a=pxjbt&year="+y+"&month="+m, //请求发送
|
||
//data: JSON.stringify({'ymonth':m}),
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
if (data) {
|
||
myChart5.hideLoading(); //隐藏加载动画
|
||
myChart5.setOption({
|
||
legend:{data:data.key},
|
||
series:{
|
||
name:'级别分布',
|
||
data:data.value,
|
||
}
|
||
}
|
||
);
|
||
// map5v=myChart.getDataURL();
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
//请求失败时执行该函数
|
||
//alert("汗,没有数据吧!");
|
||
myChart5.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
|
||
//演练类型分布
|
||
function bindmap6(x,y,m) {
|
||
var y=y||year;
|
||
var m=m||month;
|
||
myChart6 = echarts.init(document.getElementById(x));
|
||
myChart6.setOption(option = {
|
||
title : {
|
||
text: '演练类型分布',
|
||
x:'left'
|
||
},
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient : 'vertical',
|
||
x : 'left',
|
||
y:'bottom',
|
||
data:[]
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
// magicType : {
|
||
// show: true,
|
||
// type: ['pie', 'funnel'],
|
||
// option: {
|
||
// funnel: {
|
||
// x: '25%',
|
||
// width: '50%',
|
||
// funnelAlign: 'left',
|
||
// max: 1548
|
||
// }
|
||
// }
|
||
// },
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
calculable : true,
|
||
series : [
|
||
{
|
||
name:'类型分布',
|
||
type:'pie',
|
||
radius : ['50%', '70%'],
|
||
itemStyle : {
|
||
normal : {
|
||
label : {
|
||
show : false
|
||
},
|
||
labelLine : {
|
||
show : false
|
||
}
|
||
},
|
||
emphasis : {
|
||
label : {
|
||
show : true,
|
||
position : 'center',
|
||
textStyle : {
|
||
fontSize : '30',
|
||
fontWeight : 'bold'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data:[]
|
||
}
|
||
]
|
||
});
|
||
myChart6.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/charthandle?a=yllxt&year="+y+"&month="+m, //请求发送
|
||
//data: JSON.stringify({'ymonth':m}),
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
if (data) {
|
||
myChart6.hideLoading(); //隐藏加载动画
|
||
myChart6.setOption({
|
||
legend:{data:data.key},
|
||
series:{
|
||
name:'类型分布',
|
||
data:data.value,
|
||
}
|
||
}
|
||
);
|
||
//map6v=myChart.getDataURL();
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
//请求失败时执行该函数
|
||
//alert("汗,没有数据吧!");
|
||
myChart6.hideLoading();
|
||
}
|
||
});
|
||
} |