<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProject.aspx.cs" Inherits="FineUIPro.Web.common.mainProject" %>
<!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/indexv1/iconfont/iconfont.css" />
<link rel="stylesheet" href="../res/indexv1/css/video-7.15.0.min.css" />
<link rel="stylesheet" href="../res/indexv1/css/index2.css" />
<style type="text/css">
html {
min-height: auto;
}
</style>
<style type="text/css">
</style>
</head>
<body>
<div class="sd-index2-body">
<div class="sd-body2">
<div class="sd-body2-left">
<div class="sd-section">
<div class="sd-section-title ellipsis">安全统计</div>
<div class="sd-section-content">
<div class="sd-section1-inner">
<div class="sd-security">
<div class="sd-security-label">安全人工时</div>
<div class="sd-security-value" runat="server" id="divSafeWorkTime"></div>
</div>
<div class="sd-security-calc">
<div class="sd-security-menus-label">安全检查</div>
<div class="sd-security-menus" onclick="toHsse()">
<div class="sd-security-menu">
<div class="sd-security-menu-img">
<div class="sd-security-menu-value" runat="server" id="divAllRectify">0</div>
</div>
<div class="sd-security-menu-name">总数（个）</div>
</div>
<div class="sd-security-menu">
<div class="sd-security-menu-img">
<div class="sd-security-menu-value" runat="server" id="divCRectify">0</div>
</div>
<div class="sd-security-menu-name">已闭环（个）</div>
</div>
<div class="sd-security-menu">
<div class="sd-security-menu-img">
<div class="sd-security-menu-value" runat="server" id="divUCRectify">0</div>
</div>
<div class="sd-security-menu-name">未闭环（个）</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sd-section">
<div class="sd-section-title ellipsis">预警信息</div>
<div class="sd-section-content">
<div class="sd-section2-inner">
<div class="sd-warning-list">
<div class="sd-warning-item">
<div class="sd-warning-item-inner">
<div class="sd-warning-icon"></div>
<div class="sd-warning-con">
<div class="sd-warning-value" runat="server" id="divQualityWarningNum">0</div>
<div class="sd-warning-name">资质预警</div>
</div>
</div>
</div>
<div class="sd-warning-item">
<div class="sd-warning-item-inner">
<div class="sd-warning-icon"></div>
<div class="sd-warning-con">
<div class="sd-warning-value" runat="server" id="divWorkWarningNum">0</div>
<div class="sd-warning-name">证书预警</div>
</div>
</div>
</div>
<div class="sd-warning-item">
<div class="sd-warning-item-inner">
<div class="sd-warning-icon"></div>
<div class="sd-warning-con">
<div class="sd-warning-value" runat="server" id="divMechanicsWarningNum">0</div>
<div class="sd-warning-name">机械预警</div>
</div>
</div>
</div>
<div class="sd-warning-item">
<div class="sd-warning-item-inner">
<div class="sd-warning-icon"></div>
<div class="sd-warning-con">
<div class="sd-warning-value" runat="server" id="divCQMSWarningNum">0</div>
<div class="sd-warning-name">质量预警</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sd-section">
<div class="sd-section-title ellipsis">产值统计</div>
<div class="sd-section-content">
<div class="sd-section3-inner">
<div class="sd-output" id="outputId"></div>
</div>
</div>
</div>
</div>
<div class="sd-body2-center">
<div class="sd-section">
<div class="sd-section-title ellipsis">工程概况</div>
<div class="sd-section-content">
<div class="sd-section4-inner">
<div class="sd-project">
<div class="sd-project-info">
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divProjectNameT">
<span class="sd-project-info-val">工程名称:</span>
<span class="sd-project-info-val ellipsis" runat="server" id="divProjectName"></span>
</div>
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divProjectAddressT">
<span class="sd-project-info-val">工程地点:</span>
<span class="sd-project-info-val ellipsis" runat="server" id="divProjectAddress"></span>
</div>
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divProjectMoneyT">
<span class="sd-project-info-val">工程造价:</span>
<span class="sd-project-info-val ellipsis" runat="server" id="divProjectMoney"></span>
</div>
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divOwnUnitT">
<span class="sd-project-info-val">建设单位:</span>
<span class="sd-project-info-val ellipsis" runat="server" id="divOwnUnit"></span>
</div>
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divSGUnitT">
<span class="sd-project-info-val">施工单位:</span>
<span class="sd-project-info-val ellipsis" runat="server" id="divSGUnit"></span>
</div>
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divJLUnitT">
<span class="sd-project-info-val">监理单位:</span>
<span class="sd-project-info-val ellipsis" runat="server" id="divJLUnit"></span>
</div>
</div>
<div class="sd-project-imgs">
<div class="sd-project-img" id="divProjectImg"></div>
</div>
<div class="sd-project-cards">
<div class="sd-project-card">
合同总工期<div class="sd-project-card-value" runat="server" id="divProjectDays">---</div>
<span class="sd-project-card-unit">天</span>
</div>
<div class="sd-project-card">
合同到期时间<div class="sd-project-card-value" runat="server" id="divEndDate">---</div>
</div>
<div class="sd-project-card">
距竣工剩余<div class="sd-project-card-value" runat="server" id="divRemainingDays">---</div>
<span class="sd-project-card-unit">天</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sd-section">
<div class="sd-section-title ellipsis">质量统计</div>
<div class="sd-section-content">
<div class="sd-section5-inner">
<div class="sd-quality-items">
<div class="sd-quality-item">
<div class="sd-quality-item-title">
问题总数<span class="sd-quality-value" runat="server" id="divCQMSAllNum">0</span><span class="sd-quality-unit">个</span>
</div>
<div class="sd-quality-canvas">
<div class="sd-quality-canvas-inner">
<canvas data-value="0" id="qualityCanvas1" width='100%' height='100%'></canvas>
</div>
<div class="sd-quality-canvas-name">整改率</div>
</div>
</div>
<div class="sd-quality-item">
<div class="sd-quality-item-title">
已完成<span class="sd-quality-value" runat="server" id="divCQMSCAllNum">0</span><span class="sd-quality-unit">个</span>
</div>
<div class="sd-quality-canvas">
<div class="sd-quality-canvas-inner">
<canvas data-value="0" id="qualityCanvas2" width='100%' height='100%'></canvas>
</div>
<div class="sd-quality-canvas-name">合格率</div>
</div>
</div>
<div class="sd-quality-item">
<div class="sd-quality-item-title">
未完成<span class="sd-quality-value" runat="server" id="divCQMSUCAllNum">0</span><span class="sd-quality-unit">个</span>
</div>
<div class="sd-quality-canvas">
<div class="sd-quality-canvas-inner">
<canvas data-value="0" id="qualityCanvas3" width='100%' height='100%'></canvas>
</div>
<div class="sd-quality-canvas-name">焊接一次合格率</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sd-section">
<div class="sd-section-title ellipsis">智慧进度</div>
<div class="sd-section-content">
<div class="sd-section6-inner">
<div class="sd-progress-delay">
项目进度计划<span>已逾期32天</span>
</div>
<div class="sd-progress-list">
<div class="sd-progress-item active">
<div class="sd-progress-info">
<div>开始：2020-08-08</div>
<div>结束：2021-01-01</div>
<div>无逾期</div>
</div>
<div class="sd-progress-name">基础施工</div>
<div class="sd-progress-img"></div>
</div>
<div class="sd-progress-item active">
<div class="sd-progress-info">
<div>开始：2020-08-08</div>
<div>结束：2021-01-01</div>
<div>无逾期</div>
</div>
<div class="sd-progress-name">结构施工</div>
<div class="sd-progress-img"></div>
</div>
<div class="sd-progress-item active">
<div class="sd-progress-info">
<div>开始：2020-08-08</div>
<div>结束：2021-01-01</div>
<div>无逾期</div>
</div>
<div class="sd-progress-name">主体施工</div>
<div class="sd-progress-img"></div>
</div>
<div class="sd-progress-item active">
<div class="sd-progress-info">
<div>开始：2020-08-08</div>
<div>结束：2021-01-01</div>
<div class="sd-progress-warn">已逾期20天</div>
</div>
<div class="sd-progress-name">装饰装修</div>
<div class="sd-progress-img"></div>
</div>
<div class="sd-progress-item">
<div class="sd-progress-info">
<div>预估：2020-12-12</div>
</div>
<div class="sd-progress-name">机电工程</div>
<div class="sd-progress-img"></div>
</div>
<div class="sd-progress-item">
<div class="sd-progress-info">
<div>预估：2020-12-30</div>
</div>
<div class="sd-progress-name">验收</div>
<div class="sd-progress-img"></div>
</div>
<div class="sd-progress-item">
<div class="sd-progress-info">
<div>预估：2021-01-01</div>
</div>
<div class="sd-progress-name">完工</div>
<div class="sd-progress-img"></div>
</div>
<div class="sd-progress-bar">
<div class="sd-progress-bar-inner" id="js-progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sd-body2-right">
<div class="sd-section">
<div class="sd-section-title ellipsis">劳务数据</div>
<div class="sd-section-content">
<div class="sd-section7-inner">
<div class="sd-labor-data-list">
<div class="sd-labor-data-item">
<div class="sd-labor-name">目前现场人数</div>
<div class="sd-labor-value" runat="server" id="divALLPerson">0</div>
</div>
<div class="sd-labor-data-item">
<div class="sd-labor-name">作业人员总数</div>
<div class="sd-labor-value" runat="server" id="divZYPerson">0</div>
</div>
<div class="sd-labor-data-item">
<div class="sd-labor-name">管理人员总数</div>
<div class="sd-labor-value" runat="server" id="divGLPerson">0</div>
</div>
</div>
<div class="sd-labor-echart">
<div class="sd-labor-echart-box" id="laborId"></div>
</div>
</div>
</div>
</div>
<div class="sd-section">
<div class="sd-section-title ellipsis">视频监控</div>
<div class="sd-section-content">
<div class="sd-section8-inner">
<div class="sd-video-play">
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
<source src="https://c.sedin.com/sggl/FileUpload/HazardRegister/2021-08/9c174c0e-8beb-4b41-858b-4b29f66bde97.mp4">
</source>
</video>
<div class="sd-video-desc">
<span>实时线路：线路1</span>
<span>2020-10-10 12:40:26</span>
</div>
</div>
<div class="sd-video-items">
<div class="sd-video-item">
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
</source>
</video>
</div>
<div class="sd-video-item">
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
</source>
</video>
</div>
<div class="sd-video-item">
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
</source>
</video>
</div>
<div class="sd-video-item">
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
</source>
</video>
</div>
</div>
</div>
</div>
</div>
<div class="sd-section">
<div class="sd-section-title ellipsis">环境监测</div>
<div class="sd-section-content">
<div class="sd-section9-inner">
<div class="sd-environment">
<ul>
<li runat="server" id="divHJ1">0</li>
<li runat="server" id="divHJ2">0</li>
<li runat="server" id="divHJ3">0</li>
<li runat="server" id="divHJ4">0</li>
<li runat="server" id="divHJ5">0</li>
<li runat="server" id="divHJ6">0</li>
</ul>
<div class="sd-today-weather">
<div class="sd-weather-img sd-weather-img--duoyun"></div>
<div class="sd-weather-value" runat="server" id="divTEMP">0<span>°C</span></div>
<div class="sd-weather-name" runat="server" id="divInfo">多云</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../res/indexv1/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../res/indexv1/js/echarts-5.2.0.min.js"></script>
<script type="text/javascript" src="../res/indexv1/js/video-7.15.0.min.js"></script>
<script type="text/javascript" src="../res/indexv1/js/draw-circle.js"></script>
<script type="text/javascript">
var cRectificationRate = '<%=CRectificationRate %>'
var cQualifiedRate = '<%=CQualifiedRate %>'
var firstPassRate = '<%=FirstPassRate %>'
function getValues() {
$('#qualityCanvas1').attr('data-value', cRectificationRate);
$('#qualityCanvas2').attr('data-value', cQualifiedRate);
$('#qualityCanvas3').attr('data-value', firstPassRate);
}
getValues();
</script>
<script type="text/javascript">
var divProjectNameTitle = '<%=divProjectNameTitle %>'
var divProjectAddressTitle = '<%=divProjectAddressTitle %>'
var divProjectMoneyTitle = '<%=divProjectMoneyTitle %>'
var divOwnUnitTitle = '<%=divOwnUnitTitle %>'
var divSGUnitTitle = '<%=divSGUnitTitle %>'
var divJLUnitTitle = '<%=divJLUnitTitle %>'
var divProjectImg = '<%=divProjectImg %>'
function getUnitValues() {
$('#divProjectNameT').attr('title', divProjectNameTitle);
$('#divProjectAddressT').attr('title', divProjectAddressTitle);
$('#divProjectMoneyT').attr('title', divProjectMoneyTitle);
$('#divOwnUnitT').attr('title', divOwnUnitTitle);
$('#divSGUnitT').attr('title', divSGUnitTitle);
$('#divJLUnitT').attr('title', divJLUnitTitle);
$(".sd-project-img").css("background-image", "url('" + divProjectImg + "')");
}
getUnitValues();
</script>
<script type="text/javascript">
function toHsse() {
top.window.location.href = "indexProject.aspx?projectId="+<%=CurrUser.LoginProjectId%>;
}
function initOutPutEchart() {
var chartDom = document.getElementById('outputId');
var myChart = echarts.init(chartDom);
var dataSubUnitNames = JSON.parse('<%=SubUnitNames %>')
var dataOutputValues = JSON.parse('<%=OutputValues %>')
var option;
option = {
tooltip: {
trigger: 'axis'
},
grid: {
top: '10%',
left: '8%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataSubUnitNames,
axisLabel: {
color: '#1ab1ff',
interval: 0
},
axisTick: {
show: false,
},
axisLine: {
onZero: false,
lineStyle: {
color: '#1ab1ff',
width: 1,
}
},
boundaryGap: false
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
color: '#1ab1ff',
},
axisTick: {
show: false,
},
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#1ab1ff',
width: 1,
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#1ab1ff',
},
},
splitNumber: 5,
},
series: [
{
type: 'line',
color: '#1ab1ff', //线条颜色
smooth: true, //线条平滑
data: dataOutputValues,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0d6692' // 100% 处的颜色
}, {
offset: 1, color: '#03193d' // 0% 处的颜色
}],
global: false
}
},
itemStyle: {
normal: {
label: { show: true, color: '#1ab1ff' }, //顶部显示数值
}
}
},
],
boundaryGap: false,
}
if (dataSubUnitNames.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,
}]
}
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function initQualityCanvas() {
drawCircle({
drawing_elem: 'qualityCanvas1',
percentfontcolor: "#ce8306",
unitfontcolor: "#ce8306",
unitfontsize: 11,
lineGap: 'round',
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "#03344C" }],
forecolor: [{ step: 0, color: "#ce8306" }, { step: 0.4, color: "#ce8306" }, { step: 1, color: "rgba(255,166,0,0.05)" }],
rad: Math.PI * 2 * (3 / 4) / 100,
radStart: Math.PI * (3 / 4),
radEnd: Math.PI * (2 + (1 / 4)),
radDrawStart: Math.PI * (3 / 4),
unitadd: 1,
});
drawCircle({
drawing_elem: 'qualityCanvas2',
percentfontcolor: "#12cda2",
unitfontcolor: "#12cda2",
unitfontsize: 11,
lineGap: 'round',
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "rgba(3,52,76,0.5)" }],
forecolor: [{ step: 0, color: "#12cda2" }, { step: 0.4, color: "#12cda2" }, { step: 1, color: "rgba(21,237,187,0.05)" }],
rad: Math.PI * 2 * (3 / 4) / 100,
radStart: Math.PI * (3 / 4),
radEnd: Math.PI * (2 + (1 / 4)),
radDrawStart: Math.PI * (3 / 4),
unitadd: 1,
});
drawCircle({
drawing_elem: 'qualityCanvas3',
percentfontcolor: "#00ffff",
unitfontcolor: "#00ffff",
unitfontsize: 11,
lineGap: 'round',
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "rgba(3,52,76,0.5)" }],
forecolor: [{ step: 0, color: "#00ffff" }, { step: 0.4, color: "#00ffff" }, { step: 1, color: "rgba(0,255,255,0.05)" }],
rad: Math.PI * 2 * (3 / 4) / 100,
radStart: Math.PI * (3 / 4),
radEnd: Math.PI * (2 + (1 / 4)),
radDrawStart: Math.PI * (3 / 4),
unitadd: 1,
});
}
function initProgressBar() {
var activeLength = $('.sd-progress-list').find('.sd-progress-item.active').length
if (activeLength > 1) {
console.log('activeLength', activeLength)
$('#js-progress-bar').css('width', (100 / 6 * (activeLength - 1)) + '%')
}
}
// 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%',
}]
console.log(laborId_series)
function initLaborEchart() {
var chartDom = document.getElementById('laborId');
var myChart = echarts.init(chartDom);
var option = {
color: ['#15edbb', '#2D458D'],
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: '#1ab1ff', //'#179eb3',
},
axisTick: {
show: false,
},
axisLine: {
onZero: true,
lineStyle: {
color: '#1ab1ff',
width: 1,
}
},
boundaryGap: true
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
color: '#1ab1ff',
},
axisTick: {
show: false,
},
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#1ab1ff',
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,
}]
}
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function initEvent() {
$('#selectAreaID').on('click', function () {
$('#selectAreaBoxID').show();
});
$('#selectAreaBoxID').on('click', ' .sd-select-box-item', function (e) {
var id = e.currentTarget.dataset.id;
$('#selectAreaBoxID').hide();
$('.sd-select-name').html($(this).html());
console.log('select id', id);
});
}
$('.sd-select-area').hover(function () {
$('#selectAreaBoxID').show();
}, function () {
$('#selectAreaBoxID').hide();
})
$(function () {
initOutPutEchart();
initQualityCanvas();
initProgressBar();
initLaborEchart();
initEvent();
});
</script>
</html>