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.
711 lines
22 KiB
711 lines
22 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>接处警管理</title>
|
|
<link href="css/jcjglstyle.css" rel="stylesheet" />
|
|
<script src="js/jquery-1.js"></script>
|
|
<script src="js/echarts.min.js"></script>
|
|
<link href="css/jcjgl.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="css/jcjgllayui.css" media="all">
|
|
<style type="text/css">
|
|
.layui-tab {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.layui-tab-title {
|
|
width: 362px;
|
|
height: 36px;
|
|
margin: 0 auto;
|
|
border-bottom: 0;
|
|
border: 1px solid #208eb2;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.layui-tab-title li {
|
|
font-size: 16px;
|
|
line-height: 34px;
|
|
min-width: 120px;
|
|
border-right: 1px solid #208eb2;
|
|
}
|
|
|
|
.layui-tab-title li:last-child {
|
|
border: 0;
|
|
}
|
|
|
|
.layui-tab-title .layui-this {
|
|
color: #FFFFFF;
|
|
background: #208eb2;
|
|
}
|
|
|
|
.layui-tab-title .layui-this:after {
|
|
width: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.layui-tab-content {
|
|
height: calc(100% - 36px);
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.layui-tab-item {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="tab-year">
|
|
<a href="" class="current">年</a> | <a href="">月</a> | <a href="">日</a>
|
|
</div>
|
|
<div class="content1">
|
|
<div class="jcj-shuju">
|
|
<ul>
|
|
<li>
|
|
<div class="jcj-icon fl"><img src="img/jcjglimg/jcj-icon1.png"></div>
|
|
<div class="jcj-con">
|
|
<div class="jcj-tit">总警情数</div>
|
|
<div class="jcj-num">
|
|
<span class="jcj-num1">42</span>
|
|
<span class="jcj-num2">起</span>
|
|
<span class="jcj-num3">70%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="jcj-icon fl"><img src="img/jcjglimg/jcj-icon2.png"></div>
|
|
<div class="jcj-con">
|
|
<div class="jcj-tit">火灾扑救</div>
|
|
<div class="jcj-num">
|
|
<span class="jcj-num1">2</span>
|
|
<span class="jcj-num2">起</span>
|
|
<span class="jcj-num3">60%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="jcj-icon fl"><img src="img/jcjglimg/jcj-icon3.png"></div>
|
|
<div class="jcj-con">
|
|
<div class="jcj-tit">轻微火灾</div>
|
|
<div class="jcj-num">
|
|
<span class="jcj-num1">0</span>
|
|
<span class="jcj-num2">起</span>
|
|
<span class="jcj-num3" style="background: none;">0%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="jcj-icon fl"><img src="img/jcjglimg/jcj-icon4.png"></div>
|
|
<div class="jcj-con">
|
|
<div class="jcj-tit">抢险救援</div>
|
|
<div class="jcj-num">
|
|
<span class="jcj-num1">5</span>
|
|
<span class="jcj-num2">起</span>
|
|
<span class="jcj-num3"
|
|
style="background: url(img/jcjglimg/shang.png) left center no-repeat; color: #ff3000;">66.67%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="jcj-icon fl"><img src="img/jcjglimg/jcj-icon5.png"></div>
|
|
<div class="jcj-con">
|
|
<div class="jcj-tit">社会救助</div>
|
|
<div class="jcj-num">
|
|
<span class="jcj-num1">9</span>
|
|
<span class="jcj-num2">起</span>
|
|
<span class="jcj-num3" style="background: none;">0%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="jcj-icon fl"><img src="img/jcjglimg/jcj-icon6.png"></div>
|
|
<div class="jcj-con">
|
|
<div class="jcj-tit">公务执勤</div>
|
|
<div class="jcj-num">
|
|
<span class="jcj-num1">26</span>
|
|
<span class="jcj-num2">起</span>
|
|
<span class="jcj-num3">80.3%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="jcj-icon fl"><img src="img/jcjglimg/jcj-icon7.png"></div>
|
|
<div class="jcj-con">
|
|
<div class="jcj-tit">其他类型</div>
|
|
<div class="jcj-num">
|
|
<span class="jcj-num1">0</span>
|
|
<span class="jcj-num2">起</span>
|
|
<span class="jcj-num3" style="background: none;">0%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="con-row">
|
|
<!-- 处置情况分布 -->
|
|
<div class="con-con fl" style="width: calc(50% - 20px); margin-right: 20px;">
|
|
<div class="con-tit" style="background: url(img/jcjglimg/jcj-titbg.png) bottom no-repeat;">处置情况分布
|
|
</div>
|
|
<div class="con-cont">
|
|
<div id="czqkfb1" style="width: 100%; height: 60%;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('czqkfb1'));
|
|
var dataStyle = {
|
|
normal: {
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: '#203665'
|
|
}
|
|
};
|
|
option = {
|
|
series: [{
|
|
name: '第一个圆环',
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: ['68%', '80%'],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
center: ['20%', '50%'],
|
|
data: [{
|
|
value: 0,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: '#00f0ff',
|
|
align: 'center',
|
|
fontSize: 18,
|
|
fontWeight: "normal"
|
|
},
|
|
b: {
|
|
color: '#fff',
|
|
align: 'center',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
formatter: function(params) {
|
|
return "{a|" + params.value + "次}\n\n" + "{b|中途返回}";
|
|
},
|
|
position: 'center',
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: '14',
|
|
fontWeight: 'normal',
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#01bce0',
|
|
shadowColor: '#01bce0',
|
|
shadowBlur: 0
|
|
}
|
|
}
|
|
}, {
|
|
value: 100,
|
|
name: 'invisible',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#286480'
|
|
},
|
|
emphasis: {
|
|
color: '#286480'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: '第二个圆环',
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: ['68%', '80%'],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
center: ['50%', '50%'],
|
|
data: [{
|
|
value: 2,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: '#00f0ff',
|
|
align: 'center',
|
|
fontSize: 18,
|
|
fontWeight: "normal"
|
|
},
|
|
b: {
|
|
color: '#fff',
|
|
align: 'center',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
formatter: function(params) {
|
|
return "{a|" + params.value + "次}\n\n" + "{b|到场未实施处置}";
|
|
},
|
|
position: 'center',
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: '14',
|
|
fontWeight: 'normal',
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#01bce0',
|
|
shadowColor: '#01bce0',
|
|
shadowBlur: 0
|
|
}
|
|
}
|
|
}, {
|
|
value: 98,
|
|
name: 'invisible',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#286480'
|
|
},
|
|
emphasis: {
|
|
color: '#286480'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: '第三个圆环',
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: ['68%', '80%'],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
center: ['80%', '50%'],
|
|
data: [{
|
|
value: 110,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: '#00f0ff',
|
|
align: 'center',
|
|
fontSize: 18,
|
|
fontWeight: "normal"
|
|
},
|
|
b: {
|
|
color: '#fff',
|
|
align: 'center',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
formatter: function(params) {
|
|
return "{a|" + params.value + "次}\n\n" + "{b|到场实施处置}";
|
|
},
|
|
position: 'center',
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: '14',
|
|
fontWeight: 'normal',
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#01bce0',
|
|
shadowColor: '#01bce0',
|
|
shadowBlur: 0
|
|
}
|
|
}
|
|
}, {
|
|
value: 0,
|
|
name: 'invisible',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#286480'
|
|
},
|
|
emphasis: {
|
|
color: '#286480'
|
|
}
|
|
}
|
|
}]
|
|
}]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
<div class="czqkfb2">
|
|
<ul>
|
|
<li>
|
|
<p>平均到场时间</p>
|
|
<p>00:58:58</p>
|
|
</li>
|
|
<li>
|
|
<p>平均出水时间</p>
|
|
<p>00:04:10</p>
|
|
</li>
|
|
<li>
|
|
<p>平均结束时间</p>
|
|
<p>04:00:33</p>
|
|
</li>
|
|
<li>
|
|
<p>平均归队时间</p>
|
|
<p>05:16:20</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 通知公告 -->
|
|
<div class="con-con fr" style="width: calc(50% - 20px); margin-right: 0px; margin-left: 20px;">
|
|
<div class="con-tit" style="background: url(img/jcjglimg/jcj-titbg.png) bottom no-repeat;">通知公告</div>
|
|
<div class="con-cont">
|
|
<div class="layui-tab">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">通知公告</li>
|
|
<li>待办事项</li>
|
|
<li>提醒事项</li>
|
|
</ul>
|
|
<div class="layui-tab-content">
|
|
<div class="layui-tab-item layui-show">
|
|
<div class="tzgg-list">
|
|
<ul>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<div class="tzgg-list">
|
|
<ul>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">待办事项待办事项待办事项待办事项待办事项待办事项待办事项待办事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">待办事项待办事项待办事项待办事项待办事项待办事项待办事项待办事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">待办事项待办事项待办事项待办事项待办事项待办事项待办事项待办事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">待办事项待办事项待办事项待办事项待办事项待办事项待办事项待办事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">待办事项待办事项待办事项待办事项待办事项待办事项待办事项待办事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">待办事项待办事项待办事项待办事项待办事项待办事项待办事项待办事项</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<div class="tzgg-list">
|
|
<ul>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项</a>
|
|
</li>
|
|
<li>
|
|
<span>2021-8-19</span>
|
|
<a href="">提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项提醒事项</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="con-row" style="height: calc(41.07% - 20px); margin-bottom: 20px;">
|
|
<!-- 主要统计指标 -->
|
|
<div class="con-con fl" style="width: calc(50% - 20px); margin-right: 20px;">
|
|
<div class="con-tit" style="background: url(img/jcjglimg/jcj-titbg.png) bottom no-repeat;">主要统计指标
|
|
</div>
|
|
<div class="con-cont">
|
|
<div class="jcj-zytjzb-tab">
|
|
<ul>
|
|
<li class="current">总警情</li>
|
|
<li>火灾</li>
|
|
<li>死亡</li>
|
|
<li>受伤</li>
|
|
<li>直接损失</li>
|
|
</ul>
|
|
</div>
|
|
<div id="zytjzb" style="width: 100%; height: calc(100% - 36px); float: right;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('zytjzb'));
|
|
option = {
|
|
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGap: 13,
|
|
data: ['去年', '本年'],
|
|
left: '40%',
|
|
top:'5%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
grid: {
|
|
top:'6%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#286480'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#286480'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show:false
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '去年',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
showSymbol: false,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(255, 154, 35, 0.5)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(255, 154, 35, 0.1)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(255, 154, 35)',
|
|
borderColor: 'rgba(255, 154, 35,0.27)',
|
|
borderWidth: 12
|
|
|
|
}
|
|
},
|
|
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
|
}, {
|
|
name: '本年',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
showSymbol: false,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(5, 211, 255, 0.5)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(5, 211, 255, 0.1)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(5, 211, 255)',
|
|
borderColor: 'rgba(5, 211, 255,0.2)',
|
|
borderWidth: 12
|
|
|
|
}
|
|
},
|
|
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
|
} ]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<!-- 参战形式分布 -->
|
|
<div class="con-con fr" style="width: calc(50% - 20px); margin-right: 0px; margin-left: 20px;">
|
|
<div class="con-tit" style="background: url(img/jcjglimg/jcj-titbg.png) bottom no-repeat;">参战形式分布
|
|
</div>
|
|
<div class="con-cont">
|
|
<div class="jcj-zytjzb-tab">
|
|
<ul>
|
|
<li class="current">警情</li>
|
|
<li>火灾</li>
|
|
<li>抢险救援</li>
|
|
</ul>
|
|
</div>
|
|
<div id="czxsfb" style="width: 100%; height: calc(100% - 36px); float: right;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('czxsfb'));
|
|
|
|
let politicsFenBu_data = [
|
|
|
|
{
|
|
value: 90,
|
|
name: '已解决',//
|
|
},
|
|
|
|
{
|
|
value: 10,
|
|
name: '未解决',//变动投资
|
|
}
|
|
];
|
|
|
|
option = {
|
|
color: ['#2cb9ed', '#eee720'],
|
|
|
|
series: [
|
|
{
|
|
itemStyle: {
|
|
borderWidth: 2, //设置border的宽度有多大
|
|
borderColor: 'rgba(0,0,0,0.2)',
|
|
},
|
|
smooth: true,
|
|
center: ['50%', '50%'],
|
|
name: '该区为',
|
|
type: 'pie',
|
|
radius: ['10%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
formatter: '{b} : {c}',
|
|
position: 'top',
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
formatter: '',
|
|
show: true,
|
|
fontSize: '40',
|
|
fontWeight: 'bold',
|
|
},
|
|
},
|
|
data: politicsFenBu_data,
|
|
},
|
|
],
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../layui/layui.js" charset="utf-8"></script>
|
|
<script>
|
|
layui.use('element', function() {
|
|
var $ = layui.jquery,
|
|
element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|