Skip to content

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

实时预警弹框样式优化

parent 1966a711
Show whitespace changes
Inline Side-by-side
Showing with 134 additions and 58 deletions
ioc_frontweb/index.html
View file @ 8fa77b13
......@@ -102,14 +102,16 @@
</div>
</div>
<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="layui-tab" lay-filter="layTAb">
<ul class="layui-tab-title">
<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>
<span class="closeBtn"><i class="layui-icon layui-icon-close"></i></span>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="padding: 5px; color: #555">
<table class="layui-hide" id="currEvents" lay-filter="currEvents"></table>
......@@ -153,7 +155,7 @@
<div class="tbl"></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>
<h3 align="center"></h3>
<div class="cn"></div>
......@@ -164,12 +166,12 @@
</button>
</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>
<h3 align="center"></h3>
<ul class="timeLine" style="width: 100%;height: 350px; margin-left: 0; margin-top: 20px; overflow: auto;"></ul>
</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>
<h3 align="center"></h3>
<div id="evaluatCon"></div>
......@@ -179,7 +181,7 @@
<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 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 style="width: 40%;text-align: center;">
<img src="images/topban.png" alt="" style="width: 80%;margin-top: 10px;">
......@@ -357,7 +359,7 @@
<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;">
预警数量
</div>
......@@ -475,8 +477,7 @@
<script src="./js/app.js"></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());
......
ioc_frontweb/js/app.js
View file @ 8fa77b13
......@@ -479,8 +479,8 @@ $(function () {
} else if (rowEvent == "tanDetail") {
let detaliHtml =
`<div class="eventDeatail">` +
`<P>事件名称：${rowData.eventName}</p>` +
`<P>事件等级：${rowData.eventLevel}级</p>` +
`<P>事件名称：<span style="color: #FF1A1A;">${rowData.eventName}</span></p>` +
`<P>事件等级：<span style="color: #FFC517;">${rowData.eventLevel}级</span></p>` +
`<P>事发地点：${rowData.eventAddress}</p>` +
`<P>报案人：${rowData.alarmPeople}</p>` +
`<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` +
......@@ -524,6 +524,10 @@ $(function () {
if (rowEvent == "review") {
$(`#esc-tit`).show();
$(`#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 };
checkEventEype = "review";
STEPEVENTS.switchItem(1);
......@@ -532,8 +536,8 @@ $(function () {
if (rowEvent == "tanDetail") {
let detaliHtml =
`<div class="eventDeatail">` +
`<P>事件名称：${rowData.eventName}</p>` +
`<P>事件等级：${rowData.eventLevel}级</p>` +
`<P>事件名称：<span style="color: #FF1A1A;">${rowData.eventName}</span></p>` +
`<P>事件等级：<span style="color: #FFC517;">${rowData.eventLevel}级</span></p>` +
`<P>事发地点：${rowData.eventAddress}</p>` +
`<P>报案人：${rowData.alarmPeople}</p>` +
`<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` +
......@@ -603,7 +607,7 @@ $(function () {
if (resArr.length > 0) {
let html = "";
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(
'<p>资源名称<font class="num">资源数量</font></p>' + html
......@@ -1192,11 +1196,13 @@ $(function () {
});
$(".closeBtn").click(function () {
$(".escbox-top,.escbox-bottom,#esc-tit").hide();
$(".escbox-tip").css({"background":"url(images/groupshi.png) no-repeat","background-size":"100% 100%"});
defalutMApP();
});
$(".escbox-tip-b .item").click(function () {
let inde = $(this).index(".escbox-tip-b .item");
$(".escbox-top").show();
$(".escbox-tip").css({"background":"url(images/groupbc.png) no-repeat","background-size":"100% 100%"});
element.on("tab(layTAb)", function (data) {
defalutMApP();
});
......
ioc_frontweb/js/utils.js
View file @ 8fa77b13
......@@ -641,21 +641,6 @@ function createLegendList() {
}
$('#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();
} else {
......
ioc_frontweb/style/style.css
View file @ 8fa77b13
......@@ -202,8 +202,8 @@ table.layui-table th {
-webkit-text-fill-color:transparent;
}
.alarm .itemh2 {
width: 95%;
margin-left: 10px;
width: 92%;
margin-left: 20px;
height: 30px;
font-size: 15px;
text-align: right;
......@@ -318,10 +318,10 @@ table.layui-table th {
overflow: hidden;
/* cursor: pointer; */
float: left;
background: url(../images/re.png);
background: url(../images/re.png) no-repeat;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 5px;
/* background-repeat: no-repeat; */
padding: 0 7px;
margin-left: 10px;
}
.legendItem .first{
......@@ -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%);;
}
.rightlegend{
width: 95%;
width: 94%;
height: 30px;
font-size: 15px;
line-height: 30px;
......@@ -791,13 +791,13 @@ table.layui-table th {
border: 1px solid #183158;
}
.escbox-tit {
color: #fff;
text-align: center;
text-align: left;
height: 36px;
color: #fff;
line-height: 36px;
padding-left: 15px;
}
.escbox-con {
background: #fff;
/* height: 200px; */
/* padding: 5px; */
overflow-y: auto;
......@@ -808,10 +808,12 @@ table.layui-table th {
position: absolute;
left: 53%;
transform: translateX(-50%);
top: 120px;
top: 130px;
overflow: hidden;
display: none;
z-index: 999;
padding: 10px 20px;
background: rgb(17 26 46 / 70%);
}
.layui-breadcrumb,
.layui-tree-btnGroup {
......@@ -823,14 +825,12 @@ table.layui-table th {
/* padding: 0.2rem 0.6rem; */
padding: 0.6rem 1.2rem;
color: #fff !important;
background: #1c76e6;
border-radius: 4px;
}
#esc-tit .layui-breadcrumb a.not {
background: gray;
}
#esc-tit .layui-breadcrumb a.done {
background: rgb(4, 160, 4);
}
#esc-tit .layui-breadcrumb span[lay-separator] {
margin: 0 10px;
......@@ -840,22 +840,76 @@ table.layui-table th {
margin: 0 1px;
}
.escbox-con .layui-tab-title li {
padding: 0 12px;
}
/* .escbox-con .layui-tab-title .layui-this {
background: #1c76e6;
padding: 0 23px;
color: #fff;
}
.escbox-con .layui-tab-title .layui-this {
color: #1190EC;
}
/* .escbox-con .layui-tab-title .layui-that {
color: #1190EC;
} */
.escbox-con .layui-tab {
margin: 0;
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 {
padding: 0;
}
.escbox-con .layui-table-cell {
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 {
cursor: pointer;
color: #1c76e6;
......@@ -865,18 +919,23 @@ table.layui-table th {
color: #fff;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
margin-top: 6px;
margin-right: 6px;
}
.numcolr {
color: red;
color: #DFB73E;
}
.escbox-bottom {
display: none;
background: rgb(24, 35, 62, 0.7);
background: rgb(17 26 46 / 70%);
color: #eee;
overflow: hidden;
height: calc(100% - 200px);
max-height: 400px;
}
.escbox-bottom.scroll {
margin: 10px;
......@@ -889,7 +948,8 @@ table.layui-table th {
text-align: left;
color: #eee;
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); */
}
......@@ -982,6 +1042,17 @@ table.layui-table th {
line-height: 2;
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 {
float: right;
}
......@@ -1345,13 +1416,13 @@ table.layui-table th {
text-align: center;
} */
.escbox-top {
background-color: rgba(24, 35, 62, 0.7);
background-color: rgb(17 26 46 / 70%);
margin: 10px;
border: 1px solid #183158;
display: none;
}
.fixedbox {
background: white;
background: rgb(17 26 46 / 70%);
width: auto;
max-width: 80%;
max-height: 300px;
......@@ -1371,12 +1442,17 @@ table.layui-table th {
}
}
.fixedbox-tit {
background: #4476a7;
background: rgb(29 46 76 / 50%);
color: #fff;
border: none;
padding: 0 10px;
height: 42px;
line-height: 42px;
width: auto;
height: 35px;
line-height: 35px;
margin-left: 10px;
margin-right: 10px;
margin-top: 8px;
border-radius: 5px;
}
.cbtn {
float: right;
......@@ -1446,7 +1522,8 @@ div[lay-id='members'] thead tr:nth-child(1) {
color: #fff;
}
.eventDeatail {
padding: 10px;
padding: 10px 15px;
color: #fff;
}
.eventDeatail p {
line-height: 1.8;
......@@ -1454,8 +1531,8 @@ div[lay-id='members'] thead tr:nth-child(1) {
.closeBtn {
position: absolute;
top: 13px;
right: 9px;
color: #333;
right: 20px;
color: #fff;
cursor: pointer;
}
/* jwjcss end*/
......@@ -1699,3 +1776,10 @@ div[lay-id='members'] thead tr:nth-child(1) {
.laytable-cell-2-0-2 {
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