SGGL_SGY/SGGL/FineUIPro.Web/common/mainProjects.aspx

912 lines
33 KiB
Plaintext
Raw Permalink Normal View History

2025-02-19 15:58:42 +08:00
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProjects.aspx.cs" Inherits="FineUIPro.Web.common.mainProjects" %>
<!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">
<style type="text/css">
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;
}
</style>
<style type="text/css">
</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 class="statistics-label">安全隐患整改单</div>
<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">
<div class="title">风险分级</div>
<div class="risk">
<div id="riskMap"></div>
</div>
</div>
<div class="items">
<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 id="divQualityWarningNum" runat="server">0</span>
<span>资质预警</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 runat="server" id="divWorkWarningNum">0</span>
<span>证书预警</span>
</div>
</div>
</div>
<div class="box">
<div class="box-item">
<img src="../res/images/02/10zzyj.png">
<div class="item-text">
<span runat="server" id="divMechanicsWarningNum">0</span>
<span>机械预警</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 runat="server" id="divCQMSWarningNum">0</span>
<span>质量预警</span>
</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="items1">
<div class="title">质量统计</div>
<div class="quality">
<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 class="items1">
<div class="title">智慧进度</div>
<div class="plan">
<div class="boxs-label"><span>项目进度计划</span><span>已逾期32天</span></div>
<div id="planMap">
<div class="boxs">
<div class="box">
<!-- 注意没有完工的进程需要添加 noPress类 圆点类家red类 -->
<div class="text">
<p>开始2020-08-08</p>
<p>结束2021-01-01</p>
<p>无逾期</p>
<div class="title">基础施工</div>
</div>
<div class="dot"></div>
<div>
<img src="../res/image/v2/19jcsg.png" alt="">
</div>
</div>
<div class="box">
<div>
<img src="../res/image/v2/20jgsg.png" alt="">
</div>
<div class="dot"></div>
<div class="text">
<div class="title">结构施工</div>
<p>开始2020-08-08</p>
<p>结束2021-01-01</p>
<p>无逾期</p>
</div>
</div>
<div class="box">
<div class="text">
<p>开始2020-08-08</p>
<p>结束2021-01-01</p>
<p>无逾期</p>
<div class="title">主体施工</div>
</div>
<div class="dot"></div>
<div>
<img src="../res/image/v2/21ztsg.png" alt="">
</div>
</div>
<div class="box">
<img src="../res/image/v2/22zszx.png" alt="">
<div class="dot red"></div>
<div class="text">
<div class="title">装饰装修</div>
<p>开始2020-08-08</p>
<p>结束2021-01-01</p>
<p style="color: #F24166;">已逾期20天</p>
</div>
</div>
<div class="box">
<div class="text noPress">
<p></p>
<p></p>
<p>预估2020-12-12</p>
<div class="title">机电工程</div>
</div>
<div class="dot red"></div>
<img src="../res/image/v2/23jdgc1.png" alt="">
</div>
<div class="box">
<img src="../res/image/v2/24ys1.png" alt="">
<div class="dot red"></div>
<div class="text noPress">
<div class="title">验收</div>
<p></p>
<p></p>
<p>预估2020-12-30</p>
</div>
</div>
<div class="box">
<div class="text noPress">
<p></p>
<p></p>
<p>预估2021-01-01</p>
<div class="title">完工</div>
</div>
<div class="dot red"></div>
<img src="../res/image/v2/25wg1.png" alt="">
</div>
</div>
<div class="line"></div>
<!-- <div class="line line1">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div> -->
</div>
</div>
</div>
</div>
<div class="right">
<div class="items">
<div class="title">劳务数据</div>
<div class="service">
<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 id="serviceMap">
</div>
</div>
</div>
<div class="items">
<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="divHJ1" runat="server">0</div>
</div>
<div class="box">
<div class="left">
<p>噪音<span>db</span></p>
<img src="../res/images/02/37.png">
</div>
<div class="num" style="color: #CFC782;margin-left:0;" id="divHJ2" runat="server">0</div>
</div>
<div class="box">
<div class="left">
<p>湿度<span>%rh</span></p>
<img src="../res/images/02/37.png">
</div>
<div class="num" style="color: #CFC782;" id="divHJ6" runat="server">0</div>
</div>
</div>
<div class="env_center">
<img width="46px" height="46px" src="../res/images/02/35pm10.png">
<p id="divTEMP" 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="divHJ3" runat="server">0</div>
<div class="left">
<p>PM2.5<span></span></p>
<img src="../res/images/02/37.png">
</div>
</div>
<div class="box">
<div class="num" style="color: #CFC782;margin-right:0;" id="divHJ4" runat="server">0</div>
<div class="left">
<p>风度<span>km/h</span></p>
<img src="../res/images/02/37.png">
</div>
</div>
<div class="box">
<div class="num" style="color: #CFC782;" id="divHJ5" runat="server">0</div>
<div class="left">
<p>PM10<span</span></p>
<img src="../res/images/02/37.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="items">
<div class="title">项目展示</div>
<div class="video">
<video src="" width="100%" height="100%">
</video>
</div>
</div>
</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>
// // 人员统计 在岗率初始化
// 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: finishData1
}
]
};
var unfinishedMap = echarts.init(document.getElementById('unfinishedMap'));
unfinishedMap.setOption(unfinishedOption1)
</script>
<script>
// 获取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();
</script>