长春市地市下钻
This commit is contained in:
parent
c09dc6bde3
commit
4b27073e72
|
|
@ -0,0 +1,590 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
height: 100%;
|
||||
padding: 1% 0.5% 0 0.45%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 左侧样式 start */
|
||||
#left-box {
|
||||
width: 37%;
|
||||
|
||||
}
|
||||
|
||||
#echarts-map {
|
||||
width: 100%;
|
||||
height: 96vh;
|
||||
}
|
||||
|
||||
#check-risk {
|
||||
width: 150PX;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.check-risk {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.check-risk img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.check-risk p {
|
||||
width: calc(90% - 25px);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.map-p {
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
/* 左侧样式 end */
|
||||
/* 中部样式 start */
|
||||
#center-box {
|
||||
width: 34%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.module-title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
background: url("../../img/cityHome/module_title_gs.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.other-title {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.module-title p {
|
||||
font-size: 18px;
|
||||
margin: -5px 0 0 6px;
|
||||
}
|
||||
|
||||
/* 工程统计 start */
|
||||
#center-top {
|
||||
width: 100%;
|
||||
height: 38%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#pro-box,
|
||||
#ticket-box {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#pro-info {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.pro-div {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
#pro-info .pro-div:nth-child(1) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#pro-info .pro-div:nth-child(2) {
|
||||
justify-content: space-between;
|
||||
height: 47%;
|
||||
}
|
||||
|
||||
.pro-common {
|
||||
width: 31%;
|
||||
height: 100%;
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pro-common p:nth-child(1) {
|
||||
font-size: 30px;
|
||||
font-family: 'zcoolqingkehuangyouti';
|
||||
}
|
||||
|
||||
#zj {
|
||||
width: 51%;
|
||||
background: url("../../img/cityHome/zj.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#zs {
|
||||
background: url("../../img/cityHome/zs.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#tg {
|
||||
background: url("../../img/cityHome/tg.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
#wg {
|
||||
background: url("../../img/cityHome/wg.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
/* 工程统计 end */
|
||||
/* 作业票 start */
|
||||
#ticket-info {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.ticket-div {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
background: url("../../img/cityHome/ticket.png") no-repeat 0 0 / 100% 100%;
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ticket-div p:nth-child(2) {
|
||||
font-size: 30px;
|
||||
font-family: 'zcoolqingkehuangyouti';
|
||||
}
|
||||
|
||||
/* 作业票 end */
|
||||
/* 风险情况 start */
|
||||
#center-center {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
#risk-info {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.risk-div {
|
||||
width: 24%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.number-box {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.content-item {
|
||||
width: 49px;
|
||||
height: 56px;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
font-size: 40px;
|
||||
font-family: 'zcoolqingkehuangyouti';
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#rollNumberList2 .content-item {
|
||||
background: url("../../img/cityHome/two_new.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#rollNumberList3 .content-item {
|
||||
background: url("../../img/cityHome/three.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#rollNumberList4 .content-item {
|
||||
background: url("../../img/cityHome/four.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#rollNumberList5 .content-item {
|
||||
background: url("../../img/cityHome/five.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.content-item+.content-item {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 风险情况 end */
|
||||
|
||||
/* 其他 start */
|
||||
#center-bottom {
|
||||
width: 100%;
|
||||
height: 42%;
|
||||
}
|
||||
|
||||
#other-info {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#other-module {
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#other-echarts {
|
||||
width: 83%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#other-module ul {
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#other-module ul li {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: url("../../img/cityHome/label_no_checked.png") no-repeat 0 0 / 100% 100%;
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#other-module ul li:nth-child(1) {
|
||||
background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#other-module ul li:hover {
|
||||
background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.other-div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#person-num,
|
||||
#team-num {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#team-num p span, .person-num-box p span{
|
||||
font-size: 16px;
|
||||
}
|
||||
#person-num{
|
||||
flex-direction: column;
|
||||
}
|
||||
.person-num-box{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.person-num-box p{
|
||||
width: 24%;
|
||||
margin-right: 1%;
|
||||
font-size: 13px;
|
||||
}
|
||||
#person-echarts,
|
||||
#team-echarts {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
#ticket-echarts,
|
||||
#risk-echarts {
|
||||
width: 100%;
|
||||
height: calc(100%);
|
||||
}
|
||||
|
||||
/* 其他 end */
|
||||
|
||||
/* 中部样式 end */
|
||||
/* 右侧样式 start */
|
||||
#right-box {
|
||||
width: 28%;
|
||||
}
|
||||
|
||||
/* 许可及销号 start */
|
||||
#right-top {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#xk-info {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.xk-div {
|
||||
width: 24%;
|
||||
height: 92%;
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xk-div p:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#yxk {
|
||||
background: url("../../img/cityHome/yxk.png") no-repeat 0 0 / 100% 100%;
|
||||
color: #0BDC8C;
|
||||
}
|
||||
|
||||
#bxk {
|
||||
background: url("../../img/cityHome/bxk.png") no-repeat 0 0 / 100% 100%;
|
||||
color: #66FFFF;
|
||||
}
|
||||
|
||||
#yxh {
|
||||
background: url("../../img/cityHome/yxh.png") no-repeat 0 0 / 100% 100%;
|
||||
color: #4AC4FE;
|
||||
}
|
||||
|
||||
#wxh {
|
||||
background: url("../../img/cityHome/wxh.png") no-repeat 0 0 / 100% 100%;
|
||||
color: #C65CFF;
|
||||
}
|
||||
|
||||
/* 许可及销号 end */
|
||||
/* 周计划 start */
|
||||
#right-center {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#weekPlan-echarts {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
#weekPlan-div {
|
||||
width: 140px;
|
||||
height: 68px;
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 73%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: url("../../img/cityHome/light.png") no-repeat 0 0 / 100% 100%;
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#weekPlan-div p:nth-child(1) {
|
||||
font-size: 30px;
|
||||
font-family: 'zcoolqingkehuangyouti';
|
||||
}
|
||||
|
||||
/* 周计划 end */
|
||||
|
||||
/* 预警信息 start */
|
||||
#right-bottom {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#early-info {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#early-module {
|
||||
width: 24%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#early-table {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#early-module ul {
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#early-module ul li {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: url("../../img/cityHome/label_no_checked.png") no-repeat 0 0 / 100% 100%;
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#early-module ul li:nth-child(1) {
|
||||
background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#early-module ul li:hover {
|
||||
background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
#early-ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#early-ul li {
|
||||
width: calc(100% - 5px);
|
||||
height: 40px;
|
||||
margin-bottom: 5px;
|
||||
background-size: unset !important;
|
||||
background-position: center center !important;
|
||||
background: url("../../img/cityHome/early_back.png") no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
|
||||
.li-child {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.li-child:nth-child(1) {
|
||||
width: 65%;
|
||||
}
|
||||
.li-child:nth-child(2) {
|
||||
width: 35%;
|
||||
}
|
||||
.li-child p {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li:nth-child(1) p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.early-module {
|
||||
position: relative;
|
||||
/* display: inline-block; */
|
||||
}
|
||||
|
||||
.early-module::after {
|
||||
content: attr(data-notification);
|
||||
/* 使用伪元素的content属性获取通知数量 */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #FF5D5D;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 预警信息 end */
|
||||
/* 右侧样式 end */
|
||||
|
||||
/*滚动条样式start*/
|
||||
|
||||
/* ::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #e7e7f1 !important;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(94, 96, 97, 0.43) !important;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(94, 96, 97, 0.43) !important;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: rgba(94, 96, 97, 0.43) !important;
|
||||
border-radius: 0px;
|
||||
} */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #dadee8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 14px;
|
||||
border-style: dashed;
|
||||
border-color: transparent;
|
||||
border-width: 1px;
|
||||
background-color: #dadee8;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
/*滚动条样式end*/
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../js/layui-v2.9.2/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../css/compreDisplay/homeCityJump.css">
|
||||
<link rel="stylesheet" href="../../js/public/scrollNum/scrollNum.css">
|
||||
<link rel="stylesheet" href="../../js/public/toolTip/mTips.css">
|
||||
<script src="../../js/public/jquery-3.6.0.js" type="text/javascript"></script>
|
||||
<!--拦截及公共ip-->
|
||||
<script src="../../js/public/sm3.js" type="text/javascript"></script>
|
||||
<script src="../../js/system/IPUtils.js"></script>
|
||||
<script src="../../js/system/ajax_intercept.js"></script>
|
||||
<script src="../../js/system/public_utils.js"></script>
|
||||
<script src="../../js/public/aes.js" type="text/javascript"></script>
|
||||
<script src="../../js/public/public.js"></script>
|
||||
<!--拦截及公共ip-->
|
||||
<script src="../../js/public/ajaxRequest.js" type="text/javascript"></script>
|
||||
<script src="../../js/public/sm3.js" type="text/javascript"></script>
|
||||
|
||||
<script src="../../js/layui-v2.9.2/layui/layui.js"></script>
|
||||
<script src="../../js/public/echarts.js"></script>
|
||||
<script src="../../js/public/echarts-gl.min.js"></script>
|
||||
<script src="../../js/public/commonUtils.js"></script>
|
||||
<script src="../../js/public/permission.js"></script>
|
||||
<script src="../../js/public/scrollNum/scrollNum.js"></script>
|
||||
<script src="../../js/public/toolTip/mTips.js"></script>
|
||||
<title>地市首页</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content" class="layout">
|
||||
<div id="left-box" class="main-box">
|
||||
<!-- 地市电子地图 -->
|
||||
<div id="echarts-map">
|
||||
</div>
|
||||
<!-- 风险等级勾选 -->
|
||||
<div id="check-risk" class="layout">
|
||||
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-1-check.png">
|
||||
<p checkedName="" style="color: #fff;">全选(<span id="allNum">0</span>)</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-2-check.png">
|
||||
<p checkedName="2" style="color: #DD690B;">二级(<span id="twoNum">0</span>)</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-3-check.png">
|
||||
<p checkedName="3" style="color: #FFE91F;">三级(<span id="threeNum">0</span>)</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-4-check.png">
|
||||
<p checkedName="4" style="color: #2aa998;">四级(<span id="fourNum">0</span>)</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-5-check.png">
|
||||
<p checkedName="5" style="color: #70e180;">五级(<span id="fiveNum">0</span>)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="center-box" class="main-box layout">
|
||||
<div id="center-top" class="layout">
|
||||
<!-- 工程统计 -->
|
||||
<div id="pro-box">
|
||||
<div class="module-title layout">
|
||||
<p>工程统计</p>
|
||||
</div>
|
||||
<div id="pro-info" class="layout">
|
||||
<div class="pro-div layout">
|
||||
<div id="zj" class="pro-common layout">
|
||||
<p style="color: #60F1F3;" id="zjNum">0</p>
|
||||
<p>在建工程</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pro-div layout">
|
||||
<div id="zs" class="pro-common layout">
|
||||
<p id="zsNum">0</p>
|
||||
<p>待开工</p>
|
||||
</div>
|
||||
<div id="tg" class="pro-common layout">
|
||||
<p id="tgNum">0</p>
|
||||
<p>停工</p>
|
||||
</div>
|
||||
<div id="wg" class="pro-common layout">
|
||||
<p id="wgNum">0</p>
|
||||
<p>完工</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 作业票 -->
|
||||
<div id="ticket-box">
|
||||
<div class="module-title layout">
|
||||
<p>作业票</p>
|
||||
</div>
|
||||
<div id="ticket-info" class="layout">
|
||||
<div class="ticket-div layout">
|
||||
<p>A票</p>
|
||||
<p id="aTicketNum">0</p>
|
||||
</div>
|
||||
<div class="ticket-div layout">
|
||||
<p>B票</p>
|
||||
<p id="bTicketNum">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 风险情况 -->
|
||||
<div id="center-center">
|
||||
<div class="module-title other-title layout">
|
||||
<p>风险情况</p>
|
||||
</div>
|
||||
<div id="risk-info" class="layout">
|
||||
<div class="risk-div layout">
|
||||
<p style="color: rgb(137, 37, 41) ;">二级</p>
|
||||
<div id="rollNumberList2" class="number-box layout">
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-div layout">
|
||||
<p style="color: #F9770F ;">三级</p>
|
||||
<div id="rollNumberList3" class="number-box layout">
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-div layout">
|
||||
<p style="color: #FFE922 ;">四级</p>
|
||||
<div id="rollNumberList4" class="number-box layout">
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-div layout">
|
||||
<p style="color: #32F474 ;">五级</p>
|
||||
<div id="rollNumberList5" class="number-box layout">
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
<div class="content-item">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 其他 -->
|
||||
<div id="center-bottom">
|
||||
<div class="module-title other-title layout">
|
||||
<p>其他</p>
|
||||
</div>
|
||||
<div id="other-info" class="layout">
|
||||
<div id="other-module">
|
||||
<ul class="layout">
|
||||
<li class="layout" isChecked='1' labelValue='1' onclick="checkLabel(this,'1','one')">人员情况
|
||||
</li>
|
||||
<li class="layout" isChecked='0' labelValue='2' onclick="checkLabel(this,'2','two')">队伍情况
|
||||
</li>
|
||||
<li class="layout" isChecked='0' labelValue='3' onclick="checkLabel(this,'3','three')">作业票趋势
|
||||
</li>
|
||||
<li class="layout" isChecked='0' labelValue='4' onclick="checkLabel(this,'4','four')">风险趋势
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="other-echarts">
|
||||
<!-- 人员情况 -->
|
||||
<div id="other-one" moduleValue='1' class="other-div layout">
|
||||
<div id="person-num" class="layout">
|
||||
<div class="person-num-box layout">
|
||||
</div>
|
||||
<div class="person-num-box layout">
|
||||
</div>
|
||||
</div>
|
||||
<div id="person-echarts"></div>
|
||||
</div>
|
||||
<!-- 队伍情况 -->
|
||||
<div id="other-two" moduleValue='2' class="other-div" style="display: none;">
|
||||
<div id="team-num" class="layout">
|
||||
<p>当日施工队伍数：<span id="teamNum">0</span></p>
|
||||
</div>
|
||||
<div id="team-echarts"></div>
|
||||
</div>
|
||||
<!-- 作业票趋势 -->
|
||||
<div id="other-three" moduleValue='3' class="other-div" style="display: none;">
|
||||
<div id="ticket-echarts"></div>
|
||||
</div>
|
||||
<!-- 风险趋势 -->
|
||||
<div id="other-four" moduleValue='4' class="other-div" style="display: none;">
|
||||
<div id="risk-echarts"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-box" class="main-box">
|
||||
<div id="right-top">
|
||||
<div class="module-title layout">
|
||||
<p>许可及销号</p>
|
||||
</div>
|
||||
<div id="xk-info" class="layout">
|
||||
<div class="xk-div layout" id="yxk">
|
||||
<p id="yxkNum">0</p>
|
||||
<p>已许可</p>
|
||||
</div>
|
||||
<div class="xk-div layout" id="bxk">
|
||||
<p id="bxkNum">0</p>
|
||||
<p>不许可</p>
|
||||
</div>
|
||||
<div class="xk-div layout" id="yxh">
|
||||
<p id="yxhNum">0</p>
|
||||
<p>已销号</p>
|
||||
</div>
|
||||
<div class="xk-div layout" id="wxh">
|
||||
<p id="wxhNum">0</p>
|
||||
<p>未销号</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-center">
|
||||
<div class="module-title layout">
|
||||
<p>周计划</p>
|
||||
</div>
|
||||
<div id="weekPlan-echarts"></div>
|
||||
<div id="weekPlan-div" class="layout">
|
||||
<p id="weekPlanNum">0</p>
|
||||
<p>周计划总数</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-bottom">
|
||||
<div class="module-title layout">
|
||||
<p>预警提醒</p>
|
||||
</div>
|
||||
<div id="early-info" class="layout">
|
||||
<div id="early-module">
|
||||
<ul class="layout">
|
||||
<li class="layout early-module" id="early-module1" isChecked='1' labelValue='1'
|
||||
onclick="checkEarlyLabel(this,'1')">今日无施工</li>
|
||||
<li class="layout early-module" id="early-module2" isChecked='0' labelValue='2'
|
||||
onclick="checkEarlyLabel(this,'2')">新进班组</li>
|
||||
<li class="layout early-module" id="early-module3" isChecked='0' labelValue='3'
|
||||
onclick="checkEarlyLabel(this,'3')">七日无施工</li>
|
||||
<li class="layout early-module" id="early-module4" isChecked='0' labelValue='4'
|
||||
onclick="checkEarlyLabel(this,'4')" >人数变化大</li>
|
||||
<li class="layout early-module" id="early-module5" isChecked='0' labelValue='5'
|
||||
onclick="checkEarlyLabel(this,'5')" >工序变化</li>
|
||||
<!-- <li class="layout early-module" id="early-module6" isChecked='0' labelValue='6'
|
||||
onclick="checkEarlyLabel(this,'6')">作业类型</li> -->
|
||||
<li class="layout early-module" id="early-module7" isChecked='0' labelValue='7'
|
||||
onclick="checkEarlyLabel(this,'7')">球机异常</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="early-table">
|
||||
<ul id="early-ul">
|
||||
<li class="layout">
|
||||
<div class="li-child layout">
|
||||
<p>工程名称</p>
|
||||
</div>
|
||||
<div class="li-child layout">
|
||||
<p>班组长</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../js/compreDisplay/cityHomeJump/cityHomeAjax.js" type="text/javascript"></script>
|
||||
<script src="../../js/compreDisplay/cityHomeJump/cityHomeStyle.js" type="text/javascript"></script>
|
||||
<script src="../../js/compreDisplay/cityHomeJump/cityHomeEcharts.js" type="text/javascript"></script>
|
||||
<script src="../../js/compreDisplay/cityHomeJump/cityHomeEchartsMap.js" type="text/javascript"></script>
|
||||
<script src="../../js/compreDisplay/cityHomeJump/cityHome.js" type="text/javascript"></script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,30 @@
|
|||
let form, layer;
|
||||
let user = getUser();
|
||||
let cityName = sessionStorage.getItem('cityName') || '长春市';
|
||||
let orgId = sessionStorage.getItem('orgId') || '07A0';
|
||||
user.orgId = orgId;
|
||||
|
||||
// 电子地图风险作业点 存放的缓存数据
|
||||
let mainMapPointList = [], mapPointList = [];
|
||||
// 定时刷新启动按钮
|
||||
let scheduledTask = false;
|
||||
// 风险情况
|
||||
let update2 = null, update3 = null, update4 = null, update5 = null;
|
||||
layui.use(['form', 'layer'], function () {
|
||||
form = layui.form;
|
||||
layer = layui.layer;
|
||||
})
|
||||
loadData();
|
||||
// 初始化首页数据
|
||||
function loadData() {
|
||||
loadRiskMapAjax();
|
||||
loadProNumAjax();
|
||||
loadTicketNumAjax();
|
||||
loadRiskNumAjax();
|
||||
loadOtherAjax('1');
|
||||
loadXHNumAjax();
|
||||
loadWeekPlanAjax();
|
||||
loadEarlyNumAjax();
|
||||
loadEarlyAjax('1');
|
||||
timedRefresh();
|
||||
}
|
||||
|
|
@ -0,0 +1,401 @@
|
|||
// 首页数据定时刷新-5min 刷新一次
|
||||
function timedRefresh() {
|
||||
if (scheduledTask) {
|
||||
loadRiskMapAjax(1)
|
||||
loadRiskNumAjax(1);
|
||||
loadEarlyNumAjax();
|
||||
} else {
|
||||
scheduledTask = true;
|
||||
}
|
||||
setTimeout(timedRefresh, 1000 * 60 * 5);
|
||||
}
|
||||
|
||||
// 电子地图
|
||||
function loadRiskMapAjax(type) {
|
||||
let url = dataUrl + 'proteam/pot/city/getCityMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'orgId': user.orgId
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
mapPointList.splice(0, mapPointList.length)
|
||||
mainMapPointList.splice(0, mainMapPointList.length)
|
||||
if (result.data && result.data.length > 0) {
|
||||
let allNum = 0, twoNum = 0, threeNum = 0, fourNum = 0, fiveNum = 0;
|
||||
$.each(result.data, function (index, item) {
|
||||
if (item.riskType === '2') {
|
||||
twoNum++;
|
||||
} else if (item.riskType === '3') {
|
||||
threeNum++;
|
||||
} else if (item.riskType === '4') {
|
||||
fourNum++;
|
||||
} else if (item.riskType === '5') {
|
||||
fiveNum++;
|
||||
}
|
||||
allNum++;
|
||||
item.value = parseInt(item.riskType)
|
||||
item.coordinate = [parseFloat(item.lon), parseFloat(item.lat)]
|
||||
mapPointList.push(item)
|
||||
mainMapPointList.push(JSON.parse(JSON.stringify(item)))
|
||||
})
|
||||
setRiskNumByMap(allNum, twoNum, threeNum, fourNum, fiveNum);
|
||||
if (type === 1) { // 定时刷新时使用
|
||||
mapSearch();
|
||||
map2(mapPointList);
|
||||
} else {
|
||||
setCityMap(user.orgId, user.isSup, mapPointList);
|
||||
}
|
||||
} else {
|
||||
if (type === 1) { // 定时刷新时使用
|
||||
mapSearch();
|
||||
map2(mapPointList);
|
||||
} else {
|
||||
setCityMap(user.orgId, user.isSup, mapPointList);
|
||||
}
|
||||
}
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
|
||||
});
|
||||
// 设置电子地图风险作业点数量
|
||||
function setRiskNumByMap(allNum, twoNum, threeNum, fourNum, fiveNum) {
|
||||
$('#allNum').html(allNum);
|
||||
$('#twoNum').html(twoNum);
|
||||
$('#threeNum').html(threeNum);
|
||||
$('#fourNum').html(fourNum);
|
||||
$('#fiveNum').html(fiveNum);
|
||||
}
|
||||
}
|
||||
|
||||
// 工程统计
|
||||
function loadProNumAjax() {
|
||||
let url = dataUrl + 'proteam/pot/city/getProMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'orgId': user.orgId
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setProNum(result);
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
|
||||
});
|
||||
|
||||
// 工程统计数量赋值
|
||||
function setProNum(obj) {
|
||||
|
||||
$('#zjNum').html(obj.zjPro);
|
||||
$('#zsNum').html(obj.zsPro);
|
||||
$('#tgNum').html(obj.tgPro);
|
||||
$('#wgNum').html(obj.wgPro);
|
||||
}
|
||||
}
|
||||
|
||||
// 作业票
|
||||
function loadTicketNumAjax() {
|
||||
let url = dataUrl + 'proteam/pot/city/getTicketMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'orgId': user.orgId
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setTicketNum(result);
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
|
||||
});
|
||||
|
||||
// 作业票数量赋值
|
||||
function setTicketNum(obj) {
|
||||
$('#aTicketNum').html(obj.A);
|
||||
$('#bTicketNum').html(obj.B);
|
||||
}
|
||||
}
|
||||
|
||||
// 风险情况
|
||||
function loadRiskNumAjax(type) {
|
||||
let url = dataUrl + 'proteam/pot/city/getCityMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'orgId': user.orgId
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setRiskNum(result);
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
|
||||
});
|
||||
|
||||
// 风险等级数量赋值
|
||||
function setRiskNum(obj) {
|
||||
let num2 = obj.two, num3 = obj.three, num4 = obj.four, num5 = obj.five;
|
||||
if (type) {
|
||||
update2(num2), update3(num3), update4(num4), update5(num5);
|
||||
} else {
|
||||
update2 = $("#rollNumberList2").rollNumber(num2);
|
||||
update3 = $("#rollNumberList3").rollNumber(num3);
|
||||
update4 = $("#rollNumberList4").rollNumber(num4);
|
||||
update5 = $("#rollNumberList5").rollNumber(num5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 其他
|
||||
function loadOtherAjax(type) {
|
||||
let url = dataUrl + 'proteam/pot/city/getWorkTeamMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'orgId': user.orgId,
|
||||
'type': type
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setOtherData(result);
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
|
||||
});
|
||||
|
||||
// 其他赋值
|
||||
function setOtherData(obj) {
|
||||
console.error(obj);
|
||||
|
||||
if (type === '1') {
|
||||
let dataArr = [];
|
||||
const list = obj.list;
|
||||
if(list && list.length > 0){
|
||||
dataArr.push({value:obj.allNUM,name:'当日施工人数'})
|
||||
$.each(list,function(index,item){
|
||||
dataArr.push({value:item.personNum,name:item.personType})
|
||||
})
|
||||
}else{
|
||||
dataArr = [
|
||||
{ value: 0, name: "当日施工人数"},
|
||||
{ value: 0, name: "班组负责人"},
|
||||
{ value: 0, name: "班组安全员"},
|
||||
{ value: 0, name: "班组技术员"},
|
||||
{ value: 0, name: "副班长"},
|
||||
{ value: 0, name: "特种作业人员"},
|
||||
{ value: 0, name: "一般作业人员"},
|
||||
{ value: 0, name: "其他技术人员"},
|
||||
];
|
||||
}
|
||||
let html = '',cent = ''
|
||||
$.each(dataArr,function(index,item){
|
||||
if(index <= 3){
|
||||
html += '<p>'+item.name+'：<span>'+item.value+'</span>人</p>';
|
||||
}else{
|
||||
cent += '<p>'+item.name+'：<span>'+item.value+'</span>人</p>';
|
||||
}
|
||||
})
|
||||
$('.person-num-box').eq(0).empty().html(html);
|
||||
$('.person-num-box').eq(1).empty().html(cent);
|
||||
initEchartsOne(obj.time, obj.nums);
|
||||
} else if (type === '2') {
|
||||
$('#teamNum').html(obj.today);
|
||||
initEchartsTwo(obj.time, obj.nums);
|
||||
} else if (type === '3') {
|
||||
console.log(obj);
|
||||
initEchartsThree(obj.time, obj.ANum, obj.BNum);
|
||||
} else if (type === '4') {
|
||||
initEchartsFour(obj.time, obj.twoRisk, obj.threeRisk, obj.fourRisk, obj.fiveRisk);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 作业许可及销号
|
||||
function loadXHNumAjax() {
|
||||
let url = dataUrl + 'proteam/pot/city/getTicketXhMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'orgId': user.orgId
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setXHNum(result);
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
|
||||
});
|
||||
|
||||
// 作业许可及销号数量赋值
|
||||
function setXHNum(obj) {
|
||||
$('#yxkNum').html(obj.permit);
|
||||
$('#bxkNum').html(obj.notPermit);
|
||||
$('#yxhNum').html(obj.cancel);
|
||||
$('#wxhNum').html(obj.notCancel);
|
||||
}
|
||||
}
|
||||
|
||||
// 周计划
|
||||
function loadWeekPlanAjax() {
|
||||
let url = dataUrl + 'proteam/pot/city/getWeekPlanMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'orgId': user.orgId
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
|
||||
let obj = result;
|
||||
initEchartsFive(obj.twoRisk, obj.threeRisk, obj.foureRisk, obj.fiveRisk);
|
||||
let planNum = result.planNum;
|
||||
$('#weekPlanNum').html(planNum);
|
||||
|
||||
} else if (result.code === 500) {
|
||||
initEchartsFive(0, 0, 0, 0);
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
initEchartsFive(0, 0, 0, 0);
|
||||
});
|
||||
}
|
||||
|
||||
// 预警提醒数量
|
||||
function loadEarlyNumAjax() {
|
||||
let url = dataUrl + 'proteam/pot/city/getEarMaps';
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'currentUserOrgId': user.orgId,
|
||||
'currentUserId':user.currentUserId
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setEarlyNumByType(result);
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
setEarlyNumByType(null);
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
setEarlyNumByType(null);
|
||||
});
|
||||
|
||||
// 预警提醒数量赋值
|
||||
function setEarlyNumByType(data) {
|
||||
if (data) {
|
||||
|
||||
document.querySelector('#early-module' + (1) + '').setAttribute('data-notification', data.one);
|
||||
document.querySelector('#early-module' + (2) + '').setAttribute('data-notification', data.two);
|
||||
document.querySelector('#early-module' + (3) + '').setAttribute('data-notification', data.three);
|
||||
document.querySelector('#early-module' + (4) + '').setAttribute('data-notification', data.four);
|
||||
document.querySelector('#early-module' + (5) + '').setAttribute('data-notification', data.five);
|
||||
// document.querySelector('#early-module' + (6) + '').setAttribute('data-notification', data.six);
|
||||
document.querySelector('#early-module' + (7) + '').setAttribute('data-notification', data.seven);
|
||||
|
||||
} else {
|
||||
for (let i = 1; i <= 7; i++) {
|
||||
let earlyModule = document.querySelector('#early-module' + (i) + '');
|
||||
earlyModule.setAttribute('data-notification', 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预警提醒
|
||||
function loadEarlyAjax(type) {
|
||||
let url = dataUrl + 'proteam/pot/early/getNoWorkByDay';
|
||||
if (type === '1') { // 今日无施工
|
||||
url = dataUrl + 'proteam/pot/early/getNoWorkByDay';
|
||||
} else if (type === '2') { // 新进班组
|
||||
url = dataUrl + 'proteam/pot/early/getNewTeam';
|
||||
} else if (type === '3') { // 七日无施工
|
||||
url = dataUrl + 'proteam/pot/early/getNoWorkBySeven';
|
||||
} else if (type === '4') { // 人数变化大
|
||||
url = dataUrl + 'proteam/pot/early/getTeamByPer';
|
||||
} else if (type === '5') { // 工序变化
|
||||
url = dataUrl + 'proteam/pot/early/getTeamByWork';
|
||||
} else if (type === '6') { // 作业类型
|
||||
url = dataUrl + 'proteam/pot/early/getTeamByJob';
|
||||
} else if (type === '7') { // 球机异常
|
||||
url = dataUrl + 'proteam/pot/early/getBallByUnusual';
|
||||
}
|
||||
let params = {
|
||||
'isSup': user.isSup,
|
||||
'currentUserOrgId': user.orgId,
|
||||
'currentUserId':user.currentUserId,
|
||||
'pageNum': 1,
|
||||
'pageSize': 10000,
|
||||
};
|
||||
ajaxRequest(url, "POST", params, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setEarlyDataByType(result.rows);
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, { icon: 2 })
|
||||
setEarlyDataByType(null);
|
||||
} else if (result.code === 401) {
|
||||
logout(1);
|
||||
}
|
||||
}, function (xhr) {
|
||||
setEarlyDataByType(null);
|
||||
});
|
||||
|
||||
// 预警提醒赋值
|
||||
function setEarlyDataByType(dataList) {
|
||||
$('#early-ul li:not(:first)').remove();
|
||||
let html = '';
|
||||
if (dataList && dataList.length > 0) {
|
||||
$.each(dataList, function (index, item) {
|
||||
html += '<li class="layout">' +
|
||||
'<div class="li-child layout"><p data-mtpis="' + item.proName + '">' + item.proName + '</p></div>' +
|
||||
'<div class="li-child layout"><p data-mtpis="' + (item.fzrName + ' ' + isNull(item.phone)) + '">' + (item.fzrName + '<br>' +isNull(item.phone)) + '</p></div>' +
|
||||
'</li>';
|
||||
})
|
||||
} else {
|
||||
html += '<li class="layout">' +
|
||||
'<div class="li-child layout" style="width:100%;justify-content: center;"><p>无数据</p></div>' +
|
||||
'</li>';
|
||||
}
|
||||
$('#early-ul li').after(html);
|
||||
}
|
||||
|
||||
function isNull(data){
|
||||
if(data==null ||data =='NULL' || data=='null'){
|
||||
return '';
|
||||
}else{
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,880 @@
|
|||
let myChart = echarts.init(document.getElementById('person-echarts'));
|
||||
let myChart3 = echarts.init(document.getElementById('team-echarts'));
|
||||
let myChart4 = echarts.init(document.getElementById('ticket-echarts'));
|
||||
let myChart5 = echarts.init(document.getElementById('risk-echarts'));
|
||||
let myChart6 = echarts.init(document.getElementById('weekPlan-echarts'));
|
||||
/*人员情况 echarts*/
|
||||
function initEchartsOne(nameList, valueList) {
|
||||
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
let option = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '5%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
borderColor: "rgba(255,255,255, .5)",
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: 1,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: nameList
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '',
|
||||
padding: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#063374',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '施工人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
stack: '总量',
|
||||
symbolSize: 5,
|
||||
showSymbol: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: [0,-10],
|
||||
formatter: '{c}',
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: '14px',
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#23D0C4',
|
||||
lineStyle: {
|
||||
color: "#23D0C4",
|
||||
width: 4
|
||||
},
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(15, 61, 161, 0.6)'
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(15, 61, 161, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(15, 61, 161, 0.1)'
|
||||
}
|
||||
], false),
|
||||
}
|
||||
},
|
||||
data: valueList
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
/* 队伍情况 echarts */
|
||||
function initEchartsTwo(nameList, valueList) {
|
||||
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
let option = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '5%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
borderColor: "rgba(255,255,255, .5)",
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: 1,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: nameList
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '',
|
||||
padding: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#063374',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '施工队伍',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
stack: '总量',
|
||||
symbolSize: 5,
|
||||
showSymbol: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: [0,-10],
|
||||
formatter: '{c}',
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: '14px',
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#41B5FF',
|
||||
lineStyle: {
|
||||
color: "#41B5FF",
|
||||
width: 4
|
||||
},
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(82, 191, 255, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(82, 191, 255, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(228, 139, 76, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: valueList
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
myChart3.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart3.resize();
|
||||
});
|
||||
}
|
||||
|
||||
/* 作业票趋势 echarts */
|
||||
function initEchartsThree(nameList, valueList, valueList2) {
|
||||
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
const backgroundColor = 'transparent';
|
||||
const color = ['#FF5D5D', '#32F474', '#FFE922', '#32F474', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
|
||||
const legend = {
|
||||
orient: 'horizontal',
|
||||
icon: 'circle', //图例形状
|
||||
padding: 0,
|
||||
top: 1,
|
||||
right: 40,
|
||||
itemWidth: 14, //小圆点宽度
|
||||
itemHeight: 14, // 小圆点高度
|
||||
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#ffffff',
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
};
|
||||
const tooltip = {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
borderColor: "rgba(255,255,255, .5)",
|
||||
};
|
||||
let seriesData = [
|
||||
{ name: 'A票', data: valueList },
|
||||
{ name: 'B票', data: valueList2 },
|
||||
];
|
||||
const commonConfigFn = (index) => {
|
||||
return {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
|
||||
symbolSize: 8, //小圆点大小
|
||||
itemStyle: {
|
||||
//还是小圆点设置
|
||||
},
|
||||
lineStyle: {
|
||||
width: 4, //线条设置
|
||||
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: [0,-10],
|
||||
formatter: '{c}',
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: '14px',
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
//填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
|
||||
opacity: 0.2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[index], // 上处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent', // 下处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
|
||||
let option = {
|
||||
backgroundColor,
|
||||
color,
|
||||
tooltip,
|
||||
legend,
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '15%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
show: true, //显示x轴+x轴label文字
|
||||
type: 'category',
|
||||
boundaryGap: true, //从Y轴出发，这个false很好的
|
||||
axisLine: {
|
||||
show: true, //显示x坐标轴轴线
|
||||
lineStyle: {
|
||||
color: '#063374',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //不显示x坐标1cm刻度
|
||||
},
|
||||
axisLabel: {
|
||||
color: fontColor, //x轴label文字颜色
|
||||
fontSize:'12px'
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示grid竖向分割线
|
||||
},
|
||||
|
||||
data: nameList,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#063374',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
series: seriesData,
|
||||
};
|
||||
myChart4.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart4.resize();
|
||||
});
|
||||
}
|
||||
|
||||
/* 风险趋势 echarts */
|
||||
function initEchartsFour(nameList, valueList, valueList2, valueList3, valueList4) {
|
||||
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
const backgroundColor = 'transparent';
|
||||
const color = ['#FF5D5D', '#F9770F', '#FFE922', '#32F474', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
|
||||
const legend = {
|
||||
orient: 'horizontal',
|
||||
icon: 'circle', //图例形状
|
||||
padding: 0,
|
||||
top: 1,
|
||||
right: 40,
|
||||
itemWidth: 14, //小圆点宽度
|
||||
itemHeight: 14, // 小圆点高度
|
||||
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#ffffff',
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
};
|
||||
const tooltip = {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
borderColor: "rgba(255,255,255, .5)",
|
||||
};
|
||||
let seriesData = [
|
||||
{ name: '二级', data: valueList },
|
||||
{ name: '三级', data: valueList2 },
|
||||
{ name: '四级', data: valueList3 },
|
||||
{ name: '五级', data: valueList4 },
|
||||
];
|
||||
const commonConfigFn = (index) => {
|
||||
return {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
|
||||
symbolSize: 8, //小圆点大小
|
||||
itemStyle: {
|
||||
//还是小圆点设置
|
||||
},
|
||||
|
||||
label: {
|
||||
show: false, //不显示小圆点上的label文字
|
||||
},
|
||||
lineStyle: {
|
||||
width: 4, //线条设置
|
||||
|
||||
},
|
||||
|
||||
areaStyle: {
|
||||
//填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
|
||||
opacity: 0.2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[index], // 上处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent', // 下处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
|
||||
let option = {
|
||||
backgroundColor,
|
||||
color,
|
||||
tooltip,
|
||||
legend,
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '15%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
show: true, //显示x轴+x轴label文字
|
||||
type: 'category',
|
||||
boundaryGap: true, //从Y轴出发，这个false很好的
|
||||
axisLine: {
|
||||
show: true, //显示x坐标轴轴线
|
||||
lineStyle: {
|
||||
color: '#063374',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //不显示x坐标1cm刻度
|
||||
},
|
||||
axisLabel: {
|
||||
color: fontColor, //x轴label文字颜色
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示grid竖向分割线
|
||||
},
|
||||
|
||||
data: nameList,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#063374',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
series: seriesData,
|
||||
};
|
||||
myChart5.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart5.resize();
|
||||
});
|
||||
}
|
||||
|
||||
/* 周计划 echarts */
|
||||
function initEchartsFive(twoNum, threeNum, fourNum, fiveNum) {
|
||||
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
function getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
isSelected,
|
||||
isHovered,
|
||||
k,
|
||||
height,
|
||||
i
|
||||
) {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 2;
|
||||
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
|
||||
// 如果只有一个扇形，则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
}
|
||||
|
||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||||
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
let offsetZ = i == 1 ? 2 : 0;
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
let hoverRate = isHovered ? 1.05 : 1;
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetX +
|
||||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetX +
|
||||
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetY +
|
||||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetY +
|
||||
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
z: function (u, v) {
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||||
},
|
||||
};
|
||||
}
|
||||
// 生成模拟 3D 饼图的配置项
|
||||
function getPie3D(pieData, internalDiameterRatio) {
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
|
||||
let seriesItem = {
|
||||
name:
|
||||
typeof pieData[i].name === "undefined"
|
||||
? `series${i}`
|
||||
: pieData[i].name,
|
||||
type: "surface",
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: k,
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof pieData[i].itemStyle != "undefined") {
|
||||
let itemStyle = {};
|
||||
|
||||
typeof pieData[i].itemStyle.color != "undefined"
|
||||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||||
: null;
|
||||
typeof pieData[i].itemStyle.opacity != "undefined"
|
||||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||||
: null;
|
||||
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
// 调整扇形高度
|
||||
i === 0 ? 10 : 10,
|
||||
i,
|
||||
series[i].pieData.value
|
||||
);
|
||||
|
||||
startValue = endValue;
|
||||
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
}
|
||||
// 传入数据生成 option
|
||||
const optionsData = [
|
||||
{
|
||||
name: "二级",
|
||||
value: !twoNum ? 0 : twoNum,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "#FF5D5D",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: "三级",
|
||||
value: !threeNum ? 0 : threeNum,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "#F9770F",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "四级",
|
||||
value: !fourNum ? 0 : fourNum,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "#FFE922",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "五级",
|
||||
value: !fiveNum ? 0 : fiveNum,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "#32F474",
|
||||
},
|
||||
},
|
||||
];
|
||||
const series = getPie3D(optionsData, 0);// 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["40%", "60%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
orient: "vertical",
|
||||
data: ["二级", "三级", "四级", "五级"],
|
||||
top: "center",
|
||||
itemGap: 14,
|
||||
itemHeight: 10,
|
||||
itemWidth: 20,
|
||||
right: "2%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
animation: true,
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
return `${params.seriesName
|
||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
|
||||
};"></span>${option.series[params.seriesIndex].pieData.value + "条"
|
||||
}`;
|
||||
}
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
borderColor: "rgba(255,255,255, .5)",
|
||||
},
|
||||
title: {
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
normal: {
|
||||
show: true,
|
||||
length: 10,
|
||||
length2: 10,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{d}%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 2,
|
||||
//top: '30%',
|
||||
left: '4%',
|
||||
bottom: "50%",
|
||||
// environment: "rgba(255,255,255,0)",
|
||||
viewControl: {
|
||||
distance: 320,
|
||||
alpha: 30,
|
||||
beta: 20,
|
||||
autoRotate: true, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
myChart6.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart6.resize();
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
//在div中初始化地图
|
||||
let uploadedDataURL2 = "../../../js/compreDisplay/anhui/changchun.json";
|
||||
echarts.init(document.getElementById('echarts-map')).dispose();
|
||||
let myChart2 = null;
|
||||
|
||||
/**
|
||||
* 加载地图
|
||||
* @param dataMap
|
||||
*/
|
||||
function map2(dataMap) {
|
||||
$.getJSON(uploadedDataURL2, function (geoJson) {
|
||||
echarts.registerMap('anhui', geoJson);
|
||||
myChart.hideLoading();
|
||||
let max = 480,
|
||||
min = 1.25; // todo
|
||||
let maxSize4Pin = 100,
|
||||
minSize4Pin = 100;
|
||||
|
||||
let convertData = function (data) {
|
||||
let res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let geoCoord = data[i].coordinate;
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
proName: data[i].proName,
|
||||
riskLevel: data[i].riskType,
|
||||
workContent: dealEmptyString(data[i].workContent),
|
||||
isOnline: isOnline(data[i].ballStatus),
|
||||
workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
|
||||
value: geoCoord.concat(data[i].value),
|
||||
coordinate: data[i].coordinate,
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
let option = {
|
||||
silent: false,
|
||||
backgroundColor: 'transparent',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
enterable: true,
|
||||
position: function (pos, params, dom, rect, size) {
|
||||
if ($(dom).children($('p')).length === 0) $(dom).css('display', 'none')
|
||||
pos = [pos[0], pos[1] + 10];
|
||||
return pos;
|
||||
},
|
||||
backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
borderColor: "#174FDD",
|
||||
formatter: function (params) {
|
||||
if (params.data)
|
||||
return (
|
||||
'<p class="map-p">' + params.data.proName + '</p>' +
|
||||
'<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
|
||||
'<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
|
||||
'<p class="map-p">班组长：' + params.data.workManager + '</p>' +
|
||||
'<p class="map-p">球机：' + params.data.isOnline + '</p>'
|
||||
)
|
||||
},
|
||||
// extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
|
||||
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
|
||||
|
||||
},
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'anhui',
|
||||
aspectScale: 0.8,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontFamily: 'Alibaba PuHuiTi R',
|
||||
fontSize: 11,
|
||||
// position: 'top',
|
||||
// offset: [-10, 0]
|
||||
},
|
||||
// rotate: -20,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
roam: false,
|
||||
scaleLimit: {
|
||||
max: max,
|
||||
min: min
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#52ADF3',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
shadowColor: 'rgba(80, 172, 243, 0.5)',
|
||||
shadowBlur: 30
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '在线',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
animation: false,
|
||||
symbolSize: function (val) {
|
||||
let a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||||
let b = minSize4Pin - a * min;
|
||||
b = maxSize4Pin - a * max;
|
||||
return 20;
|
||||
},
|
||||
symbol: function (val) {
|
||||
switch (val[2]) {
|
||||
case 2:
|
||||
return 'image://../../img/compreDisplay/two-risk.png';
|
||||
break;
|
||||
case 3:
|
||||
return 'image://../../img/compreDisplay/three-risk.png';
|
||||
break;
|
||||
case 4:
|
||||
return 'image://../../img/compreDisplay/four-risk.png';
|
||||
break;
|
||||
case 5:
|
||||
return 'image://../../img/compreDisplay/five-risk.png';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 15,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
zlevel: 6,
|
||||
z: 6,
|
||||
data: convertData(dataMap)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart2.clear();
|
||||
myChart2.setOption(option, true);
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
myChart2.resize();
|
||||
});
|
||||
}
|
||||
|
||||
/*判空*/
|
||||
function dealEmptyString(str) {
|
||||
if (str) {
|
||||
return str;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// 超长设置隐藏
|
||||
function sliceStr(value) {
|
||||
if (value) {
|
||||
return value.length > 12 ? value.slice(0, 12) + '...' : value;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/*判断球机是否在线*/
|
||||
function isOnline(value) {
|
||||
if (value) {
|
||||
if (value === '0' || value === 0) {
|
||||
return '离线';
|
||||
} else {
|
||||
return '在线';
|
||||
}
|
||||
} else {
|
||||
return '离线';
|
||||
}
|
||||
}
|
||||
|
||||
// 地市地图
|
||||
function setCityMap(name, isSup, mapPointList) {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/changchun.json';
|
||||
|
||||
myChart2 = echarts.init(document.getElementById('echarts-map'));
|
||||
map2(mapPointList);
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
/*地图风险等级选中*/
|
||||
$(".check-risk").click(function (e) {
|
||||
let checkedName = $(this).find('p').eq(0).attr("checkedName");
|
||||
let isCheck = $(this).attr("isCheck");
|
||||
if (checkedName === '' && isCheck === '1') {
|
||||
$('.check-risk').each(function () {
|
||||
if ($(this).attr("isCheck") === '1') {
|
||||
$(this).attr("isCheck", '0')
|
||||
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedValue, 1))
|
||||
}
|
||||
})
|
||||
} else if (checkedName === '' && isCheck === '0') {
|
||||
$('.check-risk').each(function () {
|
||||
if ($(this).attr("isCheck") === '0') {
|
||||
$(this).attr("isCheck", '1')
|
||||
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedValue, 2))
|
||||
}
|
||||
})
|
||||
} else if (checkedName !== '' && isCheck === '1') {
|
||||
$(this).attr("isCheck", '0')
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 1))
|
||||
} else if (checkedName !== '' && isCheck === '0') {
|
||||
$(this).attr("isCheck", '1')
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 2))
|
||||
}
|
||||
mapSearch();
|
||||
map2(mapPointList);
|
||||
});
|
||||
|
||||
/*风险等级选中*/
|
||||
function mapSearch() {
|
||||
let selRiskList = [];
|
||||
mapPointList.splice(0, mapPointList.length);
|
||||
$('.check-risk').each(function () {
|
||||
if ($(this).attr("isCheck") === '1') {
|
||||
if ($(this).find('p').eq(0).attr("checkedName")) {
|
||||
selRiskList.push($(this).find('p').eq(0).attr("checkedName"))
|
||||
}
|
||||
}
|
||||
})
|
||||
if (selRiskList.length) {
|
||||
$.each(selRiskList, function (index, item) {
|
||||
let dataList = mainMapPointList.filter(item2 => {
|
||||
return item2.riskType === item
|
||||
})
|
||||
$.each(dataList, function (index3, item3) {
|
||||
mapPointList.push(item3)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设置风险等级选中样式
|
||||
function setRiskIcon(value, type) {
|
||||
if (value && type === 1) {
|
||||
return '../../img/title-btn/no-check/risk-' + value + '-nocheck.png';
|
||||
} else if (!value && type === 1) {
|
||||
return '../../img/title-btn/no-check/risk-1-nocheck.png';
|
||||
} else if (value && type === 2) {
|
||||
return '../../img/title-btn/check/risk-' + value + '-check.png';
|
||||
} else if (!value && type === 2) {
|
||||
return '../../img/title-btn/check/risk-1-check.png';
|
||||
}
|
||||
}
|
||||
|
||||
// 其他-选中标签模块
|
||||
function checkLabel(that, value, moduleValue) {
|
||||
$('#other-module ul li').each(function (index, item) {
|
||||
let labelValue = $(this).attr('labelValue'), isChecked = $(this).attr('isChecked');
|
||||
if (value !== labelValue) {
|
||||
$(this).css({ 'background': 'url("../../img/cityHome/label_no_checked.png") no-repeat 0 0 / 100% 100%' });
|
||||
}
|
||||
})
|
||||
$(that).css('background', 'url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%');
|
||||
|
||||
$('#other-echarts .other-div').each(function (index, item) {
|
||||
let moduleValue = $(this).attr('moduleValue');
|
||||
if (value !== moduleValue) {
|
||||
$(this).css({ 'display': 'none' });
|
||||
}
|
||||
})
|
||||
myChart.dispose();
|
||||
myChart3.dispose();
|
||||
myChart4.dispose();
|
||||
myChart5.dispose();
|
||||
$('#other-' + moduleValue).css({ 'display': '' });
|
||||
if (value === '1') {
|
||||
myChart = echarts.init(document.getElementById('person-echarts'));
|
||||
} else if (value === '2') {
|
||||
myChart3 = echarts.init(document.getElementById('team-echarts'));
|
||||
} else if (value === '3') {
|
||||
myChart4 = echarts.init(document.getElementById('ticket-echarts'));
|
||||
} else if (value === '4') {
|
||||
myChart5 = echarts.init(document.getElementById('risk-echarts'));
|
||||
}
|
||||
loadOtherAjax(value);
|
||||
}
|
||||
|
||||
|
||||
// 预警提醒-选中标签模块
|
||||
function checkEarlyLabel(that, value) {
|
||||
$('#early-module ul li').each(function (index, item) {
|
||||
let labelValue = $(this).attr('labelValue');
|
||||
if (value !== labelValue) {
|
||||
$(this).css({ 'background': 'url("../../img/cityHome/label_no_checked.png") no-repeat 0 0 / 100% 100%' });
|
||||
}
|
||||
})
|
||||
$(that).css('background', 'url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%');
|
||||
loadEarlyAjax(value);
|
||||
}
|
||||
|
|
@ -340,16 +340,18 @@ function map(dataMap) {
|
|||
/*myChart.off('click').on('click', function (params) {
|
||||
// openVideo(params.data)
|
||||
});*/
|
||||
/* myChart.off('dblclick').on("dblclick", function (params) {
|
||||
myChart.off('dblclick').on("dblclick", function (params) {
|
||||
if(params.componentType === 'geo'){
|
||||
$('.switch-type').css('display', 'none');
|
||||
/* $('.switch-type').css('display', 'none');
|
||||
$('.switch-btn').css('display', 'none');
|
||||
$('.switch-type2').removeAttr('style');
|
||||
$('.back').removeAttr('style');
|
||||
$('.back').removeAttr('style'); */
|
||||
console.log(params);
|
||||
setUploadedDataURL2(params.name);
|
||||
if(params.name === '长春市'){
|
||||
setUploadedDataURL2(params.name);
|
||||
}
|
||||
}
|
||||
}) */
|
||||
})
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
|
|
@ -367,77 +369,12 @@ function sliceStr(value) {
|
|||
|
||||
// 省市下钻
|
||||
function setUploadedDataURL2(name) {
|
||||
var orgs=getOrgSelect();
|
||||
for (let i = 0; i < orgs.length; i++) {
|
||||
var orgName=orgs[i].name +"市";
|
||||
var orgId=orgs[i].code;
|
||||
if(name==orgName){
|
||||
clickCityCode=orgId;
|
||||
}
|
||||
}
|
||||
console.log(name)
|
||||
if (name === "合肥市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/hefei.json';
|
||||
clickCityName = '安徽省电力公司合肥供电公司';
|
||||
} else if (name === "芜湖市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/wuhu.json';
|
||||
clickCityName = '安徽省电力公司芜湖供电公司';
|
||||
} else if (name === "蚌埠市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/bengbu.json';
|
||||
clickCityName = '安徽省电力公司蚌埠供电公司';
|
||||
} else if (name === "淮南市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/huainan.json';
|
||||
clickCityName = '安徽省电力公司淮南供电公司';
|
||||
} else if (name === "马鞍山市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/maansan.json';
|
||||
clickCityName = '安徽省电力公司马鞍山供电公司';
|
||||
} else if (name === "淮北市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/huaibei.json';
|
||||
clickCityName = '安徽省电力公司淮北供电公司';
|
||||
} else if (name === "铜陵市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/tongling.json';
|
||||
clickCityName = '安徽省电力公司铜陵供电公司';
|
||||
} else if (name === "安庆市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/anqing.json';
|
||||
clickCityName = '安徽省电力公司安庆供电公司';
|
||||
} else if (name === "黄山市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/huangshan.json';
|
||||
clickCityName = '安徽省电力公司黄山供电公司';
|
||||
} else if (name === "阜阳市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/fuyang.json';
|
||||
clickCityName = '安徽省电力公司阜阳供电公司';
|
||||
} else if (name === "宿州市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/suzhou.json';
|
||||
clickCityName = '安徽省电力公司宿州供电公司';
|
||||
} else if (name === "滁州市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/chuzhou.json';
|
||||
clickCityName = '安徽省电力公司滁州供电公司';
|
||||
} else if (name === "六安市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/liuan.json';
|
||||
clickCityName = '安徽省电力公司六安供电公司';
|
||||
} else if (name === "宣城市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/xuancheng.json';
|
||||
clickCityName = '安徽省电力公司宣城供电公司';
|
||||
} else if (name === "池州市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/chizhou.json';
|
||||
clickCityName = '安徽省电力公司池州供电公司';
|
||||
} else if (name === "亳州市") {
|
||||
uploadedDataURL2 = '../../js/compreDisplay/anhui/bozhou.json';
|
||||
clickCityName = '安徽省电力公司亳州供电公司';
|
||||
}
|
||||
map([]);
|
||||
myChart2 = echarts.init(document.getElementById('echarts-map2'));
|
||||
// map2([]);
|
||||
let dataList = mapPointList.filter(item => {
|
||||
if (item.buildCode === clickCityCode) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
isCity = true;
|
||||
console.log(dataList);
|
||||
console.log(clickCityCode);
|
||||
map2(dataList);
|
||||
setCityData(clickCityCode);
|
||||
sessionStorage.setItem('cityName', name);
|
||||
sessionStorage.setItem('orgId', '07A0');
|
||||
const activeTabItem = parent.document.querySelector('#ifr-box');
|
||||
const frameId = activeTabItem.querySelector('iframe');
|
||||
$(frameId).attr('src', '../compreDisplay/cityHomeJump.html')
|
||||
|
||||
}
|
||||
|
||||
//组织机构下拉选
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ let isClose=false;
|
|||
let kjIdx = 199999; // 课件学习索引
|
||||
let bgStatus = "no-need"; // 报岗状态 need：需要报岗 no-need 不需要报岗
|
||||
let layerIndex222 = null;
|
||||
|
||||
sessionStorage.removeItem('cityName');
|
||||
sessionStorage.removeItem('orgId');
|
||||
layui.use(['layer', 'form', 'element'], function () {
|
||||
var $ = layui.jquery;
|
||||
element = layui.element;
|
||||
|
|
|
|||
Loading…
Reference in New Issue