2174 lines
81 KiB
Plaintext
2174 lines
81 KiB
Plaintext
<%@ 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>
|
||
<link rel="stylesheet" href="~/res/css/swiper.min.css">
|
||
<script src="~/res/lib/flex.js"></script>
|
||
<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/lib/swiper.min.js"></script>
|
||
<link rel="stylesheet" href="~/res/css/company.css">
|
||
</head>
|
||
<style>
|
||
html,body{
|
||
height:100%;
|
||
}
|
||
.BMap_mask {
|
||
background-color: red;
|
||
}
|
||
.table{
|
||
margin-top: 0;
|
||
}
|
||
.zyp{
|
||
margin-top: 0;
|
||
}
|
||
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="body">
|
||
<div class="side">
|
||
<div class="site fx" style="width: 100%;">
|
||
<div class="label">
|
||
风险预警
|
||
</div>
|
||
<div class="main">
|
||
<div id="fx-map"></div>
|
||
<div class="fx-box">
|
||
<div class="yj-bars">
|
||
<div class="yj-bar">
|
||
<div class="lab">资质预警</div>
|
||
<div class="num">6</div>
|
||
</div>
|
||
<div class="yj-bar">
|
||
<div class="lab">机械预警</div>
|
||
<div class="num">6</div>
|
||
</div>
|
||
</div>
|
||
<div class="wd-box">
|
||
<div class="tit">危大工程</div>
|
||
<div class="inner">
|
||
<div class="inner-box">
|
||
<div class="lab">审批完成</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
<span></span>
|
||
<div class="inner-box">
|
||
<div class="lab" style=" width: 1rem">培训人次数</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
<span></span>
|
||
<div class="inner-box">
|
||
<div class="lab">施工个数</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
<span></span>
|
||
<div class="inner-box">
|
||
<div class="lab">完工个数</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wd-box">
|
||
<div class="tit">超危大工程</div>
|
||
<div class="inner">
|
||
<div class="inner-box">
|
||
<div class="lab">审批完成</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
<span></span>
|
||
<div class="inner-box">
|
||
<div class="lab" style=" width: 1rem;">培训人次数</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
<span></span>
|
||
<div class="inner-box">
|
||
<div class="lab">施工个数</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
<span></span>
|
||
<div class="inner-box">
|
||
<div class="lab">完工个数</div>
|
||
<div class="num">2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="site zl">
|
||
<div class="label">
|
||
质量概况
|
||
</div>
|
||
<div class="main">
|
||
<div class="total">
|
||
<div class="glry">
|
||
<div class="lab">质量管理人员</div>
|
||
<div class="num">1307</div>
|
||
</div>
|
||
<div class="glry">
|
||
<div class="lab">质量培训累计人员</div>
|
||
<div class="num">5217</div>
|
||
</div>
|
||
</div>
|
||
<div class="zl-maps">
|
||
<div id="zl-map1"></div>
|
||
<div id="zl-map2"></div>
|
||
<div id="zl-map3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="site zy">
|
||
<div class="label">
|
||
作业许可
|
||
</div>
|
||
<div class="total">
|
||
<div class="zyp">
|
||
<div class="lab">动火</div>
|
||
<div class="num">0/33</div>
|
||
</div>
|
||
<div class="zyp">
|
||
<div class="lab">高出</div>
|
||
<div class="num">0/33</div>
|
||
</div>
|
||
<div class="zyp">
|
||
<div class="lab">吊装</div>
|
||
<div class="num">0/33</div>
|
||
</div>
|
||
<div class="zyp">
|
||
<div class="lab">其他</div>
|
||
<div class="num">0/33</div>
|
||
</div>
|
||
</div>
|
||
<div class="zy-table">
|
||
<div class="row" title="003-十一化建-合成氨区域-"><a
|
||
href="">003-十一化建-合成氨区域-非高风险-T0001设备吊装03-十一化建-合成氨区域-非高风险-T0001设备吊装03-十一化建-合成氨区域-非高风险-T0001设备吊装03-十一化建-合成氨区域-非高风险-T0001设备吊装</a>
|
||
</div>
|
||
<div class="row">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>
|
||
<div class="row">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>
|
||
<div class="row">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>
|
||
<div class="row">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>
|
||
<div class="row">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>
|
||
<div class="row">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>
|
||
<div class="row">003-十一化建-合成氨区域-非高风险-T0001设备吊装</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="c-side">
|
||
<div class="c-site">
|
||
<div class="num-box">
|
||
<div class="num">1656059</div>
|
||
<div class="lab">累计安全人工时</div>
|
||
</div>
|
||
<div class="num-box">
|
||
<div class="num">0</div>
|
||
<div class="lab">本月安全人工时</div>
|
||
</div>
|
||
<div class="num-box">
|
||
<div class="num">1161</div>
|
||
<div class="lab">安全培训累计人员</div>
|
||
</div>
|
||
<div class="num-box">
|
||
<div class="num">3</div>
|
||
<div class="lab">安全管理人员</div>
|
||
</div>
|
||
<div class="num-box">
|
||
<div class="num">4564</div>
|
||
<div class="lab">未遂事件</div>
|
||
</div>
|
||
</div>
|
||
<div class="aqyh">
|
||
<div class="an-boxs">
|
||
<div>安全隐患</div>
|
||
<div>
|
||
<div class="dot">
|
||
<div class="dot-c" style="background: #4F97F9;"></div>
|
||
</div>
|
||
<p>总数</p>
|
||
<p style="color: #4F97F9;">265</p>
|
||
</div>
|
||
<div>
|
||
<div class="dot">
|
||
<div class="dot-c" style="background: #12CDA2;"></div>
|
||
</div>
|
||
<p>已完成</p>
|
||
<p style="color: #12CDA2;">265</p>
|
||
</div>
|
||
<div>
|
||
<div class="dot">
|
||
<div class="dot-c" style="background: #FF7474;"></div>
|
||
</div>
|
||
<p>已完成</p>
|
||
<p style="color: #FF7474;">12</p>
|
||
</div>
|
||
<div>
|
||
<div class="dot">
|
||
<div class="dot-c" style="background: #FFD130;"></div>
|
||
</div>
|
||
<p>整改率</p>
|
||
<p style="color: #FFD130;">100%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="aerial-view">
|
||
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="../res/images/16.png">
|
||
|
||
<%--<div class="detail-box">
|
||
<div class="title">应城宏宜年产40万吨合成氨项目</div>
|
||
<div class="det-row">
|
||
<div class="col">
|
||
<span>建设单位：</span>
|
||
<span>应城宏宜年产40万端应城宏宜年产40万端应城宏宜年产40万端</span>
|
||
</div>
|
||
<div class="col">
|
||
<span >施工单位：</span>
|
||
<span >十一化建</span>
|
||
</div>
|
||
<div class="col">
|
||
<span >监理单位：</span>
|
||
<span >xxxx</span>
|
||
</div>
|
||
</div>
|
||
<p><span>工程概况：</span><span>应城宏宜年产40万吨合成氨项目应城宏宜年产40万吨合成氨项目应城宏宜年产40万吨合成氨项目应城宏宜年产40万吨合成氨项目应城宏宜年产40万吨合成氨项目应城宏宜年产40万吨合成氨项目...</span></p>
|
||
</div>--%>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-boxs">
|
||
<div class="ht-box">
|
||
<div class="label">合同工期</div>
|
||
<div class="value">700<span>天</span></div>
|
||
</div>
|
||
<div class="ht-box">
|
||
<div class="label">合同到期时间</div>
|
||
<div class="value">2024-07-14</div>
|
||
</div>
|
||
<div class="ht-box">
|
||
<div class="label">合同剩余</div>
|
||
<div class="value">100<span>天</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="site aqtj">
|
||
<div class="gjl">关键事项准点率 <span>90%</span></div>
|
||
<div class="label">
|
||
安全统计
|
||
</div>
|
||
<div class="main">
|
||
<div id="aq-map"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="side">
|
||
<div class="site gz">
|
||
<div class="label">
|
||
工作台面
|
||
</div>
|
||
<div class="main">
|
||
<div class="total">
|
||
<div class="zg">
|
||
<div class="lab">关键事项</div>
|
||
<div class="num">719</div>
|
||
</div>
|
||
<div class="zg">
|
||
<div class="lab">待办事项</div>
|
||
<div class="num">681</div>
|
||
</div>
|
||
<div class="zg">
|
||
<div class="lab">个人流程</div>
|
||
<div class="num">120</div>
|
||
</div>
|
||
<div class="zg">
|
||
<div class="lab">已办任务</div>
|
||
<div class="num">120</div>
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装003-十一化建-合成氨区域-非高风险-T0001设备吊装003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
<li>003-十一化建-合成氨区域-非高风险-T0001设备吊装</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="site p-ry" style="height: 3.75rem;">
|
||
<div class="label">
|
||
人员信息
|
||
</div>
|
||
<div class="total">
|
||
<div class="rs">
|
||
<div class="lab">当前现场人数</div>
|
||
<div class="num">1307</div>
|
||
</div>
|
||
<div class="rs">
|
||
<div class="lab">作业人员总数</div>
|
||
<div class="num">5217</div>
|
||
</div>
|
||
<div class="rs">
|
||
<div class="lab">管理人员总数</div>
|
||
<div class="num">5217</div>
|
||
</div>
|
||
</div>
|
||
<div id="ry-map" style="height: 2.3125rem;"></div>
|
||
</div>
|
||
<div class="site cltj">
|
||
<div class="label">
|
||
材料统计
|
||
</div>
|
||
<div class="main" style="padding: .1875rem .25rem;">
|
||
<div class="cl-tab">
|
||
<div class="cl-btn cl-btn-act">管道材料</div>
|
||
<div class="cl-btn">设备材料</div>
|
||
</div>
|
||
<div class="table">
|
||
<div class="row">
|
||
<div class="th-p">材料类别</div>
|
||
<div class="th-p">设计量</div>
|
||
<div class="th-p"><p>采购量</p><p><span>采购量</span><span>百分比</span></p></div>
|
||
<div class="th-p"><p>到货量</p><p><span>已到货</span><span>百分比</span></p></div>
|
||
<div class="th-p"><p>出库量</p><p><span>已出库</span><span>百分比</span></p></div>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span title="154154.1">154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="tr">材料类别</div>
|
||
<div class="tr">154154.1</div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
<div class="tr"><p><span>154154.1</span><span>105.2%</span></p></div>
|
||
</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>
|
||
<script>
|
||
// 图片滚动
|
||
var mySwiper = new Swiper('.swiper', {
|
||
autoplay: true,//可选选项，自动滑动
|
||
})
|
||
|
||
$(document).ready(function () {
|
||
// 导航按钮点击事件
|
||
$(".nav-btn>div").on("click", function (e) {
|
||
if ($(e.target).hasClass("n-btn-r") || $(e.target).hasClass("n-btn-l")) {
|
||
$(".nav-btn>div").removeClass("n-btn-r-act")
|
||
$(".nav-btn>div").removeClass("n-btn-l-act")
|
||
if ($(e.target).hasClass("n-btn-r")) {
|
||
$(e.target).addClass("n-btn-r-act")
|
||
} else if ($(e.target).hasClass("n-btn-l")) {
|
||
$(e.target).addClass("n-btn-l-act")
|
||
}
|
||
} else if ($(e.target).hasClass("t-btn")) {
|
||
$(".nav-btn>div").removeClass("t-btn-act")
|
||
$(e.target).addClass("t-btn-act")
|
||
}
|
||
// 获取跳转属性
|
||
console.log($(e.target).attr("url"))
|
||
|
||
})
|
||
|
||
$('.btns>div').on("click", function (e) {
|
||
console.log($(e.target).attr("type"))
|
||
})
|
||
|
||
$('.cl-btn').on("click", function (e) {
|
||
$('.cl-btn').removeClass("cl-btn-act")
|
||
$(e.target).addClass("cl-btn-act")
|
||
})
|
||
|
||
});
|
||
</script>
|
||
|
||
<!-- echarts 图表 -->
|
||
<script>
|
||
|
||
|
||
// 人员信息
|
||
createRYXX()
|
||
function createRYXX() {
|
||
let type = ['类别11111111', '类别211111111', '类别3', '类别4', '类别5', '类别6', '类别7', '类别8', '类别9', '类别10']
|
||
// 计划月进度
|
||
let value = [120, 80, 150, 80, 70, 110, 130, 70, 110, 130]
|
||
|
||
let opt = {
|
||
grid: {
|
||
top: 10,
|
||
bottom: 40,
|
||
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: type,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#84D7FE'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: -16, // 如果数据较多时旋转标签以避免重叠
|
||
margin: 8, // 设置标签与轴线之间的距离
|
||
// align: 'center'
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#84D7FE'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#2E87AC',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
// 设置滚动条的隐藏或显示
|
||
show: value.length > 10,
|
||
// 设置类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgb(19, 63, 100)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "rgb(16, 171, 198)",
|
||
// 设置边框颜色
|
||
borderColor: "rgb(19, 63, 100)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 9,
|
||
// 控制哪个轴，如果是number表示控制一个轴，
|
||
// 如果是Array表示控制多个轴。此处控制第二根轴
|
||
xAxisIndex: 0,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 滚动条高度
|
||
// width: "90%",
|
||
// 滚动条显示位置
|
||
height: 8,
|
||
// 距离右边
|
||
right: 20,
|
||
left: 20,
|
||
// 控制手柄的尺寸
|
||
handleSize: 0,
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 组件离容器上侧的距离
|
||
// 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
|
||
bottom: 0,
|
||
},
|
||
|
||
],
|
||
series: [
|
||
{
|
||
name: '',
|
||
data: value,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
itemStyle: {
|
||
color: '#3780FF'
|
||
}
|
||
},
|
||
|
||
]
|
||
};
|
||
var myEchart = echarts.init(document.getElementById('ry-map'));
|
||
myEchart.setOption(opt);
|
||
}
|
||
|
||
|
||
// 安全统计
|
||
createAQTJ()
|
||
function createAQTJ() {
|
||
let type = ['类别11111111', '类别211111111', '类别3', '类别4', '类别5', '类别6', '类别7', '类别8', '类别9', '类别10']
|
||
// 实物工程量
|
||
let value = [120, 80, 150, 80, 70, 110, 130, 70, 110, 130]
|
||
// 进度曲线
|
||
let value1 = [120, 80, 150, 80, 70, 110, 130, 70, 110, 130]
|
||
// 主进度线
|
||
let value2 = [132, 99, 121, 35, 86, 154, 18, 76, 123, 232]
|
||
let opt = {
|
||
grid: {
|
||
top: 60,
|
||
bottom: 40,
|
||
|
||
},
|
||
legend: {
|
||
top: 10,
|
||
data: [
|
||
{
|
||
name: "实物工程量",
|
||
textStyle: {
|
||
color: '#63CAFF'
|
||
}
|
||
},
|
||
{
|
||
name: "进度曲线",
|
||
textStyle: {
|
||
color: '#12CDA2'
|
||
}
|
||
},
|
||
{
|
||
name: "主进度线",
|
||
textStyle: {
|
||
color: '#C293FF'
|
||
}
|
||
},
|
||
]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: type,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#84D7FE'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: -16, // 如果数据较多时旋转标签以避免重叠
|
||
margin: 8, // 设置标签与轴线之间的距离
|
||
// align: 'center'
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#84D7FE'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#2E87AC',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
// 设置滚动条的隐藏或显示
|
||
show: value.length > 10,
|
||
// 设置类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgb(19, 63, 100)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "rgb(16, 171, 198)",
|
||
// 设置边框颜色
|
||
borderColor: "rgb(19, 63, 100)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 9,
|
||
// 控制哪个轴，如果是number表示控制一个轴，
|
||
// 如果是Array表示控制多个轴。此处控制第二根轴
|
||
xAxisIndex: 0,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 滚动条高度
|
||
// width: "90%",
|
||
// 滚动条显示位置
|
||
height: 8,
|
||
// 距离右边
|
||
right: 20,
|
||
left: 20,
|
||
// 控制手柄的尺寸
|
||
handleSize: 0,
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 组件离容器上侧的距离
|
||
// 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
|
||
bottom: 0,
|
||
},
|
||
|
||
],
|
||
series: [
|
||
{
|
||
name: '实物工程量',
|
||
data: value,
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
color: '#63CAFF'
|
||
},
|
||
label: {
|
||
show: true,
|
||
rotate: 90,
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
{
|
||
name: '进度曲线',
|
||
data: value1,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
itemStyle: {
|
||
color: '#EDB627'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(237, 182, 39, 1)' // 折线底下区域渐变色
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: 'rgba(237, 182, 39, 0)' // 折线底下区域渐变色
|
||
}
|
||
],
|
||
false
|
||
)
|
||
}
|
||
|
||
}
|
||
},
|
||
{
|
||
name: '进度曲线',
|
||
data: value1,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
itemStyle: {
|
||
color: '#12CDA2'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(18, 205, 162, 1)' // 折线底下区域渐变色
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: 'rgba(18, 205, 162, 0)' // 折线底下区域渐变色
|
||
}
|
||
],
|
||
false
|
||
)
|
||
}
|
||
|
||
}
|
||
},
|
||
{
|
||
name: '主进度线',
|
||
data: value2,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
itemStyle: {
|
||
color: '#C293FF'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(194, 147, 255, 1)' // 折线底下区域渐变色
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: 'rgba(194, 147, 255, 0)' // 折线底下区域渐变色
|
||
}
|
||
],
|
||
false
|
||
)
|
||
}
|
||
|
||
}
|
||
},
|
||
]
|
||
};
|
||
var myEchart = echarts.init(document.getElementById('aq-map'));
|
||
myEchart.setOption(opt);
|
||
}
|
||
|
||
// 质量概况
|
||
let weekData = [
|
||
{ name: '质量问题整改率', value1: 90, value2: 10, el: 'zl-map1' },
|
||
{ name: '一次共检合格率', value1: 88, value2: 12, el: 'zl-map2' },
|
||
{ name: '焊接一次合格率', value1: 91, value2: 9, el: 'zl-map3' },
|
||
]
|
||
weekData.forEach(e => {
|
||
createZL(e)
|
||
})
|
||
function createZL(obj) {
|
||
let AOption1 = {
|
||
title: [{
|
||
text: obj.name || '',
|
||
top: '62%',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 14,
|
||
fontWeight: 100
|
||
}
|
||
}, {
|
||
// text: `总计：${obj.value1} | 完成：${obj.value2}`,
|
||
text: [`{a|总计：}{b|${obj.value1}}{c||}{a|完成：}{d|${obj.value2}}`],
|
||
top: '80%',
|
||
left: 'center',
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
fontSize: 14,
|
||
color: '#DADADA',
|
||
},
|
||
b: {
|
||
color: '#FFFFFF',
|
||
fontSize: 14,
|
||
},
|
||
c: {
|
||
padding: [0, 6],
|
||
fontSize: 14,
|
||
color: '#FFFFFF',
|
||
},
|
||
d: {
|
||
fontSize: 14,
|
||
color: '#12CDA2',
|
||
}
|
||
}
|
||
}
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'gauge',
|
||
radius: "60%",
|
||
center: ["50%", "30%"],
|
||
startAngle: 360,
|
||
endAngle: 0,
|
||
splitNumber: 20,
|
||
progress: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
roundCap: true,
|
||
lineStyle: {
|
||
width: 20,
|
||
color: [[1, new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
|
||
[
|
||
{ offset: 0, color: 'RGBA(38, 223, 235, .4)' }, // 0% 处的颜色
|
||
{ offset: 1, color: '#29F1FA' } // 100% 处的颜色
|
||
]
|
||
)]]
|
||
}
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
formatter: function (value) {
|
||
str = `{a|${(obj.value2 / obj.value1 * 100).toFixed(2)}}{b|%}`
|
||
return str;
|
||
},
|
||
color: 'inherit',
|
||
offsetCenter: [0, 0],
|
||
rich: {
|
||
a: {
|
||
fontSize: 20,
|
||
color: '#FFFFFF'
|
||
},
|
||
b: {
|
||
fontSize: 12,
|
||
color: '#FFFFFF'
|
||
}
|
||
}
|
||
},
|
||
pointer: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
|
||
distance: -20,
|
||
length: 20,
|
||
|
||
lineStyle: {
|
||
color: '#021837',
|
||
width: 4,
|
||
}
|
||
},
|
||
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
anchor: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: obj.value1 },
|
||
],
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'gauge',
|
||
radius: "68%",
|
||
center: ["50%", "30%"],
|
||
startAngle: 20,
|
||
endAngle: 200,
|
||
splitNumber: 20,
|
||
progress: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
roundCap: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: [[1, new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
|
||
[
|
||
{ offset: 0, color: 'RGBA(38, 223, 235, .4)' }, // 0% 处的颜色
|
||
{ offset: 1, color: '#29F1FA' } // 100% 处的颜色
|
||
]
|
||
)]]
|
||
}
|
||
},
|
||
pointer: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
anchor: {
|
||
show: false
|
||
},
|
||
}
|
||
]
|
||
};
|
||
var aPassChart = echarts.init(document.getElementById(obj.el));
|
||
aPassChart.setOption(AOption1);
|
||
}
|
||
|
||
// 风险巡检图标
|
||
createFXMap()
|
||
function createFXMap() {
|
||
|
||
const list = [
|
||
{ TypeName: "重大风险", ValueAmount: 1 },
|
||
{ TypeName: "低风险", ValueAmount: 3 },
|
||
{ TypeName: "一般风险", ValueAmount: 2 },
|
||
{ TypeName: "较大风险", ValueAmount: 6 },
|
||
]
|
||
// 数据类型
|
||
let value = 26.5
|
||
|
||
const color = ['#673646', '#1A3B73', '#5E672F', '#674B1B']
|
||
const color1 = ['#FF7474', '#1FC6FF', '#E9E931', '#FFA602']
|
||
// 计算插入的数据的值
|
||
let gap = (list.reduce((a, b) => a + Number(b.ValueAmount), 0) || 0) / 100;
|
||
|
||
// 重新组织数据
|
||
const newlist = []
|
||
const newList1 = []
|
||
list.forEach((f, fi) => {
|
||
newlist.push({ name: f.TypeName, value: f.ValueAmount, label: { color: color[fi] }, itemStyle: { color: color[fi] } });
|
||
newList1.push({ name: f.TypeName, value: f.ValueAmount, label: { color: color1[fi] }, itemStyle: { color: color1[fi] } });
|
||
// 插入一条新的颜色透明的数据用来占位
|
||
newlist.push({ name: "", value: gap, label: { color: "rgba(0, 0, 0, 0)" }, itemStyle: { color: "rgba(0, 0, 0, 0)" } })
|
||
newList1.push({ name: "", value: gap, label: { color: "rgba(0, 0, 0, 0)" }, itemStyle: { color: "rgba(0, 0, 0, 0)" } })
|
||
})
|
||
|
||
var opt = {
|
||
title: [{
|
||
text: [`{a|${value}}%`],
|
||
top: 80,
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 14,
|
||
fontWeight: 100,
|
||
rich: {
|
||
a: {
|
||
fontSize: 24
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
text: '数据类型',
|
||
top: 110,
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#B4C0CC',
|
||
fontSize: 12
|
||
|
||
}
|
||
},
|
||
],
|
||
graphic: [
|
||
{
|
||
type: 'rect', // 图形类型，这里是矩形
|
||
left: 'center', // 矩形的中心位置的左侧，'center' 表示在容器中心
|
||
top: 48, // 矩形的中心位置的顶部，'center' 表示在容器中心
|
||
z: 100, // z 层级，用于控制重叠图形的堆叠顺序
|
||
shape: {
|
||
width: 104, // 矩形的宽度
|
||
height: 104 // 矩形的高度，设置为与宽度相同，形成正方形
|
||
},
|
||
style: {
|
||
fill: 'rgba(0,0,0,0)', // 填充色
|
||
stroke: '#DADADA', // 边框颜色
|
||
lineWidth: .5, // 边框宽度
|
||
lineDash: 'dashed'
|
||
}
|
||
},
|
||
{
|
||
type: 'rect', // 图形类型，这里是矩形
|
||
left: 'center', // 矩形的中心位置的左侧，'center' 表示在容器中心
|
||
top: 38, // 矩形的中心位置的顶部，'center' 表示在容器中心
|
||
z: 100, // z 层级，用于控制重叠图形的堆叠顺序
|
||
shape: {
|
||
width: 120, // 矩形的宽度
|
||
height: 120 // 矩形的高度，设置为与宽度相同，形成正方形
|
||
},
|
||
style: {
|
||
fill: 'rgba(0,0,0,0)', // 填充色
|
||
stroke: '#DADADA', // 边框颜色
|
||
lineWidth: .5, // 边框宽度
|
||
lineDash: 'dashed'
|
||
}
|
||
}
|
||
],
|
||
legend: {
|
||
orient: 'horizontal',
|
||
top: '65%',
|
||
icon: 'circle',
|
||
textStyle: {
|
||
color: '#DADADA',
|
||
rich: {
|
||
0: {
|
||
color: '#FF7474'
|
||
},
|
||
1: {
|
||
color: '#1FC6FF'
|
||
},
|
||
2: {
|
||
color: '#E9E931'
|
||
},
|
||
3: {
|
||
color: '#FFA602'
|
||
}
|
||
}
|
||
},
|
||
formatter: function (h) {
|
||
let str = ''
|
||
let colorStyle = 'a'
|
||
list.forEach((e, i) => {
|
||
if (e.TypeName == h) {
|
||
if (e.TypeName.length == 4) {
|
||
str = `${e.TypeName} {${i}|${e.ValueAmount}}`
|
||
} else {
|
||
str = `${e.TypeName} {${i}|${e.ValueAmount}}`
|
||
}
|
||
|
||
}
|
||
})
|
||
|
||
return str;
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [55, 60],
|
||
center: ['50%', 100],
|
||
data: newList1,
|
||
// silent:'ture',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: [42, 52],
|
||
center: ['50%', 100],
|
||
data: newlist,
|
||
silent: true,
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
},
|
||
|
||
{
|
||
|
||
zlevel: 101,
|
||
name: '',
|
||
type: 'gauge',
|
||
radius: 70,
|
||
center: ['50%', 100],
|
||
startAngle: 90,
|
||
endAngle: -240,
|
||
// splitNumber: 20,
|
||
progress: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
roundCap: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: [[1, '#083B5E']]
|
||
}
|
||
},
|
||
pointer: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
anchor: {
|
||
show: false
|
||
},
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'gauge',
|
||
radius: 80,
|
||
center: ['50%', 100],
|
||
startAngle: 0,
|
||
endAngle: -360,
|
||
// splitNumber: 20,
|
||
progress: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
roundCap: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: [[1, '#083B5E']]
|
||
}
|
||
},
|
||
pointer: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
anchor: {
|
||
show: false
|
||
},
|
||
}
|
||
]
|
||
};
|
||
|
||
var myEchart = echarts.init(document.getElementById('fx-map'));
|
||
myEchart.setOption(opt);
|
||
}
|
||
</script>
|
||
|