Skip to content

Z
zanhuangyingji
Commit 1d071742 authored by yaqizhang's avatar yaqizhang
Browse files
Options

改版

parent 20ace91e
Show whitespace changes
Inline Side-by-side
Showing with 562 additions and 470 deletions
ioc_frontweb/index.html
View file @ 1d071742
...@@ -22,10 +22,7 @@ ...@@ -22,10 +22,7 @@
</div> </div>
<div id="mainTitle"> <div id="mainTitle">
<img src="images/top-banner01.png" alt=""> <!-- <img src="images/top-banner01.png" alt=""> -->
</div>
<div id="weather">
<iframe frameborder="0" scrolling="no" seamless="seamless" src="./weather.html"></iframe>
</div> </div>
<!-- <div id="topBg"></div> --> <!-- <div id="topBg"></div> -->
...@@ -97,19 +94,12 @@ ...@@ -97,19 +94,12 @@
</div> </div>
<div id="escbox"> <div id="escbox">
<div class="escbox-tip"> <div class="escbox-tip">
<div class="escbox-tip-a escbox-tip-b" style="width: 100%;height: 90px;"> <div class="escbox-tip-a escbox-tip-b" style="width: 100%;height: 70px;">
<div class="loadingio-spinner-ripple-h9py4n9xxvv" style="display: inline">
<div class="ldio-2q89h75hfq5"> <div class="ldio-2q89h75hfq5">
<div class="radar"><img src="images/out.png" ></div> <img src="images/vector9.png" style="width: 50px;height: 50px;margin-top: 10px;">
</div>
</div> </div>
<!-- <img src="images/u517.gif" alt="" /> --> <span class="escbox-txt item">实时预警</span>
<span class="escbox-txt item">事件接报中.....</span>
</div> </div>
<!-- <div class="escbox-tip-b alarm" style="clear: both">
<div class="item"><span class="num currEvNum">0</span><span class="itemTitle">当前事件</span></div>
<div class="item"><span class="num hisEvNum">0</span><span class="itemTitle">历史事件</span></div>
</div> -->
</div> </div>
<div class="escbox-top"> <div class="escbox-top">
<div class="escbox-tit">应急事件</div> <div class="escbox-tit">应急事件</div>
...@@ -186,9 +176,31 @@ ...@@ -186,9 +176,31 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mapbanner" style="position: fixed;top: 0;width: 100%;height: auto;z-index: 10;">
<div style="width: 100%;height: auto;line-height: 60px;">
<div class="weather" style="float: left;margin-top: 10px;margin-left: 50px;">
<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tb&skin=pitaya&color=0A9DCC" frameborder="0" width="350" height="24" allowtransparency="true"></iframe>
</div>
<div class="righttime" style="float: right;margin-right: 50px;">
<div id="top-right">
<div id="item">
<p id="itemone" style="color: #0A9DCC;"></p>
<!-- <p id="itemtwo"></p> -->
</div>
<div id="item item1">
<div id="he-plugin-standard"></div>
</div>
</div>
</div>
</div>
<div style="width: 50%;text-align: center;margin-left: 25%;
background-image:-webkit-linear-gradient(bottom,#FFFFFF,#0A9DCC);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;font-size: 30px;margin-top: 40px;font-family: PangMenZhengDao-Regular, PangMenZhengDao;font-weight: 400;">应急可视化智慧调度系统</div>
</div>
<div id="border"></div>
<div id="leftBar"> <div id="leftBar">
<div id="bottomMenu"> <!-- <div id="bottomMenu">
<a href="#" class="btn span1"> <a href="#" class="btn span1">
<div>态势分析</div> <div>态势分析</div>
<span></span> <span></span>
...@@ -224,14 +236,30 @@ ...@@ -224,14 +236,30 @@
<span></span> <span></span>
<span></span> <span></span>
</a> </a>
</div> </div> -->
<div class="alarm" id="alarm"> <div class="alarm" id="alarm">
</div> </div>
<div id="" class="leftBar-legend"> <div id="" class="leftBar-legend">
<div class="leftlegend"> <div class="leftlegend">
应急资源监控 事件类型统计
<img src="images/vector8.png" alt="" style="width: 14px;margin-right: 10px;">
</div>
<div class="echarts deviceNumPie" id="deviceNumPie"></div>
<div id="alarmList" class="right-alarm">
<div class="leftlegend">安全生产实时预警数据
<img src="images/vector10.png" alt="" style="width: 14px;margin-right: 10px;">
</div>
<div class="listTitle">
<div style="width: 20%; overflow: hidden">所属单位</div>
<div style="width: 15%; overflow: hidden">设备类型</div>
<div style="width: 20%; overflow: hidden">预警信息</div>
<div style="width: 30%; overflow: hidden">预警时间</div>
<div style="width: 10%; overflow: hidden">状态</div>
</div>
<div class="listContent"></div>
</div> </div>
<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 430px;height: 260px;padding-left: 5px !important;padding-top: 3px !important;"></div>
<div style="background:linear-gradient(to left,#FFFFFF,#458dde,#FFFFFF);height:1px;"></div> <div style="background:linear-gradient(to left,#FFFFFF,#458dde,#FFFFFF);height:1px;"></div>
<ul id="legend"> <ul id="legend">
...@@ -241,16 +269,75 @@ ...@@ -241,16 +269,75 @@
</div> </div>
<div id="rightBar"> <div id="rightBar">
<!-- <div class="echarts deviceNumBar" id="deviceNumBar"></div> --> <!-- <div class="echarts deviceNumBar" id="deviceNumBar"></div> -->
<div class="deviceNumPieout"> <div class="right-bar">
<div class="leftlegend"> <div class="rightlegend">
事件类型统计 <img src="images/vector2.png" alt="" style="width: 14px;margin-left: 10px;">
应急资源监控
</div>
<div style="width: 100%;height: auto;">
<div style="float: left;width: 48%;height: auto;">
<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 100%;height: 220px;padding-left: 5px !important;padding-top: 3px !important;"></div>
<div class="inyuan">
<p style="letter-spacing: 2px;margin-top: 30px;">设备总数</p>
<span class="wu"
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 20px;
"
></span
>
</div>
</div>
<div class="usernum">
<div class="usernumin">
<span class=" in1"> ● 安全生产企业 </span>
<p class="p1" style="font-family: 'arialbd';color: #cddbe4; letter-spacing: 2px">
</p
>
</div>
<div class="usernumin">
<span class=" in2"> ● 视频监控 </span>
<p class="p2" style="font-family: 'arialbd';color: #cddbe4; letter-spacing: 2px">
</p
>
</div>
<div class="usernumin">
<span class=" in3"> ● 移动设备 </span>
<p class="p3" style="font-family: 'arialbd';color: #cddbe4; letter-spacing: 2px">
</p
>
</div>
<div class="usernumin">
<span class=" in4"> ● 应急保障 </span>
<p class="p4" style="font-family: 'arialbd';color: #cddbe4; letter-spacing: 2px">
</p
>
</div>
<div class="usernumin">
<span class=" in5"> ● 应急物资 </span>
<p class="p5" style="font-family: 'arialbd';color: #cddbe4; letter-spacing: 2px">
</p
>
</div>
<div class="usernumin">
<span class=" in6"> ● 自然灾害 </span>
<p class="p6" style="font-family: 'arialbd';color: #cddbe4; letter-spacing: 2px">
</p
>
</div> </div>
<div class="echarts deviceNumPie" id="deviceNumPie"></div>
</div> </div>
</div>
</div>
<div class="deviceNumLineout"> <div class="deviceNumLineout">
<div class="leftlegend"> <div class="rightlegend">
<img src="images/vector11.png" alt="" style="width: 14px;height: 14px;margin-left: 10px;">
预警数量 预警数量
</div> </div>
<div class="Linebutton"> <div class="Linebutton">
...@@ -259,27 +346,18 @@ ...@@ -259,27 +346,18 @@
</div> </div>
<!-- 折线图 --> <!-- 折线图 -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom --> <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="echarts deviceNumLine deviceNumLineday show" id="deviceNumLineday" style="width: 430px;height: 190px;margin-top: 50px;"></div> <div class="echarts deviceNumLine deviceNumLineday show" id="deviceNumLineday" style="width: 370px;height: 200px;margin-top: 50px;"></div>
<div class="echarts deviceNumLine deviceNumLinemouth" id="deviceNumLinemouth" style="width: 430px;height: 190px;margin-top: 50px;"></div> <div class="echarts deviceNumLine deviceNumLinemouth" id="deviceNumLinemouth" style="width: 370px;height: 200px;margin-top: 50px;"></div>
</div> </div>
<div id="alarmList" class="right-alarm">
<div class="mktit">安全生产实时预警数据</div>
<div class="listTitle">
<div style="width: 20%; overflow: hidden">所属单位</div>
<div style="width: 15%; overflow: hidden">设备类型</div>
<div style="width: 20%; overflow: hidden">预警信息</div>
<div style="width: 30%; overflow: hidden">预警时间</div>
<div style="width: 10%; overflow: hidden">状态</div>
</div>
<div class="listContent"></div>
</div>
<!-- 值班信息 --> <!-- 值班信息 -->
<div class="msgWrap"> <div class="msgWrap">
<div class="msgWraplegend"> <div class="rightlegend">
<img src="images/vector7.png" alt="" style="width: 14px;margin-left: 10px;">
当前值班信息 当前值班信息
</div> </div>
<div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:130px;"> <div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:130px;">
...@@ -376,6 +454,10 @@ ...@@ -376,6 +454,10 @@
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
<script> <script>
// var legenditem=document.getElementById(".legendItem");
// var legendchild=document.getElementById(".legendchild");
setInterval("document.getElementById('itemone').innerHTML=new Date().toLocaleString();",1000);
// document.getElementById("itemtwo").innerHTML = "星期"+"日一二三四五六".charAt(new Date().getDay());
$(".saveImage").click(function () { $(".saveImage").click(function () {
html2canvas(jQuery(".amap-layer")[0], { html2canvas(jQuery(".amap-layer")[0], {
...@@ -549,79 +631,9 @@ ...@@ -549,79 +631,9 @@
bottom:100%; bottom:100%;
} }
} }
.radar {
/* background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
background */: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
width: 80px;
height: 80px;
position: relative;
left: 48%;
top: 45%;
padding: 1px;
transform: translate(-50%, -50%);
/* border-radius: 50%;
border: 0.2rem solid */#20ff4d;
overflow: hidden;
}
.radar img{
width: 100%;
height: 100%;
}
.radar:before {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation: blips 5s infinite;
animation-timing-function: linear;
animation-delay: 1.4s;
}
.radar:after {
content: ' ';
display: block;
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
animation: radar-beam 5s infinite;
animation-timing-function: linear;
transform-origin: bottom right;
border-radius: 100% 0 0 0;
}
@keyframes radar-beam {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes blips {
14% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
14.0002% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
25% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
26% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 1;
}
100% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
}
}
.Linebutton{ .Linebutton{
width: 50%; width: 60%;
float: right; float: right;
} }
.linebtn{ .linebtn{
...@@ -645,6 +657,53 @@ ...@@ -645,6 +657,53 @@
display:block; display:block;
} }
.inyuan {
width: 120px;
height: 120px;
border-radius: 50%;
/* border: 2px solid #125c9b; */
position: fixed;
margin-bottom: 10px;
margin-top: -170px;
margin-left: 41px;
font-size: 15px;
color: #cddbe4;
text-align: center;
line-height: 35px;
/* padding: 28px 0px 0px 0px; */
background-image: linear-gradient(to left, #112238, #003e8d, #112238);
}
.usernum {
float: left;
width: 52%;
text-align: center;
height: auto;
margin-top: 35px;
}
.usernumin {
float: left;
width: 50%;
height: 50px;
font-size: 15px;
}
.in1 {
color: #FDF070;
}
.in2 {
color: #50B06B;
}
.in3 {
color: #E8F2EE;
}
.in4 {
color: #F18231;
}
.in5 {
color: #009CF3;
}
.in6 {
color: #76D5F4;
}
</style> </style>
</body> </body>
</html> </html>
ioc_frontweb/js/map.js
View file @ 1d071742
...@@ -11,15 +11,15 @@ var MTOOL; ...@@ -11,15 +11,15 @@ var MTOOL;
// function renderMap() { // function renderMap() {
// 渲染地图 // 渲染地图
district.search('河北省', function (status, result) { district.search('赞皇', function (status, result) {
var bounds = result.districtList[0].boundaries; var bounds = result.districtList[0].boundaries;
var mask = []; // var mask = [];
for (var i = 0; i < bounds.length; i += 1) { // for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]); // mask.push([bounds[i]]);
} // }
var defaultCenter = [114.72995, 38.37417]; var defaultCenter = [114.72995, 38.37417];
map = new AMap.Map('container', { map = new AMap.Map('container', {
mask: mask, // mask: mask,
center: defaultCenter, center: defaultCenter,
// resizeEnable: true, // resizeEnable: true,
disableSocket: true, disableSocket: true,
...@@ -81,7 +81,7 @@ district.search('河北省', function (status, result) { ...@@ -81,7 +81,7 @@ district.search('河北省', function (status, result) {
// // }) // // })
// }), // }),
// ); // );
map.addControl(new AMap.MapType({defaultType: 1 ,showroad: true })); map.addControl(new AMap.MapType({defaultType: 0 ,showroad: true }));
map.addControl(new AMap.Scale({ visible: true })); map.addControl(new AMap.Scale({ visible: true }));
map.addControl(new AMap.ToolBar({ position: 'LT', ruler: false, direction: false })); map.addControl(new AMap.ToolBar({ position: 'LT', ruler: false, direction: false }));
}); });
......
ioc_frontweb/js/utils.js
View file @ 1d071742
...@@ -188,12 +188,13 @@ function createBarChart(options) { ...@@ -188,12 +188,13 @@ function createBarChart(options) {
createEchart(option); createEchart(option);
} }
// 生成不同类型设备报警数量图 // 生成不同类型设备报警数量图 应急资源监控
function createDeviceAlarmNumBarChart(options) { function createDeviceAlarmNumBarChart(options) {
var option = { var option = {
name: options.name, name: options.name,
eleId: options.eleId, eleId: options.eleId,
opts: { opts: {
color: ["#FDF070", "#E8F2EE", "#50B06B","#F18231", "#009CF3", "#76D5F4"],
title: { title: {
left: 'left', left: 'left',
textStyle: { textStyle: {
...@@ -202,53 +203,76 @@ function createDeviceAlarmNumBarChart(options) { ...@@ -202,53 +203,76 @@ function createDeviceAlarmNumBarChart(options) {
lineHeight: '36', lineHeight: '36',
}, },
}, },
grid: { // tooltip: {
top: 35, // trigger: 'item'
left: 30, // },
bottom: 80, toolbox: {
right: 10, show: true,
feature: {
mark: { show: true },
// dataView: { show: true, readOnly: false },
// restore: { show: true },
// saveAsImage: { show: true }
}
}, },
xAxis: { series: [
type: 'category', {
data: options.xAxisData, name: 'Access From',
axisLabel: { type: 'pie',
textStyle: { radius: ["75%", "65%"],
color: '#ddd', // center: ["50%", "50%"],
itemStyle: {
borderRadius: 20,
}, },
interval: 0, label: {
rotate: 60, normal: {
show: false,
textStyle: {
fontSize: 13,
}, },
position: "outside",
}, },
yAxis: { emphasis: {
type: 'value',
show: false, show: false,
}, },
series: [
{
type: 'bar',
label: {
show: true,
position: 'inside',
}, },
barWidth: 20, labelLine: {
itemStyle: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ show: false,
{ offset: 0, color: '#83bff6' }, length: 20,
{ offset: 0.5, color: '#188df0' }, length2: 35,
{ offset: 1, color: '#188df0' },
]),
}, },
emphasis: { emphasis: {
itemStyle: { show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' },
]),
}, },
}, },
data: options.seriesData, data: options.seriesData,
}, },
// {
// name: "外边框",
// type: "pie",
// clockWise: false, //顺时加载
// hoverAnimation: false, //鼠标移入变大
// center: ["50%", "50%"],
// radius: ["80%", "80%"],
// label: {
// normal: {
// show: false,
// },
// },
// data: [
// {
// value: 9,
// name: "",
// itemStyle: {
// normal: {
// borderWidth: 2,
// borderColor: "#61bad3",
// },
// },
// },
// ],
// },
], ],
}, },
}; };
...@@ -270,32 +294,8 @@ function createPieChart(options) { ...@@ -270,32 +294,8 @@ function createPieChart(options) {
lineHeight: '36', lineHeight: '36',
}, },
}, },
// legend: { // tooltip: {
// top: 'bottom' // trigger: 'item'
// orient: 'vertical',
// top: 35,
// left: 6,
// formatter: function (name) {
// var index = 0;
// var clientlabels = options.legendData;
// var clientcounts = options.seriesData;
// for (var i = 0; i < clientlabels.length; ++i) {
// if (clientlabels[i] == name) {
// index = i;
// }
// }
// return '[ ' + clientcounts[index].value + ' ] ' + name;
// },
// textStyle: {
// color: '#ddd',
// fontSize: 14,
// lineHeight: 12,
// },
// inactiveColor: '#555',
// itemWidth: 12,
// itemHeight: 12,
// itemGap: 9,
// data: options.legendData,
// }, // },
toolbox: { toolbox: {
show: true, show: true,
...@@ -308,25 +308,24 @@ function createPieChart(options) { ...@@ -308,25 +308,24 @@ function createPieChart(options) {
}, },
series: [ series: [
{ {
name: 'Nightingale Chart', // name: 'Nightingale Chart',
type: 'pie', type: 'pie',
radius: [15, 80], // radius: [15, 80],
center: ['50%', '50%'], center: ['50%', '50%'],
label : {
　　　　normal : {
　　　　　　formatter: '{b} {c}',
　　　　　　textStyle : {
　　　　　　　　fontWeight : 'normal',
　　　　　　　　fontSize : 14
　　　　　　}
　　　　}
　　},
roseType: 'area', roseType: 'area',
itemStyle: { itemStyle: {
borderRadius: 8 borderRadius: 8
}, },
data: options.seriesData, data: options.seriesData,
//[
// { value: 40, name: 'rose 1' },
// { value: 38, name: 'rose 2' },
// { value: 32, name: 'rose 3' },
// { value: 30, name: 'rose 4' },
// { value: 28, name: 'rose 5' },
// { value: 26, name: 'rose 6' },
// { value: 22, name: 'rose 7' },
// { value: 18, name: 'rose 8' }
// ]
} }
], ],
...@@ -347,11 +346,13 @@ function createLineChartday(options) { ...@@ -347,11 +346,13 @@ function createLineChartday(options) {
x2:20, x2:20,
y2:60, y2:60,
borderWidth:1, borderWidth:1,
bottom:'40%' top: '15%',
bottom:'15%'
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: options.xAxisData, // data: options.xAxisData,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#ddd', color: '#ddd',
...@@ -370,8 +371,30 @@ function createLineChartday(options) { ...@@ -370,8 +371,30 @@ function createLineChartday(options) {
}, },
series: [ series: [
{ {
data: options.seriesData, // data: options.seriesData,
type: 'line' data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 12, //柱图宽度
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#688AB6",
fontSize: 12,
},
},
barBorderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#DFB73E' },
{ offset: 0.5, color: '#DFB73E' },
{ offset: 1, color: '#141f364d' }
])
},
},
} }
] ]
}, },
...@@ -390,11 +413,12 @@ function createLineChartmouth(options) { ...@@ -390,11 +413,12 @@ function createLineChartmouth(options) {
x2:20, x2:20,
y2:40, y2:40,
borderWidth:1, borderWidth:1,
bottom:'40%' bottom:'15%'
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: options.xAxisData, // data: options.xAxisData,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#ddd', color: '#ddd',
...@@ -413,8 +437,9 @@ function createLineChartmouth(options) { ...@@ -413,8 +437,9 @@ function createLineChartmouth(options) {
}, },
series: [ series: [
{ {
data: options.seriesData, // data: options.seriesData,
type: 'line' data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
} }
] ]
}, },
...@@ -558,11 +583,11 @@ function createLegendList() { ...@@ -558,11 +583,11 @@ function createLegendList() {
tmpLi += tmpLi +=
'<li data-id="' + '<li data-id="' +
items[i].id + items[i].id +
'" class="legendItem"><div><img class="legendPic" style="padding: 7px;" src="./images/legend/' + '" class="legendItem "><div><img class="legendPic" style="padding: 7px 0;" src="./images/legend/' +
items[i].legendCode + items[i].legendCode +
'.png" alt=""/><p class="legendTitle">' + '.png" alt=""/><span class="legendTitle">' +
items[i].legendName + items[i].legendName +
'</p></div><div>'; '</span></div><div class="legendchild">';
var children = items[i].childList; var children = items[i].childList;
for (var j = 0; j < children.length; ++j) { for (var j = 0; j < children.length; ++j) {
tmpLi += '<a data-id="' + children[j].id + '" href="#" title="' + children[j].legendName + '">' + children[j].legendName + '</a>'; tmpLi += '<a data-id="' + children[j].id + '" href="#" title="' + children[j].legendName + '">' + children[j].legendName + '</a>';
...@@ -571,12 +596,39 @@ function createLegendList() { ...@@ -571,12 +596,39 @@ function createLegendList() {
} }
$('#legend').html(tmpLi); $('#legend').html(tmpLi);
var legenditem=document.getElementsByClassName("legendItem");
var legendchild=document.getElementsByClassName("legendchild");
for (var i=0; i<legenditem.length;i++){
legenditem[i].index = i;
legenditem[i].onclick = function(){
// alert()
var lc = this.lastChild;
if(lc.style.display = "none"){
lc.style.display = "block";
}else{
aa.style.display = "none";
}
　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
// for(var j=0;j<legenditem.length;j++){
// // console.log(legenditem[j],"fasdfdsaffdsfdsfdsafds",legenditem[j].className)
// // legenditem[j].className = legenditem[j].className.replace(' active', '').trim();
// console.log(legenditem[j])
// var aa =
// }
// this.className = this.className + ' active';
// legendchild[this.index].className = legendchild[this.index].className + ' show';
};
}
// 默认显示视频监控设备 // 默认显示视频监控设备
// $('.legendItem').eq(0).click(); // $('.legendItem').eq(0).click();
} else { } else {
layLayer.alert('数据为空'); layLayer.alert('数据为空');
} }
} }
}, },
}; };
jQueryAjax(opts); jQueryAjax(opts);
...@@ -880,6 +932,7 @@ function createDeviceNumPieChart(eleId) { ...@@ -880,6 +932,7 @@ function createDeviceNumPieChart(eleId) {
// value: res.data[i].deviceNum, // value: res.data[i].deviceNum,
name: res.data[i].eventType, name: res.data[i].eventType,
value: res.data[i].eventNum, value: res.data[i].eventNum,
}); });
options.series.push({ options.series.push({
name: res.data[i].key, name: res.data[i].key,
...@@ -1013,6 +1066,14 @@ function renderLegendTypeNum(eleId) { ...@@ -1013,6 +1066,14 @@ function renderLegendTypeNum(eleId) {
var opts = { var opts = {
url: apis.getLegendTypeNum, url: apis.getLegendTypeNum,
success: function (res) { success: function (res) {
console.log("333333333",res.data)
$('.wu').append(res.data[0].num + res.data[1].num + res.data[2].num + res.data[3].num + res.data[4].num + res.data[5].num);
$('.p1').append(res.data[0].num);
$('.p2').append(res.data[1].num);
$('.p3').append(res.data[2].num);
$('.p4').append(res.data[3].num);
$('.p5').append(res.data[4].num);
$('.p6').append(res.data[5].num);
if (res.code === 0) { if (res.code === 0) {
var options = { var options = {
eleId: eleId, eleId: eleId,
...@@ -1022,17 +1083,22 @@ function renderLegendTypeNum(eleId) { ...@@ -1022,17 +1083,22 @@ function renderLegendTypeNum(eleId) {
seriesData: [], seriesData: [],
}; };
for (var i in res.data) { for (var i in res.data) {
options.xAxisData.push(res.data[i].legendName); // options.xAxisData.push(res.data[i].legendName);
options.seriesData.push(res.data[i].num); // options.seriesData.push(res.data[i].num);
// options.series.push({ // options.legendData.push(res.data[i].typeName);
// name: res.data[i].key, options.seriesData.push({
// type: 'bar', // name: res.data[i].typeName,
// stack: 'all', // value: res.data[i].deviceNum,
// label: { name: res.data[i].legendName,
// show: true value: res.data[i].num,
// }, });
// data: [res.data[i].value] options.series.push({
// }) name: res.data[i].key,
type: 'bar',
stack: 'all',
data: [res.data[i].value],
});
} }
createDeviceAlarmNumBarChart(options); createDeviceAlarmNumBarChart(options);
// createBarChart(options); // createBarChart(options);
...@@ -1050,13 +1116,13 @@ function renderAlarmList(obj) { ...@@ -1050,13 +1116,13 @@ function renderAlarmList(obj) {
</div> </div>
<div class="itemout"> <div class="itemout">
<div class="item"> <div class="item">
<span class="num">${obj.totalNum}</span><span class="itemTitle">预警总数</span> <div class="itemTitle">预警总数</div><div class="num">${obj.totalNum}</div>
</div> </div>
<div class="item"> <div class="item">
<span class="num">${obj.handledNum}</span><span class="itemTitle">已处理</span> <div class="itemTitle">已处理</div><div class="num">${obj.handledNum}</div>
</div> </div>
<div class="item"> <div class="item">
<span class="num">${obj.noHandeldNum}</span><span class="itemTitle">未处理</span> <div class="itemTitle">未处理</div><div class="num">${obj.noHandeldNum}</div>
</div> </div>
</div> </div>
`; `;
......
ioc_frontweb/style/style.css
View file @ 1d071742
...@@ -168,34 +168,22 @@ table.layui-table th { ...@@ -168,34 +168,22 @@ table.layui-table th {
/* 报警数量 */ /* 报警数量 */
.alarm { .alarm {
/* display: flex; */ /* display: flex; */
/* width: 100%; */ width: 100%;
height: auto !important; height: auto !important;
padding: 10px; padding: 10px;
margin-top: 80px; margin-top: 80px;
margin-left: 5px; margin-left: 5px;
width: 454px;
background: rgba(21,34,60,0.8);
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
/* justify-content: space-between; */
border-right: 2px solid ;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#123c7f,#00F7DE,#123c7f,#00F7DE) 30 30;
border-image: -moz-linear-gradient(#123c7f,#00F7DE,#123c7f,#00F7DE) 30 30;
border-image: linear-gradient(#123c7f,#00F7DE,#123c7f,#00F7DE) 30 30;
} }
.alarm .itemout{ .alarm .itemout{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.alarm .item { .alarm .item {
width: auto; width: 33%;
height: 55px; height: 100px;
background: url(../images/one1.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative;
overflow: hidden; overflow: hidden;
/* padding: 0 16px; */ /* padding: 0 16px; */
padding: 0px 20px; padding: 0px 20px;
...@@ -204,24 +192,26 @@ table.layui-table th { ...@@ -204,24 +192,26 @@ table.layui-table th {
} }
.alarm .num { .alarm .num {
color: #0cb0ef;
font-size: 1.6rem; font-size: 1.6rem;
font-family: 'LED'; font-family: 'LED';
text-align: right; text-align: right;
width: auto; width: auto;
display: inline-block; display: inline-block;
background-image:-webkit-linear-gradient(bottom,#DFB73E,#FFFFFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
} }
.alarm .itemh2 { .alarm .itemh2 {
width: 100%; width: 100%;
height: 30px; height: 30px;
font-size: 18px; font-size: 15px;
text-align: right;
line-height: 30px; line-height: 30px;
color: #03ffff; color: #fff;
padding-left: 10px; background-image: linear-gradient(to right,rgb(21 34 60 / 50%), rgb(29 45 78 / 70%) 50%);
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
} }
.alarm .itemTitle { .alarm .itemTitle {
color: #d8d8d8; color: #64FEFF;
font-size: 12px; font-size: 12px;
} }
...@@ -272,42 +262,31 @@ table.layui-table th { ...@@ -272,42 +262,31 @@ table.layui-table th {
/* 图表样式 */ /* 图表样式 */
.echarts, .echarts,
#alarmList { #alarmList {
width: 445px; width: 100%;
height: 240px; height: 240px;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
/* margin-top: -20px; */ /* margin-top: -20px; */
} }
#alarmList { /* #alarmList {
padding: 25px 10px 0px 10px; padding: 25px 10px 0px 10px;
} } */
.deviceNumBar { .deviceNumBar {
height: 70px; height: 70px;
} }
/* 天气样式 */ /* 天气样式 */
#weather {
margin: 10px auto 0;
position: fixed;
top: 0;
right: 0;
margin-top: 30px;
z-index: 999;
}
#weather,
iframe {
height: 50px;
width: 480px;
}
/* 图例 */ /* 图例 */
#legend { #legend {
overflow: hidden; overflow: hidden;
margin: 0; width: 200%;
width: 94%; margin-left: 650px;
margin-left: 3%; position: absolute;
bottom: 0;
margin-bottom: -35px;
color: #ddd; color: #ddd;
} }
...@@ -325,15 +304,27 @@ iframe { ...@@ -325,15 +304,27 @@ iframe {
#legend div { #legend div {
float: left; float: left;
clear: both; clear: both;
width: 100%;
} }
.legendItem { .legendItem {
margin: 3px 0; margin: 3px 0;
background-size: 100% 100%;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #33faf7;
cursor: pointer; cursor: pointer;
float: left;
background: url(../images/vector5.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 5px;
margin-left: 10px;
}
.legendchild{
display: none;
width: auto;
position: fixed;
bottom: 85px;
} }
/* .legendItem:active + .legendchild{
display: block;
} */
.legendItem:last-child{ .legendItem:last-child{
border-bottom: 0; border-bottom: 0;
} }
...@@ -346,17 +337,16 @@ iframe { ...@@ -346,17 +337,16 @@ iframe {
} }
.legendPic { .legendPic {
width: 24px; width: 20px;
height: 24px; height: 20px;
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
.legendTitle { .legendTitle {
width: calc(100% - 70px); /* width: calc(100% - 70px); */
float: left; float: left;
line-height: 35px; line-height: 35px;
margin-left: 10px;
font-size: 14px; font-size: 14px;
color: #fefefe; color: #fefefe;
} }
...@@ -453,113 +443,109 @@ iframe { ...@@ -453,113 +443,109 @@ iframe {
left: 828px; left: 828px;
/* top: 7px; */ /* top: 7px; */
} }
#border{
#leftBar, width: 100%;
#rightBar { height: 100%;
width: 450px; z-index: 2;
height: 99.9%; min-width: 1000px;
background: url(../images/mapbg6.png) no-repeat;
background-size: 100% 100%;
position: absolute; position: absolute;
right: 0; top: 0;
}
#leftBar{
/* background: url(../images/mapleft1.png); */
background-repeat: no-repeat;
background-size: 100%;
width: 22%;
height: 87%;
position: fixed;
left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
background-size: 100% 100%;
margin-top: 3%;
margin-left: 2%;
}
#rightBar{
/* background: url(../images/mapright1.png); */
background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
width: 22%;
height: 87%;
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background-size: 100% 100%;
margin-top: 3%;
margin-right: 3%;
} }
.msgWraplegend{ .right-bar{
width: 100%; width: 100%;
height: 30px; height: auto !important;
font-size: 18px; padding: 10px;
line-height: 30px; margin-right: 5px;
color: #03ffff; margin-top: 80px;
padding-left: 10px; overflow: hidden;
margin: 10px 0 0 0px; box-sizing: border-box;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
}
#leftBar {
left: 0;
width: 450px;
height: 99.9%;
right: auto;
} }
.leftBar-legend{ .leftBar-legend{
left: 0;
width: 100%; width: 100%;
height: auto; height: auto !important;
right: auto; padding: 10px;
margin-top: 10px;
margin-left: 5px; margin-left: 5px;
padding-bottom: 10px; overflow: hidden;
background: rgba(21,34,60,0.8); box-sizing: border-box;
border-right: 2px solid ;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
} }
.leftlegend{ .leftlegend{
width: 95%; width: 100%;
height: 30px; height: 30px;
font-size: 18px; font-size: 15px;
text-align: right;
line-height: 30px; line-height: 30px;
color: #03ffff; color: #fff;
padding-left: 10px; background-image: linear-gradient(to right,rgb(21 34 60 / 50%), rgb(29 45 78 / 70%) 50%);;
margin: 10px 0 0 10px; }
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%)); .rightlegend{
width: 100%;
height: 30px;
font-size: 15px;
line-height: 30px;
color: #fff;
text-align: left;
margin-left: 10px;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%), rgb(29 45 78 / 70%) 50%);
} }
.deviceNumPieout{ .deviceNumPieout{
width: 440px; width: 100%;
height: 240px; height: 240px;
margin-top: 80px;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
background: rgba(21,34,60,0.8);
border-right: 2px solid;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
user-select: none; user-select: none;
} }
.deviceNumLineout{ .deviceNumLineout{
width: 440px; width: 100%;
height: 280px; height: auto !important;
margin-top: 10px; padding: 10px;
-webkit-tap-highlight-color: transparent; margin-right: 5px;
background: rgba(21,34,60,0.8); overflow: hidden;
border-right: 2px solid; box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
user-select: none;
} }
.deviceNumPie{ .deviceNumPie{
width: 436px; width: 100%;
height: 190px; height: 250px;
} }
.right-alarm{ .right-alarm{
width: 100%; width: 100%;
height: 270px; height: auto !important;
background-size: 100% 100%; overflow: hidden;
position: relative; box-sizing: border-box;
margin-top: 10px;
background: rgba(21,34,60,0.8);
border-right: 2px solid;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
} }
/* 云台 */ /* 云台 */
.controlBtn { .controlBtn {
display: flex; display: none;
flex-wrap: wrap; flex-wrap: wrap;
} }
...@@ -746,20 +732,13 @@ iframe { ...@@ -746,20 +732,13 @@ iframe {
border-top-right-radius: 5px; border-top-right-radius: 5px;
/* background-image: url('../images/one11.png'); */ /* background-image: url('../images/one11.png'); */
max-height: calc(100vh - 100px); max-height: calc(100vh - 100px);
background: rgba(21,34,60,0.8); z-index: 3;
border-right: 2px solid ;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
} }
.escbox-txt { .escbox-txt {
line-height: 90px; line-height: 70px;
display: inline; display: inline;
/* margin-left: 120px; */
float: left; float: left;
margin-left: 10px;
} }
.escbox-bottom .escbox-top { .escbox-bottom .escbox-top {
height: auto; height: auto;
...@@ -999,20 +978,12 @@ iframe { ...@@ -999,20 +978,12 @@ iframe {
line-height: 2; line-height: 2;
} }
.msgWrap { .msgWrap {
width: 99%; width: 100%;
height: auto; height: auto;
margin-top: 10px; margin-top: 10px;
padding: 0px 10px 10px 10px; padding: 0px 10px 10px 10px;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
background: rgba(21,34,60,0.8);
border-right: 2px solid;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
} }
.msgWrap .dutyinfo { .msgWrap .dutyinfo {
background: transparent; background: transparent;
...@@ -1076,16 +1047,11 @@ iframe { ...@@ -1076,16 +1047,11 @@ iframe {
outline: none; outline: none;
} }
.mktit { .mktit {
color: #03ffff; width: 100%;
font-size: 18px;
text-align: left;
margin-top: 10px;
width: 95%;
height: 30px; height: 30px;
font-size: 18px;
line-height: 30px; line-height: 30px;
overflow: hidden; color: #03ffff;
position: absolute;
top: 0;
padding-left: 10px; padding-left: 10px;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%)); background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
} }
...@@ -1285,11 +1251,15 @@ iframe { ...@@ -1285,11 +1251,15 @@ iframe {
color: #fff; color: #fff;
} }
.escbox-tip { .escbox-tip {
width: 180px;
background: rgba(24, 35, 62, 0.7); background: rgba(24, 35, 62, 0.7);
position: fixed;
bottom: 0;
color: #0ff; color: #0ff;
/* padding: 10px 0; */ padding: 0px 10px;
/* border-radius: 10px; */ /* border-radius: 10px; */
margin: 10px; margin-bottom: 40px;
margin-left: 30px;
border: 1px solid #183158; border: 1px solid #183158;
} }
.escbox-tip-a { .escbox-tip-a {
...@@ -1306,7 +1276,6 @@ iframe { ...@@ -1306,7 +1276,6 @@ iframe {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
cursor: pointer; cursor: pointer;
padding: 15px 0;
border-top: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2);
} }
/* .escbox-tip-b .item { /* .escbox-tip-b .item {
...@@ -1476,8 +1445,6 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1476,8 +1445,6 @@ div[lay-id='members'] thead tr:nth-child(1) {
background: rgba(NaN, NaN, NaN, 0); background: rgba(NaN, NaN, NaN, 0);
} }
.ldio-2q89h75hfq5 { .ldio-2q89h75hfq5 {
width: 100%;
height: 100%;
position: relative; position: relative;
transform: translateZ(0) scale(1); transform: translateZ(0) scale(1);
backface-visibility: hidden; backface-visibility: hidden;
......
ioc_frontweb/weather.html
View file @ 1d071742
...@@ -157,8 +157,8 @@ ...@@ -157,8 +157,8 @@
key: '61b7aa520cb34e62a9eee4644a689fcf', key: '61b7aa520cb34e62a9eee4644a689fcf',
}, },
}; };
setInterval("document.getElementById('itemone').innerHTML=new Date().toLocaleString();",1000); // setInterval("document.getElementById('itemone').innerHTML=new Date().toLocaleString();",1000);
document.getElementById("itemtwo").innerHTML = "星期"+"日一二三四五六".charAt(new Date().getDay()); // document.getElementById("itemtwo").innerHTML = "星期"+"日一二三四五六".charAt(new Date().getDay());
</script> </script>
<script src="https://widget.heweather.net/standard/static/js/he-standard-common.js?v=1.1"></script> <script src="https://widget.heweather.net/standard/static/js/he-standard-common.js?v=1.1"></script>
<!-- <div id="he-plugin-standard"></div> <!-- <div id="he-plugin-standard"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment