597 lines
24 KiB
Plaintext
597 lines
24 KiB
Plaintext
<%@ 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>
|