You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
10 KiB
HTML
280 lines
10 KiB
HTML
2 years ago
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<link href="__PUBLIC__/style/bootstrap.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/font-awesome.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/weather-icons.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!--Beyond styles-->
|
||
|
|
<link id="beyond-link" href="__PUBLIC__/style/beyond.css" rel="stylesheet" type="text/css">
|
||
|
|
<link href="__PUBLIC__/style/demo.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/typicons.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/animate.css" rel="stylesheet">
|
||
|
|
<title><title>抽水蓄能电站智能化状态监测系统</title></title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
|
||
|
|
<script src="__IMG__/cssjs/js/highcharts.js"></script>
|
||
|
|
<script src="__IMG__/cssjs/js/highcharts-3d.js"></script>
|
||
|
|
<script src="__IMG__/cssjs/js/exporting.js"></script>
|
||
|
|
<div class="page-body" style="padding-top: 0px">
|
||
|
|
<div class="easy-pie-chart-preview">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12 col-sm-12 col-xs-12" >
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
||
|
|
<div class="widget" style="background-color:white;height: 300px">
|
||
|
|
<div class="widget-header bg-blueberry">
|
||
|
|
<span class="widget-caption">电站状态</span>
|
||
|
|
<div class="widget-caption pull-right" >
|
||
|
|
单位<span style="font-size: 18px;font-weight: bold">个</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="container3" style="height: 250px;padding-top: 10px;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
||
|
|
<div class="widget" style="background-color:white;height: 300px">
|
||
|
|
<div class="widget-header bg-blueberry">
|
||
|
|
<span class="widget-caption">监测统计</span>
|
||
|
|
<div class="widget-caption pull-right" >
|
||
|
|
单位<span style="font-size: 18px;font-weight: bold">个</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="container4" style="height: 250px; padding-top: 10px; "></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
||
|
|
<div class="widget" style="background-color:white;height: 300px">
|
||
|
|
<div class="widget-header bg-blueberry">
|
||
|
|
<span class="widget-caption">电压等级</span>
|
||
|
|
<div class="widget-caption pull-right" >
|
||
|
|
单位<span style="font-size: 18px;font-weight: bold">kV</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="container1" style="height: 250px; padding-top: 10px; "></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
||
|
|
<div class="widget" style="background-color:white;height: 300px">
|
||
|
|
<div class="widget-header bg-blueberry">
|
||
|
|
<span class="widget-caption">电站规模</span>
|
||
|
|
<div class="widget-caption pull-right" >
|
||
|
|
单位<span style="font-size: 18px;font-weight: bold">mW</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="container2" style="height: 250px; padding-top: 10px; "></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
Highcharts.chart('container1', {
|
||
|
|
chart: {
|
||
|
|
type: 'pie',
|
||
|
|
options3d: {
|
||
|
|
enabled: true,
|
||
|
|
alpha: 50 //倾斜度
|
||
|
|
},
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
|
|
plotBorderColor : null,
|
||
|
|
plotBackgroundColor: null,
|
||
|
|
plotBackgroundImage:null,
|
||
|
|
plotBorderWidth: null,
|
||
|
|
plotShadow: false,
|
||
|
|
},
|
||
|
|
colors: [ '#82d2ff', '#52f4dd'],
|
||
|
|
title: {
|
||
|
|
text: null
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
// subtitle: {
|
||
|
|
// text: '3D donut in Highcharts'
|
||
|
|
// },
|
||
|
|
plotOptions: {
|
||
|
|
pie: {
|
||
|
|
allowPointSelect: true,
|
||
|
|
innerSize: 30, //空心大小
|
||
|
|
depth: 25, //厚度
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false //是否显示引导线及数据
|
||
|
|
},
|
||
|
|
showInLegend: true //是否显示图例 false不显示
|
||
|
|
}
|
||
|
|
},
|
||
|
|
credits: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
exporting:{
|
||
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '数量',
|
||
|
|
data:{$dydj}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
Highcharts.chart('container2', {
|
||
|
|
chart: {
|
||
|
|
type: 'pie',
|
||
|
|
options3d: {
|
||
|
|
enabled: true,
|
||
|
|
alpha: 50
|
||
|
|
},
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
|
|
plotBorderColor : null,
|
||
|
|
plotBackgroundColor: null,
|
||
|
|
plotBackgroundImage:null,
|
||
|
|
plotBorderWidth: null,
|
||
|
|
plotShadow: false,
|
||
|
|
},
|
||
|
|
colors: [ '#edd925', '#d421e9'],
|
||
|
|
title: {
|
||
|
|
text: null
|
||
|
|
},
|
||
|
|
// subtitle: {
|
||
|
|
// text: '3D donut in Highcharts'
|
||
|
|
// },
|
||
|
|
plotOptions: {
|
||
|
|
pie: {
|
||
|
|
allowPointSelect: true,
|
||
|
|
innerSize: 30,
|
||
|
|
depth: 25,
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false //是否显示引导线及数据
|
||
|
|
},
|
||
|
|
showInLegend: true //是否显示图例 false不显示
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
credits: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
exporting:{
|
||
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [{
|
||
|
|
name: '数量',
|
||
|
|
data:{$dzgm}
|
||
|
|
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
Highcharts.chart('container3', {
|
||
|
|
chart: {
|
||
|
|
type: 'column',
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
|
|
plotBorderColor : null,
|
||
|
|
plotBackgroundColor: null,
|
||
|
|
plotBackgroundImage:null,
|
||
|
|
plotBorderWidth: null,
|
||
|
|
plotShadow: false,
|
||
|
|
},
|
||
|
|
colors: [ '#47eda4', '#e97e94'],
|
||
|
|
title: {
|
||
|
|
text: null
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category'
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
title: {
|
||
|
|
text: null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
series: {
|
||
|
|
borderWidth: 0,
|
||
|
|
dataLabels: {
|
||
|
|
enabled: true,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
credits: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
exporting:{
|
||
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [{
|
||
|
|
name: '电站状态',
|
||
|
|
colorByPoint: true,
|
||
|
|
data:[{
|
||
|
|
name: '正常站',
|
||
|
|
y: 8
|
||
|
|
}, {
|
||
|
|
name: '异常站',
|
||
|
|
y: 3
|
||
|
|
},]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
Highcharts.chart('container4', {
|
||
|
|
chart: {
|
||
|
|
type: 'column',
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
|
|
plotBorderColor : null,
|
||
|
|
plotBackgroundColor: null,
|
||
|
|
plotBackgroundImage:null,
|
||
|
|
plotBorderWidth: null,
|
||
|
|
plotShadow: false,
|
||
|
|
},
|
||
|
|
colors: [ '#eda796', '#5e81e9'],
|
||
|
|
title: {
|
||
|
|
text: null
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category'
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
title: {
|
||
|
|
text: null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
series: {
|
||
|
|
borderWidth: 0,
|
||
|
|
dataLabels: {
|
||
|
|
enabled: true,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
credits: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
exporting:{
|
||
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [{
|
||
|
|
name: '监测统计',
|
||
|
|
colorByPoint: true,
|
||
|
|
data:[{
|
||
|
|
name: '已监测',
|
||
|
|
y: 6
|
||
|
|
}, {
|
||
|
|
name: '未监测',
|
||
|
|
y: 2
|
||
|
|
},]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|