SGGL_JT/SUBQHSE/FineUIPro.Web/common/mainProject_ZJ.aspx

1702 lines
61 KiB
Plaintext
Raw Normal View History

2025-04-07 17:43:30 +08:00
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProject_ZJ.aspx.cs" Inherits="FineUIPro.Web.common.mainProject_ZJ" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no" />
<title>首页</title>
<link rel="stylesheet" href="../res/css/indexv2.css">
<link rel="stylesheet" href="../res/assets/css/video-7.15.0.min.css"/>
<link rel="stylesheet" href="../res/assets/css/xfk.css" />
<style type="text/css">
.risk{
calc(100% - 1.4737rem)
}
#riskMap{
width:100%;
height:100%;
}
.video-inner
{height: 22rem;
}
#wrap .items1>.title
{
left:18.75105rem !important}
html {
min-height: auto;
}
.pdtb0{
padding-top:0 !important;
padding-bottom:0 !important;
}
.swiper-container{
width:100%;
height:100%;
}
.flex{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
}
.flexV{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-ul {
color: #666;
box-sizing: border-box;
padding: 10px 0;
}
.content-ul .c-item {
cursor:pointer;
display: flex;
overflow: hidden;
max-width: 100%;
font-size:12px;
height:24px;
/* margin-bottom: 8px; */
}
.content-ul .c-item:last-child {
margin-bottom: 0;
}
.content-ul .c-item .tit {
flex: 1;
min-width: 0;
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
display:flex;
align-items:center;
}
.content-ul .c-item .time {
width: 90px;
float: right;
}
.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
}
.video-wrapper{
padding-bottom: 50% !important;
}
</style>
<style>
#wrap{
height: 57.7895rem !important;
}
#wrap .items1
{
width:43.9474rem}
#wrap .items
{width:26rem ;
}
.left .items .content
{
display: flex;
align-items: center;
justify-content: center;
}
.left .items .content .i-item
{
width: 6.6146rem;
margin: 0 0.5rem;
}
.left .items .content .i-item .i-txt
{
font-size: 0.6292rem;
color: #7ECEF7;
text-align: center;
margin: 0 auto;
}
.left .items .content .i-item .i-desc {
width: 100%;
height: 4.5229rem;
background: rgba(11, 32, 86, 0.5);
box-shadow: 0 0 0.1563rem 0.01563rem rgba(11, 32, 86, 0.8);
margin: 1.0417rem 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.left .items .content .i-item .i-desc .id-txt {
font-size: 0.6292rem;
color: #FFF;
}
.left .items .content .i-item .i-desc .id-num {
margin-top: 0.7813rem;
font-size: 1.3542rem;
color: #1AB1FF;
}
.left .items .content .i-item .i-desc .id-num-cl1 {
color: #12CDA2 !important;
}
</style>
<style>
.center .items .content .sgsjsj .sg-top {
display: flex;
height: 2.0313rem;
}
.center .items .content .sgsjsj .sg-top .sg-top-item {
/* width: .6875rem; */
background: rgba(15, 45, 88, 0.5);
margin-right: .44688rem;
border: 1px solid #0F2D58;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
font-size: .6625rem;
padding: 0 1.0417rem 0 .77813rem;
}
.center .items .content .sgsjsj .sg-top .sg-top-item .num{ color: #1AB1FF;
font-size: .8542rem;}
.center .items .content .sgsjsj .sg-chart
{width: 100%;
height: 11.2708rem;
}
.center .items .tit ,.right .items .tit {
height: 1.4583rem;
font-size: .77292rem;
color: #7ecef7;
display: flex;
align-items: center;
padding-left: .05208rem;
}
.center .items .tit .tab-wrap, .right .items .tit .tab-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: .22604rem;
}
.center .items .tit .tab-wrap .tab, .right .items .tit .tab-wrap .tab {
height: 1.4583rem;
font-size: .77292rem;
color: #7ECEF7;
display: flex;
align-items: center;
justify-content: center;
}
.center .items .tit .tab-wrap .tab>div , .right .items .tit .tab-wrap .tab>div {
height: 1.4583rem;
line-height: 1.4583rem;
text-align: center;
cursor: pointer;
padding: 0 .55208rem;
}
.center .items .tit .tab-wrap .tab .active, .right .items .tit .tab-wrap .tab .active{
color: #FFF;
position: relative;
z-index: 1;
cursor: default !important;
}
.center .items .tit .tab-wrap .tab .active::before, .right .items .tit .tab-wrap .tab .active::before {
height: 1.4583rem;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color: #19509E;
transform: skew(-15deg);
}
.center .items .flexCenter
{
height:12rem;
display: flex;
align-items: center;
justify-content: center;
}
.center .items .content .wdgcsj {
width: 28.97917rem;
height: 10.01563rem;
background: url(../res/assets/image/index1/wdgcsj.png) center center / 100% 100% no-repeat;
font-size: 0;
display:flex;
flex-wrap:wrap;
}
.center .items .content .wdgcsj .item {
width: 50%;
height: 5.59375rem;
position: relative;
}
.center .items .content .wdgcsj .item .leftPos {
position: absolute;
left: .5208rem;
top: .7813rem;
}
.center .items .content .wdgcsj .item .rightPos {
position: absolute;
right: .5208rem;
top: .7813rem;
text-align: right;
}
.center .items .content .wdgcsj .item .item-inner .desc {
color: #7ECEF7;
font-size: .77292rem;
margin-bottom: .55208rem;
}
.center .items .content .wdgcsj .item .item-inner .num {
color: #1AB1FF;
font-size: .88542rem;
}
.center .items .content .yjglsj {
width: 15.53125rem;
height: 12.22917rem;
background: url(../res/assets/image/index1/yjglsj.png) center center / 100% 100% no-repeat;
font-size: 0;
}
.center .items .content .yjglsj .item {
display: inline-block;
width: 50%;
height: 5.59375rem;
}
.center .items .content .yjglsj .item .item-inner
{
height:100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.center .items .content .yjglsj .item .item-inner .num {
color: #1AB1FF;
font-size: 1.5625rem;
margin-bottom: .88854rem;
}
.center .items .content .yjglsj .desc {
color: #7ECEF7;
font-size: .77292rem;
}
.right .items .new_table{
font-size: 0.7rem;
}
.right .items .new_table .new_thead{
width: 100%;
display: flex;
flex-direction: row;
}
.right .items .new_table .new_thead .th{
color:#7ECEF7;
text-align: center;
height: 1.75rem;
line-height: 1.75rem;
background-color: #213771;
}
.right .items .new_table .new_thead .time{
flex: 1;
}
.right .items .new_table .new_thead .content{
width: 70%;
}
.right .items .new_table .new_tbody{
width: 100%;
}
.right .items .new_table .new_tbody .tr{
width: 100%;
background-color: rgba(33,55,133,0.5);
color: #ffffff;
}
.right .items .new_table .new_tbody .tr .list
{
display: flex;
flex-direction: row;}
.right .items .new_table .new_tbody .tr span{
text-align: center;
height: 1.55rem;
line-height: 1.55rem;
}
.right .items .new_table .new_tbody .tr .time{
flex: 1;
}
.right .items .new_table .new_tbody .tr .content{
width: 70%;
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}
.spjc{
padding: 1.5rem 0;
margin: 0.5rem 0;
position: relative;
}
.spjc .bottom_right span{
border-bottom: 1px solid;
cursor: pointer;
margin-left: 0.5rem;
}
.spjc img{
width: 100%;
height: 100%;
cursor: pointer;
}
.spjc .bottom{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.spjc .bottom_info{
line-height: 1.5rem;
background-color: #213771;
color: #7ECEF7;
font-size: 0.7rem;
display: flex;
justify-content: space-between;
padding:0 0.2rem;
box-sizing: border-box;
}
.spjc .top{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.spjc .top .top_title{
line-height: 1.5rem;
background-color: linear-gradient(270deg, rgba(7, 39, 97, 0) 0%, rgba(68, 121, 216, 0.69) 100%);
background: linear-gradient(270deg, rgba(7, 39, 97, 0) 0%, rgba(68, 121, 216, 0.69) 100%);
background-image: linear-gradient(270deg, rgba(7, 39, 97, 0) 0%, rgba(68, 121, 216, 0.69) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
color: #fff;
font-size: 0.7rem;
box-sizing: border-box;
padding-left: 1rem;
}
.swiper {
width: 600px;
height:11rem;
border: 1px solid #000;
}
.swiper-slide {
border: 1px;
background-color: aqua;
color: #fff;
}
.swiper-wrapper {
/* 这里是改变其动画效果为匀速形式,不加此样式的话会造成滚动卡顿,看起来效果不平滑 */
/* 样式做了各种浏览器的兼容 */
transition-timing-function:linear !important;
-webkit-transition-timing-function: linear !important;
-moz-transition-timing-function: linear !important;
-ms-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
</style>
</head>
<body>
<script src="../res/lib/flexlib.js">
</script>
<div id="wrap">
<div class="left">
<div class="items">
<div class="title">安全数据统计</div>
<div class="statistics">
<div class="statistics-label">安全人工时</div>
<div class="statistics-nub" id="divSafeWorkTime" runat="server">00000000000</div>
</div>
<div class="service" style="padding-top:0">
<div class="boxs">
<div class="box">
<p>当前现场人数</p>
<p id="divALLPerson" runat="server">0</p>
</div>
<div class="box">
<p>作业人员总数</p>
<p id="divZYPerson" runat="server">0</p>
</div>
<div class="box">
<p>管理人员总数</p>
<p id="divGLPerson" runat="server">0</p>
</div>
</div>
</div>
</div>
<div class="items" style="height: 21rem;">
<div class="title">预警警报</div>
<div class="predict">
<div class="box">
<div class="box-item">
<img src="../res/images/02/10zzyj.png">
<div class="item-text">
<span style="color: #F24166;" id="divenergyData" runat="server">0</span>
<span style="color: #F24166;">水电监测</span>
</div>
</div>
</div>
<div class="box">
<div class="box-item box-right">
<img src="../res/images/02/10zzyj.png">
<div class="item-text">
<span style="color: #F24166;" runat="server" id="divtowerCraneWarningData">0</span>
<span style="color: #F24166;">塔式起重机预警</span>
</div>
</div>
</div>
<div class="box">
<div class="box-item">
<img src="../res/images/02/10zzyj.png">
<div class="item-text">
<span style="color: #F24166;" runat="server" id="divdeepPitCheckData">0</span>
<span style="color: #F24166;">基坑监测预警</span>
</div>
</div>
</div>
<div class="box">
<div class="box-item box-right">
<img src="../res/images/02/10zzyj.png">
<div class="item-text">
<span style="color: #F24166;" runat="server" id="divcarWashCheckData">0</span>
<span style="color: #F24166;">车辆冲洗监测 &nbsp &nbsp&nbsp&nbsp&nbsp</span>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; justify-content: space-between;">
<div class="items" style="width: 8rem;">
<div class="title" style="font-size: 0.6rem;">安全费用</div>
<div class="content flexCenter margin-left">
<div class="i-item js-hover" data-type="SafeCost">
<div class="i-desc flexCenterV tbMg">
<div class="id-txt">费用提取(元)</div>
<div class="id-num"><%= showData(hSSEData_HSSE.CostExtract, "--") %></div>
</div>
<div class="i-desc flexCenterV">
<div class="id-txt">费用使用(元)</div>
<div class="id-num"><%= showData(hSSEData_HSSE.CostUse, "--") %></div>
</div>
</div>
</div>
</div>
<div class="items" style="width: 8rem;">
<div class="title" style="font-size: 0.6rem;">施工机具设备</div>
<div class="content flexCenter margin-left">
<div class="i-item js-hover" data-type="ConstructionEquipment">
<div class="i-desc flexCenterV tbMg">
<div class="id-txt">在用</div>
<div class="id-num"><%= showData(hSSEData_HSSE.UseEquipmentNum, "--") %></div>
</div>
<div class="i-desc flexCenterV">
<div class="id-txt">特种设备</div>
<div class="id-num"><%= showData(hSSEData_HSSE.SpecialEquipmentNum, "--") %></div>
</div>
</div>
</div>
</div>
<div class="items" style="width: 8rem;">
<div class="title" style="font-size: 0.6rem;">高风险作业许可</div>
<div class="content flexCenter margin-left">
<div class="i-item js-hover" data-type="HighRiskWorkPermit">
<div class="i-desc flexCenterV tbMg">
<div class="id-txt">许可项</div>
<div class="id-num id-num-cl1"><%= showData(hSSEData_HSSE.LicensesNum, "--") %></div>
</div>
<div class="i-desc flexCenterV">
<div class="id-txt">关闭项</div>
<div class="id-num id-num-cl2"><%= showData(hSSEData_HSSE.LicensesCloseNum, "--") %></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="center">
<div class="items1">
<div class="title">项目鸟瞰图</div>
<div class="general">
<div class="general-i">
<ul>
<li>
<p class="label">工程名称:</p>
<p class="val" id="divProjectName" runat="server"></p>
</li>
<li>
<p class="label">工程地点:</p>
<p class="val" id="divProjectAddress" runat="server"></p>
</li>
<li>
<p class="label">工程造价:</p>
<p class="val" id="divProjectMoney" runat="server">万元</p>
</li>
<li>
<p class="label">建设单位:</p>
<p class="val" id="divOwnUnit" runat="server"></p>
</li>
<li>
<p class="label">施工单位:</p>
<p class="val" runat="server" id="divSGUnit"></p>
</li>
<li>
<p class="label"> 监理单位:</p>
<p class="val" id="divJLUnit" runat="server"></p>
</li>
</ul>
</div>
<div class="general-i">
<div class="project" id="divProjectImg">
</div>
</div>
<div class="general-i">
<div class="boxs">
<div class="box">
<div class="box-label">合同总工期</div>
<div class="box-val pact" id="divProjectDays" runat="server">0<span>天</span></div>
</div>
<div class="box">
<div class="box-label">合同到期时间</div>
<div class="box-val time" id="divEndDate" runat="server"></div>
</div>
<div class="box">
<div class="box-label">距竣工剩余</div>
<div class="box-val residue" id="divRemainingDays" runat="server">0<span>天</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="spjc" style="height: 25rem;">
<div class="top">
<div class="top_title" >
<span>安全云监控</span>
</div>
</div>
<%-- <img src="../res/assets/image/video.jpg" alt="">--%>
<live-player id="player01" live="true" aspect="16:12"></live-player>
<div class="bottom">
<div class="bottom_info">
<div class="bottom_left"> 实时视频 </div>
<div class="bottom_right"> <span id='more'>更多</span></div>
</div>
</div>
<div class="quality" style="display: none;">
<div class="boxs">
<div class="boxs-label"><span>问题总数</span><span
style="color:#00FFFF;" id="divCQMSAllNum" runat="server">0</span><span>个</span></div>
<div id="issueMap"></div>
</div>
<div class="boxs">
<div class="boxs-label"><span>已完成</span><span style="color:#15EDBB;" id="divCQMSCAllNum" runat="server">0</span><span>个</span>
</div>
<div id="finishMap"></div>
</div>
<div class="boxs">
<div class="boxs-label"><span>未完成</span><span style="color:#F24166;" id="divCQMSUCAllNum" runat="server">0</span><span>个</span>
</div>
<div id="unfinishedMap"></div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between" >
<div class="items" style='width:13rem !important' id="divIPersonNum">
<div class="title" id="divDesignNum" style="font-size: 0.6rem;">风险分级动态管控</div>
<div class="plan" style='display:none'>
<div class="zlpxsj-wrap">
<div class="zlpxsj">
<div class="left">
<div class="num" id="divIPersonNum" runat="server">0</div>
<div class="desc">质量培训人次数</div>
</div>
<div class="right">
<div class="num" id="divDesignNum" runat="server">0</div>
<div class="desc">技术交底人次数</div>
</div>
</div>
</div>
</div>
<%--<div class="sgsjsj">
<div class="sg-top">
<div class="sg-top-item">
<div>未遂</div>
<div class="num">
0
</div>
</div>
<div class="sg-top-item">
<div>可记录</div>
<div class="num">
0
</div>
</div>
</div>
<div id="sgsjsj" class="sg-chart"></div>
</div>--%>
<div class="risk">
<div id="riskMap"></div>
</div>
</div>
<div class="items" style='width:15rem !important' >
<div class="title" style="font-size: 0.6rem;">危大/超危大数据</div>
<div class="plan" style='display:none'>
<div class="sbrc-item">
<div class="sbrci-bigTit">
<div class="sbig-left">
<div class="first">焊工</div>
<div>总数</div>
</div>
<div class="sbig-right" id="divHjPersonNum" runat="server">0</div>
</div>
<div class="sbrci-list">
<div class="item">
<div class="item-c">
<div class="num" id="divTotalDineNum" runat="server">0</div>
<div class="desc">总达因数</div>
</div>
</div>
<div class="item">
<div class="item-c">
<div class="num" id="divCompleteDineNum" runat="server">0</div>
<div class="desc">完成达因数</div>
</div>
</div>
<div class="item">
<div class="item-c">
<div class="num" id="divTotalFilmNum" runat="server">0</div>
<div class="desc">总片数</div>
</div>
</div>
<div class="item">
<div class="item-c">
<div class="num" id="divOkFilmNum" runat="server">0</div>
<div class="desc">合格片数</div>
</div>
</div>
</div>
</div>
</div>
<div class="tit">
<div class="txt tab-wrap">
<div></div>
<div class="tab">
<div class="active" data-type="large">危大工程</div>
<div data-type="super">超危大工程</div>
</div>
</div>
</div>
<div class="content flexCenter">
<div class="wdgcsj">
<div class="item js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<div class="item-inner leftPos">
<div class="desc mgbS">未开始个数</div>
<div id="pro_static_1" class="num">
<%= showData(hSSEData_HSSE.CompletedNum, "--" ) %>
</div>
</div>
</div>
<div class="item js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<div class="item-inner rightPos">
<div class="desc mgbS">培训人次数</div>
<div id="pro_static_2" class="num">
<%= showData(hSSEData_HSSE.TrainPersonNum, "--" ) %>
</div>
</div>
</div>
<div class="item js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<div class="item-inner leftPos">
<div id="pro_static_3" class="num mgbS numC1">
<%= showData(hSSEData_HSSE.ConstructionNum, "--" ) %>
</div>
<div class="desc">施工个数</div>
</div>
</div>
<div class="item js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<div class="item-inner rightPos">
<div id="pro_static_4" class="num mgbS numC2">
<%= showData(hSSEData_HSSE.FinishedNum, "--" ) %>
</div>
<div class="desc">完工个数</div>
</div>
</div>
</div>
</div>
</div>
<div class="items" style='width:14rem !important'>
<div class="title" style="font-size: 0.6rem;">应急管理数据</div>
<div class="tit">
<div class="txt tab-wrap">
<div></div>
<div class="tab">
<%--<div data-type="large">企业级</div>--%>
<div class="active" data-type="super">项目级</div>
</div>
</div>
</div>
<div class="content flexCenter">
<div class="yjglsj">
<div class="item js-hover" data-type="yjglsj" data-tabType="yjglsj">
<div class="item-inner flexCenterV">
<div id="yj_num_1" class="num">
<%= showData(hSSEData_HSSE.ProjectComprehensivePlanNum, "--" ) %>
</div>
<div class="desc">综合预案</div>
</div>
</div>
<div class="item js-hover" data-type="yjglsj" data-tabType="yjglsj">
<div class="item-inner flexCenterV">
<div id="yj_num_2" class="num">
<%= showData(hSSEData_HSSE.ProjectSpecialPlanNum, "--" ) %>
</div>
<div class="desc">专项预案</div>
</div>
</div>
<div class="item js-hover" data-type="yjglsj" data-tabType="yjglsj">
<div class="item-inner flexCenterV">
<div id="yj_num_3" class="num">
<%= showData(hSSEData_HSSE.ProjectOnSiteDisposalPlan, "--" ) %>
</div>
<div class="desc">现场处置预案</div>
</div>
</div>
<div class="item js-hover" data-type="yjglsj" data-tabType="yjglsj">
<div class="item-inner flexCenterV">
<div id="yj_num_4" class="num">
<%= showData(hSSEData_HSSE.ProjectDrillNum, "--" ) %>
</div>
<div class="desc">演练次数</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="items">
<div class="title">安全/质量检查</div>
<div class="tit">
<div class="txt tab-wrap">
<div></div>
<div class="tab">
<div class="active" data-type="large">安全</div>
<div data-type="super">质量</div>
</div>
</div>
</div>
<div class="statistics">
<div class="boxs">
<div class="box">
<span style="color:#00FFFF;" runat="server" id="divAllRectify">0</span>
<img src="../res/images/02/07aqtj01.png">
<span>总数(次)</span>
</div>
<div class="box">
<span style="color:#15EDBB;" runat="server" id="divCRectify">0</span>
<img src="../res/images/02/08aqtj02.png">
<span>已闭合(次)</span>
</div>
<div class="box">
<span style="color:#F24166;" runat="server" id="divUCRectify">0</span>
<img src="../res/images/02/09aqtj03.png">
<span>未闭合(次)</span>
</div>
</div>
</div>
</div>
<div class="items stl-bottom bg js-hover" style="height: 22.5rem;" data-type="NoticeData">
<div class="title">通知公告</div>
<div class="new_table">
<div class="new_thead">
<div class="th time">
时间
</div>
<div class="th content">
内容
</div>
</div>
<div class="new_tbody " id="wrapper">
<%-- <div class="tr " id='list' > <div class='list '>
<span class="time">
2024-5-25
</span> <span class="content">
领导督查年化肥项目原水等装置土建分包工程项目
</span> </div> </div>--%>
<%=notice %>
</div>
</div>
</div>
<div class="items" style="height: 15.5rem;">
<div class="title">环境监测</div>
<div class="env">
<div class="boxs">
<div class="box-column">
<div class="box">
<div class="left">
<p>温度<span>℃</span></p>
<img src="../res/images/02/37.png">
</div>
<div class="num" style="color: #CFC782;" id="divTemp" runat="server">0</div>
</div>
<div class="box">
<div class="left">
<p>噪音<span>db</span></p>
<img src="../res/images/02/40.png">
</div>
<div class="num" style="color: #CFC782;margin-left:0;" id="divNoise" runat="server">0</div>
</div>
<div class="box">
<div class="left">
<p>湿度<span>%rh</span></p>
<img src="../res/images/02/38.png">
</div>
<div class="num" style="color: #CFC782;" id="divHumid" runat="server">0</div>
</div>
</div>
<div class="env_center">
<img width="46px" height="46px" src="../res/images/02/35pm10.png">
<p id="divTemp2" runat="server"><span>℃</span></p>
<p class="d" runat="server" id="divInfo">多云</p>
</div>
<div class="box-column box-column1">
<div class="box">
<div class="num" style="color: #CFC782;" id="divPmTwoPointFive" runat="server">0</div>
<div class="left">
<p>PM2.5<span></span></p>
<img src="../res/images/02/39.png">
</div>
</div>
<div class="box">
<div class="num" style="color: #CFC782;margin-right:0;" id="divWindSpeed" runat="server">0</div>
<div class="left">
<p>风速<span>km/h</span></p>
<img src="../res/images/02/41.png">
</div>
</div>
<div class="box">
<div class="num" style="color: #CFC782;" id="divPmTen" runat="server">0</div>
<div class="left">
<p>PM10<span></span></p>
<img src="../res/images/02/42.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hover-wrap">
<div class="hover-item">
</div>
</div>
</body>
</html>
<script src="../res/lib/echarts.min.js"></script>
<script src="../res/lib/china.js"></script>
<script src="../res/js/optionV2.js"></script>
<script src="../res/lib/jquery.js"></script>
<script src="../res/liveplayer/liveplayer-element.min.js"></script>
<script src="../res/assets/js/video-7.15.0.min.js"></script>
<script src="../res/assets/js/jquery-3.7.1.min.js"></script>
<script src="../res/assets/js/jquery.mousewheel.min.js"></script>
<script src="../res/assets/js/hScrollPane.js"></script>
<script src="../res/assets/js/echarts-5.2.0.min.js"></script>
<script src="../res/assets/js/china.js"></script>
<script>
// var mySwiper = new Swiper('.swiper', {
// direction: 'vertical', // 垂直切换选项
// loop: true, // 循环模式选项
// loopPreventsSlide: true,//当swiper 正在过渡时阻止slide 前进后退的切换操作
// observer: true,
// observeParents: true,
// slidesPerView: 5, //swiper容器同时展示的元素数量
// spaceBetween: 20, //元素之间间隔距离
// speed: 2000, //slider自动滑动开始到结束的时间
// autoplay: {//开启自动切换
// delay: 0,//自动切换的时间间隔
// stopOnLastSlide: false,//当切换到最后一个slide时停止自动切换
// disableOnInteraction: false,//用户操作swiper之后是否停止自动切换效果
// },
// })
var videoURL = '<%= VideoHost %>';
let more = document.getElementById('more')
more.addEventListener("click", function () {
// 在点击事件中执行的代码
if (videoURL) {
//var username = $('#SimpleForm1_hfProjectCode-inputEl').val()
//var password = $('#SimpleForm1_hfMonitorPW-inputEl').val();
console.log(videoURL);
debugger
window.open(videoURL + "#/screen?username=" + '<%= VideoUserName %>' + "&password=" + '<%= VideoPassWord %>', '_blank');
}
else {
alert("您没有权限!");
}
});
// // 人员统计 在岗率初始化
// var guardMap = echarts.init(document.getElementById('onGuardMap'));
// guardMap.setOption(guardOption)
// 风险分级
let riskData1 = [
{ value: <%=riskData4%>, name: '四级/重大风险', label: { color: '#FF7473' }, itemStyle: { color: '#FF7473' }, labelLine: { lineStyle: { color: '#FF7473' } } },
{ value: <%=riskData1%>, name: '一级/低风险', label: { color: '#5C5AFF' }, itemStyle: { color: '#5C5AFF' }, labelLine: { lineStyle: { color: '#5C5AFF' } } },
{ value: <%=riskData2%>, name: '三级/较大风险', label: { color: '#FFA502' }, itemStyle: { color: '#FFA502' }, labelLine: { lineStyle: { color: '#FFA502' } } },
{ value: <%=riskData3%>, name: '二级/一般风险', label: { color: '#E7EA2E' }, itemStyle: { color: '#E7EA2E' }, labelLine: { lineStyle: { color: '#E7EA2E' } } },
]
let riskOption1 = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['20%', '60%'],
center: ['50%', '50%'],
label: {
formatter: '{b}\n{c}'
},
data: riskData1.sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
var riskMap = echarts.init(document.getElementById('riskMap'));
riskMap.setOption(riskOption1)
// 劳务数据
// X轴数据
var laborId_xAxisData = JSON.parse('<%=WorkPostS %>')
var laborId_data1 = JSON.parse('<%=InPostCounts %>')
var laborId_data2 = JSON.parse('<%=InDutyCounts %>')
// Y轴数据
var laborId_series = [{
name: '在岗',
type: 'bar',
barWidth: 26,
data: laborId_data1,
},
{
name: '在场',
type: 'bar',
barWidth: 26,
data: laborId_data2,
barGap: '-100%',
}]
var option = {
color: ['#d0f5ec', '#12cda2'],
grid: {
top: '10%',
left: '0%',
right: '0%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
showDelay: 0,
axisPointer: {
type: 'shadow'
}
},
xAxis: {
data: laborId_xAxisData,
axisLabel: {
interval: 0,
color: '#179eb3',
},
axisTick: {
show: false,
},
axisLine: {
onZero: true,
lineStyle: {
color: '#179eb3',
width: 1,
}
},
boundaryGap: true
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
color: '#179eb3',
},
axisTick: {
show: false,
},
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#179eb3',
width: 1,
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#0D3C65',
},
},
splitNumber: 5,
},
series: laborId_series
};
if (laborId_xAxisData.length > 5) {
option.dataZoom = [{
type: 'slider',
show: true,
startValue: 0,
endValue: 4,
height: '3',
backgroundColor: 'rgba(47,69,84,0)',
fillerColor: 'rgba(47,69,84,0)',
bottom: '0%',
zoomLock: true,
moveOnMouseWheel: true,
brushSelect: true,
showDetail: false,
}]
}
// var safeMap = echarts.init(document.getElementById('serviceMap'));
//option && safeMap.setOption(option)
// var riskMap = echarts.init(document.getElementById('riskMap'));
// riskMap.setOption(riskOption)
let issueData1 = [
{
value: <%=CRectificationRate%>
}
];
let issueOption1 = {
title: {
text: '整改率',
textStyle: {
color: '#FFA600 ',
fontSize: 0.7368 * basePx,
},
bottom: 0,
left: 'center'
},
series: [
{
type: 'gauge',
startAngle: 225,
endAngle: -45,
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
lineStyle: {
}
},
pointer: { // 时针
show: false
},
splitLine: {
show: false,
distance: 0,
length: 0.5263 * basePx
},
axisLine: {
roundCap: false,
lineStyle: {
width: 0.8421 * basePx,
color: [[1, '#0E3668']]
}
},
axisTick: { // 刻度
show: false
},
axisLabel: {
show: false,
distance: 2.6316 * basePx,
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#EB9002' },
{ offset: 1, color: '#404745' }
]),
},
title: {
show: true,
offsetCenter: [0, '75%'],
width: 1.5789 * basePx,
height: 0.2632 * basePx,
borderRadius: 0.1053 * basePx,
shadowBlur: 0.1579 * basePx,
shadowColor: '#C88621',
backgroundColor: '#C88621',
},
detail: {
fontSize: 1.5789 * basePx,
color: '#B78021',
formatter: '{value}{a|%}',
offsetCenter: [0, 0],
rich: {
a: {
fontSize: 0.8421 * basePx,
color: '#B78021'
}
}
},
data: issueData1
}
]
};
// var issueMap = echarts.init(document.getElementById('issueMap'));
// issueMap.setOption(issueOption1)
let finishData1 = [
{
value: <%=CQualifiedRate%>
}
];
let finishOption1 = {
title: {
text: '合格率',
textStyle: {
color: '#15EDBB ',
fontSize: 0.7368 * basePx,
},
bottom: 0,
left: 'center'
},
series: [
{
type: 'gauge',
startAngle: 225,
endAngle: -45,
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
lineStyle: {
}
},
pointer: { // 时针
show: false
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisLine: {
roundCap: false,
lineStyle: {
width: 0.8421 * basePx,
color: [[1, '#0E3668']]
}
},
axisTick: { // 刻度
show: false
},
axisLabel: {
show: false,
distance: 2.6316 * basePx,
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#01D4D4' },
{ offset: 1, color: '#026974' }
]),
},
title: {
show: true,
offsetCenter: [0, '75%'],
width: 1.5789 * basePx,
height: 0.2632 * basePx,
borderRadius: 0.1053 * basePx,
shadowBlur: 0.1579 * basePx,
shadowColor: '#15EDBB ',
backgroundColor: '#15EDBB ',
},
detail: {
fontSize: 1.5789 * basePx,
color: '#15EDBB ',
formatter: '{value}{a|%}',
offsetCenter: [0, 0],
rich: {
a: {
fontSize: 0.8421 * basePx,
color: '#15EDBB '
}
}
},
data: finishData1
}
]
};
// var finishMap = echarts.init(document.getElementById('finishMap'));
// finishMap.setOption(finishOption1)
let unfinishedData1 = [
{
value: <%=FirstPassRate%>
}
];
let unfinishedOption1 = {
title: {
text: '焊接一次合格率',
textStyle: {
color: '#15EDBB ',
fontSize: 0.7368 * basePx,
},
bottom: 0,
left: 'center'
},
series: [
{
type: 'gauge',
startAngle: 225,
endAngle: -45,
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
lineStyle: {
}
},
pointer: { // 时针
show: false
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisLine: {
roundCap: false,
lineStyle: {
width: 0.8421 * basePx,
color: [[1, '#0E3668']]
}
},
axisTick: { // 刻度
show: false
},
axisLabel: {
show: false,
distance: 2.6316 * basePx,
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#01D4D4' },
{ offset: 1, color: '#026974' }
]),
},
title: {
show: true,
offsetCenter: [0, '75%'],
width: 1.5789 * basePx,
height: 0.2632 * basePx,
borderRadius: 0.1053 * basePx,
shadowBlur: 0.1579 * basePx,
shadowColor: '#15EDBB ',
backgroundColor: '#15EDBB ',
},
detail: {
fontSize: 1.5789 * basePx,
color: '#15EDBB ',
formatter: '{value}{a|%}',
offsetCenter: [0, 0],
rich: {
a: {
fontSize: 0.8421 * basePx,
color: '#15EDBB '
}
}
},
data: unfinishedData1
}
]
};
// var unfinishedMap = echarts.init(document.getElementById('unfinishedMap'));
// unfinishedMap.setOption(unfinishedOption1)
</script>
<script>
function initTab() {
$(document).on('click', '.tab > div', function () {
var $this = $(this)
if ($this.hasClass('active')) {
return
}
var $tab = $this.closest('.tab')
$tab.find('div').removeClass('active')
$this.addClass('active')
debugger
if ($this.html() === '企业级') {
$('#yj_num_1').html('<%= showData(hSSEData_HSSE.CompanyComprehensivePlanNum, "--") %>');
$('#yj_num_2').html('<%= showData(hSSEData_HSSE.CompanySpecialPlanNum, "--") %>');
$('#yj_num_3').html('<%= showData(hSSEData_HSSE.CompanyOnSiteDisposalPlan, "--") %>');
$('#yj_num_4').html('<%= showData(hSSEData_HSSE.CompanyDrillNum, "--") %>');
} else if ($this.html() === '项目级') {
$('#yj_num_1').html('<%= showData(hSSEData_HSSE.ProjectComprehensivePlanNum, "--") %>');
$('#yj_num_2').html('<%= showData(hSSEData_HSSE.ProjectSpecialPlanNum, "--") %>');
$('#yj_num_3').html('<%= showData(hSSEData_HSSE.ProjectOnSiteDisposalPlan, "--") %>');
$('#yj_num_4').html('<%= showData(hSSEData_HSSE.ProjectDrillNum, "--") %>');
} else if ($this.html() === '危大工程') {
$('#pro_static_1').html('<%= showData(hSSEData_HSSE.CompletedNum, "--") %>');
$('#pro_static_2').html('<%= showData(hSSEData_HSSE.TrainPersonNum, "--") %>');
$('#pro_static_3').html('<%= showData(hSSEData_HSSE.ConstructionNum, "--") %>');
$('#pro_static_4').html('<%= showData(hSSEData_HSSE.FinishedNum, "--") %>');
} else if ($this.html() === '超危大工程') {
$('#pro_static_1').html('<%= showData(hSSEData_HSSE.SuperCompletedNum, "--") %>');
$('#pro_static_2').html('<%= showData(hSSEData_HSSE.SuperTrainPersonNum, "--") %>');
$('#pro_static_3').html('<%= showData(hSSEData_HSSE.SuperConstructionNum, "--") %>');
$('#pro_static_4').html('<%= showData(hSSEData_HSSE.SuperFinishedNum, "--") %>');
}
})
}
function GetClickHtml(obj) {
console.log(type)
var $this = $(obj), type = $this.attr('data-type'), tabType = $this.attr('data-tabType') || '';
var title = '';
if (tabType != '') {
tabType = $this.closest('.bb-item').find('.tab-wrap .tab .active').attr('data-type')
if (tabType == null) {
tabType = $this.closest('.str-bottom').find('.tab-wrap .tab .active').attr('data-type')
}
}
console.log(type)
if (type == 'NoticeData') {
$('iframe').attr('src', '../Notice/NoIssuedNotice.aspx') //安全会议数据
window.open("../Notice/NoIssuedNotice.aspx")
//Notice/NoIssuedNotice.aspx
}/*
else if (type == 'Video') {
$('iframe').attr('src', '../InterfacePopup/HSSE/VideoView.aspx') //视频监控
}*/
else {
// $('iframe').attr('src', '../SysManage/Unit.aspx')
// window.open("../DataShow/Unit.aspx")
console.log("通用")
}
}
function initClick() {
// 设置iframe高度
$('.click-wrap .click-item iframe').height($('.click-wrap').height())
$(".js-hover").click(function () {
console.log("通用")
var htmlContent = GetClickHtml(this)
// $('.click-wrap').show()
// $(".hover-wrap").hide()
})
$('.click-close').click(function () {
$('.click-wrap').hide()
})
}
$(function () {
var datasg = [
{ value: 10, name: '一般事故' },
{ value: 5, name: '较大事故' },
{ value: 5, name: '重大事故' },
{ value: 4, name: '特别重大' },
]
//initSgsjsj('sgsjsj', datasg)
})
// 获取url请求参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
// 切换全屏
$('.magnify').click(function () {
const element = document.documentElement
if (document.fullscreenElement) {
// 如果浏览器有这个Function
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else {
// 如果浏览器有这个Function
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
}
})
// 监听全屏变化
window.onresize = function () {
if (document.fullscreenElement) {
$('.nav-center').hide();
$('.magnify').text('退出全屏');
} else {
$('.nav-center').show();
$('.magnify').text('全屏');
}
}
// 选择项目
$('.selected').click(function () {
$('.selectedVal').toggle();
})
$('.selectedVal>li').click(function () {
$('.selected>span').text($('.selectedVal>li').text()).attr('title', $('.selectedVal>li').text());
})
var divProjectImg = '<%=divProjectImg %>'
function getUnitValues() {
$("#divProjectImg").css("background", "url('" + divProjectImg + "') center/100% 100% no-repeat ");
}
getUnitValues();
function initSgsjsj(id, data) {
var chartDom = document.getElementById(id);
var myChartSg = echarts.init(chartDom);
var option;
option = {
legend: {
show: false,
top: 'bottom'
},
tooltip: {
trigger: 'item',
formatter: '{a}<br />{b}<span style="color:#000;font-weight:bold;margin-left:15px;">{c}</span>'
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
color: ['#595AFF', '#E9E931', '#FFA602', '#FF7474'],
series: [
{
name: '事故事件数据',
type: 'pie',
radius: [30, 55],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 0
},
data: data,
label: {
color: '#fff',
// formatter: '{b}\n{c}',
formatter: function (data) {
if (data.dataIndex == 0) {
return '{name1|' + data.data.name + '}\n{time|' + data.data.value + '}';
} else if (data.dataIndex == 1) {
return '{name2|' + data.data.name + '}\n{time|' + data.data.value + '}';
} else if (data.dataIndex == 2) {
return '{name3|' + data.data.name + '}\n{time|' + data.data.value + '}';
} else if (data.dataIndex == 3) {
return '{name4|' + data.data.name + '}\n{time|' + data.data.value + '}';
}
},
rich: {
name1: {
color: '#595AFF',
fontSize: 10
},
name2: {
color: '#E9E931',
fontSize: 10
},
name3: {
color: '#FFA602',
fontSize: 10
},
name4: {
color: '#FF7474',
fontSize: 10
},
time: {
color: '#ffffff',
fontSize: 12
}
},
},
labelLine: {
length: 10,
length2: 0,
maxSurfaceAngle: 50
},
}
]
};
option && myChartSg.setOption(option);
window.addEventListener("resize", function () {
myChartSg.resize();
});
}
var videoids = [];
var videoIndex = 0;
var authToken = '';
var videoHost = '<%= VideoHost %>';
function runShowVideo() {
if (videoids.length <= 0) {
setTimeout(function () {
runShowVideo();
}, 5000);
} else if (videoIndex < videoids.length) {
$.get(videoHost + 'api/v1/stream/start?serial=' + videoids[videoIndex].split(':')[0] + '&code=' + videoids[videoIndex].split(':')[1] + '&token=' + authToken, function (data4) {
console.log(data4.HLS)
videoIndex++;
var player = document.getElementById('player01');
player.setAttribute("video-url", data4.HLS);
setTimeout(function () {
runShowVideo();
}, 500000);
}, 'json');
}
}
function initVideo() {
$.get(videoHost + 'api/v1/login?username=<%= VideoUserName %>&password=<%= VideoPassWord %>', function (data1) {
authToken = data1.AuthToken;
$.get(videoHost + 'api/v1/device/channeltree?token=' + authToken, function (data2) {
for (var i = 0; i < data2.length && i <= 0; i++) {
$.get(videoHost + 'api/v1/device/channeltree?serial=' + data2[i].serial + '&token=' + authToken, function (data3) {
for (var j = 0; j < data3.length && j <= 0; j++) {
videoids.push(data3[j].id);
}
}, 'json');
}
}, 'json');
}, 'json');
}
initVideo();
runShowVideo();
initTab();
initClick();
</script>