Skip to content

Z
zanhuangyingji
Commit 8fa77b13 authored by yaqizhang's avatar yaqizhang
Browse files
Options

实时预警弹框样式优化

parent 1966a711
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 58 deletions
ioc_frontweb/index.html
View file @ 8fa77b13
...@@ -102,14 +102,16 @@ ...@@ -102,14 +102,16 @@
</div> </div>
</div> </div>
<div class="escbox-top"> <div class="escbox-top">
<div class="escbox-tit">应急事件</div> <div class="escbox-tit">
<span>应急事件</span>
<span class="closeBtn"><i class="layui-icon layui-icon-close"></i></span>
</div>
<div class="escbox-con"> <div class="escbox-con">
<div class="layui-tab" lay-filter="layTAb"> <div class="layui-tab" lay-filter="layTAb">
<ul class="layui-tab-title"> <ul class="layui-tab-title">
<li class="layui-this" lay-id="layTAb_curr">当前事件【<font class="numcolr currEvNum">0</font>】</li> <li class="layui-this" lay-id="layTAb_curr">当前事件【<font class="numcolr currEvNum">0</font>】</li>
<li lay-id="layTAb_hisy">事件回顾【<font class="numcolr hisEvNum">0</font>】</li> <li class="layui-that" lay-id="layTAb_hisy">事件回顾【<font class="numcolr hisEvNum">0</font>】</li>
</ul> </ul>
<span class="closeBtn"><i class="layui-icon layui-icon-close"></i></span>
<div class="layui-tab-content"> <div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="padding: 5px; color: #555"> <div class="layui-tab-item layui-show" style="padding: 5px; color: #555">
<table class="layui-hide" id="currEvents" lay-filter="currEvents"></table> <table class="layui-hide" id="currEvents" lay-filter="currEvents"></table>
...@@ -153,7 +155,7 @@ ...@@ -153,7 +155,7 @@
<div class="tbl"></div> <div class="tbl"></div>
</div> </div>
</div> </div>
<div class="item item2" style="margin: 0 5px"> <div class="item item2" style="margin: 0 5px;padding: 10px 0;">
<div class="btm-tit">预案执行</div> <div class="btm-tit">预案执行</div>
<h3 align="center"></h3> <h3 align="center"></h3>
<div class="cn"></div> <div class="cn"></div>
...@@ -164,12 +166,12 @@ ...@@ -164,12 +166,12 @@
</button> </button>
</div> </div>
</div> </div>
<div class="item item3" style="margin: 0 5px"> <div class="item item3" style="margin: 0 5px;padding: 10px 0;">
<div class="btm-tit">事件处理</div> <div class="btm-tit">事件处理</div>
<h3 align="center"></h3> <h3 align="center"></h3>
<ul class="timeLine" style="width: 100%;height: 350px; margin-left: 0; margin-top: 20px; overflow: auto;"></ul> <ul class="timeLine" style="width: 100%;height: 350px; margin-left: 0; margin-top: 20px; overflow: auto;"></ul>
</div> </div>
<div class="item item4" style="margin: 0 5px 5px"> <div class="item item4" style="margin: 0 5px 5px;;padding: 10px 0;">
<div class="btm-tit">事后评估</div> <div class="btm-tit">事后评估</div>
<h3 align="center"></h3> <h3 align="center"></h3>
<div id="evaluatCon"></div> <div id="evaluatCon"></div>
...@@ -179,7 +181,7 @@ ...@@ -179,7 +181,7 @@
<div class="mapbanner" style="position: fixed;top: 0;width: 100%;height: auto;z-index: 10;"> <div class="mapbanner" style="position: fixed;top: 0;width: 100%;height: auto;z-index: 10;">
<div style="width: 100%;height: auto;line-height: 60px;display: flex;justify-content: space-between;"> <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;"> <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> <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tb&skin=pitaya&color=64FEFF" frameborder="0" width="450" height="24" allowtransparency="true"></iframe>
</div> </div>
<div style="width: 40%;text-align: center;"> <div style="width: 40%;text-align: center;">
<img src="images/topban.png" alt="" style="width: 80%;margin-top: 10px;"> <img src="images/topban.png" alt="" style="width: 80%;margin-top: 10px;">
...@@ -357,7 +359,7 @@ ...@@ -357,7 +359,7 @@
<div class="deviceNumLineout"> <div class="deviceNumLineout">
<div class="rightlegend"> <div class="rightlegend" style="width: 104%;">
<img src="images/vector11.png" alt="" style="width: 14px;height: 14px;margin-left: 10px;"> <img src="images/vector11.png" alt="" style="width: 14px;height: 14px;margin-left: 10px;">
预警数量 预警数量
</div> </div>
...@@ -475,8 +477,7 @@ ...@@ -475,8 +477,7 @@
<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); 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());
......
ioc_frontweb/js/app.js
View file @ 8fa77b13
...@@ -479,8 +479,8 @@ $(function () { ...@@ -479,8 +479,8 @@ $(function () {
} else if (rowEvent == "tanDetail") { } else if (rowEvent == "tanDetail") {
let detaliHtml = let detaliHtml =
`<div class="eventDeatail">` + `<div class="eventDeatail">` +
`<P>事件名称：${rowData.eventName}</p>` + `<P>事件名称：<span style="color: #FF1A1A;">${rowData.eventName}</span></p>` +
`<P>事件等级：${rowData.eventLevel}级</p>` + `<P>事件等级：<span style="color: #FFC517;">${rowData.eventLevel}级</span></p>` +
`<P>事发地点：${rowData.eventAddress}</p>` + `<P>事发地点：${rowData.eventAddress}</p>` +
`<P>报案人：${rowData.alarmPeople}</p>` + `<P>报案人：${rowData.alarmPeople}</p>` +
`<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` + `<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` +
...@@ -524,6 +524,10 @@ $(function () { ...@@ -524,6 +524,10 @@ $(function () {
if (rowEvent == "review") { if (rowEvent == "review") {
$(`#esc-tit`).show(); $(`#esc-tit`).show();
$(`#esc-tit .abt`).addClass("done").removeClass("not"); $(`#esc-tit .abt`).addClass("done").removeClass("not");
$("#esc-tit .abt").click(function(){
$("#esc-tit .abt").css("background","none");
$(this).css({"background":"url(images/year.png)","background-size":"100% 100%"});
});
currentEventObj = { ...rowData }; currentEventObj = { ...rowData };
checkEventEype = "review"; checkEventEype = "review";
STEPEVENTS.switchItem(1); STEPEVENTS.switchItem(1);
...@@ -532,8 +536,8 @@ $(function () { ...@@ -532,8 +536,8 @@ $(function () {
if (rowEvent == "tanDetail") { if (rowEvent == "tanDetail") {
let detaliHtml = let detaliHtml =
`<div class="eventDeatail">` + `<div class="eventDeatail">` +
`<P>事件名称：${rowData.eventName}</p>` + `<P>事件名称：<span style="color: #FF1A1A;">${rowData.eventName}</span></p>` +
`<P>事件等级：${rowData.eventLevel}级</p>` + `<P>事件等级：<span style="color: #FFC517;">${rowData.eventLevel}级</span></p>` +
`<P>事发地点：${rowData.eventAddress}</p>` + `<P>事发地点：${rowData.eventAddress}</p>` +
`<P>报案人：${rowData.alarmPeople}</p>` + `<P>报案人：${rowData.alarmPeople}</p>` +
`<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` + `<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` +
...@@ -603,7 +607,7 @@ $(function () { ...@@ -603,7 +607,7 @@ $(function () {
if (resArr.length > 0) { if (resArr.length > 0) {
let html = ""; let html = "";
resArr.map((ele, index) => { resArr.map((ele, index) => {
html += `<p>${ele.legendName}<font class="num">${ele.num}</font></p>`; html += `<div class="div-p"><div class="divzy">${ele.legendName}</div><div class="ele-div"></div><font class="num">${ele.num}</font></div>`;
}); });
$("#escboxBottomItem1 .resouce .tbl").html( $("#escboxBottomItem1 .resouce .tbl").html(
'<p>资源名称<font class="num">资源数量</font></p>' + html '<p>资源名称<font class="num">资源数量</font></p>' + html
...@@ -1192,11 +1196,13 @@ $(function () { ...@@ -1192,11 +1196,13 @@ $(function () {
}); });
$(".closeBtn").click(function () { $(".closeBtn").click(function () {
$(".escbox-top,.escbox-bottom,#esc-tit").hide(); $(".escbox-top,.escbox-bottom,#esc-tit").hide();
$(".escbox-tip").css({"background":"url(images/groupshi.png) no-repeat","background-size":"100% 100%"});
defalutMApP(); defalutMApP();
}); });
$(".escbox-tip-b .item").click(function () { $(".escbox-tip-b .item").click(function () {
let inde = $(this).index(".escbox-tip-b .item"); let inde = $(this).index(".escbox-tip-b .item");
$(".escbox-top").show(); $(".escbox-top").show();
$(".escbox-tip").css({"background":"url(images/groupbc.png) no-repeat","background-size":"100% 100%"});
element.on("tab(layTAb)", function (data) { element.on("tab(layTAb)", function (data) {
defalutMApP(); defalutMApP();
}); });
......
ioc_frontweb/js/utils.js
View file @ 8fa77b13
...@@ -641,21 +641,6 @@ function createLegendList() { ...@@ -641,21 +641,6 @@ 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(){
// if(this.lastChild.style.display == "none"){
// this.style.backgroundImage="url(images/vectorbot.png)";
// this.lastChild.style.display = "block";
// }else{
// this.style.backgroundImage="url(images/re.png)";
// this.lastChild.style.display = "none";
// }
// };
}
// 默认显示视频监控设备 // 默认显示视频监控设备
// $('.legendItem').eq(0).click(); // $('.legendItem').eq(0).click();
} else { } else {
......
ioc_frontweb/style/style.css
View file @ 8fa77b13
...@@ -202,8 +202,8 @@ table.layui-table th { ...@@ -202,8 +202,8 @@ table.layui-table th {
-webkit-text-fill-color:transparent; -webkit-text-fill-color:transparent;
} }
.alarm .itemh2 { .alarm .itemh2 {
width: 95%; width: 92%;
margin-left: 10px; margin-left: 20px;
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
text-align: right; text-align: right;
...@@ -318,10 +318,10 @@ table.layui-table th { ...@@ -318,10 +318,10 @@ table.layui-table th {
overflow: hidden; overflow: hidden;
/* cursor: pointer; */ /* cursor: pointer; */
float: left; float: left;
background: url(../images/re.png); background: url(../images/re.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; /* background-repeat: no-repeat; */
padding: 0 5px; padding: 0 7px;
margin-left: 10px; margin-left: 10px;
} }
.legendItem .first{ .legendItem .first{
...@@ -555,7 +555,7 @@ table.layui-table th { ...@@ -555,7 +555,7 @@ table.layui-table th {
background-image: linear-gradient(to right,rgb(21 34 60 / 50%), rgb(29 45 78 / 70%) 50%);; background-image: linear-gradient(to right,rgb(21 34 60 / 50%), rgb(29 45 78 / 70%) 50%);;
} }
.rightlegend{ .rightlegend{
width: 95%; width: 94%;
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
line-height: 30px; line-height: 30px;
...@@ -791,13 +791,13 @@ table.layui-table th { ...@@ -791,13 +791,13 @@ table.layui-table th {
border: 1px solid #183158; border: 1px solid #183158;
} }
.escbox-tit { .escbox-tit {
color: #fff; text-align: left;
text-align: center;
height: 36px; height: 36px;
color: #fff;
line-height: 36px; line-height: 36px;
padding-left: 15px;
} }
.escbox-con { .escbox-con {
background: #fff;
/* height: 200px; */ /* height: 200px; */
/* padding: 5px; */ /* padding: 5px; */
overflow-y: auto; overflow-y: auto;
...@@ -808,10 +808,12 @@ table.layui-table th { ...@@ -808,10 +808,12 @@ table.layui-table th {
position: absolute; position: absolute;
left: 53%; left: 53%;
transform: translateX(-50%); transform: translateX(-50%);
top: 120px; top: 130px;
overflow: hidden; overflow: hidden;
display: none; display: none;
z-index: 999; z-index: 999;
padding: 10px 20px;
background: rgb(17 26 46 / 70%);
} }
.layui-breadcrumb, .layui-breadcrumb,
.layui-tree-btnGroup { .layui-tree-btnGroup {
...@@ -823,14 +825,12 @@ table.layui-table th { ...@@ -823,14 +825,12 @@ table.layui-table th {
/* padding: 0.2rem 0.6rem; */ /* padding: 0.2rem 0.6rem; */
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
color: #fff !important; color: #fff !important;
background: #1c76e6;
border-radius: 4px; border-radius: 4px;
} }
#esc-tit .layui-breadcrumb a.not { #esc-tit .layui-breadcrumb a.not {
background: gray; background: gray;
} }
#esc-tit .layui-breadcrumb a.done { #esc-tit .layui-breadcrumb a.done {
background: rgb(4, 160, 4);
} }
#esc-tit .layui-breadcrumb span[lay-separator] { #esc-tit .layui-breadcrumb span[lay-separator] {
margin: 0 10px; margin: 0 10px;
...@@ -840,22 +840,76 @@ table.layui-table th { ...@@ -840,22 +840,76 @@ table.layui-table th {
margin: 0 1px; margin: 0 1px;
} }
.escbox-con .layui-tab-title li { .escbox-con .layui-tab-title li {
padding: 0 12px; padding: 0 23px;
}
/* .escbox-con .layui-tab-title .layui-this {
background: #1c76e6;
color: #fff; color: #fff;
}
.escbox-con .layui-tab-title .layui-this {
color: #1190EC;
}
/* .escbox-con .layui-tab-title .layui-that {
color: #1190EC;
} */ } */
.escbox-con .layui-tab { .escbox-con .layui-tab {
margin: 0; margin: 0;
position: relative; position: relative;
} }
.escbox-con .layui-tab-title {
position: relative;
left: 0;
height: 40px;
white-space: nowrap;
font-size: 0;
background: #1D2D4E !important;
border: 1px solid #15A5FF !important;
border-radius: 5px !important;
/* border-bottom-width: 0px; */
/* border-bottom-style: solid; */
transition: all .2s;
-webkit-transition: all .2s;
}
.escbox-con .layui-tab-content { .escbox-con .layui-tab-content {
padding: 0; padding: 0;
} }
.escbox-con .layui-table-cell { .escbox-con .layui-table-cell {
padding: 0 5px; padding: 0 5px;
} }
.layui-table-header .layui-table thead tr{
background-color: #1D2E4C !important;
}
.layui-table-body .layui-table {
width: 100%;
background-color: rgba(0,0,0,0) !important;
color: #666;
}
.layui-table-view{
border-width: 0px !important;
}
.layui-table-view .layui-table th {
padding: 5px 0;
border-top: none;
border-left: none;
border-right: none !important;
}
.layui-table-view .layui-table td {
padding: 5px 0;
border: 0 !important;
}
.layui-tab-title .layui-this:after {
border-width: 0px !important;
}
.layui-table-header {
border-width: 0 0 0px !important;
overflow: hidden;
background: #1D2E4C !important;
}
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
color: #fff !important;
width: 33.3%;
text-align: center;
}
.layui-table-view .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click{
background-color: rgba(0, 0, 0, 0) !important;
}
.txtbtn { .txtbtn {
cursor: pointer; cursor: pointer;
color: #1c76e6; color: #1c76e6;
...@@ -865,18 +919,23 @@ table.layui-table th { ...@@ -865,18 +919,23 @@ table.layui-table th {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
position: absolute;
top: 0;
right: 0;
margin-top: 6px;
margin-right: 6px;
} }
.numcolr { .numcolr {
color: red; color: #DFB73E;
} }
.escbox-bottom { .escbox-bottom {
display: none; display: none;
background: rgb(24, 35, 62, 0.7); background: rgb(17 26 46 / 70%);
color: #eee; color: #eee;
overflow: hidden; overflow: hidden;
height: calc(100% - 200px); max-height: 400px;
} }
.escbox-bottom.scroll { .escbox-bottom.scroll {
margin: 10px; margin: 10px;
...@@ -889,7 +948,8 @@ table.layui-table th { ...@@ -889,7 +948,8 @@ table.layui-table th {
text-align: left; text-align: left;
color: #eee; color: #eee;
font-size: 14px; font-size: 14px;
background-color: rgba(21, 123, 255, 0.6); background-color: rgb(29 46 76 / 60%);
border-radius: 5px;
/* background-image: radial-gradient(#38adb9, #d6d1d1 5%, #23727d); */ /* background-image: radial-gradient(#38adb9, #d6d1d1 5%, #23727d); */
} }
...@@ -982,6 +1042,17 @@ table.layui-table th { ...@@ -982,6 +1042,17 @@ table.layui-table th {
line-height: 2; line-height: 2;
padding: 0 10px; padding: 0 10px;
} }
.item .tbl .div-p{
display: flex;
justify-content: space-between;
width: auto;
height: 25px;
padding: 0 10px;
line-height: 25px;
}
.item .tbl p:first-child {
color: #1190EC;
}
.item .tbl .num { .item .tbl .num {
float: right; float: right;
} }
...@@ -1345,13 +1416,13 @@ table.layui-table th { ...@@ -1345,13 +1416,13 @@ table.layui-table th {
text-align: center; text-align: center;
} */ } */
.escbox-top { .escbox-top {
background-color: rgba(24, 35, 62, 0.7); background-color: rgb(17 26 46 / 70%);
margin: 10px; margin: 10px;
border: 1px solid #183158; border: 1px solid #183158;
display: none; display: none;
} }
.fixedbox { .fixedbox {
background: white; background: rgb(17 26 46 / 70%);
width: auto; width: auto;
max-width: 80%; max-width: 80%;
max-height: 300px; max-height: 300px;
...@@ -1371,12 +1442,17 @@ table.layui-table th { ...@@ -1371,12 +1442,17 @@ table.layui-table th {
} }
} }
.fixedbox-tit { .fixedbox-tit {
background: #4476a7; background: rgb(29 46 76 / 50%);
color: #fff; color: #fff;
border: none; border: none;
padding: 0 10px; padding: 0 10px;
height: 42px; width: auto;
line-height: 42px; height: 35px;
line-height: 35px;
margin-left: 10px;
margin-right: 10px;
margin-top: 8px;
border-radius: 5px;
} }
.cbtn { .cbtn {
float: right; float: right;
...@@ -1446,7 +1522,8 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1446,7 +1522,8 @@ div[lay-id='members'] thead tr:nth-child(1) {
color: #fff; color: #fff;
} }
.eventDeatail { .eventDeatail {
padding: 10px; padding: 10px 15px;
color: #fff;
} }
.eventDeatail p { .eventDeatail p {
line-height: 1.8; line-height: 1.8;
...@@ -1454,8 +1531,8 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1454,8 +1531,8 @@ div[lay-id='members'] thead tr:nth-child(1) {
.closeBtn { .closeBtn {
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 9px; right: 20px;
color: #333; color: #fff;
cursor: pointer; cursor: pointer;
} }
/* jwjcss end*/ /* jwjcss end*/
...@@ -1698,4 +1775,11 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1698,4 +1775,11 @@ div[lay-id='members'] thead tr:nth-child(1) {
} }
.laytable-cell-2-0-2 { .laytable-cell-2-0-2 {
width: 70px !important; width: 70px !important;
}
.ele-div{
flex: 1;
height: 1px;
background: linear-gradient(to right, #ccc, #ccc 7.5px, transparent 7.5px, transparent);
background-size: 15px;
margin-top: 12px;
} }
\ 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