CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/common/mainProject2.aspx

1354 lines
54 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProject2.aspx.cs" Inherits="FineUIPro.Web.common.mainProject2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>项目级首页(新)</title>
<script src="lib/flex.js"></script>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/project.css"/>
<link rel="stylesheet" href="css/swiper-bundle.min.css" />
<script src="lib/jquery.js"></script>
</head>
<style>
.BMap_mask {
background-color: red;
}
body.f-body {
padding: 0px;
}
/*头部按钮样式*/
.bgbtn_dbsx{
display: inline-block;
position: absolute;
width: 5%;
height: 4%;
left: 79%;
top: 51px;
background: green !important;
border: none !important;
padding: 0 !important;
}
.bgbtn_gjsx{
display: inline-block;
position: absolute;
width: 5%;
height: 4%;
left: 72%;
top: 51px;
background: red !important;
border: none !important;
padding: 0 !important;
}
.div_border {
border: 1px solid #00FFFF;
}
</style>
<body>
<form id="form1" runat="server" style="background-color:#000231">
<f:PageManager ID="PageManager1" runat="server" />
<div class="wrap y_image_default">
<div class="y_body y_row">
<div class="site y_column">
<div class="y_box">
<div class="y_box_label y_image_default">安全统计</div>
<div class="y_box_main">
<div class="y_row y_rgss">
<div class="y_rgs y_column y_image_default">
<p class="y_rgs_val" id="divSafeWorkTime" runat="server">0000000000</p>
<div class="y_rgs_label">累计安全人工时
</div>
</div>
<div class="y_rgs y_column y_image_default">
<p class="y_rgs_val" id="divSafeWorkTimeMonth" runat="server">0000000000</p>
<div class="y_rgs_label">本月安全人工时
</div>
</div>
<div class="y_rgs y_column y_image_default">
<p class="y_rgs_val" id="divSafePersonNum" runat="server">0</p>
<div class="y_rgs_label">安全培训累计人员
</div>
</div>
</div>
<div class="y_aq y_row">
<div class="y_aq_box y_image_default y_row">
<div class="y_aq_label">安全管理人员</div>
<div class="y_aq_value" id="divSafeManagePersonNum" runat="server">0</div>
</div>
<div class="y_aq_box y_image_default y_row">
<div class="y_aq_label">未遂事件</div>
<div class="y_aq_value" runat="server" id="divWS">0</div>
</div>
</div>
<div class="y_zg">
<div class="y_zg_title">整改数据</div>
<div class="y_zg_main y_row">
<div class="y_zg_box">
<div class="y_zg_value" style="background-color: #00b8de54;color: #00b8de;" runat="server" id="div_zgsj">0
</div>
<div class="y_zg_label">总数</div>
</div>
<div class="y_zg_box">
<div class="y_zg_value" style="background-color: #12cda26e;color: #12CDA2;" runat="server" id="div_zgywc">0
</div>
<div class="y_zg_label">已完成</div>
</div>
<div class="y_zg_box">
<div class="y_zg_value" style="background-color:#ff747452;color: #FF7474;" runat="server" id="div_zgwwc">0
</div>
<div class="y_zg_label">未完成</div>
</div>
<div class="y_zg_box">
<div class="y_zg_value" style="background-color: #d2b10054;color: #D2B100;" runat="server" id="div_zgwcl">0%
</div>
<div class="y_zg_label">完成率</div>
</div>
</div>
</div>
</div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">风险预警</div>
<div class="y_box_main y_row">
<div class="fxmap" id="fxmap"></div>
<div class="fx">
<div class="yj-box y_row" style="margin-top: .125rem;">
<div class="yj-item zz">
<div class="yj-label">资质预警</div>
<div class="yj-number"><%=getEarlyWarningCounts() %></div>
</div>
<div class="yj-item jx">
<div class="yj-label">机械预警</div>
<div class="yj-number"><%=GetJxyjNum() %></div>
</div>
</div>
<div class="wd-box" style="margin-top: .125rem;">
<div class="wd-title">危大工程</div>
<div class="wd-main" style="margin-top: .125rem;">
<div class="wd-item">
<div class="wd-number"><%=GetCompletedNum() %></div>
<div class="wd-label">审批完成</div>
</div>
<div class="wd-item">
<div class="wd-number" style="color: #FEB185;"><%=GetTrainPersonNum() %></div>
<div class="wd-label">培训人次数</div>
</div>
<div class="wd-item">
<div class="wd-number" style="color: #8E65FF;"><%=GetConstructionNum() %></div>
<div class="wd-label">施工个数</div>
</div>
<div class="wd-item">
<div class="wd-number" style="color: #12CDA2;"><%=GetFinishedNum() %></div>
<div class="wd-label">完工个数</div>
</div>
</div>
</div>
<div class="wd-box" style="margin-top: .125rem;">
<div class="wd-title">超危大工程</div>
<div class="wd-main" style="margin-top: .125rem;">
<div class="wd-item">
<div class="wd-number"><%=GetSuperCompletedNum() %></div>
<div class="wd-label">审批完成</div>
</div>
<div class="wd-item">
<div class="wd-number" style="color: #FEB185;"><%=GetSuperTrainPersonNum() %></div>
<div class="wd-label">培训人次数</div>
</div>
<div class="wd-item">
<div class="wd-number" style="color: #8E65FF;"><%=GetSuperConstructionNum() %></div>
<div class="wd-label">施工个数</div>
</div>
<div class="wd-item">
<div class="wd-number" style="color: #12CDA2;"><%=GetSuperFinishedNum() %></div>
<div class="wd-label">完工个数</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">作业许可(<%=getTodayCount() %>/<%=getAllCount() %>)</div>
<div class="y_box_main">
<div class="zyp">
<div class="zyp_box">
<div class="zyp_label">动火</div>
<div class="zyp_number"><%=getWrokCount0() %>/<%=getALLWrokCount0() %></div>
</div>
<div class="zyp_box">
<div class="zyp_label">高处</div>
<div class="zyp_number"><%=getWrokCount1() %>/<%=getALLWrokCount1() %></div>
</div>
<div class="zyp_box">
<div class="zyp_label">吊装</div>
<div class="zyp_number"><%=getWrokCount2() %>/<%=getALLWrokCount2() %></div>
</div>
<div class="zyp_box">
<div class="zyp_label">其他</div>
<div class="zyp_number"><%=getWrokCount3() %>/<%=getALLWrokCount3() %></div>
</div>
</div>
<div class="zyp-lis">
<%=getLicenseManager() %>
<%-- <div class="li">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>--%>
</div>
</div>
</div>
</div>
<div class="site y_column" style="justify-content: space-between;">
<div class="y_box" style="width: 100%;">
<div class="y_box_label y_image_default">工程概况</div>
<div class="y_box_main y_row" style="justify-content: space-between;padding: .1875rem .25rem;">
<div class="gk-box" style="width: 2.75rem;">
<div class="row"><span>工程名称:</span><%=spanProjectName %></div>
<div class="row"><span>建设单位:</span><%=spanOwnUnit %></div>
<div class="row"><span>施工单位:</span><%=spanSGUnit %></div>
<div class="row"><span>监理单位:</span><%=spanJLUnit %></div>
<div class="row"><span>工程概况:</span><%=spanRemark %></div>
</div>
<div class="gk-box" style="width: 3.55rem;">
<div class="swiper">
<div class="swiper-wrapper">
<%=divProjectImg %>
<%--<div class="swiper-slide"><img src="./imags/16.png"></div>
<div class="swiper-slide"><img src="./imags/16.png"></div>
<div class="swiper-slide"><img src="./imags/16.png"></div>
<div class="swiper-slide"><img src="./imags/16.png"></div>--%>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="gk-box y_column" style="width: 2rem;justify-content: space-between;">
<div class="gk-card y_image_default">
<div class="gk-label">合同工期</div>
<div class="gk-number" style="color: #00FFFF;" id="divProjectDays" runat="server">0<span style="margin-left: .125rem;color: #63CAFF;">天</span></div>
</div>
<div class="gk-card y_image_default">
<div class="gk-label">合同到期时间</div>
<div class="gk-number" style="color: #FF7474;" id="divEndDate" runat="server"></div>
</div>
<div class="gk-card y_image_default">
<div class="gk-label">合同剩余</div>
<div class="gk-number" style="color: #12CDA2;" id="divRemainingDays" runat="server">0<span style="margin-left: .125rem;color: #63CAFF;">天</span></div>
</div>
</div>
</div>
</div>
<div class="y_box" style="width: 100%;">
<div class="y_box_label y_image_default" style="background-image: none;">
<!-- <div class="y_tabs y_row"><span class="y_image_default y_tab-action">赢得值曲线</span><span
class="y_image_default">设备材料</span></div> -->
<div class="gj1"><span class="y_image_default y_tab-action" data-type="1">赢得值曲线</span><span
data-type="2">实物工程量</span></div>
<div class="gj"><span style="margin-right: .125rem;">关键事项完成率</span><span><%=gjsxRate %></span></div>
</div>
<div class="y_box_main" id="jdmap" >
<div id='left_one' style="width: 100%; height: 100%;"></div>
</div>
<div class="y_box_main" id="jdmap1" style="display: none;">
<div class="table" style="width: 100%;">
<div class="thead">
<div class="trth" style="background: rgba(33, 55, 113, .4);">
<div class="th r-line" style="width: .625rem;">
<p>序号</p>
</div>
<div class="th r-line" style="width: 1rem;">
<p>类型</p>
</div>
<div class="th r-line" style="width: .8375rem;">
<p>单位</p>
</div>
<div class="th r-line" style="width: .8375rem;">
<p>设计数量</p>
</div>
<div class="th r-line" style="width: 2.325rem;">
<p class="b-line">本期</p>
<p><span class="r-line s1">计划完成</span><span class="r-line s1">实际完成</span><span
class="r-line s1" style="border: none;">完成率</span></p>
</div>
<div class="th r-line" style="width: 2.325rem;">
<p class="b-line">累计</p>
<p><span class="r-line s1">计划完成</span><span class="r-line s1">实际完成</span><span
class="r-line s1" style="border: none;">完成率</span></p>
</div>
<div class="th r-line" style="width: .8375rem;">
<p>完成率</p>
</div>
</div>
</div>
<div class="tbody">
<%=swgclHtml %>
</div>
</div>
</div>
</div>
<div class="y_box" style="width: 100%;">
<div class="y_box_label y_image_default">质量概况</div>
<div class="y_box_main">
<div class="y_row" style="justify-content: space-between;padding-top: .25rem;">
<div class="y_zlry y_row y_image_default">
<div class="y_zlry_label">质量培训累计人员</div>
<div class="y_zlry_value" id="divCqmsPxNum" runat="server">0</div>
</div>
<div class="y_zlry y_row y_image_default">
<div class="y_zlry_label">施工方案审批量</div>
<div class="y_zlry_value" id="div_sgfaSpl" runat="server">0</div>
</div>
</div>
<div class="y_zlmap y_row">
<div class="zgmap" id="zlmap"></div>
<div class="zgmap" id="ycmap"></div>
<div class="zgmap" id="hjmap"></div>
</div>
</div>
</div>
</div>
<div class="site y_column">
<div class="y_box">
<div class="y_box_label y_image_default">工作台面</div>
<div class="y_box_main">
<div class="zyp">
<div class="zyp_box" style="cursor:pointer;" runat="server" onclick="showGztm(0)" id="div_Gzgjsx">
<div class="zyp_label">关键事项</div>
<div class="zyp_number" id="div_gjsx" runat="server">0</div>
</div>
<div class="zyp_box div_border" style="cursor:pointer" runat="server" onclick="showGztm(1)" id="div_Gzdbsx">
<div class="zyp_label">待办事项</div>
<div class="zyp_number" id="div_dbsx" runat="server">0</div>
</div>
<div class="zyp_box" style="cursor:pointer" runat="server" onclick="showGztm(2)" id="div_Gzgrlc">
<div class="zyp_label">个人流程</div>
<div class="zyp_number" id="div_grlc" runat="server">0</div>
</div>
<div class="zyp_box">
<div class="zyp_label">已办任务</div>
<div class="zyp_number" id="div_ybrw" runat="server">0</div>
</div>
</div>
<div class="zyp-lis" id="div_gjsxlist" runat="server" style="display:none">
</div>
<div class="zyp-lis" id="div_dbsxlist" runat="server">
</div>
</div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">人员信息</div>
<div class="y_box_main">
<div class="ry">
<div class="ry_box">
<div class="ry_label">当前现场人数</div>
<div class="ry_number" style="color: #E9E931;" id="div_xcrs" runat="server">0</div>
</div>
<div class="ry_box">
<div class="ry_label">作业人员总数</div>
<div class="ry_number" style="color: #00FFFF;" runat="server" id="div_zyxcrs">0</div>
</div>
<div class="ry_box">
<div class="ry_label">管理人员总数</div>
<div class="ry_number" style="color: #63CAFF;" runat="server" id="div_glxcrs">0</div>
</div>
</div>
<div id='left_two' style="width: 100%; height: 80%;"></div>
<%--<div class="ry_map" id="rymap">
</div>--%>
</div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">
材料到货
<div class="y_tabs y_row"><span class="y_image_default y_tab-action" id="span_gdcl" onclick="clOnclick(0)" style="cursor:pointer">管道材料</span>
<span class="y_image_default" onclick="clOnclick(1)" id="span_sbcl" style="cursor:pointer">设备材料</span></div>
</div>
<div class="y_box_main">
<div class="table">
<div class="thead" id="div_cldhHead">
<div class="trth" style="background: rgba(33, 55, 113, .4);">
<div class="th r-line" style="width: .7875rem;">
<p>材料类别</p>
</div>
<div class="th r-line" style="width: .8375rem;">
<p>设计量</p>
</div>
<div class="th r-line" style="width: 1.575rem;">
<p class="b-line">采购量</p>
<p><span class="r-line">采购量</span><span class="r-line">百分比</span></p>
</div>
<div class="th r-line" style="width: 1.575rem;">
<p class="b-line">到货量</p>
<p><span class="r-line">已到货</span><span class="r-line">百分比</span></p>
</div>
<div class="th" style="width: 1.575rem;">
<p class="b-line">领料量</p>
<p><span class="r-line">已领料</span><span>百分比</span></p>
</div>
</div>
</div>
<div class="tbody" id="div_cldhList">
<%=gdclHtml %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="hiddenUrl" value="" runat="server" />
<f:Button runat="server" CssClass="bgbtntop" IconFont="Gear" OnClick="btnshowWindows" ToolTip="打开代办" Hidden="true"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnShowWindows">
</f:Button>
<f:Window ID="Window1" Title="代办" Hidden="true" EnableIFrame="true" EnableMaximize="true"
Target="Parent" EnableResize="false" runat="server" IsModal="true" OnClose="Window1_Close"
Width="1300px" Height="660px">
</f:Window>
</form>
</body>
</html>
<script src="lib/swiper-bundle.min.js"></script>
<script src="lib/echarts.min.js"></script>
<script>
function clOnclick(objval) {
if (objval == 0) {
$("#span_gdcl").addClass("y_tab-action")
$("#span_sbcl").removeClass("y_tab-action")
$("#div_cldhHead").html('<%=gdclHead%>')
$("#div_cldhList").html('<%=gdclHtml%>')
} else {
$("#span_sbcl").addClass("y_tab-action")
$("#span_gdcl").removeClass("y_tab-action")
$("#div_cldhHead").html('<%=sbclHead%>')
$("#div_cldhList").html('<%=sbclHtml%>')
}
}
</script>
<script>
//点击切换台面
function showGztm(objval) {
//关键事项
if (objval == 0) {
$("#div_gjsxlist").show();
$("#div_dbsxlist").hide();
document.getElementById("div_Gzgjsx").className += " div_border";
$("#div_Gzdbsx").removeClass("div_border");
$("#div_Gzgrlc").removeClass("div_border");
} else if (objval == 1) {
//待办事项
$("#div_dbsxlist").show();
$("#div_gjsxlist").hide();
document.getElementById("div_Gzdbsx").className += " div_border";
$("#div_Gzgjsx").removeClass("div_border");
$("#div_Gzgrlc").removeClass("div_border");
} else if (objval == 2) {
//个人流程
$("#div_dbsxlist").show();
$("#div_gjsxlist").hide();
document.getElementById("div_Gzgrlc").className += " div_border";
$("#div_Gzgjsx").removeClass("div_border");
$("#div_Gzdbsx").removeClass("div_border");
}
}
function reloadGrid(param) {
__doPostBack(null, 'ReloadGrid$' + param);
}
//弹框代办
function returnWindows(objUrl) {
document.getElementById("hiddenUrl").value = objUrl;
$('#btnShowWindows').click();
}
</script>
<script>
$('.gj1>span').click(function () {
console.log($(this).data('type'))
let type = $(this).data('type')
$('.gj1>span').removeClass('y_image_default y_tab-action')
$(this).addClass('y_image_default y_tab-action')
if (type == 1) {
// 赢得值曲线
$("#jdmap1").hide()
$("#jdmap").show()
} else if (type == 2) {
// 实物工程量
$("#jdmap").hide()
$("#jdmap1").show()
}
})
// 焊接一次合格率
hjmap()
function hjmap() {
let allNumber = 70 // 总计
let finishNumber = 360 // 完成的数量
let zg = 72
let AOption1 = {
title: [
{
text: '焊接一次合格率',
bottom: fontSize(30),
left: 'center',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14)
}
},
{
text: '总计 ' + '{a|' + <%=hjallNumber%> + '}',
bottom: fontSize(4),
left: 'left',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14),
rich: {
a: {
color: '#00FFFF',
fontSize: fontSize(16)
}
}
}
},
{
text: '合格 ' + '{a|' + <%=hjfinishNumber%> + '}',
bottom: fontSize(4),
left: '50%',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14),
rich: {
a: {
color: '#12CDA2',
fontSize: fontSize(16)
}
}
}
},
{
text: <%=hjzgl%> + '{a|%}',
top: fontSize(70),
left: 'center',
textStyle: {
color: '#FFA602',
fontSize: fontSize(16),
rich: {
a: {
color: '#FFFFFF',
fontWight: 1,
fontSize: fontSize(10),
lineHeight: fontSize(20)
}
}
}
}
],
series: [
{
center: ['50%', fontSize(80)],
name: '',
type: 'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
labelLine: {
show: false
},
data: [
{ value: <%=hjzgl%>, itemStyle: { color: '#FFA602' } },
{ value: <%=hjDataValue%>, itemStyle: { color: '#2A396A' } },
],
}
]
};
var aPassChart = echarts.init(document.getElementById('hjmap'));
aPassChart.setOption(AOption1);
}
// 一次共检合格率
ycmap()
function ycmap() {
let allNumber = 70 // 总计
let finishNumber = 360 // 完成的数量
let zg = 72
let AOption1 = {
title: [
{
text: '一次共检合格率',
bottom: fontSize(30),
left: 'center',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14)
}
},
{
text: '总计 ' + '{a|' + <%=zlgjallNumber%> + '}',
bottom: fontSize(4),
left: 'left',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14),
rich: {
a: {
color: '#00FFFF',
fontSize: fontSize(16)
}
}
}
},
{
text: '合格 ' + '{a|' + <%=zlgjfinishNumber%> + '}',
bottom: fontSize(4),
left: '50%',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14),
rich: {
a: {
color: '#12CDA2',
fontSize: fontSize(16)
}
}
}
},
{
text: <%=zlgjzgl%> + '{a|%}',
top: fontSize(70),
left: 'center',
textStyle: {
color: '#FFA602',
fontSize: fontSize(16),
rich: {
a: {
color: '#FFFFFF',
fontWight: 1,
fontSize: fontSize(10),
lineHeight: fontSize(20)
}
}
}
}
],
series: [
{
center: ['50%', fontSize(80)],
name: '',
type: 'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
labelLine: {
show: false
},
data: [
{ value: <%=zlgjzgl%>, itemStyle: { color: '#FFA602' } },
{ value: <%=zggjzglDataValue%>, itemStyle: { color: '#2A396A' } },
],
}
]
};
var aPassChart = echarts.init(document.getElementById('ycmap'));
aPassChart.setOption(AOption1);
}
// 质量问题整改率
zlmap()
function zlmap() {
let allNumber = 70 // 总计
let finishNumber = 36 // 完成的数量
let zg = 72
let AOption1 = {
title: [
{
text: '质量问题整改率',
bottom: fontSize(30),
left: 'center',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14)
}
},
{
text: '总计 ' + '{a|' + <%=zlallNumber%> + '}',
bottom: fontSize(4),
left: 'left',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14),
rich: {
a: {
color: '#00FFFF',
fontSize: fontSize(16)
}
}
}
},
{
text: '合格 ' + '{a|' + <%=zlfinishNumber%> + '}',
bottom: fontSize(4),
left: '50%',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(14),
rich: {
a: {
color: '#12CDA2',
fontSize: fontSize(16)
}
}
}
},
{
text: <%=zlzgl%> + '{a|%}',
top: fontSize(70),
left: 'center',
textStyle: {
color: '#FFA602',
fontSize: fontSize(16),
rich: {
a: {
color: '#FFFFFF',
fontWight: 1,
fontSize: fontSize(10),
lineHeight: fontSize(20)
}
}
}
}
],
series: [
{
center: ['50%', fontSize(80)],
name: '',
type: 'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
labelLine: {
show: false
},
data: [
{ value: <%=zlzgl%>, itemStyle: { color: '#FFA602' } },
{ value: <%=zgzglDataValue%>, itemStyle: { color: '#2A396A' } },
],
}
]
};
var aPassChart = echarts.init(document.getElementById('zlmap'));
aPassChart.setOption(AOption1);
}
//jdmap()
function jdmap(){
let value = [120, 200, 150, 80]
let value1 = [199, 100, 100, 96]
let value2 = [146, 187, 111, 108]
let label = ['分类1', '分类2', '分类3', '分类4']
let opt = {
grid: {
top: fontSize(60),
bottom: fontSize(30)
},
legend: {
top: fontSize(10),
left: fontSize(20),
data: [{ name: '实物工程量', textStyle: { color: '#63CAFF' } }, { name: '进度曲线', textStyle: { color: '#12CDA2' } }, { name: '主进度线', textStyle: { color: '#C293FF' } }]
},
xAxis: {
type: 'category',
data: label,
axisLabel: {
color: '#3FB0FF'
},
axisLine: {
show: true,
lineStyle: {
color: '#84D7FE'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#3FB0FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#1B538B',
type: 'dashed'
}
}
},
series: [
{
name: '实物工程量',
data: value,
type: 'bar',
barWidth: fontSize(20),
itemStyle: {
color: '#20AFFF'
},
label: {
// 柱图头部显示值
show: true,
position: "top",
color: "#ffffff",
fontSize: fontSize(10),
formatter: (params) => {
let str = params.value;
console.log(params.name)
if (params.name == '整改率') {
str = str + '%'
}
return str
},
},
},
{
name: '进度曲线',
data: value1,
type: 'line',
barWidth: fontSize(20),
itemStyle: {
color: '#12D896'
},
showSymbol: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'RGBA(9, 104, 98, 1)'
}, // %0的颜色值
{
offset: 1,
color: 'RGBA(9, 104, 98, 0)'
} // 100%的颜色值
])
},
},
{
name: '主进度线',
data: value2,
type: 'line',
itemStyle: {
color: '#BE94FE'
},
showSymbol: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#C293FF'
}, // %0的颜色值
{
offset: 1,
color: 'rgba(194, 147, 255, 0)'
} // 100%的颜色值
])
},
}
]
};
var aPassChart = echarts.init(document.getElementById('jdmap'));
aPassChart.setOption(opt);
}
fxmap()
function fxmap() {
let data = [
{ 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: <%=riskData3%>, name: '较大风险', label: { color: '#FFA502' }, itemStyle: { color: '#FFA502' }, labelLine: { lineStyle: { color: '#FFA502' } } },
{ value: <%=riskData2%>, name: '一般风险', label: { color: '#E7EA2E' }, itemStyle: { color: '#E7EA2E' }, labelLine: { lineStyle: { color: '#E7EA2E' } } },
]
let opt = {
tooltip: {
trigger: 'item'
},
legend: {
bottom: fontSize(14),
left: 'center',
icon: 'circle',
textStyle: {
color: '#ffffff'
},
data: [
{ name: '重大风险', textStyle: { color: '#FF7473' }, },
{ name: '低风险', textStyle: { color: '#5C5AFF' }, },
{ name: '较大风险', textStyle: { color: '#FFA502' } },
{ name: '一般风险', textStyle: { color: '#E7EA2E' }, },
]
},
series: [
{
type: 'pie',
radius: ['10%', '40%'],
center: ['50%', '40%'],
label: {
fontSize: fontSize(8),
show: true,
formatter: '{b}\n{c}'
},
data: data.sort(function (a, b) {
return a.value - b.value;
}),
itemStyle: {
normal: {
labelLine: {
length: fontSize(1)
}
}
},
roseType: 'radius',
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
var aPassChart = echarts.init(document.getElementById('fxmap'));
aPassChart.setOption(opt);
}
// 人员信息
//rymap()
function rymap() {
let value = [<%=ProjectPersonCount%>]
let label = [<%=ProjectPersonMc%>]
let opt = {
grid: {
top: fontSize(30),
bottom: fontSize(40)
},
xAxis: {
type: 'category',
data: label,
axisLabel: {
color: '#3FB0FF'
},
axisLine: {
show: false,
lineStyle: {
color: '#84D7FE'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#3FB0FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#1B538B',
type: 'dashed'
}
}
},
series: [
{
name: '',
data: value,
type: 'bar',
barWidth: fontSize(20),
itemStyle: {
color: '#38ECC3'
},
label: {
// 柱图头部显示值
show: true,
position: "top",
color: "#ffffff",
fontSize: fontSize(10),
formatter: (params) => {
return params.value[params.encode.x[0]];
},
},
}
]
};
var aPassChart = echarts.init(document.getElementById('rymap'));
aPassChart.setOption(opt);
}
// 轮播
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: true,
autoplay: {
delay: 8000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
// 全屏
document.querySelector('.full').onclick = 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()
}
}
}
</script>
<script>
function line(id, xArr, data) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: {
left: 'center',
text: ' ',
textStyle: {
color: '#fff',
fontSize: 12,
fontWeight: '300'
},
show: false
},
tooltip: {
formatter: '{a}<br />{b}: {c}'
},
legend: {
show: true,
textStyle: {
color: '#fff'
},
left: 0
},
xAxis: {
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
}
},
type: 'category',
data: xArr
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
},
//formatter: '{value} %'
}
},
series: data,
grid: {
top: '15%',
left: '10',
right: '10',
bottom: '0%',
containLabel: true,
backgroundColor: 'rgba(0,162,233, 0.01)',
// borderColor: 'rgba(0,162,233, 1)'
},
itemStyle: {
//color: 'rgba(200,201,10, 1)'
},
backgroundColor: 'rgba(0,162,233, 0.01)',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
var two =<%=Two %>;
var xArr1 = two.categories
var data1 = [{
name: '本月BCWS',
type: 'bar',
//smooth: true,
data: two.series[0].data,
lineStyle: {
color: 'rgba(200,201,10, 1)'
}
}, {
name: '本月BCWP',
type: 'bar',
//smooth: true,
data: two.series[2].data,
}, {
name: '本月ACWP',
type: 'bar',
//smooth: true,
data: two.series[4].data,
}, {
name: '累计BCWS',
type: 'line',
//smooth: true,
data: two.series[1].data,
lineStyle: {
//color: 'rgba(200,201,10, 1)'
}
}, {
name: '累计BCWP',
type: 'line',
//smooth: true,
data: two.series[3].data,
}, {
name: '累计ACWP',
type: 'line',
//smooth: true,
data: two.series[5].data,
lineStyle: {
color: 'rgba(200,201,10, 1)'
},
itemStyle: {
normal: {
color: 'rgba(200,201,10, 1)'
}
}
}]
line('left_one', xArr1, data1)
</script>
<script>
function category(id, xArr, series) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: {
// left:'center',
text: '',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: 16
},
show: false
},
tooltip: {},
legend: {
left: '3%',
show: false,
selectedMode: false,
textStyle: {//图例文字的样式
color: '#ffffff'
}
},
xAxis: {
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
interval: 0,
rotate: 50,
textStyle: {
fontSize: 8,
color: 'rgba(255, 255, 255, 0.8)'
},
//formatter: function(params) {
// var newParamsName = ''
// var paramsNameNumber = params.length
// var provideNumber = 6
// var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
// for (let row = 0; row < rowNumber; row++) {
// newParamsName +=
// params.substring(
// row * provideNumber,
// (row + 1) * provideNumber
// ) + '\n'
// }
// return newParamsName
// }
},
type: 'category',
data: xArr
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
}
},
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ['#182067'],
width: 1,
type: 'solid'
}
}
},
series: series,
grid: {
top: '12%',
left: '10',
right: '10',
bottom: '10',
containLabel: true,
backgroundColor: 'rgba(0,162,233, 0.01)',
// borderColor: 'rgba(0,162,233, 1)'
},
backgroundColor: 'rgba(0,162,233, 0.01)',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
var person =<%=Person %>
var two = {
"title": "各工种人力情况", "xFontNum": 0, "legend": null,
"categories": person.categories,
//"categories": ["焊接工", "安全员", "安全协管员", "安装工", "钣金工", "保温工", "材料员", "财务管理", "操作工", "测量工", "车工", "出纳", "厨师", "测绘工程师", "电工", "电气工程师", "吊车司机", "防火工"],
"series": [{
"name": null, "type": null,
"data": person.series[0].data,
//"data": [1.0, 4.0, 0.0, 0.0, 0.0, 12.0, 0.0, 0.0, 10.0, 0.0, 20.0, 0.0, 6.0, 0.0, 0.0, 0.0, 8.0, 0.0],
"dataString": null, "dataObject": null
}], "series2": null
};
var xArr2 = two.categories
var data = [12, 5, 28, 43, 22]
var data1 = [21, 9, 12, 15, 8]
var series = [{
name: '各工种人力情况',
type: 'bar',
barWidth: 20,
//barGap:10,
data: two.series[0].data,
label: { //柱体上显示数值
show: true,//开启显示
position: 'top',//在上方显示
textStyle: {//数值样式
fontSize: '20px',
color: '#fff'
},
formatter: '{c}',
},
itemStyle: { normal: { color: '#0c81fe' } }
}];
category('left_two', xArr2, series)
</script>