1814 lines
63 KiB
Plaintext
1814 lines
63 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
|||
|
|
<%@page import="com.sipai.entity.scada.MPoint"%>
|
|||
|
|
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%>
|
|||
|
|
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
<head>
|
|||
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
|||
|
|
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
<style>
|
|||
|
|
.content{
|
|||
|
|
height: 960px;
|
|||
|
|
}
|
|||
|
|
.content-top{
|
|||
|
|
height: 60%;
|
|||
|
|
}
|
|||
|
|
.content-bottom{
|
|||
|
|
height: 30%;
|
|||
|
|
}
|
|||
|
|
.box.box-white {
|
|||
|
|
border-top: 0;
|
|||
|
|
height: calc(100% - 10px);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.box.box-white>.box-body{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.box-header .box-title{
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-family: MicrosoftYaHei
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box.box-white .box-border{
|
|||
|
|
padding:0 10px;
|
|||
|
|
}
|
|||
|
|
.box.box-white .box-border >.box-border-left{
|
|||
|
|
width: 50px;
|
|||
|
|
height: 4px;
|
|||
|
|
background: #c4e2e6;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
float:left;
|
|||
|
|
}
|
|||
|
|
.box.box-white .box-border >.box-border-right{
|
|||
|
|
width: calc(100% - 50px);
|
|||
|
|
height: 3px;
|
|||
|
|
border-bottom: 2px solid #f6f7fa;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
float:right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lable-right{
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1d1e1f;
|
|||
|
|
line-height: 20px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
.lable-right_2{
|
|||
|
|
font-size: 14px
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #606163;
|
|||
|
|
line-height: 18px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.lable-right_21{
|
|||
|
|
font-size: 20px
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1D1E1F;
|
|||
|
|
line-height: 16px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.lable-left{
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
color: #68696b;
|
|||
|
|
line-height: 20px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
.yesterday{
|
|||
|
|
float:right;
|
|||
|
|
width:50%;
|
|||
|
|
height:70px;
|
|||
|
|
text-align:center;
|
|||
|
|
border-left:1px solid #e5e5e5;
|
|||
|
|
margin-top:15px;
|
|||
|
|
}
|
|||
|
|
.yesterday-title{
|
|||
|
|
height: 24px;
|
|||
|
|
background: #3883ff;
|
|||
|
|
font-size: 12px;
|
|||
|
|
padding-top:3px;
|
|||
|
|
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #ffffff;
|
|||
|
|
line-height: 16px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
margin-left:30px;
|
|||
|
|
margin-right:22px;
|
|||
|
|
}
|
|||
|
|
.yesterday-num{
|
|||
|
|
margin-top:10px;
|
|||
|
|
margin-left:30px;
|
|||
|
|
margin-right:22px;
|
|||
|
|
border-bottom:1px solid #e5e5e5;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-family: Helvetica, Helvetica-Bold;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #161616;
|
|||
|
|
height: 35px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
letter-spacing: 2px;
|
|||
|
|
}
|
|||
|
|
.lable-green{
|
|||
|
|
font-size: 50px;
|
|||
|
|
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #00cccc;
|
|||
|
|
line-height: 72px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lable-green-small{
|
|||
|
|
font-size: 30px;
|
|||
|
|
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #00cccc;
|
|||
|
|
line-height: 42px;
|
|||
|
|
}
|
|||
|
|
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
|
|||
|
|
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-4, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
|
|||
|
|
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
|
|||
|
|
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
|
|||
|
|
padding-right: 2px;
|
|||
|
|
padding-left: 2px;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
/* NAV STACKED */
|
|||
|
|
.nav-stacked > li > a {
|
|||
|
|
border-radius: 0;
|
|||
|
|
border-top: 0;
|
|||
|
|
border-left: 3px solid transparent;
|
|||
|
|
color: #444;
|
|||
|
|
}
|
|||
|
|
.nav-stacked > li.active > a,.nav-stacked>li.active>a:focus,
|
|||
|
|
.nav-stacked > li.active > a:hover {
|
|||
|
|
background: #3c8dbc;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
color: #f3f3f3;
|
|||
|
|
border-top: 0;
|
|||
|
|
border-left: 0;
|
|||
|
|
}
|
|||
|
|
.nav-stacked > li.header {
|
|||
|
|
border-bottom: 1px solid #ddd;
|
|||
|
|
color: #777;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress1 {
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
background-color: #557AA5;
|
|||
|
|
border-radius: 55px;
|
|||
|
|
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|||
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
.progress-bar1 {
|
|||
|
|
float: left;
|
|||
|
|
width: 0%;
|
|||
|
|
height: 100%;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
color: #000;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #347EFB;
|
|||
|
|
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
|||
|
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
|||
|
|
-webkit-transition: width 0.6s ease;
|
|||
|
|
-o-transition: width 0.6s ease;
|
|||
|
|
transition: width 0.6s ease;
|
|||
|
|
border-radius: 55px;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight:bold;
|
|||
|
|
color: #4666B7;
|
|||
|
|
float:left;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-Medium {
|
|||
|
|
font-size: 23px;
|
|||
|
|
font-weight:bold;
|
|||
|
|
color: #4666B7;
|
|||
|
|
float:left;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-Small {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
/* 文字预设大小 */
|
|||
|
|
.FontSize-Words-Large{
|
|||
|
|
font-size:69px;
|
|||
|
|
}
|
|||
|
|
.FontSize-Words-Medium{
|
|||
|
|
font-size:40px;
|
|||
|
|
}
|
|||
|
|
.FontSize-Words-Small{
|
|||
|
|
font-size:20px;
|
|||
|
|
font-weight:bold;
|
|||
|
|
}
|
|||
|
|
.FontSize-Words-Xsmall {
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight:bold;
|
|||
|
|
}
|
|||
|
|
.FontSize-Words-XXsmall {
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
/* END */
|
|||
|
|
/* 文字预设颜色 */
|
|||
|
|
.FontColor-Words-Light {
|
|||
|
|
color: #69F6F9;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-Yellow {
|
|||
|
|
color: #B25C16;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-Pink {
|
|||
|
|
color: #E922FF;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-Blue {
|
|||
|
|
color: #375999;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-DarkBlue {
|
|||
|
|
color: #325490;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-LightBlue {
|
|||
|
|
color: #369FFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* END */
|
|||
|
|
/* 数字预设颜色 */
|
|||
|
|
.FontColor-Numbers {
|
|||
|
|
color: #4666B7;
|
|||
|
|
}
|
|||
|
|
.FontColor-Numbers-Light {
|
|||
|
|
color: #0A171F;
|
|||
|
|
float:left;
|
|||
|
|
}
|
|||
|
|
.FontColor-Numbers-LightBlue {
|
|||
|
|
color: #69F6F9;
|
|||
|
|
}
|
|||
|
|
.FontColor-Numbers-Green {
|
|||
|
|
color: #00CCCC;
|
|||
|
|
}
|
|||
|
|
.FontColor-Numbers-Yellow {
|
|||
|
|
color: #FFD428;
|
|||
|
|
}
|
|||
|
|
.FontColor-Numbers-Red {
|
|||
|
|
color: #FF0624;
|
|||
|
|
}
|
|||
|
|
/* 数字预设大小 */
|
|||
|
|
.FontSize-Numbers-Large{
|
|||
|
|
font-size:69px;
|
|||
|
|
line-height:1;
|
|||
|
|
}
|
|||
|
|
.FontSize-Numbers-Medium{
|
|||
|
|
font-size:37px;
|
|||
|
|
line-height:1;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.FontSize-Numbers-Small{
|
|||
|
|
font-size:24px;
|
|||
|
|
line-height:0.7;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.FontSize-Numbers-Xsmall{
|
|||
|
|
font-size:16px;
|
|||
|
|
line-height:1;
|
|||
|
|
}
|
|||
|
|
.FontLineHeight-One{
|
|||
|
|
line-height:1;
|
|||
|
|
}
|
|||
|
|
.FontSize-Numbers-Top{
|
|||
|
|
font-size:30px;
|
|||
|
|
}
|
|||
|
|
/* END */
|
|||
|
|
|
|||
|
|
.canvas-title{
|
|||
|
|
width:55%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 10px;
|
|||
|
|
left: 20%;
|
|||
|
|
text-align:center;
|
|||
|
|
}
|
|||
|
|
.canvas-text{
|
|||
|
|
width: 30%;
|
|||
|
|
position: absolute;
|
|||
|
|
background: rgba(225,241,255,0.5);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
text-align:center;
|
|||
|
|
padding:8px;
|
|||
|
|
}
|
|||
|
|
.canvas-text .row{
|
|||
|
|
padding:5px 0;
|
|||
|
|
}
|
|||
|
|
.canvas-text .font-text{
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
text-align: right;
|
|||
|
|
color: #606163;
|
|||
|
|
line-height: 16px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
.canvas-text .font-num{
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-family: Helvetica;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #26282D;
|
|||
|
|
line-height: 16px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.canvas-text .border-right-one{
|
|||
|
|
border-right: 1px solid #999;
|
|||
|
|
}
|
|||
|
|
.canvas-text-one{
|
|||
|
|
top: 22%;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
.canvas-text-two{
|
|||
|
|
top: 54%;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
.canvas-text-three{
|
|||
|
|
top: 80%;
|
|||
|
|
left: 20%;
|
|||
|
|
}
|
|||
|
|
.canvas-text-four{
|
|||
|
|
top: 90%;
|
|||
|
|
left: 52%;
|
|||
|
|
}
|
|||
|
|
.canvas-text-five{
|
|||
|
|
top: 45%;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
.canvas-text-six{
|
|||
|
|
top: 8%;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconcube,.iconshuiliang{
|
|||
|
|
font-size:32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left-title-text{
|
|||
|
|
padding:5px;
|
|||
|
|
text-align: center;
|
|||
|
|
letter-spacing: 3px;
|
|||
|
|
}
|
|||
|
|
.top-left-title-num{
|
|||
|
|
font-size: 21px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #0A171F;
|
|||
|
|
line-height: 29px;
|
|||
|
|
letter-spacing: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left-fuwu{
|
|||
|
|
height: 34%;
|
|||
|
|
width: 100%;
|
|||
|
|
padding:10px 20px;
|
|||
|
|
}
|
|||
|
|
.top-left-fuwu-text{
|
|||
|
|
width:20%;
|
|||
|
|
float:left;
|
|||
|
|
}
|
|||
|
|
.top-left-fuwu-bar{
|
|||
|
|
padding-top:5px;
|
|||
|
|
width:40%;
|
|||
|
|
float:left;
|
|||
|
|
}
|
|||
|
|
.top-left-fuwu-num{
|
|||
|
|
text-align:right;width:20%;float:left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconshuidi,.iconni,.icondian,.iconyaoji{
|
|||
|
|
font-size:30px;
|
|||
|
|
}
|
|||
|
|
.canvas-body{
|
|||
|
|
padding:0;
|
|||
|
|
margin:0;
|
|||
|
|
padding-top:5%;
|
|||
|
|
background-image:url("<%=request.getContextPath()%>/IMG/map_bg.png");
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-position: bottom;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 1600px) {
|
|||
|
|
.canvas-body{
|
|||
|
|
padding:0;
|
|||
|
|
margin:0;
|
|||
|
|
padding-top:15%;
|
|||
|
|
height:100%;
|
|||
|
|
float: left;
|
|||
|
|
margin-left: 0%;
|
|||
|
|
}
|
|||
|
|
.canvas-text-one{
|
|||
|
|
top: 35%;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
.top-left-title-text{
|
|||
|
|
padding:2px;
|
|||
|
|
}
|
|||
|
|
.top-left-title-num{
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
}
|
|||
|
|
.top-left-fuwu{
|
|||
|
|
padding:5px 8px;
|
|||
|
|
}
|
|||
|
|
.top-left-fuwu-text{
|
|||
|
|
width:30%;
|
|||
|
|
}
|
|||
|
|
.top-left-fuwu-bar{
|
|||
|
|
width:30%;
|
|||
|
|
}
|
|||
|
|
.top-left-fuwu-num{
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lable-right_2{
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #606163;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.lable-right_21{
|
|||
|
|
font-size: 12px
|
|||
|
|
font-family: MicrosoftYaHei;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1D1E1F;
|
|||
|
|
}
|
|||
|
|
.progress1{
|
|||
|
|
margin-bottom: 0px;
|
|||
|
|
}
|
|||
|
|
.iconcube,.iconshuiliang,
|
|||
|
|
.iconshuidi,.iconni,.icondian,.iconyaoji{
|
|||
|
|
font-size:20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.canvas-text {
|
|||
|
|
width: 35%;
|
|||
|
|
padding: 0px;
|
|||
|
|
}
|
|||
|
|
.canvas-text .font-num {
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 12px;
|
|||
|
|
}
|
|||
|
|
.canvas-text-three{
|
|||
|
|
top: 80%;
|
|||
|
|
left: 20%;
|
|||
|
|
}
|
|||
|
|
.canvas-text-four{
|
|||
|
|
top: 90%;
|
|||
|
|
left: 62%;
|
|||
|
|
}
|
|||
|
|
.FontSize-Numbers-Medium {
|
|||
|
|
font-size: 26px;
|
|||
|
|
}
|
|||
|
|
.FontColor-Words-Small,
|
|||
|
|
.FontSize-Numbers-Xsmall,
|
|||
|
|
.title_text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.FontSize-Numbers-Xsmall {
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media screen and (max-width: 1367px) {
|
|||
|
|
.canvas-body{
|
|||
|
|
padding:0;
|
|||
|
|
margin:0;
|
|||
|
|
padding-top:15%;
|
|||
|
|
height:100%;
|
|||
|
|
float: left;
|
|||
|
|
margin-left: -20%;
|
|||
|
|
}
|
|||
|
|
.canvas-text-one{
|
|||
|
|
top: 30%;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
.canvas-text-three{
|
|||
|
|
top: 80%;
|
|||
|
|
left: 12%;
|
|||
|
|
}
|
|||
|
|
.canvas-text-four{
|
|||
|
|
top: 90%;
|
|||
|
|
left: 62%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var addFun = function() {
|
|||
|
|
$.post(ext.contextPath + '/work/mpoint/add.do', {} , function(data) {
|
|||
|
|
$("#subDiv").html(data);
|
|||
|
|
openModal('subModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
var editFun = function(id) {
|
|||
|
|
$.post(ext.contextPath + '/work/mpoint/edit.do', {id:id} , function(data) {
|
|||
|
|
$("#subDiv").html(data);
|
|||
|
|
openModal('subModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
var deleteFun = function(id) {
|
|||
|
|
swal({
|
|||
|
|
text: "您确定要删除此记录？",
|
|||
|
|
dangerMode: true,
|
|||
|
|
buttons: {
|
|||
|
|
cancel: {
|
|||
|
|
text: "取消",
|
|||
|
|
value: null,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-default btn-sm",
|
|||
|
|
closeModal: true,
|
|||
|
|
},
|
|||
|
|
confirm: {
|
|||
|
|
text: "确定",
|
|||
|
|
value: true,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-danger btn-sm",
|
|||
|
|
closeModal: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(willDelete => {
|
|||
|
|
if (willDelete) {
|
|||
|
|
$.post(ext.contextPath + '/work/group/delete.do', {id : id}, function(data) {
|
|||
|
|
if(data==1){
|
|||
|
|
$("#table").bootstrapTable('refresh');
|
|||
|
|
}else{
|
|||
|
|
showAlert('d','删除失败','mainAlertdiv');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
var deletesFun = function() {
|
|||
|
|
var checkedItems = $("#table").bootstrapTable('getSelections');
|
|||
|
|
var datas="";
|
|||
|
|
$.each(checkedItems, function(index, item){
|
|||
|
|
datas+=item.id+",";
|
|||
|
|
});
|
|||
|
|
if(datas==""){
|
|||
|
|
showAlert('d','请先选择记录','mainAlertdiv');
|
|||
|
|
}else{
|
|||
|
|
swal({
|
|||
|
|
text: "您确定要删除此记录？",
|
|||
|
|
dangerMode: true,
|
|||
|
|
buttons: {
|
|||
|
|
cancel: {
|
|||
|
|
text: "取消",
|
|||
|
|
value: null,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-default btn-sm",
|
|||
|
|
closeModal: true,
|
|||
|
|
},
|
|||
|
|
confirm: {
|
|||
|
|
text: "确定",
|
|||
|
|
value: true,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-danger btn-sm",
|
|||
|
|
closeModal: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(willDelete => {
|
|||
|
|
if (willDelete) {
|
|||
|
|
$.post(ext.contextPath + '/work/group/deletes.do', {ids:datas} , function(data) {
|
|||
|
|
if(data>0){
|
|||
|
|
$("#table").bootstrapTable('refresh');
|
|||
|
|
}else{
|
|||
|
|
showAlert('d','删除失败','mainAlertdiv');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var init = function() {
|
|||
|
|
$.post(ext.contextPath + '/work/group/getListForSelect.do', {} , function(data) {
|
|||
|
|
//console.info(data)
|
|||
|
|
if(data.length>0){
|
|||
|
|
for(var i=0;i<data.length;i++){
|
|||
|
|
$("#search_code").append("<option value='"+data[i].id+"'>"+data[i].text+"</option>");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},'json');
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
var dosearch = function() {
|
|||
|
|
$("#table").bootstrapTable('refresh');
|
|||
|
|
};
|
|||
|
|
//达标率
|
|||
|
|
function dogauge(id,value,title,colorNum){
|
|||
|
|
var sizenub =1;
|
|||
|
|
|
|||
|
|
var color = ['#69F6F9','#F5A524','#347EFB'];
|
|||
|
|
var max = 100;
|
|||
|
|
// 蓝色背景
|
|||
|
|
var num = value / max;
|
|||
|
|
var colorSet = [
|
|||
|
|
[num, color[colorNum]],
|
|||
|
|
[1, "#F6F8F9"]
|
|||
|
|
];
|
|||
|
|
var height = $(document).height()*0.125;
|
|||
|
|
if($(document).height()<200){
|
|||
|
|
height = window.screen.availHeight*0.125;
|
|||
|
|
}
|
|||
|
|
if(window.screen.width<1441){
|
|||
|
|
sizenub = (window.screen.height/1080)*1.1;
|
|||
|
|
}
|
|||
|
|
$("#"+id).height(height);
|
|||
|
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
|
var option = {
|
|||
|
|
title:{
|
|||
|
|
text:title,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12 ,
|
|||
|
|
fontWeight: 400 ,
|
|||
|
|
color: '#000000' ,
|
|||
|
|
},
|
|||
|
|
x:'center',
|
|||
|
|
y:'bottom',
|
|||
|
|
bottom:0,
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top:0,
|
|||
|
|
left:0,
|
|||
|
|
right:0,
|
|||
|
|
bottom:0,
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '达标率',
|
|||
|
|
type: 'gauge',
|
|||
|
|
radius: 115*sizenub+'%' ,
|
|||
|
|
center: ["50%", "75%"], //整体的位置设置
|
|||
|
|
startAngle: 180,
|
|||
|
|
endAngle: 0,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false ,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
// 坐标轴线
|
|||
|
|
lineStyle: {
|
|||
|
|
// 属性lineStyle控制线条样式
|
|||
|
|
color: colorSet,
|
|||
|
|
width: 15,
|
|||
|
|
opacity: 1 //刻度背景宽度
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false ,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false ,
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
show: false ,
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
offsetCenter: [0, '-15%'] ,
|
|||
|
|
fontSize: 32 ,
|
|||
|
|
formatter: '{value}%'
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
data: [{value: value}]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
//设备完好率
|
|||
|
|
function doequgood(id,name,value,colorNum){
|
|||
|
|
var sizenub = window.screen.height/1080;
|
|||
|
|
if(window.screen.width<1441){
|
|||
|
|
sizenub = (window.screen.height/1080)*0.8
|
|||
|
|
}
|
|||
|
|
const colorList = ['#EFA103','#3883FF', '#FE8840', '#FBD444', '#7F6AAD', '#585247'];
|
|||
|
|
var othVal = 100 - value;
|
|||
|
|
var height = $(document).height()*0.12;
|
|||
|
|
if($(document).height()<200){
|
|||
|
|
height = window.screen.availHeight*0.12;
|
|||
|
|
}
|
|||
|
|
$("#"+id).height(height);
|
|||
|
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: value+'%',
|
|||
|
|
x: 'center',
|
|||
|
|
y: 'center',
|
|||
|
|
top:'25%',
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
color: colorList[colorNum],
|
|||
|
|
fontSize: '26'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data:[name],
|
|||
|
|
x: 5+(sizenub-1)*55+'%',
|
|||
|
|
bottom: 'bottom',
|
|||
|
|
icon:'none',
|
|||
|
|
textStyle: {
|
|||
|
|
color: colorList[colorNum] ,
|
|||
|
|
lineHeight: 19,
|
|||
|
|
fontSize: 14 ,
|
|||
|
|
fontWeight : 700 ,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
color: ['#F6F8F9'],
|
|||
|
|
grid: {
|
|||
|
|
top:0,
|
|||
|
|
left:0,
|
|||
|
|
right:0,
|
|||
|
|
bottom:0,
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: name,
|
|||
|
|
type: 'pie',
|
|||
|
|
clockWise: true,
|
|||
|
|
radius: ['55%', '70%'],
|
|||
|
|
center: ["50%", "35%"], //整体的位置设置
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
data: [{
|
|||
|
|
value: value,
|
|||
|
|
name: '01',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: colorList[colorNum],
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
name: '02',
|
|||
|
|
value: othVal
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
//设备类型pie
|
|||
|
|
function doequtype(id,val){
|
|||
|
|
const colorList = ['#3883FF', '#A84ECB', '#FE8840', '#FBD444', '#7F6AAD', '#585247'];
|
|||
|
|
var data = val;
|
|||
|
|
var legendName = new Array;
|
|||
|
|
data.forEach(function(value,i){
|
|||
|
|
legendName[i] = value.name;
|
|||
|
|
});
|
|||
|
|
var height = $(document).height()*0.07;
|
|||
|
|
if($(document).height()<200){
|
|||
|
|
height = window.screen.availHeight*0.07;
|
|||
|
|
}
|
|||
|
|
$("#"+id).height(height);
|
|||
|
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: '设备\n数量',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#000',
|
|||
|
|
lineHeight: 16
|
|||
|
|
},
|
|||
|
|
subtextStyle: {
|
|||
|
|
fontSize: 28,
|
|||
|
|
color: '#333'
|
|||
|
|
},
|
|||
|
|
textAlign: 'center',
|
|||
|
|
left: '50%',
|
|||
|
|
top: '26%'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top:0,
|
|||
|
|
left:0,
|
|||
|
|
right:0,
|
|||
|
|
bottom:0,
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
type: 'scroll',
|
|||
|
|
orient: 'horizontal',
|
|||
|
|
left: '25%',
|
|||
|
|
right: 0,
|
|||
|
|
top: '15%',
|
|||
|
|
itemGap: 10,
|
|||
|
|
show:false,
|
|||
|
|
selectedMode: false,
|
|||
|
|
data: legendName,
|
|||
|
|
textStyle: {
|
|||
|
|
rich: {
|
|||
|
|
uname: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '##82BDF3',
|
|||
|
|
},
|
|||
|
|
unum: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: '#000',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
formatter(name) {
|
|||
|
|
var index = 0;
|
|||
|
|
data.forEach(function(value,i){
|
|||
|
|
if(value.name == name){
|
|||
|
|
index = i;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
var value = data[index].value;
|
|||
|
|
return '{uname|'+name+'}\n{unum|'+value+'}';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
color: colorList,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '设备',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['70%', '95%'],
|
|||
|
|
center: ['55%', '50%'],
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
borderWidth: 3,
|
|||
|
|
borderColor: '#fff'
|
|||
|
|
},
|
|||
|
|
data: data,
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
//处理量、外运量等line
|
|||
|
|
function doline(id,data,name){
|
|||
|
|
const colorList = ['#F55945', '#347EFB', '#47C1C8', '#EBA043', '#9E70C7', '#A84ECB'];
|
|||
|
|
var series = new Array;
|
|||
|
|
data.forEach(function(val,i){
|
|||
|
|
series[i] = {
|
|||
|
|
name: val.name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: val.value,
|
|||
|
|
smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
areaStyle: {
|
|||
|
|
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0.9,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0, color: '#FFF' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1, color: colorList[i] // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false // 缺省为 false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle:{
|
|||
|
|
color:colorList[i],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var height = $(document).height()*0.31;
|
|||
|
|
if($(document).height()<200){
|
|||
|
|
height = window.screen.availHeight*0.31;
|
|||
|
|
}
|
|||
|
|
$("#"+id).height(height);
|
|||
|
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
|
var option = {
|
|||
|
|
color: colorList,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
bottom: 0,
|
|||
|
|
x: 'center',
|
|||
|
|
icon:'roundRect',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#000' ,
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontSize: 13 ,
|
|||
|
|
fontWeight : 600 ,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '4%',
|
|||
|
|
right: '1%',
|
|||
|
|
top: '10%',
|
|||
|
|
bottom: '10%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type : 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
axisLabel: {
|
|||
|
|
color:'#8A88B7',
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
name:name,
|
|||
|
|
splitNumber: 3 ,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color:'#8A88B7',
|
|||
|
|
},
|
|||
|
|
//网格样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle:{
|
|||
|
|
color: '#8A88B7',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: series
|
|||
|
|
};
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
//药、电等bar
|
|||
|
|
function doBar(id,data){
|
|||
|
|
const color = ['#EFA103', '#00CCCC', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var height = $(document).height()*0.31;
|
|||
|
|
if($(document).height()<200){
|
|||
|
|
height = window.screen.availHeight*0.31;
|
|||
|
|
}
|
|||
|
|
$("#"+id).height(height);
|
|||
|
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
|
var option = {
|
|||
|
|
color: color,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '4%',
|
|||
|
|
right: '1%',
|
|||
|
|
top: '10%',
|
|||
|
|
bottom: '10%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
bottom: 0,
|
|||
|
|
x: 'center',
|
|||
|
|
icon:'roundRect',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#000' ,
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontSize: 13 ,
|
|||
|
|
fontWeight : 600 ,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#8A88B7',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color:'#8A88B7',
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name:data.name,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#8A88B7',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color:'#8A88B7',
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
//网格样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle:{
|
|||
|
|
color: '#8A88B7',
|
|||
|
|
type: 'dashed',
|
|||
|
|
opacity:0.3,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '实际值',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '20%',
|
|||
|
|
barMinWidth: 10 ,
|
|||
|
|
itemStyle: {
|
|||
|
|
barBorderRadius: 8 ,
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideTop'
|
|||
|
|
},
|
|||
|
|
data: data.value1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '目标值',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '20%',
|
|||
|
|
barMinWidth: 10 ,
|
|||
|
|
itemStyle: {
|
|||
|
|
barBorderRadius: 8 ,
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'inside'
|
|||
|
|
},
|
|||
|
|
data: data.value2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//巡检、维修、保养等完成率bar
|
|||
|
|
function doendPie(id,data,colorNum){
|
|||
|
|
const colorList = ['#F5A623','#9E70C7','#397EFB','#47C1C8','#347EFB', '#EBA043', '#A84ECB'];
|
|||
|
|
var sizenub = window.screen.height/1080;
|
|||
|
|
if(window.screen.width<1441){
|
|||
|
|
sizenub = (window.screen.height/1080)*0.9
|
|||
|
|
}
|
|||
|
|
var othVal = 100 - data.value;
|
|||
|
|
var height = $(document).height()*0.11;
|
|||
|
|
if($(document).height()<200){
|
|||
|
|
height = window.screen.availHeight*0.11;
|
|||
|
|
}
|
|||
|
|
$("#"+id).height(height);
|
|||
|
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
|
var option = {
|
|||
|
|
color: ['#F6F8F9'],
|
|||
|
|
title: {
|
|||
|
|
text: data.value+'%',
|
|||
|
|
x: 'center',
|
|||
|
|
y: 'center',
|
|||
|
|
top:'26%',
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
color: colorList[colorNum],
|
|||
|
|
fontSize: 22*sizenub
|
|||
|
|
},
|
|||
|
|
/* subtext:'完好率',
|
|||
|
|
subtextStyle: {
|
|||
|
|
fontSize: '12',
|
|||
|
|
fontWeight: 400,
|
|||
|
|
color: '#a3a9af',
|
|||
|
|
} , */
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data:[data.name],
|
|||
|
|
x: 0-(1-sizenub)*65,
|
|||
|
|
y: 'bottom',
|
|||
|
|
icon:'none',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#606163' ,
|
|||
|
|
lineHeight: 11,
|
|||
|
|
fontSize: 12 ,
|
|||
|
|
fontWeight : 500 ,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top:0,
|
|||
|
|
left:0,
|
|||
|
|
right:0,
|
|||
|
|
bottom:0,
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Line 1',
|
|||
|
|
type: 'pie',
|
|||
|
|
clockWise: true,
|
|||
|
|
radius: ['52%', '60%'],
|
|||
|
|
center: ['50%', '38%'],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
data: [{
|
|||
|
|
value: data.value,
|
|||
|
|
name: data.name,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: colorList[colorNum],
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
name: '02',
|
|||
|
|
value: othVal
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
function doTable(id){
|
|||
|
|
var height = $("#"+id).parent().height();
|
|||
|
|
$("#"+id).bootstrapTable({
|
|||
|
|
//url:"",
|
|||
|
|
height:height,
|
|||
|
|
striped: false, //是否显示行间隔色
|
|||
|
|
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var canvas;
|
|||
|
|
var context;
|
|||
|
|
var beauty;
|
|||
|
|
var beautyPng;
|
|||
|
|
function refreshData() {
|
|||
|
|
$.post("url",{},function(data){
|
|||
|
|
if (data.res == 1) {
|
|||
|
|
$("#scrollNews").text(data);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
$(function() {
|
|||
|
|
setInterval("refreshData", 3000);
|
|||
|
|
|
|||
|
|
//init();
|
|||
|
|
var biz_id = '?biz_id='+unitId;
|
|||
|
|
$.post(ext.contextPath + '/work/mpoint/getoverviewProduceGroup.do'+biz_id, {} , function(data) {
|
|||
|
|
//init();
|
|||
|
|
|
|||
|
|
var arr= JSON.parse(data);
|
|||
|
|
console.log(arr);
|
|||
|
|
$("#equipmentAnomaliesTotal").html(arr.equipmentAnomaliesTotal);
|
|||
|
|
$("#equ_allnum").html(arr.equipmentTotal);
|
|||
|
|
$("#equ_runnum").html(arr.equipmentTotalRun);
|
|||
|
|
$("#equipmentRunAnomalies").html(arr.equipmentRunAnomalies+"/"+arr.equipmentTotal);
|
|||
|
|
$("#equipmentToAnomalies").html(arr.equipmentToAnomalies+"/"+arr.equipmentTotal);
|
|||
|
|
var equipmentRunAnomalieswidth = arr.equipmentRunAnomalies*100/arr.equipmentTotal;
|
|||
|
|
$("#equipmentRunAnomaliesstyle").width(equipmentRunAnomalieswidth+'%');
|
|||
|
|
var equipmentToAnomalieswidth = arr.equipmentToAnomalies*100/arr.equipmentTotal;
|
|||
|
|
$("#equipmentToAnomaliesstyle").width(equipmentToAnomalieswidth+'%');
|
|||
|
|
$("#data16").html(arr.data16);
|
|||
|
|
$("#data17").html(arr.data17);
|
|||
|
|
$("#data18").html(arr.data18);
|
|||
|
|
$("#data19").html(arr.data19);
|
|||
|
|
$("#data20").html(arr.data20+"万m³");
|
|||
|
|
$("#fwmj").html(arr.fwmj);
|
|||
|
|
$("#fwrk").html(arr.fwrk);
|
|||
|
|
$("#zxyyclnl").html(arr.zxyyclnl+"万m³");
|
|||
|
|
$("#jnljclsl").html(arr.jnljclsl);
|
|||
|
|
$("#canvas-title_runnum").html(arr.data29);
|
|||
|
|
$("#canvas-title_allnum").html(arr.data30);
|
|||
|
|
// var jsdbl = arr.data21*100/arr.data22;
|
|||
|
|
//if(arr.data22==0){jsdbl=0;}
|
|||
|
|
// var csdbl = arr.data23*100/arr.data24;
|
|||
|
|
// if(arr.data24==0){csdbl=0;}
|
|||
|
|
var jsdbl = arr.data21;
|
|||
|
|
var csdbl = arr.data23;
|
|||
|
|
// var sl = arr.data25*100/arr.data26;
|
|||
|
|
// if(arr.data26==0){sl=0;}
|
|||
|
|
//var nl = arr.data27*100/arr.data28;
|
|||
|
|
// if(arr.data28==0){nl=0;}
|
|||
|
|
var sl = arr.data25;
|
|||
|
|
var nl = arr.data27;
|
|||
|
|
canvas = document.getElementById("canvas");
|
|||
|
|
context = canvas.getContext('2d');
|
|||
|
|
beauty = new Image();
|
|||
|
|
beauty.src = "<%=request.getContextPath()%>/IMG/map_bg.png";
|
|||
|
|
beautyPng = new Image();
|
|||
|
|
beautyPng.src = "<%=request.getContextPath()%>/IMG/map_line.png";
|
|||
|
|
canvasLoad();
|
|||
|
|
$(window).resize(function(){
|
|||
|
|
canvas = document.getElementById("canvas");
|
|||
|
|
context = canvas.getContext('2d');
|
|||
|
|
beauty = new Image();
|
|||
|
|
beauty.src = "<%=request.getContextPath()%>/IMG/map_bg.png";
|
|||
|
|
beautyPng = new Image();
|
|||
|
|
beautyPng.src = "<%=request.getContextPath()%>/IMG/map_line.png";
|
|||
|
|
canvasLoad();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var widget = $('.tabs-basic');
|
|||
|
|
var tabs = widget.find('ul li');
|
|||
|
|
tabs.on('click', function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
tabs.removeClass('active');
|
|||
|
|
$(this).addClass('active');
|
|||
|
|
var allLine = [
|
|||
|
|
{name:"实际值",value:arr.data},
|
|||
|
|
{name:"目标值",value:arr.data4}
|
|||
|
|
];
|
|||
|
|
var allLine1 = [
|
|||
|
|
{name:"实际值",value:arr.data1},
|
|||
|
|
{name:"目标值",value:arr.data5}
|
|||
|
|
];
|
|||
|
|
var allLine2 = [
|
|||
|
|
{name:"实际值",value:arr.data2},
|
|||
|
|
{name:"目标值",value:arr.data6}
|
|||
|
|
];
|
|||
|
|
var allLine3 = [
|
|||
|
|
{name:"实际值",value:arr.data3},
|
|||
|
|
{name:"目标值",value:arr.data7}
|
|||
|
|
];
|
|||
|
|
var name = $(this).find('.title_text').text();
|
|||
|
|
|
|||
|
|
|
|||
|
|
var drugBar = {name:name,value1:arr.data8
|
|||
|
|
,value2:arr.data9};
|
|||
|
|
|
|||
|
|
var drugBar1 = {name:name,value1:arr.data10
|
|||
|
|
,value2:arr.data11};
|
|||
|
|
|
|||
|
|
var drugBar2 = {name:name,value1:arr.data12
|
|||
|
|
,value2:arr.data13};
|
|||
|
|
|
|||
|
|
var drugBar3 = {name:name,value1:arr.data14
|
|||
|
|
,value2:arr.data15};
|
|||
|
|
|
|||
|
|
/* var drugBar = {name:name,value1:[['大连',445000],['潍坊',475000], ['德州',478700], ['枣庄',175000], ['上海' ,395000],['漯河', 355000], ['益阳',475000],['东莞',275000]]
|
|||
|
|
,value2:[['大连',455000],['潍坊',485000], ['德州',488700], ['枣庄',195000], ['上海' ,405000],['漯河', 365000], ['益阳',495000],['东莞',205000]]};
|
|||
|
|
var drugBar1 = {name:name,value1:[['大连',6],['潍坊',8], ['德州',2], ['枣庄',3], ['上海' ,14],['漯河', 8], ['益阳',12],['东莞',4]]
|
|||
|
|
,value2:[['大连',10],['潍坊',10], ['德州',10], ['枣庄',8], ['上海' ,7],['漯河', 6], ['益阳',8],['东莞',7]]};
|
|||
|
|
var drugBar2 = {name:name,value1:[['大连',10],['潍坊',52], ['德州',200], ['枣庄',334], ['上海' ,390],['漯河', 330], ['益阳',220],['东莞',52]]
|
|||
|
|
,value2:[['大连',12],['潍坊',52], ['德州',100], ['枣庄',234], ['上海' ,390],['漯河', 300], ['益阳',210],['东莞',50]]};
|
|||
|
|
var drugBar3 = {name:name,value1:[['大连',1],['潍坊',5], ['德州',2], ['枣庄',4], ['上海' ,9],['漯河', 3], ['益阳',2],['东莞',2]]
|
|||
|
|
,value2:[['大连',2],['潍坊',2], ['德州',1], ['枣庄',2], ['上海' ,9],['漯河', 3], ['益阳',2],['东莞',4]]}; */
|
|||
|
|
|
|||
|
|
|
|||
|
|
if(name=='水处理(万m3/D)' ){
|
|||
|
|
doline("line",allLine,name);
|
|||
|
|
doBar("bar",drugBar,0);
|
|||
|
|
}else if(name=='泥处理(吨)'){
|
|||
|
|
doline("line",allLine1,name);
|
|||
|
|
doBar("bar",drugBar1,0);
|
|||
|
|
}else if(name=='用电量(kW)'){
|
|||
|
|
doline("line",allLine2,name);
|
|||
|
|
doBar("bar",drugBar2,0);
|
|||
|
|
}else if(name=='吨水电耗(kW)'){
|
|||
|
|
doline("line",allLine3,name);
|
|||
|
|
doBar("bar",drugBar3,0);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
dogauge("pie_water",sl,'水量达标率',0);
|
|||
|
|
dogauge("pie_mud",nl,'泥量达标率',1);
|
|||
|
|
dogauge("pie_in",jsdbl,'进水达标率',2);
|
|||
|
|
dogauge("pie_out",csdbl,'出水达标率',2);
|
|||
|
|
var data = [
|
|||
|
|
{name: 'A类设备', value: arr.equipmentTotalA},
|
|||
|
|
{name: 'B类设备', value: arr.equipmentTotalB},
|
|||
|
|
{name: 'C类设备', value: arr.equipmentTotalC},
|
|||
|
|
];
|
|||
|
|
$("#tpA").html('　A类设备<br/> '+arr.equipmentTotalA);
|
|||
|
|
$("#tpB").html('　B类设备<br/> '+arr.equipmentTotalB);
|
|||
|
|
$("#tpC").html('　C类设备<br/> '+arr.equipmentTotalC);
|
|||
|
|
if(window.screen.width<1441){
|
|||
|
|
$("#tpA").html(' A类设备<br/> 　 '+arr.equipmentTotalA);
|
|||
|
|
$("#tpB").html(' B类设备<br/> 　 '+arr.equipmentTotalB);
|
|||
|
|
$("#tpC").html(' C类设备<br/> 　 '+arr.equipmentTotalC);
|
|||
|
|
}
|
|||
|
|
doequtype("pie_equ",data);
|
|||
|
|
var xjPie = {name:"设备完好率", value: arr.equipmentIntactRate};
|
|||
|
|
doendPie("pie_equ_good",xjPie,0);
|
|||
|
|
var wxPie = {name:"大修完成率", value: arr.equipmentRepair};
|
|||
|
|
doendPie("pie_equ_repair",wxPie,1);
|
|||
|
|
var byPie = {name:"保养完成率", value: arr.equipmentMaintain};
|
|||
|
|
doendPie("pie_equ_maintain",byPie,2);
|
|||
|
|
doequgood("pie_inspection_run","运行巡检完成率", arr.yxxj,0);
|
|||
|
|
doequgood("pie_inspection_equ","设备巡检完成率",arr.sbxj,1);
|
|||
|
|
var allLine = [
|
|||
|
|
{name:"实际值",value:arr.data},
|
|||
|
|
{name:"目标值",value:arr.data4}
|
|||
|
|
];
|
|||
|
|
var name = "水处理(万m3/D)";
|
|||
|
|
doline("line",allLine,name);
|
|||
|
|
var drugBar = {name:name,value1:arr.data8 ,value2:arr.data9};
|
|||
|
|
//var drugBar = {name:name,value1:[['大连',445000],['潍坊',475000], ['德州',478700], ['枣庄',175000], ['上海' ,395000],['漯河', 355000], ['益阳',475000],['东莞',275000]]
|
|||
|
|
// ,value2:[['大连',455000],['潍坊',485000], ['德州',488700], ['枣庄',195000], ['上海' ,405000],['漯河', 365000], ['益阳',495000],['东莞',205000]]};
|
|||
|
|
doBar("bar",drugBar,0);
|
|||
|
|
});
|
|||
|
|
$.post(ext.contextPath + '/work/mpoint/getValue4Group.do', {bizId:unitId} , function(data) {
|
|||
|
|
var arr= JSON.parse(data);
|
|||
|
|
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
|
|||
|
|
for(var i=0;i<arr.rows.length;i++){
|
|||
|
|
$("#"+arr.rows[i].elementCode).text(arr.rows[i].visualCacheData.value);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
//js获取项目根路径，如： http://localhost:8083/uimcardprj
|
|||
|
|
function getRootPath(){
|
|||
|
|
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
|
|||
|
|
var curWwwPath=window.document.location.href;
|
|||
|
|
//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
|
|||
|
|
var pathName=window.document.location.pathname;
|
|||
|
|
var pos=curWwwPath.indexOf(pathName);
|
|||
|
|
//获取主机地址，如： http://localhost:8083
|
|||
|
|
var localhostPaht=curWwwPath.substring(0,pos);
|
|||
|
|
//获取带"/"的项目名，如：/uimcardprj
|
|||
|
|
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
|
|||
|
|
return(localhostPaht+projectName);
|
|||
|
|
}
|
|||
|
|
function canvasLoad(){
|
|||
|
|
var Width = document.getElementById("box-body").offsetWidth;
|
|||
|
|
document.getElementById('canvas').width=Width;
|
|||
|
|
var scale = Width/920;
|
|||
|
|
document.getElementById('canvas').height=scale*580;
|
|||
|
|
$("#canvas").css("background-size",Width+"px "+scale*580+"px");
|
|||
|
|
context.save();
|
|||
|
|
context.drawImage(beauty, 0, 0, Width, scale*580);
|
|||
|
|
var data =[
|
|||
|
|
/* 手动获取坐标，无数据地块 */
|
|||
|
|
{"count":80000.400,"name":"青庭新地(04-D09)","lnglats":[[410, 562],[443, 577],[423, 616],[393, 600]]}
|
|||
|
|
,{"count":75000.400,"name":"万通中心(04-D10)","lnglats":[[432, 521],[459, 556],[446, 570],[415, 556]]}
|
|||
|
|
];
|
|||
|
|
if(data!=null && data!=undefined && data!=''){
|
|||
|
|
for(var i=0;i<data.length;i++){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
context.save();
|
|||
|
|
context.drawImage(beautyPng, 0, 0, Width, scale*580);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini" style="min-width: 1100px;overflow:auto;">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<!-- 引用top -->
|
|||
|
|
<%--<jsp:include page="/jsp/top.jsp"></jsp:include>--%>
|
|||
|
|
<!-- 菜单栏 -->
|
|||
|
|
<%--<jsp:include page="/jsp/left.jsp"></jsp:include>--%>
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<!-- Content Header (Page header) -->
|
|||
|
|
<section class="content-header">
|
|||
|
|
<h1 id ="head_title"></h1>
|
|||
|
|
<ol class="breadcrumb">
|
|||
|
|
<li>
|
|||
|
|
<!--<a id ='head_firstlevel' href="#"><i class="fa fa-refresh"></i> </a>
|
|||
|
|
<div class="btn-group" role="group" aria-label="...">
|
|||
|
|
<button id="yearButtonId" type="button" class="btn btn-default" style="height:100%;background-color:#238AE5;" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceGroupBlack.do');">
|
|||
|
|
黑
|
|||
|
|
</button>
|
|||
|
|
<button id="monthButtonId" type="button" class="btn btn-default" style="height:100%;background-color:#D4D4D4;" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceGroup.do');">
|
|||
|
|
白
|
|||
|
|
</button>
|
|||
|
|
</div>-->
|
|||
|
|
<button id="yearButtonId" type="button" class="btn btn-default" style="height:100%;background-color:#238AE5;color:#ffffff;" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceGroupBlack.do');">
|
|||
|
|
黑
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
</section>
|
|||
|
|
<!-- Main content -->
|
|||
|
|
<section class="content container-fluid">
|
|||
|
|
<div id="mainAlertdiv"></div>
|
|||
|
|
<div id="subDiv"></div>
|
|||
|
|
<div id="menu4SelectDiv"></div>
|
|||
|
|
<div calss="content-top row" style="height: 60%;">
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div class="box box-white">
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
|
|||
|
|
<div class="box-body">
|
|||
|
|
<div style="height: 50%;width: 100%;">
|
|||
|
|
<div style="height: 33%;width: 100%;">
|
|||
|
|
<div style="height: 100%;width: 30%;float:left;color:#606163;text-align: center;">
|
|||
|
|
<i class="iconfont iconcube"></i>
|
|||
|
|
<div>项目情况</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 100%;width: 70%;float:left;">
|
|||
|
|
<div class="top-left-title-text">在线运营处理能力</div>
|
|||
|
|
<div class="top-left-title-num" id = "zxyyclnl">220m³</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="top-left-fuwu">
|
|||
|
|
<div style="height: 50%;width: 100%;">
|
|||
|
|
<div class="FontColor-Words-Small top-left-fuwu-text">服务面积</div>
|
|||
|
|
<div class="top-left-fuwu-bar">
|
|||
|
|
<div class="progress1">
|
|||
|
|
<div class="progress-bar1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;float:left;">
|
|||
|
|
<span class="sr-only">60% Complete</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="FontColor-Numbers-Light FontSize-Numbers-Small top-left-fuwu-num" id="fwmj">2478</div>
|
|||
|
|
<div class="FontColor-Words-Small" style="width:20%;float:left;text-align:center; ">km²</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 50%;width: 100%;">
|
|||
|
|
<div class="FontColor-Words-Small top-left-fuwu-text">服务人口</div>
|
|||
|
|
<div class="top-left-fuwu-bar">
|
|||
|
|
<div class="progress1">
|
|||
|
|
<div class="progress-bar1" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 70%;float:left;">
|
|||
|
|
<span class="sr-only">40% Complete</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="FontColor-Numbers-Light FontSize-Numbers-Small top-left-fuwu-num" id="fwrk">740</div>
|
|||
|
|
<div class="FontColor-Words-Small" style="width:20%;float:left;text-align:center; ">万人</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 33%;width: 100%;">
|
|||
|
|
<div style="height: 100%;width: 30%;float:left;color:#606163;text-align: center;">
|
|||
|
|
<i class="iconfont iconshuiliang"></i>
|
|||
|
|
<div>水量信息</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 100%;width: 70%;float:left;">
|
|||
|
|
<div class="top-left-title-text">今年累计处理水量</div>
|
|||
|
|
<div id = "data20" class="top-left-title-num" id="jnljclsl">22320.3万吨/日</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 50%;width: 100%;">
|
|||
|
|
<div style="height: 50%;width: 50%;float:left;" id="pie_water">图1</div>
|
|||
|
|
<div style="height: 50%;width: 50%;float:left;" id="pie_mud">图2</div>
|
|||
|
|
<div style="height: 50%;width: 50%;float:left;" id="pie_in">图3</div>
|
|||
|
|
<div style="height: 50%;width: 50%;float:left;" id="pie_out">图4</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="box box-white">
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div id="box-body" class="box-body" style="padding:0;">
|
|||
|
|
<canvas id="canvas" class="canvas-body"></canvas>
|
|||
|
|
<div class="canvas-title" id="canvas-title">
|
|||
|
|
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:right;line-height: 3.5;font-weight: 700;">现有员工</div>
|
|||
|
|
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="canvas-title_allnum">2038</div>
|
|||
|
|
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:right;line-height: 3.5;font-weight: 700;">项目公司</div>
|
|||
|
|
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="canvas-title_runnum">19</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="canvas-text canvas-text-one" id="canvas-text-one">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">漯河BOT：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">5万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="luohe"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="canvas-text canvas-text-two" id="canvas-text-two">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">益阳桃江：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">3万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="taojiang"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">益阳城北：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">8万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="yiyangchengbei"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">益阳城东：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">3万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="chengdong"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="canvas-text canvas-text-three" id="canvas-text-three">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">东莞大朗：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">10万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="dalang"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">东莞雁田：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">5万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="yantian"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">东莞石碣：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">6万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="shijie"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="canvas-text canvas-text-four" id="canvas-text-four">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">青浦厂：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">18万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="qingpu"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="canvas-text canvas-text-five" id="canvas-text-five">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">潍坊沙窝：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">6万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="shawo"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">潍坊高新：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">5万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="gaoxin"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">潍坊城西：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">4万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="chengxi"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">潍坊城北：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">20万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="weifangchengbei"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">山东德州：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">10万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="dezhou"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">枣庄峄城：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">4万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="yicheng"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">枣庄山亭：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">2万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="shanting"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="canvas-text canvas-text-six" id="canvas-text-six" onclick="refreshPage(getRootPath()+'/work/mpoint/overviewProduceBlot.do');">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">大连湾：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">4万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="dalianwan"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">大连凌水：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">8万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="lingshui"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">大连虎滩：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">9万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="hutan"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">泉水河：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">10.5万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="quanshuihe"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">三十里堡：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">2万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="sanshilibao"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-4 font-text">大连后海：</div>
|
|||
|
|
<div class="col-md-3 font-num border-right-one">2万</div>
|
|||
|
|
<div class="col-md-2 font-num" id="houhai"></div>
|
|||
|
|
<div class="col-md-2 font-num">(m3/D)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div class="box box-white">
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body">
|
|||
|
|
<div style="height: calc(50% - 1px);width: 100%;">
|
|||
|
|
<div style="height: 20%;width: 100%;">
|
|||
|
|
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:center;">总设备<br>数量</div>
|
|||
|
|
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="equ_allnum">1233</div>
|
|||
|
|
<div class="FontColor-Words-Small" style="height: 100%;width: 25%;float:left;text-align:center;">投运设备<br>数量</div>
|
|||
|
|
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 100%;width: 25%;float:left;" id="equ_runnum">875</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 40%;width: 100%;" >
|
|||
|
|
<div class="col-md-3 text-center" >
|
|||
|
|
<div id="pie_equ"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-3 text-center" >
|
|||
|
|
<div class="col-md-5 text-center" > 　 </div>
|
|||
|
|
<div class="col-md-6 text-center" style="width: 26px;height: 12px;background: #3883FF;" > 　 </div>
|
|||
|
|
<span class="col-md-12 lable-right_2" id = "tpA">　A类设备</span>
|
|||
|
|
<span class="col-md-12 lable-right_21" ></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-3 text-center" >
|
|||
|
|
<div class="col-md-5 text-center" > 　 </div>
|
|||
|
|
<div class="col-md-6 text-center" style="width: 26px;height: 12px;background: #FE8840;" > 　 </div>
|
|||
|
|
<span class="col-md-12 lable-right_2" id = "tpC" >　C类设备</span>
|
|||
|
|
<span style="height: 100%;width: 100%;" ></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-md-3 text-center" >
|
|||
|
|
<div class="col-md-5 text-center" > 　 </div>
|
|||
|
|
<div class="col-md-6 text-center" style="width: 26px;height: 12px;background: #A84ECB;" > 　 </div>
|
|||
|
|
<span class="col-md-12 lable-right_2" id = "tpB" >　B类设备</span>
|
|||
|
|
<div class="col-md-12 lable-right_21"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 40%;width: 100%;">
|
|||
|
|
<div style="height: 100%;width: 33%;float:left;" id="pie_equ_good"></div>
|
|||
|
|
<div style="height: 100%;width: 33%;float:left;" id="pie_equ_repair"></div>
|
|||
|
|
<div style="height: 100%;width: 33%;float:left;" id="pie_equ_maintain"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: calc(100% - 20px);height: 2px;margin:0 10px;opacity: 0.23;border: 1px solid #c4e2e6;"></div>
|
|||
|
|
<div style="height: calc(50% - 1px);width: 100%;">
|
|||
|
|
<div style="height: 50%;width: 100%;">
|
|||
|
|
<div style="height: 100%;width: 30%;float:left;">
|
|||
|
|
<div class="FontSize-Numbers-Medium FontColor-Numbers-Green" style="height: 50%;width: 100%;text-align:center;padding-top: 10%;" id= "equipmentAnomaliesTotal">1230</div>
|
|||
|
|
<div class="FontColor-Words-Small" style="height: 50%;width: 100%;text-align:center;padding-top:10%;">异常数量</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 100%;width: 70%;float:left;">
|
|||
|
|
<div style="height: 50%;width: 100%;padding-top:5%;">
|
|||
|
|
<div class="FontColor-Words-Small" style="width:35%;float:left;">运行异常数量</div>
|
|||
|
|
<div style="padding-top:5px;width:40%;float:left;">
|
|||
|
|
<div class="progress1">
|
|||
|
|
<div class="progress-bar1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id = "equipmentRunAnomaliesstyle" style="float:left;">
|
|||
|
|
<span class="sr-only">60% Complete</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="FontColor-Numbers-Light FontSize-Numbers-Xsmall" id="equipmentRunAnomalies" style="text-align:right;width:25%;float:left;">390/600</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 50%;width: 100%;padding-top:5%;">
|
|||
|
|
<div class="FontColor-Words-Small" style="width:35%;float:left;">设备异常数量</div>
|
|||
|
|
<div style="padding-top:5px;width:40%;float:left;">
|
|||
|
|
<div class="progress1">
|
|||
|
|
<div class="progress-bar1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" id = "equipmentToAnomaliesstyle" style="width: 70%;float:left;">
|
|||
|
|
<span class="sr-only">40% Complete</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="FontColor-Numbers-Light FontSize-Numbers-Xsmall" id="equipmentToAnomalies" style="text-align:right;width:25%;float:left;">600/630</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 50%;width: 100%;">
|
|||
|
|
<div style="height: 100%;width: 50%;float:left;" id="pie_inspection_run"></div>
|
|||
|
|
<div style="height: 100%;width: 50%;float:left;" id="pie_inspection_equ"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div calss="content-bottom row" style="height: 40%;">
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="box box-white">
|
|||
|
|
<div class="box-body">
|
|||
|
|
<div class="tabs-basic" style="height: 100%;width: 14%;float:left;">
|
|||
|
|
<ul class="nav nav-pills nav-stacked" style="height: 100%;">
|
|||
|
|
<li class="active" style="height: 25%;" id="water">
|
|||
|
|
<a href="#" style="height:100%;width:100%;">
|
|||
|
|
<i class="iconfont iconshuidi" style="color:#a3d4ff;height:100%;width:20%;float:left;"></i>
|
|||
|
|
<span class="title_text" style="height:50%;width:80%;float:left;">水处理(万m3/D)</span>
|
|||
|
|
<span id="data16" style="height:50%;width:80%;float:left;font-size:18px;">121.5</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li style="height: 25%;" id="ud">
|
|||
|
|
<a href="#" style="height:100%;width:100%;">
|
|||
|
|
<i class="iconfont iconni" style="color:#D56C6D;height:100%;width:20%;float:left;"></i>
|
|||
|
|
<span class="title_text" style="height:50%;width:80%;float:left;">泥处理(吨)</span>
|
|||
|
|
<span id="data17" style="height:50%;width:80%;float:left;font-size:18px;">11,304</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li style="height: 25%;" id="ele">
|
|||
|
|
<a href="#" style="height:100%;width:100%;">
|
|||
|
|
<i class="iconfont icondian" style="color:#FFA14F;height:100%;width:20%;float:left;"></i>
|
|||
|
|
<span class="title_text" style="height:50%;width:80%;float:left;">用电量(kW)</span>
|
|||
|
|
<span id="data18" style="height:50%;width:80%;float:left;font-size:18px;">23,325</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li style="height: 25%;" id="drug">
|
|||
|
|
<a href="#" style="height:100%;width:100%;">
|
|||
|
|
<i class="iconfont iconyaoji" style="color:#F957FA;height:100%;width:20%;float:left;"></i>
|
|||
|
|
<span class="title_text" style="height:50%;width:80%;float:left;">吨水电耗(kW)</span>
|
|||
|
|
<span id="data19" style="height:50%;width:80%;float:left;font-size:18px;">12,021</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 100%;width: 86%;float:left;">
|
|||
|
|
<div class="tab-pane active" style="height: 100%;width: 100%;padding:10px 20px;">
|
|||
|
|
<div class="row" style="height: 100%;">
|
|||
|
|
<div class="col-md-6" id="line"></div>
|
|||
|
|
<div class="col-md-6" id="bar"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-content -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<!-- /.content -->
|
|||
|
|
</div>
|
|||
|
|
<%--<jsp:include page="/jsp/bottom.jsp"></jsp:include>--%>
|
|||
|
|
<%--<jsp:include page="/jsp/side.jsp"></jsp:include>--%>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|