2003 lines
97 KiB
Plaintext
2003 lines
97 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8" %>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
||
<%@ page import="com.sipai.tools.Mqtt" %>
|
||
<%@ page import="org.springframework.context.ApplicationContext" %>
|
||
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
|
||
<% ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(request.getServletContext());
|
||
Mqtt mqtt = (Mqtt) ctx.getBean("mqtt");
|
||
request.setAttribute("mqttStatus", mqtt.getStatus());
|
||
request.setAttribute("hostWeb", mqtt.getHostWeb());
|
||
request.setAttribute("username", mqtt.getUsername());
|
||
request.setAttribute("password", mqtt.getPassword());
|
||
%>
|
||
|
||
<!DOCTYPE html>
|
||
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||
</title>
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<!-- 开关按钮-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js" charset="utf-8"></script>
|
||
<%-- mqtt依赖--%>
|
||
<script src="<%=request.getContextPath()%>/JS/mqtt/mqtt.min.js" type="text/javascript"></script>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
|
||
<style>
|
||
body {
|
||
overflow-x: auto;
|
||
}
|
||
.body-wrapper{
|
||
height: 1080px;
|
||
width: 1920px;
|
||
background-size: 100% 100%;
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
}
|
||
.body-wrapper-1{
|
||
background-image: url(<%=request.getContextPath()%>/IMG/main_bg_hqaq.png);
|
||
}
|
||
.body-wrapper-2{
|
||
background-image: url(<%=request.getContextPath()%>/IMG/main_bg_hqaq2.png);
|
||
}
|
||
|
||
.factory-area-1{
|
||
height: 667px;
|
||
width: 642px;
|
||
/*background-image: url(<%=request.getContextPath()%>/IMG/main_bg_hqaq_1.png);
|
||
background-size: 100% 100%;
|
||
background-repeat:no-repeat;
|
||
background-position:center center;*/
|
||
position: absolute;
|
||
top: 186px;
|
||
left: 673px;
|
||
}
|
||
.factory-area-2{
|
||
height: 814px;
|
||
width: 637px;
|
||
/*background-image: url(<%=request.getContextPath()%>/IMG/main_bg_hqaq_2.png);
|
||
background-size: 100% 100%;
|
||
background-repeat:no-repeat;
|
||
background-position:center center;*/
|
||
position: absolute;
|
||
top: 119px;
|
||
left: 673px;
|
||
display: none;
|
||
}
|
||
.factory-area-text-hide{
|
||
display: none;
|
||
}
|
||
.body-data{
|
||
width: 18.5%;
|
||
height: 87.5%;
|
||
background: rgba(0,0,0,0.68);
|
||
position: absolute;
|
||
top:4%;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
}
|
||
.body-title{
|
||
width: 100%;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #03f6f6;
|
||
text-shadow: 1px 1px 2px 0px rgba(45,157,255,0.77);
|
||
padding: 14px;
|
||
}
|
||
.body-line{
|
||
width: 100%;
|
||
height: 2px;
|
||
background: linear-gradient(89deg,rgba(0,176,255,0.00) 0%, #00f6ff 45%, rgba(0,153,255,0.00) 99%);
|
||
}
|
||
.body-content{
|
||
width: 100%;
|
||
padding: 10px 20px;
|
||
}
|
||
.body-score{
|
||
height: 50.7%;
|
||
}
|
||
.body-user{
|
||
height: 33.8%;
|
||
}
|
||
.body-manage{
|
||
height: 46%;
|
||
padding: 10px 0;
|
||
}
|
||
.body-count{
|
||
height: 38.6%;
|
||
}
|
||
.body-left{
|
||
left:1%;
|
||
}
|
||
.body-center{
|
||
top: 5%;
|
||
left: 35%;
|
||
height: 920px;
|
||
width: 750px;
|
||
display: none;
|
||
}
|
||
.body-perimeter{
|
||
top: 0;
|
||
left: 32%;
|
||
height: 1080px;
|
||
width: 846px;
|
||
}
|
||
.perimeter-round{
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
color: #000000;
|
||
position: absolute;
|
||
text-align: center;
|
||
line-height: 1.8;
|
||
}
|
||
.perimeter-round-blue{
|
||
background: #00fff7;
|
||
}
|
||
.perimeter-round-red{
|
||
background: #FF0000;
|
||
}
|
||
.perimeter-round-grey{
|
||
background: #c1c1c1;
|
||
}
|
||
.body-right{
|
||
right:1%;
|
||
}
|
||
.echarts_score{
|
||
width: 130px;
|
||
height: 130px;
|
||
}
|
||
.echarts_alarm{
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
.echarts_line{
|
||
width: 315px;
|
||
height: 250px;
|
||
}
|
||
.font-color-green{
|
||
color: #00FF55;
|
||
}
|
||
.font-color-lightgreen{
|
||
color: #00F6FF;
|
||
}
|
||
.font-color-yellow{
|
||
color: #FFEE00;
|
||
}
|
||
.font-color-red{
|
||
color: #FF0000;
|
||
}
|
||
.font-color-orange{
|
||
color: #FF9100;
|
||
}
|
||
.font-color-blue{
|
||
color: #00B1FF;
|
||
}
|
||
.font-color-purple{
|
||
color: #DF0DFF;
|
||
}
|
||
.font-color-lightblue{
|
||
color: #0D96FF;
|
||
}
|
||
.font-color-lightorange{
|
||
color: #FF9E0D;
|
||
}
|
||
.font-color-lineblue{
|
||
color: #00FFF7;
|
||
}
|
||
.font-color-white{
|
||
color: #ffffff;
|
||
text-shadow: 0px 1px 2px rgb(0 0 0 / 99%);
|
||
}
|
||
.font-size-18{
|
||
font-size: 18px;
|
||
}
|
||
.font-size-20{
|
||
font-size: 20px;
|
||
}
|
||
.font-size-36{
|
||
font-size: 36px;
|
||
}
|
||
.padding-top-20{
|
||
padding-top: 20px;
|
||
}
|
||
.padding-top-15{
|
||
padding-top: 15px;
|
||
}
|
||
.padding-top-10{
|
||
padding-top: 10px;
|
||
}
|
||
.padding-top-5{
|
||
padding-top: 5px;
|
||
}
|
||
.padding-bottom-10{
|
||
padding-bottom: 10px;
|
||
}
|
||
.padding-bottom-15{
|
||
padding-bottom: 15px;
|
||
}
|
||
.padding-bottom-20{
|
||
padding-bottom: 20px;
|
||
}
|
||
.padding-10{
|
||
padding: 10px;
|
||
}
|
||
|
||
.margin-top-1{
|
||
margin-top: 1px;
|
||
}
|
||
.table-border-top{
|
||
border-top: 2px solid #3f6a77;
|
||
}
|
||
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
|
||
padding-right: 5px;
|
||
padding-left: 5px;
|
||
}
|
||
.bootstrap-switch,.bootstrap-switch-handle-on,.bootstrap-switch-handle-off {
|
||
border-radius: 50px;
|
||
}
|
||
.bootstrap-switch-container{
|
||
background: #00A8FF;
|
||
}
|
||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
|
||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
|
||
background: #ffffff;
|
||
}
|
||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
|
||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
|
||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
|
||
line-height: 1;
|
||
}
|
||
.bootstrap-switch .bootstrap-switch-label {
|
||
background: #00a8ff;
|
||
}
|
||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
|
||
background: #5D909F;
|
||
}
|
||
.bootstrap-switch-off .bootstrap-switch-label,
|
||
.bootstrap-switch-off .bootstrap-switch-container
|
||
{
|
||
background: #315c72;
|
||
}
|
||
.body-manage table{
|
||
width: 100%;
|
||
}
|
||
.body-manage table>tbody>tr>td {
|
||
padding: 5px 5px 2px 20px;
|
||
}
|
||
.cursor-pointer{
|
||
cursor: pointer;
|
||
}
|
||
.manage-click{
|
||
cursor: pointer;
|
||
}
|
||
.manage-active{
|
||
background: #1169b7;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.canvas,.center-icon,.body-center-text{
|
||
position: absolute;
|
||
}
|
||
.exit-icon{
|
||
background: transparent;
|
||
}
|
||
.exit-icon-1{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.exit-icon-2{
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.background-color-blue{
|
||
background: #0098c8;
|
||
border: 1px solid #00d3ff;
|
||
}
|
||
.background-color-red{
|
||
background: #c80000;
|
||
border: 1px solid #ff0000;
|
||
}
|
||
.background-color-yellow{
|
||
background: #ff9e0d;
|
||
}
|
||
.background-color-orange{
|
||
background: #ff8000;
|
||
}
|
||
.center-alarm-region{
|
||
width: 140px;
|
||
height: 30px;
|
||
border-radius: 6px;
|
||
padding: 6px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
line-height: 1.3;
|
||
}
|
||
.center-alarm-region > i{
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
}
|
||
.line-lightblue{
|
||
border: 1px solid #00c2ff;
|
||
margin: 0;
|
||
}
|
||
.line-yellow{
|
||
border: 1px solid #ff9e0d;
|
||
margin: 0;
|
||
}
|
||
.line-red{
|
||
border: 1px solid #c80000;
|
||
margin: 0;
|
||
}
|
||
.line-orange{
|
||
border: 1px solid #ff8000;
|
||
margin: 0;
|
||
}
|
||
.special-type-text{
|
||
width: 152px;
|
||
height: 39px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
padding: 5px;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
var height = 995;
|
||
var width = 1870;
|
||
var heightV =1;
|
||
var widthV =1;
|
||
var color = ['#ffff13','#31ff7d','#ff2ee3','#2e97ff','#ffb536'];
|
||
var bizid = "";
|
||
var body_content_width = 0;
|
||
var body_content_height = 0;
|
||
var factory_area_1_width = 0;
|
||
var factory_area_1_height = 0;
|
||
var factory_area_1_top = 0;
|
||
var factory_area_1_left = 0;
|
||
var factory_area_2_width = 0;
|
||
var factory_area_2_height = 0;
|
||
var factory_area_2_top = 0;
|
||
var factory_area_2_left = 0;
|
||
var echarts_score_width = 0
|
||
var echarts_score_height = 0;
|
||
var echarts_alarm_width = 0;
|
||
var echarts_alarm_height = 0;
|
||
var echarts_line_width = 0;
|
||
var echarts_line_height = 0;
|
||
|
||
var body_center_width = 0;
|
||
var body_center_height = 0;
|
||
var body_perimeter_width = 0;
|
||
var body_perimeter_height = 0;
|
||
var alarm_bar_height = 0;
|
||
|
||
var context;
|
||
var canvas;
|
||
var manageShow = false;
|
||
var tzsb_state = false;
|
||
$(function () {
|
||
$(window).width(width);
|
||
$(window).height(height);
|
||
$(document).width(width);
|
||
$(document).height(height);
|
||
$("body").width(width);
|
||
$("body").height(height);
|
||
bizid = unitId;
|
||
body_content_width = $('.body-wrapper').width();
|
||
body_content_height = $('.body-wrapper').height();
|
||
factory_area_1_width = $('.factory-area-1').width();
|
||
factory_area_1_height = $('.factory-area-1').height();
|
||
factory_area_2_width = $('.factory-area-2').width();
|
||
factory_area_2_height = $('.factory-area-2').height();
|
||
|
||
factory_area_1_top = $('.factory-area-1').css("top");
|
||
factory_area_1_left = $('.factory-area-1').css("left");
|
||
factory_area_2_top = $('.factory-area-2').css("top");
|
||
factory_area_2_left = $('.factory-area-2').css("left");
|
||
echarts_score_width = $('.echarts_score').width();
|
||
echarts_score_height = $('.echarts_score').height();
|
||
echarts_alarm_width = $('.echarts_alarm').width();
|
||
echarts_alarm_height = $('.echarts_alarm').height();
|
||
echarts_line_width = $('.echarts_line').width();
|
||
echarts_line_height = $('.echarts_line').height();
|
||
body_center_width = $('.body-center').width();
|
||
body_center_height = $('.body-center').height();
|
||
body_perimeter_width = $('.body-perimeter').width();
|
||
body_perimeter_height = $('.body-perimeter').height();
|
||
|
||
alarm_bar_height = $('.alarm-bar').height();
|
||
|
||
showElement();
|
||
$('#switch_exit').bootstrapSwitch({ //初始化按钮
|
||
onText:" ",
|
||
offText:" ",
|
||
onColor:"primary",
|
||
offColor:"default",
|
||
size:"mini",
|
||
handleWidth:10,
|
||
labelWidth:20,
|
||
onSwitchChange:function(event,state){
|
||
if(state==true){
|
||
$('.exit-icon').show();
|
||
}else{
|
||
$('.exit-icon').hide();
|
||
}
|
||
}
|
||
});
|
||
$('#switch_zjwl').bootstrapSwitch({ //初始化按钮
|
||
onText:" ",
|
||
offText:" ",
|
||
onColor:"primary",
|
||
offColor:"default",
|
||
size:"mini",
|
||
handleWidth:10,
|
||
labelWidth:20,
|
||
onSwitchChange:function(event,state){
|
||
if(state==true){
|
||
$('.body-perimeter').show();
|
||
}else{
|
||
$('.body-perimeter').hide();
|
||
}
|
||
}
|
||
});
|
||
$('#switch_tzsb').bootstrapSwitch({ //初始化按钮
|
||
onText:" ",
|
||
offText:" ",
|
||
onColor:"primary",
|
||
offColor:"default",
|
||
size:"mini",
|
||
handleWidth:10,
|
||
labelWidth:20,
|
||
onSwitchChange:function(event,state){
|
||
tzsb_state=!state;
|
||
if(state==true){
|
||
$('.special-type').show();
|
||
|
||
var checkValue = $('input:radio[name="optionsRadios"]:checked').val();
|
||
$('.factory-area').hide();
|
||
$('.factory-area-'+checkValue).show();
|
||
$('.factory-area-text-'+checkValue).show();
|
||
}else{
|
||
$('.special-type').hide();
|
||
}
|
||
}
|
||
});
|
||
$('.manage-click').click(function(){
|
||
let manage = $(this).data('id');
|
||
if($(this).hasClass("manage-active")){
|
||
$(this).removeClass("manage-active");
|
||
$(this).find(".manage-icon").removeClass("fa-check").addClass("fa-times");
|
||
$(this).find(".manage-text").html("未开启");
|
||
if(manage=='manage'){
|
||
var checkValue = $('input:radio[name="optionsRadios"]:checked').val();
|
||
$('.body-center-'+checkValue).hide();
|
||
manageShow = false;
|
||
}
|
||
}else {
|
||
$(this).addClass("manage-active");
|
||
$(this).find(".manage-icon").removeClass("fa-times").addClass("fa-check");
|
||
$(this).find(".manage-text").html("已开启");
|
||
if(manage=='manage') {
|
||
var checkValue = $('input:radio[name="optionsRadios"]:checked').val();
|
||
$('.body-center-'+checkValue).show();
|
||
manageShow = true;
|
||
}
|
||
}
|
||
});
|
||
$('input:radio[name="optionsRadios"]').click(function(){
|
||
var checkValue = $('input:radio[name="optionsRadios"]:checked').val();
|
||
$('.factory-area').hide();
|
||
$('.factory-area-'+checkValue).show();
|
||
$('.factory-area-text-'+checkValue).show();
|
||
$('.body-wrapper').removeClass("body-wrapper-1");
|
||
$('.body-wrapper').removeClass("body-wrapper-2");
|
||
$('.body-wrapper').addClass("body-wrapper-"+checkValue);
|
||
if(manageShow){
|
||
$('.body-center').hide();
|
||
$('.body-center-'+checkValue).show();
|
||
}
|
||
exitIcon(checkValue);
|
||
});
|
||
|
||
//初始化mqtt
|
||
if ('${mqttStatus}' == '0') {
|
||
let mqttId = '${cu.name}'+ '_web'+ Math.random() + new Date();
|
||
initialMqtt(mqttId);
|
||
} else {
|
||
console.log('mq已关闭')
|
||
}
|
||
});
|
||
window.onresize = function () {
|
||
showElement();
|
||
}
|
||
function initialMqtt(mqttId) {
|
||
const options = {
|
||
clean: true,
|
||
connectTimeout: 10000,
|
||
clientId: mqttId,
|
||
username: '${username}',
|
||
password: '${password}',
|
||
}
|
||
const connectUrl = '${hostWeb}';
|
||
const client = mqtt.connect(connectUrl, options);
|
||
|
||
//当重新连接启动触发回调
|
||
client.on('reconnect', function () {
|
||
// console.log('正在重连.....');
|
||
});
|
||
//连接断开后触发的回调
|
||
client.on("close", function () {
|
||
console.log('客户端已断开连接.....');
|
||
});
|
||
//从broker接收到断开连接的数据包后发出。MQTT 5.0特性
|
||
client.on("disconnect", function (packet) {
|
||
console.log('从broker接收到断开连接的数据包.....' + packet);
|
||
});
|
||
//客户端脱机下线触发回调
|
||
client.on("offline", function () {
|
||
console.log('客户端脱机下线.....');
|
||
});
|
||
//当客户端无法连接或出现错误时触发回调
|
||
client.on("error", (error) => {
|
||
console.log('客户端出现错误.....' + error);
|
||
});
|
||
//当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包
|
||
client.on("packetsend", (packet) => {
|
||
// console.log('客户端已发出数据包：' + packet);
|
||
});
|
||
//当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
|
||
client.on("packetreceive", (packet) => {
|
||
// console.log('收到：' + packet);
|
||
});
|
||
|
||
//成功连接后触发的回调
|
||
client.on("connect", function (connack) {
|
||
// layer.msg('成功连接上mq服务器');
|
||
console.log('成功连接上mqtt服务器');
|
||
//订阅某主题
|
||
/**
|
||
* client.subscribe(topic/topic array/topic object, [options], [callback])
|
||
* topic:一个string类型的topic或者一个topic数组,也可以是一个对象
|
||
* options
|
||
*/
|
||
client.subscribe(['hq_alarm_num'], {qos: 0});
|
||
//每隔2秒发布一次数据
|
||
// setInterval(publish, 2000)
|
||
});
|
||
|
||
function publish() {
|
||
//发布数据
|
||
/**
|
||
* client.publish(topic,message,[options], [callback])
|
||
*
|
||
* message: Buffer or String
|
||
* options:{
|
||
* qos:0, //默认0
|
||
* retain:false, //默认false
|
||
* dup:false, //默认false
|
||
* properties:{}
|
||
* }
|
||
* callback:function (err){}
|
||
*/
|
||
const message = "h5 message " + Math.random() + new Date();
|
||
client.publish("testtopic/123", message, {qos: 2});
|
||
}
|
||
|
||
//当客户端接收到发布消息时触发回调
|
||
/**
|
||
* topic:收到的数据包的topic
|
||
* message:收到的数据包的负载playload
|
||
* packet:收到的数据包
|
||
*/
|
||
client.on('message', (topic, message, packet) => {
|
||
if (topic == 'hq_alarm_num' || topic == 'web_topic') {
|
||
var json = JSON.parse(message.toString());
|
||
var datatype = json.datatype;
|
||
var data = json.data;
|
||
if(datatype=='TypeNumer'){
|
||
$('#alarm_aqyj').html(data.aqyj);
|
||
$('#alarm_xfqj').html(data.xfqj);
|
||
$('#alarm_wsdj').html(data.wsdj);
|
||
$('#alarm_ywj').html(data.ywj);
|
||
$('#alarm_lhq').html(data.lhq);
|
||
$('#alarm_jw').html(data.jw);
|
||
$('#alarm_all').html(data.all);
|
||
$('#alarm_bjcll').html((data.bjcll*100).toFixed(0));
|
||
$('#alarm_numAQRW').html(data.numAQRW);
|
||
$('#alarm_numAISJ').html(data.numAISJ);
|
||
$('#alarm_numWLJS').html(data.numWLJS);
|
||
|
||
$('.alarm_num_a').html(data.numIngA);
|
||
$('.alarm_num_b').html(data.numIngB);
|
||
$('.alarm_num_c').html(data.numIngC);
|
||
$('.alarm_num_d').html(data.numIngD);
|
||
var numIngA = data.numIngA-0;
|
||
var numIngB = data.numIngB-0;
|
||
var numIngC = data.numIngC-0;
|
||
var numIngD = data.numIngD-0;
|
||
|
||
$('#alarm_num_all').html(numIngA+numIngB+numIngC+numIngD);
|
||
var value = [data.numA,data.numB,data.numC,data.numD]
|
||
doBar4Alarm("alarm-bar",value);
|
||
var pievalue = [
|
||
{ value: data.numAQRW, name: '安全任务' },
|
||
{ value: data.numAISJ, name: 'AI视觉' },
|
||
{ value: data.numWLJS, name: '物联监视' }
|
||
];
|
||
doPie("echarts_alarm",pievalue);
|
||
|
||
}
|
||
if(datatype=='TypeZhouJie'){
|
||
showPerimeter(data,1);
|
||
}
|
||
if(datatype=='TypeZhouJie2'){
|
||
showPerimeter(data,2);
|
||
}
|
||
if(datatype=='TypeArea'){
|
||
showRegion(data);
|
||
}
|
||
if(datatype=='TypeEquipment'){
|
||
showSpecialType(data);
|
||
}
|
||
// alarm_num_all();
|
||
}
|
||
});
|
||
//页面离开自动断开连接
|
||
$(window).bind("beforeunload", () => {
|
||
// console.log("客户端窗口关闭,断开连接");
|
||
client.disconnect();
|
||
})
|
||
}
|
||
function alarm_num_all() {
|
||
var nums = 0;
|
||
var aqyj = $('#alarm_aqyj').html()-0;
|
||
var xfqj = $('#alarm_xfqj').html()-0;
|
||
var wsdj = $('#alarm_wsdj').html()-0;
|
||
var ywj = $('#alarm_ywj').html()-0;
|
||
var lhq = $('#alarm_lhq').html()-0;
|
||
var jw = $('#alarm_jw').html()-0;
|
||
if((aqyj+xfqj+wsdj+ywj+lhq+jw)!=null && (aqyj+xfqj+wsdj+ywj+lhq+jw)!='' && (aqyj+xfqj+wsdj+ywj+lhq+jw)>0){
|
||
nums = aqyj+xfqj+wsdj+ywj+lhq+jw;
|
||
}
|
||
var alarm_zjwl = $('#alarm_zjwl').html()-0;
|
||
var alarm_tzsb = $('#alarm_tzsb').html()-0;
|
||
|
||
$('#alarm_num_all').html(nums+alarm_zjwl+alarm_tzsb);
|
||
}
|
||
function showElement() {
|
||
/*height = $(window).height();
|
||
width = $(window).width();*/
|
||
height = 995;
|
||
width = 1870;
|
||
if (height < (global_height * 0.1)) {
|
||
height = global_height;
|
||
}
|
||
if (width < (global_width * 0.1)) {
|
||
width = global_width;
|
||
}
|
||
heightV = height / 1080;
|
||
widthV = width / 1920;
|
||
$('.body-wrapper').height(body_content_height*heightV);
|
||
$('.body-wrapper').width(body_content_width*widthV);
|
||
$('.factory-area-1').height(factory_area_1_height*heightV);
|
||
$('.factory-area-1').width(factory_area_1_width*widthV);
|
||
$('.factory-area-1').css("top", (parseFloat(factory_area_1_top)*heightV)+"px");
|
||
$('.factory-area-1').css("left", (parseFloat(factory_area_1_left)*widthV)+"px");
|
||
|
||
$('.factory-area-2').height(factory_area_2_height*heightV);
|
||
$('.factory-area-2').width(factory_area_2_width*widthV);
|
||
$('.factory-area-2').css("top", (parseFloat(factory_area_2_top)*heightV)+"px");
|
||
$('.factory-area-2').css("left", (parseFloat(factory_area_2_left)*widthV)+"px");
|
||
|
||
$('.echarts_score').height(echarts_score_height*heightV);
|
||
$('.echarts_score').width(echarts_score_width*widthV);
|
||
$('.echarts_alarm').height(echarts_alarm_height*heightV);
|
||
$('.echarts_alarm').width(echarts_alarm_width*widthV);
|
||
$('.echarts_line').height(echarts_line_height*heightV);
|
||
$('.echarts_line').width(echarts_line_width*widthV);
|
||
|
||
$('.body-center').height(body_center_height*heightV);
|
||
$('.body-center').width(body_center_width*widthV);
|
||
$('.body-perimeter').height(body_perimeter_height*heightV);
|
||
$('.body-perimeter').width(body_perimeter_width*widthV);
|
||
|
||
document.getElementById('body-center-1').width=body_center_width*widthV;
|
||
document.getElementById('body-center-1').height=body_center_height*heightV;
|
||
document.getElementById('body-center-2').width=body_center_width*widthV;
|
||
document.getElementById('body-center-2').height=body_center_height*heightV;
|
||
document.getElementById('body-perimeter').width=body_perimeter_width*widthV;
|
||
document.getElementById('body-perimeter').height=body_perimeter_height*heightV;
|
||
var data = {
|
||
value: 100,
|
||
}
|
||
doBar("echarts_score",data);
|
||
exitIcon(1);
|
||
showRegion(null);
|
||
showSpecialType(null);
|
||
showPerimeter(null,1);
|
||
var text=[
|
||
{name:"反硝化深床滤池",elementLeft:53,elementTop:168,direction:0,width:'',height:'',line_height:''},
|
||
{name:"高效沉淀池",elementLeft:96,elementTop:215,direction:0,width:'',height:'',line_height:''},
|
||
{name:"二沉池",elementLeft:110,elementTop:313,direction:0,width:'',height:'',line_height:''},
|
||
{name:"反硝化深床滤池",elementLeft:336,elementTop:166,direction:0,width:'',height:'',line_height:''},
|
||
{name:"高效沉淀池",elementLeft:376,elementTop:215,direction:0,width:'',height:'',line_height:''},
|
||
{name:"二沉池",elementLeft:392,elementTop:313,direction:0,width:'',height:'',line_height:''},
|
||
{name:"锅炉房",elementLeft:411,elementTop:89,direction:0,width:'',height:'',line_height:''},
|
||
{name:"食堂",elementLeft:544,elementTop:70,direction:0,width:'',height:'',line_height:''},
|
||
{name:"综合楼",elementLeft:611,elementTop:56,direction:0,width:'',height:'',line_height:''},
|
||
{name:"紫外消毒池",elementLeft:491,elementTop:145,direction:1,width:14,height:82,line_height:16},
|
||
{name:"加药间",elementLeft:516,elementTop:145,direction:1,width:14,height:50,line_height:16},
|
||
{name:"出水提升泵房",elementLeft:586,elementTop:144,direction:0,width:'',height:'',line_height:''},
|
||
{name:"污泥脱水机房",elementLeft:551,elementTop:260,direction:0,width:'',height:'',line_height:''},
|
||
{name:"生反池",elementLeft:110,elementTop:542,direction:0,width:'',height:'',line_height:''},
|
||
{name:"生反池",elementLeft:391,elementTop:543,direction:0,width:'',height:'',line_height:''},
|
||
{name:"35kv高配间",elementLeft:555,elementTop:429,direction:0,width:'',height:'',line_height:''},
|
||
{name:"鼓风机房",elementLeft:553,elementTop:521,direction:0,width:'',height:'',line_height:''},
|
||
{name:"细格栅及曝气沉砂池",elementLeft:300,elementTop:746,direction:0,width:'',height:'',line_height:''},
|
||
{name:"粗格栅及进水泵房",elementLeft:452,elementTop:739,direction:0,width:56,height:35,line_height:''},
|
||
{name:"门卫",elementLeft:544,elementTop:826,direction:0,width:'',height:'',line_height:''}
|
||
]
|
||
var arr2 = {
|
||
rows: [{id:'1',name:"反硝化深床滤池,高效沉淀池,二沉池",elementLeft:560,elementTop:210,postion:'0,135;1,373;259,373;260,137;',managelevel:1},
|
||
{id:'2',name:"生反池",elementLeft:560,elementTop:370,postion:'0,392;2,877;514,877;515,795;260,796;259,392;',managelevel:1},
|
||
{id:'3',name:"门卫",elementLeft:560,elementTop:610,postion:'540,817;533,837;548,843;554,821;',managelevel:3},
|
||
{id:'4',name:"粗格栅及进水泵房",elementLeft:560,elementTop:610,postion:'443,710;443,794;515,794;515,709;',managelevel:1},
|
||
{id:'5',name:"细格栅及曝气沉砂池",elementLeft:560,elementTop:610,postion:'281,709;280,794;443,794;443,710;',managelevel:2},
|
||
{id:'6',name:"生反池",elementLeft:560,elementTop:610,postion:'281,392;281,709;539,709;539,393;',managelevel:1},
|
||
{id:'7',name:"深度处理区",elementLeft:560,elementTop:610,postion:'281,136;281,372;539,373;540,236;482,236;482,138;',managelevel:1},
|
||
{id:'8',name:"紫外消毒池",elementLeft:560,elementTop:610,postion:'482,138;482,236;540,236;540,166;636,165;637,136;',managelevel:2},
|
||
{id:'9',name:"污泥脱水机房",elementLeft:560,elementTop:610,postion:'540,166;540,373;637,373;636,165;',managelevel:1},
|
||
{id:'10',name:"鼓风机房",elementLeft:560,elementTop:610,postion:'539,393;539,568;581,568;580,393;',managelevel:2},
|
||
{id:'11',name:"锅炉房",elementLeft:560,elementTop:610,postion:'409,75;408,110;451,111;452,75;',managelevel:1},
|
||
{id:'12',name:"食堂",elementLeft:560,elementTop:610,postion:'533,56;532,96;584,94;585,56;',managelevel:3},
|
||
{id:'13',name:"综合楼",elementLeft:560,elementTop:610,postion:'596,43;597,82;667,81;668,44;',managelevel:2}
|
||
],
|
||
}
|
||
showManage('body-center-2',arr2,text);
|
||
var arr1 = {
|
||
rows: [{id:'1',name:"深度处理区",elementLeft:560,elementTop:210,postion:'0,135;1,373;259,373;259,203;203,201;203,136;',managelevel:1},
|
||
{id:'2',name:"生反池",elementLeft:560,elementTop:370,postion:'0,392;0,794;259,793;259,392;',managelevel:1},
|
||
{id:'3',name:"门卫",elementLeft:560,elementTop:610,postion:'540,817;533,837;548,843;554,821;',managelevel:3},
|
||
{id:'4',name:"粗格栅及进水泵房",elementLeft:560,elementTop:610,postion:'443,710;443,794;515,794;515,709;',managelevel:1},
|
||
{id:'5',name:"细格栅及曝气沉砂池",elementLeft:560,elementTop:610,postion:'281,709;280,794;443,794;443,710;',managelevel:2},
|
||
{id:'6',name:"生反池",elementLeft:560,elementTop:610,postion:'281,392;281,709;539,709;539,393;',managelevel:1},
|
||
{id:'7',name:"深度处理区",elementLeft:560,elementTop:610,postion:'281,136;281,372;539,373;539,235;482,234;482,138;',managelevel:1},
|
||
{id:'8',name:"紫外消毒池",elementLeft:560,elementTop:610,postion:'482,138;482,236;540,236;540,166;636,165;637,136;',managelevel:2},
|
||
{id:'9',name:"污泥脱水机房",elementLeft:560,elementTop:610,postion:'540,166;540,373;637,373;636,165;',managelevel:1},
|
||
{id:'10',name:"鼓风机房",elementLeft:560,elementTop:610,postion:'539,393;539,568;581,568;580,393;',managelevel:2},
|
||
{id:'11',name:"锅炉房",elementLeft:560,elementTop:610,postion:'409,75;408,110;451,111;452,75;',managelevel:1},
|
||
{id:'12',name:"食堂",elementLeft:560,elementTop:610,postion:'533,56;532,96;584,94;585,56;',managelevel:3},
|
||
{id:'13',name:"综合楼",elementLeft:560,elementTop:610,postion:'596,43;597,82;667,81;668,44;',managelevel:2}
|
||
],
|
||
}
|
||
showManage('body-center-1',arr1,text);
|
||
$('.alarm-bar').height(alarm_bar_height*heightV);
|
||
let legenddata = ['评分'];
|
||
let seriesdata = [
|
||
{
|
||
name: legenddata[0],
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: [['2023-08-01 00:00:00',0],['2023-08-02 00:00:00',0],['2023-08-03 00:00:00',0],['2023-08-04 00:00:00',0],['2023-08-05 00:00:00',0]
|
||
,['2023-08-06 00:00:00',0],['2023-08-07 00:00:00',0]]
|
||
},
|
||
]
|
||
echartsLine('echarts_line',seriesdata,legenddata,'最近7天评分趋势',['#00E917']);
|
||
echarts_data();
|
||
echarts_data2();
|
||
//一小时一次
|
||
setInterval("echarts_data()",3600000);
|
||
//3秒级
|
||
setInterval("echarts_data2()",3000);
|
||
}
|
||
function echarts_data(){
|
||
|
||
var beginTimeStore = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');
|
||
var endTimeStore = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
|
||
$.post(ext.contextPath + '/data/getDetailData.do', {mpcode:"HQWS_Secure_Score",sdt:beginTimeStore,edt:endTimeStore} , function(result) {
|
||
let legenddata = ['评分'];
|
||
let seriesdata = [
|
||
{
|
||
name: legenddata[0],
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: result[0].data
|
||
},
|
||
]
|
||
echartsLine('echarts_line',seriesdata,legenddata,'最近7天评分趋势',['#00E917']);
|
||
},'json');
|
||
}
|
||
function echarts_data2(){
|
||
$.post(ext.contextPath + '/hqconfig/hqAlarmRecord/getSecureScore.do' , function(result) {
|
||
var data = result.data;
|
||
var value = {
|
||
value: data.toFixed(0),
|
||
}
|
||
doBar("echarts_score",value);
|
||
},'json');
|
||
}
|
||
function exitIcon(area){
|
||
$('.exit-icon').remove();
|
||
|
||
$.post(ext.contextPath + '/work/channelPortConfig/getModalList.do', {
|
||
area: area
|
||
}, function(data) {
|
||
var arr = data.rows;
|
||
/*var arr = {
|
||
rows: [{id:'1',elementLeft:920,elementTop:185},
|
||
{id:'2',elementLeft:1160,elementTop:185},
|
||
{id:'3',elementLeft:1190,elementTop:185}],
|
||
}*/
|
||
if(arr != null && arr != undefined && arr != '') {
|
||
var ChannelPort1 = 0;
|
||
var ChannelPort2 = 0;
|
||
for (var i = 0; i < arr.length; i++) {
|
||
var element = arr[i];
|
||
var type = element.type;
|
||
var heightAlone = 1;
|
||
var widthAlone = 1;
|
||
if(type==1){
|
||
ChannelPort1++;
|
||
}
|
||
if(type==2){
|
||
ChannelPort2++;
|
||
}
|
||
if (element.remarks != null && element.remarks != undefined && element.remarks != '') {
|
||
var remarks = element.remarks.split(",");
|
||
var elementLeft = remarks[0]-28;
|
||
var elementTop = remarks[1]-15;
|
||
if (element.windowsHeight != null && element.windowsHeight != undefined && element.windowsHeight != '') {
|
||
heightAlone = height / element.windowsHeight;
|
||
} else {
|
||
heightAlone = heightV;
|
||
}
|
||
if (element.windowsWidth != null && element.windowsWidth != undefined && element.windowsWidth != '') {
|
||
widthAlone = width / element.windowsWidth;
|
||
} else {
|
||
widthAlone = widthV;
|
||
}
|
||
var elements = '<div id="' + element.id + '" class="center-icon exit-icon exit-icon-'+type+' cursor-pointer" onclick="showExit(\'' + element.id + '\')" ' +
|
||
'style=" left: ' + (elementLeft * widthAlone) + 'px;top: ' + (elementTop * heightAlone) + 'px;"></div>';
|
||
$('.factory-area-' + area).append(elements);
|
||
}
|
||
}
|
||
$('#ChannelPort1').html(ChannelPort1+"个");
|
||
$('#ChannelPort2').html(ChannelPort2+"个");
|
||
}
|
||
},'json');
|
||
}
|
||
function regionAlarm(id,name,url){
|
||
parent.addTab(id,name,url)
|
||
}
|
||
var userPositionsNum = {};
|
||
function showRegion(alarms){
|
||
$('.center-alarm-region').remove();
|
||
$('.center-alarm-line').remove();
|
||
var arr = {
|
||
rows: [{id:'twam0005',name:"深度处理区",elementLeft:510,elementTop:210,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:1,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=0581671e06754de0a0c97973aa40aa57&unitId=021HQWS'},
|
||
{id:'twam0004',name:"二沉池",elementLeft:510,elementTop:370,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:1,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=ddfbc43cfb0f4c32a474861683d5b9ca&unitId=021HQWS'},
|
||
{id:'twam0007',name:"锅炉房",elementLeft:910,elementTop:130,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:3,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=73619741d93549b0950cd95b1c73b4d9&unitId=021HQWS'},
|
||
{id:'scqtqy0009',name:"西侧生物反应池",elementLeft:510,elementTop:610,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:1,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=c9261231ea884f0ab41e08e7ef826bbc&unitId=021HQWS'},
|
||
{id:'xcqtqy00005',name:"东侧生物反应池",elementLeft:1240,elementTop:610,alarmvalue:0,lineType:1,lineWidth:45,uservalue:0,layer:1,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=c6f1418b124340e78fce7d762a6c371f&unitId=021HQWS'},
|
||
{id:'twam0002',name:"展厅",elementLeft:510,elementTop:792,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:1,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=a29d4ee5b9f94edfae17db0578de9b40&unitId=021HQWS'},
|
||
{id:'twam0009',name:"调蓄池",elementLeft:510,elementTop:792,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:2,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=f360feabe015405cabba945408bec7d5&unitId=021HQWS'},
|
||
{id:'153b16eea70c4a2bbfae83fd9eb678e0',name:"出水区及加药区",elementLeft:1333,elementTop:190,alarmvalue:0,lineType:1,lineWidth:44,uservalue:0,layer:3,width: 190,
|
||
url:'process/dataVisualFrame/view.do?frameId=d03679d7ac74492cb48fbbe8d75aa7f5&unitId=021HQWS'},
|
||
{id:'6a20e6a94815492ca0ad530bd0c5ade0',name:"污泥处理区上层",elementLeft:1350,elementTop:269,alarmvalue:0,lineType:1,lineWidth:50,uservalue:0,layer:1,width: 190,
|
||
url:'process/dataVisualFrame/view.do?frameId=33b28f4e789940cc860ece34c5cfacad&unitId=021HQWS'},
|
||
{id:'2a5758e042bf49ee870e423f47aafac1',name:"污泥处理区下层",elementLeft:1350,elementTop:269,alarmvalue:0,lineType:1,lineWidth:50,uservalue:0,layer:2,width: 190,
|
||
url:'process/dataVisualFrame/view.do?frameId=addc3b27ec9c482f80dab977f77dd65e&unitId=021HQWS'},
|
||
{id:'twam0001',name:"鼓风机房和高压配电区",elementLeft:1292,elementTop:535,alarmvalue:0,lineType:1,lineWidth:45,uservalue:0,layer:1,width: 220,
|
||
url:'process/dataVisualFrame/view.do?frameId=439d9745121d4301b4361b39f3d98ee7&unitId=021HQWS'},
|
||
{id:'43c12e7b35634f3aaa34038bccdb95e2',name:"预处理区上层",elementLeft:1310,elementTop:782,alarmvalue:0,lineType:1,lineWidth:129,uservalue:0,layer:1,width: 190,
|
||
url:'process/dataVisualFrame/view.do?frameId=d5659b0c4ccc410695d5dbe8d6eac9d7&unitId=021HQWS'},
|
||
{id:'f242e04ebdb54247afb9c2355ae2da99',name:"预处理区下层",elementLeft:1310,elementTop:782,alarmvalue:0,lineType:1,lineWidth:129,uservalue:0,layer:2,width: 190,
|
||
url:'process/dataVisualFrame/view.do?frameId=c3e651f04a8842ce9c6b65b5f819352e&unitId=021HQWS'},
|
||
{id:'twam0006',name:"上层廊道",elementLeft:510,elementTop:420,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:1,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=c6a11cd6a1cc415f99beaa753014105a&unitId=021HQWS'},
|
||
{id:'twam0008',name:"下层廊道",elementLeft:510,elementTop:420,alarmvalue:0,lineType:0,lineWidth:36,uservalue:0,layer:2,width: 140,
|
||
url:'process/dataVisualFrame/view.do?frameId=2546797d09fe4ef781ab14bc795abbd2&unitId=021HQWS'}
|
||
],
|
||
}
|
||
for(var i=0;i<arr.rows.length;i++){
|
||
var element= arr.rows[i];
|
||
var id = element.id;
|
||
if(alarms!=null && alarms.length>0){
|
||
$.each(alarms,function(key,value){
|
||
if(id==value.id){
|
||
element.alarmvalue = value.num;
|
||
return false;
|
||
}
|
||
})
|
||
}
|
||
|
||
if(userPositionsNum!=null && userPositionsNum.length>0){
|
||
$.each(userPositionsNum,function(key,value){
|
||
if(id==value.areaid){
|
||
element.uservalue = value.fid;
|
||
return false;
|
||
}
|
||
})
|
||
}
|
||
var heightAlone = 0;
|
||
var widthAlone = 0;
|
||
if(element.windowsHeight != null && element.windowsHeight != undefined && element.windowsHeight != ''){
|
||
heightAlone = height/element.windowsHeight;
|
||
}else{
|
||
heightAlone = heightV;
|
||
}
|
||
if(element.windowsWidth != null && element.windowsWidth != undefined && element.windowsWidth != ''){
|
||
widthAlone = width/element.windowsWidth;
|
||
}else{
|
||
widthAlone = widthV;
|
||
}
|
||
var backgroundColor= 'background-color-blue';
|
||
var lineColor = 'line-lightblue';
|
||
if(element.alarmvalue>0){
|
||
backgroundColor= 'background-color-red';
|
||
lineColor = 'line-red';
|
||
}
|
||
var line=element.width;
|
||
if(element.lineType==1){
|
||
line=0-element.lineWidth;
|
||
}
|
||
var value = '';
|
||
if(element.alarmvalue!=null && element.alarmvalue>0){
|
||
value += ' <i class="glyphicon glyphicon-exclamation-sign"></i>'+element.alarmvalue;
|
||
}
|
||
value += ' <span id="'+element.id+'_user">';
|
||
if(element.uservalue!=null && element.uservalue>0){
|
||
value += '<i class="fa fa-user"></i> '+element.uservalue;
|
||
}
|
||
value += '</span>';
|
||
var layer = element.layer;
|
||
var layerClass = "";
|
||
if(layer!=3){
|
||
var checkValue = $('input:radio[name="optionsRadios"]:checked').val();
|
||
if(checkValue==layer){
|
||
layerClass = " factory-area factory-area-text factory-area-text-"+layer+"";
|
||
}else{
|
||
layerClass = " factory-area factory-area-text factory-area-text-"+layer+" factory-area-text-hide";
|
||
}
|
||
}
|
||
var elements = '<div id="'+element.id+'" class="center-icon center-alarm-region cursor-pointer '+backgroundColor+layerClass+'" onclick="regionAlarm(\''+element.id+'\',\''+element.name+'\',\''+element.url+'\')" ' +
|
||
'style=" left: '+(element.elementLeft*widthAlone)+'px;top: '+(element.elementTop*heightAlone)+'px;width: '+element.width+'px;" >'+element.name+value+'</div>' +
|
||
'<hr class="center-icon center-alarm-line '+lineColor+layerClass+'" style="width:'+element.lineWidth+'px; left: '+(element.elementLeft*widthAlone+line)+'px;top: '+(element.elementTop*heightAlone+15)+'px;">';
|
||
$('.body-wrapper').append(elements);
|
||
}
|
||
}
|
||
function showSpecialType(alarms){
|
||
var arr = {
|
||
rows: [{id:'60d0a184e782497fb84264a603f7bb8a',name:"1#起重设备",elementLeft:1030,elementTop:790,value:0,time:'下次年检：-',ileft:-70,itop:0,layer:1},
|
||
{id:'a976d8a12df348f0b84990e92c3767ca',name:"2#起重设备",elementLeft:1280,elementTop:395,value:0,time:'下次年检：-',ileft:0,itop:0,layer:1},
|
||
{id:'e4e368e5c953412986943192f6e6a63d',name:"3#起重设备",elementLeft:1230,elementTop:290,value:0,time:'下次年检：-',ileft:-70,itop:0,layer:1},
|
||
{id:'0571bfdeb5e54b7182c9b610b2bc410b',name:"1#压力容器",elementLeft:1221,elementTop:394,value:0,time:'下次年检：-',ileft:-150,itop:0,layer:1},
|
||
{id:'1fd6126cba11468fa625636e38ed07e9',name:"2#压力容器",elementLeft:1221,elementTop:394,value:0,time:'下次年检：-',ileft:-150,itop:45,layer:1},
|
||
{id:'1ed5bba797c643edb8c9135990115dfa',name:"3#压力容器",elementLeft:1221,elementTop:394,value:0,time:'下次年检：-',ileft:-150,itop:90,layer:1},
|
||
{id:'bca713f400534a5294217adaa664901b',name:"1-3#锅炉",elementLeft:1108,elementTop:130,value:0,time:'下次年检：-',ileft:-70,itop:0,layer:3},
|
||
{id:'669ecec9ebe748179cae05bdf6618890',name:"电梯",elementLeft:1226,elementTop:110,value:0,time:'下次年检：-',ileft:0,itop:0,layer:3}
|
||
]
|
||
}
|
||
var alarm_tzsb = 0;
|
||
for(var i=0;i<arr.rows.length;i++){
|
||
var element= arr.rows[i];
|
||
var id = element.id;
|
||
var value = element.value;
|
||
if(alarms!=null && alarms.length>0){
|
||
$.each(alarms,function(key,value){
|
||
if(id==value.id){
|
||
value = value.status;
|
||
return false;
|
||
}
|
||
})
|
||
}
|
||
var heightAlone = 0;
|
||
var widthAlone = 0;
|
||
if(element.windowsHeight != null && element.windowsHeight != undefined && element.windowsHeight != ''){
|
||
heightAlone = height/element.windowsHeight;
|
||
}else{
|
||
heightAlone = heightV;
|
||
}
|
||
if(element.windowsWidth != null && element.windowsWidth != undefined && element.windowsWidth != ''){
|
||
widthAlone = width/element.windowsWidth;
|
||
}else{
|
||
widthAlone = widthV;
|
||
}
|
||
var backgroundColor= 'background-color-yellow';
|
||
var iColor = 'font-color-lightorange';
|
||
if(value==1){
|
||
backgroundColor= 'background-color-red';
|
||
iColor = 'font-color-red';
|
||
alarm_tzsb ++;
|
||
}
|
||
var layer = element.layer;
|
||
var layerClass = "";
|
||
if(layer!=3){
|
||
var checkValue = $('input:radio[name="optionsRadios"]:checked').val();
|
||
if(checkValue==layer){
|
||
layerClass = " factory-area factory-area-text factory-area-text-"+layer+"";
|
||
}else{
|
||
layerClass = " factory-area factory-area-text factory-area-text-"+layer+" factory-area-text-hide";
|
||
}
|
||
}
|
||
var hideSt = "";
|
||
if(tzsb_state){
|
||
hideSt = "display: none;";
|
||
}
|
||
var time = element.time;
|
||
if($('#'+id+'_NextTime').length>0){
|
||
time = $('#'+id+'_NextTime').text();
|
||
}
|
||
var ileft=element.ileft;
|
||
var itop=element.itop;
|
||
var elements = '<div id="'+element.id+'" class="center-icon special-type special-type-text cursor-pointer '+backgroundColor+layerClass+'" onclick="regionAlarm(\''+element.id+'\')" ' +
|
||
'style=" left: '+(element.elementLeft*widthAlone+ileft)+'px;top: '+(element.elementTop*heightAlone-45+itop)+'px;'+hideSt+'"><div>'+element.name+'</div><div id="'+element.id+'_NextTime">'+time+'</div></div>' +
|
||
'<img src="<%=request.getContextPath()%>/IMG/hqaq/special.png" width="20px" height="30px" class="center-icon special-type '+layerClass+'" style="left: '+(element.elementLeft*widthAlone)+'px;top: '+(element.elementTop*heightAlone)+'px;'+hideSt+'"/>';
|
||
/*'<i class="center-icon special-type font-size-20 fa fa-fw fa-map-marker '+iColor+'" style="left: '+(element.elementLeft*widthAlone)+'px;top: '+(element.elementTop*heightAlone)+'px;">';*/
|
||
$('.body-wrapper').append(elements);
|
||
getNextTime(element.id);
|
||
}
|
||
$('#alarm_tzsb').html(alarm_tzsb);
|
||
}
|
||
function getNextTime(id){
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: ext.contextPath + '/timeEfficiency/patrolPlan/getNextTime.do',
|
||
dataType: 'json',
|
||
data: {
|
||
id: id, // 特种设备 或 任务点id
|
||
type: 0, // 类型： 0为特种设备，1为安全用具或消防器具
|
||
},
|
||
error: function () {
|
||
console.log(id+'获取下次年检时间失败');
|
||
},
|
||
success: function (data) {
|
||
var code = data.code;
|
||
if(code>0){
|
||
var result = data.result;
|
||
$('#'+id+'_NextTime').html('下次年检：'+result);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
function showManage(id,arr,text){
|
||
canvas = document.getElementById(id);
|
||
//drawBeauty();
|
||
let manage = document.getElementById(id);
|
||
manage.width = manage.width;
|
||
let gd = manage.getContext('2d');
|
||
for(var a=0;a<arr.rows.length;a++){
|
||
var element= arr.rows[a];
|
||
let managelevel= element.managelevel;
|
||
let postion = element.postion;
|
||
var pos = postion.split(';');
|
||
var p = pos[0].split(',');
|
||
if(managelevel==0){
|
||
let color = 'rgba(255,0,0,0.3)';
|
||
gd.beginPath();
|
||
gd.strokeStyle='rgb(255,0,0)';
|
||
gd.moveTo(p[0]*widthV,p[1]*heightV);
|
||
for(var i = 1;i <pos.length;i++){
|
||
var px = pos[i].split(',');
|
||
gd.lineTo(px[0]*widthV,px[1]*heightV);
|
||
}
|
||
gd.lineTo(p[0]*widthV,p[1]*heightV);
|
||
gd.stroke();
|
||
gd.fillStyle = color;
|
||
gd.fill();
|
||
}else if(managelevel==1){
|
||
let color = 'rgba(255,145,0,0.3)';
|
||
gd.beginPath();
|
||
gd.strokeStyle='rgb(255,145,0)';
|
||
gd.moveTo(p[0]*widthV,p[1]*heightV);
|
||
for(var i = 1;i <pos.length;i++){
|
||
var px = pos[i].split(',');
|
||
gd.lineTo(px[0]*widthV,px[1]*heightV);
|
||
}
|
||
gd.lineTo(p[0]*widthV,p[1]*heightV);
|
||
gd.stroke();
|
||
gd.fillStyle = color;
|
||
gd.fill();
|
||
}else if(managelevel==2){
|
||
let color = 'rgba(255,213,0,0.3)';
|
||
gd.beginPath();
|
||
gd.strokeStyle='rgb(255,221,0)';
|
||
gd.moveTo(p[0]*widthV,p[1]*heightV);
|
||
for(var i = 1;i <pos.length;i++){
|
||
var px = pos[i].split(',');
|
||
gd.lineTo(px[0]*widthV,px[1]*heightV);
|
||
}
|
||
gd.lineTo(p[0]*widthV,p[1]*heightV);
|
||
gd.stroke();
|
||
gd.fillStyle = color;
|
||
gd.fill();
|
||
}else if(managelevel==3){
|
||
let color = 'rgba(0,102,255,0.30)';
|
||
gd.beginPath();
|
||
gd.strokeStyle='rgb(20,93,255)';
|
||
gd.moveTo(p[0]*widthV,p[1]*heightV);
|
||
for(var i = 1;i <pos.length;i++){
|
||
var px = pos[i].split(',');
|
||
gd.lineTo(px[0]*widthV,px[1]*heightV);
|
||
}
|
||
gd.lineTo(p[0]*widthV,p[1]*heightV);
|
||
gd.stroke();
|
||
gd.fillStyle = color;
|
||
gd.fill();
|
||
}
|
||
}
|
||
|
||
for(var i=0;i<text.length;i++){
|
||
let widthStr ='';
|
||
let heightStr ='';
|
||
let lineheightStr ='';
|
||
if(text[i].width!=''){
|
||
widthStr = 'width:'+text[i].width+'px;';
|
||
}
|
||
if(text[i].height!=''){
|
||
heightStr = 'height:'+text[i].height+'px;';
|
||
}
|
||
if(text[i].line_height!=''){
|
||
lineheightStr = 'line-height:'+text[i].line_height+'px;';
|
||
}
|
||
const textStr = '<span class="body-center-text font-color-white" ' +
|
||
'style="left:'+(text[i].elementLeft*widthV)+'px;top:'+(text[i].elementTop*heightV)+'px;'+widthStr+heightStr+lineheightStr+'">'+text[i].name+'</span>';
|
||
$('#'+id+'-text').append(textStr);
|
||
}
|
||
}
|
||
var perimeterBreaKOff = false;
|
||
function showPerimeter(alarms,type){
|
||
/*canvas = document.getElementById("body-perimeter");
|
||
drawBeauty();*/
|
||
var arr = {
|
||
rows: [{id:'twamdd0014',name:"14",postion:'38.609375,175;38.609375,341',round:'4.609375,241',perimeterlevel:0},
|
||
{id:'twamdd0015',name:"15",postion:'38.609375,341;39.609375,518',round:'5.609375,441',perimeterlevel:0},
|
||
{id:'twamdd0016',name:"16",postion:'39.609375,518;39.609375,658',round:'5.609375,576',perimeterlevel:0},
|
||
{id:'twamdd0017',name:"17",postion:'39.609375,658;37.609375,822',round:'4.609375,744',perimeterlevel:0},
|
||
{id:'twamdd0018',name:"18",postion:'37.609375,822;32.609375,961',round:'0,901',perimeterlevel:0},
|
||
{id:'twamdd0019',name:"19",postion:'32.609375,961;153.609375,986',round:'67.609375,981',perimeterlevel:0},
|
||
{id:'twamdd0020',name:"20",postion:'153.609375,986;303.609375,1016',round:'208.609375,1013',perimeterlevel:0},
|
||
{id:'twamdd0021',name:"21",postion:'303.609375,1016;426.609375,1042',round:'346.609375,1043',perimeterlevel:0},
|
||
{id:'twamdd0022',name:"22",postion:'426.609375,1042;559.609375,1069',round:'471.609375,1018',perimeterlevel:0},
|
||
{id:'twamdd0023',name:"23",postion:'559.609375,1069;593.609375,956',round:'593.609375,1001',perimeterlevel:0},
|
||
{id:'twamdd0024',name:"24",postion:'593.609375,956;625.609375,848',round:'622.609375,909',perimeterlevel:0},
|
||
{id:'twamdd0001',name:"1",postion:'625.609375,848;660.609375,728',round:'659.609375,785',perimeterlevel:0},
|
||
{id:'twamdd0002',name:"2",postion:'660.609375,728;689.609375,625',round:'694.609375,673',perimeterlevel:0},
|
||
{id:'twamdd0003',name:"3",postion:'689.609375,625;722.609375,520',round:'724.609375,583',perimeterlevel:0},
|
||
{id:'twamdd0004',name:"4",postion:'722.609375,520;755.609375,408',round:'759.609375,453',perimeterlevel:0},
|
||
{id:'twamdd0005',name:"5",postion:'755.609375,408;798.609375,262',round:'784.609375,361',perimeterlevel:0},
|
||
{id:'twamdd0006',name:"6",postion:'798.609375,262;800.609375,191',round:'817.609375,232',perimeterlevel:0},
|
||
{id:'twamdd0007',name:"7",postion:'800.609375,191;801.609375,101',round:'820.609375,142',perimeterlevel:0},
|
||
{id:'twamdd0008',name:"8",postion:'801.609375,101;804.609375,9',round:'821.609375,40',perimeterlevel:0},
|
||
{id:'twamdd0009',name:"9",postion:'804.609375,9;626.609375,55',round:'671.609375,7',perimeterlevel:0},
|
||
{id:'twamdd0010',name:"10",postion:'626.609375,55;486.609375,90',round:'532.609375,41',perimeterlevel:0},
|
||
{id:'twamdd0011',name:"11",postion:'486.609375,90;352.609375,126',round:'394.609375,75',perimeterlevel:0},
|
||
{id:'twamdd0012',name:"12",postion:'352.609375,126;177.609375,158',round:'239.609375,110',perimeterlevel:0},
|
||
{id:'twamdd0013',name:"13",postion:'177.609375,158;38.609375,175',round:'91.609375,132',perimeterlevel:0}
|
||
|
||
],
|
||
}
|
||
var alarm_zjwl = 0;
|
||
var alarmsLenght = false;
|
||
if(type==2){
|
||
if( alarms!=null && alarms.length>0){
|
||
$('#body-perimeter-round').empty();
|
||
alarmsLenght = true;
|
||
}
|
||
}else{
|
||
$('#body-perimeter-round').empty();
|
||
alarmsLenght = true;
|
||
}
|
||
if(alarmsLenght){
|
||
let perimeter = document.getElementById("body-perimeter");
|
||
perimeter.width = perimeter.width;
|
||
let gd = perimeter.getContext('2d');
|
||
for(var a=0;a<arr.rows.length;a++){
|
||
let element = arr.rows[a];
|
||
let perimeterlevel= element.perimeterlevel;
|
||
let id= element.id;
|
||
if(alarms!=null && alarms.length>0){
|
||
$.each(alarms,function(key,value){
|
||
if(type==2){
|
||
perimeterlevel = value.status;
|
||
if(perimeterlevel==1){
|
||
perimeterBreaKOff = true;
|
||
}else{
|
||
perimeterBreaKOff = false;
|
||
}
|
||
}else{
|
||
if(id==value.id){
|
||
perimeterlevel = value.status;
|
||
return false;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
let postion = element.postion;
|
||
let round = element.round;
|
||
const round_postion = round.split(',');
|
||
let round_color = 'perimeter-round-blue';
|
||
const pos = postion.split(';');
|
||
const p1 = pos[0].split(',');
|
||
const p2 = pos[1].split(',');
|
||
gd.beginPath();
|
||
// 线宽为5
|
||
gd.lineWidth = 5;
|
||
if(perimeterBreaKOff){
|
||
gd.strokeStyle='rgb(193,193,193)';
|
||
round_color = 'perimeter-round-grey';
|
||
}else{
|
||
if(perimeterlevel==0){
|
||
// 线的样式颜色
|
||
gd.strokeStyle='rgb(0,255,247)';
|
||
round_color = 'perimeter-round-blue';
|
||
}else if(perimeterlevel==1){
|
||
if(type==2){
|
||
gd.strokeStyle='rgb(193,193,193)';
|
||
round_color = 'perimeter-round-grey';
|
||
}else{
|
||
gd.strokeStyle='rgb(255,0,0)';
|
||
round_color = 'perimeter-round-red';
|
||
}
|
||
alarm_zjwl ++;
|
||
}
|
||
}
|
||
gd.moveTo(p1[0]*widthV,p1[1]*heightV);
|
||
gd.lineTo(p2[0]*widthV,p2[1]*heightV);
|
||
gd.stroke();
|
||
gd.fill();
|
||
const roundStr = '<div class="perimeter-round '+round_color+'" style="left:'+round_postion[0]*widthV+'px;top:'+round_postion[1]*heightV+'px;">'+element.name+'</div>';
|
||
$('#body-perimeter-round').append(roundStr);
|
||
}
|
||
if(alarms!=null && alarms.length>0){
|
||
$.each(alarms,function(key,value){
|
||
if(type==2){
|
||
alarm_zjwl = value.status;
|
||
}
|
||
})
|
||
}
|
||
$('#alarm_zjwl').html(alarm_zjwl);
|
||
}
|
||
}
|
||
function showExit(id){
|
||
$.post(ext.contextPath + '/work/channelPortConfig/doModal.do', {
|
||
id: id
|
||
}, function(data) {
|
||
$("#subDiv").html(data);
|
||
openModal('imgModal');
|
||
});
|
||
}
|
||
function doBar(id,data){
|
||
let color = "#00FF55";
|
||
if(90<=data.value && data.value<=100){
|
||
color = "#00FF55";
|
||
}
|
||
if(60<=data.value && data.value<90){
|
||
color = "#FFEE00";
|
||
}
|
||
if(data.value<60){
|
||
color = "#FF0000";
|
||
}
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行更新。
|
||
lifeChart.setOption({
|
||
title: [
|
||
{
|
||
text: data.value,
|
||
subtext: '分',
|
||
textStyle: {
|
||
color: color,
|
||
},
|
||
subtextStyle: {
|
||
color: color,
|
||
},
|
||
},
|
||
],
|
||
series: {
|
||
data: [data.value],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
},
|
||
},
|
||
}
|
||
})
|
||
}else{
|
||
|
||
var option = {
|
||
title: [
|
||
{
|
||
text: data.value,
|
||
subtext: '分',
|
||
left: '45%',
|
||
top: '30%',
|
||
textAlign: 'center',
|
||
itemGap: 2,
|
||
textStyle: {
|
||
fontSize: '45',
|
||
fontWeight: '400',
|
||
color: color,
|
||
textAlign: 'center',
|
||
textBorderColor: 'rgba(0, 0, 0, 0)',
|
||
textShadowColor: '#000',
|
||
textShadowBlur: '0',
|
||
textShadowOffsetX: 0,
|
||
textShadowOffsetY: 1,
|
||
},
|
||
subtextStyle: {
|
||
fontSize: '13',
|
||
fontWeight: '400',
|
||
color: color,
|
||
textAlign: 'center',
|
||
textBorderColor: 'rgba(0, 0, 0, 0)',
|
||
textShadowColor: '#000',
|
||
textShadowBlur: '0',
|
||
textShadowOffsetX: 0,
|
||
textShadowOffsetY: 1,
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
radius: ['80%', '95%'],
|
||
center: ['50%', '50%'],
|
||
},
|
||
angleAxis: {
|
||
max: 100,
|
||
clockwise: false,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: {
|
||
name: '',
|
||
type: 'bar',
|
||
roundCap: true,
|
||
z: 2,
|
||
showBackground: true,
|
||
data: [data.value],
|
||
coordinateSystem: 'polar',
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
},
|
||
},
|
||
}
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option, true);
|
||
}
|
||
}
|
||
|
||
function doBar4Alarm(id,data) {
|
||
if ( $("#"+id).length > 0 ){
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行更新。
|
||
lifeChart.setOption({
|
||
series: [
|
||
{
|
||
label: {
|
||
show: true ,
|
||
color: '#fff' ,
|
||
fontSize: 16 ,
|
||
fontWeight: 700 ,
|
||
position: 'top' ,
|
||
},
|
||
/*itemStyle: {
|
||
borderRadius: 5 ,
|
||
},*/
|
||
barWidth: 20,
|
||
data: [
|
||
{
|
||
value: data[0],
|
||
itemStyle: {
|
||
color: '#FF0000'
|
||
}
|
||
},
|
||
{
|
||
value: data[1],
|
||
itemStyle: {
|
||
color: '#FF8000'
|
||
}
|
||
},
|
||
{
|
||
value: data[2],
|
||
itemStyle: {
|
||
color: '#FFE600'
|
||
}
|
||
},
|
||
{
|
||
value: data[3],
|
||
itemStyle: {
|
||
color: '#00DCFF'
|
||
}
|
||
},
|
||
],
|
||
type: 'bar'
|
||
}
|
||
]
|
||
})
|
||
}else{
|
||
var option = {
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 30,
|
||
top: 30,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['A级', 'B级', 'C级', 'D级'],
|
||
axisLine: {
|
||
show: false ,
|
||
},
|
||
axisTick: {
|
||
show: false ,
|
||
},
|
||
splitLine: {
|
||
show: false ,
|
||
},
|
||
axisLabel: {
|
||
color: '#fff',
|
||
fontSize: 14 ,
|
||
}
|
||
},
|
||
yAxis: {
|
||
show: false ,
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
label: {
|
||
show: true ,
|
||
color: '#fff' ,
|
||
fontSize: 16 ,
|
||
fontWeight: 700 ,
|
||
position: 'top' ,
|
||
},
|
||
/*itemStyle: {
|
||
borderRadius: 5 ,
|
||
},*/
|
||
barWidth: 20,
|
||
data: [
|
||
{
|
||
value: data[0],
|
||
itemStyle: {
|
||
color: '#FF0000'
|
||
}
|
||
},
|
||
{
|
||
value: data[1],
|
||
itemStyle: {
|
||
color: '#FF8000'
|
||
}
|
||
},
|
||
{
|
||
value: data[2],
|
||
itemStyle: {
|
||
color: '#FFE600'
|
||
}
|
||
},
|
||
{
|
||
value: data[3],
|
||
itemStyle: {
|
||
color: '#00DCFF'
|
||
}
|
||
},
|
||
],
|
||
type: 'bar'
|
||
}
|
||
]
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option, true);
|
||
}
|
||
}
|
||
};
|
||
|
||
function doPie(id,data) {
|
||
if ( $("#"+id).length > 0 ){
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行更新。
|
||
lifeChart.setOption({
|
||
series: {
|
||
data: data,
|
||
}
|
||
})
|
||
}else{
|
||
var option = {
|
||
color: ['#00B1FF','#00FF55','#FFCC00'],
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: '90%',
|
||
data: data,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option, true);
|
||
}
|
||
}
|
||
};
|
||
|
||
function echartsLine(id,data,legenddata,text,color) {
|
||
if ( $("#"+id).length > 0 ) {
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||
lifeChart.dispose();
|
||
}
|
||
var option = {
|
||
color: color,
|
||
title: {
|
||
text: text,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '40',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLabel: {
|
||
interval: 23 ,
|
||
formatter: function (value, index) {
|
||
return value.substr(8,2);
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#A0A0A0'
|
||
}
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
},
|
||
{
|
||
type: 'category',
|
||
axisLine: {
|
||
onZero: false,
|
||
lineStyle: {
|
||
color: '#A0A0A0'
|
||
}
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#A0A0A0'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
type: 'dashed',
|
||
lineStyle: {
|
||
color: '#A0A0A0'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#A0A0A0'
|
||
}
|
||
},
|
||
}
|
||
],
|
||
series: data
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option, true);
|
||
}
|
||
}
|
||
var lnglats = "";
|
||
function windowToCanvas(e) {
|
||
var x = e.x || e.clientX,
|
||
y = e.y || e.clientY,
|
||
bbox = canvas.getBoundingClientRect();
|
||
return { x: x - bbox.left,
|
||
y: y - bbox.top
|
||
};
|
||
}
|
||
function drawBeauty(){
|
||
//点击获取坐标
|
||
canvas.onmousedown = function (e) {
|
||
var loc = windowToCanvas(e);
|
||
e.preventDefault(); // prevent cursor change
|
||
var lnglat = new Array;
|
||
lnglat[0]=loc.x;
|
||
lnglat[1]=loc.y;
|
||
lnglats+=loc.x+','+loc.y+';';
|
||
console.log(lnglats);
|
||
};
|
||
}
|
||
|
||
var websocket = null;
|
||
var restartDialog;
|
||
//判断当前浏览器是否支持WebSocket
|
||
if ('WebSocket' in window) {
|
||
websocket = new ReconnectingWebSocket(ext.basePath.replace("http", "ws") + "/PositionsNumWebSocket");
|
||
} else {
|
||
alert('当前浏览器 Not support websocket')
|
||
}
|
||
|
||
//连接发生错误的回调方法
|
||
websocket.onerror = function () {
|
||
};
|
||
|
||
//连接成功建立的回调方法
|
||
websocket.onopen = function () {
|
||
console.info('获取定位人员数量websocker开启');
|
||
}
|
||
|
||
//接收到消息的回调方法
|
||
websocket.onmessage = function (event) {
|
||
var result= JSON.parse(event.data);
|
||
$(".lower_level_area_insider").html(result.minusOne_insider);
|
||
$(".lower_level_area_visitor").html(result.minusOne_visitor);
|
||
$(".lower_level_area_contractor").html(result.minusOne_contractor);
|
||
$(".upper_level_area_insider").html(result.one_insider);
|
||
$(".upper_level_area_visitor").html(result.one_visitor);
|
||
$(".upper_level_area_contractor").html(result.one_contractor);
|
||
$(".user_num_all").html(result.minusOne_insider+result.minusOne_visitor+result.minusOne_contractor+result.one_insider+result.one_visitor+result.one_contractor);
|
||
userPositionsNum = result.countList;
|
||
}
|
||
|
||
//连接关闭的回调方法
|
||
websocket.onclose = function () {
|
||
console.info('获取定位人员数量websocker关闭');
|
||
closeWebSocket();
|
||
}
|
||
|
||
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||
window.onbeforeunload = function () {
|
||
closeWebSocket();
|
||
}
|
||
|
||
//关闭WebSocket连接
|
||
function closeWebSocket() {
|
||
websocket.close();
|
||
}
|
||
</script>
|
||
|
||
</head>
|
||
|
||
<body id="body">
|
||
<div class="wrapper">
|
||
<div class="content-wrapper content-wrapper-bg-darkblue ">
|
||
<div id="subDiv">
|
||
</div>
|
||
<div class="body-wrapper body-wrapper-1">
|
||
<div class="body-data body-left">
|
||
<div class="body-title">【 安全评分 】</div>
|
||
<div class="body-line"></div>
|
||
<div class="body-content body-score">
|
||
<div class="row padding-top-10">
|
||
<div class="col-sm-6 col-xs-12 ">
|
||
<div id="echarts_score" class="echarts_score" style="margin: auto;"></div>
|
||
</div>
|
||
<div class="col-sm-6 col-xs-12 ">
|
||
<div class="row">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-green"></i> 可控</span>
|
||
<span class="col-sm-6 col-xs-12 ">90~100</span>
|
||
</div>
|
||
<div class="row padding-top-10">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-yellow"></i> 警戒</span>
|
||
<span class="col-sm-6 col-xs-12 ">60~89</span>
|
||
</div>
|
||
<div class="row padding-top-10">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-red"></i> 失控</span>
|
||
<span class="col-sm-6 col-xs-12 "><60</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row padding-top-15">
|
||
<div class="col-sm-6 col-xs-12 text-center cursor-pointer" onclick="regionAlarm('1f8ffdd596c143ff965a54e214a35094','风险诊断记录','hqconfig/hqAlarmRecord/showList.do?riskStatusForSelect=1')" >
|
||
<div class="row">
|
||
<span class="col-sm-12 col-xs-12">当前报警</span>
|
||
</div>
|
||
<div class="row padding-top-15">
|
||
<span class="col-sm-12 col-xs-12 font-color-blue font-size-36 alarm_num_all" id="alarm_num_all">0</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-xs-12 ">
|
||
<div class="row cursor-pointer" onclick="regionAlarm('1f8ffdd596c143ff965a54e214a35094','风险诊断记录','hqconfig/hqAlarmRecord/showList.do?riskStatusForSelect=1&risklevelForSelect=A')">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-red"></i> A级</span>
|
||
<span class="col-sm-6 col-xs-12 font-color-red alarm_num_a ">0</span>
|
||
</div>
|
||
<div class="row padding-top-5 cursor-pointer" onclick="regionAlarm('1f8ffdd596c143ff965a54e214a35094','风险诊断记录','hqconfig/hqAlarmRecord/showList.do?riskStatusForSelect=1&risklevelForSelect=B')">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-orange"></i> B级</span>
|
||
<span class="col-sm-6 col-xs-12 font-color-orange alarm_num_b ">0</span>
|
||
</div>
|
||
<div class="row padding-top-5 cursor-pointer" onclick="regionAlarm('1f8ffdd596c143ff965a54e214a35094','风险诊断记录','hqconfig/hqAlarmRecord/showList.do?riskStatusForSelect=1&risklevelForSelect=C')">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-yellow"></i> C级</span>
|
||
<span class="col-sm-6 col-xs-12 font-color-yellow alarm_num_c ">0</span>
|
||
</div>
|
||
<div class="row padding-top-5 cursor-pointer" onclick="regionAlarm('1f8ffdd596c143ff965a54e214a35094','风险诊断记录','hqconfig/hqAlarmRecord/showList.do?riskStatusForSelect=1&risklevelForSelect=D')">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-blue"></i> D级</span>
|
||
<span class="col-sm-6 col-xs-12 font-color-blue alarm_num_d ">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row padding-top-5">
|
||
<div class="col-sm-12 col-xs-12 ">
|
||
<div id="echarts_line" class="echarts_line" style="margin: auto;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="body-title">【 人员情况 】</div>
|
||
<div class="body-line"></div>
|
||
<div class="body-content body-user">
|
||
<div class="row padding-top-20 padding-bottom-20">
|
||
<div class="col-sm-3 col-xs-12 text-center">
|
||
<div class="row">
|
||
<span class="col-sm-12 col-xs-12">人员总数</span>
|
||
</div>
|
||
<div class="row padding-top-5 cursor-pointer" onclick="regionAlarm('3b228fd52ce540ec80172eb93fc6cd12','区域进入记录','hqconfig/enterRecord/showList.do')">
|
||
<span class="col-sm-12 col-xs-12 font-color-lightgreen font-size-36 user_num_all">0</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-9 col-xs-12 text-center">
|
||
<div class="row">
|
||
<span class="col-sm-3 col-xs-12"></span>
|
||
<span class="col-sm-3 col-xs-12 ">内部人员</span>
|
||
<span class="col-sm-3 col-xs-12 ">承包商</span>
|
||
<span class="col-sm-3 col-xs-12 ">访客</span>
|
||
</div>
|
||
<div class="row padding-top-5">
|
||
<span class="col-sm-3 col-xs-12 ">上层区域</span>
|
||
<span class="col-sm-3 col-xs-12 font-color-lightgreen upper_level_area_insider ">0</span>
|
||
<span class="col-sm-3 col-xs-12 font-color-lightgreen upper_level_area_contractor ">0</span>
|
||
<span class="col-sm-3 col-xs-12 font-color-lightgreen upper_level_area_visitor ">0</span>
|
||
</div>
|
||
<div class="row padding-top-5">
|
||
<span class="col-sm-3 col-xs-12 ">下层区域</span>
|
||
<span class="col-sm-3 col-xs-12 font-color-lightgreen lower_level_area_insider ">0</span>
|
||
<span class="col-sm-3 col-xs-12 font-color-lightgreen lower_level_area_contractor ">0</span>
|
||
<span class="col-sm-3 col-xs-12 font-color-lightgreen lower_level_area_visitor ">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row padding-10 text-center">
|
||
<span class="col-sm-4 col-xs-12 ">出入口</span>
|
||
<label class="col-sm-2 col-xs-12 " id="ChannelPort2">0个</label>
|
||
<span class="col-sm-4 col-xs-12 ">安全出入口</span>
|
||
<label class="col-sm-2 col-xs-12 " id="ChannelPort1">0个</label>
|
||
<%--<div class="col-sm-4 col-xs-12 "><input id="switch_exit" name="switch" type="checkbox" checked></div>--%>
|
||
</div>
|
||
<%--<div class="row padding-10 margin-top-1 text-center manage-click">
|
||
<span class="col-sm-5 col-xs-12 ">人员定位</span>
|
||
<label class="col-sm-3 col-xs-12 "></label>
|
||
<div class="col-sm-4 col-xs-12"><i class="fa fa-fw fa-times manage-icon"></i><span class="manage-text">未开启</span></div>
|
||
</div>--%>
|
||
<div class="row padding-10 margin-top-1 text-center manage-click" data-id="manage">
|
||
<span class="col-sm-5 col-xs-12 ">安全管理四色图</span>
|
||
<label class="col-sm-3 col-xs-12 "></label>
|
||
<div class="col-sm-4 col-xs-12"><i class="fa fa-fw fa-times manage-icon"></i><span class="manage-text">未开启</span></div>
|
||
</div>
|
||
<div class="row padding-10 margin-top-1 text-center">
|
||
<span class="col-sm-5 col-xs-12 ">区域</span>
|
||
<div class="col-sm-3 col-xs-12">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked="">上层区域
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-3 col-xs-12">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="2" >下层区域
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="canvas body-perimeter" id="body-perimeter-round" ></div>
|
||
<canvas class="canvas body-perimeter" id="body-perimeter" ></canvas>
|
||
<canvas class="canvas body-center body-center-1" id="body-center-1" ></canvas>
|
||
<div class="canvas body-center body-center-1" id="body-center-1-text" ></div>
|
||
<canvas class="canvas body-center body-center-2" id="body-center-2" ></canvas>
|
||
<div class="canvas body-center body-center-2" id="body-center-2-text" ></div>
|
||
<div class="body-data body-right">
|
||
<div class="body-title">【 安全管理 】</div>
|
||
<div class="body-line"></div>
|
||
<div class="body-content body-manage">
|
||
<table>
|
||
<tr>
|
||
<td></td>
|
||
<td>总数</td>
|
||
<td>报警</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr class="table-border-top">
|
||
<td colspan="4">巡检点</td>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/secure.png" width="20px" height="30px" /> 安全用具</td>
|
||
<td>12</td>
|
||
<td id="alarm_aqyj">0</td>
|
||
<td><%--<input id="switch_aqyj" name="switch_aqyj" type="checkbox" checked>--%></td>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/firefighting.png" width="20px" height="30px" /> 消防器具</td>
|
||
<td>46</td>
|
||
<td id="alarm_xfqj">0</td>
|
||
<td><%--<input id="switch_xfqj" name="switch_xfqj" type="checkbox" checked>--%></td>
|
||
</tr>
|
||
<%--<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/patrol.png" width="20px" height="30px" /> 区域巡检</td>
|
||
<td>0</td>
|
||
<td>0</td>
|
||
<td><%–<input id="switch_qyxj" name="switch_qyxj" type="checkbox" checked>–%></td>
|
||
</tr>--%>
|
||
<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/special.png" width="20px" height="30px" /> 特种设备</td>
|
||
<td>10</td>
|
||
<td id="alarm_tzsb">0</td>
|
||
<td><input id="switch_tzsb" name="switch_tzsb" type="checkbox" checked></td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="4">物联监视</td>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/hygrothermograph.png" width="20px" height="30px" /> 温湿度计</td>
|
||
<td>20</td>
|
||
<td id="alarm_wsdj">0</td>
|
||
<td><%--<input id="switch_wsdj" name="switch_wsdj" type="checkbox" checked>--%></td>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/level.png" width="20px" height="30px" /> 液位计</td>
|
||
<td>6</td>
|
||
<td id="alarm_ywj">0</td>
|
||
<td><%--<input id="switch_ywj" name="switch_ywj" type="checkbox" checked>--%></td>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/hydrogensulfide.png" width="20px" height="30px" /> 硫化氢</td>
|
||
<td>25</td>
|
||
<td id="alarm_lhq">0</td>
|
||
<td><%--<input id="switch_lhq" name="switch_lhq" type="checkbox" checked>--%></td>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="<%=request.getContextPath()%>/IMG/hqaq/methane.png" width="20px" height="30px" /> 甲烷</td>
|
||
<td>6</td>
|
||
<td id="alarm_jw">0</td>
|
||
<td><%--<input id="switch_lhq" name="switch_lhq" type="checkbox" checked>--%></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="fa fa-fw fa-minus font-color-lineblue"></i>周界围栏</td>
|
||
<td>24</td>
|
||
<td id="alarm_zjwl">0</td>
|
||
<td><input id="switch_zjwl" name="switch_zjwl" type="checkbox" checked></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="body-title">【 报警统计 】</div>
|
||
<div class="body-line"></div>
|
||
<div class="body-content body-count">
|
||
<div class="row text-center padding-top-10">
|
||
<div class="col-sm-6 col-xs-12">
|
||
<span class="col-sm-12 col-xs-12">本月报警总数</span>
|
||
<label class="col-sm-12 col-xs-12 font-color-lightblue font-size-36 padding-top-5" id="alarm_all">0</label>
|
||
</div>
|
||
<div class="col-sm-6 col-xs-12">
|
||
<span class="col-sm-12 col-xs-12">报警处理率</span>
|
||
<label class="col-sm-12 col-xs-12 font-color-lightblue padding-top-5"><span class="font-size-36" id="alarm_bjcll">100</span>%</label>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-12 col-xs-12 alarm-bar" id="alarm-bar" style="height: 120px;">
|
||
</div>
|
||
</div>
|
||
<div class="row padding-top-5">
|
||
<div class="col-sm-5 col-xs-12 ">
|
||
<div id="echarts_alarm" class="echarts_alarm" style="margin: auto;"></div>
|
||
</div>
|
||
<div class="col-sm-7 col-xs-12 ">
|
||
<div class="row">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-blue"></i> 安全任务</span>
|
||
<span class="col-sm-6 col-xs-12 " id="alarm_numAQRW">0</span>
|
||
</div>
|
||
<div class="row padding-top-10">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-green"></i> AI视觉</span>
|
||
<span class="col-sm-6 col-xs-12 " id="alarm_numAISJ">0</span>
|
||
</div>
|
||
<div class="row padding-top-10">
|
||
<span class="col-sm-6 col-xs-12 "><i class="fa fa-fw fa-circle font-color-yellow"></i> 物联监视</span>
|
||
<span class="col-sm-6 col-xs-12 " id="alarm_numWLJS">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="factory-area factory-area-1"></div>
|
||
<div class="factory-area factory-area-2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html> |