Skip to content

Z
zanhuangyingji
Commit 0c87b096 authored by yaqizhang's avatar yaqizhang
Browse files
Options

修改

parent c48f69c6
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 117 deletions
ioc_frontweb/index.html
View file @ 0c87b096
......@@ -177,14 +177,17 @@
</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 style="width: 100%;height: auto;line-height: 60px;display: flex;justify-content: space-between;">
<div class="weather" style="margin-top: 10px;width: 30%;padding-left: 50px;">
<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tb&skin=pitaya&color=64FEFF" frameborder="0" width="350" height="24" allowtransparency="true"></iframe>
</div>
<div class="righttime" style="float: right;margin-right: 50px;">
<div style="width: 40%;text-align: center;">
<img src="../ioc_frontweb/images/topban.png" alt="" style="width: 80%;margin-top: 10px;">
</div>
<div class="righttime" style="width: 30%;padding-right: 50px;text-align: right;">
<div id="top-right">
<div id="item">
<p id="itemone" style="color: #0A9DCC;"></p>
<p id="itemone" style="color: #64FEFF;"></p>
<!-- <p id="itemtwo"></p> -->
</div>
<div id="item item1">
......@@ -193,10 +196,7 @@
</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">
......@@ -239,28 +239,29 @@
</div> -->
<div class="alarm" id="alarm">
</div>
<div style="background: linear-gradient(to left,#111a2e,#64FEFF,#111a2e);height:1px;margin-top: 20px;margin-bottom: 20px;margin-left: 20px;width: 90%;"></div>
<div id="" class="leftBar-legend">
<div class="leftlegend">
事件类型统计
<img src="images/vector8.png" alt="" style="width: 14px;margin-right: 10px;">
</div>
<div class="echarts deviceNumPie" id="deviceNumPie"></div>
<div style="background: linear-gradient(to left,#111a2e,#64FEFF,#111a2e);height:1px;margin-top: 20px;margin-bottom: 30px;margin-left: 10px;width: 95%;"></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 style="width: 20%; overflow: hidden;color: #64FEFF;">所属单位</div>
<div style="width: 15%; overflow: hidden;color: #64FEFF;">设备类型</div>
<div style="width: 20%; overflow: hidden;color: #64FEFF;">预警信息</div>
<div style="width: 25%; overflow: hidden;color: #64FEFF;">预警时间</div>
<div style="width: 15%; overflow: hidden;color: #64FEFF;">状态</div>
</div>
<div class="listContent"></div>
</div>
<div style="background:linear-gradient(to left,#FFFFFF,#458dde,#FFFFFF);height:1px;"></div>
<ul id="legend">
</ul>
......@@ -275,8 +276,8 @@
应急资源监控
</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 style="float: left;width: 45%;height: auto;">
<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 100%;height: 200px;padding-left: 5px !important;padding-top: 3px !important;"></div>
<div class="inyuan">
<p style="letter-spacing: 2px;margin-top: 30px;">设备总数</p>
<span class="wu"
......@@ -332,7 +333,7 @@
</div>
</div>
<div style="background: linear-gradient(to left,#111a2e,#64FEFF,#111a2e);height:1px;margin-bottom: 20px;margin-left: 10px;width: 90%;"></div>
<div class="deviceNumLineout">
......@@ -341,8 +342,8 @@
预警数量
</div>
<div class="Linebutton">
<button type="button" class="linebtn active">日</button>
<button type="button" class="linebtn">月</button>
<button type="button" class="linebtn active">日统计</button>
<button type="button" class="linebtn">月统计</button>
</div>
<!-- 折线图 -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
......@@ -350,7 +351,7 @@
<div class="echarts deviceNumLine deviceNumLinemouth" id="deviceNumLinemouth" style="width: 370px;height: 200px;margin-top: 50px;"></div>
</div>
<div style="background: linear-gradient(to left,#111a2e,#64FEFF,#111a2e);height:1px;margin-bottom: 30px;margin-left: 10px;width: 90%;margin-top: 15px;"></div>
......@@ -483,7 +484,7 @@
linebtn[i].onclick = function(){
　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
for(var j=0;j<linebtn.length;j++){
linebtn[j].className = linebtn[j].className.replace(' active', '').trim();
linebtn[j].className = linebtn[j].className.replace(' active', '').trim();
deviceNumLine[j].className = deviceNumLine[j].className.replace(' show', '').trim();
}
this.className = this.className + ' active';
......@@ -637,35 +638,33 @@
float: right;
}
.linebtn{
margin: 10px 5px;
width: 80px;
margin: 10px 5px;
padding: 5px;
width: 60px;
border: none;
outline: none;
background-color: #126f7599;
color: #00F7DE;
border-radius: 5px;
outline: none;
background: rgba(0,0,0,0);
color: #fff;
border-radius: 5px;
}
.deviceNumLine{
margin: 10px auto;
display: none;
}
.linebtn.active{
background-color: #00F7DE;
color: #000000;
}
.deviceNumLine.show{
display:block;
}
.inyuan {
width: 120px;
height: 120px;
width: 123px;
height: 123px;
border-radius: 50%;
/* border: 2px solid #125c9b; */
position: fixed;
margin-bottom: 10px;
margin-top: -170px;
margin-left: 41px;
margin-top: -171px;
margin-left: 34px;
font-size: 15px;
color: #cddbe4;
text-align: center;
......@@ -675,7 +674,7 @@
}
.usernum {
float: left;
width: 52%;
width: 55%;
text-align: center;
height: auto;
margin-top: 35px;
......
ioc_frontweb/js/map.js
View file @ 0c87b096
......@@ -607,7 +607,7 @@ function removeMaker(category) {
} else {
for (var i in marker) {
map.remove(marker[i]);
$('#legend').find('li').removeClass('selected');
// $('#legend').find('li').removeClass('selected');
}
}
}
......
ioc_frontweb/js/utils.js
View file @ 0c87b096
......@@ -219,7 +219,7 @@ function createDeviceAlarmNumBarChart(options) {
{
name: 'Access From',
type: 'pie',
radius: ["75%", "65%"],
radius: ["80%", "70%"],
// center: ["50%", "50%"],
itemStyle: {
borderRadius: 20,
......@@ -407,41 +407,63 @@ function createLineChartmouth(options) {
name: options.name,
eleId: options.eleId,
opts: {
grid:{
x:50,
y:10,
x2:20,
y2:40,
borderWidth:1,
bottom:'15%'
},
xAxis: {
type: 'category',
// data: options.xAxisData,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
color: '#ddd',
fontSize:'14',
},
rotate: 60,
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ddd',
},
},
},
series: [
{
// data: options.seriesData,
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
grid:{
x:50,
y:10,
x2:20,
y2:60,
borderWidth:1,
top: '15%',
bottom:'15%'
},
xAxis: {
type: 'category',
// data: options.xAxisData,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
color: '#ddd',
},
rotate: 60,
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ddd',
fontSize:'14',
},
},
},
series: [
{
// data: options.seriesData,
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' }
])
},
},
}
]
},
};
createEchart(opts);
......@@ -583,14 +605,14 @@ function createLegendList() {
tmpLi +=
'<li data-id="' +
items[i].id +
'" class="legendItem "><div><img class="legendPic" style="padding: 7px 0;" src="./images/legend/' +
'" class="legendItem active"><div><img class="legendPic" style="padding: 7px 0;" src="./images/legend/' +
items[i].legendCode +
'.png" alt=""/><span class="legendTitle">' +
items[i].legendName +
'</span></div><div class="legendchild">';
var children = items[i].childList;
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="#" class="childa" title="' + children[j].legendName + '">' + children[j].legendName + '</a>';
}
tmpLi += '</div></li>';
}
......@@ -603,12 +625,19 @@ function createLegendList() {
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";
// var lc = this.lastChild;
// this.lastChild.style.display = "none";
for(var j=0;j<legenditem.length;j++){
legenditem[j].className = legenditem[j].className.replace(' active', '').trim();
// deviceNumLine[j].className = deviceNumLine[j].className.replace(' show', '').trim();
if(this.lastChild.style.display = "none"){
this.lastChild.style.display = "block";
}else{
this.lastChild.style.display = "none";
}
}
this.className = this.className + ' active';
　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
......@@ -1138,10 +1167,10 @@ function renderAlarmList(obj) {
<div style="width: 20%; overflow: hidden;">${pageData[i].unitName}</div>
<div style="width: 15%; overflow: hidden;">${pageData[i].typeName}</div>
<div style="width: 20%; overflow: hidden;">${pageData[i].statusName}</div>
<div style="width: 30%; overflow: hidden;">${new Date(pageData[i].alarmTime).toLocaleString('zh-CN', {
<div style="width: 25%; overflow: hidden;">${new Date(pageData[i].alarmTime).toLocaleString('zh-CN', {
hour12: false,
})}</div>
<div style="width: 10%; overflow: hidden;">${pageData[i].handledStatus}</div>
<div style="width: 15%; overflow: hidden;">${pageData[i].handledStatus}</div>
</li>`;
}
tmpHtml += '</ul>';
......
ioc_frontweb/style/style.css
View file @ 0c87b096
......@@ -171,7 +171,7 @@ table.layui-table th {
width: 100%;
height: auto !important;
padding: 10px;
margin-top: 80px;
margin-top: 30px;
margin-left: 5px;
overflow: hidden;
box-sizing: border-box;
......@@ -202,7 +202,8 @@ table.layui-table th {
-webkit-text-fill-color:transparent;
}
.alarm .itemh2 {
width: 100%;
width: 95%;
margin-left: 10px;
height: 30px;
font-size: 15px;
text-align: right;
......@@ -227,12 +228,12 @@ table.layui-table th {
overflow: hidden;
text-align: center;
height: 18px;
color: rgb(235, 232, 232);
color: #64FEFF;
margin: 5px 0;
}
#alarmList .listTitle {
border-bottom: 2px solid #fff;
border-bottom: 2px solid #c5bfbf;
margin-top: 25px;
}
......@@ -255,7 +256,7 @@ table.layui-table th {
}
#alarmList .listContent li.odd {
background-color: rgba(102, 239, 252, 0.3);
background-color: rgb(0 0 0 / 50%);
color: #fff;
}
......@@ -283,10 +284,10 @@ table.layui-table th {
#legend {
overflow: hidden;
width: 200%;
margin-left: 650px;
margin-left: 670px;
position: absolute;
bottom: 0;
margin-bottom: -35px;
margin-bottom: 10px;
color: #ddd;
}
......@@ -310,12 +311,16 @@ table.layui-table th {
overflow: hidden;
cursor: pointer;
float: left;
background: url(../images/vector5.png);
background: url(../images/re.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 5px;
margin-left: 10px;
}
.legendItem .active{
background: url(../images/vectorbot.png) no-repeat;
background-size: 100% 100%;
}
.legendchild{
display: none;
width: auto;
......@@ -330,10 +335,10 @@ table.layui-table th {
}
.legendItem a.selected {
background: rgb(34 62 107) url('../images/legend/selected.png') right top no-repeat !important;
.childa.selected {
background: rgb(34 62 107) url('../images/legend/recta.png')no-repeat !important;
background-size: 100% 100%;
border-radius: 5px;
background-size: 16px !important;
}
.legendPic {
......@@ -448,7 +453,7 @@ table.layui-table th {
height: 100%;
z-index: 2;
min-width: 1000px;
background: url(../images/mapbg6.png) no-repeat;
background: url(../images/borderban.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
......@@ -458,50 +463,55 @@ table.layui-table th {
background-repeat: no-repeat;
background-size: 100%;
width: 22%;
height: 87%;
height: 89%;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 2;
background-size: 100% 100%;
margin-top: 3%;
margin-left: 2%;
margin-top: 4.5%;
margin-left: 1%;
background: url(../images/mapl.png)no-repeat;
background-size: 100% 100%;
}
#rightBar{
/* background: url(../images/mapright1.png); */
background-repeat: no-repeat;
background-size: 100%;
width: 22%;
height: 87%;
height: 89%;
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background-size: 100% 100%;
margin-top: 3%;
margin-right: 3%;
margin-top: 4.5%;
margin-right: 1%;
background: url(../images/mapr.png)no-repeat;
background-size: 100% 100%;
}
.right-bar{
width: 100%;
height: auto !important;
padding: 10px;
margin-right: 5px;
margin-top: 80px;
margin-right: 10px;
margin-top: 20px;
overflow: hidden;
box-sizing: border-box;
}
.leftBar-legend{
width: 100%;
width: 96%;
height: auto !important;
padding: 10px;
margin-left: 5px;
margin-left: 20px;
overflow: hidden;
box-sizing: border-box;
}
.leftlegend{
width: 100%;
width: 95%;
margin-left: 10px;
height: 30px;
font-size: 15px;
text-align: right;
......@@ -510,13 +520,12 @@ table.layui-table th {
background-image: linear-gradient(to right,rgb(21 34 60 / 50%), rgb(29 45 78 / 70%) 50%);;
}
.rightlegend{
width: 100%;
width: 95%;
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{
......@@ -526,7 +535,7 @@ table.layui-table th {
user-select: none;
}
.deviceNumLineout{
width: 100%;
width: 92%;
height: auto !important;
padding: 10px;
margin-right: 5px;
......@@ -990,7 +999,7 @@ table.layui-table th {
margin-top: 10px;
overflow: hidden;
text-align: center;
width: 100%;
width: 95%;
}
.msgWrap .dutyinfo::-webkit-scrollbar {
/*滚动条整体样式*/
......@@ -1029,12 +1038,18 @@ table.layui-table th {
height: 40px;
width: 100%;
}
.msgWrap .dutyinfo dl dt,
.msgWrap .dutyinfo dl dt{
color: #64FEFF;
box-sizing: border-box;
width: 33%;
font-size: 0.9rem;
border-bottom: 1px solid #fff;
float: left;
}
.msgWrap .dutyinfo dl dd {
box-sizing: border-box;
width: 33%;
font-size: 0.9rem;
border: 1px solid #fff;
color: #fff;
float: left;
}
......@@ -1261,6 +1276,8 @@ table.layui-table th {
margin-bottom: 40px;
margin-left: 30px;
border: 1px solid #183158;
background: url(../images/groupshi.png)no-repeat;
background-size: 100% 100%;
}
.escbox-tip-a {
}
......@@ -1586,14 +1603,17 @@ div[lay-id='members'] thead tr:nth-child(1) {
left: 0;
width: 50px !important;
height: 20px;
color: #333;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 20px;
background: #fff;
background: #152136;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.amap-maptype-title:hover{
background: #152136;
}
.amap-maptype-list {
width: 50px !important;
border-radius: 5px !important;
......@@ -1612,7 +1632,7 @@ div[lay-id='members'] thead tr:nth-child(1) {
height: 20px;
margin: 0;
cursor: pointer;
background: #fff;
background: #152136;
}
.amap-maptype-check {
display: inline-block;
......@@ -1624,8 +1644,13 @@ div[lay-id='members'] thead tr:nth-child(1) {
display: inline-block;
width: 30px !important;
height: 15px;
color: #333;
color: #fff;
font-size: 12px;
line-height: 15px;
margin-left: 3px !important;
}
.linebtn.active{
background: url(../images/year.png);
background-size: 100% 100%;
color: #fff;
}
\ No newline at end of file
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