You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1946 lines
101 KiB
1946 lines
101 KiB
<#include "../_include/_t.ftl"/>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>消防大数据平台</title>
|
|
<#include "../_include/_h.ftl"/>
|
|
<#include "../_include/_l.ftl"/>
|
|
<#include "../_include/_j.ftl"/>
|
|
<#include "../_include/_z.ftl"/>
|
|
<#include "../_include/_e.ftl"/>
|
|
<#include "../_include/bdata/_c_0.ftl"/>
|
|
<style>
|
|
.tp-weather-widget{
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
.U_Name{
|
|
width: 40%;
|
|
float: left;
|
|
padding-top: 35px;
|
|
font-size: 20px;
|
|
line-height: 2em;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
}
|
|
.U_Name span{
|
|
background: url(${ctx}/style/images_0/img/U_1.png) no-repeat 50% ;
|
|
background-size: auto 50%;
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
.highcharts-credits{
|
|
display: none !important;
|
|
}
|
|
.tpwthwidt .text_3dzWiJR, .tpwthwidt .title_3yjHYH9{
|
|
font-size: 20px !important ;
|
|
color: #fff !important;
|
|
line-height: 2em !important;
|
|
font-weight: bold;
|
|
}
|
|
.tpwthwidt .container_1mbUqWZ{
|
|
margin-top: 35px;
|
|
}
|
|
.tpwthwidt .container_aaK_vMn{
|
|
font-size: 20px !important;
|
|
color: #fff !important;
|
|
line-height: 2em !important;
|
|
font-weight: bold;
|
|
margin-top: 35px;
|
|
}
|
|
.tpwthwidt .text_1vUR5ag, .tpwthwidt .title_2I35arv{
|
|
font-size: 18px !important;
|
|
color: #fff !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="top">
|
|
<div class="time" id="time"></div>
|
|
<script>
|
|
setInterval(function(){
|
|
var today,hour,second,minute,year,month,date,strDate;
|
|
today = new Date();
|
|
var _day = today.getDay();
|
|
switch(_day){
|
|
case 1:{strDate = "星期一"} break; case 2:{strDate = "星期二"} break; case 3:{strDate = "星期三"} break;
|
|
case 4:{strDate = "星期四"} break; case 5:{strDate = "星期五"} break; case 6:{strDate = "星期六"} break;
|
|
default:{strDate = "星期日"} break;
|
|
}
|
|
year = today.getYear() + 1900;
|
|
month = today.getMonth()+1;
|
|
if(month < 10) month = "0"+ month;
|
|
date = today.getDate();
|
|
if(date < 10) date = "0" + date;
|
|
hour = today.getHours();
|
|
if(hour < 10) hour = "0" + hour;
|
|
minute = today.getMinutes();
|
|
if(minute < 10) minute = "0" + minute;
|
|
second = today.getSeconds();
|
|
if(second < 10) second = "0" + second;
|
|
$("#time").html(year + "-" + month + "-" + date + "  " + strDate + "  " + hour + ":" + minute + ":" + second);
|
|
// $("#time").html(hour + ":" + minute + ":" + second);
|
|
},1000);
|
|
</script>
|
|
<div class="title">
|
|
<span class="top_title size_40">消防大数据平台</span>
|
|
</div>
|
|
<div class="weather" >
|
|
<div class="tp-weather-widget" id="tp-weather-widget"></div>
|
|
<div class="U_Name">
|
|
<span>admin</span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function(T,h,i,n,k,P,a,g,e){
|
|
g=function(){
|
|
P=h.createElement(i);
|
|
a=h.getElementsByTagName(i)[0];
|
|
P.src=k;
|
|
P.charset="utf-8"
|
|
;P.async=1;
|
|
a.parentNode.insertBefore(P,a)};
|
|
T["ThinkPageWeatherWidgetObject"]=n;
|
|
T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});
|
|
T[n].l=+new Date();if(T.attachEvent){
|
|
T.attachEvent("onload",g)
|
|
}else{
|
|
T.addEventListener("load",g,false)
|
|
}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))
|
|
</script>
|
|
<script>
|
|
tpwidget("init", {
|
|
"flavor": "slim",
|
|
"location": "WW7SRGJ3PVKF",
|
|
"geolocation": "disabled",
|
|
"language": "zh-chs",
|
|
"unit": "c",
|
|
"theme": "chameleon",
|
|
"container": "tp-weather-widget",
|
|
"bubble": "enabled",
|
|
"alarmType": "badge",
|
|
"uid": "UF3A2B1D5A",
|
|
"hash": "d9ba2ffbc40c3460adf3bfc0be55e84b"
|
|
});
|
|
tpwidget("show");
|
|
</script>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="main_left">
|
|
<div class="main_left_top">
|
|
<div class="main_left_top_title">
|
|
<span class="main_left_top_title_text size_20">
|
|
今日警情
|
|
</span>
|
|
</div>
|
|
<!--<div class="main_left_Choice">-->
|
|
<!--<button type="button" class="today size_8">-->
|
|
<!--<div class="botton_spot"></div>-->
|
|
<!--</button>-->
|
|
<!--<span class="today_text">今日</span>-->
|
|
<!--<button type="button" class="month size_8">-->
|
|
<!--<div class="botton_spot"></div>-->
|
|
<!--</button>-->
|
|
<!--<span class="today_text">今月</span>-->
|
|
<!--<button type="button" class="year size_8">-->
|
|
<!--<div class="botton_spot"></div>-->
|
|
<!--</button>-->
|
|
<!--<span class="today_text">今年</span>-->
|
|
<!--</div>-->
|
|
<!--<script>-->
|
|
<!--$(function () {-->
|
|
<!--$(".main_left_Choice .today").click(function () {-->
|
|
<!--$(this).children(".botton_spot").show();-->
|
|
<!--$(this).siblings("button").children(".botton_spot").hide();-->
|
|
<!--$(this).parent(".main_left_Choice").siblings(".main_left_top_Analysis").children(".click_today").show();-->
|
|
<!--$(this).parent(".main_left_Choice").siblings(".main_left_top_Analysis").children(".click_today").siblings().hide();-->
|
|
<!--});-->
|
|
<!--$(".main_left_Choice .month").click(function () {-->
|
|
<!--$(this).children(".botton_spot").show();-->
|
|
<!--$(this).siblings("button").children(".botton_spot").hide();-->
|
|
<!--$(this).parent(".main_left_Choice").siblings(".main_left_top_Analysis").children(".click_month").show();-->
|
|
<!--$(this).parent(".main_left_Choice").siblings(".main_left_top_Analysis").children(".click_month").siblings().hide();-->
|
|
<!--});-->
|
|
<!--$(".main_left_Choice .year").click(function () {-->
|
|
<!--$(this).children(".botton_spot").show();-->
|
|
<!--$(this).siblings("button").children(".botton_spot").hide();-->
|
|
<!--$(this).parent(".main_left_Choice").siblings(".main_left_top_Analysis").children(".click_year").show();-->
|
|
<!--$(this).parent(".main_left_Choice").siblings(".main_left_top_Analysis").children(".click_year").siblings().hide();-->
|
|
<!--});-->
|
|
<!--})-->
|
|
<!--</script>-->
|
|
<!--<div class="main_left_top_Analysis">-->
|
|
<!--<div class="click_today">-->
|
|
<!--<div class="today_left" id="today_L"></div>-->
|
|
<!--<script>-->
|
|
<!--var myChart1 = echarts.init(document.getElementById('today_L'));-->
|
|
<!--option = {-->
|
|
<!--color: ['rgba(255,164,45,0.6)','rgba(67,165,197,0.6)'],-->
|
|
<!--tooltip : {-->
|
|
<!--trigger: 'axis',-->
|
|
<!--axisPointer : { // 坐标轴指示器，坐标轴触发有效-->
|
|
<!--type : '' // 默认为直线，可选为：'line' | 'shadow'-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--grid: {-->
|
|
<!--left: '0%',-->
|
|
<!--right: '0%',-->
|
|
<!--bottom: '5%',-->
|
|
<!--top:'5%',-->
|
|
<!--containLabel: true-->
|
|
<!--},-->
|
|
<!--xAxis : [-->
|
|
<!--{-->
|
|
<!--type : 'category',-->
|
|
<!--data : ['报警设备', '复为设备'],-->
|
|
<!--axisTick: {-->
|
|
<!--alignWithLabel: true-->
|
|
<!--}-->
|
|
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--textStyle:{-->
|
|
<!--color:'#fff'-->
|
|
<!--},-->
|
|
|
|
<!--yAxis : [-->
|
|
<!--{-->
|
|
<!--type : 'value',-->
|
|
<!--axisLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisTick:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--splitLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisLabel: {-->
|
|
<!--show: false //这行代码控制着坐标轴x轴的文字是否显示-->
|
|
<!--}-->
|
|
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--series : [-->
|
|
<!--{-->
|
|
<!--name:'',-->
|
|
<!--type:'bar',-->
|
|
<!--barWidth: '20%',-->
|
|
<!--itemStyle: {-->
|
|
<!--emphasis: {-->
|
|
<!--barBorderRadius: 7-->
|
|
<!--},-->
|
|
<!--normal: {-->
|
|
<!--barBorderRadius: 7,-->
|
|
<!--color: new echarts.graphic.LinearGradient(-->
|
|
<!--0, 1, 0, 0,-->
|
|
<!--[-->
|
|
<!--{offset: 0, color: 'rgba(67,165,197,0.3)'},-->
|
|
<!--{offset: 1, color: 'rgba(67,165,197,0.6)'}-->
|
|
|
|
<!--]-->
|
|
<!--)-->
|
|
<!--}-->
|
|
|
|
<!--},-->
|
|
<!--data:[9, 5]-->
|
|
<!--}-->
|
|
<!--]-->
|
|
<!--};-->
|
|
<!--myChart1.setOption(option);-->
|
|
<!--</script>-->
|
|
<!--<div class="today_right" id="today_R"></div>-->
|
|
<!--<script>-->
|
|
<!--var myChart2 = echarts.init(document.getElementById('today_R'));-->
|
|
<!--option = {-->
|
|
<!--color: ['rgba(67,165,197,0.3)','rgba(67,165,197,0.1)'],-->
|
|
<!--grid: {-->
|
|
<!--left: '0%',-->
|
|
<!--right: '0%',-->
|
|
<!--bottom: '5%',-->
|
|
<!--top:'5%',-->
|
|
<!--containLabel: true-->
|
|
<!--},-->
|
|
<!--xAxis: {-->
|
|
<!--type: 'category',-->
|
|
<!--boundaryGap: false,-->
|
|
<!--data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']-->
|
|
<!--},-->
|
|
<!--textStyle:{-->
|
|
<!--color:'#fff'-->
|
|
<!--},-->
|
|
<!--yAxis: {-->
|
|
<!--type: 'value',-->
|
|
<!--axisLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisTick:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--splitLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisLabel: {-->
|
|
<!--show: false //这行代码控制着坐标轴x轴的文字是否显示-->
|
|
<!--}-->
|
|
|
|
<!--},-->
|
|
<!--series: [{-->
|
|
<!--data: [3, 5, 4, 5, 3, 4, 3],-->
|
|
<!--type: 'line',-->
|
|
<!--areaStyle: {}-->
|
|
<!--}]-->
|
|
<!--};-->
|
|
<!--myChart2.setOption(option);-->
|
|
<!--</script>-->
|
|
<!--<div class="clear"></div>-->
|
|
<!--<span class="today_Label">-->
|
|
<!--今日报警 <span class="number_1">14</span> 个-->
|
|
<!--</span>-->
|
|
<!--<span class="today_Labe2">-->
|
|
<!--离线报警 <span class="number_2">5</span> 个-->
|
|
<!--</span>-->
|
|
<!--</div>-->
|
|
<!--<div class="click_month">-->
|
|
<!--<div class="month_left" id="month_L"></div>-->
|
|
<!--<script>-->
|
|
<!--var myChart10 = echarts.init(document.getElementById('month_L'));-->
|
|
<!--option = {-->
|
|
<!--color: ['rgba(255,164,45,0.6)','rgba(67,165,197,0.6)'],-->
|
|
<!--tooltip : {-->
|
|
<!--trigger: 'axis',-->
|
|
<!--axisPointer : { // 坐标轴指示器，坐标轴触发有效-->
|
|
<!--type : '' // 默认为直线，可选为：'line' | 'shadow'-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--grid: {-->
|
|
<!--left: '0%',-->
|
|
<!--right: '0%',-->
|
|
<!--bottom: '5%',-->
|
|
<!--top:'5%',-->
|
|
<!--containLabel: true-->
|
|
<!--},-->
|
|
<!--xAxis : [-->
|
|
<!--{-->
|
|
<!--type : 'category',-->
|
|
<!--data : ['报警设备', '复为设备'],-->
|
|
<!--axisTick: {-->
|
|
<!--alignWithLabel: true-->
|
|
<!--}-->
|
|
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--textStyle:{-->
|
|
<!--color:'#fff'-->
|
|
<!--},-->
|
|
|
|
<!--yAxis : [-->
|
|
<!--{-->
|
|
<!--type : 'value',-->
|
|
<!--axisLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisTick:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--splitLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisLabel: {-->
|
|
<!--show: false //这行代码控制着坐标轴x轴的文字是否显示-->
|
|
<!--}-->
|
|
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--series : [-->
|
|
<!--{-->
|
|
<!--name:'',-->
|
|
<!--type:'bar',-->
|
|
<!--barWidth: '20%',-->
|
|
<!--itemStyle: {-->
|
|
<!--emphasis: {-->
|
|
<!--barBorderRadius: 7-->
|
|
<!--},-->
|
|
<!--normal: {-->
|
|
<!--barBorderRadius: 7,-->
|
|
<!--color: new echarts.graphic.LinearGradient(-->
|
|
<!--0, 1, 0, 0,-->
|
|
<!--[-->
|
|
<!--{offset: 0, color: 'rgba(67,165,197,0.3)'},-->
|
|
<!--{offset: 1, color: 'rgba(67,165,197,0.6)'}-->
|
|
|
|
<!--]-->
|
|
<!--)-->
|
|
<!--}-->
|
|
|
|
<!--},-->
|
|
<!--data:[9, 5]-->
|
|
<!--}-->
|
|
<!--]-->
|
|
<!--};-->
|
|
<!--myChart10.setOption(option);-->
|
|
<!--</script>-->
|
|
<!--<div class="month_right" id="month_R"></div>-->
|
|
<!--<script>-->
|
|
<!--var myChart11 = echarts.init(document.getElementById('month_R'));-->
|
|
<!--option = {-->
|
|
<!--color: ['rgba(67,165,197,0.3)','rgba(67,165,197,0.1)'],-->
|
|
<!--grid: {-->
|
|
<!--left: '0%',-->
|
|
<!--right: '0%',-->
|
|
<!--bottom: '5%',-->
|
|
<!--top:'5%',-->
|
|
<!--containLabel: true-->
|
|
<!--},-->
|
|
<!--xAxis: {-->
|
|
<!--type: 'category',-->
|
|
<!--boundaryGap: false,-->
|
|
<!--data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']-->
|
|
<!--},-->
|
|
<!--textStyle:{-->
|
|
<!--color:'#fff'-->
|
|
<!--},-->
|
|
<!--yAxis: {-->
|
|
<!--type: 'value',-->
|
|
<!--axisLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisTick:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--splitLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisLabel: {-->
|
|
<!--show: false //这行代码控制着坐标轴x轴的文字是否显示-->
|
|
<!--}-->
|
|
|
|
<!--},-->
|
|
<!--series: [{-->
|
|
<!--data: [3, 5, 4, 5, 3, 4, 3],-->
|
|
<!--type: 'line',-->
|
|
<!--areaStyle: {}-->
|
|
<!--}]-->
|
|
<!--};-->
|
|
<!--myChart11.setOption(option);-->
|
|
<!--</script>-->
|
|
<!--<div class="clear"></div>-->
|
|
<!--<span class="month_Label">-->
|
|
<!--今月报警 <span class="number_1">36</span> 个-->
|
|
<!--</span>-->
|
|
<!--<span class="month_Labe2">-->
|
|
<!--离线报警 <span class="number_2">15</span> 个-->
|
|
<!--</span>-->
|
|
<!--</div>-->
|
|
<!--<div class="click_year">-->
|
|
<!--<div class="year_left" id="year_L"></div>-->
|
|
<!--<script>-->
|
|
<!--var myChart13 = echarts.init(document.getElementById('year_L'));-->
|
|
<!--option = {-->
|
|
<!--color: ['rgba(255,164,45,0.6)','rgba(67,165,197,0.6)'],-->
|
|
<!--tooltip : {-->
|
|
<!--trigger: 'axis',-->
|
|
<!--axisPointer : { // 坐标轴指示器，坐标轴触发有效-->
|
|
<!--type : '' // 默认为直线，可选为：'line' | 'shadow'-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--grid: {-->
|
|
<!--left: '0%',-->
|
|
<!--right: '0%',-->
|
|
<!--bottom: '5%',-->
|
|
<!--top:'5%',-->
|
|
<!--containLabel: true-->
|
|
<!--},-->
|
|
<!--xAxis : [-->
|
|
<!--{-->
|
|
<!--type : 'category',-->
|
|
<!--data : ['报警设备', '复为设备'],-->
|
|
<!--axisTick: {-->
|
|
<!--alignWithLabel: true-->
|
|
<!--}-->
|
|
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--textStyle:{-->
|
|
<!--color:'#fff'-->
|
|
<!--},-->
|
|
|
|
<!--yAxis : [-->
|
|
<!--{-->
|
|
<!--type : 'value',-->
|
|
<!--axisLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisTick:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--splitLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisLabel: {-->
|
|
<!--show: false //这行代码控制着坐标轴x轴的文字是否显示-->
|
|
<!--}-->
|
|
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--series : [-->
|
|
<!--{-->
|
|
<!--name:'',-->
|
|
<!--type:'bar',-->
|
|
<!--barWidth: '20%',-->
|
|
<!--itemStyle: {-->
|
|
<!--emphasis: {-->
|
|
<!--barBorderRadius: 7-->
|
|
<!--},-->
|
|
<!--normal: {-->
|
|
<!--barBorderRadius: 7,-->
|
|
<!--color: new echarts.graphic.LinearGradient(-->
|
|
<!--0, 1, 0, 0,-->
|
|
<!--[-->
|
|
<!--{offset: 0, color: 'rgba(67,165,197,0.3)'},-->
|
|
<!--{offset: 1, color: 'rgba(67,165,197,0.6)'}-->
|
|
|
|
<!--]-->
|
|
<!--)-->
|
|
<!--}-->
|
|
|
|
<!--},-->
|
|
<!--data:[59, 35]-->
|
|
<!--}-->
|
|
<!--]-->
|
|
<!--};-->
|
|
<!--myChart13.setOption(option);-->
|
|
<!--</script>-->
|
|
<!--<div class="year_right" id="year_R"></div>-->
|
|
<!--<script>-->
|
|
<!--var myChart12 = echarts.init(document.getElementById('year_R'));-->
|
|
<!--option = {-->
|
|
<!--color: ['rgba(67,165,197,0.3)','rgba(67,165,197,0.1)'],-->
|
|
<!--grid: {-->
|
|
<!--left: '0%',-->
|
|
<!--right: '0%',-->
|
|
<!--bottom: '5%',-->
|
|
<!--top:'5%',-->
|
|
<!--containLabel: true-->
|
|
<!--},-->
|
|
<!--xAxis: {-->
|
|
<!--type: 'category',-->
|
|
<!--boundaryGap: false,-->
|
|
<!--data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']-->
|
|
<!--},-->
|
|
<!--textStyle:{-->
|
|
<!--color:'#fff'-->
|
|
<!--},-->
|
|
<!--yAxis: {-->
|
|
<!--type: 'value',-->
|
|
<!--axisLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisTick:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--splitLine:{-->
|
|
<!--show:false-->
|
|
<!--},-->
|
|
<!--axisLabel: {-->
|
|
<!--show: false //这行代码控制着坐标轴x轴的文字是否显示-->
|
|
<!--}-->
|
|
|
|
<!--},-->
|
|
<!--series: [{-->
|
|
<!--data: [23, 35, 14, 25, 13, 24, 33],-->
|
|
<!--type: 'line',-->
|
|
<!--areaStyle: {}-->
|
|
<!--}]-->
|
|
<!--};-->
|
|
<!--myChart12.setOption(option);-->
|
|
<!--</script>-->
|
|
<!--<div class="clear"></div>-->
|
|
<!--<span class="year_Label">-->
|
|
<!--今年报警 <span class="number_1">187</span> 个-->
|
|
<!--</span>-->
|
|
<!--<span class="year_Labe2">-->
|
|
<!--离线报警 <span class="number_2">46</span> 个-->
|
|
<!--</span>-->
|
|
<!--</div>-->
|
|
<!--<div class="clear"></div>-->
|
|
<!--</div>-->
|
|
<!--<div class="main_left_top_Statistics"></div>-->
|
|
<div class="top_left_1">
|
|
<div class="left_B" style="width: 100%;margin-bottom: 25px">
|
|
<div class="B_L">
|
|
今日报警总数：/次
|
|
<span>168</span>
|
|
</div>
|
|
<div class="B_R">
|
|
今日复位总数：/次
|
|
<span>125</span>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="left_B">
|
|
<div class="T_3"></div>
|
|
<div class="T_text">
|
|
<span>用电报警/复位:/次</span>
|
|
<span class=" number_T">112/<b>95</b></span>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="left_H">
|
|
<div class="T_4"></div>
|
|
<div class="T_text">
|
|
<span>用水报警/复位:/次</span>
|
|
<span class=" number_T">14/<b>11</b></span>
|
|
</div>
|
|
</div>
|
|
<div class="left_B">
|
|
<div class="T_5"></div>
|
|
<div class="T_text">
|
|
<span>烟感报警/复位:/次</span>
|
|
<span class=" number_T">24/<b>15</b></span>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="left_H">
|
|
<div class="T_1"></div>
|
|
<div class="T_text">
|
|
<span>其他报警/复位:/次</span>
|
|
<span class=" number_T">18/<b>9</b></span>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="main_left_center">
|
|
<div class="main_left_center_title">
|
|
<span class="main_left_center_title_text size_20">
|
|
消防物联网设备统计
|
|
</span>
|
|
</div>
|
|
<div class="main_left_center_E" id="main_left_centerE"></div>
|
|
<script>
|
|
var myChart3 = echarts.init(document.getElementById('main_left_centerE'));
|
|
var colors = ['#5793f3', '#d14a61', '#675bba'];
|
|
|
|
option = {
|
|
tooltip : {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#09a7ff'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data:['隐患数量/个','安装数量/个'],
|
|
textStyle:{//图例文字的样式
|
|
color:'#fff'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
right: '3%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
boundaryGap : false,
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data : ['用电','消防用水','烟感','其他']
|
|
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine:{
|
|
show:false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#00FF00',
|
|
width:1//这里是为了突出显示加上的
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'隐患数量/个',
|
|
type:'line',
|
|
smooth:true,
|
|
stack: '总量',
|
|
itemStyle : {
|
|
normal : {
|
|
lineStyle:{
|
|
color:'#ffa72f'
|
|
}
|
|
}
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(255, 169, 47, 0.7)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(255, 169, 47, 0.1)'
|
|
}])
|
|
},
|
|
data:[16, 11, 9, 8]
|
|
},
|
|
{
|
|
name:'安装数量/个',
|
|
type:'line',
|
|
smooth:true,
|
|
stack: '总量',
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(7, 167, 255 ,0.7)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(7, 167, 255 ,0.1)'
|
|
}])
|
|
},
|
|
itemStyle : {
|
|
normal : {
|
|
lineStyle:{
|
|
color:'#57a1f8'
|
|
}
|
|
}
|
|
},
|
|
|
|
data:[20, 30, 15, 21]
|
|
}
|
|
|
|
]
|
|
};
|
|
myChart3.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div class="main_left_bottom">
|
|
<div class="main_left_bottom_title">
|
|
<span class="main_left_bottom_title_text size_20">
|
|
行业统计分析
|
|
</span>
|
|
</div>
|
|
<div class="main_left_center_E" id="main_left_bottomE"></div>
|
|
<script>
|
|
$(function () {
|
|
$('#main_left_bottomE').highcharts({
|
|
chart: {
|
|
type: 'pie',
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
marginTop:'10',
|
|
options3d: {
|
|
enabled: true,
|
|
alpha: 55,//调整立体倾斜角度
|
|
beta: 0
|
|
}
|
|
},
|
|
tooltip: {
|
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: false,
|
|
cursor: 'pointer',
|
|
depth: 20,//调整立体高度
|
|
dataLabels: {
|
|
enabled: true,
|
|
// format: '{point.name}:{point.percentage:.1f}%',
|
|
color:'#fff',
|
|
// borderRadius:4,
|
|
// borderWidth: 2,
|
|
fontSize:50
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
name: '行业统计',
|
|
size:'120%',
|
|
data: [
|
|
{
|
|
y: 20,
|
|
name: "水利、环境和公共设施管理业",
|
|
color: "#5AEBB4"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "科学研究、技术服务和地质勘查业",
|
|
color: "#06A6FC"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "租凭和商务服务业",
|
|
color: "#FEA82F"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "金融、保险业",
|
|
color: "#F3E927"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "住宿、餐饮业",
|
|
color: "#AC4FDB"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "批发和零售业",
|
|
color: "#FE5E60"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "计算机服务和软件业",
|
|
color: "#0797ed"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "建筑业",
|
|
color: "#5ae9b3"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "环境和公共设施管理业",
|
|
color: "#11ee7d"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "电力、热力、燃气及水的生产和供应",
|
|
color: "#aae9c2"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "制造业",
|
|
color: "#8b98ba"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "采矿业",
|
|
color: "#898989"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "农、林、牧、渔业",
|
|
color: "#889bfd"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "其他",
|
|
color: "#067efa"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "综合",
|
|
color: "#e888fd"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "文化、体育、娱乐业",
|
|
color: "#9b101a"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "卫生、社会保障和社会服务业",
|
|
color: "#ff7e00"
|
|
}
|
|
]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!--<script>
|
|
var myChart4 = echarts.init(document.getElementById('main_left_bottomE'));
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
},
|
|
graphic:[{
|
|
type:"text",
|
|
left:"44%",
|
|
top:"44%",
|
|
id:"nxpjvalue",
|
|
z:10,
|
|
bouding: 'raw',//设置是否整体限制在父节点范围内
|
|
// 是否可以被拖拽。
|
|
draggable: false,
|
|
style:{
|
|
text:"行业统计",
|
|
x: 100,
|
|
y: 200,
|
|
textAlign:"center",
|
|
font: '1.2em "Fira Sans", sans-serif',
|
|
fill:'#FFF'
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
name:'',
|
|
type:'pie',
|
|
radius: ['60%', '80%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
|
|
emphasis: {
|
|
name:'行业',
|
|
show: false,
|
|
textStyle: {
|
|
fontSize: '15',
|
|
fontWeight: 'bold'
|
|
}
|
|
}
|
|
},
|
|
normal: {
|
|
show: true,
|
|
position: 'center'
|
|
},
|
|
data:[
|
|
{value:335, name:'水利、环境和公共设施管理业',itemStyle:{color:'#fff'}},
|
|
{value:310, name:'科学研究、技术服务和地质勘查业',itemStyle:{color:'#1ab0fc'}},
|
|
{value:234, name:'租凭和商务服务业',itemStyle:{color:'#c4505d'}},
|
|
{value:135, name:'金融、保险业',itemStyle:{color:'#dc5afa'}},
|
|
{value:548, name:'住宿、餐饮业',itemStyle:{color:'#cdc82e'}},
|
|
{value:335, name:'批发和零售业',itemStyle:{color:'#fda72e'}},
|
|
{value:310, name:'计算机服务和软件业',itemStyle:{color:'#0797ed'}},
|
|
{value:234, name:'建筑业',itemStyle:{color:'#5ae9b3'}},
|
|
{value:335, name:'环境和公共设施管理业',itemStyle:{color:'#11ee7d'}},
|
|
{value:155, name:'电力、热力、燃气及水的生产和供应',itemStyle:{color:'#aae9c2'}},
|
|
{value:310, name:'制造业',itemStyle:{color:'#8b98ba'}},
|
|
{value:234, name:'采矿业',itemStyle:{color:'#898989'}},
|
|
{value:135, name:'农、林、牧、渔业',itemStyle:{color:'#889bfd'}},
|
|
{value:335, name:'其他',itemStyle:{color:'#067efa'}},
|
|
{value:310, name:'综合',itemStyle:{color:'#e888fd'}},
|
|
{value:234, name:'文化、体育、娱乐业',itemStyle:{color:'#9b101a'}},
|
|
{value:335, name:'卫生、社会保障和社会服务业',itemStyle:{color:'#ff7e00'}}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
myChart4.setOption(option);
|
|
</script>-->
|
|
</div>
|
|
</div>
|
|
<div class="main_center">
|
|
<!-- 导航 -->
|
|
<div class="menu">
|
|
<ul>
|
|
<li><a href="" style="padding-left: 50px;" class="current"><img src="${ctx}/style/images_0/img/icon1.png">首页</a></li>
|
|
<li><a href=""><img src="${ctx}/style/images_0/img/icon2.png">消防隐患统计</a></li>
|
|
<li><a href=""><img src="${ctx}/style/images_0/img/icon3.png">社会单位统计</a></li>
|
|
<li><a href=""><img src="${ctx}/style/images_0/img/icon4.png">物联报警统计</a></li>
|
|
<li><a href=""><img src="${ctx}/style/images_0/img/icon5.png">消防网格化</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="Map">
|
|
<div class="Map_T1">
|
|
</div>
|
|
<div class="Map_T2">
|
|
|
|
</div>
|
|
<div class="Map_T3">
|
|
|
|
</div>
|
|
<div class="Map_T4">
|
|
|
|
</div>
|
|
<div class="Map_title" style="position: absolute;left: 8%">
|
|
<span class="Map_title1">
|
|
<div class="title_one size_14">
|
|
设备完好率
|
|
</div>
|
|
<div class="titleO_number">
|
|
<div class="numberL">98%</div>
|
|
<div class="numberR size_12">
|
|
<div class="year_B">年对比：<b class="B_1">20%</b>
|
|
<img src="${ctx}/style/images_0/img/B_2.png" /></div>
|
|
<div class="month_B">月对比：<b class="B_2">2%</b>
|
|
<img src="${ctx}/style/images_0/img/B_1.png" /></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</span>
|
|
<span class="Map_title1">
|
|
<div class="title_one size_14">
|
|
消控室在岗率
|
|
</div>
|
|
<div class="titleO_number">
|
|
<div class="numberL">89%</div>
|
|
<div class="numberR size_12">
|
|
<div class="year_B">年对比：<b class="B_1">6%</b>
|
|
<img src="${ctx}/style/images_0/img/B_2.png" /></div>
|
|
<div class="month_B">月对比：<b class="B_2">4%</b>
|
|
<img src="${ctx}/style/images_0/img/B_2.png" /></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</span>
|
|
<span class="Map_title1">
|
|
<div class="title_one size_14">
|
|
巡查合格率
|
|
</div>
|
|
<div class="titleO_number">
|
|
<div class="numberL">84%</div>
|
|
<div class="numberR size_12">
|
|
<div class="year_B">年对比：<b class="B_1">2%</b>
|
|
<img src="${ctx}/style/images_0/img/B_2.png" /></div>
|
|
<div class="month_B">月对比：<b class="B_2">1%</b>
|
|
<img src="${ctx}/style/images_0/img/B_1.png" /></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</span>
|
|
<span class="Map_title1">
|
|
<div class="title_one size_14">
|
|
误报率
|
|
</div>
|
|
<div class="titleO_number">
|
|
<div class="numberL">24%</div>
|
|
<div class="numberR size_12">
|
|
<div class="year_B">年对比：<b class="B_1">2%</b>
|
|
<img src="${ctx}/style/images_0/img/B_2.png" /></div>
|
|
<div class="month_B">月对比：<b class="B_2">1%</b>
|
|
<img src="${ctx}/style/images_0/img/B_2.png" /></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</span>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div id="mainMap" style="width: 100%; height: 100%;position: absolute;left: 0;top: 0"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
require.config({
|
|
paths: {
|
|
echarts: '${ctx}/js'
|
|
}
|
|
});
|
|
|
|
// Step:4 require echarts and use it in the callback.
|
|
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
|
|
require(
|
|
[
|
|
'echarts',
|
|
'echarts/chart/map'
|
|
],
|
|
function (ec) {
|
|
// --- 地图 ---
|
|
var myChart7 = ec.init(document.getElementById('mainMap'));
|
|
myChart7.setOption({
|
|
|
|
series : [
|
|
{
|
|
name: '全国',
|
|
type: 'map',
|
|
hoverable: true,
|
|
roam:false,
|
|
mapType: 'china',
|
|
itemStyle:{
|
|
normal:{
|
|
borderColor:'rgba(7,166,255,1)',
|
|
borderWidth:0.5,
|
|
areaStyle:{
|
|
color: 'rgba(43,58,88,0.3)'
|
|
},
|
|
label:{
|
|
show:true,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
borderWidth: .5,
|
|
borderColor: '#fff',
|
|
areaStyle:{
|
|
color: 'rgba(67,123,229,0.5)'
|
|
},
|
|
label: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data:[
|
|
|
|
],
|
|
geoCoord: {
|
|
'上海': [121.4648,31.2891],
|
|
'东莞': [113.8953,22.901],
|
|
'东营': [118.7073,37.5513],
|
|
'中山': [113.4229,22.478],
|
|
'临汾': [111.4783,36.1615],
|
|
'临沂': [118.3118,35.2936],
|
|
'丹东': [124.541,40.4242],
|
|
'丽水': [119.5642,28.1854],
|
|
'乌鲁木齐': [87.9236,43.5883],
|
|
'佛山': [112.8955,23.1097],
|
|
'保定': [115.0488,39.0948],
|
|
'兰州': [103.5901,36.3043],
|
|
'包头': [110.3467,41.4899],
|
|
'北京': [116.4551,40.2539],
|
|
'北海': [109.314,21.6211],
|
|
'南京': [118.8062,31.9208],
|
|
'南宁': [108.479,23.1152],
|
|
'南昌': [116.0046,28.6633],
|
|
'南通': [121.1023,32.1625],
|
|
'厦门': [118.1689,24.6478],
|
|
'台州': [121.1353,28.6688],
|
|
'合肥': [117.29,32.0581],
|
|
'呼和浩特': [111.4124,40.4901],
|
|
'咸阳': [108.4131,34.8706],
|
|
'哈尔滨': [127.9688,45.368],
|
|
'唐山': [118.4766,39.6826],
|
|
'嘉兴': [120.9155,30.6354],
|
|
'大同': [113.7854,39.8035],
|
|
'大连': [122.2229,39.4409],
|
|
'天津': [117.4219,39.4189],
|
|
'太原': [112.3352,37.9413],
|
|
'威海': [121.9482,37.1393],
|
|
'宁波': [121.5967,29.6466],
|
|
'宝鸡': [107.1826,34.3433],
|
|
'宿迁': [118.5535,33.7775],
|
|
'常州': [119.4543,31.5582],
|
|
'广州': [113.5107,23.2196],
|
|
'廊坊': [116.521,39.0509],
|
|
'延安': [109.1052,36.4252],
|
|
'张家口': [115.1477,40.8527],
|
|
'徐州': [117.5208,34.3268],
|
|
'德州': [116.6858,37.2107],
|
|
'惠州': [114.6204,23.1647],
|
|
'成都': [103.9526,30.7617],
|
|
'扬州': [119.4653,32.8162],
|
|
'承德': [117.5757,41.4075],
|
|
'拉萨': [91.1865,30.1465],
|
|
'无锡': [120.3442,31.5527],
|
|
'日照': [119.2786,35.5023],
|
|
'昆明': [102.9199,25.4663],
|
|
'杭州': [119.5313,29.8773],
|
|
'枣庄': [117.323,34.8926],
|
|
'柳州': [109.3799,24.9774],
|
|
'株洲': [113.5327,27.0319],
|
|
'武汉': [114.3896,30.6628],
|
|
'汕头': [117.1692,23.3405],
|
|
'江门': [112.6318,22.1484],
|
|
'沈阳': [123.1238,42.1216],
|
|
'沧州': [116.8286,38.2104],
|
|
'河源': [114.917,23.9722],
|
|
'泉州': [118.3228,25.1147],
|
|
'泰安': [117.0264,36.0516],
|
|
'泰州': [120.0586,32.5525],
|
|
'济南': [117.1582,36.8701],
|
|
'济宁': [116.8286,35.3375],
|
|
'海口': [110.3893,19.8516],
|
|
'淄博': [118.0371,36.6064],
|
|
'淮安': [118.927,33.4039],
|
|
'深圳': [114.5435,22.5439],
|
|
'清远': [112.9175,24.3292],
|
|
'温州': [120.498,27.8119],
|
|
'渭南': [109.7864,35.0299],
|
|
'湖州': [119.8608,30.7782],
|
|
'湘潭': [112.5439,27.7075],
|
|
'滨州': [117.8174,37.4963],
|
|
'潍坊': [119.0918,36.524],
|
|
'烟台': [120.7397,37.5128],
|
|
'玉溪': [101.9312,23.8898],
|
|
'珠海': [113.7305,22.1155],
|
|
'盐城': [120.2234,33.5577],
|
|
'盘锦': [121.9482,41.0449],
|
|
'石家庄': [114.4995,38.1006],
|
|
'福州': [119.4543,25.9222],
|
|
'秦皇岛': [119.2126,40.0232],
|
|
'绍兴': [120.564,29.7565],
|
|
'聊城': [115.9167,36.4032],
|
|
'肇庆': [112.1265,23.5822],
|
|
'舟山': [122.2559,30.2234],
|
|
'苏州': [120.6519,31.3989],
|
|
'莱芜': [117.6526,36.2714],
|
|
'菏泽': [115.6201,35.2057],
|
|
'营口': [122.4316,40.4297],
|
|
'葫芦岛': [120.1575,40.578],
|
|
'衡水': [115.8838,37.7161],
|
|
'衢州': [118.6853,28.8666],
|
|
'西宁': [101.4038,36.8207],
|
|
'西安': [109.1162,34.2004],
|
|
'贵阳': [106.6992,26.7682],
|
|
'连云港': [119.1248,34.552],
|
|
'邢台': [114.8071,37.2821],
|
|
'邯郸': [114.4775,36.535],
|
|
'郑州': [113.4668,34.6234],
|
|
'鄂尔多斯': [108.9734,39.2487],
|
|
'重庆': [107.7539,30.1904],
|
|
'金华': [120.0037,29.1028],
|
|
'铜川': [109.0393,35.1947],
|
|
'银川': [106.3586,38.1775],
|
|
'镇江': [119.4763,31.9702],
|
|
'长春': [125.8154,44.2584],
|
|
'长沙': [113.0823,28.2568],
|
|
'长治': [112.8625,36.4746],
|
|
'阳泉': [113.4778,38.0951],
|
|
'青岛': [120.4651,36.3373],
|
|
'韶关': [113.7964,24.7028]
|
|
},
|
|
markPoint : {
|
|
symbol:'emptyCircle',
|
|
symbolSize : function (v){
|
|
return 10 + v/10
|
|
},
|
|
effect : {
|
|
show: true,
|
|
shadowBlur : 0
|
|
},
|
|
itemStyle:{
|
|
normal:{
|
|
label:{show:false}
|
|
},
|
|
emphasis: {
|
|
label:{position:'top'}
|
|
}
|
|
},
|
|
data : [
|
|
{name:'乌鲁木齐',value:35},
|
|
{name:'成都',value:30},
|
|
{name:'呼和浩特',value:30},
|
|
{name:'西安',value:20},
|
|
{name:'兰州',value:25},
|
|
{name:'福州',value:20},
|
|
{name:'北京',value:20},
|
|
{name:'昆明',value:5}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
name: '泰安 Top10',
|
|
type: 'map',
|
|
mapType: 'china',
|
|
data:[],
|
|
markLine : {
|
|
smooth:true,
|
|
effect : {
|
|
show: true,
|
|
scaleSize: 1,
|
|
period: 30,
|
|
color: '#fff',
|
|
shadowBlur: 10
|
|
},
|
|
itemStyle : {
|
|
normal: {
|
|
label:{show:false},
|
|
borderWidth:1,
|
|
lineStyle: {
|
|
type: 'solid',
|
|
shadowBlur: 10
|
|
}
|
|
}
|
|
},
|
|
data : [
|
|
[{name:'乌鲁木齐'}, {name:'泰安',value:35}],
|
|
[{name:'成都'}, {name:'泰安',value:30}],
|
|
[{name:'呼和浩特'}, {name:'泰安',value:30}],
|
|
[{name:'西安'}, {name:'泰安',value:20}],
|
|
[{name:'兰州'}, {name:'泰安',value:25}],
|
|
[{name:'福州'}, {name:'泰安',value:20}],
|
|
[{name:'北京'}, {name:'泰安',value:20}],
|
|
[{name:'昆明'}, {name:'泰安',value:5}]
|
|
]
|
|
},
|
|
markPoint : {
|
|
symbol:'emptyCircle',
|
|
symbolSize : function (v){
|
|
return 0.1
|
|
},
|
|
effect : {
|
|
show: false,
|
|
shadowBlur : 0
|
|
},
|
|
itemStyle:{
|
|
normal:{
|
|
label:{show:true,
|
|
position:'top',
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
label:{show:false}
|
|
}
|
|
},
|
|
data : [
|
|
{name:'乌鲁木齐',value:35},
|
|
{name:'成都',value:30},
|
|
{name:'呼和浩特',value:30},
|
|
{name:'西安',value:20},
|
|
{name:'兰州',value:25},
|
|
{name:'福州',value:20},
|
|
{name:'北京',value:20},
|
|
{name:'昆明',value:5}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
<div class="main_center_B">
|
|
<div class="main_center_BL">
|
|
<div class="main_center_title size_20">火灾隐患分析</div>
|
|
<div class="main_center_BE" id="main_center_BE"></div>
|
|
<!--<script>
|
|
|
|
$(function () {
|
|
$('#main_center_BE').highcharts({
|
|
chart: {
|
|
type: 'pie',
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
options3d: {
|
|
enabled: true,
|
|
alpha: 55,//调整立体倾斜角度
|
|
beta: 0
|
|
}
|
|
},
|
|
tooltip: {
|
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: false,
|
|
cursor: 'pointer',
|
|
depth: 20,//调整立体高度
|
|
dataLabels: {
|
|
enabled: true,
|
|
// format: '{point.name}:{point.percentage:.1f}%',
|
|
color:'#fff',
|
|
// borderRadius:4,
|
|
// borderWidth: 2,
|
|
fontSize:50
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
name: '消防隐患占比',
|
|
data: [
|
|
{
|
|
y: 20,
|
|
name: "作业场所",
|
|
color: "#5AEBB4"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "消防设施缺陷",
|
|
color: "#06A6FC"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "特种设备缺陷",
|
|
color: "#FEA82F"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "专用设备缺陷",
|
|
color: "#F3E927"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "电气设备缺陷",
|
|
color: "#AC4FDB"
|
|
},
|
|
{
|
|
y: 20,
|
|
name: "监控设备缺陷",
|
|
color: "#FE5E60"
|
|
},
|
|
{
|
|
y: 90,
|
|
name: "其他",
|
|
color: "#1BB1FE"
|
|
}
|
|
]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!--<script type="text/javascript">-->
|
|
<script type="text/javascript">
|
|
var myChart_main_center_BE = echarts.init(document.getElementById('main_center_BE'));
|
|
var stylelb = {
|
|
show: false,
|
|
normal: {
|
|
color: 'rgba(0,0,0,0)',
|
|
label: { show: false },
|
|
labelLine: { show: false }
|
|
},
|
|
emphasis: {
|
|
color: 'rgba(0,0,0,0)'
|
|
|
|
}
|
|
};
|
|
var option_main_center_BE = {
|
|
tooltip: {
|
|
show: true,
|
|
formatter: " {b} : {c} "
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'right',
|
|
top: 30,
|
|
data: [{ name: '作业场所', textStyle: { color: "#5AEBB4"} }
|
|
, { name: '消防设施缺陷', textStyle: { color: "#06A6FC"} }
|
|
, { name: '特种设备缺陷', textStyle: { color: "#FEA82F"} }
|
|
, { name: '专用设备缺陷', textStyle: { color: "#F3E927"} }
|
|
, { name: '电气设备缺陷', textStyle: { color: "#AC4FDB"} }
|
|
, { name: '监控设备缺陷', textStyle: { color: "#FE5E60"} }
|
|
, { name: '其他', textStyle: { color: "#1BB1FE"}}]
|
|
},
|
|
|
|
calculable: true,
|
|
series: [
|
|
|
|
{
|
|
//name: '1',
|
|
type: 'pie',
|
|
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: -200,
|
|
length2: -170
|
|
}
|
|
},
|
|
label: {
|
|
position: 'inter',
|
|
normal: {
|
|
backgroundColor: 'rgba(89,235,178,0.2)',
|
|
borderColor: 'rgba(89,235,178,1)',
|
|
shadowBlur: 3,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
shadowColor: '#5AEBB4',
|
|
borderWidth: 2,
|
|
borderRadius: 3,
|
|
color: '#fff',
|
|
formatter: ' {c} ',
|
|
padding: [5, 10]
|
|
}
|
|
},
|
|
|
|
startAngle: 180,
|
|
radius: ['146', '150'],
|
|
center: ['40%', '30%'],
|
|
data: [
|
|
{ value: 50, itemStyle: stylelb, tooltip: { formatter: function (a) { return "" } }, label: { show: false }, labelLine: { show: false} },
|
|
{ value: 50, name: '作业场所', itemStyle: { normal: { color: "#5AEBB4"}} }
|
|
]
|
|
}
|
|
,
|
|
{
|
|
//name: '2',
|
|
type: 'pie',
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: -150,
|
|
length2: -140
|
|
}
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'inter',
|
|
normal: {
|
|
backgroundColor: 'rgba(6,165,255,0.2)',
|
|
borderColor: 'rgba(6,165,255,1)',
|
|
shadowBlur: 3,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
shadowColor: '#06A6FC',
|
|
borderWidth: 2,
|
|
borderRadius: 3,
|
|
color: '#fff',
|
|
formatter: ' {c} ',
|
|
padding: [5, 10]
|
|
}
|
|
},
|
|
startAngle: 180,
|
|
radius: ['136', '140'],
|
|
center: ['40%', '30%'],
|
|
data: [
|
|
{ value: 55, itemStyle: stylelb, tooltip: { formatter: function (a) { return "" } }, label: { show: false }, labelLine: { show: false} },
|
|
{ value: 45, name: '消防设施缺陷', itemStyle: { normal: { color: "#06A6FC"}} }
|
|
]
|
|
}
|
|
,
|
|
{
|
|
name: '特种设备缺陷',
|
|
type: 'pie',
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: -98,
|
|
length2: -148
|
|
}
|
|
},
|
|
label: {
|
|
//position: 'end',
|
|
normal: {
|
|
backgroundColor: 'rgba(255,167,49,0.2)',
|
|
borderColor: 'rgba(255,167,49,1)',
|
|
shadowBlur: 3,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
shadowColor: '#FEA82F',
|
|
borderWidth: 2,
|
|
borderRadius: 3,
|
|
color: '#fff',
|
|
formatter: ' {c} ',
|
|
padding: [5, 10]
|
|
}
|
|
},
|
|
|
|
startAngle: 180,
|
|
radius: ['126', '130'],
|
|
center: ['40%', '30%'],
|
|
data: [
|
|
{ value: 60, itemStyle: stylelb, tooltip: { formatter: function (a) { return "" } }, label: { show: false }, labelLine: { show: false} },
|
|
|
|
{ value: 40, name: '特种设备缺陷', itemStyle: { normal: { color: "#FEA82F"}} }
|
|
]
|
|
}
|
|
,
|
|
{
|
|
//name: '专用设备缺陷',
|
|
type: 'pie',
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: -60,
|
|
length2: -6
|
|
}
|
|
},
|
|
label: {
|
|
|
|
normal: {
|
|
backgroundColor: 'rgba(244,234,40,0.2)',
|
|
borderColor: 'rgba(244,234,40,1)',
|
|
shadowBlur: 3,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
shadowColor: '#F3E927',
|
|
borderWidth: 2,
|
|
borderRadius: 3,
|
|
color: '#fff',
|
|
formatter: ' {c} ',
|
|
padding: [5, 10]
|
|
}
|
|
},
|
|
startAngle: 180,
|
|
radius: ['116', '120'],
|
|
center: ['40%', '30%'],
|
|
data: [
|
|
{ value: 65, itemStyle: stylelb, tooltip: { formatter: function (a) { return "" } }, label: { show: false }, labelLine: { show: false} },
|
|
|
|
{ value: 35, name: '专用设备缺陷', itemStyle: { normal: { color: "#F3E927"}} }
|
|
|
|
]
|
|
}
|
|
,
|
|
{
|
|
//name: '5',
|
|
type: 'pie',
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: -90,
|
|
length2: 17
|
|
}
|
|
},
|
|
label: {
|
|
//position: 'end',
|
|
normal: {
|
|
backgroundColor: 'rgba(216,91,253,0.2)',
|
|
borderColor: 'rgba(216,91,253,1)',
|
|
shadowBlur: 2,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
shadowColor: '#AC4FDB',
|
|
borderWidth: 2,
|
|
borderRadius: 3,
|
|
color: '#fff',
|
|
formatter: ' {c} ',
|
|
padding: [5, 10]
|
|
}
|
|
},
|
|
startAngle: 180,
|
|
radius: ['106', '110'],
|
|
center: ['40%', '30%'],
|
|
data: [
|
|
{ value: 70, itemStyle: stylelb, tooltip: { formatter: function (a) { return "" } }, label: { show: false }, labelLine: { show: false} },
|
|
|
|
{ value: 30, name: '电气设备缺陷', itemStyle: { normal: { color: "#AC4FDB"}} }
|
|
]
|
|
}
|
|
,
|
|
{
|
|
//name: '6',
|
|
type: 'pie',
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: -120,
|
|
length2: 80
|
|
}
|
|
},
|
|
label: {
|
|
position: 'end',
|
|
normal: {
|
|
backgroundColor: 'rgba(255,93,94,0.2)',
|
|
borderColor: 'rgba(255,93,94,1)',
|
|
shadowBlur: 3,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
shadowColor: '#FE5E60',
|
|
borderWidth: 2,
|
|
borderRadius: 3,
|
|
color: '#fff',
|
|
formatter: ' {c} ',
|
|
padding: [5, 10]
|
|
}
|
|
},
|
|
startAngle: 180,
|
|
radius: ['96', '100'],
|
|
center: ['40%', '30%'],
|
|
data: [
|
|
{ value: 75, itemStyle: stylelb, tooltip: { formatter: function (a) { return "" } }, label: { show: false }, labelLine: { show: false} },
|
|
{ value: 25, name: '监控设备缺陷', itemStyle: { normal: { color: "#FE5E60"}} }
|
|
]
|
|
}
|
|
,
|
|
{
|
|
//name: '7',
|
|
type: 'pie',
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: 20,
|
|
length2: -200
|
|
}
|
|
},
|
|
label: {
|
|
//position: 'end',
|
|
normal: {
|
|
backgroundColor: 'rgba(27,177,254,0.2)',
|
|
borderColor: 'rgba(27,177,254,1)',
|
|
shadowBlur: 3,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
shadowColor: '#1BB1FE',
|
|
borderWidth: 2,
|
|
borderRadius: 3,
|
|
color: '#fff',
|
|
formatter: ' {c} ',
|
|
padding: [5, 10]
|
|
}
|
|
},
|
|
startAngle: 180,
|
|
radius: ['86', '90'],
|
|
center: ['40%', '30%'],
|
|
data: [
|
|
{ value: 80, itemStyle: stylelb, tooltip: { formatter: function (a) { return "" } }, label: { show: false }, labelLine: { show: false} },
|
|
|
|
{ value: 20, name: '其他', itemStyle: { normal: { color: "#1BB1FE"}} }
|
|
]
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
myChart_main_center_BE.setOption(option_main_center_BE);
|
|
</script>
|
|
|
|
<!--</script>-->
|
|
</div>
|
|
<div class="main_center_BR">
|
|
<div class="main_center_title size_20">火灾隐患分布</div>
|
|
<div class="main_center_BE" id="main_center_BER">
|
|
<img src="${ctx}/style/images_0/img/YJT.png" width="100%" height="98%"/>
|
|
</div>
|
|
<!--<script>-->
|
|
<!--var myChart16 = echarts.init(document.getElementById('main_center_BER'));-->
|
|
<!--$.get('data/asset/data/hangzhou-tracks.json', function (data) {-->
|
|
|
|
<!--var points = [].concat.apply([], data.map(function (track) {-->
|
|
<!--return track.map(function (seg) {-->
|
|
<!--return seg.coord.concat([1]);-->
|
|
<!--});-->
|
|
<!--}));-->
|
|
<!--option = {-->
|
|
<!--animation: false,-->
|
|
<!--bmap: {-->
|
|
<!--center: [120.13066322374, 30.240018034923],-->
|
|
<!--zoom: 14,-->
|
|
<!--roam: true-->
|
|
<!--},-->
|
|
<!--visualMap: {-->
|
|
<!--show: false,-->
|
|
<!--top: 'top',-->
|
|
<!--min: 0,-->
|
|
<!--max: 5,-->
|
|
<!--seriesIndex: 0,-->
|
|
<!--calculable: true,-->
|
|
<!--inRange: {-->
|
|
<!--color: ['blue', 'blue', 'green', 'yellow', 'red']-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--series: [{-->
|
|
<!--type: 'heatmap',-->
|
|
<!--coordinateSystem: 'bmap',-->
|
|
<!--data: points,-->
|
|
<!--pointSize: 5,-->
|
|
<!--blurSize: 6-->
|
|
<!--}]-->
|
|
<!--};-->
|
|
<!--if (!app.inNode) {-->
|
|
<!--// 添加百度地图插件-->
|
|
<!--var bmap = myChart16.getModel().getComponent('bmap').getBMap();-->
|
|
<!--bmap.addControl(new BMap.MapTypeControl());-->
|
|
<!--}-->
|
|
<!--});-->
|
|
<!--myChart16.setOption(option);-->
|
|
<!--</script>-->
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
<div class="main_right">
|
|
<div class="main_right_top">
|
|
<div class="main_right_top_title">
|
|
<span class="main_right_top_title_text size_20">
|
|
火灾起因分类
|
|
</span>
|
|
</div>
|
|
<div class="main_right_top_E" id="main_right_topE"></div>
|
|
<script type="text/javascript">
|
|
var myChart6 = echarts.init(document.getElementById('main_right_topE'));
|
|
|
|
var radar_option = {
|
|
radar : [
|
|
{
|
|
name: { show: true,textStyle:{fontSize:16,color:"#fff"}},
|
|
indicator : [
|
|
{text : '设备故障', max : 100,color:'#fff'},
|
|
{text : '生产作业不慎', max : 100,color:'#fff'},
|
|
{text : '吸烟', max : 100,color:'#fff'},
|
|
{text : '玩火', max : 100,color:'#fff'},
|
|
{text : '电气火宅', max : 100,color:'#fff'},
|
|
{text : '雷击', max : 100,color:'#fff'},
|
|
{text : '生活用火不慎', max : 100,color:'#fff'}
|
|
],
|
|
splitArea : {
|
|
show : true,
|
|
areaStyle : {
|
|
color: ['rgba(8,56,102,0.8)', 'rgba(9,82,137,0.5)','rgba(8,56,102,0.5)', 'rgba(9,82,137,0.5)','rgba(8,56,102,0.5)', 'rgba(9,82,137,0.5)']
|
|
// 图表背景网格的颜色
|
|
}
|
|
},
|
|
center : ['50%','55%'],
|
|
radius : 92
|
|
//半径，可放大放小雷达图
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'',
|
|
type: 'radar',//图表类型 radar为雷达图
|
|
itemStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color :"#87cefa",
|
|
width : 2
|
|
},
|
|
areaStyle: {
|
|
color:"#3c93d3",
|
|
type: 'default'
|
|
}
|
|
}
|
|
},
|
|
symbolSize :6,
|
|
data : [{
|
|
value:[70,60,55,72,64,80,70],
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter:function(params) {
|
|
return params.value;
|
|
},
|
|
textStyle:{
|
|
color:'#fff'
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(255,225,0,.3)',
|
|
lineStyle: {
|
|
color: 'rgba(255,0,0,.3)'
|
|
},
|
|
areaStyle: {
|
|
type: 'default',
|
|
opacity: 0.8, // 图表中各个图区域的透明度
|
|
color: '#fff' // 图表中各个图区域的颜色
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
]
|
|
};
|
|
myChart6.setOption(radar_option);
|
|
</script>
|
|
|
|
</div>
|
|
<div class="main_right_bottom">
|
|
<div class="main_right_bottom_title">
|
|
<span class="main_right_bottom_title_text size_20">
|
|
行政区划数据统计
|
|
</span>
|
|
</div>
|
|
<div class="main_right_bottom_E" id="main_right_bottomE"></div>
|
|
<script>
|
|
var myChart5 = echarts.init(document.getElementById('main_right_bottomE'));
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['隐患数量/个', '安装数量/个'],
|
|
textStyle:{//图例文字的样式
|
|
color:'#fff'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
right: '3%',
|
|
bottom: '0',
|
|
top:'10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.04],
|
|
axisLine:{
|
|
show:true,
|
|
lineStyle:{
|
|
color:'#00FF00',
|
|
width:1
|
|
}
|
|
},
|
|
axisTick:{
|
|
lineStyle:{
|
|
color:'#00FF00',
|
|
width:1
|
|
}
|
|
},
|
|
splitLine:{
|
|
show:true
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: [' 刘杜镇','汶南镇','龙廷镇','东都镇','小协镇','翟镇','泉沟镇','羊流镇','果都镇','西张庄镇','天宝镇','楼德镇'],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#00FF00',
|
|
width:1//这里是为了突出显示加上的
|
|
}
|
|
}
|
|
},
|
|
textStyle:{
|
|
color:'#fff'
|
|
},
|
|
series: [
|
|
{
|
|
name:'隐患数量/个',
|
|
type:'bar',
|
|
barWidth: '20%',
|
|
data: [8, 3, 9, 10, 13, 6, 4, 13, 2, 11, 5, 6],
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: 7
|
|
},
|
|
normal: {
|
|
barBorderRadius: 7,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 1, 0,
|
|
[
|
|
{offset: 0, color: '#f6c684'},
|
|
{offset: 1, color: '#df8204'}
|
|
]
|
|
)
|
|
}
|
|
|
|
}},
|
|
|
|
{
|
|
name: '安装数量/个',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
data: [9, 13, 16, 18, 20, 23, 25, 26, 28, 31, 32, 35],
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: 7
|
|
},
|
|
normal: {
|
|
barBorderRadius: 7,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 1, 0,
|
|
[
|
|
{offset: 0, color: '#1bb0fe'},
|
|
{offset: 1, color: '#0064d7'}
|
|
|
|
|
|
]
|
|
)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
]
|
|
};
|
|
myChart5.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|