Skip to content

Z
zanhuangyingji
Commit 423625fe authored by zhangjianqian's avatar zhangjianqian
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents e95b55ca 67ce4ee0
Hide whitespace changes
Inline Side-by-side
Showing with 1270 additions and 932 deletions
ioc_frontweb/images/gr.svg 0 → 100644
View file @ 423625fe
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="7" fill="url(#paint0_radial_113_233)"/>
<circle cx="7" cy="7" r="6.85" stroke="#DFB73E" stroke-width="0.3"/>
<defs>
<radialGradient id="paint0_radial_113_233" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7 7) rotate(90) scale(7)">
<stop stop-color="#DFB73E"/>
<stop offset="1" stop-color="#DFB73E" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
ioc_frontweb/index.html
View file @ 423625fe
...@@ -22,11 +22,8 @@ ...@@ -22,11 +22,8 @@
</div> </div>
<div id="mainTitle"> <div id="mainTitle">
<img src="images/top-banner01.png" alt=""> <!-- <img src="images/top-banner01.png" alt=""> -->
</div> </div>
<div id="weather">
<iframe frameborder="0" scrolling="no" seamless="seamless" src="./weather.html"></iframe>
</div>
<!-- <div id="topBg"></div> --> <!-- <div id="topBg"></div> -->
<!-- <div class="videoWindows" style="position: absolute; z-index: 100; width: 100%; height: 500px; bottom: 0; left: 0;"> <!-- <div class="videoWindows" style="position: absolute; z-index: 100; width: 100%; height: 500px; bottom: 0; left: 0;">
...@@ -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> <span class="escbox-txt item">实时预警</span>
<!-- <img src="images/u517.gif" alt="" /> -->
<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,109 +176,203 @@ ...@@ -186,109 +176,203 @@
</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;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 style="width: 40%;text-align: center;">
<img src="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: #64FEFF;"></p>
<!-- <p id="itemtwo"></p> -->
</div>
<div id="item item1">
<div id="he-plugin-standard"></div>
</div>
</div>
</div>
</div>
</div>
<div id="border">
<img src="images/borderbantop.png" alt="" class="bordertop">
<img src="images/borderbanleft.png" alt="" class="borderleft">
<img src="images/borderbanright.png" alt="" class="borderright">
<img src="images/borderbanbottom.png" alt="" class="borderbottom">
</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>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</a> </a>
<a href="#" class="btn span2"> <a href="#" class="btn span2">
<div>值守通讯</div> <div>值守通讯</div>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</a> </a>
<a href="#" class="btn span3"> <a href="#" class="btn span3">
<div>事件回顾</div> <div>事件回顾</div>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</a> </a>
<a href="#" class="btn span4"> <a href="#" class="btn span4">
<div>综合保障</div> <div>综合保障</div>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</a> </a>
<a href="#" class="btn span5"> <a href="#" class="btn span5">
<div>应急预案</div> <div>应急预案</div>
<span></span> <span></span>
<span></span> <span></span>
<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 style="background: linear-gradient(to left,#111a2e,#64FEFF,#111a2e);height:1px;margin-top: 20px;margin-bottom: 20px;margin-left: 20px;width: 90%;"></div>
<div class="leftlegend"> <div id="" class="leftBar-legend">
应急资源监控 <div class="leftlegend">
</div> 事件类型统计
<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 430px;height: 260px;padding-left: 5px !important;padding-top: 3px !important;"></div> <img src="images/vector8.png" alt="" style="width: 14px;margin-right: 10px;">
<div style="background:linear-gradient(to left,#FFFFFF,#458dde,#FFFFFF);height:1px;"></div> </div>
<ul id="legend"> <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>
</ul> <div id="alarmList" class="right-alarm">
</div> <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;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>
<ul id="legend" class="legendcss">
</ul>
</div>
</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 class="echarts deviceNumPie" id="deviceNumPie"></div> </div>
</div> <div style="width: 100%;height: auto;">
<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"
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>
</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"> <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">
<button type="button" class="linebtn active">日</button> <button type="button" class="linebtn">日统计</button>
<button type="button" class="linebtn">月</button> <button type="button" class="linebtn active">月统计</button>
</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" id="deviceNumLineday" style="width: 380px;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 show" id="deviceNumLinemouth" style="width: 380px;height: 200px;margin-top: 50px;"></div>
</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>
<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 class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:130px;">
<dl>
<dt>部门</dt>
<dt>当班人员</dt>
<dt>电话</dt>
</dl>
</div> </div>
<div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:150px;">
<dl>
<dt>部门</dt>
<dt>当班人员</dt>
<dt>电话</dt>
</dl>
</div>
</div> </div>
</div> </div>
<div class="hide videoHome"> <div class="hide videoHome">
...@@ -376,6 +460,10 @@ ...@@ -376,6 +460,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], {
...@@ -401,7 +489,7 @@ ...@@ -401,7 +489,7 @@
linebtn[i].onclick = function(){ linebtn[i].onclick = function(){
　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容 　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
for(var j=0;j<linebtn.length;j++){ 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(); deviceNumLine[j].className = deviceNumLine[j].className.replace(' show', '').trim();
} }
this.className = this.className + ' active'; this.className = this.className + ' active';
...@@ -549,102 +637,77 @@ ...@@ -549,102 +637,77 @@
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{
margin: 10px 5px; margin: 10px 5px;
width: 80px; padding: 5px;
width: 60px;
border: none; border: none;
outline: none; outline: none;
background-color: #126f7599; background: rgba(0,0,0,0);
color: #00F7DE; color: #fff;
border-radius: 5px; border-radius: 5px;
} }
.deviceNumLine{ .deviceNumLine{
margin: 10px auto; margin: 10px auto;
display: none; display: none;
} }
.linebtn.active{
background-color: #00F7DE;
color: #000000;
}
.deviceNumLine.show{ .deviceNumLine.show{
display:block; display:block;
} }
.inyuan {
width: 123px;
height: 123px;
border-radius: 50%;
/* border: 2px solid #125c9b; */
position: fixed;
margin-bottom: 10px;
margin-top: -161px;
margin-left: 34px;
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: 55%;
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/app.js
View file @ 423625fe
$(function () { $(function () {
layui.use(['layer', 'table', 'element'], function () { layui.use(["layer", "table", "element"], function () {
layLayer = layui.layer; layLayer = layui.layer;
layTable = layui.table; layTable = layui.table;
element = layui.element; element = layui.element;
...@@ -13,15 +13,15 @@ $(function () { ...@@ -13,15 +13,15 @@ $(function () {
let circle = new AMap.Circle({ let circle = new AMap.Circle({
center: new AMap.LngLat(lng, lat), // 圆心位置 center: new AMap.LngLat(lng, lat), // 圆心位置
radius: radius, //半径 radius: radius, //半径
strokeColor: '#F33', //线颜色 strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度 strokeOpacity: 1, //线透明度
strokeWeight: 1, //线粗细度 strokeWeight: 1, //线粗细度
fillColor: '#ee2200', //填充颜色 fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35, //填充透明度 fillOpacity: 0.35, //填充透明度
}); });
let poiIcon = new AMap.Icon({ let poiIcon = new AMap.Icon({
size: new AMap.Size(102, 102), size: new AMap.Size(102, 102),
image: './images/flag.png', image: "./images/flag.png",
imageSize: new AMap.Size(62, 62), imageSize: new AMap.Size(62, 62),
imageOffset: new AMap.Pixel(0, 0), imageOffset: new AMap.Pixel(0, 0),
}); });
...@@ -48,63 +48,65 @@ $(function () { ...@@ -48,63 +48,65 @@ $(function () {
function removeAllOverlay() { function removeAllOverlay() {
map.clearMap(); map.clearMap();
map.setCenter(defaultCenter); map.setCenter(defaultCenter);
$('#legend a').removeClass('selected'); $("#legend a").removeClass("selected");
} }
//搜索按钮 //搜索按钮
function getBtmSearchData(param) { function getBtmSearchData(param) {
let opts = { let opts = {
url: apis.mapSearch, url: apis.mapSearch,
type: 'post', type: "post",
data: JSON.stringify({ keywords: param }), data: JSON.stringify({ keywords: param }),
success: function (res) { success: function (res) {
if (res.code === 0) { if (res.code === 0) {
let arr = res.data.pageData; let arr = res.data.pageData;
if (arr.length > 0) { if (arr.length > 0) {
let html = ''; let html = "";
removeAllOverlay(); removeAllOverlay();
$('#legend li a').removeClass('selected'); $("#legend li a").removeClass("selected");
arr.map((ele) => { arr.map((ele) => {
html += `<div class="btm-list-item" data-id="${ele.id}">${ele.fullName}</div>`; html += `<div class="btm-list-item" data-id="${ele.id}">${ele.fullName}</div>`;
let ar = []; let ar = [];
ar.push(ele); ar.push(ele);
addMarker(ar, ele.showType, null); addMarker(ar, ele.showType, null);
}); });
$('#listWrap').html(html); $("#listWrap").html(html);
// $('.btm-list-item').click(function(){ // $('.btm-list-item').click(function(){
// let id = $(this).attr('data-id'); // let id = $(this).attr('data-id');
// let rowobj = arr.filter(ele => ele.id = id) // let rowobj = arr.filter(ele => ele.id = id)
// addMarker(rowobj, rowobj.showType, null) // addMarker(rowobj, rowobj.showType, null)
// }) // })
} else { } else {
$('#listWrap').html('<div class="btm-list-item" style="text-align:center;">无搜索结果！</div>'); $("#listWrap").html(
'<div class="btm-list-item" style="text-align:center;">无搜索结果！</div>'
);
} }
} }
}, },
}; };
jQueryAjax(opts); jQueryAjax(opts);
} }
$('.uative').on('click', function () { $(".uative").on("click", function () {
$('#btmSearch > *').fadeIn(100); $("#btmSearch > *").fadeIn(100);
$(this).hide(); $(this).hide();
}); });
$('.activebtn').on('click', function (e) { $(".activebtn").on("click", function (e) {
let val = $('#btnInput').val(); let val = $("#btnInput").val();
getBtmSearchData(val); getBtmSearchData(val);
}); });
$('.guan').click(function () { $(".guan").click(function () {
$('#btmSearch > *').hide(); $("#btmSearch > *").hide();
$('.uative').show(); $(".uative").show();
}); });
$('#removeSerBtn').click(function () { $("#removeSerBtn").click(function () {
removeAllOverlay(); removeAllOverlay();
}); });
$('#mulitVideoBtn').click(function () { $("#mulitVideoBtn").click(function () {
showMulitVideo(); showMulitVideo();
}); });
$('#btnInput').bind('input', function (e) { $("#btnInput").bind("input", function (e) {
let val = e.target.value; let val = e.target.value;
if (!val) { if (!val) {
$('#listWrap').html(''); $("#listWrap").html("");
removeAllOverlay(); removeAllOverlay();
} }
}); });
...@@ -128,78 +130,174 @@ $(function () { ...@@ -128,78 +130,174 @@ $(function () {
});*/ });*/
$('.controlBtn .button').mousedown(function () { $(".controlBtn .button").mousedown(function () {
var self = this; var self = this;
console.log($(self).data('action'),"dfdf===----------------===============",$("#controllerDeviceId").val()); console.log(
videoControlling($("#controllerDeviceId").val(),0,$(self).data('action')); $(self).data("action"),
}) "dfdf===----------------===============",
$("#controllerDeviceId").val()
$('.controlBtn .button').mouseup(function () { );
var self = this; videoControlling($("#controllerDeviceId").val(), 0, $(self).data("action"));
console.log($(self).data('action'),"dfdf===----------------===============",$("#controllerDeviceId").val()); });
videoControlling($("#controllerDeviceId").val(),1,$(self).data('action'));
}) $(".controlBtn .button").mouseup(function () {
var self = this;
console.log(
$(self).data("action"),
"dfdf===----------------===============",
$("#controllerDeviceId").val()
);
videoControlling($("#controllerDeviceId").val(), 1, $(self).data("action"));
});
// 鼠标滚动放大缩小 // 鼠标滚动放大缩小
$('.reset').on('mousewheel DOMMouseScroll', function (e) { $(".reset").on("mousewheel DOMMouseScroll", function (e) {
var delta = var delta =
(e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (e.originalEvent.wheelDelta &&
(e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (!videoController) { if (!videoController) {
return; return;
} }
if (videoController.getInChoiceVideo() === undefined) { if (videoController.getInChoiceVideo() === undefined) {
layLayer.msg('请先点击视频以选中'); layLayer.msg("请先点击视频以选中");
return; return;
} }
if (delta > 0) { if (delta > 0) {
// 向上滚 // 向上滚
videoController.setChoiceWindow(0); videoController.setChoiceWindow(0);
videoController.holder('zoomout', { speed: 4000, group: 0, present: 0, time: 0 }, false); videoController.holder(
"zoomout",
{ speed: 4000, group: 0, present: 0, time: 0 },
false
);
var mousewheelUpTimer = setTimeout(function () { var mousewheelUpTimer = setTimeout(function () {
videoController.holder('zoomout', { speed: 4000, group: 0, present: 0, time: 0 }, true); videoController.holder(
"zoomout",
{ speed: 4000, group: 0, present: 0, time: 0 },
true
);
clearTimeout(mousewheelUpTimer); clearTimeout(mousewheelUpTimer);
}, 500); }, 500);
} else if (delta < 0) { } else if (delta < 0) {
// 向下滚 // 向下滚
videoController.setChoiceWindow(0); videoController.setChoiceWindow(0);
videoController.holder('zoomin', { speed: 4000, group: 0, present: 0, time: 0 }, false); videoController.holder(
"zoomin",
{ speed: 4000, group: 0, present: 0, time: 0 },
false
);
var mousewheelDownTimer = setTimeout(function () { var mousewheelDownTimer = setTimeout(function () {
videoController.holder('zoomin', { speed: 4000, group: 0, present: 0, time: 0 }, true); videoController.holder(
"zoomin",
{ speed: 4000, group: 0, present: 0, time: 0 },
true
);
clearTimeout(mousewheelDownTimer); clearTimeout(mousewheelDownTimer);
}, 500); }, 500);
} }
}); });
// 监听图例点击事件 // 监听图例点击事件
$('#legend').on('click', function (ev) { $("#legend").on("click", function (ev) {
let isJkelected = $('.layui-layer-btn .jkBtn').hasClass('selected'); const target = $(ev.target);
const li = target.closest("li");
let isJkelected = $(".layui-layer-btn .jkBtn").hasClass("selected");
if (isJkelected) { if (isJkelected) {
removeMaker('jk'); removeMaker("jk");
$('.layui-layer-btn .jkBtn').removeClass('selected'); $(".layui-layer-btn .jkBtn").removeClass("selected");
} }
if (ev.target.tagName.toLowerCase() !== 'a') { // 当点的不是a标签
$(ev.target).closest('li').find('a').click(); if (ev.target.tagName.toLowerCase() !== "a") {
// 根据li的active属性拍判断是否是选中状态，因为初始是undefind 所哟要!!转化为boolea,状态是在点击a标签的时候发生改变的
// 如果全选了 那li状态就味true，否则都是false
const aciveFlag = !!li.data("active");
const clickArr = li.find("a");
filterClick(clickArr, aciveFlag);
} else { } else {
if ($(ev.target)[0].classList.toString().indexOf('selected') === -1) { // 当点的是a
removeMaker($(ev.target).data('id')); if ($(ev.target)[0].classList.toString().indexOf("selected") === -1) {
addCateMarker($(ev.target).data('id'), $(ev.target).closest('li').data('id')); removeMaker($(ev.target).data("id"));
addCateMarker(
$(ev.target).data("id"),
$(ev.target).closest("li").data("id")
);
} else { } else {
removeMaker($(ev.target).data('id')); removeMaker($(ev.target).data("id"));
}
$(ev.target).toggleClass("selected");
// 获取当先元素下的a
const domArr = $(ev.target).closest(".legendchild").find("a");
// 计算a是否都被选中
const selectedFlag = domArr.get().every((item) => {
return $(item).hasClass("selected");
});
// 如果全被选中，就让li状态改为全选，否则状态就是未被全选
if (selectedFlag) {
$(ev.target).closest("li").data("active", true);
li.css({ backgroundImage: "url(images/vectorbot.png)" });
} else {
$(ev.target).closest("li").data("active", false);
} }
$(ev.target).toggleClass('selected');
} }
}); });
// 当点击li时，如果a元素自身场景选择是否被点击，li选中状态的时候，a标签要全都选中，l没被选中的时候，a标签要全部清楚
function filterClick(clickArr, bool) {
$.each(clickArr, function (index, ele) {
if ($(ele).hasClass("selected") == bool) {
$(ele).click();
}
});
}
let timer = null;
let timer2 = null;
$(".legendcss").on("mouseover", function (ev) {
const target = $(ev.target);
// if (target.get(0).tagName == "UL") return;
const li = target.closest("li");
// 当被li是被选中状态
if (li.data("active")) {
} else {
// 当li不是选中状态才触发自动换背景颜色
li.css({ backgroundImage: "url(images/vectorbot.png)" });
li.data("hover", true);
}
const arr = $("#legend").find("li");
// 全体归位清零
$.each(arr, function (index, ele) {
$(ele).children(".legendchild").hide();
});
// 当前div出现
li.find(".legendchild").show();
});
$(".legendcss").on("mouseout", function (ev) {
const target = $(ev.target);
const li = target.closest("li");
if (li.data("active")) {
} else {
// 当li不是选中状态才触发自动换背景颜色，只有移出的时候才切换北京颜色
li.css({ backgroundImage: "url(images/re.png)" });
li.data("hover", false);
}
li.find(".legendchild").hide();
});
/*全局变量*/ /*全局变量*/
var currentEventObj = {}; //点击评估处理时当前事件obj var currentEventObj = {}; //点击评估处理时当前事件obj
(currEventsArr = []), //当前事件Arrary (currEventsArr = []), //当前事件Arrary
(getCurrEventsArr = []), (getCurrEventsArr = []),
(socketCurrEventsArr = []), (socketCurrEventsArr = []),
(checkEventEype = ''), //回顾事件 review 处理当前 current (checkEventEype = ""), //回顾事件 review 处理当前 current
(stepWord = 0); //处理中事件 到了哪一步了 0-3 step (stepWord = 0); //处理中事件 到了哪一步了 0-3 step
/* /*
* 绑定window操作事件* * 绑定window操作事件*
...@@ -207,21 +305,21 @@ $(function () { ...@@ -207,21 +305,21 @@ $(function () {
window.CAEVT = { window.CAEVT = {
//查看预案详情 //查看预案详情
check(d) { check(d) {
$('.yjdetali').show(); $(".yjdetali").show();
$('.yjdetali').html(`<h1>${d.planTitle} ${d.planLevel + '级'}</h1> $(".yjdetali").html(`<h1>${d.planTitle} ${d.planLevel + "级"}</h1>
<table id="members" lay-filter="members"></table>${d.planContents}`); <table id="members" lay-filter="members"></table>${d.planContents}`);
layTable.render({ layTable.render({
elem: '#members', elem: "#members",
size: 'sm', size: "sm",
skin: 'nob', skin: "nob",
cols: [ cols: [
[{ align: 'center', title: '人员列表', colspan: 5 }], [{ align: "center", title: "人员列表", colspan: 5 }],
[ [
{ field: 'deptName', title: '部门' }, { field: "deptName", title: "部门" },
{ field: 'userName', title: '联系人' }, { field: "userName", title: "联系人" },
{ field: 'mobilePhone', title: '手机号' }, { field: "mobilePhone", title: "手机号" },
{ field: 'phone', title: '电话' }, { field: "phone", title: "电话" },
{ field: 'email', title: '邮箱' }, { field: "email", title: "邮箱" },
], ],
], ],
data: d.rdeptInfoList, data: d.rdeptInfoList,
...@@ -229,7 +327,7 @@ $(function () { ...@@ -229,7 +327,7 @@ $(function () {
}, },
//查看预案详情 //查看预案详情
checkPlan(planid) { checkPlan(planid) {
BOTMTOOLBAR.genericPlan('', planid); BOTMTOOLBAR.genericPlan("", planid);
}, },
//关联预案 //关联预案
connect(d) { connect(d) {
...@@ -240,14 +338,14 @@ $(function () { ...@@ -240,14 +338,14 @@ $(function () {
layLayer.confirm(`确定关联此预案《${d.planTitle}》吗？`, function () { layLayer.confirm(`确定关联此预案《${d.planTitle}》吗？`, function () {
let opt = { let opt = {
url: apis.contentPlan, url: apis.contentPlan,
type: 'post', type: "post",
data: JSON.stringify(obj), data: JSON.stringify(obj),
success: function (res) { success: function (res) {
if (res.code == 0) layLayer.msg('关联成功！', { icon: 1 }); if (res.code == 0) layLayer.msg("关联成功！", { icon: 1 });
//修改事件状态 //修改事件状态
STEPEVENTS.changeStatus('2'); STEPEVENTS.changeStatus("2");
//关联预案成功跳转到态势决策 //关联预案成功跳转到态势决策
$('#yingjlistbox').hide(); $("#yingjlistbox").hide();
}, },
}; };
jQueryAjax(opt); jQueryAjax(opt);
...@@ -262,7 +360,7 @@ $(function () { ...@@ -262,7 +360,7 @@ $(function () {
success: function (res) { success: function (res) {
if (res.code == 0) { if (res.code == 0) {
if (res.data) { if (res.data) {
$('#mainTitle span').html(res.data.value); $("#mainTitle span").html(res.data.value);
} }
} }
}, },
...@@ -272,7 +370,7 @@ $(function () { ...@@ -272,7 +370,7 @@ $(function () {
//评估处理 //评估处理
handleEvent(obj) { handleEvent(obj) {
currentEventObj = { ...obj }; currentEventObj = { ...obj };
if (obj.eventStatus == 0) STEPEVENTS.changeStatus('1'); if (obj.eventStatus == 0) STEPEVENTS.changeStatus("1");
else STEPEVENTS.toStepChange(obj.eventStatus); else STEPEVENTS.toStepChange(obj.eventStatus);
}, },
//执行预案 //执行预案
...@@ -281,20 +379,20 @@ $(function () { ...@@ -281,20 +379,20 @@ $(function () {
/* 启动预案 */ url: apis.carryPlan + currentEventObj.id, /* 启动预案 */ url: apis.carryPlan + currentEventObj.id,
success: function (res) { success: function (res) {
if (res.code == 0) { if (res.code == 0) {
layLayer.msg('启动预案成功！', { icon: 1 }); layLayer.msg("启动预案成功！", { icon: 1 });
STEPEVENTS.changeStatus('3'); STEPEVENTS.changeStatus("3");
} }
}, },
}, },
addOpt = { addOpt = {
/* 增补预案 */ type: 'post', /* 增补预案 */ type: "post",
data: JSON.stringify({ data: JSON.stringify({
addPlanContent: $('textarea[name=addPlan]').val(), addPlanContent: $("textarea[name=addPlan]").val(),
}), }),
url: apis.addPlan + currentEventObj.id, url: apis.addPlan + currentEventObj.id,
success: function (res) { success: function (res) {
if (res.code == 0) { if (res.code == 0) {
layLayer.msg('增补预案成功！', { icon: 1 }); layLayer.msg("增补预案成功！", { icon: 1 });
jQueryAjax(carryOpt); jQueryAjax(carryOpt);
} }
}, },
...@@ -306,11 +404,11 @@ $(function () { ...@@ -306,11 +404,11 @@ $(function () {
let defaultHtml = `<div id="${id}" class="fixedbox"> let defaultHtml = `<div id="${id}" class="fixedbox">
<div class="fixedbox-tit">${title}<span class="cbtn"><i class="layui-icon layui-icon-close"></i></span></div></div>`; <div class="fixedbox-tit">${title}<span class="cbtn"><i class="layui-icon layui-icon-close"></i></span></div></div>`;
if ($(`#${id}`).length == 0) { if ($(`#${id}`).length == 0) {
$('body').append(defaultHtml); $("body").append(defaultHtml);
$(`#${id} .fixedbox-tit`).after(addhtml); $(`#${id} .fixedbox-tit`).after(addhtml);
$(`#${id}`).show(); $(`#${id}`).show();
} }
$('body').on('click', `#${id} .cbtn`, function () { $("body").on("click", `#${id} .cbtn`, function () {
$(`#${id}`).remove(); $(`#${id}`).remove();
}); });
}, },
...@@ -327,7 +425,7 @@ $(function () { ...@@ -327,7 +425,7 @@ $(function () {
getCurrEventsArr = [...currarr]; getCurrEventsArr = [...currarr];
_this.renderEventList(); _this.renderEventList();
/* 历史事件 */ /* 历史事件 */
$('.hisEvNum').html(resData.historyEventNum); $(".hisEvNum").html(resData.historyEventNum);
_this.historyEvent(resData.historyEventList); _this.historyEvent(resData.historyEventList);
} }
}, },
...@@ -337,46 +435,48 @@ $(function () { ...@@ -337,46 +435,48 @@ $(function () {
//渲染当前事件列表 //渲染当前事件列表
renderEventList() { renderEventList() {
currEventsArr = [...getCurrEventsArr, ...socketCurrEventsArr]; currEventsArr = [...getCurrEventsArr, ...socketCurrEventsArr];
$('.currEvNum').html(currEventsArr.length); $(".currEvNum").html(currEventsArr.length);
if (getCurrEventsArr.length > 0) $('.escbox-txt').html('<font style="color:red">有待处理事件！</font>'); if (getCurrEventsArr.length > 0)
if (socketCurrEventsArr.length > 0) $('.escbox-txt').html('<font style="color:red">发生事件！</font>'); $(".escbox-txt").html('<font style="color:red">有待处理事件！</font>');
if (socketCurrEventsArr.length > 0)
$(".escbox-txt").html('<font style="color:red">发生事件！</font>');
layTable.render({ layTable.render({
elem: '#currEvents', elem: "#currEvents",
size: 'sm', size: "sm",
cols: [ cols: [
[ [
{ field: 'alarmTime', title: '时间' }, { field: "alarmTime", title: "时间" },
{ {
field: 'eventName', field: "eventName",
title: '事件名称', title: "事件名称",
event: 'tanDetail', event: "tanDetail",
templet: function (d) { templet: function (d) {
return `<span style="text-decoration:underline;cursor:pointer">${d.eventName}</span>`; return `<span style="text-decoration:underline;cursor:pointer">${d.eventName}</span>`;
}, },
}, },
{ {
field: '', field: "",
title: '操作', title: "操作",
templet: function (d) { templet: function (d) {
let txt; let txt;
if (d.eventStatus == 0) txt = '评估处理'; if (d.eventStatus == 0) txt = "评估处理";
else txt = evenStepNameArr[Number(d.eventStatus) - 1]; else txt = evenStepNameArr[Number(d.eventStatus) - 1];
return '<span class="txtbtn">' + txt + '</span>'; return '<span class="txtbtn">' + txt + "</span>";
}, },
event: 'handle', event: "handle",
}, },
], ],
], ],
data: currEventsArr, data: currEventsArr,
}); });
layTable.on('tool(currEvents)', function (obj) { layTable.on("tool(currEvents)", function (obj) {
let rowData = obj.data, let rowData = obj.data,
rowEvent = obj.event; rowEvent = obj.event;
if (rowEvent == 'handle') { if (rowEvent == "handle") {
//评估处理 //评估处理
checkEventEype = 'current'; checkEventEype = "current";
CARYEVENTS.handleEvent(rowData); CARYEVENTS.handleEvent(rowData);
} else if (rowEvent == 'tanDetail') { } else if (rowEvent == "tanDetail") {
let detaliHtml = let detaliHtml =
`<div class="eventDeatail">` + `<div class="eventDeatail">` +
`<P>事件名称：${rowData.eventName}</p>` + `<P>事件名称：${rowData.eventName}</p>` +
...@@ -386,50 +486,50 @@ $(function () { ...@@ -386,50 +486,50 @@ $(function () {
`<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` + `<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` +
`<P>事发时间：${rowData.alarmTime}</p>` + `<P>事发时间：${rowData.alarmTime}</p>` +
`</div>`; `</div>`;
CARYEVENTS.tanDialogFun('事件详情', 'eventDetail', detaliHtml); CARYEVENTS.tanDialogFun("事件详情", "eventDetail", detaliHtml);
} }
}); });
}, },
//渲染历史事件列表 //渲染历史事件列表
historyEvent(historyList) { historyEvent(historyList) {
layTable.render({ layTable.render({
elem: '#esctable', elem: "#esctable",
size: 'sm', size: "sm",
cols: [ cols: [
[ [
{ field: 'alarmTime', title: '时间' }, { field: "alarmTime", title: "时间" },
{ {
field: 'eventName', field: "eventName",
title: '事件名称', title: "事件名称",
event: 'tanDetail', event: "tanDetail",
templet: function (d) { templet: function (d) {
return `<span style="text-decoration:underline;cursor:pointer">${d.eventName}</span>`; return `<span style="text-decoration:underline;cursor:pointer">${d.eventName}</span>`;
}, },
}, },
{ {
field: '', field: "",
title: '操作', title: "操作",
templet: function (d) { templet: function (d) {
return '<span class="txtbtn layui-tab layui-tab-brief">回顾</span>'; return '<span class="txtbtn layui-tab layui-tab-brief">回顾</span>';
}, },
event: 'review', event: "review",
}, },
], ],
], ],
data: historyList, data: historyList,
}); });
layTable.on('tool(esctable)', function (obj) { layTable.on("tool(esctable)", function (obj) {
let rowData = obj.data, let rowData = obj.data,
rowEvent = obj.event; rowEvent = obj.event;
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");
currentEventObj = { ...rowData }; currentEventObj = { ...rowData };
checkEventEype = 'review'; checkEventEype = "review";
STEPEVENTS.switchItem(1); STEPEVENTS.switchItem(1);
// STEPEVENTS.estimateEvent(); // STEPEVENTS.estimateEvent();
} }
if (rowEvent == 'tanDetail') { if (rowEvent == "tanDetail") {
let detaliHtml = let detaliHtml =
`<div class="eventDeatail">` + `<div class="eventDeatail">` +
`<P>事件名称：${rowData.eventName}</p>` + `<P>事件名称：${rowData.eventName}</p>` +
...@@ -439,7 +539,7 @@ $(function () { ...@@ -439,7 +539,7 @@ $(function () {
`<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` + `<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>` +
`<P>事发时间：${rowData.alarmTime}</p>` + `<P>事发时间：${rowData.alarmTime}</p>` +
`</div>`; `</div>`;
CARYEVENTS.tanDialogFun('事件详情', 'eventDetail', detaliHtml); CARYEVENTS.tanDialogFun("事件详情", "eventDetail", detaliHtml);
} }
}); });
}, },
...@@ -480,17 +580,17 @@ $(function () { ...@@ -480,17 +580,17 @@ $(function () {
var STEPEVENTS = { var STEPEVENTS = {
//初步研判 //初步研判
estimateEvent() { estimateEvent() {
if (checkEventEype == 'review') { if (checkEventEype == "review") {
$('#connectPlanBtn').hide(); $("#connectPlanBtn").hide();
$('.resouce').show(); $(".resouce").show();
} else { } else {
$('#connectPlanBtn').show(); $("#connectPlanBtn").show();
} }
let obj = { ...currentEventObj }; let obj = { ...currentEventObj };
/*加载应急资源*/ /*加载应急资源*/
function getResource(keywords = '') { function getResource(keywords = "") {
let opt = { let opt = {
type: 'post', type: "post",
url: apis.mapSearch, url: apis.mapSearch,
data: JSON.stringify({ data: JSON.stringify({
distance: 3000, distance: 3000,
...@@ -501,13 +601,15 @@ $(function () { ...@@ -501,13 +601,15 @@ $(function () {
success: function (res) { success: function (res) {
let resArr = res.data.numList; let resArr = res.data.numList;
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 += `<p>${ele.legendName}<font class="num">${ele.num}</font></p>`;
}); });
$('#escboxBottomItem1 .resouce .tbl').html('<p>资源名称<font class="num">资源数量</font></p>' + html); $("#escboxBottomItem1 .resouce .tbl").html(
'<p>资源名称<font class="num">资源数量</font></p>' + html
);
} else { } else {
$('#escboxBottomItem1 .resouce .tbl').html('暂无资源！'); $("#escboxBottomItem1 .resouce .tbl").html("暂无资源！");
} }
}, },
}; };
...@@ -521,7 +623,7 @@ $(function () { ...@@ -521,7 +623,7 @@ $(function () {
mapSearch( mapSearch(
{ {
distance: 3000, distance: 3000,
keywords: '', keywords: "",
latitude: obj.latitude, latitude: obj.latitude,
longitude: obj.longitude, longitude: obj.longitude,
}, },
...@@ -533,7 +635,7 @@ $(function () { ...@@ -533,7 +635,7 @@ $(function () {
addFlag(); addFlag();
}, 3000); }, 3000);
}, },
'close', "close"
); );
} }
/*加中心点旗帜*/ /*加中心点旗帜*/
...@@ -541,7 +643,7 @@ $(function () { ...@@ -541,7 +643,7 @@ $(function () {
let overlays = [], let overlays = [],
poiIcon = new AMap.Icon({ poiIcon = new AMap.Icon({
size: new AMap.Size(102, 102), size: new AMap.Size(102, 102),
image: './images/flag.png', image: "./images/flag.png",
imageSize: new AMap.Size(100, 100), imageSize: new AMap.Size(100, 100),
imageOffset: new AMap.Pixel(0, 0), imageOffset: new AMap.Pixel(0, 0),
}); });
...@@ -559,7 +661,7 @@ $(function () { ...@@ -559,7 +661,7 @@ $(function () {
}, },
//态势决策 //态势决策
carryPlan() { carryPlan() {
let html = '', let html = "",
_this = this, _this = this,
opt = { opt = {
/* 查询已关联预案 */ url: apis.searchEventPlan + currentEventObj.id, /* 查询已关联预案 */ url: apis.searchEventPlan + currentEventObj.id,
...@@ -571,18 +673,18 @@ $(function () { ...@@ -571,18 +673,18 @@ $(function () {
`<p style="text-decoration: underline;cursor:pointer;" onclick="window.CAEVT.checkPlan(&quot;${obj.planId}&quot;)">预案标题：${obj.planTitle}</p>` + `<p style="text-decoration: underline;cursor:pointer;" onclick="window.CAEVT.checkPlan(&quot;${obj.planId}&quot;)">预案标题：${obj.planTitle}</p>` +
`<p>预案等级：${obj.planLevel}级</p>` + `<p>预案等级：${obj.planLevel}级</p>` +
`<p>所属部门：${obj.deptName}</p>`; `<p>所属部门：${obj.deptName}</p>`;
if (checkEventEype == 'review') { if (checkEventEype == "review") {
html += `<p>增补预案内容：${obj.addPlanContent}</p>`; html += `<p>增补预案内容：${obj.addPlanContent}</p>`;
$('#addPlan, #carryPalnBtn').hide(); $("#addPlan, #carryPalnBtn").hide();
} else { } else {
$('#addPlan, #carryPalnBtn').show(); $("#addPlan, #carryPalnBtn").show();
} }
$('.item2 .cn').html(html); $(".item2 .cn").html(html);
} }
} }
}, },
}; };
$('body').on('click', '#carryPalnBtn', function () { $("body").on("click", "#carryPalnBtn", function () {
layLayer.confirm(`确定启动预案吗？`, function () { layLayer.confirm(`确定启动预案吗？`, function () {
CARYEVENTS.carryPlanEv(); CARYEVENTS.carryPlanEv();
}); });
...@@ -591,7 +693,7 @@ $(function () { ...@@ -591,7 +693,7 @@ $(function () {
}, },
//事件处理过程 //事件处理过程
eventCirculate() { eventCirculate() {
let html = '', let html = "",
opt = { opt = {
url: apis.checkCirculate + currentEventObj.id, url: apis.checkCirculate + currentEventObj.id,
success: function (res) { success: function (res) {
...@@ -600,12 +702,14 @@ $(function () { ...@@ -600,12 +702,14 @@ $(function () {
res.data.map((ele, inde) => { res.data.map((ele, inde) => {
let date = ele.handleTime.substring(0, 10), let date = ele.handleTime.substring(0, 10),
time = ele.handleTime.substring(11, 16); time = ele.handleTime.substring(11, 16);
html += `<li><p>${date}<br><span>${time}</span></p><div class="con">${inde + 1 + '.'} ${ele.handleContent}</div></li>`; html += `<li><p>${date}<br><span>${time}</span></p><div class="con">${
inde + 1 + "."
} ${ele.handleContent}</div></li>`;
}); });
$('ul.timeLine').html(html); $("ul.timeLine").html(html);
$(`#esc-tit .abt:eq(2)`).addClass('done'); $(`#esc-tit .abt:eq(2)`).addClass("done");
} else { } else {
$('ul.timeLine').html('暂无处理过程！'); $("ul.timeLine").html("暂无处理过程！");
} }
} }
}, },
...@@ -619,10 +723,10 @@ $(function () { ...@@ -619,10 +723,10 @@ $(function () {
success: function (res) { success: function (res) {
if (res.code == 0) { if (res.code == 0) {
if (res.data && res.data.evaluateContent) { if (res.data && res.data.evaluateContent) {
$('#evaluatCon').html(res.data.evaluateContent); $("#evaluatCon").html(res.data.evaluateContent);
$(`#esc-tit .abt:eq(3)`).addClass('done'); $(`#esc-tit .abt:eq(3)`).addClass("done");
} else { } else {
$('#evaluatCon').html('暂无评估内容！'); $("#evaluatCon").html("暂无评估内容！");
} }
} }
}, },
...@@ -633,12 +737,16 @@ $(function () { ...@@ -633,12 +737,16 @@ $(function () {
changeStatus(step, EventId = null) { changeStatus(step, EventId = null) {
let _this = this, let _this = this,
opt = { opt = {
url: apis.changeStatus + `${EventId == null ? currentEventObj.id : EventId}/${step}`, url:
apis.changeStatus +
`${EventId == null ? currentEventObj.id : EventId}/${step}`,
success: function (res) { success: function (res) {
if (res.code == 0 && EventId == null) { if (res.code == 0 && EventId == null) {
_this.toStepChange(step); //跳转 _this.toStepChange(step); //跳转
if (step == 1) { if (step == 1) {
let index = socketCurrEventsArr.findIndex((ele) => ele.id == currentEventObj.id); let index = socketCurrEventsArr.findIndex(
(ele) => ele.id == currentEventObj.id
);
socketCurrEventsArr.splice(index, 1); socketCurrEventsArr.splice(index, 1);
} }
CARYEVENTS.getEventList(); //刷新列表 CARYEVENTS.getEventList(); //刷新列表
...@@ -653,22 +761,24 @@ $(function () { ...@@ -653,22 +761,24 @@ $(function () {
let _this = this; let _this = this;
toIndex = Number(toIndex); toIndex = Number(toIndex);
$(`.escbox-bottom, #esc-tit`).show(); $(`.escbox-bottom, #esc-tit`).show();
$(`#esc-tit .abt`).addClass('not').removeClass('done'); $(`#esc-tit .abt`).addClass("not").removeClass("done");
if (toIndex > 0) { if (toIndex > 0) {
let num = toIndex - 1; let num = toIndex - 1;
while (num > 0) { while (num > 0) {
num--; num--;
$(`#esc-tit .abt:eq(${num})`).addClass('done'); $(`#esc-tit .abt:eq(${num})`).addClass("done");
} }
} }
$(`#esc-tit .abt:eq(${toIndex - 1})`).removeClass('not'); $(`#esc-tit .abt:eq(${toIndex - 1})`).removeClass("not");
$(`.escbox-bottom .item${toIndex}`).show().siblings().hide(); $(`.escbox-bottom .item${toIndex}`).show().siblings().hide();
_this.switchItem(toIndex); _this.switchItem(toIndex);
}, },
//获取相应item的内容 //获取相应item的内容
switchItem(toIndex) { switchItem(toIndex) {
let _this = this; let _this = this;
$(`.escbox-bottom .item${toIndex} h3`).html(`事件名称：${currentEventObj.eventName}`); $(`.escbox-bottom .item${toIndex} h3`).html(
`事件名称：${currentEventObj.eventName}`
);
switch (toIndex) { switch (toIndex) {
case 1: case 1:
_this.estimateEvent(); _this.estimateEvent();
...@@ -690,171 +800,183 @@ $(function () { ...@@ -690,171 +800,183 @@ $(function () {
*/ */
var cont = 0; var cont = 0;
var heatmap; var heatmap;
marker['heatmk'] = []; marker["heatmk"] = [];
var BOTMTOOLBAR = { var BOTMTOOLBAR = {
//GIS调度 //GIS调度
eventDevelopAnalysis() { eventDevelopAnalysis() {
/*removeAllOverlay(); /*removeAllOverlay();
map.setCenter([114.195771, 38.247808]); map.setCenter([114.195771, 38.247808]);
$('#legend a').removeClass('selected');*/ $('#legend a').removeClass('selected');*/
if(cont==0){ if (cont == 0) {
this.initEventDevelope(); this.initEventDevelope();
cont++; cont++;
}else{ } else {
cont = 0; cont = 0;
heatmap.hide(); heatmap.hide();
map.remove(marker['heatmk']); map.remove(marker["heatmk"]);
map.setZoom(11); map.setZoom(11);
} }
}, },
//查询事件列表 //查询事件列表
getHeatmap() { getHeatmap() {
var data = {}; var data = {};
if("year" == $("#choiceTime input[type = 'radio']:checked").val()){ if ("year" == $("#choiceTime input[type = 'radio']:checked").val()) {
if(0==$("#sel_year").val() || '' == $("#sel_year").val()){ if (0 == $("#sel_year").val() || "" == $("#sel_year").val()) {
layLayer.alert('请选择年份！'); layLayer.alert("请选择年份！");
return; return;
} }
data.year = $("#sel_year").val(); data.year = $("#sel_year").val();
}else{ } else {
if((0==$("#sel_year").val() || '' == $("#sel_year").val()) || (00==$("#sel_month").val() || '' == $("#sel_month").val())){ if (
layLayer.alert('请选择年月！'); 0 == $("#sel_year").val() ||
return; "" == $("#sel_year").val() ||
} 00 == $("#sel_month").val() ||
if($("#sel_month").val()<10){ "" == $("#sel_month").val()
data.yearAndMonth = $("#sel_year").val()+"-0"+ $("#sel_month").val(); ) {
}else{ layLayer.alert("请选择年月！");
data.yearAndMonth = $("#sel_year").val()+"-"+ $("#sel_month").val(); return;
}
if ($("#sel_month").val() < 10) {
data.yearAndMonth =
$("#sel_year").val() + "-0" + $("#sel_month").val();
} else {
data.yearAndMonth =
$("#sel_year").val() + "-" + $("#sel_month").val();
}
}
if (heatmap) {
heatmap.hide();
map.remove(marker["heatmk"]);
}
let _this = this,
opt = {
url: apis.getEventInfoList,
data: data,
success: function (res) {
if (res.code == 0) {
let resData = res.data.pageData;
let history = resData.historyEventList;
let data = [];
for (var i = 0; i < history.length; i++) {
let location = {};
location.lat = history[i].latitude;
location.lng = history[i].longitude;
location.count = 50;
data.push(location);
//_this.estimateEvent(aa[i]);
var poiIcon = new AMap.Icon({
size: new AMap.Size(0, 0),
});
var heatmk = new AMap.Marker({
map: map,
icon: poiIcon,
offset: new AMap.Pixel(-20, -20),
position: [history[i].longitude, history[i].latitude],
});
marker["heatmk"].push(heatmk);
heatmk.setLabel({
offset: new AMap.Pixel(0, -5),
content: history[i].eventName,
direction: "top",
});
} }
} map.plugin(["AMap.Heatmap"], function () {
if(heatmap){ //初始化heatmap对象
heatmap.hide(); heatmap = new AMap.Heatmap(map, {
map.remove(marker['heatmk']); radius: 27, //给定半径
} opacity: [0, 0.8],
let _this = this, gradient: {
opt = { 0.5: "#8CFC0A",
url: apis.getEventInfoList, 0.8: "yellow",
data: data, 1.0: "red",
success: function (res) {
if (res.code == 0) {
let resData = res.data.pageData;
let history = resData.historyEventList;
let data =[];
for(var i=0;i<history.length;i++){
let location ={};
location.lat = history[i].latitude;
location.lng =history[i].longitude;
location.count=50;
data.push(location);
//_this.estimateEvent(aa[i]);
var poiIcon = new AMap.Icon({
size: new AMap.Size(0, 0),
});
var heatmk = new AMap.Marker({
map: map,
icon: poiIcon,
offset: new AMap.Pixel(-20, -20),
position: [history[i].longitude, history[i].latitude],
});
marker["heatmk"].push(heatmk);
heatmk.setLabel({
offset: new AMap.Pixel(0, -5),
content: history[i].eventName,
direction: 'top',
});
}
map.plugin(["AMap.Heatmap"], function () {
//初始化heatmap对象
heatmap = new AMap.Heatmap(map, {
radius: 27, //给定半径
opacity: [0, 0.8],
gradient:{
0.5: '#8CFC0A',
0.8: 'yellow',
1.0: 'red'
}
});
heatmap.setDataSet({
data: data,
max: 100
});
});
map.setZoom(12);
}
}, },
}; });
jQueryAjax(opt); heatmap.setDataSet({
}, data: data,
//初始化事态查询 max: 100,
initEventDevelope(){ });
var date = new Date() });
var y = date.getFullYear(); map.setZoom(12);
var m = date.getMonth()+1; }
var d = date.getDate(); },
var nowTime = ""+ y+"-0"+m+"-"+d; };
var detaliHtml = '<div style="width: 570px;height: 200px;margin: 23px;" id="choiceTime">'+ jQueryAjax(opt);
'<div style="height: 30px;">' + },
'<div>'+ //初始化事态查询
'<input name="data" type="radio" style="float: left;position: relative;top: 3px;" value="year" checked/>'+ initEventDevelope() {
'<p style="float: left; margin-left: 5px;">年份</p>'+ var date = new Date();
' </div>'+ var y = date.getFullYear();
'<div>'+ var m = date.getMonth() + 1;
'<input name="data" type="radio" style="float: left;margin-left: 50px;position: relative;top: 3px;" value="month"/>'+ var d = date.getDate();
'<p style="margin-left: 5px;">月份</p>'+ var nowTime = "" + y + "-0" + m + "-" + d;
' </div>' + var detaliHtml =
'</div>'+ '<div style="width: 570px;height: 200px;margin: 23px;" id="choiceTime">' +
' <p style="float: left;height: 30px;line-height: 30px;">年份：</P>'+ '<div style="height: 30px;">' +
'<select id="sel_year" style="float: left;position: relative;top: 6px;width: 73px;border: 1px solid #708090;border-radius: 2px;"></select>'+ "<div>" +
' <p style="float: left;margin-left: 45px;height: 30px;line-height: 30px;">月份：</P>'+ '<input name="data" type="radio" style="float: left;position: relative;top: 3px;" value="year" checked/>' +
'<select id="sel_month" style="position: relative;top: -5px;width: 60px;border: 1px solid #708090;border-radius: 2px;"></select>'+ '<p style="float: left; margin-left: 5px;">年份</p>' +
'<button id="eventBtn" style="position: relative;top: 81px;left: -61px;background-color: #4476a7;color: white;width: 157px;height: 43px;border-radius: 5px;">事态分析查询</button>'+ " </div>" +
'</div>'; "<div>" +
CARYEVENTS.tanDialogFun('事态分析','qqfdsf',detaliHtml); '<input name="data" type="radio" style="float: left;margin-left: 50px;position: relative;top: 3px;" value="month"/>' +
$.ms_DatePicker({ '<p style="margin-left: 5px;">月份</p>' +
YearSelector: ".sel_year", " </div>" +
MonthSelector: ".sel_month", "</div>" +
DaySelector: ".sel_day" ' <p style="float: left;height: 30px;line-height: 30px;">年份：</P>' +
}); '<select id="sel_year" style="float: left;position: relative;top: 6px;width: 73px;border: 1px solid #708090;border-radius: 2px;"></select>' +
$.ms_DatePicker(); ' <p style="float: left;margin-left: 45px;height: 30px;line-height: 30px;">月份：</P>' +
'<select id="sel_month" style="position: relative;top: -5px;width: 60px;border: 1px solid #708090;border-radius: 2px;"></select>' +
'<button id="eventBtn" style="position: relative;top: 81px;left: -61px;background-color: #4476a7;color: white;width: 157px;height: 43px;border-radius: 5px;">事态分析查询</button>' +
"</div>";
CARYEVENTS.tanDialogFun("事态分析", "qqfdsf", detaliHtml);
$.ms_DatePicker({
YearSelector: ".sel_year",
MonthSelector: ".sel_month",
DaySelector: ".sel_day",
});
$.ms_DatePicker();
if("year" == $("#choiceTime input[type = 'radio']:checked").val()){ if ("year" == $("#choiceTime input[type = 'radio']:checked").val()) {
$("#sel_month").attr("disabled","disabled") $("#sel_month").attr("disabled", "disabled");
} }
$("#choiceTime input[type = 'radio']").click(function () { $("#choiceTime input[type = 'radio']").click(function () {
if("year" == $(this).val()){ if ("year" == $(this).val()) {
$("#sel_month").attr("disabled","disabled"); $("#sel_month").attr("disabled", "disabled");
}else { } else {
$("#sel_month").removeAttr("disabled"); $("#sel_month").removeAttr("disabled");
} }
}) });
$("#eventBtn").click(function () { $("#eventBtn").click(function () {
BOTMTOOLBAR.getHeatmap(); BOTMTOOLBAR.getHeatmap();
}); });
}, },
//值守通讯 //值守通讯
dutyBookFun() { dutyBookFun() {
CARYEVENTS.tanDialogFun('值守通讯录', 'dutyBooklist', '<div id="Booklist"></div>'); CARYEVENTS.tanDialogFun(
"值守通讯录",
"dutyBooklist",
'<div id="Booklist"></div>'
);
layTable.render({ layTable.render({
elem: '#Booklist', elem: "#Booklist",
url: iocUrl + '/frontApi/getDutyContactsList', url: iocUrl + "/frontApi/getDutyContactsList",
method: 'get', method: "get",
cols: [ cols: [
[ [
{ field: 'deptName', title: '部门', align: 'center' }, { field: "deptName", title: "部门", align: "center" },
{ field: 'userName', title: '姓名', align: 'center' }, { field: "userName", title: "姓名", align: "center" },
{ {
field: 'sex', field: "sex",
title: '姓别', title: "姓别",
align: 'center', align: "center",
templet: function (obj) { templet: function (obj) {
return obj.sex == 1 ? '男' : '女'; return obj.sex == 1 ? "男" : "女";
}, },
}, },
{ field: 'mobliePhone', title: '手机号', align: 'center' }, { field: "mobliePhone", title: "手机号", align: "center" },
{ field: 'phone', title: '座机', align: 'center' }, { field: "phone", title: "座机", align: "center" },
{ field: 'email', title: '邮箱', align: 'center' }, { field: "email", title: "邮箱", align: "center" },
], ],
], ],
}); });
...@@ -869,44 +991,48 @@ $(function () { ...@@ -869,44 +991,48 @@ $(function () {
// }, // },
//事件回顾 //事件回顾
EventReview() { EventReview() {
$('.escbox-top').show(); $(".escbox-top").show();
element.tabChange('layTAb', 'layTAb_hisy'); element.tabChange("layTAb", "layTAb_hisy");
}, },
//综合保障 //综合保障
guaranteeFun() { guaranteeFun() {
let opt = { let opt = {
url: iocUrl + '/frontApi/getSecurityInfoNum', url: iocUrl + "/frontApi/getSecurityInfoNum",
success: function (res) { success: function (res) {
let html = ''; let html = "";
CARYEVENTS.tanDialogFun('综合保障', 'ensurelistbox', '<div id="numbox" class="xstty"></div><div id="ensurelist"></div>'); CARYEVENTS.tanDialogFun(
"综合保障",
"ensurelistbox",
'<div id="numbox" class="xstty"></div><div id="ensurelist"></div>'
);
if (res.data.length > 0) { if (res.data.length > 0) {
res.data.map((ele) => { res.data.map((ele) => {
html += `<div class="item" data-code="${ele.legendCode}"><span class="itemTitle">${ele.legendAliasName}</span>&ensp;<span class="num">${ele.num}</span></div>`; html += `<div class="item" data-code="${ele.legendCode}"><span class="itemTitle">${ele.legendAliasName}</span>&ensp;<span class="num">${ele.num}</span></div>`;
}); });
$('#numbox').html(html); $("#numbox").html(html);
$('body').on('click', '.xstty .item', function () { $("body").on("click", ".xstty .item", function () {
$('#ensurelistbox .layui-table-view').show(); $("#ensurelistbox .layui-table-view").show();
$(this).addClass('active').siblings().removeClass('active'); $(this).addClass("active").siblings().removeClass("active");
let lcode = $(this).attr('data-code'); let lcode = $(this).attr("data-code");
layTable.render({ layTable.render({
elem: '#ensurelist', elem: "#ensurelist",
url: iocUrl + `/frontApi/getSecurityInfoList/${lcode}`, url: iocUrl + `/frontApi/getSecurityInfoList/${lcode}`,
method: 'get', method: "get",
cols: [ cols: [
[ [
{ field: 'fullName', title: '名称', align: 'center' }, { field: "fullName", title: "名称", align: "center" },
{ field: 'contacts', title: '联系人', align: 'center' }, { field: "contacts", title: "联系人", align: "center" },
{ field: 'telephone', title: '电话', align: 'center' }, { field: "telephone", title: "电话", align: "center" },
{ field: 'address', title: '地址', align: 'center' }, { field: "address", title: "地址", align: "center" },
{ field: 'introduce', title: '介绍', align: 'center' }, { field: "introduce", title: "介绍", align: "center" },
], ],
], ],
}); });
}); });
} else { } else {
$('#numbox').html('无记录！'); $("#numbox").html("无记录！");
} }
$('#ensurelistbox').show(); $("#ensurelistbox").show();
}, },
}; };
jQueryAjax(opt); jQueryAjax(opt);
...@@ -942,10 +1068,10 @@ $(function () { ...@@ -942,10 +1068,10 @@ $(function () {
// }); // });
// }, // },
//应急预案 //应急预案
genericPlan(key = '', planID = '') { genericPlan(key = "", planID = "") {
function getPlansli() { function getPlansli() {
let opt = { let opt = {
type: 'post', type: "post",
url: apis.plansGetList, url: apis.plansGetList,
data: JSON.stringify({ data: JSON.stringify({
page: 1, page: 1,
...@@ -954,40 +1080,45 @@ $(function () { ...@@ -954,40 +1080,45 @@ $(function () {
success: function (res) { success: function (res) {
let Arr = res.data.pageData, let Arr = res.data.pageData,
resArr; resArr;
if (planID != '') resArr = Arr.filter((ele) => ele.id == planID); if (planID != "") resArr = Arr.filter((ele) => ele.id == planID);
else resArr = [...Arr]; else resArr = [...Arr];
if (resArr.length > 0) { if (resArr.length > 0) {
layTable.render({ layTable.render({
elem: '#yingjlist', elem: "#yingjlist",
size: 'sm', size: "sm",
cols: [ cols: [
[ [
{ field: 'deptName', title: '所属单位' }, { field: "deptName", title: "所属单位" },
{ field: 'planTitle', title: '预案标题' }, { field: "planTitle", title: "预案标题" },
{ {
field: 'planLevel', field: "planLevel",
title: '预案登记', title: "预案登记",
templet: function (d) { templet: function (d) {
return d.planLevel + '级'; return d.planLevel + "级";
}, },
}, },
{ {
field: '', field: "",
title: '操作', title: "操作",
templet: function (d) { templet: function (d) {
let s; let s;
if (key == 'gl') { if (key == "gl") {
s = `<span class="txtbtn yjck" onclick="window.CAEVT.check(${JSON.stringify(d).replace( s = `<span class="txtbtn yjck" onclick="window.CAEVT.check(${JSON.stringify(
d
).replace(
/"/g, /"/g,
'&quot;', "&quot;"
)})">查看</span>&nbsp;&nbsp;<span class="txtbtn glya" onclick="window.CAEVT.connect(${JSON.stringify(d).replace( )})">查看</span>&nbsp;&nbsp;<span class="txtbtn glya" onclick="window.CAEVT.connect(${JSON.stringify(
/"/g, d
'&quot;', ).replace(/"/g, "&quot;")})">关联预案</span>`;
)})">关联预案</span>`; } else if (planID != "") {
} else if (planID != '') { s = `<span class="txtbtn yjck" onclick="window.CAEVT.check(${JSON.stringify(
s = `<span class="txtbtn yjck" onclick="window.CAEVT.check(${JSON.stringify(d).replace(/"/g, '&quot;')})">详情</span>`; d
).replace(/"/g, "&quot;")})">详情</span>`;
} else { } else {
s = `<span class="txtbtn yjck" onclick="window.CAEVT.check(${JSON.stringify(d).replace(/"/g, '&quot;')})">查看</span>`; s = `<span class="txtbtn yjck" onclick="window.CAEVT.check(${JSON.stringify(
d
).replace(/"/g, "&quot;")})">查看</span>`;
} }
return s; return s;
}, },
...@@ -1001,8 +1132,12 @@ $(function () { ...@@ -1001,8 +1132,12 @@ $(function () {
}; };
jQueryAjax(opt); jQueryAjax(opt);
} }
CARYEVENTS.tanDialogFun('应急预案', 'yingjlistbox', '<div id="yingjlist"></div><div class="yjdetali detali"></div>'); CARYEVENTS.tanDialogFun(
$('#yingjlistbox').addClass('yjbs'); "应急预案",
"yingjlistbox",
'<div id="yingjlist"></div><div class="yjdetali detali"></div>'
);
$("#yingjlistbox").addClass("yjbs");
getPlansli(); getPlansli();
}, },
}; };
...@@ -1015,65 +1150,65 @@ $(function () { ...@@ -1015,65 +1150,65 @@ $(function () {
function defalutMApP() { function defalutMApP() {
cont = 0; cont = 0;
map.clearMap(); map.clearMap();
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,
viewMode: '3D', viewMode: "3D",
showLabel: true, showLabel: true,
// labelzIndex: 110, // labelzIndex: 110,
pitch: 8, pitch: 8,
zoom: 11.5, zoom: 11.5,
// mapStyle: 'amap://styles/darkblue', // mapStyle: 'amap://styles/darkblue',
mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae', mapStyle: "amap://styles/3b679a15f448a4740ba2ff7524e1a4ae",
}); });
//添加描边 //添加描边
for (var i = 0; i < bounds.length; i += 1) { for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({ new AMap.Polyline({
path: bounds[i], path: bounds[i],
strokeColor: '#22eae4', strokeColor: "#22eae4",
strokeWeight: 5, strokeWeight: 5,
strokeOpacity: 7, strokeOpacity: 7,
map: map, map: map,
}); });
} }
}) });
$('#esc-tit , .escbox-bottom, .escbox-bottom .item').hide(); $("#esc-tit , .escbox-bottom, .escbox-bottom .item").hide();
$('.abt').addClass('not').removeClass('done'); $(".abt").addClass("not").removeClass("done");
} }
$('.escTitClose').click(function () { $(".escTitClose").click(function () {
// defalutMApP(); // defalutMApP();
$('#esc-tit ').hide(); $("#esc-tit ").hide();
}); });
$('.closeBtn').click(function () { $(".closeBtn").click(function () {
$('.escbox-top,.escbox-bottom,#esc-tit').hide(); $(".escbox-top,.escbox-bottom,#esc-tit").hide();
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();
element.on('tab(layTAb)', function (data) { element.on("tab(layTAb)", function (data) {
defalutMApP(); defalutMApP();
}); });
if (inde == 0) element.tabChange('layTAb', 'layTAb_curr'); if (inde == 0) element.tabChange("layTAb", "layTAb_curr");
if (inde == 1) element.tabChange('layTAb', 'layTAb_hisy'); if (inde == 1) element.tabChange("layTAb", "layTAb_hisy");
}); });
//关联按钮事件 //关联按钮事件
$('body').on('click', '#connectPlanBtn', function () { $("body").on("click", "#connectPlanBtn", function () {
BOTMTOOLBAR.genericPlan('gl'); BOTMTOOLBAR.genericPlan("gl");
}); });
$('#bottomMenu .btn').click(function () { $("#bottomMenu .btn").click(function () {
let inde = $(this).index('#bottomMenu .btn'); let inde = $(this).index("#bottomMenu .btn");
//if (inde == 0) BOTMTOOLBAR.GISFun(); //if (inde == 0) BOTMTOOLBAR.GISFun();
if (inde == 0) BOTMTOOLBAR.eventDevelopAnalysis(); if (inde == 0) BOTMTOOLBAR.eventDevelopAnalysis();
if (inde == 1) BOTMTOOLBAR.dutyBookFun(); if (inde == 1) BOTMTOOLBAR.dutyBookFun();
...@@ -1083,18 +1218,18 @@ $(function () { ...@@ -1083,18 +1218,18 @@ $(function () {
if (inde == 4) BOTMTOOLBAR.genericPlan(); if (inde == 4) BOTMTOOLBAR.genericPlan();
// if (inde == 6) BOTMTOOLBAR.konwlegeFun(); // if (inde == 6) BOTMTOOLBAR.konwlegeFun();
}); });
$('body').on('click', '.cbtn', function () { $("body").on("click", ".cbtn", function () {
let id = $(this).parent().parent().attr('id'); let id = $(this).parent().parent().attr("id");
$(`#${id}`).hide(); $(`#${id}`).hide();
if (id == 'ensurelistbox') $('#ensurelistbox .layui-table-view').hide(); if (id == "ensurelistbox") $("#ensurelistbox .layui-table-view").hide();
if (id == 'zsbox') $('.yjbs .detali').hide(); if (id == "zsbox") $(".yjbs .detali").hide();
}); });
$('.ty') $(".ty")
.find('a.abt') .find("a.abt")
.click(function () { .click(function () {
if (checkEventEype == 'review') { if (checkEventEype == "review") {
let ind = $(this).index('a.abt'); let ind = $(this).index("a.abt");
$('.escbox-bottom').show(); $(".escbox-bottom").show();
$(`.escbox-bottom .item${ind + 1}`) $(`.escbox-bottom .item${ind + 1}`)
.show() .show()
.siblings() .siblings()
...@@ -1106,11 +1241,11 @@ $(function () { ...@@ -1106,11 +1241,11 @@ $(function () {
}); });
}); });
$('#mouseToolBtn').click(function () { $("#mouseToolBtn").click(function () {
$('.toolsbox').show('fast'); $(".toolsbox").show("fast");
}); });
$('.toolsbox h3 span').click(function () { $(".toolsbox h3 span").click(function () {
$('.toolsbox').hide(); $(".toolsbox").hide();
}); });
// 启动 // 启动
...@@ -1123,14 +1258,14 @@ $(function () { ...@@ -1123,14 +1258,14 @@ $(function () {
createLegendList(); createLegendList();
// renderAlarmNum(); // renderAlarmNum();
renderEventNum(); renderEventNum();
createDeviceNumPieChart('deviceNumPie'); createDeviceNumPieChart("deviceNumPie");
createDeviceNumLineChartday('deviceNumLineday'); createDeviceNumLineChartday("deviceNumLineday");
createDeviceNumLineChartmouth('deviceNumLinemouth'); createDeviceNumLineChartmouth("deviceNumLinemouth");
renderLegendTypeNum('categoryAlarmNum'); renderLegendTypeNum("categoryAlarmNum");
initVideo('videoHandler'); initVideo("videoHandler");
getAlarmData(); getAlarmData();
//调用当前值班信息接口 //调用当前值班信息接口
getDutyInfo(); getDutyInfo();
// showMulitVideo(); // showMulitVideo();
// 连接 websocket // 连接 websocket
......
ioc_frontweb/js/map.js
View file @ 423625fe
...@@ -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,
...@@ -64,7 +64,7 @@ district.search('河北省', function (status, result) { ...@@ -64,7 +64,7 @@ district.search('河北省', function (status, result) {
path: bounds[i], path: bounds[i],
strokeColor: '#3edfe1', strokeColor: '#3edfe1',
strokeWeight: 5, strokeWeight: 5,
strokeOpacity: 7, strokeOpacity: 7,
map: map, map: map,
}); });
} }
...@@ -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 }));
}); });
...@@ -607,7 +607,7 @@ function removeMaker(category) { ...@@ -607,7 +607,7 @@ function removeMaker(category) {
} else { } else {
for (var i in marker) { for (var i in marker) {
map.remove(marker[i]); map.remove(marker[i]);
$('#legend').find('li').removeClass('selected'); // $('#legend').find('li').removeClass('selected');
} }
} }
} }
......
ioc_frontweb/js/utils.js
View file @ 423625fe
...@@ -181,12 +181,13 @@ function createBarChart(options) { ...@@ -181,12 +181,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: {
...@@ -195,53 +196,76 @@ function createDeviceAlarmNumBarChart(options) { ...@@ -195,53 +196,76 @@ function createDeviceAlarmNumBarChart(options) {
lineHeight: '36', lineHeight: '36',
}, },
}, },
grid: { // tooltip: {
top: 35, // trigger: 'item'
left: 30, // },
bottom: 80, toolbox: {
right: 10, show: true,
}, feature: {
xAxis: { mark: { show: true },
type: 'category', // dataView: { show: true, readOnly: false },
data: options.xAxisData, // restore: { show: true },
axisLabel: { // saveAsImage: { show: true }
textStyle: { }
color: '#ddd', },
},
interval: 0,
rotate: 60,
},
},
yAxis: {
type: 'value',
show: false,
},
series: [ series: [
{ {
type: 'bar', name: 'Access From',
label: { type: 'pie',
show: true, radius: ["80%", "70%"],
position: 'inside', // center: ["50%", "50%"],
},
barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ borderRadius: 20,
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' },
]),
}, },
emphasis: { label: {
itemStyle: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ show: false,
{ offset: 0, color: '#2378f7' }, textStyle: {
{ offset: 0.7, color: '#2378f7' }, fontSize: 13,
{ offset: 1, color: '#83bff6' }, },
]), position: "outside",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
length: 20,
length2: 35,
},
emphasis: {
show: true,
}, },
}, },
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",
// },
// },
// },
// ],
// },
], ],
}, },
}; };
...@@ -263,33 +287,9 @@ function createPieChart(options) { ...@@ -263,33 +287,9 @@ 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,
feature: { feature: {
...@@ -301,25 +301,24 @@ function createPieChart(options) { ...@@ -301,25 +301,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' }
// ]
} }
], ],
...@@ -339,32 +338,67 @@ function createLineChartday(options) { ...@@ -339,32 +338,67 @@ function createLineChartday(options) {
y:10, y:10,
x2:20, x2:20,
y2:60, y2:60,
borderWidth:1, borderWidth:1,
bottom:'40%' top: '10%',
bottom:'35%'
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: options.xAxisData, data: options.xAxisData,
axisLabel: { // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
textStyle: { axisLabel: {
color: '#ddd', textStyle: {
}, color: '#ddd',
rotate: 60, },
}, rotate: 60,
}, },
yAxis: { },
type: 'value', yAxis: {
axisLabel: { type: 'value',
textStyle: { axisLabel: {
color: '#ddd', textStyle: {
fontSize:'14', color: '#ddd',
}, fontSize:'14',
}, },
},
}, },
series: [ series: [
{ {
data: options.seriesData, data: options.seriesData,
type: 'line' // data: [50, 200, 150, 80, 70, 110, 130],
type: 'bar',
markPoint: {
symbol:'image://../ioc_frontweb/images/gr.svg',//url替换成你的图片地址
symbolSize:15,//图片大小
symbolOffset:[0,'-50%'],//图片相对于柱形图x,y轴偏移量，注意要往上移y要是负的
data:[{
coord:[0,40]//需要展示图片的柱型索引，y轴的value
}],
label:{
show:false,//顶部默认会展示y轴的值，可以设置false,不展示
}
},
barWidth: 8, //柱图宽度
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' }
])
},
},
} }
] ]
}, },
...@@ -377,39 +411,74 @@ function createLineChartmouth(options) { ...@@ -377,39 +411,74 @@ function createLineChartmouth(options) {
name: options.name, name: options.name,
eleId: options.eleId, eleId: options.eleId,
opts: { opts: {
grid:{ grid:{
x:50, x:50,
y:10, y:10,
x2:20, x2:20,
y2:40, y2:60,
borderWidth:1, borderWidth:1,
bottom:'40%' top: '15%',
}, bottom:'25%'
xAxis: { },
type: 'category', xAxis: {
data: options.xAxisData, type: 'category',
axisLabel: { data: options.xAxisData,
textStyle: { // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
color: '#ddd', axisLabel: {
fontSize:'14', textStyle: {
}, color: '#ddd',
rotate: 60, },
}, rotate: 60,
}, },
yAxis: { },
type: 'value', yAxis: {
axisLabel: { type: 'value',
textStyle: { axisLabel: {
color: '#ddd', textStyle: {
}, color: '#ddd',
}, fontSize:'14',
}, },
series: [ },
{ },
data: options.seriesData, series: [
type: 'line' {
} data: options.seriesData,
] // data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
markPoint: {
symbol:'image://../ioc_frontweb/images/gr.svg',//url替换成你的图片地址
symbolSize:15,//图片大小
symbolOffset:[0,'-50%'],//图片相对于柱形图x,y轴偏移量，注意要往上移y要是负的
data:[{
coord:[0,40]//需要展示图片的柱型索引，y轴的value
}],
label:{
show:false,//顶部默认会展示y轴的值，可以设置false,不展示
}
},
barWidth: 8, //柱图宽度
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); createEchart(opts);
...@@ -551,25 +620,41 @@ function createLegendList() { ...@@ -551,25 +620,41 @@ 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 class="first"><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="#" class="childa" title="' + children[j].legendName + '">' + children[j].legendName + '</a>';
} }
tmpLi += '</div></li>'; tmpLi += '</div></li>';
} }
$('#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 {
layLayer.alert('数据为空'); layLayer.alert('数据为空');
} }
} }
}, },
}; };
jQueryAjax(opts); jQueryAjax(opts);
...@@ -871,8 +956,9 @@ function createDeviceNumPieChart(eleId) { ...@@ -871,8 +956,9 @@ function createDeviceNumPieChart(eleId) {
options.seriesData.push({ options.seriesData.push({
// name: res.data[i].typeName, // name: res.data[i].typeName,
// 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,
...@@ -1006,6 +1092,14 @@ function renderLegendTypeNum(eleId) { ...@@ -1006,6 +1092,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,
...@@ -1015,17 +1109,22 @@ function renderLegendTypeNum(eleId) { ...@@ -1015,17 +1109,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);
...@@ -1039,17 +1138,18 @@ function renderAlarmList(obj) { ...@@ -1039,17 +1138,18 @@ function renderAlarmList(obj) {
if (obj.pageData.length > 0) { if (obj.pageData.length > 0) {
var totalTmpHtml = ` var totalTmpHtml = `
<div class="itemh2"> <div class="itemh2">
预警监控 预警监控
<img src="images/vector12.png" alt="" style="width: 14px;margin-right: 10px;">
</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>
`; `;
...@@ -1064,10 +1164,10 @@ function renderAlarmList(obj) { ...@@ -1064,10 +1164,10 @@ function renderAlarmList(obj) {
<div style="width: 20%; overflow: hidden;">${pageData[i].unitName}</div> <div style="width: 20%; overflow: hidden;">${pageData[i].unitName}</div>
<div style="width: 15%; overflow: hidden;">${pageData[i].typeName}</div> <div style="width: 15%; overflow: hidden;">${pageData[i].typeName}</div>
<div style="width: 20%; overflow: hidden;">${pageData[i].statusName}</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, hour12: false,
})}</div> })}</div>
<div style="width: 10%; overflow: hidden;">${pageData[i].handledStatus}</div> <div style="width: 15%; overflow: hidden;">${pageData[i].handledStatus}</div>
</li>`; </li>`;
} }
tmpHtml += '</ul>'; tmpHtml += '</ul>';
......
ioc_frontweb/style/style.css
View file @ 423625fe
...@@ -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: 30px;
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,27 @@ table.layui-table th { ...@@ -204,24 +192,27 @@ 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: 95%;
margin-left: 10px;
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;
} }
...@@ -237,12 +228,12 @@ table.layui-table th { ...@@ -237,12 +228,12 @@ table.layui-table th {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
height: 18px; height: 18px;
color: rgb(235, 232, 232); color: #EFF;
margin: 5px 0; margin: 5px 0;
} }
#alarmList .listTitle { #alarmList .listTitle {
border-bottom: 2px solid #fff; border-bottom: 2px solid #c5bfbf;
margin-top: 25px; margin-top: 25px;
} }
...@@ -255,7 +246,7 @@ table.layui-table th { ...@@ -255,7 +246,7 @@ table.layui-table th {
} }
#alarmList .listContent { #alarmList .listContent {
height: 150px; height: 200px;
overflow: hidden; overflow: hidden;
} }
...@@ -265,98 +256,112 @@ table.layui-table th { ...@@ -265,98 +256,112 @@ table.layui-table th {
} }
#alarmList .listContent li.odd { #alarmList .listContent li.odd {
background-color: rgba(102, 239, 252, 0.3); background-color: rgb(0 0 0 / 50%);
color: #fff; color: #fff;
} }
/* 图表样式 */ /* 图表样式 */
.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: 670px;
margin-left: 3%; position: absolute;
bottom: 0;
margin-bottom: 10px;
color: #ddd; color: #ddd;
} }
/* .legendcss li:hover{
background-image:url(../images/vectorbot.png);
} */
/* .legendcss li:hover .legendchild{
display: block !important;
} */
#legend a { #legend a {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: #ccc; color: #ccc;
padding: 3px 6px; padding: 3px 6px;
margin: 5px; margin: 5px;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 5px; border-radius: 5px;
border: 1px solid #00F7DE; border: 1px solid #00F7DE;
} }
#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; */
float: left;
background: url(../images/re.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 5px;
margin-left: 10px;
}
.legendItem .first{
cursor: pointer; cursor: pointer;
} }
.legendchild{
display: none;
width: auto;
position: fixed;
bottom: 75px;
height: 40px;
/* background-color: red; */
}
/* .legendItem:active + .legendchild{
display: block;
} */
.legendItem:last-child{ .legendItem:last-child{
border-bottom: 0; border-bottom: 0;
} }
.legendItem a.selected { .childa.selected {
background: rgb(34 62 107) url('../images/legend/selected.png') right top no-repeat !important; background: rgb(34 62 107) url('../images/legend/recta.png')no-repeat !important;
background-size: 100% 100%;
border-radius: 5px; border-radius: 5px;
background-size: 16px !important;
} }
.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 +458,137 @@ iframe { ...@@ -453,113 +458,137 @@ iframe {
left: 828px; left: 828px;
/* top: 7px; */ /* top: 7px; */
} }
#border{
#leftBar, z-index: 2;
#rightBar { min-width: 1000px;
width: 450px; /* background: url(../images/borderban.png) no-repeat;
height: 99.9%; background-size: 100% 100%; */
position: absolute; position: absolute;
top: 0;
}
.bordertop{
position: fixed;
width: 100%;
top: 0;
height: 90px;
}
.borderleft{
position: fixed;
height: 100%;
top: 0;
left: 0;
width: 60px;
}
.borderright{
position: fixed;
height: 100%;
top: 0;
right: 0; right: 0;
width: 60px;
}
.borderbottom{
position: fixed;
width: 100%;
bottom: 0;
height: 30px;
}
#leftBar{
/* background: url(../images/mapleft1.png); */
background-repeat: no-repeat;
background-size: 100%;
width: 22%;
height: 89.1%;
position: fixed;
left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
background-size: 100%; background-size: 100% 100%;
margin-top: 4.4%;
margin-left: 1%;
background: url(../images/mapl.png)no-repeat;
background-size: 100% 100%;
} }
.msgWraplegend{ #rightBar{
width: 100%; /* background: url(../images/mapright1.png); */
height: 30px; background-repeat: no-repeat;
font-size: 18px; background-size: 100%;
line-height: 30px; width: 22%;
color: #03ffff; height: 89.1%;
padding-left: 10px; position: fixed;
margin: 10px 0 0 0px; right: 0;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%)); top: 0;
bottom: 0;
z-index: 2;
background-size: 100% 100%;
margin-top: 4.4%;
margin-right: 1%;
background: url(../images/mapr.png)no-repeat;
background-size: 100% 100%;
} }
#leftBar { .right-bar{
left: 0; width: 100%;
width: 450px; height: auto !important;
height: 99.9%; padding: 10px;
right: auto; margin-right: 10px;
margin-top: 20px;
overflow: hidden;
box-sizing: border-box;
} }
.leftBar-legend{ .leftBar-legend{
left: 0; width: 96%;
width: 100%; height: auto !important;
height: auto; padding: 10px;
right: auto; margin-left: 20px;
margin-top: 10px; overflow: hidden;
margin-left: 5px; box-sizing: border-box;
padding-bottom: 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;
} }
.leftlegend{ .leftlegend{
width: 95%; width: 95%;
margin-left: 10px;
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: 95%;
height: 30px;
font-size: 15px;
line-height: 30px;
color: #fff;
text-align: left;
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: 92%;
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 +775,13 @@ iframe { ...@@ -746,20 +775,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,27 +1021,19 @@ iframe { ...@@ -999,27 +1021,19 @@ 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;
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
width: 100%; width: 95%;
} }
.msgWrap .dutyinfo::-webkit-scrollbar { .msgWrap .dutyinfo::-webkit-scrollbar {
/*滚动条整体样式*/ /*滚动条整体样式*/
...@@ -1058,12 +1072,22 @@ iframe { ...@@ -1058,12 +1072,22 @@ iframe {
height: 40px; height: 40px;
width: 100%; width: 100%;
} }
.msgWrap .dutyinfo dl dt, .dutyinfo dl dl:nth-child(odd){
background: rgb(0 0 0 / 50%);
}
.msgWrap .dutyinfo dl dt{
color: #64FEFF;
box-sizing: border-box;
width: 33%;
font-size: 0.9rem;
border-bottom: 1px solid #fff;
background: rgba(255, 255, 255, 0);
float: left;
}
.msgWrap .dutyinfo dl dd { .msgWrap .dutyinfo dl dd {
box-sizing: border-box; box-sizing: border-box;
width: 33%; width: 33%;
font-size: 0.9rem; font-size: 0.9rem;
border: 1px solid #fff;
color: #fff; color: #fff;
float: left; float: left;
} }
...@@ -1076,18 +1100,13 @@ iframe { ...@@ -1076,18 +1100,13 @@ iframe {
outline: none; outline: none;
} }
.mktit { .mktit {
color: #03ffff; width: 100%;
font-size: 18px; height: 30px;
text-align: left; font-size: 18px;
margin-top: 10px; line-height: 30px;
width: 95%; color: #03ffff;
height: 30px; padding-left: 10px;
line-height: 30px; background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
overflow: hidden;
position: absolute;
top: 0;
padding-left: 10px;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
} }
#map-styles{ #map-styles{
width: auto; width: auto;
...@@ -1200,7 +1219,7 @@ iframe { ...@@ -1200,7 +1219,7 @@ iframe {
color: white; color: white;
} }
.serBtn { .serBtn {
background: #fff; background: #152136;
width: 50px; width: 50px;
height: 50px; height: 50px;
text-align: center; text-align: center;
...@@ -1225,7 +1244,7 @@ iframe { ...@@ -1225,7 +1244,7 @@ iframe {
font-size: 2em; font-size: 2em;
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
color: #2964cf; color: #fff;
} }
#btnInput { #btnInput {
width: 300px; width: 300px;
...@@ -1285,12 +1304,18 @@ iframe { ...@@ -1285,12 +1304,18 @@ 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;
background: url(../images/groupshi.png)no-repeat;
background-size: 100% 100%;
} }
.escbox-tip-a { .escbox-tip-a {
} }
...@@ -1306,7 +1331,6 @@ iframe { ...@@ -1306,7 +1331,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 +1500,6 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1476,8 +1500,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;
...@@ -1619,14 +1641,17 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1619,14 +1641,17 @@ div[lay-id='members'] thead tr:nth-child(1) {
left: 0; left: 0;
width: 50px !important; width: 50px !important;
height: 20px; height: 20px;
color: #333; color: #fff;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
background: #fff; background: #152136;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.amap-maptype-title:hover{
background: #152136;
}
.amap-maptype-list { .amap-maptype-list {
width: 50px !important; width: 50px !important;
border-radius: 5px !important; border-radius: 5px !important;
...@@ -1645,7 +1670,7 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1645,7 +1670,7 @@ div[lay-id='members'] thead tr:nth-child(1) {
height: 20px; height: 20px;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
background: #fff; background: #152136;
} }
.amap-maptype-check { .amap-maptype-check {
display: inline-block; display: inline-block;
...@@ -1657,8 +1682,13 @@ div[lay-id='members'] thead tr:nth-child(1) { ...@@ -1657,8 +1682,13 @@ div[lay-id='members'] thead tr:nth-child(1) {
display: inline-block; display: inline-block;
width: 30px !important; width: 30px !important;
height: 15px; height: 15px;
color: #333; color: #fff;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
margin-left: 3px !important; margin-left: 3px !important;
}
.linebtn.active{
background: url(../images/year.png);
background-size: 100% 100%;
color: #fff;
} }
\ No newline at end of file
ioc_frontweb/weather.html
View file @ 423625fe
...@@ -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