SGGL_HBAZ/SGGL/FineUIPro.Web/common/mainProjectSY.aspx

597 lines
24 KiB
Plaintext
Raw Normal View History

2025-02-12 09:27:47 +08:00
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProjectSY.aspx.cs" Inherits="FineUIPro.Web.common.mainProjectSY" %>
<!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/basessy.css?v1">
<link rel="stylesheet" href="../res/css/indexsy.css">
<link href="../res/indexv2/assets/css/swiper.min.css" rel="stylesheet" />
<style>
.swiper-container-img {
width: 100%;
height: 100%;
}
.swiper-container-img .swiper-slide {
text-align: center;
font-size: 18px;
/*background: #000;*/
}
.swiper-container-img .swiper-slide img {
/*图片的宽高自动可以设置100%撑满*/
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
}
.swiper-container-img .swiper-slide .title {
font-size: 16px;
font-weight: 300;
position: relative;
z-index: 99;
color: #0B508B;
text-align: left;
text-indent: 45px;
}
.swiper-container-img .swiper-slide {
width: 100%;
}
.swiper {
--swiper-theme-color: #4169E1; /* 设置Swiper风格 */
--swiper-navigation-color: #4169E1; /* 单独设置按钮颜色 */
--swiper-navigation-size: 30px; /* 设置按钮大小 */
}
</style>
</head>
<body>
<script>
let basePx = window.innerWidth / 100;
document.documentElement.style.fontSize = basePx + 'px';
</script>
<div id="wrap" class="baseImg">
<div class="container">
<div class="site side" style="width: 27.0833rem">
<div class="block">
<div class="blockTitle">风险管控</div>
<div class="block-container fengxian">
<div class="aq">
<div class="label">安全人工时</div>
<div id="divSafeWorkinghours" class="val" runat="server"> </div>
</div>
<div class="chl" style="height:80px">
<div class="label">企业承诺</div>
<div class="scroll" id="divlPromise">
<ul id="ulPromise" runat="server" class="ul" style="height:60px;overflow:hidden">
</ul>
</div>
</div>
<div class="chl" style="height: calc(100% - 6.25rem)">
<div class="label"> </div>
<div class="box">
<div class="boxNUm">
<div class="dot">
<div class="dot-tit" id="sInstalTotal" runat="server" >生产装置11套</div>
<div class="dot-val">
<div class="val"><span id="sInstalRun" runat="server" style="color: #12CDA2;"></span><span>运行</span></div>
<div class="val"><span id="sInstalStop" runat="server" style="color: #FF5368;"></span><span>停产</span></div>
<div class="val"><span id="sInstalOverHaul" runat="server" style="color: #F6A944;"></span><span>检修</span></div>
</div>
</div>
<div class="dot">
<div class="dot-tit">特殊作业</div>
<div class="dot-val">
<div class="val"><span id="slnum1" runat="server" style="color: #66FAFF;"></span><span>特级<br/>动火</span></div>
<div class="val"><span id="slnum2" runat="server" style="color: #66FAFF;"></span><span>一级<br/>动火</span></div>
<div class="val"><span id="slnum3" runat="server" style="color: #66FAFF;"></span><span>二级<br> 动火</span></div>
<div class="val"><span id="slnum4" runat="server" style="color: #66FAFF;"></span><span>受限<br>空间</span></div>
</div>
</div>
</div>
<div class="mapbox" >
<div id="riskMap"></div>
</div>
</div>
</div>
</div>
<!-- <div class="block-container" id="riskMap">
</div> -->
</div>
<div class="block">
<div class="blockTitle">重大危险源</div>
<div class="subTitle" index="0" onclick="openVideo()"></div>
<div class="wd-container">
<div class="scroll">
<ul id="ulMajorHazardHtml" class="ul">
<%= majorHazardHtml %>
</ul>
</div>
</div>
</div>
</div>
<div class="site center-site" style="width: 41.6667rem">
<div class="zaijian">
<div class="row">
<div class="label">在建</div>
<div id="divBuild" runat="server" class="val" style="color: #66FAFF;">0</div>
</div>
<div class="row">
<div class="label">在役</div>
<div id="divRun" class="val" runat="server" style ="color: #7FB9FF;">0</div>
</div>
</div>
<div id="chinaMap">
</div>
<div class="center-bottom block">
<div class="blockTitle"></div>
<div class="imgbox">
<div class="swiper-container swiper-container-img" id="swiperImg" >
<div class="swiper-wrapper">
<%= swiperHtml1 %>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
</div>
</div>
</div>
<div class="site side" style="width: 27.0833rem">
<div class="block">
<div class="blockTitle">隐患排查</div>
<div class="block-container" id="hiddenDanger">
</div>
</div>
<div class="block">
<div class="blockTitle">环保数据</div>
<div class="subTitle hb" index="1" onclick="openVideo()"></div>
<div class="wd-container">
<div class="scroll">
<ul id="ulEnvironmentHtml" class="ul1">
<%= environmentHtml %>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<form runat=server>
<asp:HiddenField runat="server" ID="hfProjectCode" ></asp:HiddenField>
<asp:HiddenField runat="server" ID="hfMonitorPW" ></asp:HiddenField>
</form>
<script src="../res/lib/jquery.js"></script>
<script src="../res/lib/china.js"></script>
<script src="../res/lib/echarts.min.js"></script>
<script src="../res/js/indexSY.js"></script>
<script type="text/javascript" src="../res/indexv2/assets/js/swiper.min.js"></script>
<script>
// 隐患排查
let hiddenDangerOption = {
legend: {
data: [{
name: '近一周总数',
textStyle: {
color: '#2F6FBE'
}
}, {
name: '近一周整改数',
textStyle: {
color: '#12CDA2'
}
}],
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['一般', '重大', '人', '物', '管理',],
axisTick: {
show: false
},
axisLine: {
lineStyle: {
// type: 'dashed',
color: '#1A95C6'
}
},
axisLabel: {
color: '#ffffff',
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
color: '#1A95C6',
},
splitLine: {
lineStyle: {
// type: 'dashed',
color: '#0A3760'
}
}
},
],
series: [
{
name: '近一周总数',
type: 'bar',
barWidth: '20',
itemStyle: {
color: '#4E7FE3',
},
data: [<%=dangetoday%>]
},
{
name: '近一周整改数',
type: 'bar',
barWidth: '20',
itemStyle: {
color: '#12CDA2',
},
data: [<%=dangetodayFinish%>]
}
]
};
// 地图
let chinaData = [<%=mapData%>]
let chinaOption = {
tooltip: { show: false, },
geo: [
{
// 地理坐标系组件
map: "china",
roam: true, // 可以缩放和平移
aspectScale: 0.75, // 比例
// top: 7.8125 * basePx,
top: 10.4167 * basePx,
zlevel: 10,
zoom: 1.5,
tooltip: {
show: true,
backgroundColor: 'none',
borderColor: 'rgba(7,166,255,0.76)',
padding: 0,
formatter: function (h) {
let data = h.data;
let name = data.name;
let PeopleNum = data.value[2].PeopleNum;
let SafePeopleNum = data.value[2].SafePeopleNum;
let RawMaterial = data.value[2].RawMaterial;
let Product = data.value[2].Product;
let deviceNum = data.value[2].deviceNum;
let MajorHazard = data.value[2].MajorHazard;
let str = `<div class="item3 baseImg">
<div class="item3-title">
<p>项目名称: ${name}</p>
</div>
<div class="main">
<div class="boxs">
<div class="box">
<div class="label">人员数量</div>
<div class="val" > ${PeopleNum}</div>
</div>
<div class="box">
<div class="label">安全人员</div>
<div class="val"> ${SafePeopleNum}</div>
</div>
<div class="box">
<div class="label">主要原料</div>
<div class="val"> ${RawMaterial}</div>
</div>
<div class="box">
<div class="label">主要产品</div>
<div class="val"> ${Product}</div>
</div>
<div class="box">
<div class="label">重大危险源数量</div>
<div class="val"> ${MajorHazard}</div>
</div>
</div>
</div>
</div>
</div>`
return str
},
},
regions: [
],
itemStyle: {
// 图形上的地图区域
normal: {
borderWidth: 0.1053 * basePx,
areaColor: "#214DA9",
borderColor: "#2FA1D7",
// shadowBlur: 20,
// shadowOffsetY:10,
// shadowOffsetX:10,
}
},
label: {
show: true,
color: '#ffffff',
},
emphasis: {
disabled: true,
itemStyle: {
areaColor: 'red',
}
}
},
],
series: [{
id: 'isSkip',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 1.0526 * basePx,
zlevel: 100,
selectedMode: true,
select: {
disabled: true,
label: true,
},
itemStyle: {
color: "#FDFF04"
},
rippleEffect: {
},
data: chinaData,
}],
}
// 地图
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('chinaMap'));
chart.setOption(chinaOption);
chart.on('click', (params) => {
if (params.componentType == 'series') {
console.log(params)
}
})
// 风险管控
let riskData = [
{ value: <%=risk1%>, name: '四级/低', label: { color: '#28B4F2' }, itemStyle: { color: '#28B4F2' }, labelLine: { lineStyle: { color: '#28B4F2' } } },
{ value: <%=risk2%>, name: '一级/重大', label: { color: '#DF263D' }, itemStyle: { color: '#DF263D' }, labelLine: { lineStyle: { color: '#DF263D' } } },
{ value: <%=risk3%>, name: '三级/一般', label: { color: '#FFFF26' }, itemStyle: { color: '#FFFF26' }, labelLine: { lineStyle: { color: '#FFFF26' } } },
{ value: <%=risk4%>, name: '二级/较大', label: { color: '#F6A944' }, itemStyle: { color: '#F6A944' }, labelLine: { lineStyle: { color: '#F6A944' } } },
]
let riskOption = {
tooltip: {
show: false
},
series: [
{
type: 'pie',
radius: ['30%', '45%'],
label: {
show: true,
},
hoverAnimation: false,
labelLine: {
show: true
},
label: {
show: true,
// formatter: ['{b}','{c}'].join('\n'),
formatter: h => {
return
},
overflow: 'none',
padding: [0, -30, 20, -30]
},
labelLine: {
show: false
},
data: riskData
}
]
};
var riskMap = echarts.init(document.getElementById('riskMap'));
riskMap.setOption(riskOption)
var hiddenDangerMap = echarts.init(document.getElementById('hiddenDanger'));
hiddenDangerMap.setOption(hiddenDangerOption)
</script>
<script>
$(document).ready(function () {
//let zdTimer = setInterval(function () {
// console.log($('.ul1').children().length)
// if ($('.ul1').children().length <= 7) {
// clearInterval(zdTimer)
// }
// // $('.ul').find(":first-child").remove()
// let html = `<li>重大危险源(1111),文字列表信息,滚动文字。内容文字内容文字内容文字文字…</li>`
// $('.ul').append(html)
// $('.ul').find(":first-child").remove()
//}, 6000)
//setInterval(function () {
// console.log(1111)
// // $('.ul').find(":first-child").remove()
// let html = `<li>重大危险源(1111),文字列表信息,滚动文字。内容文字内容文字内容文字文字…</li>`
// $('.ul1').append(html)
// $('.ul1').find(":first-child").remove()
//}, 6000)
$('.nav>span').click(function () {
$('.nav>span').removeClass('navActive')
$(this).addClass('navActive')
console.log($(this).attr('index')) // 0 施工安全 1 质量焊接 2 施工安全 3质量焊接
})
$('.subTitle').click(function () {
console.log($(this).attr('index')) // 0 视频监控 1 环保监控
})
var widthImg = $(".swiper-container-img").width();
$(".swiper-container-img").css("width", widthImg + 'px')
var swiper = new Swiper('#swiperImg', {
slidesPerView: 'auto',
spaceBetween: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
bulletElement: 'li',
clickable: true,
},
lazy: {
loadPrevNext: true,
loadPrevNextAmount: 2,
loadOnTransitionStart: true,
},
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
speed: 1500,
// autoHeight:true,
});
})
statr = () => { //创造一个循环方法函数
let first = $('#ulPromise li:first'), //获取列表第一个li
firstLi = first.clone(); //复制第一个li
$('#ulPromise li').eq(0).animate({ //列表第一个添加动画,
marginTop: '-=15px',
opacity: '1'
}, 2000)
setTimeout(function () {
$('#ulPromise li').eq(0).animate({//列表第二个添加动画,
marginTop: '-=15px',
opacity: '0'
}, 2000);
setTimeout(function () {//动画结束后删除第一个li
first.remove();
}, 2000)
$('#ulPromise').append(firstLi)//li复制到最后面开始新的一轮循环
}, 4000)
}
setInterval('statr()', 7000) //7秒循环一次
statr1 = () => { //创造一个循环方法函数
let first = $('#ulMajorHazardHtml li:first'), //获取列表第一个li
firstLi = first.clone(); //复制第一个li
$('#ulMajorHazardHtml li').eq(0).animate({ //列表第一个添加动画,
marginTop: '-=15px',
opacity: '1'
}, 2000)
setTimeout(function () {
$('#ulMajorHazardHtml li').eq(0).animate({//列表第二个添加动画,
marginTop: '-=15px',
opacity: '0'
}, 2000);
setTimeout(function () {//动画结束后删除第一个li
first.remove();
}, 2000)
$('#ulMajorHazardHtml').append(firstLi)//li复制到最后面开始新的一轮循环
}, 4000)
}
setInterval('statr1()', 7000) //7秒循环一次
statr2 = () => { //创造一个循环方法函数
let first = $('#ulEnvironmentHtml li:first'), //获取列表第一个li
firstLi = first.clone(); //复制第一个li
$('#ulEnvironmentHtml li').eq(0).animate({ //列表第一个添加动画,
marginTop: '-=15px',
opacity: '1'
}, 2000)
setTimeout(function () {
$('#ulEnvironmentHtml li').eq(0).animate({//列表第二个添加动画,
marginTop: '-=15px',
opacity: '0'
}, 2000);
setTimeout(function () {//动画结束后删除第一个li
first.remove();
}, 2000)
$('#ulEnvironmentHtml').append(firstLi)//li复制到最后面开始新的一轮循环
}, 4000)
}
setInterval('statr2()', 7000) //7秒循环一次
var videoURL = '<%=VideoURL %>'
function openVideo() {
if (videoURL) {
var username = $('#<%=hfProjectCode.ClientID %>').val()
var password = $('#<%= hfMonitorPW.ClientID %>').val();
if (password != "") {
window.open(videoURL + "?username=" + username + "&password=" + password, '_blank');
} else {
alert("该项目未关联监控信息!");
}
}
else {
alert("您没有权限!");
}
}
</script>
</body>
</html>